/* ===== FX katmanı: yaratıcı yazılımcı sitesi ===== */
body:not(.ready){overflow:hidden}
body:not(.ready) .hero .reveal.in,body:not(.ready) .cover .reveal.in{opacity:0;transform:translateY(30px);filter:blur(6px);transition:none}
body:not(.ready) .nav-wrap{opacity:0;transform:translateY(-30px)}
.nav-wrap{transition:opacity .8s .2s,transform .8s .2s cubic-bezier(.16,1,.3,1)}

/* intro */
#intro{position:fixed;inset:0;z-index:500;color:#ff7a2a;font-family:var(--mono);cursor:pointer}
#intro .cv{position:absolute;left:0;right:0;height:50%;background:#0d0e11;transition:transform 1s cubic-bezier(.77,0,.18,1)}
#intro .ct{top:0;border-bottom:1px solid #ff7a2a22}#intro .cb{bottom:0}
#intro.open .ct{transform:translateY(-101%)}#intro.open .cb{transform:translateY(101%)}
#intro .ic{position:absolute;inset:0;padding:clamp(20px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;transition:opacity .3s}
#intro.open .ic{opacity:0}
#intro .it,#intro .ib{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.14em;color:#5f7a66}
#intro .il{font-size:clamp(12px,1.25vw,15px);line-height:2.05;min-height:10em;color:#8aa593}
#intro .il div{opacity:0;transform:translateX(-10px);animation:lin .3s forwards}
#intro .il .ok{color:#ff7a2a}
#intro .il .gr{font:800 clamp(34px,7vw,100px)/1 'Inter',sans-serif;letter-spacing:-.04em;margin-top:18px;color:#ff7a2a;text-shadow:0 0 40px #ff7a2a66}
#intro .ip{position:absolute;right:clamp(20px,4vw,56px);top:50%;transform:translateY(-50%);font:800 clamp(90px,17vw,260px)/.8 'Inter',sans-serif;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px #2c4633;font-variant-numeric:tabular-nums}
#intro .iln{position:absolute;left:0;bottom:0;height:3px;width:100%;background:#ff7a2a;transform-origin:left;transform:scaleX(0);box-shadow:0 0 20px #ff7a2a}
#intro .sk{animation:blink 1.3s steps(2) infinite}
@keyframes lin{to{opacity:1;transform:none}}
@media(max-width:700px){#intro .ip{top:auto;bottom:90px;transform:none;font-size:34vw}}

/* custom cursor */
html.fx-cursor,html.fx-cursor *{cursor:none!important}
/* Açık bir modal üst katmana çıkar; özel imleç onun arkasında kalır. Bu sırada sistem imleci geri gelir. */
html.fx-cursor:has(dialog[open]),html.fx-cursor:has(dialog[open]) *{cursor:auto!important}
html.fx-cursor:has(dialog[open]) :is(a,button,summary,[role=button],label){cursor:pointer!important}
html:has(dialog[open]) #c-dot,html:has(dialog[open]) #c-ring{opacity:0!important}
#c-dot,#c-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:600;border-radius:50%;opacity:0;transition:opacity .3s}
#c-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#ff7a2a}
#c-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid #ff7a2a99;transition:width .3s,height .3s,margin .3s,background .3s,border-color .3s,opacity .3s}
#c-ring.hov{width:68px;height:68px;margin:-34px 0 0 -34px;background:#ff7a2a1f;border-color:#ff7a2a}
#c-ring.down{width:26px;height:26px;margin:-13px 0 0 -13px}

/* 3D globe canvas */
#globe{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero h1{text-shadow:0 0 80px #ff7a2a18}

/* scramble */
[data-scramble]{font-variant-ligatures:none}

/* manifesto */
.manifesto{height:240vh;position:relative;margin-top:60px}
.man-in{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:1100px;margin:0 auto;padding:0 24px;gap:30px}
#man-text{font-size:clamp(28px,4.6vw,66px);line-height:1.12;letter-spacing:-.035em;font-weight:700;margin:0}
#man-text .w{opacity:.14;transition:opacity .25s,color .25s,text-shadow .25s;display:inline-block}
#man-text .w.on{opacity:1}
#man-text .w.hot{color:#ff7a2a;text-shadow:0 0 30px #ff7a2a77}

/* telemetry */
.scope{border:1px solid var(--line);border-radius:26px;background:linear-gradient(180deg,#0c0f14,#080a0e);overflow:hidden;box-shadow:0 40px 100px #000a}
.scope-top{display:flex;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--line);font:12px var(--mono);color:var(--muted)}
.scope-top .dot{margin-right:8px}
#scope{display:block;width:100%;height:280px}
.gauges{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.gauge{position:relative;padding:28px 20px 24px;text-align:center;border-left:1px solid var(--line);transition:background .3s}
.gauge:first-child{border:0}.gauge:hover{background:#ff7a2a08}
.gauge .ring{--p:0;width:110px;height:110px;margin:0 auto;border-radius:50%;background:conic-gradient(from -135deg,#ff7a2a calc(var(--p)*270deg),#ffffff12 0 270deg,transparent 0);-webkit-mask:radial-gradient(circle,transparent 46px,#000 47px);mask:radial-gradient(circle,transparent 46px,#000 47px);filter:drop-shadow(0 0 10px #ff7a2a55)}
.gauge b{position:absolute;left:0;right:0;top:63px;font:700 22px 'Inter';letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.gauge b em{font:400 11px var(--mono);font-style:normal;color:var(--muted);margin-left:3px}
.gauge small{display:block;margin-top:14px;font:11px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}

/* HUD */
#hud{position:fixed;right:18px;bottom:16px;z-index:80;display:flex;gap:14px;align-items:center;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:#0b0d12cc;backdrop-filter:blur(14px);font:11px var(--mono);color:var(--muted);letter-spacing:.05em}
#hud b{color:var(--a1);font-weight:500}#hud kbd{border:1px solid var(--line);border-radius:5px;padding:1px 6px;font:inherit;color:var(--text)}
#hud button{color:var(--a1)}#hud button:hover{color:#fff}

/* dialogs */
dialog{background:#0c0f14;color:var(--text);border:1px solid #ff7a2a40;border-radius:20px;width:min(640px,calc(100% - 28px));padding:0;box-shadow:0 40px 140px #000,0 0 80px #ff7a2a12;overflow:hidden}
dialog::backdrop{background:#02040acc;backdrop-filter:blur(8px)}
dialog[open]{animation:dlg .35s cubic-bezier(.16,1,.3,1)}@keyframes dlg{from{opacity:0;transform:translateY(24px) scale(.97)}}
#pal input{width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:22px 24px;color:var(--text);font:17px 'Inter';outline:0}
#pal-list{padding:10px;display:grid;gap:2px;max-height:340px;overflow:auto}
#pal-list button{display:flex;justify-content:space-between;padding:13px 16px;border-radius:12px;text-align:left;font-size:15px}
#pal-list button small{font:11px var(--mono);color:var(--muted)}
#pal-list button.sel,#pal-list button:hover{background:#ff7a2a14;color:var(--a1)}
.dh{padding:14px 20px;border-bottom:1px solid var(--line);font:12px var(--mono);color:var(--muted);display:flex;justify-content:space-between}
#term-out{padding:20px 24px;font:13px/1.9 var(--mono);height:340px;overflow:auto;white-space:pre-wrap;color:#b8bfca}
/* koyu, ince kaydırma çubukları (sayfa, terminal, komut paleti) */
html,#term-out,#pal-list{scrollbar-width:thin;scrollbar-color:#ffffff30 transparent}
#term-out::-webkit-scrollbar,#pal-list::-webkit-scrollbar{width:8px}
#term-out::-webkit-scrollbar-track,#pal-list::-webkit-scrollbar-track{background:transparent}
#term-out::-webkit-scrollbar-thumb,#pal-list::-webkit-scrollbar-thumb{background:#ffffff30;border-radius:8px}
#term-out::-webkit-scrollbar-thumb:hover,#pal-list::-webkit-scrollbar-thumb:hover{background:#ff7a2a99}
#term-out .ok{color:#5fe39a}#term-out .dim{color:#6b7280}#term-out .hl{color:var(--a1)}
#term-out .p{color:var(--a1)}#term-out .e{color:#ff7a7a}
#term-form{display:flex;gap:10px;padding:0 24px 22px;font:13px var(--mono);color:var(--a1)}
#term-in{flex:1;background:none;border:0;color:var(--text);font:13px var(--mono);outline:0}
.dh button{color:var(--muted)}.dh button:hover{color:var(--text)}

/* matrix + toast */
#rain{position:fixed;inset:0;z-index:300;pointer-events:none;opacity:0;transition:opacity .6s;mix-blend-mode:screen}
#rain.on{opacity:.85}
#toast{position:fixed;left:50%;bottom:70px;translate:-50% 20px;z-index:700;padding:12px 20px;border-radius:999px;background:#ff7a2a;color:#0d0e11;font:600 13px var(--mono);opacity:0;transition:.4s;pointer-events:none}
#toast.show{opacity:1;translate:-50% 0}
body.glitch main{animation:glitchy .5s steps(2) 3}
@keyframes glitchy{0%{transform:translate(3px,0);filter:hue-rotate(40deg)}50%{transform:translate(-3px,2px);filter:hue-rotate(-40deg)}100%{transform:none}}

/* marquee skew + glitch hover */
.track{transition:transform .2s}
.logo:hover .logo-mark{animation:glitchy .3s steps(2) 2}
.final h2,.sec-head h2{cursor:default}

@media(max-width:900px){.manifesto{height:200vh}.gauges{grid-template-columns:1fr 1fr}.gauge:nth-child(3){border-left:0}.gauge:nth-child(n+3){border-top:1px solid var(--line)}#hud span.hide-m{display:none}}
@media(max-width:560px){#hud{left:12px;right:12px;justify-content:space-between;bottom:10px}#scope{height:200px}}
@media(prefers-reduced-motion:reduce){#globe,#rain{display:none}.manifesto{height:auto;margin:80px 0}.man-in{position:static;height:auto}#man-text .w{opacity:1}}

/* ===== Cover: eski siteden esinlenen karşılama ===== */
body{background:radial-gradient(ellipse 90% 70% at 50% 35%,#1b1e25,#0d0e11 70%)}
.cover{min-height:100vh;display:grid;place-items:center;padding:100px 24px 60px;text-align:center;position:relative}
.cover-in{display:flex;flex-direction:column;align-items:center}
.cover h1{font-size:clamp(34px,4.2vw,68px);font-weight:600;letter-spacing:-.035em;line-height:1.05;text-shadow:0 4px 50px #000}
.owner{margin:20px 0 0;font-size:clamp(16px,1.6vw,22px);font-weight:500;color:#e9eaee}
.owner a{color:#ff7a2a;position:relative}.owner a:after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:#ff7a2a;transform:scaleX(0);transform-origin:left;transition:transform .4s}.owner a:hover:after{transform:scaleX(1)}
.explore{position:relative;margin-top:clamp(40px,7vh,80px);padding:20px 30px;font-size:16px;font-weight:500;color:#fff;letter-spacing:.01em;transition:color .3s}
.explore i{position:absolute;width:10px;height:10px;border:1px solid #ffffffaa;transition:all .35s cubic-bezier(.2,.7,.2,1)}
.explore i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}.explore i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.explore i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}.explore i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.explore:hover i{width:100%;height:100%;border-color:#ff7a2a}.explore:hover{color:#ff7a2a}
.cover~.hero{padding-top:110px}

/* sol nokta navigasyonu */

/* sağ alt: scroll to explore */
#scrollcue{position:fixed;right:34px;bottom:56px;width:106px;height:106px;border-radius:50%;border:1px solid #ffffff55;display:grid;place-items:center;z-index:85;font:500 13px/1.45 'Inter';text-align:center;color:#fff;transition:opacity .5s,transform .5s,border-color .3s,background .3s}
#scrollcue i{position:absolute;inset:-1px;border-radius:50%;animation:orbit 6s linear infinite}
#scrollcue i:after{content:'';position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#3d5cff;box-shadow:0 0 12px #3d5cff}
#scrollcue:hover{border-color:#ff7a2a;background:#ff7a2a14}
#scrollcue.hide{opacity:0;transform:scale(.7);pointer-events:none}
@keyframes orbit{to{transform:rotate(360deg)}}

@media(min-width:561px){#hud{right:auto;left:50%;translate:-50% 0}}
@media(max-width:900px){#scrollcue{right:14px;bottom:60px;width:84px;height:84px;font-size:11px}}
@media(max-width:560px){#scrollcue{display:none}}


/* nötr gri atmosfer (renkli lekeler kaldırıldı) */
.aurora i:nth-child(1){background:#8791a3;opacity:.09;left:20%;top:-20%}
.aurora i:nth-child(2){background:#5b6578;opacity:.08;right:5%;top:10%}
.aurora i:nth-child(3){background:#4b5263;opacity:.06}
.grid-bg{opacity:.5}

/* kesintisiz gradyan başlıklar */
.grad{background-image:linear-gradient(100deg,#ff7a2a,#ffc89a,#ff7a2a);background-repeat:repeat-x;background-size:200% 100%}

/* YouTube küçük bağlantı */
.yt-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;font:500 12px var(--mono);color:var(--muted);transition:color .3s}
.yt-link svg{color:#ff3b30;flex:none}.yt-link span{transition:transform .25s}
.yt-link:hover{color:#fff}.yt-link:hover span{transform:translate(3px,-3px)}

/* bento düzeni: boşluk kalmasın */
@media(min-width:901px){.bento .card:nth-child(3),.bento .card:nth-child(4){grid-column:span 3}.bento .card.wide{grid-column:span 6;min-height:190px}}

/* ===== Database bölümü ===== */
.db{border:1px solid var(--line);border-radius:26px;background:linear-gradient(180deg,#ffffff0a,#ffffff03);overflow:hidden;box-shadow:0 40px 100px #0008}
.db-top{padding:22px 24px;border-bottom:1px solid var(--line);display:grid;gap:14px}
.db-search{display:flex;align-items:center;gap:12px;padding:6px 6px 6px 18px;border:1px solid var(--line);border-radius:999px;background:#0a0b0e;transition:border-color .3s,box-shadow .3s}
.db-search:focus-within{border-color:#ff7a2a88;box-shadow:0 0 0 4px #ff7a2a14}
.db-search svg{color:var(--muted);flex:none}
.db-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:15px 'Inter';padding:10px 0}
.db-search input::placeholder{color:#6b7380}
.db-search .btn{padding:11px 20px;font-size:14px;white-space:nowrap}
.db-meta{display:flex;justify-content:space-between;font:11px var(--mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.db-meta .dot{margin-right:8px}
.db-body{display:grid;grid-template-columns:1.7fr 1fr;min-height:420px}
.db-tablewrap{overflow:auto;border-right:1px solid var(--line)}
.db-table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
.db-table th{position:sticky;top:0;text-align:left;padding:14px 16px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:#0d0e12;border-bottom:1px solid var(--line)}
.db-table td{padding:14px 16px;border-bottom:1px solid #ffffff0d;color:#c3c9d3;font-variant-numeric:tabular-nums}
.db-table td.k{color:var(--text);font-weight:600}
.db-table td.go{color:var(--a1);font:12px var(--mono);opacity:0;transform:translateX(-6px);transition:.3s}
.db-table tbody tr{cursor:pointer;transition:background .2s;outline:0}
.db-table tbody tr:hover,.db-table tbody tr:focus-visible{background:#ff7a2a10}
.db-table tbody tr:hover .go,.db-table tbody tr:focus-visible .go,.db-table tbody tr.on .go{opacity:1;transform:none}
.db-table tbody tr.on{background:#ff7a2a18;box-shadow:inset 3px 0 0 var(--a1)}
.db-empty{padding:40px 24px;color:var(--muted);text-align:center}
.db-detail{padding:24px;background:#0a0b0e66}
.db-ph{height:100%;display:grid;place-content:center;text-align:center;color:var(--muted);min-height:260px}.db-ph b{color:var(--text);font-size:16px}.db-ph p{margin:6px 0 0;font-size:14px}
.db-dh small{font:11px var(--mono);letter-spacing:.1em;color:var(--a1)}
.db-dh b{display:block;font-size:19px;line-height:1.25;letter-spacing:-.02em;margin:8px 0 18px}
.db-detail dl{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.db-detail dl>div{padding:11px 16px;border-top:1px solid var(--line)}.db-detail dl>div:first-child{border:0}
.db-detail dt{font:500 11px var(--mono);color:var(--muted);letter-spacing:.06em}.db-detail dd{margin:3px 0 0;font-size:14px;word-break:break-word}
.db-note{margin:16px 0 0;padding:14px 16px;border:1px dashed var(--line);border-radius:12px;font-size:13px;color:var(--muted)}.db-note a{color:var(--a1);text-decoration:underline;text-underline-offset:3px}
.db-detail.pop>*{animation:dbin .5s cubic-bezier(.16,1,.3,1) both}.db-detail.pop dl{animation-delay:.06s}.db-detail.pop .db-note{animation-delay:.12s}
@keyframes dbin{from{opacity:0;transform:translateY(10px)}}
.db-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;padding:16px 24px;border-top:1px solid var(--line);font:12px var(--mono);color:var(--muted)}
@media(max-width:900px){.db-body{grid-template-columns:1fr}.db-tablewrap{border-right:0;border-bottom:1px solid var(--line)}.db-search .btn{padding:10px 14px;font-size:13px}}
@media(max-width:560px){.db-search{border-radius:22px;flex-wrap:wrap;padding:12px}.db-search input{flex-basis:70%}.db-search .btn{width:100%;justify-content:center}}
.db-tablewrap{scrollbar-width:thin;scrollbar-color:#ffffff30 transparent}
.db-tablewrap::-webkit-scrollbar{height:6px}.db-tablewrap::-webkit-scrollbar-thumb{background:#ffffff30;border-radius:6px}
.db-table th{color:#8a93a3}

.more a{padding:24px 26px 24px 94px;min-height:112px}
.more .mico{position:absolute;left:24px;top:24px;width:52px;height:52px;border-radius:13px}
.more a em{font:400 14px/1.5 Inter,sans-serif;color:var(--muted);margin-top:6px;padding-right:34px}
.more a span{top:30px;translate:none}
/* mağaza linkleri */
.app-info .link{margin-right:22px}
.more .mc{position:relative;display:flex;flex-direction:column;padding:24px 26px 22px 94px;border:1px solid var(--line);border-radius:18px;transition:border-color .3s,background .3s,transform .3s}
.more .mc:hover{border-color:#ff7a2a55;background:#ff7a2a0a;transform:translateY(-3px)}
.more .mc b{font-size:18px;font-weight:600}
.more .mc em{padding-right:0}
.more .stores{display:flex;gap:22px;margin-top:14px}
.more .stores a{position:static;display:inline-flex;gap:8px;padding:0;min-height:0;border:0;background:none;font:600 14px Inter,sans-serif;color:var(--a1);transform:none}
.more .stores a:hover{background:none;transform:none}
.more .stores a span{position:static;translate:none;transition:transform .25s}
.more .stores a:hover span{transform:translate(4px,-3px)}
@media(max-width:560px){.more .mc{padding-left:26px;padding-top:88px}}
.more .mc em{font-style:normal}
.more .stores a{flex-direction:row;align-items:center;white-space:nowrap;font-size:15px}
.more .mc em{color:var(--muted);font:400 14px/1.5 Inter,sans-serif;margin-top:6px}
.co p+p{margin-top:14px}

.cos .co:nth-child(3){grid-column:1/-1}
.db-foot{flex-wrap:wrap;gap:8px 22px}

/* büyük, kullanılabilir terminal */
.cover~.hero{padding-top:90px;padding-bottom:20px}
.hero-visual{max-width:1060px;margin-top:0}
.window{transform:none!important}
.win-body{height:min(560px,70vh);min-height:0;overflow-y:auto;padding:26px 30px 30px;font-size:14.5px;line-height:1.75;white-space:normal;scrollbar-width:thin;scrollbar-color:#ffffff2a transparent;cursor:text}
.win-body::-webkit-scrollbar{width:8px}.win-body::-webkit-scrollbar-thumb{background:#ffffff2a;border-radius:8px}
.tl{white-space:pre-wrap;overflow-wrap:anywhere}
.tl.c,.tl.u{color:#e6e9ef}.tl.m{color:#6c7480}.tl.ok{color:#b8bfca}.tl .ok{color:#28c840}
.tl.u{margin-top:14px}
.tl.a{margin-top:10px;color:#d6dae2}.tl.e{color:#ff9a6b}
.pa{color:var(--a1);font-weight:600}
.tl a{color:var(--a1);text-decoration:underline;text-underline-offset:3px}
.dots{display:inline-flex;gap:4px;vertical-align:middle}.dots i{width:6px;height:6px;border-radius:50%;background:var(--a1);animation:dtb 1s ease-in-out infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dtb{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.tchips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.tchips button{padding:7px 13px;border:1px solid #ff7a2a40;border-radius:999px;font:13px 'Inter',sans-serif;color:#ffb27a;background:#ff7a2a0d;transition:.2s}
.tchips button:hover{background:#ff7a2a22;border-color:#ff7a2a80;transform:translateY(-2px)}
.tin{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:14px;border-top:1px dashed #ffffff1a}
.tin .k{color:var(--a1)}
.tin input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:inherit;caret-color:var(--a1)}
.tin input::placeholder{color:#59616e}
@media(max-width:560px){.win-body{font-size:12.5px;padding:18px;height:min(520px,72vh)}}

/* geliştirdiğim işler */
.works{padding-top:110px}
.works-field{display:grid;grid-template-columns:repeat(var(--cols,19),1fr);gap:10px;max-width:1120px;margin:0 auto}
.wt{aspect-ratio:1;border-radius:12px;position:relative;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .6s cubic-bezier(.2,.8,.2,1) var(--d,0ms),transform .6s cubic-bezier(.3,1.5,.5,1) var(--d,0ms)}
.works-field.in .wt{opacity:1;transform:none}
.wt.gap{visibility:hidden}
.wt.dec{background:linear-gradient(160deg,#ffffff0d,#ffffff04);border:1px solid #ffffff12;color:#ffffff2e}
.wt.dec svg{width:46%;height:46%}
.wt.real{z-index:1;border:1px solid #ffffff38;box-shadow:0 8px 26px #0008,inset 0 1px 0 #ffffff30;background:#161a22;color:#fff}
.works-field.in .wt.real{transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .3s,border-color .3s}
.wt.real img{width:100%;height:100%;border-radius:11px;object-fit:cover}
.wt.real:hover,.wt.real:focus-visible{transform:translateY(-6px) scale(1.12);z-index:5;border-color:#ff7a2a;box-shadow:0 18px 44px #000b,0 0 0 4px #ff7a2a22,0 0 34px #ff7a2a40;outline:0}
.wt.real.o{background:linear-gradient(150deg,#ff8a3d,#e0480e)}
.wt.real.r{background:linear-gradient(150deg,#ff3b3b,#b30d0d)}
.wt.real.b{background:linear-gradient(150deg,#4d6bff,#2a3fc9)}
.wt .wg{width:52%;height:52%}.wt .wm{font:800 clamp(11px,1.6vw,19px) 'Inter',sans-serif;letter-spacing:-.03em}
.tip{position:absolute;bottom:calc(100% + 14px);left:50%;width:250px;padding:14px 16px;text-align:left;border:1px solid #ffffff22;border-radius:14px;background:#0f1218f2;backdrop-filter:blur(14px);box-shadow:0 24px 60px #000c;pointer-events:none;opacity:0;transform:translate(-50%,8px) scale(.96);transition:opacity .22s,transform .25s cubic-bezier(.3,1.4,.5,1)}
.tip.l{left:0;transform:translate(0,8px) scale(.96)}.tip.r{left:auto;right:0;transform:translate(0,8px) scale(.96)}
.wt.real:hover .tip,.wt.real:focus-visible .tip{opacity:1;transform:translate(-50%,0) scale(1)}
.wt.real:hover .tip.l,.wt.real:focus-visible .tip.l,.wt.real:hover .tip.r,.wt.real:focus-visible .tip.r{transform:none}
.tip strong{display:block;font-size:15px;margin-bottom:4px;color:#fff;font-weight:600}.tip em{display:block;font-style:normal;font-weight:400;font-size:13px;line-height:1.5;color:var(--muted)}.tip i{display:block;margin-top:10px;font:500 12px var(--mono);font-style:normal;color:var(--a1)}
.wt.real:hover .tip:has(.stores2),.wt.real:focus-within .tip:has(.stores2){pointer-events:auto}
.wt.real:focus-within .tip{opacity:1;transform:translate(-50%,0) scale(1)}.wt.real:focus-within .tip.l,.wt.real:focus-within .tip.r{transform:none}
.tip:has(.stores2):before{content:'';position:absolute;left:-8px;right:-8px;top:100%;height:24px}
.stores2{display:flex;gap:8px;margin-top:12px}
.stores2 a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;border:1px solid #ffffff2e;border-radius:999px;background:#ffffff0d;color:#fff;font:600 12px 'Inter',sans-serif;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.stores2 a span{color:var(--a1);transition:color .2s}
.stores2 a:hover,.stores2 a:focus-visible{background:var(--a1);border-color:var(--a1);color:#0d0e11;outline:0}.stores2 a:hover span,.stores2 a:focus-visible span{color:#0d0e11}
.works-copy{text-align:center;margin-top:64px}
.works-copy h2{font-size:clamp(28px,4.4vw,52px)}.works-copy .dim{color:#ffffff6e}
.works-copy p{color:var(--muted);margin:18px auto 0;max-width:520px}
@media(max-width:719px){.works-field{gap:8px}.wt{border-radius:10px}.tip{width:210px}}

/* marka logoları */
.logogrid{max-width:1100px;margin:70px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lg{display:grid;place-items:center;aspect-ratio:262/110;border-radius:18px;background:linear-gradient(160deg,#ffffff0c,#ffffff04);border:1px solid #ffffff10;transition:transform .4s cubic-bezier(.3,1.5,.5,1),border-color .3s,background .3s,box-shadow .3s}
.lg img{width:76%;height:auto;opacity:.78;transition:opacity .3s,transform .4s}
.lg:hover{transform:translateY(-4px);border-color:#ff7a2a45;background:linear-gradient(160deg,#ff7a2a12,#ffffff04);box-shadow:0 20px 50px #0007}
.lg:hover img{opacity:1;transform:scale(1.05)}
.logogrid.reveal .lg{opacity:0;transform:translateY(16px);transition:opacity .6s calc(var(--i)*60ms),transform .6s calc(var(--i)*60ms),border-color .3s,background .3s,box-shadow .3s}
.logogrid.reveal.in .lg{opacity:1;transform:none}
.logogrid.reveal.in .lg:hover{transform:translateY(-4px);transition-delay:0s}
@media(max-width:800px){.logogrid{grid-template-columns:repeat(3,1fr);gap:10px}}
@media(max-width:520px){.logogrid{grid-template-columns:repeat(2,1fr)}}

/* logo şeridi: küçük ve sakin */
.logos{margin-top:70px}
.track-wrap .track{align-items:center;gap:64px;animation-duration:46s}
.track img{height:30px;width:auto;opacity:.42;filter:grayscale(1);transition:opacity .3s}
.track img:hover{opacity:.95}
.track .sp{display:block;width:0}
@media(max-width:560px){.track img{height:24px}.track-wrap .track{gap:44px}}
.track .set{display:flex;align-items:center;gap:64px;padding-right:64px}
.track-wrap .track{gap:0}
@media(max-width:560px){.track .set{gap:44px;padding-right:44px}}
.final .mail-line{margin:18px 0 0;font:13px var(--mono)}.final .mail-line a{color:var(--muted);transition:color .2s}.final .mail-line a:hover{color:var(--a1)}
.wt.dec .dc{font:700 clamp(8px,.95vw,12px) var(--mono);letter-spacing:.04em;color:#ffffff40;white-space:nowrap}