/* ============================================================
   İKİ HESAP · BİR EGO — hextek arşiv defteri
   Site tasarım sistemi / tek stil dosyası
   ============================================================ */

/* ---------- 1. YAZI TİPLERİ (yerel, uzak istek yok) ---------- */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/Cinzel-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/Cinzel-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/CormorantGaramond-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/CormorantGaramond-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;
  src:url('../fonts/CormorantGaramond-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;
  src:url('../fonts/CormorantGaramond-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2060-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/JetBrainsMono-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/JetBrainsMono-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- 2. TOKENLAR ---------- */
:root{
  color-scheme:dark;

  /* ---- KOYU TEMA (varsayılan) ---- */
  --void:#05080d;
  --void-2:#080d14;
  --void-3:#0d141d;
  --line:rgba(200,170,110,.16);
  --line-soft:rgba(240,230,210,.09);
  --gold:#c8aa6e;
  --gold-hi:#f0e6d2;
  --gold-deep:#785a28;
  --teal:#0ac8b9;
  --teal-deep:#0397ab;
  --crimson:#c0392b;
  --rose:#cf7b8b;
  --ink:#f0e6d2;
  --muted:#8b95a3;
  --muted-2:#7f8894;

  /* temaya bağlı yüzeyler — açık temada değişir */
  --panel:rgba(8,13,20,.55);
  --panel-solid:#080d14;
  --field:rgba(5,8,13,.7);
  --field-focus:rgba(200,170,110,.05);
  --grain-op:.5;
  --vignette-op:1;
  --shadow:0 20px 60px rgba(0,0,0,.55);
  --dlg:rgba(5,8,13,.72);
  --hero-veil:linear-gradient(180deg,rgba(5,8,13,.15) 0%,rgba(5,8,13,.75) 62%,var(--void) 100%);
  --band-grad:linear-gradient(90deg,#0b3ecf,#1f4fe0 45%,#0b3ecf);
  --band-line:rgba(255,255,255,.22);
  --band-ink:#fff;
  --band-shadow:0 1px 0 rgba(0,0,0,.35);

  --font-display:'Cinzel','Trajan Pro','Georgia',serif;
  --font-editorial:'Cormorant Garamond','Iowan Old Style',Georgia,serif;
  --font-mono:'JetBrains Mono','Cascadia Mono','Consolas',monospace;

  --rail:78px;
  --band:38px;
  --gut:clamp(20px,4.2vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* LoL imleçleri — Riot'un kendi ux/cursors setinden (48×48, saydam PNG).
     Yalnızca Arkana kartı bölümünde kullanılır; sıcak nokta parmak ucunda. */
  --imlec-lol:url('../ui/cursor-gauntlet.png') 9 10, auto;
  --imlec-hedef:url('../ui/cursor-target.png') 24 24, crosshair;
}

/* ---------- 2b. AÇIK TEMA · ARŞİV KÂĞIDI ----------
   Koyu tema bir gece çalışma masasıydı; bu ise aynı defterin gündüz
   ışığında, sararmış kâğıt üzerindeki hâli. Altın korunur ama koyulaşır,
   turkuaz mürekkep mavisine döner; kontrast AA üstünde tutulur. */
[data-theme="light"]{
  color-scheme:light;

  --void:#f4efe4;
  --void-2:#ebe4d5;
  --void-3:#e2d9c6;
  --line:rgba(120,90,40,.24);
  --line-soft:rgba(60,45,25,.13);
  --gold:#8a6a28;
  --gold-hi:#2a2118;
  --gold-deep:#6b5120;
  --teal:#0a6f78;
  --teal-deep:#07565d;
  --crimson:#a32a1e;
  --rose:#9c4a5c;
  --ink:#1d1813;
  --muted:#5c5348;
  --muted-2:#6d6459;

  --panel:rgba(255,252,245,.72);
  --panel-solid:#fbf7ee;
  --field:rgba(255,253,248,.9);
  --field-focus:rgba(138,106,40,.07);
  --grain-op:.22;
  --vignette-op:.35;
  --shadow:0 18px 44px rgba(70,52,25,.16);
  --dlg:rgba(244,239,228,.82);
  --hero-veil:linear-gradient(180deg,rgba(244,239,228,.25) 0%,rgba(244,239,228,.82) 62%,var(--void) 100%);
  --band-grad:linear-gradient(90deg,#1c2f6b,#2a3f86 45%,#1c2f6b);
  --band-line:rgba(28,24,18,.28);
  --band-ink:#f6f2e8;
  --band-shadow:0 1px 0 rgba(0,0,0,.2);
}

/* kâğıt dokusu: açık temada ince bir sıcak ton katmanı */
[data-theme="light"] body{background-image:none}
[data-theme="light"] ::selection{background:var(--gold);color:#fffdf7}
[data-theme="light"] .grain{opacity:var(--grain-op);mix-blend-mode:multiply}
[data-theme="light"] .vignette{opacity:var(--vignette-op)}

/* tema geçişi — kullanıcı hareket azaltma istemediyse yumuşak geç */
@media (prefers-reduced-motion:no-preference){
  body,.topband,.rail,.book,.frame,.entry,.sign,.facts__row,.champ,.social{
    transition:background-color .42s var(--ease),color .42s var(--ease),
               border-color .42s var(--ease),box-shadow .42s var(--ease);
  }
}

/* ---------- 2c. AÇIK TEMA · İNCE AYARLAR ----------
   Koyu temada siyah gölgeler ve beyaz kenarlar vardı; kâğıt üzerinde
   bunlar kirlilik yapar. Işığa çevrilir. */
[data-theme="light"] [data-theme="light"] .frame__img{filter:contrast(1.02) saturate(1.04)}
[data-theme="light"] .cursor{display:none}
[data-theme="light"] .brand{color:var(--muted);}
[data-theme="light"] .topband{border-bottom-color:var(--line)}
[data-theme="light"] .rail{background:color-mix(in srgb, var(--void) 88%, transparent)}
[data-theme="light"] .entry{background:var(--panel)}
[data-theme="light"] .sign__kutu,
[data-theme="light"] .book__side,
[data-theme="light"] .facts__row{background:var(--panel-solid)}
[data-theme="light"] .sign__field input,
[data-theme="light"] .sign__field textarea,
[data-theme="light"] .sign__field select,
[data-theme="light"] .yonetim__satir input{background:var(--field)}
[data-theme="light"] .sign__field input:focus,
[data-theme="light"] .sign__field textarea:focus,
[data-theme="light"] .sign__field select:focus,
[data-theme="light"] .yonetim__satir input:focus{background:var(--field-focus)}
/* turkuaz metinler kâğıt üstünde daha koyu olmalı */
[data-theme="light"] .sign__status.is-ok,
[data-theme="light"] .yonetim__durum{color:var(--teal-deep)}

/* ---------- 3. TEMEL ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-editorial);
  font-weight:300;
  font-size:clamp(16px,1.06vw,19px);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--void)}

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

.mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:400}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- 4. ATMOSFER: gren + vinyet ---------- */
.grain,.vignette{position:fixed;inset:0;pointer-events:none;z-index:60}
.grain{
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  animation:grainshift 7s steps(6) infinite;
}
@keyframes grainshift{
  0%{transform:translate3d(0,0,0)}16%{transform:translate3d(-2%,1%,0)}33%{transform:translate3d(1%,-2%,0)}
  50%{transform:translate3d(-1%,-1%,0)}66%{transform:translate3d(2%,1%,0)}83%{transform:translate3d(-1%,2%,0)}100%{transform:translate3d(0,0,0)}}
.vignette{
  background:
    radial-gradient(120% 80% at 50% 42%,transparent 38%,rgba(0,0,0,.55) 100%),
    linear-gradient(180deg,rgba(0,0,0,.5),transparent 22%,transparent 78%,rgba(0,0,0,.6));
  z-index:59;
}

/* ---------- 5. ÜST BANT (referanstaki diyalog bandına saygı) ---------- */
.topband{
  position:fixed;top:0;left:0;right:0;height:var(--band);z-index:70;
  overflow:hidden;background:var(--band-grad);
  border-bottom:1px solid var(--band-line);
  display:flex;align-items:center;
}
.topband__track{display:flex;white-space:nowrap;will-change:transform;animation:bandmove 34s linear infinite}
.topband__track span{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--band-ink);padding:0 34px;text-shadow:var(--band-shadow);
}
@keyframes bandmove{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- 5b. AÇILIŞ PERDESİ ----------
   Referanstaki "açılış" fikrinin tamamlanmış hâli: iki kadife kanat kapalı
   durur, ortada altın bir yarık kalır ve ışık oradan sızar. Tıklanınca ya da
   kısa bir bekleyişten sonra kanatlar iki yana kayar; arkadan iki şampiyon
   ve sayfa ortaya çıkar. Hareket azaltma istenmişse perde hiç gösterilmez. */
.perde{
  position:fixed;inset:0;z-index:95;overflow:hidden;
  background:var(--void-2);
}
.perde[hidden]{display:none}
.perde.is-gone{pointer-events:none}
.perde.is-gone .perde__kanat--sol{transform:translateX(-101%)}
.perde.is-gone .perde__kanat--sag{transform:translateX(101%)}
.perde.is-gone .perde__orta,
.perde.is-gone .perde__gec,
.perde.is-gone .perde__huzme,
.perde.is-gone .perde__kornis{opacity:0}
.perde.is-gone .perde__arka{opacity:1}

/* arkadaki sahne: iki şampiyon */
.perde__arka{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;
  opacity:0;transition:opacity .9s var(--ease) .3s;z-index:1}
.perde__arka img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.45) contrast(1.1) brightness(.55)}

/* yarıktan sızan ışık */
.perde__huzme{
  position:absolute;left:50%;top:0;bottom:0;width:340px;transform:translateX(-50%);z-index:6;
  background:radial-gradient(58% 46% at 50% 50%,color-mix(in srgb, var(--gold) 30%, transparent),transparent 72%);
  pointer-events:none;transition:opacity .5s var(--ease);
}

/* kadife kanatlar */
.perde__kanat{
  position:absolute;top:0;bottom:0;width:calc(50% - 26px);z-index:10;
  /* kumaş opak olsun: altındaki sahne kapalıyken sızmasın */
  
  transition:transform 1.15s var(--ease-out),opacity .5s;
  box-shadow:0 0 90px rgba(0,0,0,.85);
}
.perde__kanat--sol{
  left:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 82%,rgba(0,0,0,.38) 100%),
    repeating-linear-gradient(90deg,
      #17202c 0px,#243244 6px,#1a2331 13px,#2a394d 19px,#182230 26px,#22303f 33px,#17202c 40px);
  background-color:#1a2331;
  border-right:1px solid color-mix(in srgb, var(--gold) 34%, transparent);
}
.perde__kanat--sag{
  right:0;
  background:
    linear-gradient(270deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 82%,rgba(0,0,0,.38) 100%),
    repeating-linear-gradient(90deg,
      #17202c 0px,#22303f 6px,#182230 13px,#2a394d 19px,#1a2331 26px,#243244 33px,#17202c 40px);
  background-color:#1a2331;
  border-left:1px solid color-mix(in srgb, var(--gold) 34%, transparent);
}
/* iç kenarda altın işleme */
.perde__isleme{
  position:absolute;top:0;bottom:0;width:9px;
  background:linear-gradient(180deg,color-mix(in srgb, var(--gold) 18%, transparent),
    color-mix(in srgb, var(--gold) 52%, transparent) 42%,
    color-mix(in srgb, var(--gold) 18%, transparent));
}
.perde__kanat--sol .perde__isleme{right:0}
.perde__kanat--sag .perde__isleme{left:0}
/* üstte korniş gölgesi */
.perde__kornis{position:absolute;left:0;right:0;top:0;height:88px;z-index:12;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.75),transparent);transition:opacity .5s}

/* ortadaki başlık */
.perde__orta{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  z-index:20;text-align:center;white-space:nowrap;transition:opacity .5s}
.perde__baslik{margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(28px,3.5vw,50px);letter-spacing:.2em;color:var(--gold-hi);text-indent:.2em;
  text-shadow:0 2px 30px rgba(5,8,13,.95),0 0 60px color-mix(in srgb, var(--gold) 40%, transparent)}
.perde__alt{margin:17px 0 0;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.32em;color:var(--gold);text-transform:uppercase;
  text-shadow:0 2px 16px rgba(5,8,13,.95)}

/* erişilebilir geç düğmesi — görünür ama perdenin sesine uygun */
.perde__gec{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:22;
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);padding:9px 18px;border:1px solid var(--line);
  background:rgba(5,8,13,.6);transition:color .3s var(--ease),border-color .3s var(--ease),opacity .5s;
}
.perde__gec:hover,.perde__gec:focus-visible{color:var(--gold);border-color:color-mix(in srgb, var(--gold) 50%, transparent)}
html.js .perde__kanat{will-change:transform}

/* Açık temada perde de kâğıda döner: kadife yerine koyu mürekkep kumaşı */
[data-theme="light"] .perde__kanat--sol,
[data-theme="light"] .perde__kanat--sag{
  /* koyu kakao kumaş: kâğıt zeminin üstünde kadife gibi okunur */
  background-color:#4a3c2c;
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 80%,rgba(0,0,0,.3) 100%),
    repeating-linear-gradient(90deg,
      #3f3325 0px,#584734 6px,#463829 13px,#614e39 19px,#443728 26px,#52422f 33px,#3f3325 40px);
}
[data-theme="light"] .perde__kanat--sol{
  border-right:1px solid color-mix(in srgb, var(--gold) 62%, transparent);
}
[data-theme="light"] .perde__kanat--sag{
  border-left:1px solid color-mix(in srgb, var(--gold) 62%, transparent);
}
/* açık temada altın işleme koyu kumaşta parlar */
[data-theme="light"] .perde__isleme{
  background:linear-gradient(180deg,color-mix(in srgb, var(--gold) 42%, transparent),
    color-mix(in srgb, var(--gold) 92%, transparent) 42%,
    color-mix(in srgb, var(--gold) 42%, transparent));
  box-shadow:0 0 14px color-mix(in srgb, var(--gold) 40%, transparent);
}
[data-theme="light"] .perde{background:var(--void-2)}
[data-theme="light"] .perde__huzme{
  background:radial-gradient(58% 46% at 50% 50%,color-mix(in srgb, var(--gold) 34%, transparent),transparent 74%)}
[data-theme="light"] .perde__kornis{background:linear-gradient(180deg,rgba(90,74,48,.3),transparent)}
[data-theme="light"] .perde__baslik{color:#f4efe4;text-shadow:0 2px 30px rgba(0,0,0,.6),0 0 60px color-mix(in srgb, var(--gold) 55%, transparent)}
[data-theme="light"] .perde__alt{color:var(--gold);text-shadow:0 2px 16px rgba(0,0,0,.7)}
[data-theme="light"] .perde__gec{background:rgba(20,16,11,.55);border-color:rgba(200,170,110,.45);color:#e8ddc7}
[data-theme="light"] .perde__gec:hover,[data-theme="light"] .perde__gec:focus-visible{color:var(--gold);border-color:var(--gold)}

/* Hareket azaltma: perde hiç gösterilmez, sayfa doğrudan açılır. */
@media (prefers-reduced-motion:reduce){
  .perde{display:none}
}

@media (max-width:1000px){
  .perde__arka{grid-template-columns:1fr}
  .perde__arka img:last-child{display:none}
  .perde__kanat{width:calc(50% - 16px)}
  .perde__baslik{letter-spacing:.14em}
}

/* ---------- 5c. PERDE · JS YOKSA GÖSTERİLMEZ ----------
   Perde yalnızca html.js sınıfı varken görünür. JavaScript kapalıysa
   (ya da hata alırsa) perde hiç çizilmez ve bütün içerik okunur kalır —
   perde, kapıyı açacak anahtarın kendisini kilitlemesin diye. */
html:not(.js) .perde{display:none !important}

/* ---------- 6. BÖLÜM ŞERİDİ (kalıcı fihrist) ---------- */
.rail{
  position:fixed;left:0;top:var(--band);bottom:0;width:var(--rail);z-index:65;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:16px 0 16px 14px;
  background:linear-gradient(90deg,color-mix(in srgb, var(--void) 92%, transparent),rgba(5,8,13,0));
}
.rail__item{
  display:flex;align-items:center;gap:10px;padding:7px 0;
  color:var(--muted-2);transition:color .5s var(--ease);
}
.rail__item i{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;font-style:normal;
  width:22px;flex:none;
}
.rail__item b{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.28em;font-weight:400;
  text-transform:uppercase;opacity:0;transform:translateX(-6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);white-space:nowrap;
}
.rail__item::before{
  content:'';width:0;height:1px;background:currentColor;transition:width .5s var(--ease);flex:none;
}
.rail__item:hover,.rail__item:focus-visible{color:var(--gold-hi)}
.rail__item:hover::before,.rail__item:focus-visible::before{width:16px}
.rail__item:hover b,.rail__item:focus-visible b{opacity:1;transform:translateX(0)}
.rail__item[aria-current="true"]{color:var(--gold)}
.rail__item[aria-current="true"] i{color:var(--gold)}
.rail__item[aria-current="true"]::before{width:22px}
.rail__item[aria-current="true"] b{opacity:1;transform:translateX(0)}
.rail:hover,.rail:focus-within{background:linear-gradient(90deg,color-mix(in srgb, var(--void) 98%, transparent),color-mix(in srgb, var(--void) 55%, transparent) 70%,transparent)}

/* ---------- 7. KAYDIRMA İLERLEMESİ ---------- */
.scrollrail{
  position:fixed;right:16px;top:calc(var(--band) + 60px);bottom:70px;width:1px;background:var(--line-soft);z-index:64;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
}
.scrollrail__fill{position:absolute;top:0;left:0;width:2px;background:linear-gradient(180deg,var(--gold),var(--teal));height:0;opacity:.9}

/* ---------- 8. AÇILIŞ KAPAĞI ---------- */
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 9. SİTENAME / MARKA ---------- */
.brand{
  position:fixed;top:calc(var(--band) + 18px);left:var(--gut);z-index:66;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:10px;
}
.brand em{font-style:normal;color:var(--gold)}
.brand::before{content:'';width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none}

/* ---------- 10. İMLEÇ (yalnızca işaretçi cihazlarda; form alanlarında gizlenir) ---------- */
.cursor{
  position:fixed;top:0;left:0;width:26px;height:26px;margin:-13px 0 0 -13px;z-index:95;
  pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
}
.cursor.is-off{display:none}
.cursor::before,.cursor::after{content:'';position:absolute;background:var(--gold)}
.cursor::before{left:50%;top:50%;width:1px;height:100%;transform:translate(-50%,-50%)}
.cursor::after{top:50%;left:50%;height:1px;width:100%;transform:translate(-50%,-50%)}
.cursor__ring{
  position:absolute;inset:5px;border:1px solid var(--gold);border-radius:50%;
  transform:scale(.4);opacity:.55;transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.cursor.is-on{opacity:.9}
.cursor.is-hot .cursor__ring{transform:scale(1.9);opacity:1}

/* ---------- 11. BÖLÜM İSKELETİ ---------- */
.chapter{
  position:relative;
  padding:clamp(90px,14vh,170px) var(--gut) clamp(90px,13vh,160px);
  padding-left:calc(var(--gut) + var(--rail));
  max-width:1560px;margin:0 auto;
}
.chapter__head{
  display:flex;align-items:baseline;gap:clamp(14px,2vw,30px);
  padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:clamp(40px,6vh,86px);
}
.chapter__no{font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;color:var(--gold);flex:none}
.chapter__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(26px,4.6vw,68px);line-height:1;letter-spacing:.02em;text-transform:uppercase;
}
.chapter__note{
  margin-left:auto;max-width:44ch;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;line-height:1.9;text-transform:uppercase;color:var(--muted-2);text-align:right;
}
.lede{
  font-family:var(--font-editorial);font-weight:300;font-style:italic;
  font-size:clamp(20px,2.5vw,34px);line-height:1.42;color:var(--gold-hi);
  max-width:26ch;text-wrap:balance;
}
.lede-wide{max-width:52ch}
.bodycopy{max-width:62ch;color:#c9cdd4;font-size:clamp(16px,1.15vw,19px)}
.bodycopy strong{color:var(--gold-hi);font-weight:500}

/* bölüm girişi: solda tez, sağda sayısal künye — sağdaki boşluğu kapatır */
.intro2{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,80px);align-items:end;
  margin-bottom:clamp(28px,4.5vh,56px);
}
.intro2 .lede{max-width:24ch}
.facts{border-top:1px solid var(--line)}
.facts__row{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.facts__row span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.facts__row b{font-family:var(--font-mono);font-size:12px;font-weight:400;color:var(--gold-hi);letter-spacing:.03em;text-align:right}
.archivist{
  margin-top:34px;padding-left:16px;border-left:1px solid var(--line);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-2);max-width:60ch;line-height:2;
}
.archivist b{color:var(--gold);font-weight:400}

/* ---------- 12. AÇILIŞ ---------- */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--band) + 46px);
}
.hero__top{display:flex;align-items:center;gap:16px;margin-bottom:clamp(20px,4vh,44px)}
.hero__kicker{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.hero__rule{flex:1;height:1px;background:var(--line)}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,4vw,64px);align-items:center;
}
.hero__type h1{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(46px,9.4vw,158px);line-height:.86;letter-spacing:-.015em;
}
.hero__type h1 span{display:block;overflow:hidden}
.hero__type h1 b{display:block;font-weight:700;transform:translateY(105%);transition:transform 1.15s var(--ease-out)}
.is-ready .hero__type h1 b{transform:translateY(0)}
.hero__type h1 .line-2{color:transparent;-webkit-text-stroke:1px var(--gold);text-stroke:1px var(--gold)}
.hero__sub{
  margin-top:clamp(20px,3vh,34px);font-family:var(--font-editorial);font-style:italic;
  font-size:clamp(17px,1.5vw,24px);line-height:1.5;color:var(--gold-hi);max-width:32ch;
  opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) .5s,transform .9s var(--ease) .5s;
}
.is-ready .hero__sub{opacity:1;transform:none}

/* iki hesap kartı */
.duel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,22px);position:relative}
.duel::after{
  content:'VS';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--font-display);font-size:clamp(14px,1.6vw,22px);color:var(--gold);
  background:var(--void);padding:8px 2px;letter-spacing:.1em;z-index:3;
}
.card{
  position:relative;display:block;border:1px solid var(--line);background:var(--void-2);
  overflow:hidden;isolation:isolate;
}
.card__art{position:relative;aspect-ratio:308/560;overflow:hidden;display:block}
/* Görsel kabı TAM doldurur: inset:0 ile boyut kaptan gelir, transform
   taşması kırpılır ama görsel kaybolmaz (height:100% + aspect-ratio
   çakışması görseli dışarı atıyordu). */

.card__art img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 22%;
  filter:saturate(.72) contrast(1.06) brightness(.86);
  transform:scale(1.02);
  transition:transform 1.4s var(--ease),filter .9s var(--ease);
}
.card::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--void) 32%, transparent),
    color-mix(in srgb, var(--void) 6%, transparent) 34%,
    color-mix(in srgb, var(--void) 94%, transparent));
}
.card:hover .card__art img{transform:scale(1.06);filter:saturate(.95) contrast(1.1) brightness(1)}
.card__overlay{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:16px 15px 15px}
.card__lvl{
  font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3vw,46px);line-height:.9;
  color:var(--gold-hi);letter-spacing:.01em;
}
.card__lvl small{display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.3em;color:var(--muted);margin-bottom:7px;font-weight:400}
.card__name{
  font-family:var(--font-display);font-size:clamp(13px,1.15vw,17px);text-transform:uppercase;
  letter-spacing:.06em;margin-top:10px;color:var(--gold);
}
.card__tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;color:var(--muted-2);text-transform:uppercase;margin-top:5px}
.card--teal .card__name{color:var(--teal)}
.card--teal{border-color:color-mix(in srgb, var(--teal) 28%, transparent)}

/* veri şeridi */
.strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(30px,5vh,66px);
  opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) .8s,transform 1s var(--ease) .8s;
}
.is-ready .strip{opacity:1;transform:none}
.strip__cell{background:var(--void);padding:18px 20px}
.strip__k{font-family:var(--font-mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2)}
.strip__v{font-family:var(--font-mono);font-size:clamp(15px,1.5vw,22px);margin-top:9px;color:var(--gold-hi);font-variant-numeric:tabular-nums}
.strip__v i{font-style:normal;font-size:.55em;color:var(--muted);letter-spacing:.1em}

/* ---------- 13. AÇILMA (reveal) SİSTEMİ ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}
.rv-d4{transition-delay:.36s}.rv-d5{transition-delay:.45s}.rv-d6{transition-delay:.54s}
.mask{display:block;overflow:hidden}
.mask>span{display:block;transform:translateY(102%);transition:transform 1.05s var(--ease-out)}
.mask.in>span{transform:translateY(0)}

/* ---------- 14. KÜNYE ---------- */
.dossier{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,64px)}
.dossier__col{position:relative}
.dossier__head{display:flex;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.dossier__icon{width:clamp(48px,4.6vw,74px);aspect-ratio:1;border-radius:50%;border:1px solid var(--line);overflow:hidden;flex:none}
.dossier__icon img{width:100%;height:100%;object-fit:cover;filter:saturate(.98)}
.dossier__id h3{font-family:var(--font-display);font-size:clamp(18px,2.1vw,30px);text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.dossier__id p{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.22em;color:var(--muted-2);text-transform:uppercase;margin-top:6px}
.dossier__rank{display:flex;align-items:center;gap:14px;margin-top:22px}
.dossier__rank img{width:clamp(56px,5vw,72px);height:72px;object-fit:contain;flex:none;filter:drop-shadow(0 6px 22px color-mix(in srgb, var(--gold) 28%, transparent))}
.dossier__rank strong{font-family:var(--font-display);font-size:clamp(19px,2.2vw,32px);display:block;line-height:1.1}
.dossier__rank em{font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;display:block;margin-top:7px}
.rows{margin-top:26px;border-top:1px solid var(--line-soft)}
.row{display:flex;gap:18px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.row__k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);flex:none;width:min(42%,150px);padding-top:3px}
.row__v{font-family:var(--font-mono);font-size:13.5px;color:var(--ink);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.row__v b{color:var(--gold);font-weight:500}
.row__v s{text-decoration:none;color:var(--muted-2)}
.col-teal .row__v b,.col-teal .dossier__rank strong{color:var(--teal)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.chip{
  border:1px solid var(--line);padding:6px 11px;font-family:var(--font-mono);font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.chip--warn{border-color:color-mix(in srgb, var(--crimson) 42%, transparent);color:#e0806f}

/* ---------- 15. KARİYER MERDİVENİ ---------- */
.ladder{position:relative;margin-top:10px;min-width:0;max-width:100%}
.ladder__grid>*{min-width:0}
.ladder__track{
  display:flex;gap:clamp(12px,1.6vw,26px);overflow-x:auto;padding:6px 0 26px;
  min-width:0;max-width:100%;
  scrollbar-width:thin;scrollbar-color:var(--gold-deep) transparent;scroll-snap-type:x mandatory;
}
.ladder__track::-webkit-scrollbar{height:3px}
.ladder__track::-webkit-scrollbar-thumb{background:var(--gold-deep)}
.rung{
  flex:none;width:clamp(140px,12vw,196px);scroll-snap-align:start;
  border:1px solid var(--line);background:linear-gradient(180deg,var(--void-2),color-mix(in srgb, var(--void-2) 4%, transparent));
  padding:18px 16px 20px;position:relative;transition:border-color .6s var(--ease),transform .6s var(--ease);
}
.rung:hover{border-color:color-mix(in srgb, var(--gold) 5%, transparent);transform:translateY(-5px)}
.rung__s{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.22em;color:var(--muted-2);text-transform:uppercase}
.rung__em{width:52px;margin:14px 0 12px;opacity:.9}
.rung__t{font-family:var(--font-display);font-size:15px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink)}
.rung__m{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;color:var(--muted-2);margin-top:8px;text-transform:uppercase}
.rung--master{border-color:color-mix(in srgb, var(--gold) 55%, transparent);background:linear-gradient(180deg,color-mix(in srgb, var(--gold-deep) 24%, transparent),color-mix(in srgb, var(--void-2) 5%, transparent))}
.rung--master .rung__t{color:var(--gold-hi)}
.rung--master::before{
  content:'ZİRVE';position:absolute;top:-1px;right:-1px;background:var(--gold);color:var(--void);
  font-family:var(--font-mono);font-size:8px;letter-spacing:.2em;padding:3px 7px;
}
.rung--now{border-color:color-mix(in srgb, var(--teal) 4%, transparent)}
.ladder__hint{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;color:var(--muted-2);text-transform:uppercase}
.ladder__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(26px,4vw,70px);align-items:end}

/* ---------- 16. ARŞİV (kalıcı portre çerçevesi) ---------- */
.archive{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(24px,3.6vw,64px);align-items:start}
.archive__stage{position:sticky;top:calc(var(--band) + 40px)}
.frame{
  position:relative;aspect-ratio:4/6;max-height:74svh;width:100%;
  clip-path:polygon(50% 0,100% 11%,100% 89%,50% 100%,0 89%,0 11%);
  background:var(--void-3);overflow:hidden;transition:background .8s var(--ease);
}
.frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.08);transition:opacity 1.05s var(--ease),transform 2.4s var(--ease-out);
  /* Kırpma konumu karakter başına: yatay splash'lar (1215×717) dikey
     çerçevede kırpılınca özne dışarıda kalıyordu. --px her şampiyonun
     ölçülen özne merkezidir (index.html'de data-px). */
  object-position:var(--px,50%) var(--py,50%);
  filter:saturate(.95) contrast(1.02) brightness(.95);
}
.frame img.on{opacity:1;transform:scale(1)}
.frame::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,color-mix(in srgb, var(--void) 42%, transparent),transparent 34%,color-mix(in srgb, var(--void) 86%, transparent));
}
.frame__label{position:absolute;left:0;right:0;bottom:calc(11% + 16px);z-index:3;text-align:center;padding:0 6%}
.frame__label b{display:block;font-family:var(--font-display);font-size:clamp(20px,2.4vw,38px);text-transform:uppercase;letter-spacing:.04em;color:var(--gold-hi)}
.frame__label span{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.24em;color:var(--muted);text-transform:uppercase;margin-top:9px;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.frame__idx{
  position:absolute;top:calc(11% + 12px);left:0;right:0;text-align:center;z-index:3;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.34em;color:var(--gold);
}
.champs__list{border-top:1px solid var(--line)}
.champ{
  display:grid;grid-template-columns:34px minmax(0,1.25fr) minmax(0,.8fr) 82px;
  gap:16px;align-items:center;padding:clamp(16px,2.4vh,26px) 0;border-bottom:1px solid var(--line);
  cursor:pointer;transition:padding-left .7s var(--ease),background .7s var(--ease);
}
.champ:hover{padding-left:10px;background:linear-gradient(90deg,color-mix(in srgb, var(--gold) 06%, transparent),transparent 62%)}
.champ[aria-current="true"]{
  background:linear-gradient(90deg,color-mix(in srgb, var(--gold) 13%, transparent),transparent 72%);
  box-shadow:inset 2px 0 0 var(--gold);
}
.champ__i{font-family:var(--font-mono);font-size:9.5px;color:var(--muted-2);letter-spacing:.14em}
.champ__n{font-family:var(--font-display);font-size:clamp(17px,1.9vw,27px);text-transform:uppercase;letter-spacing:.03em;line-height:1.1}
.champ__n small{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;margin-top:7px;color:var(--muted-2)}
.champ__k{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.champ__m{
  font-family:var(--font-mono);font-size:10.5px;color:var(--gold);text-align:right;letter-spacing:.1em;
}
.champ[aria-current="true"]{background:linear-gradient(90deg,color-mix(in srgb, var(--gold) 09%, transparent),transparent 70%)}
.champ[aria-current="true"] .champ__n{color:var(--gold-hi)}

/* ---------- 17. REKORLAR ---------- */
.records{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.rec{background:var(--void-2);padding:26px 24px 24px;position:relative;transition:background .7s var(--ease)}
.rec:hover{background:var(--void-3)}
.rec__k{font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);display:flex;justify-content:space-between;gap:10px}
.rec__v{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4.5vw,62px);line-height:1;color:var(--gold-hi);margin:22px 0 0;letter-spacing:-.01em}
.rec__v u{
  display:block;text-decoration:none;font-family:var(--font-mono);font-size:10.5px;font-weight:400;
  letter-spacing:.22em;color:var(--gold);margin-top:13px;text-transform:uppercase;
}
.rec__c{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:16px}
.rec__r{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--muted-2);margin-top:16px;text-transform:uppercase;line-height:1.9}
.rec--crown{background:linear-gradient(180deg,color-mix(in srgb, var(--gold-deep) 3%, transparent),color-mix(in srgb, var(--void-2) 6%, transparent))}
.rec--crown .rec__v{color:#fff}
.rec--shame{background:linear-gradient(180deg,rgba(140,30,20,.22),color-mix(in srgb, var(--void-2) 6%, transparent));border-left:2px solid var(--crimson)}
.rec--shame .rec__v{color:#e59a8c}
.rec--shame .rec__k,.rec--shame .rec__r{color:#a8837a}
.rec__stamp{
  position:absolute;top:18px;right:18px;border:1px solid currentColor;color:var(--crimson);
  font-family:var(--font-mono);font-size:8px;letter-spacing:.18em;padding:4px 7px;text-transform:uppercase;
  transform:rotate(-7deg);opacity:.85;
}

/* ---------- 18. İTTİFAK ---------- */
.allies{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(26px,4vw,70px)}
.ally{display:flex;align-items:baseline;gap:18px;padding:15px 0;border-bottom:1px solid var(--line-soft);transition:padding-left .6s var(--ease)}
.ally:hover{padding-left:10px}
.ally__n{font-family:var(--font-display);font-size:clamp(15px,1.5vw,21px);letter-spacing:.03em;color:var(--gold-hi)}
.ally__n small{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;color:var(--muted-2);text-transform:uppercase;margin-left:8px}
.ally__bar{flex:1;height:2px;background:var(--line-soft);position:relative;overflow:hidden}
.ally__bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--teal),var(--gold));transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease-out)}
.ally.in .ally__bar i{transform:scaleX(var(--w))}
.ally__v{font-family:var(--font-mono);font-size:11.5px;color:var(--ink);font-variant-numeric:tabular-nums;flex:none}

/* ---------- 19. HÜKÜM ---------- */
.verdict{border:1px solid var(--line);background:linear-gradient(180deg,var(--void-2),var(--void))}
.vrow{display:grid;grid-template-columns:minmax(0,1fr) 108px minmax(0,1fr) minmax(0,1.1fr);gap:14px;align-items:center;padding:16px clamp(16px,2vw,28px);border-bottom:1px solid var(--line-soft)}
.vrow--head{border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--gold) 04%, transparent)}
.vrow__cat{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.vrow__a,.vrow__b{font-family:var(--font-mono);font-size:13.5px;font-variant-numeric:tabular-nums}
.vrow__a{text-align:right}.vrow__b{text-align:left}
.vrow__mid{
  text-align:center;font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);position:relative;
}
.vrow__mid::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-soft);z-index:-1}
.win{color:var(--gold-hi)}
.vrow__a.win{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:7px}
.vrow__b.win{color:#a9f0e8;text-decoration:underline;text-decoration-color:var(--teal);text-decoration-thickness:1px;text-underline-offset:7px}
.lose{color:var(--muted-2)}
.score{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,3vw,50px);align-items:center;padding:clamp(26px,4vh,48px) clamp(16px,2vw,28px);border-top:1px solid var(--line);background:color-mix(in srgb, var(--gold) 03%, transparent)}
.score__side{text-align:center}
.score__n{font-family:var(--font-display);font-weight:700;font-size:clamp(44px,7vw,104px);line-height:.9;color:var(--gold-hi)}
.score__side--b .score__n{color:var(--teal)}
.score__l{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);margin-top:12px}
.score__vs{font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;color:var(--muted-2)}
/* hesap efsanesi — mobilde hüküm tablosunda kimin hangi kolon olduğunu söyler */
.verdict__legend{display:none}

/* ---------- 19b. OYUNCU DEFTERİ (imza / yorum) ---------- */
.book{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(22px,3vw,52px);align-items:start}
.book>*{min-width:0}

.sign{
  border:1px solid var(--line);background:linear-gradient(180deg,var(--void-2),color-mix(in srgb, var(--void) 6%, transparent));
  padding:clamp(20px,2.4vw,34px);position:relative;
}
.sign__head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px;color:var(--gold)}
.sign__no{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.24em;color:var(--muted-2);text-transform:uppercase}
.sign__no b{color:var(--gold-hi);font-weight:400}
.sign__intro{font-family:var(--font-editorial);font-style:italic;font-size:clamp(15px,1.2vw,18px);
  line-height:1.5;color:#c2c7ce;margin-bottom:24px;max-width:44ch}

.sign__field{margin-bottom:18px;position:relative}
.sign__field label{
  display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px;
}
.sign__field label i{font-style:normal;color:var(--muted-2);letter-spacing:.16em}
.sign__field input,.sign__field textarea,.sign__field select{
  width:100%;background:color-mix(in srgb, var(--void) 7%, transparent);border:1px solid var(--line);color:var(--ink);
  font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;padding:13px 14px;
  transition:border-color .4s var(--ease),background .4s var(--ease);border-radius:0;
}
.sign__field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.sign__field textarea{resize:vertical;min-height:130px;line-height:1.75;font-size:13.5px}
.sign__field input::placeholder,.sign__field textarea::placeholder{color:var(--muted-2)}
.sign__field input:hover,.sign__field textarea:hover,.sign__field select:hover{border-color:color-mix(in srgb, var(--gold) 34%, transparent)}
.sign__field input:focus,.sign__field textarea:focus,.sign__field select:focus{
  outline:none;border-color:var(--gold);background:color-mix(in srgb, var(--gold) 05%, transparent)
}
.sign__field input[aria-invalid="true"],.sign__field textarea[aria-invalid="true"]{border-color:var(--crimson)}
.sign__count{position:absolute;right:2px;top:0;font-family:var(--font-mono);font-size:9px;
  letter-spacing:.16em;color:var(--muted-2)}

.sign__kutu{display:flex;gap:11px;align-items:flex-start;margin:22px 0 24px;cursor:pointer}
.sign__kutu input{
  appearance:none;-webkit-appearance:none;width:15px;height:15px;flex:none;margin-top:3px;
  border:1px solid var(--line);background:color-mix(in srgb, var(--void) 7%, transparent);cursor:pointer;position:relative;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.sign__kutu input:checked{border-color:var(--gold);background:var(--gold)}
.sign__kutu input:checked::after{content:'';position:absolute;inset:3px;background:var(--void)}
.sign__kutu span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);line-height:1.85}

.sign__btn{
  width:100%;border:1px solid var(--gold);background:transparent;color:var(--gold-hi);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  padding:17px 12px;cursor:pointer;position:relative;overflow:hidden;
  transition:color .5s var(--ease),border-color .5s var(--ease);
}
.sign__btn::before{
  content:'';position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);z-index:-1;
}
.sign__btn{z-index:0}
.sign__btn:hover,.sign__btn:focus-visible{color:var(--void);border-color:var(--gold)}
.sign__btn:hover::before,.sign__btn:focus-visible::before{transform:scaleX(1)}
.sign__btn:active{transform:translateY(1px)}

.sign__status{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.9;margin-top:16px;color:var(--teal);min-height:1px;
}
.sign__status.is-err{color:#e0806f}
.sign__not{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;color:var(--muted-2);
  line-height:2.0;text-transform:uppercase;
}
.sign__not b{color:var(--gold);font-weight:400}

/* kayıt sütunu */
.book__tools{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding-bottom:15px;border-bottom:1px solid var(--line);color:var(--muted)}
.book__acts{display:flex;gap:8px;flex-wrap:wrap}
.gbtn{
  border:1px solid var(--line);background:transparent;color:var(--muted);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  padding:9px 12px;cursor:pointer;transition:color .4s var(--ease),border-color .4s var(--ease);
}
.gbtn:hover,.gbtn:focus-visible{color:var(--gold-hi);border-color:var(--gold)}
.gbtn[disabled]{opacity:.4;cursor:not-allowed}
.gbtn--warn:hover,.gbtn--warn:focus-visible{color:#e0806f;border-color:var(--crimson)}

.entries{border-top:1px solid transparent}
.entry{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;
  padding:22px 0;border-bottom:1px solid var(--line-soft);
  animation:entryIn .8s var(--ease-out) both;
}
@keyframes entryIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.entry__no{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--gold);
  padding-top:3px;
}
.entry__top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.entry__who{font-family:var(--font-display);font-size:clamp(15px,1.5vw,21px);
  text-transform:uppercase;letter-spacing:.03em;color:var(--gold-hi)}
.entry__srv{
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);border:1px solid color-mix(in srgb, var(--teal) 34%, transparent);padding:3px 7px;
}
.entry__date{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;color:var(--muted-2);
  text-transform:uppercase;margin-left:auto}
.entry__text{
  margin-top:11px;font-family:var(--font-editorial);font-style:italic;
  font-size:clamp(16px,1.25vw,20px);line-height:1.6;color:#d3d7dc;max-width:54ch;
}
.entry__del{
  margin-top:12px;border:0;background:none;padding:0;cursor:pointer;
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);border-bottom:1px solid var(--line-soft);transition:color .4s,border-color .4s;
}
.entry__del:hover,.entry__del:focus-visible{color:#e0806f;border-color:var(--crimson)}
.book__empty{
  padding:34px 0;font-family:var(--font-editorial);font-style:italic;
  font-size:clamp(16px,1.3vw,20px);color:var(--muted-2);max-width:44ch;
}

/* ---------- 19c. DİĞER HESAPLARIM ---------- */
.socials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.social{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;
  background:var(--void-2);padding:clamp(20px,2.2vw,30px);
  position:relative;transition:background .6s var(--ease);
}
.social::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);
  transition:width .8s var(--ease);
}
.social:hover,.social:focus-visible{background:var(--void-3)}
.social:hover::after,.social:focus-visible::after{width:100%}
.social__ico{width:38px;height:38px;color:var(--gold);display:block;transition:color .5s var(--ease),transform .6s var(--ease)}
.social__ico svg{width:100%;height:100%;display:block}
.social:hover .social__ico{transform:translateY(-3px)}
.social__body{display:block;min-width:0}
.social__k{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted-2)}
.social__v{display:block;font-family:var(--font-display);font-size:clamp(17px,1.8vw,26px);
  letter-spacing:.03em;color:var(--gold-hi);margin-top:8px;line-height:1.15;overflow-wrap:anywhere}
.social__n{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);margin-top:9px;line-height:1.8}
.social__go{font-family:var(--font-mono);font-size:15px;color:var(--muted-2);
  transition:color .5s var(--ease),transform .5s var(--ease)}
.social:hover .social__go,.social:focus-visible .social__go{color:var(--gold);transform:translate(3px,-3px)}
.social--spot .social__ico{color:var(--teal)}
.social--spot .social__v{color:#a9f0e8}
.social--spot::after{background:var(--teal)}

@media (max-width:1000px){
  .book{grid-template-columns:1fr}
  .book__side{margin-top:8px}
  .socials{grid-template-columns:1fr}
}
@media (max-width:620px){
  .entry{grid-template-columns:34px minmax(0,1fr);gap:12px}
  .entry__top{gap:8px}
  .entry__date{margin-left:0;width:100%;font-size:8.5px}
  .entry__who{font-size:clamp(14px,4.4vw,18px)}
  .entry__text{font-size:clamp(16px,4.6vw,19px);max-width:100%}
  .social{grid-template-columns:auto minmax(0,1fr) auto;gap:14px;padding:20px 16px}
  .social__ico{width:30px;height:30px}
  .sign__btn{font-size:10px;letter-spacing:.22em}
  .sign__kutu span{font-size:9px;letter-spacing:.1em}
  .sign__not{font-size:9px;letter-spacing:.08em;line-height:1.95}
  .book__acts{width:100%}
  .gbtn{flex:1;text-align:center}
}

/* ---------- 19d. PORO PUANLAMA (1–5) ---------- */
.poro-rate{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.poro-rate__b{
  border:1px solid transparent;background:none;padding:3px;cursor:pointer;line-height:0;
  border-radius:2px;color:inherit;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.poro-rate__i{display:block;position:relative;width:26px;height:26px}
.poro-rate__i img{
  width:26px;height:26px;object-fit:contain;
  filter:grayscale(1) brightness(.42) contrast(1.2);
  opacity:.55;transition:filter .4s var(--ease),opacity .4s var(--ease),transform .4s var(--ease);
}
/* dolu poro: altın hale */
.poro-rate__b[data-dolu="1"] .poro-rate__i img{
  filter:none;opacity:1;
  filter:drop-shadow(0 0 7px color-mix(in srgb, var(--gold) 75%, transparent));
}
.poro-rate__b:hover .poro-rate__i img{transform:translateY(-2px) scale(1.06);opacity:.85}
.poro-rate__b[data-dolu="1"]:hover .poro-rate__i img{opacity:1}
.poro-rate__b.is-bump .poro-rate__i img{transform:scale(1.22) translateY(-3px)}
.poro-rate__v{
  margin-left:8px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2);flex:1 1 100%;
}
.poro-rate__v b{color:var(--gold);font-weight:400}

/* ortalama çipi */
.poro-avg{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  padding:7px 11px;background:color-mix(in srgb, var(--gold) 05%, transparent);
}
.poro-avg img{width:20px;height:20px;object-fit:contain;flex:none}
.poro-avg b{font-family:var(--font-mono);font-size:12px;color:var(--gold-hi);font-weight:400}
.poro-avg span{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-2)}

/* kayıtlardaki poro sırası */
.entry__poro{display:flex;gap:4px;align-items:center;margin-top:12px;flex-wrap:wrap}
.entry__poro img{width:19px;height:19px;object-fit:contain}
.entry__poro img.off{filter:grayscale(1) brightness(.4);opacity:.42}
.entry__poro b{
  margin-left:7px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);font-weight:400;
}

/* ---------- 19e. DESTEK TERCİHLERİ ---------- */
.sup{border-top:1px solid var(--line);counter-reset:sup}
.sup__row{
  display:grid;grid-template-columns:74px 132px minmax(0,1fr) auto;
  gap:clamp(16px,2.2vw,34px);align-items:center;
  padding:clamp(18px,2.4vh,28px) 0;border-bottom:1px solid var(--line);
  transition:background .7s var(--ease),padding-left .7s var(--ease);
  position:relative;
}
.sup__row:hover{background:linear-gradient(90deg,color-mix(in srgb, var(--gold) 06%, transparent),transparent 70%);padding-left:12px}
.sup__rank{
  font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4vw,58px);
  line-height:1;color:var(--muted-2);letter-spacing:.02em;
}
.sup__row--1 .sup__rank{color:var(--gold)}
.sup__row--5 .sup__rank{color:var(--muted-2);opacity:.6}
.sup__art{display:block;aspect-ratio:308/560;max-height:150px;width:auto;overflow:hidden;border:1px solid var(--line)}
.sup__art img{
  width:100%;height:100%;object-fit:cover;object-position:center 18%;
  filter:saturate(.93) contrast(1.02) brightness(.96);
  transition:filter .8s var(--ease),transform 1.4s var(--ease);
}
.sup__row:hover .sup__art img{filter:saturate(1) contrast(1.1) brightness(1);transform:scale(1.05)}
.sup__row--1 .sup__art{border-color:color-mix(in srgb, var(--gold) 5%, transparent)}
.sup__row--5 .sup__art{opacity:.72}
.sup__body{min-width:0}
.sup__tag{
  display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--teal);
}
.sup__row--1 .sup__tag{color:var(--gold)}
.sup__name{
  display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,3.2vw,46px);line-height:1;letter-spacing:.02em;
  color:var(--gold-hi);margin:10px 0 12px;
}
.sup__row--5 .sup__name{color:var(--muted)}
.sup__line{
  display:block;font-family:var(--font-editorial);font-style:italic;
  font-size:clamp(15px,1.2vw,19px);line-height:1.55;color:#c6cbd2;max-width:56ch;
}
.sup__meter{display:flex;gap:5px;align-items:center;flex:none}
.sup__meter i{
  width:11px;height:11px;background:var(--gold-deep);transform:rotate(45deg);
  opacity:.85;display:block;
}
.sup__row--1 .sup__meter i{background:var(--gold)}
.sup__row--2 .sup__meter i,.sup__row--3 .sup__meter i{background:var(--gold-deep)}
.sup__row--4 .sup__meter i{background:color-mix(in srgb, var(--gold-deep) 5%, transparent)}
.sup__row--5 .sup__meter i{background:var(--teal);opacity:.8}

@media (max-width:1000px){
  .sup__row{grid-template-columns:56px 104px minmax(0,1fr);gap:16px;align-items:start}
  .sup__meter{grid-column:2/4;margin-top:12px}
}
@media (max-width:620px){
  .sup__row{grid-template-columns:38px 74px minmax(0,1fr);gap:12px;padding:16px 0}
  .sup__rank{font-size:clamp(24px,8vw,34px)}
  .sup__art{max-height:110px}
  .sup__name{font-size:clamp(19px,6.4vw,28px);margin:8px 0 9px}
  .sup__line{font-size:clamp(14px,4.2vw,17px)}
  .sup__meter{grid-column:1/-1;margin-top:10px}
  .poro-avg{width:100%;justify-content:center}
}

/* ---------- 19f. DEFTER: HONEYPOT + DURUM DURUMLARI ---------- */
/* honeypot: gerçek kullanıcı görmez, botlar doldurur */
.sign__honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* gönderim durumu: bekleme / başarı / hata */
.sign__status.is-ok{color:var(--teal)}
.sign__status.is-err{color:#e0806f}
.sign__btn[disabled]{opacity:.6;cursor:progress}
.sign__btn[disabled]::before{transform:scaleX(0)}

/* ---------- 19g. YÖNETİM PANELİ (defter) ---------- */
.yonetim{
  margin-top:16px;padding:16px;border:1px solid var(--line);
  background:color-mix(in srgb, var(--void) 6%, transparent);
}
.yonetim[hidden]{display:none}
.yonetim label{
  display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}
.yonetim__satir{display:flex;gap:8px;flex-wrap:wrap}
.yonetim__satir input{
  flex:1 1 200px;min-width:0;background:color-mix(in srgb, var(--void) 7%, transparent);border:1px solid var(--line);
  color:var(--ink);font-family:var(--font-mono);font-size:13px;letter-spacing:.24em;
  padding:11px 13px;
}
.yonetim__satir input:focus{border-color:var(--gold);outline:none;background:color-mix(in srgb, var(--gold) 05%, transparent)}
.yonetim__durum{
  margin-top:11px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);line-height:1.9;min-height:1px;
}
.yonetim__durum.is-err{color:#e0806f}
.entry__del[disabled]{opacity:.5;cursor:progress}

/* ---------- 19h. DEFTER: KAYIT LİSTESİ ---------- */
.book__list{display:flex;flex-direction:column;gap:0}
.book__empty{
  margin-top:18px;padding:26px 20px;border:1px dashed var(--line);
  text-align:center;color:var(--muted);
}
.book__empty[hidden]{display:none}
.book__empty .mono{font-size:10px;letter-spacing:.2em;text-transform:uppercase}

/* Seçili şampiyon satırı altın bir bant taşır. Koyu temada bu bandın üstünde
   açık krem metin (--gold-hi) okunur; açık temada --gold-hi KOYU olduğu için
   metin bandın içinde kaybolur. Açık temada bandı yumuşatıp metni koyulaştırır. */
[data-theme="light"] .champ[aria-current="true"]{
  background:linear-gradient(90deg,color-mix(in srgb, var(--gold) 18%, transparent),transparent 78%);
  box-shadow:inset 2px 0 0 var(--gold);
}
[data-theme="light"] .champ[aria-current="true"] .champ__n,
[data-theme="light"] .champ[aria-current="true"] .champ__n small,
[data-theme="light"] .champ[aria-current="true"] .champ__n b{color:var(--gold)}
[data-theme="light"] .champ[aria-current="true"] .champ__k,
[data-theme="light"] .champ[aria-current="true"] .champ__i{color:var(--muted)}

/* Yeniden boyanan yüzeyler: koyu temada yarı saydam siyah, kâğıtta sıcak ton */
[data-theme="light"] .book{background:var(--panel)}
[data-theme="light"] .frame{border-color:var(--line)}
[data-theme="light"] .social:hover{background:var(--panel-solid)}

/* Seçili şampiyon satırının alt yazısı (champ__n small) koyu temada --muted-2
   rengini alıyor; altın bandın üstünde bu gri kayboluyordu. Bandın içindeki
   metinler bandın kendi kontrastına göre ayarlanır — iki temada da okunur. */
.champ[aria-current="true"] .champ__n small{color:var(--gold)}
[data-theme="light"] .champ[aria-current="true"] .champ__n small{color:var(--gold)}
.champ[aria-current="true"] .champ__i,
.champ[aria-current="true"] .champ__k{color:var(--gold)}
/* açık temada bandın üstünde --muted 4,1 · --ink 12,3 verir; okunur olan seçilir */
[data-theme="light"] .champ[aria-current="true"] .champ__i,
[data-theme="light"] .champ[aria-current="true"] .champ__k{color:var(--ink);opacity:.72}

/* ---------- 19i. DENETİMLER: DİL + TEMA ---------- */
.ctl{
  position:fixed;top:calc(var(--band) + 14px);right:calc(var(--gut) * .5);
  z-index:60;display:flex;align-items:center;gap:8px;
}
.ctl__dil{
  display:flex;align-items:center;gap:2px;padding:3px;
  border:1px solid var(--line);background:var(--panel);
  backdrop-filter:blur(10px);
}
.ctl__b{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;
  padding:6px 9px;color:var(--muted);transition:color .25s var(--ease),background .25s var(--ease);
}
.ctl__b:hover{color:var(--gold)}
.ctl__b[aria-pressed="true"]{color:var(--void);background:var(--gold)}
.ctl__ayrac{width:1px;height:12px;background:var(--line)}
.ctl__tema{
  display:flex;align-items:center;gap:7px;padding:7px 12px;
  border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(10px);
  color:var(--muted);transition:color .25s var(--ease),border-color .25s var(--ease);
}
.ctl__tema:hover{color:var(--gold);border-color:color-mix(in srgb, var(--gold) 45%, transparent)}
.ctl__etiket{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
}
/* ikon: koyu temada güneş (aydınlığa geç), açık temada ay */
.ctl__ikon{display:flex;align-items:center}
.ctl__ikon .i-ay{display:none}
[data-theme="light"] .ctl__ikon .i-gunes{display:none}
[data-theme="light"] .ctl__ikon .i-ay{display:block}

@media (max-width:1000px){
  .ctl{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));right:12px;gap:6px}
  .ctl__etiket{display:none}
  .ctl__tema{padding:8px 10px}
}
@media (max-width:620px){
  .ctl{bottom:12px;right:10px}
  .ctl__dil{padding:2px}
  .ctl__b{padding:5px 7px}
}

/* ---------- 20. KAPANIŞ / KÜNYE ---------- */

.colophon{border-top:1px solid var(--line);padding:clamp(50px,8vh,96px) var(--gut);background:linear-gradient(180deg,var(--void),#020408)}
.colophon__grid{max-width:1560px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(26px,4vw,60px);padding-left:var(--rail)}
.colophon h4{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.colophon p,.colophon li{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;line-height:2.1;color:var(--muted-2);text-transform:uppercase}
.colophon a{border-bottom:1px solid var(--line);transition:color .4s,border-color .4s}
.colophon a:hover{color:var(--gold-hi);border-color:var(--gold)}
.colophon__end{max-width:1560px;margin:clamp(40px,6vh,70px) auto 0;padding-left:var(--rail);font-family:var(--font-display);font-size:clamp(20px,4.4vw,64px);text-transform:uppercase;letter-spacing:.02em;line-height:1;color:transparent;-webkit-text-stroke:1px var(--gold-deep)}

/* ---------- 20b. JS YOKSA: her şey görünür kalır ---------- */
html:not(.js) .rv,
html:not(.js) .strip,
html:not(.js) .hero__sub{opacity:1;transform:none}
html:not(.js) .mask>span{transform:none}
html:not(.js) .hero__type h1 b{transform:none}
html:not(.js) .ally__bar i{transform:scaleX(var(--w))}
html:not(.js) html:not(.js) .cursor{display:none}

/* ---------- 21. HAREKET AZALTMA ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .topband__track{animation:none}
  .grain{animation:none}
  .rv,.strip,.hero__sub{opacity:1 !important;transform:none !important}
  .mask>span{transform:none !important}
  .hero__type h1 b{transform:none !important}
  .ally__bar i{transform:scaleX(var(--w)) !important}
}

/* ---------- 22. DUYARLI ---------- */
@media (max-width:1180px){
  :root{--rail:62px}
  .rail__item b{display:none}
  .archive{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
}
@media (max-width:1000px){
  :root{--rail:0px}
  .rail{display:none}
  .scrollrail{display:none}
  .chapter{padding-left:var(--gut)}
  .hero__grid{grid-template-columns:1fr;gap:34px}
  .hero__type h1{font-size:clamp(44px,13vw,110px)}
  .dossier,.ladder__grid,.archive,.allies,.intro2{grid-template-columns:1fr;min-width:0}
  .intro2{gap:26px;align-items:start}
  .intro2 .lede{max-width:30ch}
  .dossier>*,.archive>*,.allies>*,.verdict>*,.records>*{min-width:0}
  .archive__stage{position:relative;top:0;margin-bottom:34px}
  .frame{max-width:min(100%,430px);margin-inline:auto;aspect-ratio:4/5.6;max-height:none}
  .colophon__grid,.colophon__end{padding-left:0}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cursor{display:none}
  .chapter__note{display:none}
  .vrow__a,.vrow__b,.vrow__cat{min-width:0;overflow-wrap:anywhere}
}
@media (max-width:620px){
  :root{--band:32px;--gut:18px}
  body{font-size:15.5px}
  .chapter{padding-top:clamp(60px,9vh,90px);padding-bottom:clamp(60px,9vh,90px)}
  .chapter__head{flex-wrap:wrap;gap:10px}
  .hero__type h1{font-size:clamp(38px,15vw,72px)}
  .strip{grid-template-columns:1fr 1fr}
  .strip__cell{padding:14px}
  .champ{grid-template-columns:24px minmax(0,1fr) 58px;gap:10px}
  .champ__k{display:none}
  .champ__n{font-size:clamp(16px,4.6vw,20px)}
  .champ__n small{font-size:8.5px;line-height:1.6}
  .card__name{font-size:11.5px}
  .card__tag{font-size:8.5px}
  .card__overlay{padding:12px 11px 12px}
  .records{grid-template-columns:1fr}
  .score{grid-template-columns:1fr;gap:22px;text-align:center}
  .topband__track span{font-size:9.5px;padding:0 20px;letter-spacing:.24em}
  /* hüküm tablosu: kategori üstte, iki değer altında yan yana */
  .vrow{grid-template-columns:1fr 1fr;gap:3px 10px;padding:15px 16px}
  .vrow--head{display:none}
  .vrow__cat{grid-column:1/-1;margin-bottom:5px}
  .vrow__mid{display:none}
  .vrow__a{grid-column:1;justify-self:end;text-align:left;font-size:12.5px}
  .vrow__b{grid-column:2;justify-self:start;text-align:left;font-size:12.5px}
  .vrow>div:last-child{display:block}
  .vrow__a.win::before{display:none}
  .score__n{font-size:clamp(52px,17vw,84px)}
  .verdict__legend{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:15px 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--gold) 04%, transparent);
  }
  .verdict__legend span{
    font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);display:flex;align-items:center;gap:7px;
  }
  .verdict__legend i{width:14px;height:2px;display:block;flex:none}
}

/* ---------- 23. YAZDIRMA ---------- */
@media print{
  .grain,.vignette,.rail,.scrollrail,.topband,.cursor,  body{background:#fff;color:#111}
  .chapter{page-break-inside:avoid;padding:24px 0}
}

/* ══════════════════════════════════════════════════════════════════
   24. ARKANA KARTI · AÇILIŞ BÖLÜMÜ (#acilis)
   Önde Twitch (Octavia#BLOD), arkada Mel (Çılgın Kangal#enik).
   Karanlık alana tıklanınca arkadaki kart öne gelir; künye listesi,
   okuma metni ve ipucu o karta döner — durum .arkana[data-on] ile.
   Bölüm ekranı doldururken sitenin altın halka imleci susar
   (html[data-arkana="1"] .cursor) ve yerini LoL imleçlerine bırakır;
   bölüm dışında site imleci aynen çalışır.
   Kaldırılan eski açılışın .hero / .duel / .card stilleri (bölüm 5-6)
   silinmedi — geri istenirse hazır duruyor.
   ══════════════════════════════════════════════════════════════════ */
.arkana{
  --ak:1;
  max-width:none;
  min-height:calc(100vh - var(--band));
  padding:calc(var(--band) + clamp(30px,6vh,74px)) var(--gut) clamp(58px,10vh,110px) calc(var(--gut) + var(--rail));
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:clamp(20px,3.2vw,60px);
  position:relative;overflow:hidden;isolation:isolate;
  cursor:var(--imlec-lol);
}
.arkana__baslik{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* — zemin: hale, pirinç sigil, toz — */
.arkana__zemin{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.arkana__hale{
  position:absolute;left:50%;top:45%;width:min(1080px,132vw);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--gold) 22%,transparent),color-mix(in srgb,var(--gold) 6%,transparent) 40%,transparent 68%);
  filter:blur(8px);
}
.arkana__sigil{
  position:absolute;left:50%;top:50%;width:min(660px,96vw);aspect-ratio:1;transform:translate(-50%,-50%) rotate(11deg);opacity:.2;
  background:
    repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--gold) 55%,transparent) 0 .3deg,transparent .3deg 15deg),
    radial-gradient(circle,transparent 0 61%,color-mix(in srgb,var(--gold) 50%,transparent) 61.3% 61.8%,transparent 62%);
  -webkit-mask:radial-gradient(circle,#000 0 60%,transparent 62%);
          mask:radial-gradient(circle,#000 0 60%,transparent 62%);
}
.arkana__toz{
  position:absolute;inset:0;opacity:.6;background-image:
    radial-gradient(circle at 12% 22%,color-mix(in srgb,var(--gold-hi) 60%,transparent) 0 1px,transparent 1.6px),
    radial-gradient(circle at 27% 68%,color-mix(in srgb,var(--gold-hi) 45%,transparent) 0 1.4px,transparent 2px),
    radial-gradient(circle at 41% 15%,color-mix(in srgb,var(--gold-hi) 55%,transparent) 0 1px,transparent 1.8px),
    radial-gradient(circle at 58% 47%,color-mix(in srgb,var(--gold-hi) 40%,transparent) 0 1.6px,transparent 2.2px),
    radial-gradient(circle at 66% 78%,color-mix(in srgb,var(--gold-hi) 45%,transparent) 0 1px,transparent 1.6px),
    radial-gradient(circle at 78% 26%,color-mix(in srgb,var(--gold-hi) 55%,transparent) 0 1.3px,transparent 2px),
    radial-gradient(circle at 88% 60%,color-mix(in srgb,var(--gold-hi) 40%,transparent) 0 1.2px,transparent 2px),
    radial-gradient(circle at 33% 88%,color-mix(in srgb,var(--gold-hi) 45%,transparent) 0 1px,transparent 1.7px);
}

/* — karanlık tıklama alanı: LoL hedef imleci burada — */
.arkana__kara{position:absolute;inset:0;z-index:1;background:transparent;border:0;padding:0;margin:0;
  cursor:var(--imlec-hedef)}
.arkana__kara:focus-visible{outline:1px solid var(--gold-hi);outline-offset:-10px}

/* — metin sütunları — */
.arkana__sol,.arkana__sag,.arkana__sahne{position:relative;z-index:2}
.arkana__sol,.arkana__sag{pointer-events:none}
.arkana__sol .mono{display:block;color:var(--gold);margin-bottom:12px}
.arkana__metin{margin:0 0 16px;font-size:clamp(16px,1.15vw,18.5px);line-height:1.6;color:var(--muted);max-width:38ch}
.arkana__alinti{margin:22px 0 0;font-style:italic;font-size:clamp(18px,1.35vw,21px);line-height:1.5;color:var(--gold-hi);max-width:34ch}
.arkana__sag{justify-self:end}
.arkana__liste{width:min(300px,100%);border-top:1px solid var(--line)}
.arkana__liste-bas{display:block;color:var(--gold);margin:16px 0 4px}
.arkana__sat{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.arkana__sat span{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap}
.arkana__sat b{font-family:var(--font-display);font-weight:400;font-size:16.5px;color:var(--ink);text-align:right}
.arkana__sat b.ak-yesil{color:var(--teal)}
.arkana__sat b.ak-kizil{color:var(--rose)}

/* — deste — */
.arkana__sahne{display:flex;flex-direction:column;align-items:center;gap:24px;pointer-events:auto;cursor:var(--imlec-lol)}
.arkana__sar{position:relative;width:calc(404px * var(--ak));height:calc(644px * var(--ak))}
.arkana__deste{position:absolute;left:0;top:0;width:404px;height:644px;transform:scale(var(--ak));transform-origin:top left}
.arkana__kart{
  position:absolute;inset:0;padding:13px;background:linear-gradient(160deg,#1c1710,#0c0b0d 55%,#141014);
  box-shadow:0 44px 100px rgba(0,0,0,.9),0 0 0 1px color-mix(in srgb,var(--gold) 38%,transparent),
             0 0 60px color-mix(in srgb,var(--gold) 14%,transparent);
  transition:transform .78s var(--ease-out),opacity .6s var(--ease),filter .6s var(--ease);
}
.arkana__kart::before{content:'';position:absolute;inset:5px;z-index:5;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);filter:url(#ak-kol)}
.arkana__ic{position:relative;width:100%;height:100%;overflow:hidden;background:#05070b}
.arkana__ic img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.18) contrast(1.08) brightness(.92)}
.arkana__ton{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:color}
.arkana__ton--yesil{background:linear-gradient(160deg,#3f8f5e,#1d5c4a 45%,#0d2a24);opacity:.36}
.arkana__ton--kan{background:linear-gradient(160deg,#b03a34,#5b2330 50%,#141118);opacity:.4}
.arkana__ic::after{content:'';position:absolute;inset:0;z-index:4;
  background:linear-gradient(180deg,rgba(8,6,10,.26),rgba(8,6,10,.02) 40%,rgba(8,6,10,.9))}
.arkana__no{position:absolute;left:0;right:0;top:20px;z-index:6;text-align:center;font-family:var(--font-display);
  font-size:26px;letter-spacing:.3em;color:rgba(200,170,110,.9)}
.arkana__ad{position:absolute;left:0;right:0;bottom:62px;z-index:6;text-align:center;font-family:var(--font-display);
  font-size:30px;letter-spacing:.18em;color:#f0e6d2;text-shadow:0 3px 18px #000}
.arkana__alt{position:absolute;left:0;right:0;bottom:30px;z-index:6;text-align:center;color:#e0bd76;letter-spacing:.3em}
.arkana__kose{position:absolute;width:52px;height:52px;z-index:9;pointer-events:none;
  border-top:1px solid color-mix(in srgb,var(--gold) 78%,transparent);
  border-left:1px solid color-mix(in srgb,var(--gold) 78%,transparent)}
.arkana__kose--tl{left:8px;top:8px}
.arkana__kose--tr{right:8px;top:8px;transform:rotate(90deg)}
.arkana__kose--br{right:8px;bottom:8px;transform:rotate(180deg)}
.arkana__kose--bl{left:8px;bottom:8px;transform:rotate(-90deg)}

/* — deste durumu: önde Twitch (varsayılan) / önde Mel — */
.arkana__kart--twitch{z-index:20;transform:translate(0,0) rotate(0) scale(1);opacity:1}
.arkana__kart--mel{z-index:10;transform:translate(-30px,12px) rotate(-7deg) scale(.96);opacity:.72;filter:brightness(.68) saturate(.9)}
.arkana[data-on="mel"] .arkana__kart--twitch{z-index:10;transform:translate(30px,-12px) rotate(7deg) scale(.96);opacity:.72;filter:brightness(.68) saturate(.9)}
.arkana[data-on="mel"] .arkana__kart--mel{z-index:20;transform:translate(0,0) rotate(0) scale(1);opacity:1;filter:none}

/* — ipucu + duruma göre değişen metinler — */
.arkana__ipucu{display:block;text-align:center;color:var(--gold-hi);letter-spacing:.24em}
.arkana[data-on="twitch"] .ak-mel{display:none}
.arkana[data-on="mel"] .ak-twitch{display:none}

/* — giriş animasyonu: açılış bölümü olduğu için sayfa yüklenirken oynar — */
@keyframes akGir{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.arkana__sahne{animation:akGir 1.1s var(--ease-out) .05s both}
.arkana__sol{animation:akGir 1s var(--ease-out) .2s both}
.arkana__sag{animation:akGir 1s var(--ease-out) .34s both}

/* — imleç devri — */
html[data-arkana="1"] .cursor{display:none}
html:not(.js) .arkana__kara{display:none}

/* — açık tema: kâğıt zemin; kart bilinçli olarak koyu kalır — */
[data-theme="light"] .arkana__kart{
  box-shadow:0 26px 60px rgba(70,52,25,.34),0 0 0 1px color-mix(in srgb,var(--gold) 55%,transparent),
             0 0 40px color-mix(in srgb,var(--gold) 20%,transparent);
}
[data-theme="light"] .arkana__toz{opacity:.35}
[data-theme="light"] .arkana__sigil{opacity:.28}

/* — duyarlı — */
@media (max-width:1180px){ .arkana{--ak:.92} }
@media (max-width:1000px){
  .arkana{--ak:.86;grid-template-columns:minmax(0,1fr);gap:38px;justify-items:center;text-align:center;
    padding:calc(var(--band) + 40px) var(--gut) 76px var(--gut)}
  .arkana__sahne{order:-1}
  .arkana__sag{order:0;justify-self:center}
  .arkana__sol{order:1}
  .arkana__metin,.arkana__alinti{margin-left:auto;margin-right:auto}
}
@media (max-width:620px){
  /* .ctl mobilde sağ alta sabitleniyor (main.css bölüm 22); bölümün
     alt boşluğu listenin son satırı o düğmelerin altında kalmasın diye artırıldı. */
  .arkana{--ak:.66;gap:28px;padding:calc(var(--band) + 26px) var(--gut) 108px}
  .arkana__ad{font-size:24px}
  .arkana__no{font-size:22px}
}
@media print{
  .arkana__zemin,.arkana__kara,.arkana__ipucu{display:none}
  .arkana{--ak:.6;min-height:0}
}

/* ══════════════════════════════════════════════════════════════════
   25. LOL İMLEÇLERİ — SİTE GENELİ
   Kural: genel alanlarda altın eldiven (--imlec-lol), tıklanabilir
   yerlerde mavi hedef elması (--imlec-hedef). İkisi de Riot'un kendi
   ux/cursors setinden (48×48 saydam PNG, assets/ui/).
   Yazı alanlarında metin imleci bırakılır (yazarken şart).
   Eski altın halka imleç (.cursor) bu yüzden devre dışı: LoL imleciyle
   üst üste binerse ikisi birden görünüyordu.
   Seçiciler `html body` ile güçlendirildi ki dosyanın üstündeki
   `cursor:pointer` kurallarını (button, .champ, .poro-rate__b …) ezsin.
   ══════════════════════════════════════════════════════════════════ */
.cursor{display:none}                      /* eski halka imleç: emekli */
html,body{cursor:var(--imlec-lol)}

/* tıklanabilir her yer: mavi hedef elması */
html body :is(a[href],button,select,summary,label,[role="button"],[role="link"],[role="tab"],
  input[type="checkbox"],input[type="radio"],.champ,.rung,.rec,.social,.rail__item,
  .ctl__b,.ctl__tema,.poro-rate__b,.sign__kutu,.gbtn,.entry__del,.strip__cell a,
  .arkana__sahne,.arkana__deste,.arkana__kart){cursor:var(--imlec-hedef)}

/* yazı alanları: metin imleci */
html body :is(input:not([type="checkbox"]):not([type="radio"]),textarea,
  [contenteditable="true"]){cursor:text}

/* Arkana bölümünün tamamını kaplayan görünmez tıklama yüzeyi "genel alan"
   sayılır: orada eldiven kalır; mavi yalnızca kartın üstünde belirir.
   Sınıf iki kez yazıldı: yukarıdaki :is(...) kuralı (0,1,3) özgüllüğünde,
   tek sınıflı bir kural onu ezemezdi. */
html body .arkana__kara.arkana__kara{cursor:var(--imlec-lol)}

/* ══════════════════════════════════════════════════════════════════
   26. KÜNYE KARTI (#kunye · bölüm 03)
   Her hesap yatay bir dosya kartı: solda dikey portre paneli, sağda
   büyük sayılar + sekiz satır künye. maket/kunye-alternatifler.html
   içindeki 04 numaralı önerinin siteye uyarlanmış hâli.
   Portre konumu kart başına: --kx / --ky (yatay splash → dikey panel,
   aynı kırpma mantığı arşiv bölümündeki --px ile).
   Eski künyenin .dossier / .rows / .row / .chips / .archivist kuralları
   (bölüm 14) silinmedi; geri istenirse markup'ı geri koymak yeterli.
   ══════════════════════════════════════════════════════════════════ */
.kunye{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,34px)}

.kkart{
  position:relative;display:grid;grid-template-columns:minmax(150px,32%) 1fr;
  border:1px solid var(--line);background:linear-gradient(150deg,var(--void-3),var(--void));
  overflow:hidden;
}
.kkart__foto{position:relative;overflow:hidden;background:var(--void-2)}
.kkart__foto img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--kx,50%) var(--ky,25%);
  filter:saturate(.95) brightness(.92);
}
.kkart__foto::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,8,13,.08),rgba(5,8,13,.72))}

.kkart__detay{padding:clamp(18px,2.2vw,30px) clamp(18px,2.2vw,30px) clamp(16px,2vw,26px);display:flex;flex-direction:column;min-width:0}
.kkart__ad{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(19px,2.1vw,27px);
  line-height:1.1;letter-spacing:.02em;text-transform:uppercase}
.kkart__alt{margin:9px 0 0;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.2em;
  color:var(--muted-2);text-transform:uppercase}
.kkart__cizgi{height:1px;background:var(--line);margin:clamp(14px,1.8vw,20px) 0}

.kkart__buyuk{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.kkart__buyuk:last-of-type{margin-bottom:0}
.kkart__buyuk b{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3.4vw,46px);line-height:1}
.kkart--t .kkart__buyuk b{color:var(--teal)}
.kkart__buyuk span{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.2em;
  color:var(--muted);text-transform:uppercase;white-space:nowrap}

.kkart__kayit{margin-top:clamp(14px,1.8vw,22px);border-top:1px solid var(--line);display:flex;flex-direction:column}
.kkart__kayit .ksatir:first-child{border-top:0}
.ksatir{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;border-top:1px solid var(--line-soft)}
.ksatir .k{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.18em;color:var(--muted-2);
  text-transform:uppercase;white-space:nowrap}
.ksatir b{font-family:var(--font-display);font-weight:400;font-size:clamp(13px,1.05vw,16px);
  color:var(--ink);text-align:right}

.kalt{display:flex;justify-content:space-between;margin-top:clamp(16px,2.2vw,26px);
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.2em;color:var(--muted-2);text-transform:uppercase}

/* açık tema: kâğıt zemin, metin koyu */
[data-theme="light"] .kkart{background:var(--panel-solid)}
[data-theme="light"] .kkart__foto img{filter:saturate(.9) brightness(1)}

@media (max-width:1180px){
  .kkart{grid-template-columns:minmax(130px,34%) 1fr}
}
@media (max-width:900px){
  .kunye{grid-template-columns:1fr}
  .kkart{grid-template-columns:minmax(140px,32%) 1fr}
}
@media (max-width:620px){
  .kkart{grid-template-columns:1fr}
  .kkart__foto{aspect-ratio:16/10}
  .kkart__foto::after{background:linear-gradient(180deg,rgba(5,8,13,.05),rgba(5,8,13,.7))}
  .ksatir{flex-wrap:wrap;gap:6px}
  .ksatir b{text-align:left}
  .kalt{flex-direction:column;gap:6px}
}
@media print{
  .kkart{break-inside:avoid}
}

/* ══════════════════════════════════════════════════════════════════
   27. HEXTECH SANDIĞI · LOL AÇILIM AKIŞI (#kunye · bölüm 03)
   Oyunun sırası birebir:
     kapali     sandık yavaşça sallanır, "Kilitli" etiketi
     aciliyor   1) mühür kırılır + çatlak   2) kapak iki kanada ayrılır
                3) kart sandıktan çıkıp havada dönmeye başlar
                4) dönüş hızlanır, ışın yükselir, şok halkası yayılır
                5) kart patlayarak açılır
     acik       skin görünür, nadirlik rengi kartı kaplar
   Aşamalar data-asama ile sürülür (JS), görsel iş tamamen CSS'te.
   Kart sırtı CSS ile çizildi. Sandık/kart görselleri Riot varlıkları.
   ══════════════════════════════════════════════════════════════════ */
.hexk{--kk:1;--kartgen:clamp(210px,23vw,288px)}
.hexk__baslik{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.hexk__sahne{
  position:relative;margin-top:clamp(14px,2vh,32px);max-width:100%;overflow:visible;
  min-height:clamp(400px,50vh,560px);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(10px,1.6vh,18px);
  padding:clamp(12px,2vh,28px) 0 clamp(8px,1.6vh,18px);
  perspective:1500px;
}
.hexk__zemin{
  position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
  width:min(880px,96%);aspect-ratio:1.6;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--gold) 15%,transparent),transparent 70%);
  filter:blur(14px);
}
.hexk__halka{
  position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
  width:min(330px,62vw);aspect-ratio:3.4;border-radius:50%;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);
  box-shadow:0 0 44px color-mix(in srgb,var(--teal) 16%,transparent) inset;
  transition:border-color .5s var(--ease);
}
.hexk[data-durum="aciliyor"] .hexk__halka,
.hexk[data-durum="acik"] .hexk__halka{border-color:color-mix(in srgb,var(--teal) 50%,transparent)}

/* ── 1 · kapalı sandık: yavaş sallanma ── */
.hexk__sandik{
  position:relative;width:clamp(190px,21vw,266px);aspect-ratio:1;flex:none;margin:0 auto;align-self:center;
  transform-style:preserve-3d;cursor:var(--imlec-hedef);
  transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.hexk__sal{position:absolute;inset:0;transform-style:preserve-3d;
  animation:hexSallan 5.2s ease-in-out infinite}
@keyframes hexSallan{
  0%,100%{transform:rotateY(-13deg) rotateX(2deg)}
  50%{transform:rotateY(13deg) rotateX(-2deg)}
}
.hexk[data-durum="aciliyor"] .hexk__sal,
.hexk[data-durum="acik"] .hexk__sal{animation-play-state:paused;transform:rotateY(0) rotateX(0)}
.hexk__sandik:focus-visible{outline:1px solid var(--gold-hi);outline-offset:14px;border-radius:6px}

.hexk__govde{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.85)) drop-shadow(0 0 30px color-mix(in srgb,var(--gold) 22%,transparent))}

/* iki kanat: sol yarı sola, sağ yarı sağa açılır */
.hexk__kapakSar{
  position:absolute;top:0;height:54%;width:52%;overflow:hidden;z-index:4;
  transform-origin:50% 100%;transform-style:preserve-3d;
  transition:transform 1.05s cubic-bezier(.22,.9,.2,1),opacity .7s var(--ease) .45s;
  backface-visibility:hidden;
}
.hexk__kapakSar--sol{left:0;clip-path:inset(0 0 0 0)}
.hexk__kapakSar--sag{right:0}
.hexk__kapakSar::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 48%,rgba(5,8,13,.5) 84%,rgba(5,8,13,.92))}
.hexk__kapak{position:absolute;top:0;width:200%;height:185%;left:0}
.hexk__kapakSar--sag .hexk__kapak{left:-100%}
.hexk[data-durum="aciliyor"] .hexk__kapakSar--sol,
.hexk[data-durum="acik"] .hexk__kapakSar--sol{transform:rotateY(38deg) rotateX(-96deg) translate3d(-14%,-8%,0);opacity:0}
.hexk[data-durum="aciliyor"] .hexk__kapakSar--sag,
.hexk[data-durum="acik"] .hexk__kapakSar--sag{transform:rotateY(-38deg) rotateX(-96deg) translate3d(14%,-8%,0);opacity:0}

/* mühür + "Kilitli" etiketi */
.hexk__kilit{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:17%;aspect-ratio:1;border-radius:2px;z-index:5;
  background:linear-gradient(160deg,var(--gold-hi),var(--gold) 45%,var(--gold-deep));
  box-shadow:0 0 18px color-mix(in srgb,var(--teal) 65%,transparent),inset 0 0 6px rgba(0,0,0,.6);
  transition:opacity .3s var(--ease),transform .55s var(--ease);
}
.hexk[data-durum="aciliyor"] .hexk__kilit,
.hexk[data-durum="acik"] .hexk__kilit{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(42deg)}
.hexk__etiketK{
  position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);z-index:6;
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted-2);border:1px solid var(--line);padding:4px 10px;background:rgba(5,8,13,.7);
  transition:opacity .4s var(--ease);
}
.hexk[data-durum="aciliyor"] .hexk__etiketK,
.hexk[data-durum="acik"] .hexk__etiketK{opacity:0}

.hexk__catlak{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70%;aspect-ratio:1;z-index:6;opacity:0;pointer-events:none;
  background-image:
    linear-gradient(102deg,transparent 49.4%,color-mix(in srgb,var(--teal) 92%,transparent) 49.6% 50.4%,transparent 50.6%),
    linear-gradient(63deg,transparent 49.4%,color-mix(in srgb,var(--teal) 82%,transparent) 49.6% 50.4%,transparent 50.6%),
    linear-gradient(-38deg,transparent 49.4%,color-mix(in srgb,var(--teal) 72%,transparent) 49.6% 50.4%,transparent 50.6%),
    linear-gradient(18deg,transparent 49.4%,color-mix(in srgb,var(--gold-hi) 60%,transparent) 49.6% 50.4%,transparent 50.6%);
}
.hexk[data-asama="muhur"] .hexk__catlak{animation:hexCatlak .95s var(--ease-out) forwards}
@keyframes hexCatlak{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.28)}
  30%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
}

/* iç ışık, patlama, ışın */
.hexk__isik{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.2);
  width:100%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--teal) 58%,transparent),transparent 62%);
}
.hexk[data-durum="aciliyor"] .hexk__isik,
.hexk[data-durum="acik"] .hexk__isik{animation:hexIsik 1.7s var(--ease-out) forwards}
@keyframes hexIsik{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  38%{opacity:.95;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:.42;transform:translate(-50%,-50%) scale(1.18)}
}
.hexk__patlama{
  position:absolute;left:50%;top:50%;width:64%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:8;
  border:2px solid color-mix(in srgb,var(--gold-hi) 88%,transparent);opacity:0;
  box-shadow:0 0 44px color-mix(in srgb,var(--gold-hi) 45%,transparent),inset 0 0 34px color-mix(in srgb,var(--teal) 38%,transparent);
}
/* 5. aşamada kart patlar */
.hexk[data-asama="patlama"] .hexk__patlama{animation:hexPat 1.05s var(--ease-out) forwards}
@keyframes hexPat{
  0%{opacity:.95;transform:translate(-50%,-50%) scale(.3)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.9)}
}
/* 2. aşamada sandıktan taşan ışık */
.hexk[data-asama="kapak"] .hexk__muz{animation:hexMuz 1.1s var(--ease-out) forwards}
.hexk__muz{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scaleY(.1);transform-origin:50% 100%;
  width:56%;height:44%;pointer-events:none;z-index:3;opacity:0;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--gold-hi) 70%,transparent) 60%,color-mix(in srgb,var(--teal) 55%,transparent));
  filter:blur(12px);
}
@keyframes hexMuz{
  0%{opacity:0;transform:translate(-50%,-50%) scaleY(.1)}
  45%{opacity:.95;transform:translate(-50%,-50%) scaleY(1)}
  100%{opacity:0;transform:translate(-50%,-60%) scaleY(1.2)}
}
/* 4. aşamada yükselen ışın demeti */
.hexk__huzme{
  position:absolute;left:50%;bottom:46%;transform:translate(-50%,0) scaleY(.1);transform-origin:50% 100%;
  width:60%;height:270%;pointer-events:none;z-index:1;opacity:0;
  background:linear-gradient(180deg,transparent 2%,color-mix(in srgb,var(--teal) 50%,transparent) 36%,
             color-mix(in srgb,var(--gold-hi) 78%,transparent) 80%,color-mix(in srgb,var(--gold-hi) 34%,transparent));
  filter:blur(18px);
}
.hexk[data-asama="hizlan"] .hexk__huzme{animation:hexHuzme 1.25s var(--ease-out) forwards}
@keyframes hexHuzme{
  0%{opacity:0;transform:translate(-50%,0) scaleY(.1)}
  40%{opacity:.95;transform:translate(-50%,0) scaleY(1)}
  100%{opacity:0;transform:translate(-50%,-9%) scaleY(1.14)}
}

/* ── 2/3/4 · havada dönen kart ── */
.hexk__havada{
  position:absolute;left:50%;z-index:7;
  top:calc(50% + clamp(46px,6.6vw,96px));
  transform:translateX(-50%);
  width:calc(var(--kartgen) * .82);aspect-ratio:308/560;perspective:1200px;
  opacity:0;pointer-events:none;
}
.hexk__ceviren{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:translateY(52%) rotateY(0deg) scale(.72);
}
.hexk__arkayuz{
  position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);
  border-radius:6px;overflow:hidden;
  background:
    repeating-linear-gradient(45deg,color-mix(in srgb,var(--gold) 12%,transparent) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(-45deg,color-mix(in srgb,var(--gold) 12%,transparent) 0 1px,transparent 1px 9px),
    radial-gradient(60% 40% at 50% 50%,color-mix(in srgb,var(--teal) 22%,transparent),transparent 70%),
    linear-gradient(160deg,#141a24,#080b12 55%,#0d1119);
  box-shadow:0 26px 60px rgba(0,0,0,.85),inset 0 0 40px rgba(0,0,0,.7);
  backface-visibility:visible;
}
.hexk__arkayuz::before{content:'';position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(45deg);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);
  background:radial-gradient(circle,color-mix(in srgb,var(--teal) 30%,transparent),transparent 68%)}
.hexk__arkayuz::after{content:'';position:absolute;inset:7px;border:1px solid color-mix(in srgb,var(--gold) 28%,transparent);border-radius:4px}

/* kart çıkışı */
.hexk[data-asama="kart"] .hexk__havada,
.hexk[data-asama="hizlan"] .hexk__havada,
.hexk[data-asama="patlama"] .hexk__havada{opacity:1}
.hexk[data-asama="kart"] .hexk__ceviren{animation:hexCikis .75s var(--ease-out) forwards, hexSpinYavas 2.4s linear .75s forwards}
.hexk[data-asama="hizlan"] .hexk__ceviren{animation:hexSpinHizli .62s cubic-bezier(.5,0,.9,1) forwards}
.hexk[data-asama="patlama"] .hexk__ceviren{opacity:0;transition:opacity .18s linear}
@keyframes hexCikis{
  0%{opacity:0;transform:translateY(52%) rotateY(0) scale(.72)}
  100%{opacity:1;transform:translateY(-6%) rotateY(190deg) scale(.94)}
}
@keyframes hexSpinYavas{
  0%{opacity:1;transform:translateY(-6%) rotateY(190deg) scale(.94)}
  100%{opacity:1;transform:translateY(-6%) rotateY(620deg) scale(.94)}
}
@keyframes hexSpinHizli{
  0%{opacity:1;transform:translateY(-6%) rotateY(620deg) scale(.94)}
  100%{opacity:1;transform:translateY(-6%) rotateY(1310deg) scale(1.06)}
}

/* ── durum yazısı: yalnızca aktif olan görünür ── */
.hexk__durum{margin:0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.26em;
  color:var(--gold-hi);text-transform:uppercase;text-align:center}
.hexk__durum span{display:none}
.hexk[data-durum="kapali"] .ak-kapali{display:inline}
.hexk[data-durum="aciliyor"] .ak-aciliyor{display:inline}
.hexk[data-durum="acik"] .ak-acik{display:inline}

/* ── 5 · kart açıldı ── */
.hexk__kartlar{display:flex;justify-content:center;width:100%;margin-top:clamp(-4px,-0.4vh,0px)}
.hexk__kart{
  position:relative;width:var(--kartgen);border:1px solid var(--line);
  background:linear-gradient(165deg,var(--void-3),var(--void));
  padding:12px 12px 14px;
  opacity:0;transform:scale(1.14);filter:brightness(2.1) saturate(.4);
  transition:opacity .42s var(--ease),transform .6s cubic-bezier(.16,1,.3,1),filter .5s var(--ease);
  box-shadow:0 30px 60px rgba(0,0,0,.75);
}
.hexk__kart.geldi{opacity:1;transform:none;filter:none}
.hexk__kart__ust{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.hexk__kart__tur{font-family:var(--font-mono);font-size:8px;letter-spacing:.2em;color:var(--muted-2);text-transform:uppercase}
.hexk__kart__nadir{
  font-family:var(--font-mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;
  padding:4px 8px;border:1px solid currentColor;color:var(--gold-hi);
}
.hexk__kart__cerceve{position:relative;overflow:hidden;border:1px solid var(--line);aspect-ratio:308/560;background:var(--void-2)}
.hexk__kart__cerceve img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.hexk__kart__parlak{
  position:absolute;top:-30%;bottom:-30%;width:40%;left:-45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--gold-hi) 70%,transparent),transparent);
  filter:blur(9px);
}
.hexk__kart.geldi .hexk__kart__parlak{animation:hexParla 1.4s var(--ease-out) .2s forwards}
@keyframes hexParla{0%{left:-45%;opacity:.95}100%{left:125%;opacity:0}}
.hexk__kart__alt{margin-top:12px;text-align:center}
.hexk__kart__alt b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(15px,1.4vw,19px);
  color:var(--gold-hi);line-height:1.25}
.hexk__kart__alt i{display:block;font-style:normal;margin-top:6px;font-family:var(--font-mono);
  font-size:8.5px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.hexk__kart__eylem{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.hexk__eg{
  flex:1;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);padding:9px 6px;background:none;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.hexk__eg:hover{color:var(--gold-hi);border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.hexk__eg--ac{color:var(--void);background:var(--gold);border-color:var(--gold)}
.hexk__eg--ac:hover{background:var(--gold-hi)}

/* nadirliğe göre kart rengi */
.hexk__kart[data-nadirlik="Efsanevi"]{border-color:color-mix(in srgb,var(--gold) 58%,transparent);
  box-shadow:0 30px 60px rgba(0,0,0,.75),0 0 52px color-mix(in srgb,var(--gold) 30%,transparent)}
.hexk__kart[data-nadirlik="Efsanevi"] .hexk__kart__nadir{color:var(--gold-hi);
  background:color-mix(in srgb,var(--gold) 18%,transparent)}
.hexk__kart[data-nadirlik="Destansı"]{border-color:color-mix(in srgb,var(--teal) 52%,transparent);
  box-shadow:0 30px 60px rgba(0,0,0,.75),0 0 52px color-mix(in srgb,var(--teal) 24%,transparent)}
.hexk__kart[data-nadirlik="Destansı"] .hexk__kart__nadir{color:#a9e5dc;
  background:color-mix(in srgb,var(--teal) 14%,transparent)}

.hexk__sirala{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.hexk__b{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);padding:9px 15px;background:none;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.hexk__b:hover{color:var(--gold-hi);border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.hexk__b[aria-pressed="true"]{color:var(--void);background:var(--gold);border-color:var(--gold)}
.hexk__b--kapat{border-style:dashed}

.hexk[data-durum="acik"] .hexk__sandik,
.hexk[data-durum="aciliyor"] .hexk__sandik{cursor:default}
.hexk[data-durum="aciliyor"] .hexk__sandik{opacity:.55;transform:scale(.9)}

[data-theme="light"] .hexk__kart{background:var(--panel-solid)}
[data-theme="light"] .hexk__arkayuz{background:
    repeating-linear-gradient(45deg,color-mix(in srgb,var(--gold) 18%,transparent) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(-45deg,color-mix(in srgb,var(--gold) 18%,transparent) 0 1px,transparent 1px 9px),
    linear-gradient(160deg,#e8dfc8,#cfc3a6)}

@media (max-width:820px){ .hexk{--kartgen:clamp(178px,52vw,215px)} .hexk__havada{bottom:14%} }
@media (max-width:620px){
  .hexk__sandik{width:min(56vw,225px)}
  .hexk__sahne{min-height:0}
  .hexk__arkayuz::after{inset:5px}
}
@media (prefers-reduced-motion:reduce){
  .hexk__sal,.hexk__isik,.hexk__patlama,.hexk__huzme,.hexk__muz,.hexk__catlak,
  .hexk__ceviren,.hexk__kart__parlak{animation:none !important}
  .hexk__kart{transition:none;opacity:1;transform:none;filter:none}
  .hexk__havada{display:none}
}

/* ============================================================
   14c. CANLI MAÇ PANOSU (03 · Canlı)
   Oynanan maçın 5v5 panosu. Kartlar şampiyonun yükleme ekranı
   görselini taşır (308×560), üstünde seviye, altında KDA/CS/altın.
   Mavi takım turkuaz, kırmızı takım kızıl; altın çerçeve ikisini bağlar.
   Durumlar data-durum ile: bilinmiyor / macta / mac_yok.
   ============================================================ */

/* [hidden] niteliği display:grid tarafından eziliyordu: boş durumda skor tahtası
   ve arena hâlâ görünüyordu (0 - 0 / 0/5). Site bu kalıbı açıkça yazıyor. */
.cm__skor[hidden],.cm__arena[hidden],.cm__bos[hidden],.cm__kimlik[hidden]{display:none!important}

.canli{position:relative}

/* ---- giriş cümlesi: site kuralı 26ch, bu bölüm için 46ch daha doğru ---- */
.canli .lede{max-width:46ch}

/* ---- durum şeridi ---- */
.cm__serit{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:clamp(18px,2.4vw,30px) 0 clamp(14px,1.8vw,22px);
  padding:11px 16px;
  border:1px solid var(--line);
  background:var(--panel);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
.cm__nokta{
  width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--muted);box-shadow:0 0 0 0 transparent;
}
.cm__durum{color:var(--ink);letter-spacing:.16em}
.cm__zaman{margin-left:auto;color:var(--gold);font-variant-numeric:tabular-nums;font-size:13px}
.cm__mod{color:var(--muted-2)}

/* canlı: nokta nefes alır */
.cm__serit[data-durum="macta"] .cm__nokta{
  background:#2fd6a6;
  animation:cmNabiz 1.7s var(--ease) infinite;
}
.cm__serit[data-durum="macta"] .cm__durum{color:#7ff0cd}
.cm__serit[data-durum="mac_yok"] .cm__nokta{background:var(--gold-deep)}
.cm__serit[data-durum="bilinmiyor"] .cm__nokta{
  background:var(--gold);animation:cmNabiz 1.1s linear infinite;
}
@keyframes cmNabiz{
  0%,100%{box-shadow:0 0 0 0 rgba(47,214,166,.55);opacity:1}
  70%{box-shadow:0 0 0 9px rgba(47,214,166,0);opacity:.72}
}

/* ---- skor tahtası ---- */
.cm__skor{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,2vw,28px);
  padding:clamp(14px,2vw,22px) clamp(14px,2.4vw,30px);
  margin-bottom:clamp(18px,2.4vw,30px);
  border:1px solid var(--line);
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--teal) 12%,transparent),transparent 42%),
    linear-gradient(270deg,color-mix(in srgb,var(--crimson) 11%,transparent),transparent 42%),
    var(--panel);
  position:relative;
}
.cm__taraf{display:flex;align-items:center;gap:14px}
.cm__taraf--kirmizi{justify-content:flex-end}
.cm__tarafAd{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.cm__kill{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(34px,5.4vw,58px);line-height:1;
  font-variant-numeric:tabular-nums;
}
.cm__taraf--mavi .cm__kill{color:var(--teal)}
.cm__taraf--kirmizi .cm__kill{color:#e0604f}
.cm__orta{display:flex;flex-direction:column;align-items:center;gap:3px}
.cm__sure{
  font-family:var(--font-mono);font-size:15px;color:var(--gold);
  font-variant-numeric:tabular-nums;letter-spacing:.08em;
}
.cm__vs{
  font-family:var(--font-display);font-size:11px;letter-spacing:.3em;color:var(--muted-2);
}

/* ---- arena: 5 | VS | 5 ---- */
.cm__arena{
  display:grid;grid-template-columns:1fr 46px 1fr;gap:clamp(10px,1.4vw,20px);
  align-items:start;
}
.cm__takim{min-width:0}

.cm__takimBaslik{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:0 2px 9px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line-soft);
  margin-bottom:10px;
}
.cm__takimBaslik b{color:var(--gold);font-size:11px;letter-spacing:.1em}

.cm__liste{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}

/* ---- oyuncu kartı ---- */
.cm__kart{
  display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:stretch;
  padding:8px;
  border:1px solid var(--line-soft);
  background:var(--panel);
  transition:border-color .35s var(--ease),transform .35s var(--ease),background .35s var(--ease);
  cursor:var(--imlec-lol);
}
.cm__kart:hover{
  border-color:color-mix(in srgb,var(--gold) 42%,transparent);
  transform:translateX(3px);
}
.cm__takim:last-child .cm__kart:hover{transform:translateX(-3px)}

/* kendi kartım: altın çerçeve + hafif parıltı */
.cm__kart--ben{
  border-color:color-mix(in srgb,var(--gold) 62%,transparent);
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--gold) 9%,transparent),transparent 60%),
    var(--panel);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 20%,transparent);
}
.cm__kart--olu{opacity:.62}

/* ---- görsel ---- */
.cm__kartGorsel{
  position:relative;width:74px;height:auto;aspect-ratio:74/134;
  overflow:hidden;background:var(--void-3);
  border:1px solid var(--line-soft);
}
.cm__kartGorsel img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* yükleme ekranı görseli: yüz üstte kalsın, alt gövde kırpılsın */
  object-position:50% 14%;
  filter:saturate(.92) contrast(1.04);
}
.cm__kart--ben .cm__kartGorsel img{filter:saturate(1.06) contrast(1.06)}
.cm__kartGorsel img.cm__imgYok{opacity:0}

.cm__seviye{
  position:absolute;right:0;bottom:0;
  min-width:20px;padding:1px 4px;
  background:var(--dlg);border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:10px;color:var(--gold-hi);text-align:center;
  font-variant-numeric:tabular-nums;
}
.cm__benEtiket{
  position:absolute;left:0;top:0;
  padding:1px 5px;
  background:var(--gold);color:#0b0f14;
  font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.14em;
}
.cm__oluEtiket{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,#000 52%,transparent);
  font-family:var(--font-mono);font-size:10px;color:#ffb3a7;letter-spacing:.1em;
}

/* ---- kart alt bilgi ---- */
.cm__kartAlt{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.cm__ad{
  font-family:var(--font-editorial);font-size:15px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25;
  display:block;
}
/* #BLOD ayrı satırda: oyuncu adı ile etiket yan yana gelince çakışıyordu */
.cm__ad i{
  display:block;font-style:normal;color:var(--muted-2);
  font-family:var(--font-mono);font-size:10px;font-weight:400;
  letter-spacing:.06em;line-height:1.3;
}
.cm__sampiyon{font-size:11px;color:var(--gold);letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm__rol{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2)}

.cm__sayilar{
  display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;
  margin-top:3px;
  font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums;
}
.cm__kda{color:var(--gold-hi);letter-spacing:.03em}
.cm__cs,.cm__altin{color:var(--muted);font-size:10px}
.cm__cs::before{content:"CS ";color:var(--muted-2);font-size:8px;letter-spacing:.1em}
.cm__altin::before{content:"G ";color:var(--muted-2);font-size:8px}

/* mavi/kırmızı takım ayrımı — sol kenarda ince çizgi */
#cm-t1 .cm__kart{border-left:2px solid color-mix(in srgb,var(--teal) 46%,transparent)}
#cm-t2 .cm__kart{border-right:2px solid color-mix(in srgb,#e0604f 46%,transparent)}
#cm-t1 .cm__kart--ben{border-left-color:var(--gold)}
#cm-t2 .cm__kart--ben{border-right-color:var(--gold)}

/* ---- orta çizgi ---- */
.cm__ortaCizgi{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding-top:34px;
  font-family:var(--font-display);color:var(--muted-2);
}
.cm__ortaCizgi span{font-size:11px;letter-spacing:.14em;color:var(--muted-2)}
.cm__ortaCizgi b{
  font-size:13px;letter-spacing:.2em;color:var(--gold);
  padding:5px 3px;border:1px solid var(--line);background:var(--panel);
}
.cm__ortaCizgi i{
  width:1px;flex:1;min-height:34px;
  background:linear-gradient(180deg,transparent,var(--line),transparent);
}

/* ---- maçta değil ---- */
.cm__bos{
  padding:clamp(26px,4vw,52px) clamp(18px,3vw,44px);
  border:1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--gold) 7%,transparent),transparent 66%),
    var(--panel);
  text-align:center;
}
.cm__bosIk{
  display:flex;justify-content:center;gap:7px;margin-bottom:18px;
}
.cm__bosIk span{
  width:9px;height:9px;border:1px solid var(--gold-deep);transform:rotate(45deg);
  animation:cmBekle 2.4s var(--ease) infinite;
}
.cm__bosIk span:nth-child(2){animation-delay:.35s}
@keyframes cmBekle{
  0%,100%{opacity:.28;transform:rotate(45deg) scale(.86)}
  50%{opacity:1;transform:rotate(45deg) scale(1)}
}
.cm__bosBaslik{
  font-family:var(--font-display);font-size:clamp(19px,2.7vw,28px);
  color:var(--ink);margin:0 0 7px;letter-spacing:.03em;
}
.cm__bosAlt{font-size:13px;color:var(--muted);margin:0 0 22px}

.cm__kimlik{
  display:inline-flex;flex-direction:column;gap:0;
  min-width:min(100%,330px);text-align:left;
  border:1px solid var(--line-soft);background:var(--field);
}
.cm__kimSatir{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:8px 14px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:11px;
}
.cm__kimSatir:last-child{border-bottom:0}
.cm__kimSatir span{color:var(--muted-2);letter-spacing:.14em;text-transform:uppercase;font-size:10px}
.cm__kimSatir b{color:var(--gold-hi);font-weight:500;letter-spacing:.02em}

/* ---- responsive ---- */
@media (max-width:900px){
  .cm__arena{grid-template-columns:1fr;gap:22px}
  .cm__ortaCizgi{
    flex-direction:row;padding-top:0;justify-content:center;
  }
  .cm__ortaCizgi i{width:auto;height:1px;min-height:0;flex:1;max-width:90px;
    background:linear-gradient(90deg,transparent,var(--line),transparent)}
  #cm-t2 .cm__kart{border-right:0;border-left:2px solid color-mix(in srgb,#e0604f 46%,transparent)}
  #cm-t2 .cm__kart--ben{border-left-color:var(--gold)}
  .cm__takimBaslik{justify-content:space-between}
}
@media (max-width:640px){
  .cm__skor{grid-template-columns:1fr;gap:8px;text-align:center}
  .cm__taraf,.cm__taraf--kirmizi{justify-content:center;flex-direction:row}
  .cm__taraf--kirmizi{flex-direction:row-reverse}
  .cm__kart{grid-template-columns:62px 1fr;gap:10px}
  .cm__kartGorsel{width:62px}
  .cm__zaman{margin-left:0}
}

/* azaltılmış hareket */
@media (prefers-reduced-motion:reduce){
  .cm__nokta,.cm__bosIk span{animation:none!important}
  .cm__kart{transition:none}
  .cm__kart:hover{transform:none}
}