:root { --ink:#182028; --muted:#68727c; --line:#e9edf0; --surface:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:#e9ecef; color:var(--ink); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; z-index:-1; inset:0; background:radial-gradient(circle at 50% -15%,#fff 0,transparent 55%),radial-gradient(circle at 92% 82%,#dce3e8 0,transparent 36%); pointer-events:none; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:3px solid #5b84cd; outline-offset:3px; }
svg { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
svg .fill { fill:currentColor; stroke:none; }
.symbols { position:absolute; width:0; height:0; overflow:hidden; }
.page-shell { width:min(100% - 32px,532px); margin:34px auto 24px; }
.card { overflow:hidden; border:1px solid rgba(255,255,255,.9); border-radius:31px; background:var(--surface); box-shadow:0 23px 80px rgba(24,37,46,.14),0 3px 14px rgba(24,37,46,.045); }
.cover { position:relative; height:175px; overflow:hidden; background:radial-gradient(circle at 94% -25%,#526986 0,transparent 42%),radial-gradient(circle at 4% 120%,#384f63 0,transparent 45%),#17242f; color:#fff; }
.cover::before,.cover::after { content:""; position:absolute; width:390px; height:390px; border:1px solid rgba(255,255,255,.115); border-radius:50%; pointer-events:none; }
.cover::before { top:-297px; right:-139px; box-shadow:0 0 0 51px rgba(255,255,255,.025),0 0 0 105px rgba(255,255,255,.015); }
.cover::after { bottom:-335px; left:-176px; box-shadow:0 0 0 46px rgba(255,255,255,.025); }
.cover-top { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:23px 26px; }
.card-label { display:inline-flex; align-items:center; gap:9px; color:#e7edf0; font-size:10px; font-weight:750; letter-spacing:.19em; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#b7e0c0; box-shadow:0 0 0 4px rgba(183,224,192,.11); }
.icon-button { display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid rgba(255,255,255,.24); border-radius:11px; background:rgba(255,255,255,.08); color:#fff; cursor:pointer; transition:background .2s ease,transform .2s ease; }
.icon-button:hover { background:rgba(255,255,255,.16); transform:translateY(-2px); }
.icon-button svg { width:17px; height:17px; }
.cover-decoration { position:absolute; right:23px; bottom:-10px; color:rgba(255,255,255,.085); font-size:clamp(68px,17vw,112px); font-weight:850; letter-spacing:-.1em; line-height:1; user-select:none; }
.card-body { padding:0 27px 30px; }
.profile-top { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:-65px; }
.portrait { position:relative; z-index:2; width:130px; height:130px; flex:none; overflow:hidden; border:5px solid #fff; border-radius:30px; background:#d7e0e5; box-shadow:0 10px 25px rgba(25,43,54,.16); }
.portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:65% 24%; }
.verified-label { display:inline-flex; align-items:center; gap:6px; max-width:160px; margin-bottom:6px; color:#688092; font-size:10px; font-weight:800; letter-spacing:.04em; line-height:1.25; text-align:right; }
.verified-label span { color:#4b80bc; font-size:17px; line-height:1; }
.intro { padding:20px 0 0; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:6px; font-size:clamp(29px,6.7vw,36px); font-weight:820; letter-spacing:-.052em; line-height:1.09; }
.period { color:#507fb7; }
.alias { margin-bottom:8px; color:#506b81; font-size:13px; }
.alias strong { font-weight:850; }
.role { margin-bottom:0; color:var(--muted); font-size:12px; line-height:1.6; }
.role span { padding:0 2px; color:#aab4be; }
.quick-actions { display:grid; grid-template-columns:.95fr 1.45fr 1.15fr; gap:8px; margin-top:24px; }
.quick-actions a,.quick-actions button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:0; min-height:45px; padding:0 11px; border:1px solid #e4e9ed; border-radius:12px; background:#f8fafb; color:#263946; font-size:11px; font-weight:750; cursor:pointer; transition:transform .2s ease,background .2s ease,border-color .2s ease; white-space:nowrap; }
.quick-actions a:hover,.quick-actions button:hover { transform:translateY(-2px); border-color:#cfdae4; background:#f1f5f8; }
.quick-actions .call-button { border-color:#192b36; background:#192b36; color:#fff; }
.quick-actions .call-button:hover { background:#30475a; }
.quick-actions svg { width:16px; height:16px; flex:none; }
.phone-line { display:flex; align-items:center; gap:12px; min-height:69px; margin-top:17px; padding:11px 14px; border:1px solid #e8edf0; border-radius:14px; background:#fbfcfd; transition:border-color .2s ease,background .2s ease; }
.phone-line:hover { border-color:#c4d6e2; background:#f5f9fc; }
.phone-line-icon { display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:11px; background:#e7f0f8; color:#476c98; }
.phone-line-icon svg { width:17px; height:17px; }
.phone-line > span:nth-child(2) { display:grid; gap:3px; }
.phone-line small { color:#82909a; font-size:9px; font-weight:800; letter-spacing:.14em; }
.phone-line strong { font-size:14px; font-weight:770; letter-spacing:.005em; }
.end-arrow { width:17px; height:17px; flex:none; margin-left:auto; color:#879aa8; }
.section { margin-top:32px; }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-bottom:15px; }
.section-index { display:block; color:#84929e; font-size:9px; font-weight:850; letter-spacing:.18em; }
.section h2,.about h2 { margin:5px 0 0; font-size:19px; font-weight:790; letter-spacing:-.035em; }
.section-count { padding-bottom:2px; color:#a1adb6; font-size:11px; font-weight:750; }
.project-list { display:grid; gap:10px; }
.project { display:block; overflow:hidden; border:1px solid transparent; border-radius:17px; transition:transform .23s ease,box-shadow .23s ease; }
.project:hover { transform:translateY(-3px); box-shadow:0 12px 25px rgba(24,31,40,.12); }
.project-main { display:flex; align-items:center; justify-content:space-between; height:77px; padding:13px 17px; }
.project-main img { display:block; width:auto; max-width:60%; max-height:47px; object-fit:contain; object-position:left center; }
.project-link-icon { display:grid; place-items:center; width:31px; height:31px; flex:none; border-radius:10px; background:rgba(255,255,255,.72); color:#38424c; }
.project-link-icon svg { width:15px; height:15px; }
.project-bottom { display:flex; align-items:end; justify-content:space-between; gap:10px; min-height:58px; padding:9px 17px 12px; border-top:1px solid rgba(38,43,59,.08); }
.project-copy { display:grid; gap:3px; min-width:0; }
.project-copy strong { font-size:12px; font-weight:800; }
.project-copy small { color:#69737b; font-size:10px; line-height:1.3; }
.project-domain { flex:none; padding-bottom:1px; color:#6b7881; font-size:10px; font-weight:700; }
.project-neyin { background:#f2ebfc; border-color:#e9dcfa; }
.project-neyin .project-main { background:radial-gradient(circle at 85% 30%,#e8d7fd,transparent 43%); }
.project-mevzu { background:#fbf3f6; border-color:#f2e2e9; }
.project-mevzu .project-main { background:radial-gradient(circle at 85% 20%,#f8e0e9,transparent 41%); }
.project-kumpir { background:#19202b; border-color:#19202b; color:#f8f3e7; }
.project-kumpir .project-main { background:radial-gradient(circle at 82% 15%,rgba(222,175,96,.15),transparent 47%); }
.project-kumpir .project-main img { max-height:48px; }
.project-kumpir .project-link-icon { background:rgba(255,255,255,.1); color:#f7e6bd; }
.project-kumpir .project-bottom { border-color:rgba(255,255,255,.13); }
.project-kumpir .project-copy small,.project-kumpir .project-domain { color:#d3c4a3; }
.about { margin-top:27px; padding:20px; border:1px solid #e8eced; border-radius:17px; background:#f7f9f9; }
.about h2 { margin-top:7px; }
.about p { margin:9px 0 0; color:#5f6d74; font-size:11px; line-height:1.75; }
.card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 27px 22px; border-top:1px solid #edf0f1; color:#91a0a9; font-size:10px; }
.card-footer span:last-child { color:#58758a; font-weight:800; }
.card-footer span:last-child span { padding-left:3px; color:#87a4bb; }
.page-note { margin:18px 0 0; color:#85929d; font-size:10px; font-weight:650; letter-spacing:.045em; text-align:center; }
.toast { position:fixed; z-index:10; right:18px; bottom:18px; max-width:calc(100% - 36px); padding:12px 17px; border-radius:12px; background:#192b36; color:#fff; box-shadow:0 12px 28px rgba(12,27,37,.2); font-size:12px; font-weight:700; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .2s ease,transform .2s ease,visibility .2s ease; }
.toast.visible { opacity:1; visibility:visible; transform:translateY(0); }
@media (max-width:600px) {
    body { background:#fff; }
    body::before { display:none; }
    .page-shell { width:100%; margin:0; }
    .card { border:0; border-radius:0; box-shadow:none; }
    .cover { height:170px; }
    .page-note { padding-bottom:24px; }
}
@media (max-width:380px) {
    .card-body { padding-right:20px; padding-left:20px; }
    .cover-top { padding-right:20px; padding-left:20px; }
    .verified-label { max-width:132px; font-size:9px; }
    .quick-actions { gap:6px; }
    .quick-actions a,.quick-actions button { gap:5px; padding:0 7px; font-size:10px; }
    .project-main img { max-width:66%; max-height:43px; }
    .project-domain { font-size:9px; }
    .card-footer { padding-right:20px; padding-left:20px; }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}
