/* ═══════════════════════════════════════════════════════════════
   AFTERBODY STUDIOS — v2 "EŞİK"
   Tek yetkili tasarım kaynağı: DESIGN.md
   ⛔ Kural: CSS'in VARSAYILANI bitmiş hâldir. Başlangıç durumları
      sadece `html.motion` altında tanımlanır. JS çökerse sayfa DOLU görünür.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────── 1 · JETONLAR ─────────────── */
:root {
  /* zemin — dışarısı, soğuk */
  --ink-000:#04060A; --ink-100:#080C12; --ink-200:#0E141C; --ink-300:#161E28;
  /* beton / kül */
  --ash-400:#2A323C; --ash-500:#4A535F; --ash-600:#7B8593; --ash-700:#B4BCC7;
  --paper:#E8EBEF;
  /* kehribar — anahtar ışık (içerisi) */
  --amber-core:#FFB761; --amber:#E8933A; --amber-deep:#A85A18;
  /* soğuk — karşı ışık (dışarısı) */
  --cold:#6E9BC4; --hazard:#D8C23A;

  /* tipografi */
  --f-disp:'Oswald', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans KR',
           'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans SC', 'PingFang SC',
           'Microsoft YaHei', 'Noto Naskh Arabic', 'Geeza Pro', sans-serif;
  --f-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
           'Noto Sans JP', 'Hiragino Sans', 'Noto Sans KR', 'Apple SD Gothic Neo',
           'Noto Sans SC', 'PingFang SC', 'Noto Naskh Arabic', 'Geeza Pro',
           'Helvetica Neue', Arial, sans-serif;
  --f-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --t-display:clamp(2.60rem, 1.20rem + 5.40vw, 6.40rem);
  --t-h2:clamp(2.00rem, 1.05rem + 3.60vw, 4.00rem);
  --t-h3:clamp(1.20rem, 1.10rem + 0.45vw, 1.45rem);
  --t-lead:clamp(1.05rem, 0.95rem + 0.60vw, 1.50rem);
  --t-body:clamp(1.00rem, 0.97rem + 0.14vw, 1.0625rem);
  --t-micro:0.6875rem;

  /* ritim */
  --pad:clamp(1.25rem, 0.6rem + 3vw, 4.5rem);
  --sec-y:clamp(5.5rem, 3rem + 8vw, 10rem);
  --maxw:1440px;

  /* süreler — DESIGN.md §4.2, bu altısının dışına çıkma */
  --d-micro:180ms; --d-in:620ms; --d-scene:1100ms; --d-grade:900ms;
  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-io:cubic-bezier(.65,.05,.36,1);
}

/* ─────────────── 2 · TABAN ─────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink-000); color:var(--ash-700);
  font-family:var(--f-body); font-size:var(--t-body); font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body.is-booting{overflow:hidden}
img,video,canvas,svg{display:block;max-width:100%}
img,video{height:auto}
h1,h2,h3,p,blockquote,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
::selection{background:var(--amber-deep);color:var(--paper)}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:fixed;inset-block-start:-100px;inset-inline-start:1rem;z-index:999;
  background:var(--amber);color:#0A0A0A;padding:.6rem 1rem;border-radius:2px;font-weight:600}
.skip:focus{inset-block-start:1rem}

:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}

/* ─────────────── 3 · TİPO SINIFLARI ─────────────── */
.display{
  font-family:var(--f-disp); font-weight:700; font-size:var(--t-display);
  /* 0.94 çok sıkıydı: 'ğ' alt uzantısı bir üst satırın gövdesine giriyordu (ölçüldü) */
  line-height:.99; letter-spacing:-.005em; color:var(--paper);
  text-transform:none; text-wrap:balance;
}
.h2{
  font-family:var(--f-disp); font-weight:700; font-size:var(--t-h2);
  line-height:1.0; letter-spacing:-.004em; color:var(--paper); text-wrap:balance;
}
.micro{
  font-family:var(--f-mono); font-size:var(--t-micro); letter-spacing:.22em;
  text-transform:uppercase; color:var(--ash-600); font-weight:400;
}
.idx{font-family:var(--f-mono);font-size:var(--t-micro);color:var(--ash-500);
  letter-spacing:.14em;font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.24em;
  text-transform:uppercase;color:var(--ash-600)}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--ash-700);max-width:36ch}
.lead--wide{max-width:52ch}
.sub{color:var(--ash-600);max-width:46ch}

/* CJK/Arapça: Oswald glif taşımaz. Tabela hissini ağırlıkla kur. */
:lang(ja) .display,:lang(ko) .display,:lang(zh) .display,:lang(ar) .display,:lang(fa) .display,
:lang(ja) .h2,:lang(ko) .h2,:lang(zh) .h2,:lang(ar) .h2,:lang(fa) .h2{
  font-weight:700; letter-spacing:0; line-height:1.14;
}
:lang(ar) .micro,:lang(ar) .eyebrow,:lang(fa) .micro,:lang(fa) .eyebrow{letter-spacing:0}

/* ─────────────── 4 · SAHNE / 3B TUVAL ─────────────── */
.stage{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background:var(--ink-000); pointer-events:none;
}
.stage__sky,.stage__door,.stage__gl{position:absolute;inset:0}
.stage__sky img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.stage__door{opacity:0}
.stage__leaf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.stage__leaf--open{opacity:0}
.stage__gl{width:100%;height:100%;opacity:0}
.stage.gl-on .stage__sky,.stage.gl-on .stage__door{opacity:0}
.stage.gl-on .stage__gl{opacity:1}

/* iki kaynaklı grade: soğuk dışarı → kehribar içeri */
.stage__grade{
  position:absolute;inset:0;
  background:
    /* ⚠️ .30/120%×90% iken kadrajın tamamı kahverengi sise dönüyordu — kontrast ölüyor.
       Kehribar SIZINTI olmalı, boya değil: daha dar, daha zayıf. */
    radial-gradient(62% 46% at 50% 40%, rgba(232,147,58,calc(.17 * var(--warm,0))) 0%, transparent 70%),
    radial-gradient(140% 100% at 50% 50%, transparent 34%, rgba(4,6,10,.72) 78%, rgba(4,6,10,.95) 100%),
    linear-gradient(180deg, rgba(4,6,10,.55) 0%, rgba(4,6,10,.10) 34%, rgba(4,6,10,.86) 100%);
}

/* ─────────────── 5 · ATMOSFER ─────────────── */
.fx{position:fixed;inset:0;z-index:60;pointer-events:none}
/* ⭐ FİLM GRAIN — ölçülüp düzeltildi:
   · 140 px karo 1440p'de ~10 kez tekrarlıyordu ve göz dolaşan makro yapıyı seçiyordu → 1024 px
   · baseFrequency .86 = dijital kar; 35 mm tarama hissi .42 civarı, 3 oktav → 2
   · normal alfa "gri kir katmanı" veriyordu → soft-light, parlaklığa göre modüle olur
   · steps(3)/1.1 s = 2.7 Hz; film her karede YENİ tane dağılımı üretir → 24 Hz */
.fx__grain{
  position:absolute;inset:-60%;opacity:.042;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1024' height='1024'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='1024' height='1024' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change:transform;
}
html.motion .fx__grain{animation:grain 1s steps(24) infinite}
@keyframes grain{
  0%{transform:translate3d(0,0,0)}      12.5%{transform:translate3d(-37px,52px,0)}
  25%{transform:translate3d(64px,-28px,0)} 37.5%{transform:translate3d(-71px,-44px,0)}
  50%{transform:translate3d(23px,68px,0)}  62.5%{transform:translate3d(-55px,19px,0)}
  75%{transform:translate3d(48px,-61px,0)} 87.5%{transform:translate3d(-26px,35px,0)}
  100%{transform:translate3d(0,0,0)}
}
/* ⭐ VİNYET — `inset box-shadow` kamera vinyeti DEĞİL, dikdörtgen UI karartmasıdır:
   kenar ortalarından da eşit gelir. Gerçek objektif düşüşü optik eksenden uzaklığa
   bağlıdır (cos⁴θ) → radyal. İlk %48 dokunulmaz; köşede ~0.7 stop (≈%62 luminans). */
.fx__vig{
  position:absolute;inset:0;opacity:var(--vig,1);
  background:radial-gradient(ellipse 78% 76% at 50% 48%,
    rgba(4,6,10,0) 0%, rgba(4,6,10,0) 48%,
    rgba(4,6,10,.025) 60%, rgba(4,6,10,.075) 70%,
    rgba(4,6,10,.16) 80%, rgba(4,6,10,.30) 90%, rgba(4,6,10,.46) 100%);
}

/* ─────────────── 6 · İMLEÇ ─────────────── */
.cursor{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:80;pointer-events:none;opacity:0}
html.cursor-on .cursor{opacity:1}
html.cursor-on,html.cursor-on *{cursor:none!important}
.cursor__dot,.cursor__ring{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:5px;height:5px;background:var(--amber-core)}
.cursor__ring{width:34px;height:34px;border:1px solid rgba(232,147,58,.5);
  transition:width var(--d-micro) var(--e-out),height var(--d-micro) var(--e-out),
             border-color var(--d-micro) var(--e-out)}
html.cursor-hot .cursor__ring{width:74px;height:74px;border-color:rgba(232,147,58,.85)}

/* ─────────────── 7 · AÇILIŞ PERDESİ (Sahne 00) ─────────────── */
.boot{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:var(--ink-000);color:var(--amber);
}
.boot__core{display:grid;justify-items:center;gap:1.15rem;width:min(80vw,260px)}
.boot__key{width:74px;height:64px;overflow:visible}
.boot__key path{stroke-dasharray:1;stroke-dashoffset:0}
html.motion .boot__key path{stroke-dasharray:var(--len,340);stroke-dashoffset:var(--len,340)}
.boot__wordmark{
  font-family:var(--f-disp);font-weight:700;font-size:.94rem;letter-spacing:.42em;
  color:var(--ash-600);padding-inline-start:.42em;
}
.boot__bar{display:block;width:100%;height:1px;background:var(--ink-300);overflow:hidden}
.boot__bar i{display:block;height:100%;width:0%;background:var(--amber);
  box-shadow:0 0 12px rgba(232,147,58,.7)}
.boot__pct{font-family:var(--f-mono);font-size:var(--t-micro);color:var(--ash-500);
  letter-spacing:.2em;font-variant-numeric:tabular-nums}
.boot.is-done{opacity:0;visibility:hidden;transition:opacity 700ms var(--e-out),visibility 0s 700ms}

/* ─────────────── 8 · ÜST BAR ─────────────── */
.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:70;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  padding:.85rem var(--pad);
  transition:background var(--d-scene) var(--e-out),
             backdrop-filter var(--d-scene) var(--e-out),
             border-color var(--d-scene) var(--e-out),
             transform 420ms var(--e-out);
  border-block-end:1px solid transparent;
}
.nav.is-solid{
  background:rgba(4,6,10,.82);border-block-end-color:var(--ink-300);
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
}
.nav.is-away{transform:translateY(-104%)}
.nav__brand{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}
.nav__mark{width:32px;height:auto}
.nav__word{width:150px;height:auto;opacity:.94}
.nav__links{display:flex;gap:clamp(.9rem,2.2vw,2rem);margin-inline-start:auto;
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase}
.nav__links a{position:relative;color:var(--ash-600);padding-block:.4rem;
  transition:color var(--d-micro) var(--e-out)}
.nav__links a::after{
  content:'';position:absolute;inset-block-end:0;inset-inline-start:0;width:100%;height:1px;
  background:var(--amber);transform:scaleX(0);transform-origin:inline-start;
  transition:transform 320ms var(--e-out);
}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--paper)}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1)}
@media (max-width:640px){ .nav__links{display:none} .nav__word{width:118px} }

/* dil */
.lang{position:relative;flex:0 0 auto}
.lang__btn{display:flex;align-items:center;gap:.45rem;padding:.42rem .6rem;
  border:1px solid var(--ink-300);border-radius:2px;color:var(--ash-600);
  transition:color var(--d-micro),border-color var(--d-micro);cursor:pointer}
.lang__btn:hover{color:var(--paper);border-color:var(--ash-400)}
.lang__globe{width:15px;height:15px}
.lang__cur{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.14em}
.lang__menu{
  position:absolute;inset-block-start:calc(100% + .5rem);inset-inline-end:0;z-index:5;
  min-width:180px;max-height:62vh;overflow:auto;padding:.35rem;
  background:rgba(8,12,18,.97);border:1px solid var(--ink-300);border-radius:3px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--d-micro) var(--e-out),transform var(--d-micro) var(--e-out),visibility 0s var(--d-micro);
}
.lang.open .lang__menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.lang__menu li{display:block}
.lang__menu button{display:flex;width:100%;gap:.6rem;align-items:baseline;
  padding:.5rem .65rem;border-radius:2px;color:var(--ash-600);cursor:pointer;text-align:start;
  transition:background var(--d-micro),color var(--d-micro)}
.lang__menu button:hover,.lang__menu button:focus-visible{background:var(--ink-200);color:var(--paper)}
.lang__menu button[aria-selected="true"]{color:var(--amber)}
.lang__code{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.12em;opacity:.7}

/* ─────────────── 9 · SAHNE SAYACI (enstrüman) ─────────────── */
.hud{
  position:fixed;inset-block-end:1.4rem;inset-inline-start:var(--pad);z-index:65;
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--f-mono);font-size:var(--t-micro);color:var(--ash-500);
  letter-spacing:.14em;font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity var(--d-scene) var(--e-out);
}
.hud.is-on{opacity:1}
.hud__n{color:var(--amber)}
.hud__rule{display:block;width:clamp(52px,9vw,120px);height:1px;background:var(--ink-300)}
.hud__rule i{display:block;height:100%;width:0%;background:var(--ash-500)}
@media (max-width:640px){.hud{display:none}}

/* ─────────────── 10 · SAHNE YERLEŞİMİ ─────────────── */
main{position:relative;z-index:1}
.sc{position:relative;padding-inline:var(--pad)}
.sc__body,.sc__head{max-width:var(--maxw);margin-inline:auto;width:100%}

/* içerideki sahneler zemine oturur ve tuvali örter */
.sc--inside,.sc--media,.sc--studio,.sc--exit{background:var(--ink-000);padding-block:var(--sec-y)}
.sc--inside{padding-block-start:calc(var(--sec-y) * .8)}
.sc--media{padding-block-start:0;padding-inline:0}
.sc--media .sc__head{padding-inline:var(--pad)}
.sc--studio,.sc--exit{border-block-start:1px solid var(--ink-300)}
/* ⛔ Buraya `content-visibility:auto` KOYMA. Tahmini yükseklikle çalışır ve
   ScrollTrigger'ın ölçtüğü konumları kaydırır — sahne sayacı yanlış sahneyi gösteriyordu.
   Kazanç 2 MB'lık sitede ihmal edilebilir, risk gerçek. */

.sc__head{display:grid;gap:.55rem;margin-block-end:clamp(2rem,4vw,3.4rem)}
.sc__head .idx{grid-row:1}
.sc__head .micro{grid-row:1;justify-self:start;margin-inline-start:1.4rem}
.sc__head .idx + .micro{margin-inline-start:0}
.sc__head{grid-template-columns:auto 1fr}
.sc__head .h2,.sc__head .sub{grid-column:1/-1}
.sc__head .h2{margin-block-start:.35rem}

/* ── Sahne 01 · dışarısı ── */
.sc--outside{
  min-height:100svh;display:flex;align-items:flex-end;
  padding-block:clamp(6rem,14vh,9rem) clamp(5.5rem,12vh,8rem);
}
.sc--outside .sc__body{display:grid;gap:clamp(.9rem,1.8vw,1.5rem);max-width:min(var(--maxw),1060px)}
.sc--outside .display{max-width:15ch}
.sc--outside .lead{color:var(--ash-600)}
.row{display:flex;flex-wrap:wrap;gap:.8rem;margin-block-start:.7rem}

.scrollcue{
  position:absolute;inset-block-end:1.6rem;inset-inline-end:var(--pad);
  display:grid;justify-items:center;gap:.55rem;
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.24em;
  text-transform:uppercase;color:var(--ash-500);
}
.scrollcue i{display:block;width:1px;height:46px;
  background:linear-gradient(180deg,var(--ash-500),transparent)}
html.motion .scrollcue i{animation:cue 2.4s var(--e-io) infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ── Sahne 02 · kapı ── */
.sc--gate{min-height:100svh;display:grid;place-items:center;text-align:center}
.gate__ui{display:grid;justify-items:center;gap:1rem}
.gate__through{
  position:absolute;inset-block-start:50%;inset-inline:0;transform:translateY(-50%);
  font-family:var(--f-disp);font-weight:700;font-size:clamp(1.4rem,1rem+2vw,2.6rem);
  letter-spacing:.06em;color:var(--amber-core);opacity:0;
  text-shadow:0 0 40px rgba(232,147,58,.55);
}

.hold{
  position:relative;display:grid;place-items:center;
  width:132px;height:132px;border-radius:50%;cursor:pointer;color:var(--amber);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.hold__ring{position:absolute;inset:0;width:100%;height:100%}
.hold__track{stroke:rgba(123,133,147,.28)}
.hold__prog{stroke:var(--amber);stroke-dasharray:245;stroke-dashoffset:245;
  filter:drop-shadow(0 0 6px rgba(232,147,58,.6))}
.hold__hex{width:34px;height:30px;color:var(--paper);
  transition:transform 420ms var(--e-out),color var(--d-micro) var(--e-out)}
.hold:hover .hold__hex,.hold:focus-visible .hold__hex{color:var(--amber-core)}
.hold.is-pulling .hold__hex{transform:rotate(30deg) scale(.94)}
.hold__label{
  position:absolute;inset-block-start:calc(100% + .85rem);inset-inline:-60px;
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.22em;
  text-transform:uppercase;color:var(--ash-600);
}
.hold::after{
  content:'';position:absolute;inset:-14px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,147,58,.20),transparent 66%);
  opacity:0;transition:opacity 300ms var(--e-out);
}
.hold:hover::after,.hold.is-pulling::after{opacity:1}
.hold__hint{margin-block-start:2.6rem;color:var(--ash-500);font-size:.92rem}
.hold__skip{
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ash-500);border-block-end:1px solid var(--ink-300);padding-block-end:2px;
  opacity:0;visibility:hidden;transition:opacity 420ms var(--e-out),color var(--d-micro),visibility 0s 420ms;
}
.hold__skip.is-on{opacity:1;visibility:visible;transition-delay:0s}
.hold__skip:hover{color:var(--paper);border-color:var(--amber)}

/* ─────────────── 11 · BUTONLAR ─────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  padding:.82rem 1.5rem;overflow:hidden;
  border:1px solid var(--ash-400);border-radius:2px;
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash-700);background:rgba(14,20,28,.5);cursor:pointer;
  transition:color var(--d-micro) var(--e-out),border-color var(--d-micro) var(--e-out),
             background var(--d-micro) var(--e-out);
}
.btn::before{ /* ışık süpürmesi */
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 32%,rgba(232,147,58,.20) 50%,transparent 68%);
  transform:translateX(-110%);
}
.btn:hover::before,.btn:focus-visible::before{animation:sweep 620ms var(--e-out)}
@keyframes sweep{to{transform:translateX(110%)}}
.btn:hover,.btn:focus-visible{color:var(--paper);border-color:var(--amber);background:rgba(232,147,58,.09)}
.btn__ico{width:16px;height:16px;flex:0 0 auto}
.btn--key{color:var(--ink-000);background:var(--amber);border-color:var(--amber);font-weight:600}
.btn--key:hover,.btn--key:focus-visible{background:var(--amber-core);border-color:var(--amber-core);color:var(--ink-000)}
.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* ─────────────── 12 · AKAN ŞERİT ─────────────── */
.ticker{
  position:relative;z-index:1;overflow:hidden;
  border-block:1px solid var(--ink-300);background:var(--ink-100);
  padding-block:.7rem;
}
.ticker__track{display:flex;gap:2.5rem;white-space:nowrap;width:max-content;
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.28em;
  text-transform:uppercase;color:var(--ash-500)}
.ticker__track span{display:inline-flex;align-items:center;gap:2.5rem}
.ticker__track span::after{content:'';width:4px;height:4px;background:var(--amber-deep);
  transform:rotate(45deg)}
html.motion .ticker__track{animation:tick 34s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}
[dir="rtl"] .ticker__track{animation-direction:reverse}

/* ─────────────── 13 · OYUN KARTI ─────────────── */
.game{max-width:var(--maxw);margin-inline:auto;perspective:1100px}
.game + .game{margin-block-start:clamp(2rem,4vw,3.4rem)}
.game__stage{
  position:relative;overflow:hidden;border:1px solid var(--ink-300);border-radius:3px;
  aspect-ratio:16/9;max-height:64svh;   /* kart tek kadraja sığsın; alt bilgisi katın altında kalmasın */
  background:var(--ink-100);transform-style:preserve-3d;
}
.game__stage--short{aspect-ratio:21/7;max-height:38svh;display:grid;place-items:center;
  padding:clamp(1.2rem,3vw,2rem)}
/* ⚠️ Dar ekranda 21/7 kutu metni KESİYORDU. Oranı bırak, içeriğe göre büyü. */
@media (max-width:760px){
  .game__stage--short{aspect-ratio:auto;max-height:none;min-height:clamp(190px,32svh,280px)}
}
.game__frame{position:absolute;inset:0}
.game__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;
  transition:transform 1050ms var(--e-out),opacity 1050ms var(--e-out)}
.game__shot--alt{opacity:0}
.game:hover .game__shot--alt{opacity:1}
.game:hover .game__shot{transform:scale(1.035)}
.game__stage::after{ /* okunabilirlik perdesi */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,6,10,.62) 0%,rgba(4,6,10,.05) 42%,rgba(4,6,10,.88) 100%);
}
.game__idx{
  position:absolute;inset-block-start:1rem;inset-inline-start:1.15rem;z-index:2;
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.2em;color:var(--ash-600);
}
.game__over{
  position:absolute;z-index:2;inset-block-end:0;inset-inline:0;
  display:grid;gap:.6rem;padding:clamp(1.2rem,3vw,2.6rem);
  transform:translateZ(28px);
}
.game__title{
  font-family:var(--f-disp);font-weight:700;color:var(--paper);
  font-size:clamp(1.9rem,1rem + 3.4vw,3.9rem);line-height:.95;letter-spacing:-.004em;
}
.game__title--sealed{color:var(--ash-500);letter-spacing:.03em;
  font-size:clamp(1.4rem,1rem + 2vw,2.5rem)}
.game__logline{color:var(--ash-700);max-width:38ch}
.game__logline--cold{color:var(--ash-500)}
.game--sealed .game__over{position:relative;text-align:center;justify-items:center;transform:none}

.chip{display:inline-flex;align-items:center;gap:.5rem;justify-self:start;
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber)}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 0 rgba(232,147,58,.6)}
html.motion .chip i{animation:pulse 2.6s var(--e-io) infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(232,147,58,.55)}
  70%{box-shadow:0 0 0 9px rgba(232,147,58,0)}
  100%{box-shadow:0 0 0 0 rgba(232,147,58,0)}
}
.chip--mute{color:var(--ash-500)}
.chip--mute i{background:var(--ash-500);animation:none;box-shadow:none}
.game--sealed .chip{justify-self:center}

.game__bar{
  display:grid;gap:.85rem 2rem;align-items:center;
  grid-template-columns:minmax(0,1fr) auto;
  padding:1.35rem .2rem 0;
}
.game__intro{grid-column:1;display:grid;gap:.45rem;margin-block-end:.35rem}
.game__intro .game__title{font-size:clamp(2rem,1.25rem + 2.7vw,3.55rem)}
.game__intro .game__logline{color:var(--ash-700);max-width:44ch}
.game__desc{grid-column:1;color:var(--ash-700);max-width:62ch}
.game__meta{grid-column:1;font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash-500)}
.game__bar .btn{grid-column:2;grid-row:1/4;align-self:center}
@media (max-width:760px){
  .game__bar{grid-template-columns:1fr}
  .game__bar .btn{grid-column:1;grid-row:auto;justify-self:start}
}

/* mühürlü levha */
/* ⭐⭐ MÜHÜRLÜ METAL LEVHA — fotogerçekçi kartların YANINDA duruyor, iki gradyanla
   bomboş kalıyordu. Sorun detay azlığı değil, IŞIK DAVRANIŞI yokluğuydu: metal,
   ışığı yöne bağlı dağıttığı için metal görünür. Katman sırası aşağıdan yukarı. */
.plate{
  position:absolute;inset:0;
  background:
    /* 1 · lambanın geniş yönlü yansıması (sıcak, sol üstten) */
    radial-gradient(90% 120% at 24% -10%,
      rgba(255,183,97,.13) 0%, rgba(232,147,58,.045) 28%, transparent 58%),
    /* 2 · karşı ışık (soğuk, sağ alttan) */
    radial-gradient(90% 130% at 92% 120%, rgba(110,155,196,.055), transparent 55%),
    /* 3 · fırçalama izi — anizotropik, metali metal yapan şey */
    repeating-linear-gradient(1deg,
      rgba(255,255,255,.018) 0px, rgba(255,255,255,.018) 1px,
      transparent 1px, transparent 4px),
    /* 4 · daha geniş tezgâh izi */
    repeating-linear-gradient(178deg,
      transparent 0 17px, rgba(255,255,255,.014) 18px, transparent 20px 39px),
    /* 5 · boyalı tehlike şeridi — ⚠️ .26 alfada tüm yüzeyi kaplayıp metni eziyordu.
       Gerçekte şerit yüzeyin bir KISMINA boyanır; merkezde perdeyle söner. */
    radial-gradient(62% 82% at 50% 50%, rgba(10,13,18,.86) 0%, rgba(10,13,18,.35) 55%, transparent 78%),
    repeating-linear-gradient(55deg,
      rgba(205,181,48,.17) 0 18px, rgba(28,27,20,.26) 18px 45px),
    /* 6 · gövde */
    radial-gradient(130% 150% at 40% 10%, #20262c 0%, #10151b 52%, #080b10 100%);
  /* kenar pahı + temas gölgesi — tek başına tarayıcı çizgisinden değerli */
  box-shadow:
    inset 0 1px rgba(255,210,150,.20),
    inset 1px 0 rgba(255,255,255,.05),
    inset 0 -2px rgba(0,0,0,.80),
    inset -2px 0 rgba(0,0,0,.55);
}
/* anizotropik gürültü: X/Y frekansı AYNI olmamalı, yoksa kumaş gibi görünür */
.plate::after{
  content:'';position:absolute;inset:0;opacity:.13;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='256'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65 .11' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='512' height='256' filter='url(%23m)'/%3E%3C/svg%3E");
}
/* ⛔ Tarayıcı çizgisi kaldırıldı: diegetik bir ekran değil, "web widget" gibi okunuyordu.
   Durum bilgisini zaten "GELİŞTİRME AŞAMASINDA" rozeti veriyor. */
.plate__scan{display:none}

/* ─────────────── 14 · SAYILAR ─────────────── */
.stats{
  max-width:var(--maxw);margin:clamp(2.6rem,5vw,4.4rem) auto 0;
  display:grid;gap:1px;grid-template-columns:repeat(3,1fr);
  background:var(--ink-300);border:1px solid var(--ink-300);
}
.stats li{display:grid;gap:.3rem;padding:clamp(1.1rem,2.4vw,2rem);background:var(--ink-000)}
.stats__n{font-family:var(--f-disp);font-weight:700;color:var(--paper);
  font-size:clamp(2rem,1.1rem + 2.6vw,3.4rem);line-height:1;font-variant-numeric:tabular-nums}
.stats li span{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash-600)}
@media (max-width:640px){.stats{grid-template-columns:1fr}}

/* ─────────────── 15 · GÖRÜNTÜ ŞERİDİ ─────────────── */
.rail{
  display:flex;gap:clamp(.7rem,1.4vw,1.2rem);
  padding-inline:var(--pad);padding-block:.4rem 1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--ash-400) transparent;
  overscroll-behavior-x:contain;
}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--ash-400)}
.shot{flex:0 0 clamp(280px,42vw,620px);scroll-snap-align:center;
  border:1px solid var(--ink-300);overflow:hidden;background:var(--ink-100)}
.shot img{width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform 900ms var(--e-out),filter 900ms var(--e-out);filter:saturate(.86)}
.shot:hover img{transform:scale(1.045);filter:saturate(1)}
.rail__cap{max-width:var(--maxw);margin:.9rem auto 0;padding-inline:var(--pad);
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash-500)}

/* ─────────────── 16 · DUVAR (alıntı) ─────────────── */
.sc--wall{
  position:relative;z-index:1;overflow:hidden;isolation:isolate;
  display:grid;place-items:center;text-align:center;
  min-height:clamp(420px,64vh,660px);padding:var(--sec-y) var(--pad);
  border-block:1px solid var(--ink-300);background:var(--ink-000);
}
.wall__bg{position:absolute;inset:0;z-index:-1}
.wall__bg video{width:100%;height:100%;object-fit:cover;opacity:.86}
.wall__scrim{position:absolute;inset:0;
  background:radial-gradient(68% 78% at 50% 50%,rgba(4,6,10,.28) 0%,rgba(4,6,10,.82) 68%,rgba(4,6,10,.96) 100%)}
/* ⚠️ `ch` KENDİ font boyutuna göre çözülür. 22ch'i blockquote'a verince gövde
   puntosuna göre ~200 px oldu ve alıntı bir sütuna sıkıştı. Ölçüyü METNİN kendisine ver. */
.wall__q{display:grid;gap:1.4rem;justify-items:center;max-width:min(92vw,900px)}
.wall__q p{font-family:var(--f-disp);font-weight:700;color:var(--paper);
  font-size:clamp(1.5rem,1rem + 2.6vw,3rem);line-height:1.14;letter-spacing:-.002em;
  text-wrap:balance;max-width:20ch}
.wall__q cite{font-family:var(--f-mono);font-style:normal;font-size:var(--t-micro);
  letter-spacing:.24em;text-transform:uppercase;color:var(--ash-500)}

/* ─────────────── 17 · İLKELER ─────────────── */
.prin{
  max-width:var(--maxw);margin:clamp(2.4rem,5vw,4rem) auto 0;
  display:grid;gap:1px;grid-template-columns:repeat(3,1fr);
  background:var(--ink-300);border-block:1px solid var(--ink-300);
}
.prin__i{display:grid;gap:.7rem;align-content:start;
  padding:clamp(1.4rem,3vw,2.6rem);background:var(--ink-000);
  transition:background var(--d-micro) var(--e-out)}
.prin__i:hover{background:var(--ink-100)}
.prin__n{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.2em;color:var(--amber)}
.prin__i h3{font-family:var(--f-disp);font-weight:700;font-size:var(--t-h3);
  color:var(--paper);letter-spacing:.01em}
.prin__i p{color:var(--ash-600);max-width:34ch}
@media (max-width:820px){.prin{grid-template-columns:1fr}}
.close{max-width:var(--maxw);margin:clamp(2.2rem,4vw,3.4rem) auto 0;
  font-size:var(--t-lead);line-height:1.5;color:var(--ash-700);max-width:46ch}

/* ─────────────── 18 · İLETİŞİM ─────────────── */
.contact{max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:1px;grid-template-columns:1.6fr 1fr;
  background:var(--ink-300);border:1px solid var(--ink-300)}
@media (max-width:760px){.contact{grid-template-columns:1fr}}
.contact__mail,.contact__side{padding:clamp(1.4rem,3vw,2.4rem);background:var(--ink-000)}
.contact__mail{display:grid;gap:.5rem;position:relative;
  transition:background var(--d-micro) var(--e-out)}
.contact__mail:hover{background:var(--ink-100)}
.contact__k{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash-500)}
.contact__v{font-family:var(--f-disp);font-weight:700;color:var(--paper);
  font-size:clamp(1.15rem,.85rem + 1.5vw,2rem);letter-spacing:.005em;word-break:break-word}
.contact__go{position:absolute;inset-block-start:clamp(1.4rem,3vw,2.4rem);inset-inline-end:clamp(1.4rem,3vw,2.4rem);
  width:26px;height:26px;
  background:linear-gradient(currentColor,currentColor) no-repeat center/100% 1px,
             linear-gradient(currentColor,currentColor) no-repeat 100% 0/1px 100%;
  color:var(--ash-500);transform:rotate(-45deg);
  transition:transform 320ms var(--e-out),color 320ms var(--e-out)}
[dir="rtl"] .contact__go{transform:rotate(-135deg)}
.contact__mail:hover .contact__go{color:var(--amber);transform:rotate(-45deg) translate(4px,-4px)}
[dir="rtl"] .contact__mail:hover .contact__go{transform:rotate(-135deg) translate(4px,-4px)}
.contact__side{display:grid;gap:.9rem;align-content:start}
.social{display:flex;flex-wrap:wrap;gap:.6rem}
.social a{display:inline-flex;align-items:center;gap:.55rem;padding:.6rem .95rem;
  border:1px solid var(--ink-300);border-radius:2px;color:var(--ash-600);
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  transition:color var(--d-micro),border-color var(--d-micro),background var(--d-micro)}
.social a:hover{color:var(--paper);border-color:var(--amber);background:rgba(232,147,58,.08)}
.social svg{width:16px;height:16px}
.social a[aria-disabled="true"]{opacity:.35;pointer-events:none}

/* ─────────────── 19 · ALT BİLGİ ─────────────── */
.foot{position:relative;z-index:1;background:var(--ink-100);
  border-block-start:1px solid var(--ink-300);padding:clamp(3rem,6vw,5rem) var(--pad) 1.6rem;
  overflow:hidden}
/* kapı arkanda kapanır */
.foot__shut{position:absolute;inset-block-start:0;inset-inline:0;height:3px;display:flex;pointer-events:none}
.foot__shut i{flex:1 1 50%;height:100%;background:linear-gradient(90deg,transparent,var(--amber-deep));
  transform:scaleX(0);transform-origin:inline-end}
.foot__shut i:last-child{background:linear-gradient(90deg,var(--amber-deep),transparent);
  transform-origin:inline-start}
.foot.is-shut .foot__shut i{transform:scaleX(1);transition:transform 900ms var(--e-io)}

.foot__main{max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(1.6rem,3vw,2.6rem);
  grid-template-columns:1.4fr repeat(4,1fr)}
@media (max-width:960px){.foot__main{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__main{grid-template-columns:1fr}}
.foot__brand img{width:180px;height:auto;opacity:.9}
.foot__tag{margin-block-start:.7rem;font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ash-500)}
.foot__col{display:grid;gap:.55rem;align-content:start}
.foot__col h3{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--paper);font-weight:400;margin-block-end:.25rem}
.foot__col a{color:var(--ash-600);width:fit-content;position:relative;
  transition:color var(--d-micro) var(--e-out)}
.foot__col a::after{content:'';position:absolute;inset-block-end:-2px;inset-inline-start:0;
  width:100%;height:1px;background:var(--amber);transform:scaleX(0);
  transform-origin:inline-start;transition:transform 320ms var(--e-out)}
.foot__col a:hover{color:var(--paper)}
.foot__col a:hover::after{transform:scaleX(1)}
.foot__row{max-width:var(--maxw);margin:clamp(2.4rem,5vw,3.6rem) auto 0;
  padding-block-start:1.2rem;border-block-start:1px solid var(--ink-300);
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.14em;color:var(--ash-500)}

/* ─────────────── 20 · HAREKET BAŞLANGIÇ DURUMLARI ───────────────
   SADECE html.motion altında. Motor kalkmazsa bu blok hiç uygulanmaz
   ve sayfa bitmiş hâliyle görünür. */
html.motion .rv{opacity:0}
html.motion .stage__grade{--warm:0}
/* ⚠️ Satır maskesi alt uzantıları KESER: y ğ ş ç q j p — Türkçe/Lehçe/Fransızca'da
   harfler başka harfe dönüşür ("yapıyoruz" → "vapıvoruz"). Maskeye nefes payı ver;
   negatif kenar boşluğu yerleşimi bozmadan geri alır. */
html.motion .split-line{
  overflow:hidden;display:block;
  padding-block-end:.18em;margin-block-end:-.18em;
}
/* kelime bölünmez kalsın — satır sonu sadece kelimeler arasında */
html.motion .split-word{display:inline-block;white-space:nowrap}
html.motion .split-char{display:inline-block;will-change:transform}

/* ─────────────── 21 · AZ HAREKET ─────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .stage__door{opacity:1}
  .stage__leaf--open{opacity:1}   /* kapı zaten AÇIK başlar */
  .hold{display:none}
  .hold__skip{opacity:1;visibility:visible}
  html.cursor-on,html.cursor-on *{cursor:auto!important}
  .cursor{display:none}
}

/* ─────────────── 22 · YAZDIRMA ─────────────── */
@media print{
  .stage,.fx,.cursor,.boot,.hud,.nav,.ticker,.scrollcue,.hold{display:none!important}
  body{background:#fff;color:#111}
  .display,.h2,.game__title,.wall__q p,.contact__v,.stats__n{color:#111}
}

/* ═══════════════════ 23 · YASAL SAYFALAR ═══════════════════
   terms / privacy / account-deletion aynı stil dosyasını kullanır ve v1 sınıf
   adlarını taşır. v2 iskeletine bağlayan katman burada. */
.mark{width:32px;height:auto}                    /* v1 adı — nav__mark karşılığı */
.nav.stuck{                                      /* v1 adı — is-solid karşılığı */
  background:rgba(4,6,10,.82);border-block-end-color:var(--ink-300);
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
}
.fx__scan{display:none}                          /* v2'de tarama çizgisi yok */

.legal{
  max-width:78ch;margin-inline:auto;
  padding:clamp(6.5rem,12vh,9rem) var(--pad) clamp(3rem,6vw,5rem);
}
.legal__top{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding-block-end:1.4rem;margin-block-end:clamp(2rem,4vw,3rem);
  border-block-end:1px solid var(--ink-300);
}
.legal__back{
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash-600);transition:color var(--d-micro) var(--e-out);
}
.legal__back::before{content:'←';margin-inline-end:.55rem}
[dir="rtl"] .legal__back::before{content:'→'}
.legal__back:hover{color:var(--amber)}
.legal__toggle{display:flex;gap:1px;background:var(--ink-300);border:1px solid var(--ink-300)}
.legal__toggle button{
  padding:.45rem .9rem;background:var(--ink-000);color:var(--ash-600);cursor:pointer;
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  transition:color var(--d-micro),background var(--d-micro);
}
.legal__toggle button:hover{color:var(--paper)}
.legal__toggle button[aria-pressed="true"]{background:var(--amber);color:var(--ink-000)}

.legal h1{
  font-family:var(--f-disp);font-weight:700;font-size:var(--t-h2);line-height:1.0;
  color:var(--paper);letter-spacing:-.004em;margin-block-end:.8rem;
}
.legal h2{
  font-family:var(--f-disp);font-weight:700;font-size:var(--t-h3);color:var(--paper);
  letter-spacing:.01em;margin-block:2.4rem .7rem;
}
.legal p,.legal li{color:var(--ash-700);margin-block-end:.9rem}
.legal ul,.legal ol{margin-block-end:1.2rem;padding-inline-start:1.3rem;list-style:disc}
.legal ol{list-style:decimal}
.legal a:not(.legal__back){color:var(--amber);border-block-end:1px solid transparent;
  transition:border-color var(--d-micro) var(--e-out)}
.legal a:not(.legal__back):hover{border-block-end-color:var(--amber)}
.legal__date{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash-500)}
.legal__lead{font-size:var(--t-lead);line-height:1.5;color:var(--ash-700);margin-block-end:2rem}

.foot__links{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem}
.foot__links a{color:var(--ash-600);transition:color var(--d-micro) var(--e-out)}
.foot__links a:hover{color:var(--paper)}

/* dil değiştirici: aynı sayfada TR+EN birlikte duruyor, biri gizlenir.
   ⚠️ Bu kural olmadan iki dil ÜST ÜSTE basılır ("Ana sayfaBack to site"). */
.legal[data-show="tr"] [lang="en"]{display:none}
.legal[data-show="en"] [lang="tr"]{display:none}
/* madde numarası: <h2><i>01</i>Başlık</h2> */
.legal h2 i{
  font-style:normal;font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:.2em;color:var(--amber);
  display:block;margin-block-end:.35rem;
}