/* ============================================================
   MENAJER 11 — Premium görsel katman
   ------------------------------------------------------------
   style.css'in ÜSTÜNE biner. Cam efektleri, gradyan tipografi,
   derinlik ve mikro animasyonlarla arayüzü yükseltir.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Archivo:wght@700;800;900&display=swap');

:root{
  --grad-gold:linear-gradient(135deg,#ffe08a 0%,#ffc83d 42%,#e8951a 100%);
  --grad-green:linear-gradient(135deg,#57e394 0%,#27c96b 45%,#0f9a53 100%);
  --glass:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  --glass-brd:rgba(255,255,255,.14);
  --glow-gold:0 0 22px rgba(255,200,61,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- tipografi ---------- */
body{
  font-family:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  letter-spacing:.1px;
}

/* ============================================================
   Ekran geçişi — içerik yumuşak yukarı süzülür
   ============================================================ */
.screen.active.anim-in > *{
  animation:preIn .5s var(--ease) both;
}
.screen.active.anim-in > *:nth-child(2){ animation-delay:.04s }
.screen.active.anim-in > *:nth-child(3){ animation-delay:.08s }
.screen.active.anim-in > *:nth-child(4){ animation-delay:.12s }
@keyframes preIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* İnce, temalı kaydırma çubuğu */
.scroll::-webkit-scrollbar,.sh-body::-webkit-scrollbar,.feed::-webkit-scrollbar{width:6px}
.scroll::-webkit-scrollbar-thumb,.sh-body::-webkit-scrollbar-thumb,.feed::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--gold),var(--gold2));border-radius:6px;
}
.scroll,.sh-body,.feed{scrollbar-width:thin;scrollbar-color:var(--gold2) transparent}

/* ============================================================
   MENÜ — kahraman bölüm
   ============================================================ */
.kick{
  font-family:'Archivo',sans-serif;
  font-size:11.5px;letter-spacing:5px;font-weight:800;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative;
}
.kick::after{
  content:"";display:block;width:52px;height:2px;margin:7px auto 0;
  background:var(--grad-gold);border-radius:2px;opacity:.8;
}

.brand h1{
  font-family:'Archivo',sans-serif;
  font-weight:900;
  font-size:clamp(38px,12vw,56px);
  letter-spacing:-1.5px;
  line-height:.84;
  text-align:center;
  background:linear-gradient(180deg,#ffffff 0%,#dcefe3 55%,#9fc7b0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.55));
}
/* "OYNA" alt satırda, altın — iki satırlı güçlü wordmark */
.brand h1 span{
  display:block;margin-left:0;
  -webkit-text-fill-color:transparent;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 2px 10px rgba(255,200,61,.5));
}
.brand-mark{
  position:relative;
  filter:drop-shadow(0 8px 26px rgba(255,200,61,.28));
  animation:markFloat 5s var(--ease) infinite;
}
@keyframes markFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
.tag{font-size:13.5px;color:#b9cdc0}
.tag b{color:#fff;font-weight:700}

.cupchase{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(0,0,0,.3);
  border-radius:16px;
}
.cc-row .cup{filter:drop-shadow(0 2px 6px rgba(255,200,61,.6))}

.foot{color:#6f877b;letter-spacing:.5px}

/* ---------- üst chip'ler ---------- */
.chip{
  background:rgba(8,20,13,.55);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 14px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .15s var(--ease),border-color .2s;
}
.chip:active{transform:scale(.94)}
.chip-btn:hover{border-color:rgba(255,200,61,.5)}

/* ============================================================
   BUTONLAR — premium
   ============================================================ */
.btn{
  border-radius:14px;
  font-family:'Sora',sans-serif;font-weight:700;
  letter-spacing:.5px;
  transition:transform .12s var(--ease),box-shadow .2s var(--ease),filter .2s;
  will-change:transform;
}
.btn::before{border-radius:14px 14px 0 0}
/* parlama süpürmesi */
.btn::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);pointer-events:none;opacity:0;
}
.btn-gold::after,.btn-green::after{animation:sheen 5.5s var(--ease) 1.5s infinite}
@keyframes sheen{
  0%{left:-60%;opacity:0}
  8%{opacity:1}
  18%{left:120%;opacity:0}
  100%{left:120%;opacity:0}
}
.btn-gold{
  background:var(--grad-gold);
  color:#241701;
  box-shadow:0 8px 22px rgba(255,178,20,.4),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 6px rgba(150,90,0,.35);
}
.btn-green{
  background:var(--grad-green);
  color:#04240f;
  box-shadow:0 8px 22px rgba(39,201,107,.4),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 6px rgba(0,80,40,.35);
}
.btn-gold:hover,.btn-green:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-gold:active,.btn-green:active{transform:translateY(0) scale(.98)}
.btn-ghost{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.25);
  color:#e8f3ec;
}
.btn-ghost:hover{
  border-color:rgba(255,200,61,.4);
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  transform:translateY(-1px);
}

/* ============================================================
   ÜST BAR — cam
   ============================================================ */
.topbar{
  background:linear-gradient(180deg,rgba(16,42,27,.85),rgba(12,29,19,.55));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--glass-brd);
  box-shadow:0 6px 20px rgba(0,0,0,.28);
}
.tb-txt b{
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.back{
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .12s var(--ease),background .2s;
}
.back:hover{background:rgba(255,200,61,.16);border-color:rgba(255,200,61,.4)}
.badge{
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

/* ============================================================
   KARTLAR & PANELLER — cam + hover
   ============================================================ */
.hint{
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:12px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.sec-h{
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.sec-h::before{
  content:"";display:inline-block;width:16px;height:2px;
  background:var(--grad-gold);border-radius:2px;
  vertical-align:middle;margin-right:8px;transform:translateY(-2px);
}

/* Kulüp satırları */
.club-row{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:14px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .14s var(--ease),border-color .2s,box-shadow .2s;
}
.club-row:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.4)}
.club-row.sel{
  border-color:rgba(255,200,61,.7);
  box-shadow:var(--glow-gold),0 8px 22px rgba(0,0,0,.4);
}
.club-row .tier{
  background:var(--grad-gold);color:#241701;border:0;font-weight:800;
}
.crest{transition:transform .14s var(--ease)}
.club-row:hover .crest{transform:scale(1.08) rotate(-3deg)}

/* Diziliş kartları */
.form-card{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:16px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:transform .16s var(--ease),border-color .2s,box-shadow .2s;
}
.form-card:hover{transform:translateY(-3px) scale(1.01)}
.form-card.sel{
  border-color:rgba(255,200,61,.75);
  box-shadow:var(--glow-gold),0 10px 26px rgba(0,0,0,.45);
}
.form-card .fn{
  font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:1px;
}
.form-card.sel .fn{
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ============================================================
   ONUR TABLOSU / İSTATİSTİK
   ============================================================ */
.seg{
  background:rgba(6,16,10,.6);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:13px;
}
.seg-btn{border-radius:10px;font-family:'Sora',sans-serif;transition:all .18s var(--ease)}
.seg-btn.on{
  background:var(--grad-gold);color:#241701;
  box-shadow:0 4px 12px rgba(255,200,61,.4),inset 0 1px 0 rgba(255,255,255,.4);
}
.hn-row{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:13px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .14s var(--ease),box-shadow .2s;
}
.hn-row:hover{transform:translateX(3px)}
.hn-row.top1{
  border-color:rgba(255,200,61,.6);
  background:linear-gradient(100deg,rgba(255,200,61,.14),rgba(255,255,255,.03));
  box-shadow:var(--glow-gold);
}
.hn-row.top1 .rk::before{content:"🥇 ";}
.hn-row.top2{border-color:rgba(200,210,220,.4);background:linear-gradient(100deg,rgba(200,210,220,.1),rgba(255,255,255,.02))}
.hn-row.top3{border-color:rgba(205,140,80,.4);background:linear-gradient(100deg,rgba(205,140,80,.1),rgba(255,255,255,.02))}
.hn-row.me{outline:1px solid rgba(255,200,61,.5)}
.cups{
  font-family:'Archivo',sans-serif;font-weight:900;
}
.kpi{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:14px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 14px rgba(0,0,0,.25);
  transition:transform .14s var(--ease);
}
.kpi:hover{transform:translateY(-2px)}
.kpi .kv{font-family:'Archivo',sans-serif;font-weight:900}
.kpi.gold .kv{
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ============================================================
   SHEET / OVERLAY — cam pencere
   ============================================================ */
.overlay{background:rgba(3,10,6,.72)}
.sheet{
  background:linear-gradient(165deg,rgba(22,52,34,.96),rgba(9,24,15,.98));
  border:1px solid var(--glass-brd);
  border-radius:20px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1);
}
.sh-head{border-bottom:1px solid var(--glass-brd)}
.sh-head .h{font-family:'Sora',sans-serif;font-weight:800}
.sh-x{
  background:var(--glass);border:1px solid var(--glass-brd);
  transition:transform .12s var(--ease),background .2s;
}
.sh-x:hover{background:rgba(255,77,94,.2);transform:rotate(90deg)}

/* Form alanı (giriş/kayıt) */
.fld input,#setName{
  border-radius:12px !important;
  background:rgba(0,0,0,.3) !important;
  border:1px solid var(--glass-brd) !important;
  transition:border-color .2s,box-shadow .2s;
}
.fld input:focus,#setName:focus{
  outline:none;border-color:rgba(255,200,61,.6) !important;
  box-shadow:0 0 0 3px rgba(255,200,61,.15);
}

/* ============================================================
   DRAFT — tepsi & kartlar
   ============================================================ */
.tray{
  background:linear-gradient(0deg,rgba(6,16,10,.92),rgba(6,16,10,.4));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--glass-brd);
}
.lb{
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:11px;
}
.lb .v{font-family:'Archivo',sans-serif;font-weight:900}
.pcard{
  background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  border:1px solid var(--glass-brd);
  border-radius:14px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .14s var(--ease),border-color .2s,box-shadow .2s;
}
.pcard:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.45)}
.pcard.hot{border-color:rgba(255,200,61,.65);box-shadow:var(--glow-gold)}
.pcard .pc-r{font-family:'Archivo',sans-serif;font-weight:900}
.slot-card{
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:12px;
  transition:transform .12s var(--ease),border-color .2s;
}
.slot-card:hover{transform:translateY(-2px)}
.slot-card.best{border-color:rgba(39,201,107,.6);box-shadow:0 0 16px rgba(39,201,107,.3)}
.edit-hint{
  background:linear-gradient(100deg,rgba(255,200,61,.12),rgba(255,200,61,.04));
  border:1px solid rgba(255,200,61,.28);border-radius:11px;
}

/* ============================================================
   MAÇ — HUD & feed cam
   ============================================================ */
.mt-sl{
  background:linear-gradient(180deg,rgba(8,20,13,.75),rgba(0,0,0,.4));
  border:1px solid var(--glass-brd);border-radius:14px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.mt-sl .sc{font-family:'Archivo',sans-serif;font-weight:900}
.feed{
  background:rgba(0,0,0,.35);border:1px solid var(--glass-brd);border-radius:13px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.break-card .bc-s{
  font-family:'Archivo',sans-serif;
  background:linear-gradient(180deg,#fff,#cfe0d5);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ============================================================
   SONUÇ EKRANI
   ============================================================ */
.res-badge{filter:drop-shadow(0 8px 24px rgba(255,200,61,.4));animation:markFloat 4s var(--ease) infinite}
.res-ttl{
  font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-1px;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.res-box{
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:16px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.res-score{font-family:'Archivo',sans-serif;font-weight:900}

/* ============================================================
   TOAST — cam bildirim
   ============================================================ */
.toast{
  background:rgba(8,22,14,.9);
  border:1px solid var(--glass-brd);
  border-radius:13px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 30px rgba(0,0,0,.5);
  font-weight:600;
}

/* ============================================================
   Hareket azaltma tercihi
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ============================================================
   MENÜ — oyun menüsü kompozisyonu (yeniden tasarım)
   ------------------------------------------------------------
   Eşit butonların alt alta dizildiği "şablon" görünümü yerine:
   kahraman + öne çıkan efsane kartı + dominant CTA + ikon menü.
   ============================================================ */
/* NOT: display'i BURADA set etmiyoruz. #scrMenu ID'si .screen{display:none}
   kuralından güçlü olduğu için display:flex yazarsak menü hiç gizlenmez ve
   diğer ekranların üstüne biner. Görünürlüğü .screen / .screen.active yönetir;
   biz sadece menü aktifken geçerli olacak yerleşimi veriyoruz. */
#scrMenu.active{
  display:flex;flex-direction:column;
  padding:0 18px calc(10px + var(--safe-b));
  gap:0;
}
/* .brand'in flex:1 davranışını kır — düzeni biz dağıtıyoruz */
#scrMenu .brand{
  flex:0 0 auto;
  padding:6px 0 4px;
  gap:6px;
}
#scrMenu .brand-mark{width:70px;height:70px}
#scrMenu .brand h1{margin:2px 0}

/* üst boşluğu esnek bırak, içerik dikeyde dengelensin */
#scrMenu .menu-top{padding:12px 0 6px}
#scrMenu::before{content:"";flex:0 0 6px}

/* ---------- öne çıkan efsane kartı ---------- */
.feat{
  display:flex;align-items:center;gap:12px;
  margin:8px 0 10px;padding:12px 14px;
  border-radius:18px;
  background:
    linear-gradient(120deg,rgba(255,200,61,.14),rgba(255,255,255,.03) 60%),
    linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,200,61,.35);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);
  position:relative;overflow:hidden;
  animation:preIn .5s var(--ease) both;
}
.feat::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 120% at 85% -20%,rgba(255,200,61,.25),transparent 60%);
  pointer-events:none;
}
.feat-av{
  width:56px;height:56px;flex:0 0 56px;border-radius:12px;
  background:#0b1a11;box-shadow:0 4px 12px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.1);
  transition:opacity .3s var(--ease);
}
.feat-info{flex:1;min-width:0}
.feat-tag{
  font-size:9.5px;letter-spacing:1.6px;font-weight:800;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.feat-name{font-family:'Sora',sans-serif;font-weight:800;font-size:17px;line-height:1.1;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feat-club{font-size:11.5px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feat-rat{
  flex:0 0 auto;font-family:'Archivo',sans-serif;font-weight:900;font-size:30px;line-height:1;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 6px rgba(255,200,61,.4));
}
.feat.swap .feat-av,.feat.swap .feat-info,.feat.swap .feat-rat{opacity:0}

/* ---------- kulüp arma şeridi ---------- */
.cc-strip{
  overflow:hidden;margin:2px 0 12px;padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.cc-strip .cc-row{
  display:flex;gap:12px;align-items:center;justify-content:center;
  animation:none;
}
.cc-strip .crest{filter:drop-shadow(0 3px 8px rgba(0,0,0,.4))}

/* ---------- dominant CTA ---------- */
.cta-stack{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.cta-primary{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;border:0;border-radius:18px;
  background:var(--grad-gold);color:#231701;
  box-shadow:0 12px 32px rgba(255,178,20,.5),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -4px 8px rgba(150,90,0,.35);
  position:relative;overflow:hidden;cursor:pointer;
  transition:transform .14s var(--ease),box-shadow .2s var(--ease),filter .2s;
}
.cta-primary::after{
  content:"";position:absolute;top:0;left:-60%;width:38%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:sheen 4.5s var(--ease) 1s infinite;pointer-events:none;
}
.cta-primary:hover{transform:translateY(-2px);filter:brightness(1.04)}
.cta-primary:active{transform:scale(.985)}
.cta-ic{font-size:28px;filter:drop-shadow(0 2px 4px rgba(150,90,0,.4))}
.cta-tx{flex:1;display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;text-align:left}
.cta-tx b{font-family:'Archivo',sans-serif;font-weight:900;font-size:19px;letter-spacing:.5px}
.cta-tx small{font-size:11px;font-weight:600;opacity:.75;margin-top:2px}
.cta-arw{font-size:30px;font-weight:900;opacity:.65}

.cta-secondary{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 16px;border-radius:14px;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#e8f3ec;font-weight:700;letter-spacing:.4px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .12s var(--ease),border-color .2s,background .2s;
}
.cta-secondary em{font-style:normal;font-size:10.5px;color:var(--ink-dim);font-weight:500}
.cta-secondary:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.28)}
.cta-secondary:active{transform:scale(.985)}

/* ---------- alt ikon menüsü ---------- */
.menu-nav{
  display:flex;gap:8px;margin:12px 0 4px;
}
.menu-nav button{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:11px 4px;border-radius:14px;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--ink-dim);font-size:11px;font-weight:700;letter-spacing:.3px;cursor:pointer;
  transition:transform .12s var(--ease),color .2s,border-color .2s,background .2s;
}
.menu-nav button span{font-size:20px;line-height:1;filter:grayscale(.15)}
.menu-nav button:hover{color:#fff;border-color:rgba(255,200,61,.4);transform:translateY(-2px);
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03))}
.menu-nav button:active{transform:scale(.96)}

#scrMenu .foot{padding-top:8px}

/* kısa ekranda kart/başlığı biraz kıs */
@media (max-height:680px){
  #scrMenu .brand-mark{width:54px;height:54px}
  #scrMenu .brand h1{font-size:38px}
  .feat{padding:9px 12px;margin:4px 0 8px}
  .feat-av{width:48px;height:48px;flex-basis:48px}
  .cc-strip{margin:0 0 8px;padding:5px 0}
}

/* ============================================================
   ANA EKRAN — dashboard (mobil yığın + masaüstü geniş)
   scrMenu artık #app dışında, tüm ekranı kaplar.
   ============================================================ */
#scrMenu.active{
  position:fixed; inset:0; z-index:6;
  display:flex; flex-direction:column;
  padding:0; gap:0;
  background:
    radial-gradient(120% 80% at 70% -10%, rgba(28,74,44,.55), transparent 55%),
    radial-gradient(90% 70% at 10% 110%, rgba(255,200,61,.06), transparent 60%),
    linear-gradient(180deg,#08150d 0%,#060f0a 100%);
  overflow:hidden;
}
#scrMenu::before{content:none}   /* eski spacer'ı iptal */

/* ---------- üst bar ---------- */
.mtopbar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:14px;
  padding:12px 18px; padding-top:calc(12px + var(--safe-t));
  border-bottom:1px solid var(--glass-brd);
  background:linear-gradient(180deg,rgba(8,20,13,.85),rgba(8,20,13,.35));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.mtb-logo{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.mtb-badge{width:34px;height:34px;display:block;filter:drop-shadow(0 4px 12px rgba(255,200,61,.3))}
.mtb-logo b{font-family:'Archivo',sans-serif;font-weight:900;font-size:15px;line-height:.9;letter-spacing:.3px;display:flex;flex-direction:column}
.mtb-logo i{font-style:normal;color:var(--gold)}
.mtb-nav{display:none;flex:1;justify-content:center;gap:6px}
.mtb-link{
  padding:8px 13px;border-radius:9px;border:0;background:transparent;
  color:var(--ink-dim);font-weight:700;font-size:12.5px;letter-spacing:.6px;cursor:pointer;
  transition:color .18s,background .18s;
}
.mtb-link:hover{color:#fff;background:rgba(255,255,255,.06)}
.mtb-link.on{color:var(--gold)}
.mtb-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.mtb-ic{
  width:34px;height:34px;border-radius:9px;
  background:var(--glass);border:1px solid var(--glass-brd);
  color:var(--ink);font-size:15px;font-weight:800;cursor:pointer;
  transition:transform .12s,border-color .2s;
}
.mtb-ic:hover{border-color:rgba(255,200,61,.45);transform:translateY(-1px)}
.mtb-login{
  padding:9px 16px;border-radius:10px;
  background:var(--glass);border:1px solid var(--glass-brd);
  color:#e8f3ec;font-weight:800;font-size:12px;letter-spacing:.5px;cursor:pointer;
  transition:transform .12s,border-color .2s;
}
.mtb-login:hover{border-color:rgba(255,200,61,.5);transform:translateY(-1px)}

/* ---------- kaydırma alanı ---------- */
.dash{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:18px; padding-bottom:8px;
  display:flex; flex-direction:column; gap:14px;
  width:100%; max-width:1200px; margin:0 auto;
}

/* ---------- hero ---------- */
.hero{display:flex;flex-direction:column;gap:16px}
.hero-l{display:flex;flex-direction:column;gap:8px}
.hero .kick{text-align:left}
.hero .kick::after{margin:6px 0 0}
.hero h1{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(44px,15vw,120px);line-height:.82;letter-spacing:-2px;margin:2px 0;
  background:linear-gradient(180deg,#fff 0%,#dfeee6 60%,#a9c9b8 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.5));
}
.hero h1 span{display:block;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 14px rgba(255,200,61,.45))}
.hero-sub{font-size:clamp(15px,4.5vw,22px);font-weight:700;color:#eaf5ee;margin:6px 0 0}
.hero .tag{font-size:13px;color:var(--ink-dim);max-width:420px;margin:0}
.hero .cta-stack{margin-top:10px;max-width:420px}

/* ---------- FUT kart ---------- */
.futc{
  position:relative;border-radius:20px;padding:16px;
  background:
    radial-gradient(90% 60% at 80% 0%, rgba(255,200,61,.18), transparent 55%),
    linear-gradient(165deg,#14301f,#0a1a11);
  border:1px solid rgba(255,200,61,.4);
  box-shadow:0 22px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1);
  overflow:hidden;
}
.futc::after{content:"";position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 60px rgba(255,200,61,.08);pointer-events:none}
.futc-tag{font-size:10px;letter-spacing:2px;font-weight:800;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.futc-body{display:grid;grid-template-columns:1fr auto;grid-template-areas:"info photo";gap:10px;align-items:center;margin-top:6px}
.futc-photo{
  grid-area:photo;width:118px;height:140px;border-radius:14px;
  background:#0b1a11;box-shadow:0 8px 20px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.1);
  align-self:end;transition:opacity .3s var(--ease);
}
.futc.swap .futc-photo,.futc.swap .futc-info,.futc.swap .futc-rat{opacity:0}
.futc-rat{grid-area:photo;align-self:start;justify-self:end;text-align:center;line-height:.85;z-index:2;margin:-2px -2px 0 0}
.futc-rat b{font-family:'Archivo',sans-serif;font-weight:900;font-size:40px;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 6px rgba(255,200,61,.4))}
.futc-rat small{display:block;font-size:8.5px;letter-spacing:1.5px;color:var(--gold);font-weight:800;margin-top:-4px}
.futc-info{grid-area:info;min-width:0}
.futc-name{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(22px,6vw,34px);line-height:1;color:#fff;margin-bottom:10px}
.futc-meta{display:flex;flex-direction:column;gap:7px}
.fm-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#cfe0d5;font-weight:600}
.fm-row .crest{width:20px;height:22px}
.fm-ic{width:18px;text-align:center;color:var(--gold)}
.fm-flag{font-size:16px}
.futc-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:14px;
  border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
.futc-stats .st{text-align:center}
.futc-stats .st b{display:block;font-family:'Archivo',sans-serif;font-weight:900;font-size:18px;color:#fff}
.futc-stats .st small{font-size:8.5px;letter-spacing:.5px;color:var(--ink-dim);font-weight:700}

/* ---------- kart tabanı ---------- */
.card{
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid var(--glass-brd);border-radius:16px;padding:14px 16px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.c-h{font-size:11px;letter-spacing:1.4px;font-weight:800;color:var(--gold);margin-bottom:12px}

/* ---------- efsane 11 şeridi ---------- */
.ss-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.ss-head span{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:.5px;font-size:14px}
.ss-head b{color:var(--gold)}
.ss-head small{color:var(--ink-dim);font-size:11px}
.ss-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ss-row::-webkit-scrollbar{display:none}
.ss-cell{flex:0 0 auto;width:64px;display:flex;flex-direction:column;align-items:center;gap:3px}
.ss-av{width:52px;height:52px;border-radius:11px;background:#0b1a11;box-shadow:0 4px 10px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.08)}
.ss-pos{font-size:9px;font-weight:800;color:var(--gold);letter-spacing:.5px}
.ss-nm{font-size:9.5px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62px;text-align:center}

/* ---------- alt 3 kart ---------- */
.dash-3{display:flex;flex-direction:column;gap:14px}
.champ-body{display:flex;align-items:center;gap:12px}
.champ-tro{font-size:40px;filter:drop-shadow(0 4px 12px rgba(255,200,61,.4))}
.champ-info{min-width:0}
.champ-info .cn{font-family:'Sora',sans-serif;font-weight:800;font-size:16px;color:#fff}
.champ-info small{display:block;color:var(--ink-dim);font-size:11px;margin-top:2px}
.champ-info .cp{color:var(--gold);font-weight:800}

.lead{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.lead:last-of-type{border-bottom:0}
.lead .lr{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-weight:900;font-size:11px;background:rgba(255,255,255,.08);color:var(--ink-dim)}
.lead:nth-child(1) .lr{background:var(--grad-gold);color:#231701}
.lead .ln{flex:1;min-width:0;font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead .lp{font-family:'Archivo',sans-serif;font-weight:900;color:var(--gold);font-size:14px}
.lead-all{width:100%;margin-top:10px;padding:9px;border-radius:10px;background:var(--glass);border:1px solid var(--glass-brd);color:#e8f3ec;font-weight:800;font-size:11.5px;letter-spacing:.5px;cursor:pointer}
.lead-all:hover{border-color:rgba(255,200,61,.4)}

.ls-row{display:flex;gap:10px}
.ls{flex:1;text-align:center}
.ls b{display:block;font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(22px,7vw,30px);color:#fff}
.ls small{font-size:10px;color:var(--ink-dim);letter-spacing:.5px}

.muted{color:var(--ink-dim);font-size:12px}

/* ---------- footer ---------- */
.mfoot{
  flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 18px calc(10px + var(--safe-b));font-size:10.5px;color:#6f877b;
  border-top:1px solid var(--glass-brd);
}
.mfoot-lnk{background:0;border:0;color:#8aa093;font-size:10.5px;font-weight:700;letter-spacing:.5px;cursor:pointer;padding:0}
.mfoot-lnk:hover{color:var(--gold)}

/* ============================================================
   MASAÜSTÜ (geniş) düzen
   ============================================================ */
@media (min-width:900px){
  .mtb-nav{display:flex}
  .dash{padding:26px 26px 12px;gap:20px}
  .hero{
    display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:32px;
    min-height:min(46vh,420px);
  }
  .hero .cta-stack{flex-direction:row}
  .hero .cta-stack .cta-primary{flex:0 0 auto;min-width:240px}
  .hero .cta-stack .cta-secondary{flex:0 0 auto}
  .futc{padding:20px;max-width:440px;justify-self:end;width:100%}
  .futc-photo{width:150px;height:180px}
  .futc-rat b{font-size:52px}
  .dash-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
  .ss-cell{width:74px}
  .ss-av{width:60px;height:60px}
}
@media (min-width:1200px){
  .hero h1{font-size:104px}
}

/* geniş ekranda #app'i (oyun panelini) menü kapatınca ortada tut;
   menü aktifken zaten üstünü örtüyor. */

/* ============================================================
   PREMIUM RÖTUŞ v2 — derinlik, doku, ışık
   ------------------------------------------------------------
   Var olan düzeni bozmadan yalnız görsel zenginlik ekler:
   ortam aurora ışığı, ince film greni, cam kartlarda daha derin
   gölge, FUT kartında dönen ışık halkası ve rafine etkileşimler.
   ============================================================ */

:root{
  --shadow-1:0 2px 6px rgba(0,0,0,.28);
  --shadow-2:0 10px 30px rgba(0,0,0,.42);
  --shadow-3:0 26px 60px rgba(0,0,0,.55);
  --hair:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  --gold-line:linear-gradient(90deg,transparent,rgba(255,200,61,.55),transparent);
}

/* ---- metin seçimi & odak halkası ---- */
::selection{background:rgba(255,200,61,.28);color:#fff}
:focus-visible{outline:2px solid rgba(255,200,61,.6);outline-offset:2px;border-radius:8px}

/* ============================================================
   Ortam AURORA — dashboard arkasında yavaş süzülen ışık kütleleri
   ============================================================ */
#scrMenu.active::after{
  content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 32% at 18% 22%, rgba(39,201,107,.20), transparent 60%),
    radial-gradient(34% 30% at 82% 12%, rgba(255,200,61,.16), transparent 60%),
    radial-gradient(40% 38% at 70% 92%, rgba(41,120,201,.14), transparent 62%);
  filter:blur(24px);
  animation:auroraDrift 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.5%,2%,0) scale(1.06)}
  100%{transform:translate3d(2.5%,-1.5%,0) scale(1.02)}
}
/* üst bar, içerik ve footer aurora'nın üstünde kalsın */
.mtopbar,.dash,.mfoot{position:relative;z-index:1}

/* ============================================================
   Film greni — çok ince, tüm ekranı kaplayan doku
   ============================================================ */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* ============================================================
   ÜST NAV — aktif sekme altın alt çizgi + yumuşak pill
   ============================================================ */
.mtb-link{position:relative;overflow:hidden}
.mtb-link::after{
  content:"";position:absolute;left:50%;bottom:4px;width:0;height:2px;border-radius:2px;
  background:var(--grad-gold);transform:translateX(-50%);
  transition:width .25s var(--ease);box-shadow:0 0 8px rgba(255,200,61,.5);
}
.mtb-link:hover::after{width:42%}
.mtb-link.on::after{width:60%}
.mtb-login{position:relative;overflow:hidden}
.mtb-login::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-18deg);pointer-events:none;opacity:0;transition:none;
}
.mtb-login:hover::after{animation:sheen 1.1s var(--ease)}

/* ============================================================
   FUT KART — çift altın çerçeve + dönen ışık halkası + parlama
   ============================================================ */
.futc{
  box-shadow:var(--shadow-3),inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,200,61,.12);
}
/* dönen konik ışık — puanın arkasında */
.futc-rat::before{
  content:"";position:absolute;width:120px;height:120px;
  top:-34px;right:-30px;z-index:-1;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,200,61,.0),rgba(255,200,61,.30),rgba(255,200,61,.0) 60%);
  filter:blur(6px);opacity:.9;
  animation:ratSpin 9s linear infinite;pointer-events:none;
}
.futc-rat{position:relative}
@keyframes ratSpin{to{transform:rotate(360deg)}}
/* üstten geçen ışık süpürmesi */
.futc::before{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-16deg);pointer-events:none;
  animation:sheen 7s var(--ease) 2s infinite;
}
.futc-photo{box-shadow:0 12px 26px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.14),0 0 22px rgba(255,200,61,.12)}
.futc-stats .st b{background:linear-gradient(180deg,#fff,#d7e6dc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ============================================================
   CAM KARTLAR — üst ışık hattı + daha derin gölge + hover bloom
   ============================================================ */
.card,.futc,.club-row,.form-card,.pcard,.kpi,.hn-row,.res-box,.mt-sl{
  position:relative;
}
.card::before,.kpi::before{
  content:"";position:absolute;left:12%;right:12%;top:0;height:1px;
  background:var(--hair);opacity:.7;pointer-events:none;
}
.card{
  box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,200,61,.28);
  box-shadow:var(--shadow-3),inset 0 1px 0 rgba(255,255,255,.12),0 0 26px rgba(255,200,61,.08);
}
.c-h{position:relative;padding-bottom:10px}
.c-h::after{
  content:"";position:absolute;left:0;bottom:0;width:36px;height:2px;border-radius:2px;
  background:var(--grad-gold);box-shadow:0 0 10px rgba(255,200,61,.5);
}

/* ============================================================
   EFSANE 11 ŞERİDİ — jetonlarda altın halka + hover zoom
   ============================================================ */
.ss-av{
  position:relative;
  transition:transform .16s var(--ease),box-shadow .2s var(--ease);
}
.ss-cell:hover .ss-av{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 8px 18px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,200,61,.55),0 0 16px rgba(255,200,61,.25);
}
.ss-cell:hover .ss-nm{color:#eaf5ee}

/* ============================================================
   CANLI KARTLAR — şampiyon kupası & lider sıraları
   ============================================================ */
.champ-tro{animation:markFloat 4.5s var(--ease) infinite}
.lead{transition:background .18s,padding-left .18s}
.lead:hover{background:linear-gradient(90deg,rgba(255,200,61,.06),transparent);padding-left:6px;border-radius:8px}
.lead .lr{transition:transform .16s var(--ease)}
.lead:hover .lr{transform:scale(1.12)}
.ls b{background:linear-gradient(180deg,#fff,#cfe0d5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ============================================================
   BİRİNCİL CTA — konik altın kenar ışığı (daha zengin)
   ============================================================ */
.cta-primary{
  box-shadow:0 14px 36px rgba(255,178,20,.5),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -4px 8px rgba(150,90,0,.4),0 0 0 1px rgba(255,220,140,.5);
}
.cta-primary .cta-arw{transition:transform .2s var(--ease)}
.cta-primary:hover .cta-arw{transform:translateX(4px)}

/* ============================================================
   SEGMENT / SEKME — aktif seçimde yumuşak iç ışık
   ============================================================ */
.seg-btn.on{box-shadow:0 4px 12px rgba(255,200,61,.4),inset 0 1px 0 rgba(255,255,255,.5),0 0 16px rgba(255,200,61,.2)}

/* ============================================================
   Masaüstünde derinliği biraz daha artır
   ============================================================ */
@media (min-width:900px){
  .futc{box-shadow:0 34px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,200,61,.14)}
  .dash{gap:22px}
}

/* Aurora & greni hareket azaltmada durdur */
@media (prefers-reduced-motion:reduce){
  #scrMenu.active::after,.futc-rat::before,.futc::before,.champ-tro{animation:none !important}
}

/* ============================================================
   UI/UX RÖTUŞ v3 — kaydırma çubuğu + genel cila
   ------------------------------------------------------------
   1) Global ince, temalı scrollbar (kalın beyaz sistem çubuğunu
      gizler; .dash dahil her yerde geçerli).
   2) Genel etkileşim ve okunabilirlik cilası.
   ============================================================ */

/* ---- Global scrollbar (WebKit/Blink) ---- */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(255,200,61,.55),rgba(220,150,26,.55));
  border-radius:20px;
  border:2px solid transparent;background-clip:padding-box;
  transition:background .2s;
}
*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#ffd77a,#e8951a);background-clip:padding-box;
}
*::-webkit-scrollbar-corner{background:transparent}
/* Firefox */
html,.dash,.scroll,.sh-body,.feed{scrollbar-width:thin;scrollbar-color:rgba(255,200,61,.5) transparent}

/* .dash için de ince altın thumb (WebKit) */
.dash::-webkit-scrollbar{width:8px}
.dash::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(255,200,61,.5),rgba(220,150,26,.5));
  border-radius:20px;border:2px solid transparent;background-clip:padding-box;
}
.dash::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ffd77a,#e8951a);background-clip:padding-box}

/* yumuşak kaydırma */
html{scroll-behavior:smooth}

/* ============================================================
   Genel cila
   ============================================================ */
/* Okunabilirlik: soluk metinleri hafif parlat */
:root{--ink-dim:#a9c1b3}

/* Dokunmatik geri bildirim: tüm interaktifler basılınca hafif küçülür */
button,.club-row,.form-card,.pcard,.card,.hn-row,.kpi{
  -webkit-tap-highlight-color:transparent;
}
@media (hover:none){
  button:active,.club-row:active,.form-card:active,.pcard:active{transform:scale(.98)}
}

/* Görsellerin sürüklenip seçilmesini engelle (oyun hissi) */
img,canvas,.crest,.ss-av,.futc-photo,.feat-av,.mtb-badge{user-select:none;-webkit-user-drag:none}

/* Kart köşe yarıçaplarını tutarlı kıl */
.card,.futc,.res-box{border-radius:18px}

/* Bölüm başlıkları arasında ritim */
.dash>*{scroll-margin-top:70px}

/* Buton metinlerinde daha net hiyerarşi */
.cta-tx b{text-shadow:0 1px 0 rgba(255,255,255,.25)}

/* Girişte içerik daha akıcı belirsin (yalnız dashboard kartları) */
.dash>.hero{animation:preIn .55s var(--ease) both}
.dash>.card:nth-of-type(1){animation:preIn .55s var(--ease) .05s both}
.dash>.card:nth-of-type(2){animation:preIn .55s var(--ease) .10s both}
.dash>.dash-3{animation:preIn .55s var(--ease) .15s both}

/* Boş/yer tutucu metin daha zarif */
.muted{opacity:.85;font-style:normal}

/* Seçili olmayan segment butonda hafif hover zemin */
.seg-btn:not(.on):hover{background:rgba(255,255,255,.06)}

/* Odaklanınca kartlar da net halka alsın (klavye erişilebilirliği) */
.club-row:focus-visible,.form-card:focus-visible,.pcard:focus-visible{
  outline:2px solid rgba(255,200,61,.6);outline-offset:2px;
}

/* ============================================================
   UI/UX RÖTUŞ v4 — vitrin geçişi & yükleme durumları
   ------------------------------------------------------------
   Sorun: FUT kartı yeni efsaneye geçerken içerik tamamen kaybolup
   ~bir an bomboş görünüyordu (merkez kart boş = "bozuk" hissi).
   Çözüm: tam kaybolma yerine yumuşak çapraz sönümleme.
   ============================================================ */

/* Geçiş elemanlarına akıcı animasyon tabanı */
.futc-photo,.futc-info,.futc-rat,
.feat-av,.feat-info,.feat-rat{
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}

/* Swap sırasında TAMAMEN kaybolma; hafif sönüp yukarı süzül (override) */
.futc.swap .futc-photo,.futc.swap .futc-info,.futc.swap .futc-rat,
.feat.swap .feat-av,.feat.swap .feat-info,.feat.swap .feat-rat{
  opacity:.14;
  transform:translateY(5px);
}
/* Fotoğraf ölçek nüansı — daha "canlı" geçiş */
.futc.swap .futc-photo{transform:translateY(5px) scale(.985)}

/* ============================================================
   YÜKLEME İSKELETİ — "Yükleniyor…" / "—" yerine zarif shimmer
   ============================================================ */
.skl{
  position:relative;overflow:hidden;border-radius:8px;
  background:rgba(255,255,255,.06);
}
.skl::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);
  transform:translateX(-100%);
  animation:sklSweep 1.25s ease-in-out infinite;
}
@keyframes sklSweep{to{transform:translateX(100%)}}
.skl-line{height:12px;margin:9px 0}
.skl-line.w60{width:60%}.skl-line.w40{width:40%}.skl-line.w80{width:80%}
@media (prefers-reduced-motion:reduce){.skl::after{animation:none}}

/* ============================================================
   GERÇEKÇİLİK KATMANI v5 — stadyum atmosferi + gerçek ikonlar
   ------------------------------------------------------------
   Amaç: "hazır AI şablonu" hissini kırmak. Düz gradyan yerine
   gece stadyumu: tepede projektör aydınlığı, altta biçme çizgili
   çim saha. Emoji yerine çizgi-stil SVG ikonlar.
   ============================================================ */

/* ---- Stadyum gece zemini (düz gradyanı değiştirir) ---- */
#scrMenu.active{
  background:
    radial-gradient(46% 34% at 50% -10%, rgba(170,225,255,.12), transparent 62%),   /* projektör tacı */
    radial-gradient(30% 26% at 16% -8%, rgba(255,255,255,.07), transparent 60%),     /* sol projektör */
    radial-gradient(30% 26% at 84% -8%, rgba(255,255,255,.07), transparent 60%),     /* sağ projektör */
    radial-gradient(100% 55% at 50% 122%, rgba(24,96,56,.55), transparent 62%),      /* çim ışığı */
    linear-gradient(180deg,#06100a 0%,#05100a 42%,#07140d 100%);
}
/* ---- Alt saha: biçme çizgileri + hafif çim dokusu ---- */
#scrMenu.active::before{
  content:"";position:absolute;left:-12%;right:-12%;bottom:0;height:48%;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(46,132,78,.12) 0 7.5%, rgba(20,74,44,.12) 7.5% 15%),
    linear-gradient(180deg, transparent, rgba(20,80,46,.20) 55%, rgba(10,50,28,.34) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 62%);
          mask-image:linear-gradient(180deg,transparent,#000 62%);
  opacity:.85;
}
/* aurora'yı stadyum sisine indir (daha ölçülü) */
#scrMenu.active::after{opacity:.75;filter:blur(30px)}

/* ---- Üst bar da geceye uysun ---- */
.mtopbar{background:linear-gradient(180deg,rgba(6,16,10,.92),rgba(6,16,10,.42))}

/* ============================================================
   İKON STİLLERİ — çizgi-stil SVG
   ============================================================ */
.c-h{display:flex;align-items:center;gap:8px}
.c-h svg{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;
  filter:drop-shadow(0 1px 4px rgba(255,200,61,.45))}
.cta-ic{display:grid;place-items:center;width:34px;height:34px}
.cta-ic svg{width:28px;height:28px;stroke:#231701;filter:drop-shadow(0 1px 2px rgba(150,90,0,.4))}
.mtb-ic{display:grid;place-items:center}
.mtb-ic svg{width:17px;height:17px;stroke:currentColor}
.mtb-ic:hover svg{stroke:var(--gold)}
.cta-secondary>span:first-child{font-size:12px;opacity:.85}

/* ---- Canlı nabız noktası ---- */
.live-dot{
  width:9px;height:9px;border-radius:50%;background:#32e07c;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(50,224,124,.6);
  animation:livePulse 1.9s ease-out infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(50,224,124,.55)}
  70%{box-shadow:0 0 0 8px rgba(50,224,124,0)}
  100%{box-shadow:0 0 0 0 rgba(50,224,124,0)}
}

/* ============================================================
   FUT KART — daha "gerçek kart" dokusu
   ============================================================ */
.futc{
  background:
    radial-gradient(85% 55% at 82% 0%, rgba(255,200,61,.20), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 2px, transparent 2px 9px),
    linear-gradient(165deg,#15321f,#0a1a11);
}
/* fotoğrafın arkasında kulüp renginden hafis parıltı zaten var; çerçeveyi netleştir */
.futc-photo{border:1px solid rgba(255,255,255,.14)}
.futc-tag{display:inline-flex;align-items:center;gap:6px}
.futc-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(255,200,61,.8)}

/* ---- lider satırlarına küçük madalya rengi ---- */
.lead:nth-child(2) .lr{background:linear-gradient(180deg,#dfe7ee,#aeb9c4);color:#23303a}
.lead:nth-child(3) .lr{background:linear-gradient(180deg,#e6b483,#c9814a);color:#2a1608}

/* champ kupası SVG */
.champ-tro{display:grid;place-items:center;width:52px;height:52px;flex:0 0 auto}
.champ-tro svg{width:38px;height:38px;stroke:var(--gold);filter:drop-shadow(0 4px 10px rgba(255,200,61,.4))}
.champ-tro.dim{opacity:.4}
.champ-tro.dim svg{stroke:#9fc7b0;filter:none}

/* ============================================================
   PERFORMANS v6 — lag giderme
   ------------------------------------------------------------
   Sürekli boyama yapan pahalı efektleri hafifletir. Görsel dil
   korunur; yalnız GPU/CPU'yu boşuna meşgul eden kısımlar kısılır.
   ============================================================ */

/* Film greni: tam ekran blend her boyamada pahalı — blend'i kaldır */
body::after{mix-blend-mode:normal;opacity:.03}

/* Aurora: animasyonlu blur re-rasterize ettiriyordu — blur'u kaldır,
   yumuşaklık zaten gradyanlarda; hareketi GPU'ya bırak */
#scrMenu.active::after{filter:none;will-change:transform}

/* Puanın arkasındaki dönen konik ışık: sürekli repaint — sabitle */
.futc-rat::before{animation:none;opacity:.55}

/* Sonsuz döngüyle akan parlama süpürmeleri: dekoratif ama her karede
   'left' boyaması yapıyordu — döngüleri kapat (hover parlamaları kalır) */
.btn-gold::after,.btn-green::after,.cta-primary::after,.futc::before{
  animation:none;opacity:0;
}

/* Kaydırılan dashboard kartlarında backdrop-blur = scroll jank.
   Arkalarında zaten opak zemin var; blur yerine yarı saydam katı zemin */
.dash .card{
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:linear-gradient(160deg,rgba(20,44,30,.72),rgba(9,22,15,.74));
}

/* Üst bar blur'unu biraz hafiflet (görünüm korunur) */
.mtopbar{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ============================================================
   PERFORMANS v7 — DONMA giderme (compositor yükü)
   ------------------------------------------------------------
   backdrop-filter:blur çok tekrarlanan/kaydırılan öğelerde düşük
   uçlu GPU'larda donmaya yol açar (her öğe arkasını yeniden
   bulanıklaştırır). Bu öğelerde blur'u kaldırıp yarı saydam katı
   zemin veriyoruz. Blur yalnız TEK büyük öğede kalır (üst bar,
   modal). Ayrıca gren + animasyonlu aurora katmanları sadeleşir.
   ============================================================ */

/* --- Gren dokusunu tamamen kaldır (tam ekran ekstra katman) --- */
body::after{display:none !important}

/* --- Aurora: animasyon + will-change YOK, sabit yumuşak ışık --- */
#scrMenu.active::after{
  animation:none !important;
  will-change:auto !important;
  filter:none !important;
  opacity:.55;
}

/* --- Tekrarlanan öğelerde backdrop-filter KAPALI (donmanın ana sebebi) --- */
.chip,.btn-ghost,.back,.badge,.club-row,.form-card,.pcard,.slot-card,
.kpi,.hn-row,.seg,.mt-sl,.feed,.toast,.tray,.lb,.card,.hint,.feat,
.menu-nav button,.cta-secondary,.mtb-ic,.mtb-login,.futc,.futc-photo,
.ss-av,.feat-av{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* blur kalkınca cam hissi korunsun diye yarı saydam katı zeminler */
.club-row,.form-card,.pcard,.kpi,.hn-row,.mt-sl,.card,.feat{
  background:linear-gradient(160deg,rgba(24,52,34,.72),rgba(10,24,16,.74));
}
.chip,.btn-ghost,.back,.badge,.seg,.lb,.menu-nav button,.cta-secondary,
.mtb-ic,.mtb-login{
  background:rgba(14,32,21,.8);
}
.feed,.toast{background:rgba(6,16,10,.9)}
.tray{background:linear-gradient(0deg,rgba(6,16,10,.96),rgba(6,16,10,.6))}

/* Üst bar ve modal blur'u KALIR ama hafif (tekil, büyük öğeler) */
.mtopbar{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.sheet{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* ============================================================
   MAÇ — gol anı efekti (daha vurucu)
   ============================================================ */
.mt-flash.on{display:grid;animation:none}
.mt-flash::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(closest-side at 50% 46%, rgba(255,200,61,.30), rgba(255,200,61,.06) 45%, transparent 70%);
  animation:goalBurst 1.1s ease-out both;
}
.mt-flash span{
  font-family:'Archivo',sans-serif;
  font-size:clamp(46px,15vw,88px);font-weight:900;letter-spacing:-2px;
  background:linear-gradient(180deg,#fff6d8,#ffc83d 55%,#e8951a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(255,200,61,.5));
  animation:goalText 1.1s cubic-bezier(.18,.7,.28,1) both;
}
@keyframes goalBurst{
  0%{opacity:0;transform:scale(.4)}
  35%{opacity:1;transform:scale(1.05)}
  100%{opacity:0;transform:scale(1.25)}
}
@keyframes goalText{
  0%{opacity:0;transform:scale(.3) rotate(-6deg)}
  40%{opacity:1;transform:scale(1.18) rotate(2deg)}
  55%{transform:scale(.98) rotate(-1deg)}
  70%{transform:scale(1.06)}
  100%{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .mt-flash::before,.mt-flash span{animation-duration:.01ms}
}

/* Ses butonu emoji hizalama */
#btnSound{min-width:40px}

/* ============================================================
   ANA SAYFA v8 — canlı şerit + daha "gerçek ürün" hissi
   ============================================================ */

/* ---- Canlı haber şeridi (ticker) ---- */
.ticker{
  flex:0 0 auto; display:flex; align-items:center;
  height:34px; overflow:hidden; position:relative; z-index:2;
  border-bottom:1px solid var(--glass-brd);
  background:linear-gradient(90deg,rgba(6,16,10,.92),rgba(10,26,17,.72));
}
.tk-live{
  display:flex; align-items:center; gap:6px; flex:0 0 auto;
  height:100%; padding:0 20px 0 14px;
  font-family:'Archivo',sans-serif; font-weight:900; font-size:11px; letter-spacing:1.5px;
  color:#0b1a11; background:var(--grad-gold);
  clip-path:polygon(0 0,100% 0,86% 100%,0 100%);
  position:relative; z-index:2;
}
.tk-dot{width:7px;height:7px;border-radius:50%;background:#0b1a11;animation:tkDot 1.4s ease-in-out infinite}
@keyframes tkDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.tk-view{
  flex:1; overflow:hidden; position:relative; margin-left:-14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.tk-track{
  display:inline-flex; align-items:center; white-space:nowrap; padding-left:24px;
  will-change:transform; animation:tkScroll 46s linear infinite;
}
.ticker:hover .tk-track{animation-play-state:paused}
@keyframes tkScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk-item{padding:0 10px; font-size:12.5px; color:#d3e3d8; font-weight:600; letter-spacing:.2px}
.tk-sep{color:var(--gold); opacity:.65; font-size:8px}
@media (prefers-reduced-motion:reduce){.tk-track{animation:none}}

/* ---- Liderlik satırı: baş harf rozeti + puan ---- */
.lav{
  width:24px; height:24px; border-radius:7px; flex:0 0 auto;
  display:grid; place-items:center; font-weight:900; font-size:12px; color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.3);
}
.lead .lp em{font-style:normal;font-size:9px;opacity:.55;margin-left:1px}

/* ---- Hero: dev gradyan başlığı biraz kıs (daha az "landing page") ---- */
.hero h1{
  font-size:clamp(38px,8.5vw,82px);
  letter-spacing:-1.5px;
}
.hero-sub{font-size:clamp(15px,3.5vw,20px)}
.hero .kick{letter-spacing:4px}

@media (min-width:1200px){ .hero h1{font-size:82px} }