/* ══════════════════════════════════════════════════════════════
   pages.css — bölüm bileşenleri: hero arena · canlı şerit · demo
   düello · mod kartları · lig merdiveni · zaman çizelgesi · SSS ·
   ekip · CTA. Tokenlar nw.css'ten gelir.
   ══════════════════════════════════════════════════════════════ */

/* ── HERO ──────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-top:96px;padding-bottom:60px;overflow:hidden}
.hero-halo{position:absolute;width:min(1100px,120vw);aspect-ratio:1;left:50%;top:-30%;transform:translateX(-50%);background:radial-gradient(circle,rgba(88,85,192,.5),rgba(88,85,192,.12) 42%,transparent 66%);filter:blur(10px);pointer-events:none}
.hero-in{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(28px,5vw,72px);align-items:center;position:relative;z-index:2}
@media(max-width:980px){.hero{min-height:auto;padding-top:118px}.hero-in{grid-template-columns:1fr;gap:44px}}
.hero h1{margin:18px 0 20px}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>span{display:block;transform:translateY(110%);animation:heroLine .95s var(--ease-out) forwards}
.hero h1 .ln:nth-child(2)>span{animation-delay:.1s}
.hero h1 .ln:nth-child(3)>span{animation-delay:.2s}
@keyframes heroLine{to{transform:none}}
.hero .outline{color:transparent;-webkit-text-stroke:1.6px var(--w32)}
.hero-sub{max-width:46ch;color:var(--w64);font-size:clamp(15px,1.3vw,17.5px);line-height:1.62}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}
.hero-note{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--w32);text-transform:uppercase}
.scrollcue{position:absolute;left:var(--gut);bottom:26px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--w32);z-index:3}
.scrollcue i{display:block;width:1px;height:38px;background:linear-gradient(180deg,var(--yellow),transparent);animation:cueDrop 2.2s var(--ease) infinite}
@keyframes cueDrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* arena — hero'daki canlı maç kartı */
.arena{position:relative;border-radius:26px;padding:16px;background:linear-gradient(165deg,rgba(88,85,192,.34),rgba(10,6,26,.9));border:1px solid var(--line-2);box-shadow:var(--shadow);transform-style:preserve-3d}
.arena::before{content:'';position:absolute;inset:-1px;border-radius:27px;padding:1px;background:conic-gradient(from 0deg,transparent,rgba(255,238,83,.55),transparent 28%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:nwSpinSlow 7s linear infinite;pointer-events:none;opacity:.8}
.arena-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.duelist{display:flex;align-items:center;gap:9px;min-width:0}
.duelist.me{flex-direction:row-reverse;text-align:right}
.av{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-family:var(--display);font-size:15px;color:#160f33;border:2px solid rgba(255,255,255,.7);flex-shrink:0}
.duelist .nm{font-family:var(--display);font-size:12px;letter-spacing:.4px;line-height:1.1}
.duelist .st{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:var(--w46);text-transform:uppercase}
.arena-clock{flex:1;text-align:center}
.arena-clock .t{font-family:var(--display);font-size:16px;color:#fff;letter-spacing:1px}
.arena-clock .b{height:3px;border-radius:99px;background:rgba(0,0,0,.4);overflow:hidden;margin-top:5px}
.arena-clock .b i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--yellow));width:64%;animation:clockDrain 12s linear infinite}
@keyframes clockDrain{from{width:78%}to{width:8%}}
.feed{display:flex;flex-direction:column;gap:7px;min-height:198px;padding:10px;border-radius:16px;background:rgba(0,0,0,.3);border:1px solid var(--line)}
.fr{display:flex;align-items:center;gap:8px;animation:nwPop .4s var(--ease-out) both}
.fr.mine{flex-direction:row-reverse}
.fr .who{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--w32);width:26px;flex-shrink:0;text-align:center}
.fr .tiles{display:flex;gap:4px}
.fr .tile{--ts:30px;border-radius:8px;border-width:1.5px}
.fr .res{display:inline-flex;gap:5px;font-family:var(--mono);font-size:10px;padding:4px 8px;border-radius:999px;background:var(--w06);border:1px solid var(--line)}
.res .ok{color:var(--teal)}.res .near{color:var(--yellow)}.res .no{color:var(--w32)}
.arena-pad{margin-top:12px;padding:12px;border-radius:16px;background:rgba(0,0,0,.28);border:1px solid var(--line)}
.pad-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.pk{height:34px;border-radius:9px;display:grid;place-items:center;font-family:var(--display);font-size:15px;color:#fff;background:rgba(255,255,255,.1);border:1px solid var(--line-2);padding-top:3px}
.pk.go{background:var(--yellow);color:#1a1230;grid-column:span 2}
.float-chip{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:14px;background:rgba(12,8,28,.86);border:1px solid var(--line-2);backdrop-filter:blur(10px);box-shadow:0 18px 40px rgba(0,0,0,.45);flex:1 1 180px;min-width:0}
.float-chip .ic{font-size:18px;flex-shrink:0}
.float-chip .tt{font-size:12.5px;font-weight:700;line-height:1.2;display:block}
.float-chip .ss{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--w46);text-transform:uppercase;display:block}
/* Çipler arena'nın İÇİNE düşmüyor: kartın altında kendi satırında duruyorlar.
   (Mutlak konumlu ve negatif ofsetliyken sarmalayıcı = arena genişliği olduğu için
   rakip avatarını ve GÖNDER tuşunu örtüyorlardı.) */
.arena-chips{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.arena-chips .float-chip{animation:nwFloat 6s ease-in-out infinite}
.arena-chips .float-chip:nth-child(2){animation-delay:2.4s}
@media(max-width:420px){.arena-chips{display:none}}

/* ── canlı şerit (marquee + sayaçlar) ──────────────────────── */
.livebar{border-block:1px solid var(--line);background:rgba(255,255,255,.02);position:relative;overflow:hidden}
.livebar-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:760px){.livebar-in{grid-template-columns:repeat(2,1fr)}}
.lb-cell{padding:22px var(--gut);border-left:1px solid var(--line)}
.lb-cell:first-child{border-left:0}
.lb-cell .v{font-family:var(--display);font-size:clamp(26px,3.2vw,40px);line-height:1;color:#fff}
.lb-cell .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--w46);text-transform:uppercase;margin-top:8px}
.lb-cell.live .v{color:var(--teal)}

/* ── demo düello ───────────────────────────────────────────── */
.duel{position:relative;border-radius:var(--r-l);border:1px solid var(--line-2);background:linear-gradient(170deg,rgba(88,85,192,.24),rgba(8,5,20,.94));padding:clamp(16px,2.4vw,26px);overflow:hidden}
.duel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.duel-state{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--w46)}
.duel-state b{color:var(--yellow);font-weight:500}
.duel-board{display:flex;flex-direction:column;gap:8px;min-height:212px;padding:12px;border-radius:16px;background:rgba(0,0,0,.34);border:1px solid var(--line)}
.duel-empty{margin:auto;text-align:center;color:var(--w32);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.duel-row{display:flex;align-items:center;gap:10px;animation:nwPop .32s var(--ease-out) both}
.duel-row .tiles{display:flex;gap:6px}
.duel-row .tile{--ts:38px;animation:nwFlip .45s var(--ease-out) both}
.duel-row .tile:nth-child(2){animation-delay:.08s}
.duel-row .tile:nth-child(3){animation-delay:.16s}
.duel-row .res{margin-left:auto;display:inline-flex;gap:8px;font-family:var(--mono);font-size:11px;padding:6px 11px;border-radius:999px;background:var(--w06);border:1px solid var(--line)}
.duel-input{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px}
.slot{width:54px;height:62px;border-radius:13px;display:grid;place-items:center;font-family:var(--display);font-size:30px;padding-top:5px;background:rgba(0,0,0,.35);border:2px solid var(--w16);color:#fff;transition:border-color .2s,transform .2s}
.slot.on{border-color:var(--yellow);box-shadow:0 0 0 4px rgba(255,238,83,.12)}
.slot.fill{background:rgba(255,238,83,.12);border-color:var(--yellow)}
.duel-keys{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:16px}
.key{height:52px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.07);color:#fff;font-family:var(--display);font-size:20px;padding-top:4px;cursor:pointer;transition:transform .12s var(--ease),background .2s,border-color .2s}
.key:hover{background:rgba(255,255,255,.14);border-color:var(--w32)}
.key:active{transform:translateY(3px)}
.key[disabled]{opacity:.28;cursor:not-allowed}
.key.used{color:var(--w32);background:rgba(255,255,255,.03)}
.key.hit{border-color:var(--teal);color:var(--teal)}
.key.wide{grid-column:span 2;font-size:15px;font-family:var(--sans);font-weight:700;letter-spacing:.02em}
.key.go{background:var(--yellow);color:#1a1230;border-color:transparent;box-shadow:0 4px 0 var(--yellow-deep)}
.key.go:active{box-shadow:0 1px 0 var(--yellow-deep)}
.duel-msg{margin-top:12px;text-align:center;font-size:13px;color:var(--w64);min-height:20px}
.duel-msg.warn{color:var(--coral);animation:nwShake .4s}
.duel-end{margin-top:14px;padding:16px;border-radius:16px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);text-align:center;animation:nwPop .4s var(--ease-out) both}
.duel-end h4{font-family:var(--display);font-size:26px;letter-spacing:.5px;margin-bottom:6px}
.duel-end.win h4{color:var(--teal)}
.duel-end.lose h4{color:var(--coral)}
.duel-end p{font-size:13.5px;color:var(--w64);max-width:46ch;margin-inline:auto}
.duel-end .row{justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap}

/* ── adım kartları (nasıl oynanır) ─────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:clamp(20px,2.4vw,30px);border-radius:var(--r-l);border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));overflow:hidden}
.step .n{position:absolute;top:-10px;right:10px;font-family:var(--display);font-size:92px;color:rgba(255,255,255,.05);line-height:1}
.step h3{font-family:var(--display);font-size:22px;letter-spacing:.4px;margin-bottom:10px}
.step p{font-size:14px;color:var(--w64);line-height:1.6}
.step .vis{display:flex;align-items:center;gap:6px;margin-top:18px;flex-wrap:wrap}
.legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:clamp(18px,2.4vw,26px);border-radius:var(--r-l);border:1px dashed var(--line-2);background:rgba(255,255,255,.02);margin-top:18px}
@media(max-width:820px){.legend{grid-template-columns:1fr}}
.legend-row{display:flex;align-items:center;gap:14px}
.legend-row b{display:block;font-size:13.5px;margin-bottom:2px}
.legend-row span{font-size:12.5px;color:var(--w46)}

/* ── mod kartları ──────────────────────────────────────────── */
.mode{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(18px,2.2vw,26px);border-radius:var(--r-l);border:1px solid var(--line);background:linear-gradient(165deg,color-mix(in oklab,var(--c) 14%,transparent),rgba(255,255,255,.015));overflow:hidden;transition:border-color .3s,transform .3s var(--ease)}
.mode:hover{border-color:color-mix(in oklab,var(--c) 55%,transparent)}
.mode .glow{position:absolute;width:220px;height:220px;right:-70px;top:-90px;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--c) 42%,transparent),transparent 68%);filter:blur(4px);pointer-events:none}
.mode .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:color-mix(in oklab,var(--c) 18%,transparent);border:1px solid color-mix(in oklab,var(--c) 45%,transparent)}
.mode h3{font-family:var(--display);font-size:21px;letter-spacing:.4px;color:var(--c)}
.mode p{font-size:13.5px;color:var(--w64);line-height:1.6}
.mode .meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.mode .meta div{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--w32);text-transform:uppercase}
.mode .meta b{display:block;font-family:var(--sans);font-size:15px;letter-spacing:-.01em;color:#fff;margin-top:3px}
.mode-rule{font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--w46);padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid var(--line)}
.daily-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media(max-width:1000px){.daily-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.daily-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.daily{position:relative;padding:18px 16px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.035);transition:.3s var(--ease);overflow:hidden}
.daily:hover{background:rgba(255,255,255,.07);transform:translateY(-4px)}
.daily .e{font-size:26px}
.daily h4{font-family:var(--display);font-size:15px;letter-spacing:.3px;margin:10px 0 6px;color:var(--c,#fff)}
.daily p{font-size:12px;color:var(--w46);line-height:1.5}
.daily .rw{margin-top:12px;font-family:var(--mono);font-size:10.5px;color:var(--yellow);letter-spacing:.08em}

/* ── lig merdiveni ─────────────────────────────────────────── */
.ladder{display:flex;flex-direction:column;gap:8px}
.rung{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 18px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(90deg,color-mix(in oklab,var(--c) 12%,transparent),rgba(255,255,255,.015));transition:.3s var(--ease)}
.rung:hover{transform:translateX(6px);border-color:color-mix(in oklab,var(--c) 50%,transparent)}
.rung .sym{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:20px;background:color-mix(in oklab,var(--c) 20%,transparent);border:1px solid color-mix(in oklab,var(--c) 52%,transparent);color:var(--c)}
.rung .nm{font-family:var(--display);font-size:18px;letter-spacing:.4px;color:var(--c)}
.rung .en{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--w32);text-transform:uppercase}
.rung .elo{font-family:var(--mono);font-size:12px;color:var(--w64);text-align:right}
.rung .elo b{display:block;font-family:var(--display);font-size:17px;color:#fff;letter-spacing:.5px}
.rung.peak{box-shadow:0 0 44px color-mix(in oklab,var(--c) 26%,transparent)}

/* ── zaman çizelgesi ───────────────────────────────────────── */
.tl{position:relative;padding-left:34px}
.tl::before{content:'';position:absolute;left:9px;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,var(--yellow),var(--lilac),transparent)}
.tl-item{position:relative;padding:0 0 clamp(26px,3vw,42px)}
.tl-item::before{content:'';position:absolute;left:-30px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--ink-900);border:2px solid var(--w32)}
.tl-item.new::before{background:var(--yellow);border-color:var(--yellow);box-shadow:0 0 0 5px rgba(255,238,83,.14)}
.tl-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.tl-v{font-family:var(--display);font-size:19px;letter-spacing:.5px}
.tl-d{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--w32);text-transform:uppercase}
.tl-badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;padding:3px 8px;border-radius:999px;background:rgba(255,238,83,.16);border:1px solid rgba(255,238,83,.4);color:var(--yellow);text-transform:uppercase}
.tl-item h3{font-size:18px;font-weight:700;margin-bottom:6px}
.tl-item p{font-size:14px;color:var(--w64);max-width:66ch;line-height:1.6}
.tl-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tl-tags span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:4px 9px;border-radius:999px;background:var(--w06);border:1px solid var(--line);color:var(--w46)}

/* ── değer kartları ────────────────────────────────────────── */
.value{display:flex;gap:16px;padding:clamp(18px,2.2vw,26px);border-radius:var(--r-l);border:1px solid var(--line);background:rgba(255,255,255,.028);transition:.3s var(--ease)}
.value:hover{background:rgba(255,255,255,.055)}
.value .m{font-family:var(--display);font-size:34px;line-height:1;color:var(--yellow);opacity:.5;flex-shrink:0}
.value h3{font-size:17px;font-weight:700;margin-bottom:7px}
.value p{font-size:13.5px;color:var(--w64);line-height:1.62}

/* ── SSS ───────────────────────────────────────────────────── */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;gap:16px;padding:20px 0;background:none;border:0;cursor:pointer;text-align:left;font-size:16.5px;font-weight:600;color:#fff;transition:color .2s}
.faq-q:hover{color:var(--yellow)}
.faq-q .ix{font-family:var(--mono);font-size:11px;color:var(--w32);letter-spacing:.1em}
.faq-q .pm{margin-left:auto;width:24px;height:24px;flex-shrink:0;position:relative}
.faq-q .pm::before,.faq-q .pm::after{content:'';position:absolute;inset:50% 2px auto;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.faq-q .pm::after{transform:rotate(90deg)}
.faq-item.open .faq-q .pm::after{transform:rotate(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-a p{padding:0 40px 22px 34px;font-size:14.5px;color:var(--w64);line-height:1.68;max-width:74ch}

/* ── ekip ──────────────────────────────────────────────────── */
.person{text-align:center;padding:clamp(16px,2vw,24px);border-radius:var(--r-l);border:1px solid var(--line);background:rgba(255,255,255,.028)}
.person .ph{width:74px;height:74px;border-radius:22px;margin:0 auto 14px;display:grid;place-items:center;font-family:var(--display);font-size:28px;color:#160f33}
.person h4{font-size:15.5px;font-weight:700}
.person span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--w46);text-transform:uppercase}
.person p{font-size:12.5px;color:var(--w46);margin-top:10px;line-height:1.55}

/* ── büyük CTA ─────────────────────────────────────────────── */
.cta{position:relative;overflow:hidden;border-radius:clamp(22px,3vw,34px);padding:clamp(40px,6vw,86px) clamp(22px,4vw,64px);text-align:center;border:1px solid var(--line-2);background:radial-gradient(120% 130% at 50% 0%,rgba(88,85,192,.5),rgba(8,5,20,.94) 62%)}
.cta h2{margin-bottom:14px}
.cta .store-row{justify-content:center;margin-top:28px}
.cta-marq{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:26px;font-family:var(--display);font-size:64px;color:rgba(255,255,255,.035);white-space:nowrap;pointer-events:none;animation:nwSweep 26s linear infinite}

/* ── sayfa başlığı (alt sayfalar) ──────────────────────────── */
.phead{position:relative;padding-top:clamp(120px,14vw,170px);padding-bottom:clamp(30px,4vw,54px);overflow:hidden}
.phead h1{font-size:clamp(40px,6vw,82px);margin:14px 0 18px}
.phead .lede{max-width:60ch}
.phead-halo{position:absolute;width:760px;aspect-ratio:1;left:-10%;top:-40%;background:radial-gradient(circle,rgba(88,85,192,.42),transparent 62%);pointer-events:none}