/* ══════════════════════════════════════════════════════════════
   nw.css — NumberWar · "GECE ARENASI" tasarım sistemi
   Yön: editorial grid iskeleti + arcade renk + terminal mikro-tipografi.
   Tokenlar oyunun kendi paletiyle birebir (components.jsx → NW).
   Bölümler: 0 reset · 1 token · 2 tipografi · 3 grid/iskelet · 4 nav
             5 buton · 6 kart/yüzey · 7 hareket · 8 yardımcı · 9 footer
   ══════════════════════════════════════════════════════════════ */

/* ── 0 · reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;margin:0;padding:0}
img,svg,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--yellow);text-decoration:none}
a:hover{color:#fff}

@font-face{font-family:'Luckiest Guy';src:url('fonts/luckiest_guy.ttf') format('truetype');font-weight:400;font-display:swap}

/* ── 1 · tokenlar ──────────────────────────────────────────── */
:root{
  /* marka (oyun paletiyle aynı) */
  --purple:#5855C0; --purple-deep:#3A379F; --purple-dark:#2B2973;
  --ink-900:#05030D; --ink-800:#08061A; --ink-700:#0E0A24; --ink-600:#160F33; --ink-500:#1E1542;
  --yellow:#FFEE53; --yellow-deep:#C8B93A; --teal:#41C6CB; --teal-deep:#2BAAAF;
  --coral:#FF6B6B; --lilac:#9C97FF; --green:#4EE38E; --amber:#FFB347; --orange:#FF7A3B;
  /* mürekkep */
  --w:#fff; --w80:rgba(255,255,255,.8); --w64:rgba(255,255,255,.64); --w46:rgba(255,255,255,.46);
  --w32:rgba(255,255,255,.32); --w16:rgba(255,255,255,.16); --w10:rgba(255,255,255,.10); --w06:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --glass:rgba(255,255,255,.045);
  /* tipografi */
  --display:'Luckiest Guy',system-ui,sans-serif;
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  /* ölçü */
  --maxw:1240px; --gut:clamp(18px,4vw,44px); --rail:clamp(14px,3.2vw,34px);
  --r-s:10px; --r-m:16px; --r-l:24px;
  --ease:cubic-bezier(.22,.9,.28,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow:0 24px 70px rgba(0,0,0,.55);
}

/* ── 2 · gövde + tipografi ─────────────────────────────────── */
body{
  font-family:var(--sans);color:var(--w);background:var(--ink-900);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-size:16px;line-height:1.55;letter-spacing:-.01em;
}
body::before{ /* editorial dikey grid — sayfanın iskeleti görünür */
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--line) 1px,transparent 1px) calc(50% - 480px) 0/240px 100%,
    linear-gradient(180deg,rgba(88,85,192,.16),transparent 30%,transparent 70%,rgba(11,7,26,.9));
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  opacity:.6;
}
.h1,h1{font-family:var(--display);font-weight:400;font-size:clamp(46px,7.4vw,104px);line-height:.92;letter-spacing:.5px}
.h2,h2{font-family:var(--display);font-weight:400;font-size:clamp(32px,4.6vw,60px);line-height:.98;letter-spacing:.5px}
.h3{font-family:var(--sans);font-weight:700;font-size:clamp(19px,2vw,24px);line-height:1.2;letter-spacing:-.02em}
em{font-style:normal;color:var(--yellow)}
.lede{font-size:clamp(15px,1.35vw,18px);line-height:1.62;color:var(--w64);max-width:62ch}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--w46)}
.tag b{color:var(--teal);font-weight:500}
.hl-y{color:var(--yellow)} .hl-t{color:var(--teal)} .hl-l{color:var(--lilac)}

/* ── 3 · iskelet ───────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:1}
.sec{position:relative;padding-block:clamp(72px,9vw,140px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:clamp(32px,4vw,56px)}
.sec-head.split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end;gap:clamp(20px,4vw,60px)}
@media(max-width:860px){.sec-head.split{grid-template-columns:1fr}}
.sec-index{display:flex;align-items:center;gap:12px;color:var(--w32)}
.sec-index .num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--yellow)}
.sec-index .bar{height:1px;flex:1;background:linear-gradient(90deg,var(--line-2),transparent)}
.rule{height:1px;background:var(--line);margin-block:clamp(40px,6vw,80px)}

/* ── 4 · nav ───────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:60;transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.nav.stuck{background:rgba(5,3,13,.82);backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--line)}
.nav-in{max-width:var(--maxw);margin-inline:auto;padding:14px var(--gut);display:flex;align-items:center;gap:clamp(12px,3vw,34px)}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand img{width:34px;height:34px;border-radius:9px;border:1.5px solid var(--w16)}
.brand .wm{font-family:var(--display);font-size:19px;letter-spacing:.6px;line-height:1;padding-top:3px}
.brand .wm em{color:var(--yellow)}
.nav-links{display:flex;align-items:center;gap:clamp(4px,1.4vw,10px);margin-left:auto}
.nav-links a{position:relative;font-size:13.5px;font-weight:500;color:var(--w64);padding:8px 10px;border-radius:8px;transition:color .2s;white-space:nowrap}
.nav-links a::after{content:'';position:absolute;left:10px;right:10px;bottom:4px;height:1.5px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current=page]{color:#fff}
.nav-links a:hover::after,.nav-links a[aria-current=page]::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-right .btn{white-space:nowrap}
@media(max-width:1180px){.nav-links a{font-size:12.5px;padding:8px 7px}}
@media(max-width:1040px){.nav-right .btn-y{display:none}}
.lang{display:flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden}
.lang button{background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;padding:6px 9px;color:var(--w46);transition:.2s}
.lang button.on{background:var(--w10);color:#fff}
.nav-burger{display:none;width:40px;height:40px;border:1px solid var(--line-2);border-radius:10px;background:none;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.nav-burger span{width:16px;height:1.6px;background:#fff;transition:.3s var(--ease)}
.nav.open .nav-burger span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.nav.open .nav-burger span:nth-child(2){opacity:0}
.nav.open .nav-burger span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
@media(max-width:1000px){
  .nav-burger{display:flex}
  .nav-links{position:fixed;inset:64px 0 auto;flex-direction:column;align-items:stretch;gap:0;background:rgba(5,3,13,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);padding:10px var(--gut) 22px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:.3s var(--ease)}
  .nav.open .nav-links{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{font-size:17px;padding:13px 2px;border-bottom:1px solid var(--line)}
  .nav-links a::after{display:none}
}

/* ── 5 · butonlar ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;border-radius:999px;font-family:var(--sans);font-weight:700;font-size:14.5px;letter-spacing:-.01em;padding:13px 22px;transition:transform .16s var(--ease),box-shadow .2s,background .2s;position:relative;overflow:hidden;white-space:nowrap}
.btn:active{transform:translateY(2px)}
.btn-y{background:var(--yellow);color:#1a1230;box-shadow:0 4px 0 var(--yellow-deep),0 12px 34px rgba(255,238,83,.24)}
.btn-y:hover{color:#1a1230;box-shadow:0 4px 0 var(--yellow-deep),0 16px 48px rgba(255,238,83,.4)}
.btn-y:active{box-shadow:0 1px 0 var(--yellow-deep)}
.btn-ghost{background:var(--w06);color:#fff;border:1px solid var(--line-2)}
.btn-ghost:hover{background:var(--w10);color:#fff}
.btn .ico{font-size:16px;line-height:1}
.btn-sm{padding:9px 16px;font-size:13px}
.store-row{display:flex;gap:12px;flex-wrap:wrap}
.store{display:flex;align-items:center;gap:12px;padding:11px 20px 11px 16px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid var(--line-2);color:#fff;transition:.25s var(--ease)}
.store:hover{background:rgba(255,255,255,.1);border-color:var(--w32);transform:translateY(-2px);color:#fff}
.store .lines{display:flex;flex-direction:column;line-height:1.15}
.store .t{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--w46)}
.store .b{font-size:15px;font-weight:700}

/* ── 6 · yüzeyler ──────────────────────────────────────────── */
.card{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(18px,2.4vw,28px);overflow:hidden}
.card::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(255,255,255,.22),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;pointer-events:none}
.card-i{position:absolute;top:14px;right:18px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--w16)}
.grid{display:grid;gap:clamp(12px,1.6vw,18px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:var(--w06);border:1px solid var(--line-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--w64);white-space:nowrap}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(65,198,203,.6);animation:nwPing 2.4s ease-out infinite}
@keyframes nwPing{0%{box-shadow:0 0 0 0 rgba(65,198,203,.55)}70%,100%{box-shadow:0 0 0 8px rgba(65,198,203,0)}}

/* rakam karosu — oyunun kendi dili */
.tile{width:var(--ts,46px);height:calc(var(--ts,46px)*1.16);border-radius:11px;display:grid;place-items:center;font-family:var(--display);font-size:calc(var(--ts,46px)*.56);padding-top:.14em;background:rgba(0,0,0,.34);border:2px solid var(--w16);color:#fff}
.tile.ok{background:var(--teal-deep);border-color:var(--teal);box-shadow:0 0 22px rgba(65,198,203,.3)}
.tile.near{background:#C69A2F;border-color:var(--yellow)}
.tile.no{background:rgba(0,0,0,.5);border-color:var(--w10);color:var(--w32)}
.tile.y{background:rgba(255,238,83,.14);border-color:var(--yellow);color:var(--yellow)}

/* ── 7 · hareket ───────────────────────────────────────────── */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-rv].in{opacity:1;transform:none}
[data-rv-stagger]>*{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-rv-stagger].in>*{opacity:1;transform:none}
[data-rv-stagger].in>*:nth-child(2){transition-delay:.07s}
[data-rv-stagger].in>*:nth-child(3){transition-delay:.14s}
[data-rv-stagger].in>*:nth-child(4){transition-delay:.21s}
[data-rv-stagger].in>*:nth-child(5){transition-delay:.28s}
[data-rv-stagger].in>*:nth-child(6){transition-delay:.35s}
[data-rv-stagger].in>*:nth-child(n+7){transition-delay:.42s}
.scramble{font-variant-numeric:tabular-nums}
@keyframes nwFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes nwDrift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(12px,-18px,0)}100%{transform:translate3d(0,0,0)}}
@keyframes nwSweep{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes nwSpinSlow{to{transform:rotate(360deg)}}
@keyframes nwPop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes nwFlip{from{transform:rotateX(90deg);opacity:0}to{transform:rotateX(0);opacity:1}}
@keyframes nwShake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-4px)}}

/* imleç — masaüstünde arena hissi */
.cursor{position:fixed;top:0;left:0;width:26px;height:26px;border:1.5px solid var(--yellow);border-radius:50%;pointer-events:none;z-index:200;mix-blend-mode:difference;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),background .25s,border-color .25s;will-change:transform}
.cursor.big{width:58px;height:58px;background:rgba(255,238,83,.14);border-color:transparent}
.cursor-dot{position:fixed;top:0;left:0;width:4px;height:4px;border-radius:50%;background:var(--yellow);pointer-events:none;z-index:201;transform:translate(-50%,-50%);will-change:transform}
@media(hover:none),(max-width:900px){.cursor,.cursor-dot{display:none}}

/* sayfa açılış perdesi */
.veil{position:fixed;inset:0;z-index:300;background:var(--ink-900);pointer-events:none;transition:opacity .7s var(--ease),visibility .7s}
.veil.gone{opacity:0;visibility:hidden}
.veil-mark{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.4em;color:var(--w46)}

/* scroll ilerleme çizgisi */
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--teal),var(--yellow));z-index:80;box-shadow:0 0 12px rgba(255,238,83,.5)}

/* arka plan rakam alanı (canvas) */
.field{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9}

/* ── 8 · yardımcılar ───────────────────────────────────────── */
.center{text-align:center;margin-inline:auto}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt40{margin-top:40px}
.wfull{width:100%}
.noise{position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 9 · footer ────────────────────────────────────────────── */
.foot{position:relative;border-top:1px solid var(--line);margin-top:clamp(60px,8vw,120px);padding-block:clamp(44px,6vw,80px) 28px;background:linear-gradient(180deg,transparent,rgba(88,85,192,.08))}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(24px,4vw,48px)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--w46);margin-bottom:14px;font-weight:500}
.foot-links{display:flex;flex-direction:column;gap:10px}
.foot-links a{font-size:14px;color:var(--w64);width:fit-content;position:relative}
.foot-links a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:clamp(36px,5vw,64px);padding-top:20px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--w32);text-transform:uppercase}

/* ── erişilebilirlik: hareket azaltma ──────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv],[data-rv-stagger]>*{opacity:1!important;transform:none!important}
  .cursor,.cursor-dot,.field{display:none}
}