/* ==========================================================================
   Backcourt — temel katman: sıfırlama, tipografi, kabuk, bileşenler, hareket
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html,
body { height: 100%; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

/* Sahne arkası: iki soğuk spot ışığı + parke dokusunu andıran ince tarama. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 620px at 12% -8%, rgba(247, 167, 43, .14), transparent 62%),
    radial-gradient(1000px 700px at 92% 4%, rgba(78, 168, 245, .12), transparent 60%),
    radial-gradient(800px 800px at 50% 108%, rgba(155, 123, 247, .1), transparent 65%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 70%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px);
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .012em;
  line-height: 1.06;
  text-transform: uppercase;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--amber-2); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

input, select, textarea { font: inherit; color: inherit; }

img, canvas { display: block; max-width: 100%; }

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

::selection { background: rgba(247, 167, 43, .3); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .2); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* --- yardımcılar ---------------------------------------------------- */
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.mint { color: var(--mint); }
.rose { color: var(--rose); }
.amber { color: var(--amber); }
.sky { color: var(--sky); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: var(--s-3); }
/* `min-width: 0` ŞART, süs değil.
 *
 * `.col` çoğu ekranda bir ızgara gözü (`.grid.g-side` gibi). Izgara gözünün
 * varsayılan `min-width`i `auto`, yani "içeriğimin en dar hâlinden daha dar
 * olamam". Kadro özetindeki oyuncu satırı `white-space: nowrap` olduğu için
 * o en dar hâl uzun bir adla 397 pikseli buluyor; sütun 361 piksellik gözden
 * taşıyor ve kart telefonun sağ kenarından dışarı sarkıyor.
 *
 * `minmax(0, 1fr)` yetmiyor: o RAYI serbest bırakıyor, gözün kendisini değil.
 *
 * Ölçüldü: 393 piksel genişlikte kart 397 → 361. Belirti sinsiydi, çünkü
 * `main` taşmayı kırptığı için sayfa yatayda KAYMIYORDU — yalnızca kartın
 * sağ kenarı ve satırın sağ ucu ekran dışında kalıyordu. */
.col { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }

/* Aynı gerekçe doğrudan ızgaraya konan kartlar için. */
.grid > * { min-width: 0; }
.wrap { flex-wrap: wrap; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ==========================================================================
   Kabuk
   ========================================================================== */

#app { min-height: 100%; }

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: 'top top' 'rail main';
  height: 100dvh;
}

/* --- üst çubuk ------------------------------------------------------- */
.topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: calc(var(--topbar-h) + var(--safe-t));
  /* Yan boşluklar yatay yönde önemli: çentik ve köşe yuvarlaması içeriği
     kesiyordu. Dik yönde ikisi de sıfır, bir şey değişmiyor. */
  padding: var(--safe-t) calc(var(--s-4) + var(--safe-r)) 0 calc(var(--s-4) + var(--safe-l));
  background: linear-gradient(180deg, rgba(16, 26, 46, .92), rgba(11, 16, 32, .8));
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* --- marka kilidi ------------------------------------------------------
   İşaret bir görsel, kelime markası ise metin: her ölçekte net kalır ve
   koyu zeminde logonun lacivert yazısı gibi kaybolmaz. */
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  color: var(--text);
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(247, 167, 43, .45));
  transition: transform var(--d-mid) var(--e-spring);
}
.brand:hover .brand-mark { transform: rotate(-4deg) scale(1.06); }

.brand-word { display: grid; line-height: 1; }

.brand-word b {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .19em;
  color: var(--text);
}

.brand-word i {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .26em;
  color: var(--text-3);
  margin-top: 2px;
}

.tb-club {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.tb-club .name {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-stats {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.tb-stat { text-align: right; line-height: 1.12; }
.tb-stat b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -.01em;
}
.tb-stat i {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* --- kulüp arması ---------------------------------------------------- */
.crest {
  --c1: var(--amber);
  --c2: #1b2740;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px 8px 11px 11px;
  /* inline-grid: tablo hücrelerinde adın yanında kalır, alt satıra düşmez */
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(155deg, var(--c1), var(--c2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), var(--sh-1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  position: relative;
  overflow: hidden;
}

.crest::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(255, 255, 255, .22), transparent 52%);
}

.crest.sm { width: 22px; height: 22px; font-size: 9px; border-radius: 6px 6px 8px 8px; }
.crest.lg { width: 52px; height: 52px; font-size: 18px; border-radius: 13px 13px 18px 18px; }
.crest.xl { width: 84px; height: 84px; font-size: 30px; border-radius: 20px 20px 30px 30px; }

/* --- yan gezinme (masaüstü) ------------------------------------------- */
.rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3) var(--s-2);
  background: linear-gradient(180deg, rgba(11, 16, 32, .7), rgba(7, 10, 18, .9));
  border-right: 1px solid var(--hairline);
  overflow-y: auto;
}

.rail-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 13.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--d-fast), background var(--d-fast);
}

.rail-btn .ico { font-size: 15px; width: 18px; text-align: center; opacity: .9; }
.rail-btn:hover { color: var(--text); background: var(--surface-1); }

.rail-btn.on { color: var(--text); background: var(--surface-2); }
.rail-btn.on::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 60%;
  border-radius: 0 3px 3px 0;
  background: var(--amber);
  transform: translateY(-50%);
  box-shadow: 0 0 12px var(--amber);
  animation: rail-mark var(--d-mid) var(--e-spring);
}

.rail-btn .tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--rose);
  color: #fff;
}

.rail-sep {
  height: 1px;
  margin: var(--s-3) var(--s-3);
  background: var(--hairline);
}

.rail-spacer { flex: 1; }

/* --- ana bölge ------------------------------------------------------- */
.main {
  grid-area: main;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  padding: var(--s-5) var(--s-6) var(--s-8);
}

.view { max-width: 1180px; margin: 0 auto; }

/* --- alt sekmeler (mobil) --------------------------------------------- */
.tabbar { display: none; }

/* ==========================================================================
   Sayfa başlığı
   ========================================================================== */

.page-head {
  display: flex;
  align-items: flex-end;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--hairline);
}

.page-head h2 {
  font-size: var(--t-2xl);
  background: linear-gradient(180deg, #fff, #a9b7cf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-head .sub {
  font-size: var(--t-sm);
  color: var(--text-3);
  padding-bottom: 3px;
}

.page-head .acts { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; }

/* ==========================================================================
   Kartlar ve ızgaralar
   ========================================================================== */

.card {
  position: relative;
  background: linear-gradient(168deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-4);
  box-shadow: var(--sh-2);
}

.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  border-radius: inherit;
  pointer-events: none;
}

.card > h3 {
  font-size: var(--t-xs);
  letter-spacing: .18em;
  color: var(--text-3);
  margin-bottom: var(--s-3);
}

.card.pad-lg { padding: var(--s-5); }
.card.flush { padding: 0; overflow: hidden; }

.grid { display: grid; gap: var(--s-4); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-side { grid-template-columns: minmax(0, 1fr) 330px; }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* --- istatistik kutusu ------------------------------------------------ */
.stat-tile {
  --st-tone: var(--amber);
  position: relative;
  overflow: hidden;
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline-strong);
  background: linear-gradient(160deg, var(--surface-2), transparent);
}

/* Ton verilen kutu kendi rengini taşır: üst ışık, köşe parıltısı ve
   filigran ikon aynı tonda — «boş kutu» hissi kalmasın diye. */
.stat-tile.tone-sky { --st-tone: var(--sky, #38bdf8); }
.stat-tile.tone-mint { --st-tone: var(--mint); }
.stat-tile.tone-rose { --st-tone: var(--rose); }
.stat-tile.tone-violet { --st-tone: var(--violet); }
.stat-tile[class*="tone-"] {
  border-color: color-mix(in srgb, var(--st-tone) 22%, var(--hairline-strong));
  background:
    radial-gradient(120% 130% at 100% 100%, color-mix(in srgb, var(--st-tone) 11%, transparent), transparent 58%),
    linear-gradient(160deg, var(--surface-2), transparent);
}

/* Üst kenarda ince bir ışık çizgisi: kutu düz bir dikdörtgen olmaktan
   çıkıyor ve dört kutu yan yanayken sıra göze bir şerit gibi geliyor. */
.stat-tile::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--st-tone) 42%, transparent), transparent);
  pointer-events: none;
}

.stat-tile .k {
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--font-display);
}

.stat-tile .v {
  font-family: var(--font-mono);
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-top: 2px;
}

.stat-tile .d { font-size: var(--t-xs); color: var(--text-3); }

.stat-tile .spark {
  position: absolute;
  right: -6px;
  bottom: -6px;
  opacity: .22;
  font-size: 60px;
  line-height: 1;
  pointer-events: none;
}
.stat-tile[class*="tone-"] .spark {
  opacity: .4;
  color: var(--st-tone);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--st-tone) 45%, transparent));
}

/* ==========================================================================
   Düğmeler
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 38px;
  padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: 13.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  overflow: hidden;
  transition: transform var(--d-fast) var(--e-out), background var(--d-fast), border-color var(--d-fast), box-shadow var(--d-fast);
}

.btn:hover { background: var(--surface-3); border-color: var(--hairline-strong); }
.btn:active { transform: scale(.965); }

.btn.pri {
  background: linear-gradient(170deg, var(--amber-2), var(--amber));
  color: var(--amber-ink);
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 6px 20px -8px rgba(247, 167, 43, .85);
}
.btn.pri:hover { filter: brightness(1.07); box-shadow: 0 10px 28px -8px rgba(247, 167, 43, .95); }

.btn.ok {
  background: linear-gradient(170deg, #4fe6b4, var(--mint));
  color: #04211a;
  border-color: transparent;
  font-weight: 700;
}

.btn.danger { color: #ffa6a8; border-color: rgba(242, 85, 90, .34); background: rgba(242, 85, 90, .1); }
.btn.danger:hover { background: rgba(242, 85, 90, .18); }

.btn.ghost { background: transparent; color: var(--text-2); }
.btn.ghost:hover { color: var(--text); background: var(--surface-1); }

/* Amber çerçeveli. `pri` ile `ghost` arasındaki basamak: bu bir ana eylem
   ama sayfanın TEK ana eylemi değil. İkisi de dolgulu olsaydı hangisinin
   sayfayı ilerlettiği belirsizleşirdi — dolgu yapışkan alttaki düğmenin
   ayrıcalığı. */
.btn.out {
  color: var(--amber-2);
  border-color: rgba(247, 167, 43, .5);
  background: rgba(247, 167, 43, .08);
  font-weight: 600;
}
.btn.out:hover {
  color: var(--amber-2);
  border-color: var(--amber);
  background: rgba(247, 167, 43, .16);
}
.btn.out svg { color: var(--amber); }

.btn.sm { min-height: 29px; padding: 0 11px; font-size: 11.5px; }
.btn.xs { min-height: 25px; padding: 0 9px; font-size: 10.5px; letter-spacing: .05em; }
.btn.lg { min-height: 48px; padding: 0 var(--s-6); font-size: var(--t-lg); }
.btn.block { width: 100%; }

.btn[disabled] { opacity: .4; pointer-events: none; }

/* dalga geri bildirimi */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, .38);
  pointer-events: none;
  animation: ripple 620ms var(--e-out) forwards;
}

/* devam düğmesi: sürekli hafif nabız */
.btn.pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(247, 167, 43, .55);
  /* DÖRT TEKRAR, SONSUZ DEĞİL.
     Sonsuzdu ve ÖLÇÜLDÜ: sayfa boşta dururken saniyede 60 stil yeniden
     hesaplaması üretiyordu (sade sayfada sıfır). `box-shadow` GPU'da
     birleştirilebilen bir özellik değil, her karede yeniden boyama
     gerektiriyor — ve animasyon hiç bitmediği için bu iş kullanıcı hiçbir
     şey yapmazken de sürüyordu.
     Tarayıcıda bedeli küçük. Mağaza kabuğunun içinde büyük: Flutter,
     WebView'ın ÜRETTİĞİ HER KAREDE bütün yüzeyi bir dokuya kopyalıyor.
     Yani boşta duran bir ekran, tek bir düğme yüzünden saniyede 60 tam
     ekran kopyası çıkartıyordu.
     Görünüş değişmedi: halka aynı halka, aynı süre, aynı renk. Yalnızca
     dördüncü turdan sonra duruyor ve maliyet sıfıra iniyor. Düğme her
     yeniden çizimde baştan yaratıldığı için (bkz. shell.js → placeGo,
     `cta.replaceChildren()`) animasyon da baştan başlıyor: kullanıcı
     ekran değiştirdiğinde ya da hafta ilerlettiğinde halkayı yine
     görüyor. Dikkat çekmesi gereken an zaten o an; on saniye sonra
     ısrar etmek dikkat çekmiyor, yalnızca pil harcıyor. */
  animation: pulse-ring 2.4s var(--e-out) 4;
  pointer-events: none;
}

/* ==========================================================================
   Form öğeleri
   ========================================================================== */

/* `display` veren her sınıf tarayıcının [hidden] kuralını eziyor; giriş
   kipinde gizlenmesi gereken kullanıcı adı alanı bu yüzden görünüyordu. */
[hidden] { display: none !important; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field > label {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.input,
select.input {
  height: 42px;
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--hairline);
  color: var(--text);
  transition: border-color var(--d-fast), box-shadow var(--d-fast), background var(--d-fast);
  width: 100%;
}

.input:focus {
  outline: none;
  border-color: rgba(247, 167, 43, .6);
  box-shadow: 0 0 0 3px rgba(247, 167, 43, .14);
  background: rgba(0, 0, 0, .38);
}

.input::placeholder { color: var(--text-4); }

select.input {
  appearance: none;
  /* Ok, sabit piksel yerine dikeyde ortalanır — yüksekliği değişen
     seçicilerde (filtre çubuğu 36px, ilk beş 34px) kaymaz. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: right 17px center, right 12px center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
  cursor: pointer;
}
select.input:hover { border-color: var(--hairline-strong); }

.field .hint { font-size: var(--t-xs); color: var(--text-4); }
.field .err { font-size: var(--t-xs); color: #ff9a9c; }

/* kaydırıcı */
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  cursor: pointer;
}

input[type='range']::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--amber) var(--fill, 50%), rgba(255, 255, 255, .11) var(--fill, 50%));
}
input[type='range']::-moz-range-track {
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--amber) var(--fill, 50%), rgba(255, 255, 255, .11) var(--fill, 50%));
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--amber);
  box-shadow: var(--sh-2);
  transition: transform var(--d-fast) var(--e-spring);
}
input[type='range']::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--amber);
  box-shadow: var(--sh-2);
}
input[type='range']:active::-webkit-slider-thumb { transform: scale(1.25); }

/* renk seçici */
.swatches { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4);
  transition: transform var(--d-fast) var(--e-spring), border-color var(--d-fast);
}
.swatch:hover { transform: scale(1.14); }
.swatch.on { border-color: #fff; transform: scale(1.14); }

/* seçim grubu */
.seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--hairline);
}

.seg button {
  padding: 6px 13px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: background var(--d-fast), color var(--d-fast);
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface-3); color: var(--text); box-shadow: var(--sh-1); }

/* ==========================================================================
   Rozetler, çubuklar, tablolar
   ========================================================================== */

.pos {
  display: inline-grid;
  place-items: center;
  min-width: 27px;
  height: 19px;
  padding: 0 4px;
  border-radius: 5px;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: .05em;
  background: var(--surface-3);
  color: var(--text-2);
}
.pos.PG { background: rgba(78, 168, 245, .19); color: #8ecbff; }
.pos.SG { background: rgba(155, 123, 247, .19); color: #c1abff; }
.pos.SF { background: rgba(47, 211, 155, .17); color: #7ef0c8; }
.pos.PF { background: rgba(247, 167, 43, .18); color: var(--amber-2); }
.pos.C  { background: rgba(242, 85, 90, .17); color: #ffa1a4; }

.ovr {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
}
/* Katman dili (onaylı kanvas): 90+ altın, 82+ gümüş, 74+ bronz. */
.ovr.t-elite { color: #ffd479; text-shadow: 0 0 14px rgba(247, 167, 43, .55); }
.ovr.t-star { color: #dbe6f5; }
.ovr.t-good { color: #d99a5e; }
.ovr.t-avg { color: var(--text-2); }
.ovr.t-low { color: var(--text-3); }

/* Metal OVR sayıları — rozet dışında düz sayı basan yerler için. */
.ovm-gold { color: #ffd479; text-shadow: 0 0 12px rgba(247, 167, 43, .5); }
.ovm-silver { color: #dbe6f5; }
.ovm-bronze { color: #d99a5e; }

/* Katman satır çerçeveleri denendi ve GERİ ALINDI: her satır çerçeveli
   olunca liste gürültüye dönüyordu. Katman dili OVR renklerinde yaşıyor. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  letter-spacing: .03em;
  background: var(--surface-2);
  color: var(--text-2);
  white-space: nowrap;
}
.chip.hurt { background: rgba(242, 85, 90, .16); color: #ff9a9c; }
.chip.fresh { background: rgba(47, 211, 155, .15); color: #7ef0c8; }
.chip.warn { background: rgba(247, 167, 43, .15); color: var(--amber-2); }

/* Keşif kartı ve maç planı (önizleme + kulüp inceleme). */
.sc-card { margin-top: 10px; }
.sc-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.sc-row .eyebrow { min-width: 86px; }
.sc-tip { margin-top: 10px; font-size: 12.5px; color: var(--amber-2); }
.sc-more { margin-top: 8px; font-size: 11.5px; }
.gp-card { margin-top: 10px; }
.gp-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.gp-row .eyebrow { min-width: 86px; }
.gp-row .seg button { font-size: 12px; padding: 5px 10px; }
/* Harika çocuk — kalıcı bir nitelik olduğu için morumsu, diğerlerinden ayrı. */
.chip.wonder {
  background: linear-gradient(120deg, rgba(167, 120, 255, .22), rgba(97, 168, 255, .18));
  color: #cbb4ff;
  border: 1px solid rgba(167, 120, 255, .35);
}
/* Altyapı incisi — tavanı yüksek ama harika çocuk değil: ayrı ve daha sakin. */
.chip.gem {
  background: linear-gradient(120deg, rgba(47, 211, 155, .2), rgba(97, 168, 255, .16));
  color: #8fe8cd;
  border: 1px solid rgba(47, 211, 155, .32);
}
.chip.info { background: rgba(78, 168, 245, .15); color: #8ecbff; }

.bar {
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amber), var(--amber-2));
  width: 0;
  transition: width var(--d-slow) var(--e-out);
}
.bar.mint > i { background: linear-gradient(90deg, #24b686, var(--mint)); }
.bar.rose > i { background: linear-gradient(90deg, #c93b40, var(--rose)); }
.bar.sky > i { background: linear-gradient(90deg, #2f7fc4, var(--sky)); }

/* --- tablo ----------------------------------------------------------- */
.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
}

table { width: 100%; border-collapse: collapse; }

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
  padding: 9px 8px;
  white-space: nowrap;
  background: #0d1424;
  border-bottom: 1px solid var(--hairline);
}

thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--text); }
thead th .arrow { color: var(--amber); }

tbody td {
  padding: 7px 8px;
  font-size: 13px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
}

th.num, td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

tbody tr { transition: background var(--d-fast); }
tbody tr:hover td { background: var(--surface-1); }
tbody tr.me td { background: rgba(247, 167, 43, .08); }
tbody tr.me:hover td { background: rgba(247, 167, 43, .13); }
tbody tr.clickable { cursor: pointer; }

/* ==========================================================================
   Katmanlar: modal, toast, ipucu
   ========================================================================== */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  background: rgba(4, 7, 14, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fade-in var(--d-mid) var(--e-out);
}

.modal {
  width: min(560px, 100%);
  max-height: 86dvh;
  overflow-y: auto;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, #16203a, #0c1220);
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--sh-4);
  animation: modal-in var(--d-slow) var(--e-spring);
}

.modal.wide { width: min(880px, 100%); }
.modal h3 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.modal .body { color: var(--text-2); font-size: 13.5px; }
.modal .acts { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-5); flex-wrap: wrap; }

.toasts {
  position: fixed;
  z-index: 95;
  left: 50%;
  bottom: calc(var(--s-5) + var(--safe-b));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  pointer-events: none;
  width: min(420px, calc(100vw - 32px));
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 11px var(--s-4);
  border-radius: var(--r-md);
  background: rgba(20, 30, 52, .96);
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--sh-3);
  font-size: 13.5px;
  animation: toast-in var(--d-slow) var(--e-spring);
}

.toast.out { animation: toast-out var(--d-mid) var(--e-in-out) forwards; }
.toast .ico { font-size: 16px; }
.toast.ok { border-left: 3px solid var(--mint); }
.toast.bad { border-left: 3px solid var(--rose); }
.toast.info { border-left: 3px solid var(--amber); }

/* --- yükleme perdesi -------------------------------------------------- */
.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  gap: var(--s-4);
  background: var(--bg-0);
  transition: opacity var(--d-slow) var(--e-out), visibility var(--d-slow);
}
.boot.gone { opacity: 0; visibility: hidden; }
.boot .inner { display: grid; justify-items: center; gap: var(--s-4); }

.boot img {
  width: 88px;
  height: 88px;
  animation: boot-float 2.4s var(--e-in-out) infinite;
  filter: drop-shadow(0 0 34px rgba(247, 167, 43, .5));
}

.boot .txt {
  font-family: var(--font-display);
  letter-spacing: .34em;
  color: var(--text-3);
  font-size: var(--t-sm);
  text-transform: uppercase;
}

.boot .load {
  width: 148px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.boot .load i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  animation: boot-sweep 1.15s var(--e-in-out) infinite;
}

@keyframes boot-float {
  0%, 100% { transform: translateY(-5px); }
  50% { transform: translateY(5px); }
}

@keyframes boot-sweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(320%); }
}

/* --- iskelet ---------------------------------------------------------- */
.skel {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-1) 25%, var(--surface-2) 37%, var(--surface-1) 63%);
  background-size: 300% 100%;
  animation: shimmer 1.5s linear infinite;
}

/* ==========================================================================
   Hareket
   ========================================================================== */

@keyframes fade-in { from { opacity: 0; } }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(-8px) scale(.96); }
}

@keyframes ripple {
  to { transform: scale(3.2); opacity: 0; }
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(247, 167, 43, .5); }
  70% { box-shadow: 0 0 0 12px rgba(247, 167, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(247, 167, 43, 0); }
}

@keyframes rail-mark {
  from { height: 0; opacity: 0; }
}

@keyframes shimmer {
  to { background-position: -300% 0; }
}

@keyframes ball-spin {
  to { transform: rotate(360deg); }
}

@keyframes dribble {
  0%, 100% { transform: translateY(-26px) scaleY(1); }
  45% { transform: translateY(0) scaleY(1); }
  52% { transform: translateY(4px) scale(1.14, .82); }
  60% { transform: translateY(0) scaleY(1); }
}

/* sayfa girişi: içerik alttan yükselir, kartlar sırayla belirir */
.enter { animation: view-in var(--d-slow) var(--e-out) both; }

@keyframes view-in {
  from { opacity: 0; transform: translateY(14px); }
}

.stagger > * { animation: stagger-in var(--d-slow) var(--e-out) both; }
.stagger > *:nth-child(1) { animation-delay: 20ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 140ms; }
.stagger > *:nth-child(5) { animation-delay: 180ms; }
.stagger > *:nth-child(6) { animation-delay: 220ms; }
.stagger > *:nth-child(7) { animation-delay: 260ms; }
.stagger > *:nth-child(8) { animation-delay: 300ms; }

@keyframes stagger-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
}

/* değeri değişen sayının kısa vurgusu */
.flash-up { animation: flash-up 700ms var(--e-out); }
.flash-down { animation: flash-down 700ms var(--e-out); }

@keyframes flash-up {
  0% { color: var(--mint); transform: translateY(-3px); }
  100% { color: inherit; transform: none; }
}
@keyframes flash-down {
  0% { color: var(--rose); transform: translateY(3px); }
  100% { color: inherit; transform: none; }
}

/* ==========================================================================
   Duyarlı düzen
   ========================================================================== */

@media (max-width: 1080px) {
  .g-side { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root { --rail-w: 62px; }
  .rail-btn { justify-content: center; padding: 12px 0; }
  .rail-btn span:not(.ico) { display: none; }
  .rail-btn .tag { display: none; }
}

@media (max-width: 720px) {
  :root { --topbar-h: 52px; }

  .shell {
    grid-template-columns: 1fr;
    grid-template-areas: 'top' 'main';
    height: 100dvh;
  }

  .rail { display: none; }

  .main {
    padding: var(--s-4) var(--s-4) calc(var(--tabbar-h) + var(--safe-b) + var(--s-6));
  }

  .g2, .g3, .g4 { grid-template-columns: 1fr; }

  .page-head { flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
  .page-head h2 { font-size: var(--t-xl); }
  .page-head .acts { width: 100%; }

  .brand-word { display: none; }
  .tb-stats { gap: var(--s-3); }
  .tb-stat i { display: none; }

  /* --- alt sekme çubuğu ---------------------------------------------- */
  .tabbar {
    position: fixed;
    z-index: 45;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: calc(var(--tabbar-h) + var(--safe-b));
    padding-bottom: var(--safe-b);
    background: rgba(10, 15, 28, .92);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-top: 1px solid var(--hairline);
  }

  .tab {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    min-width: 0;
    padding: 0 2px;
    color: var(--text-3);
    font-family: var(--font-display);
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: color var(--d-fast);
  }

  /* Etiketler asla komşu sekmeye taşmaz. */
  .tab > span:not(.ico) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tab .ico { font-size: 19px; transition: transform var(--d-mid) var(--e-spring); }
  .tab.on { color: var(--amber); }
  .tab.on .ico { transform: translateY(-2px) scale(1.12); }

  .tab.on::after {
    content: '';
    position: absolute;
    top: 4px;
    width: 24px;
    height: 3px;
    border-radius: 99px;
    background: var(--amber);
    box-shadow: 0 0 12px var(--amber);
    animation: tab-mark var(--d-mid) var(--e-spring);
  }

  .tab .tag {
    position: absolute;
    top: 6px;
    right: 22%;
    min-width: 15px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--rose);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 15px;
  }

  @keyframes tab-mark { from { width: 0; opacity: 0; } }

  /* --- "Daha" alt sayfası ---------------------------------------------
     Karartma şart: sayfayı açıp vazgeçen kullanıcı dışarı dokunarak
     kapatabilmeli. Tutamaç, kapat düğmesi ve ESC de aynı işi yapar. */
  .sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: 46;
    display: flex;
    align-items: flex-end;
    background: rgba(4, 7, 14, .6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: fade-in var(--d-fast) var(--e-out);
  }
  .sheet-scrim.out { animation: fade-in var(--d-fast) reverse; }

  .tab-more-sheet {
    width: 100%;
    padding: 6px var(--s-4) calc(var(--s-4) + var(--safe-b));
    border-radius: 20px 20px 0 0;
    background: rgba(12, 18, 34, .98);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--hairline-strong);
    box-shadow: 0 -22px 50px -14px rgba(0, 0, 0, .8);
    animation: sheet-in var(--d-slow) var(--e-out);
    transition: transform var(--d-mid) var(--e-out);
  }
  .sheet-scrim.out .tab-more-sheet { animation: sheet-in var(--d-fast) reverse; }

  @keyframes sheet-in { from { transform: translateY(100%); opacity: 0; } }

  /* Sürükleme tutamacı — görünen çubuktan daha geniş bir dokunma alanı. */
  .sheet-grab {
    display: block;
    position: relative;
    width: 72px;
    height: 24px;
    margin: 0 auto;
    touch-action: none;
  }
  .sheet-grab::after {
    content: '';
    position: absolute;
    inset: 10px 17px;
    border-radius: 99px;
    background: var(--hairline-strong);
  }

  .sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-3);
  }

  .sheet-x {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-right: -6px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 16px;
  }

  .sheet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-2);
  }

  .sheet-grid button {
    padding: var(--s-3) var(--s-2);
    border-radius: var(--r-sm);
    background: var(--surface-1);
    display: grid;
    place-items: center;
    gap: 4px;
    min-height: 72px;
    font-family: var(--font-display);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-2);
  }
  .sheet-grid button .ico { font-size: 18px; }
  .sheet-grid button.on { background: var(--surface-3); color: var(--amber); }

  /* mobilde tablolar biraz daralır */
  tbody td { padding: 8px 6px; font-size: 12.5px; }
  thead th { padding: 8px 6px; font-size: 9px; }

  .modal { padding: var(--s-4); border-radius: var(--r-md); }
  .card { padding: var(--s-3); }
}

@media (max-width: 400px) {
  .tb-stats { gap: 10px; }
  .tb-stat b { font-size: 12.5px; }
}

/* Kaba işaretçide dokunma hedefi tabanı mobile.css'te — tek yerden yönetiliyor. */

/* ==========================================================================
   İkonlar
   Hepsi satır içi SVG ve `1em` boyutunda — kapsayıcının yazı tipi boyutuyla
   ölçeklenir, rengini `currentColor` üzerinden alır.
   ========================================================================== */

.ic {
  display: inline-block;
  vertical-align: -0.14em;
  flex: none;
  overflow: visible;
}

/* Metnin yanındaki ikonlar biraz küçülür ki satır yüksekliğini bozmasın. */
.chip .ic,
.btn .ic { font-size: .95em; }

.chip .ic { vertical-align: -0.16em; }

.ic-inline { font-size: 1.05em; color: var(--amber); }

.ic-lg {
  display: inline-block;
  font-size: 34px;
  color: var(--text-4);
  line-height: 1;
}

/* Gezinme ikonları metinden bağımsız ölçeklenir. */
.rail-btn .ico,
.tab .ico,
.tab-more-sheet .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.rail-btn .ico { font-size: 18px; width: 20px; }
.tab .ico { font-size: 21px; }
.tab-more-sheet .ico { font-size: 19px; }

/* Kutu köşesindeki dev süsleme ikonu. */
.stat-tile .spark {
  font-size: 62px;
  line-height: 0;
  color: var(--amber);
}

/* Antrenman odak kartları */
.focus-card .ic { font-size: 22px; color: var(--text-2); }
.focus-card.on .ic { color: var(--amber); }

/* Kupa — kutlama ekranlarında altın gradyan ve ışıma */
.trophy {
  display: inline-block;
  font-size: 66px;
  line-height: 1;
  color: var(--amber);
  filter: drop-shadow(0 0 26px rgba(247, 167, 43, .55));
}
.trophy .ic { stroke-width: 1.4; }

/* Boş durum bloğu */
.empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 36px 16px;
  color: var(--text-3);
  text-align: center;
}
.empty-state .ic-lg { opacity: .55; }

/* ==========================================================================
   Açılır liste (combobox)
   `<datalist>` yerine geçer — bkz. js/ui/combo.js
   ========================================================================== */

.combo { position: relative; display: block; }

.combo > .input { padding-right: 38px; }

.combo-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--text-3);
  font-size: 18px;
  transition: color var(--d-fast), background var(--d-fast);
}
.combo-toggle:hover { color: var(--text); background: var(--surface-2); }
.combo-toggle .ic { transition: transform var(--d-mid) var(--e-out); }
.combo.open .combo-toggle { color: var(--amber); }
.combo.open .combo-toggle .ic { transform: rotate(180deg); }

.combo-pop {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 244px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px;
  display: none;
  border-radius: var(--r-sm);
  background: #101a2e;
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--sh-3);
}

.combo.open .combo-pop {
  display: block;
  animation: combo-in var(--d-fast) var(--e-out);
}

@keyframes combo-in {
  from { opacity: 0; transform: translateY(-5px); }
}

.combo-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border-radius: var(--r-xs);
  font-size: 13.5px;
  color: var(--text-2);
  transition: background var(--d-fast), color var(--d-fast);
}

.combo-opt:hover,
.combo-opt.active { background: var(--surface-2); color: var(--text); }

.combo-opt.on {
  color: var(--amber);
  font-weight: 600;
}
.combo-opt.on::after { content: ' ✓'; }

.combo-empty {
  padding: 11px;
  font-size: 12.5px;
  color: var(--text-4);
  text-align: center;
}

@media (pointer: coarse) {
  .combo-opt { padding: 12px 11px; }
  .combo-pop { max-height: 46dvh; }
}

/* Alan altındaki açıklama satırı — küçük ama okunur, ikonla ayrışıyor. */
.hint-line {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--hairline);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
}
.hint-line .ic { flex: none; margin-top: 1px; color: var(--amber); font-size: 14px; }

/* ==========================================================================
   HAFİF EFEKT KİPİ  (`?fx=lite`)

   NE İŞE YARIYOR: Android'deki takılmanın sebebini gerçek cihazda
   ölçebilmek. Kapsayıcıda yapılan ölçüm bu soruyu cevaplayamıyor, çünkü
   orada ekran kartı yok ve `backdrop-filter` bir EKRAN KARTI işi.

   NEYİ KAPATIYOR: yalnızca bulanıklığı. Renk, yerleşim, kenarlık, gölge
   ve animasyonların tamamı yerinde kalıyor — cam efektinin yerine biraz
   daha koyu, düz bir zemin geçiyor. Yan yana bakınca fark görülüyor ama
   ekran "başka bir ekran" olmuyor.

   NEDEN BULANIKLIK ŞÜPHELİ: `.topbar`, `.tabbar` ve `.cta-bar` sabit
   duruyor ve altlarından içerik kayıyor. Her kaydırma karesinde arkalarındaki
   alanın yeniden bulanıklaştırılması gerekiyor. Maç ekranında ise
   `.oncourt .p` (on oyuncu çipi) ve `.court-badge` canvas'ın üstünde,
   yani zaten her kare değişen bir yüzeyin üstünde bulanıklaşıyor.

   KALICI DEĞİL: ölçüm bittiğinde ya bu blok silinecek ya da tersine
   çevrilip varsayılan hâline gelecek. Karar cihazdaki sayıya ait.
   ========================================================================== */
:root[data-fx="lite"] .topbar,
:root[data-fx="lite"] .tabbar,
:root[data-fx="lite"] .cta-bar,
:root[data-fx="lite"] .wiz-bar,
:root[data-fx="lite"] .wiz-foot,
:root[data-fx="lite"] .tab-more-sheet,
:root[data-fx="lite"] .scrim,
:root[data-fx="lite"] .sheet-scrim,
:root[data-fx="lite"] .court-badge,
:root[data-fx="lite"] .oncourt .p,
:root[data-fx="lite"] .drill-hud .box,
:root[data-fx="lite"] .drill-overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ZEMİN YEDEĞİ — yalnızca gerekli olan yerlerde.
   Ölçtük: çubukların çoğu zaten %92-98 opak, yani bulanıklık görsel olarak
   neredeyse hiçbir şey katmıyor ama bedelini her karede ödetiyor. O yüzden
   burada renk değiştirmiyoruz — SADECE saydamlığı yüksek olan üç yerde
   birkaç puan koyulaştırıyoruz ki metin arkasındaki içerikten ayrışsın.

   Renk değerleri kaynaklarıyla AYNI aileden, elle uydurulmadı:
     .topbar    rgba(16,26,46,.92) → rgba(11,16,32,.80)   alt durak .92'ye
     .wiz-bar   rgba(11,16,32,.80) → .93                  (.wiz-foot ile aynı)
     .scrim     rgba(4,7,14,.72)   → .82
     .sheet-scrim rgba(4,7,14,.60) → .72 */
:root[data-fx="lite"] .topbar {
  background: linear-gradient(180deg, rgba(16, 26, 46, .96), rgba(11, 16, 32, .92));
}
:root[data-fx="lite"] .wiz-bar { background: rgba(11, 16, 32, .93); }
:root[data-fx="lite"] .scrim { background: rgba(4, 7, 14, .82); }
:root[data-fx="lite"] .sheet-scrim { background: rgba(4, 7, 14, .72); }

/* Oyuncu avatarı — kimlikten üretilen vektör portre (ui/avatar.js). */
.ava { vertical-align: middle; border-radius: 30%; background: var(--surface-2);
       flex: 0 0 auto; margin-right: 6px; }
.pc-head .ava { border-radius: 14px; background: rgba(255,255,255,.05); }

/* Nitelik radarı (ui/parts.js → attrRadar). */
.radar-wrap { display: flex; justify-content: center; margin: 4px 0 10px; }
.radar .rd-ring { fill: none; stroke: rgba(255,255,255,.09); }
.radar .rd-axis { stroke: rgba(255,255,255,.06); }
.radar .rd-fill { fill: rgba(247,167,43,.22); }
.radar .rd-line { fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linejoin: round; }
.radar .rd-lb { fill: var(--text-3); font-size: 9.5px; letter-spacing: .05em; }

/* Kupa dolabı (kariyer ekranı). */
.shelf { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
         padding: 12px 10px 10px; border-bottom: 3px solid rgba(247,167,43,.35);
         background: linear-gradient(rgba(255,255,255,.02), rgba(0,0,0,.14)); border-radius: 8px; }
.shelf.empty { min-height: 62px; align-items: center; justify-content: center; font-size: 12.5px; }
.shelf .cup { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.shelf .cup .mono { font-size: 11px; color: var(--text-3); }

/* Arma desen varyantları (parts.js → crestVar) ve forma. */
.crest { position: relative; overflow: hidden; }
.crest::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.crest.cv1::after { background: linear-gradient(135deg, transparent 44%, var(--c2) 44%, var(--c2) 58%, transparent 58%); opacity: .5; }
.crest.cv2::after { background: linear-gradient(transparent 68%, var(--c2) 68%); opacity: .55; }
.crest.cv3::after { border: 2px solid var(--c2); border-radius: inherit; inset: 4px; opacity: .5; }
.club-band .cb-jersey { position: absolute; right: 116px; top: 50%; width: 58px; height: 68px;
  transform: translateY(-50%) rotate(-6deg); opacity: .5; }

/* --------------------------------------------------------------------------
   Genel sıralama — ilk üç sıra podyumda. Altın ortada ve yüksekte, gümüş
   solda, bronz sağda; madalya rengi ve parlama sıradan geliyor.
   -------------------------------------------------------------------------- */
.lb-podium { display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: 10px;
  align-items: end; padding: 26px 12px 14px; }
.lb-pod { position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 3px; text-align: center; padding: 26px 8px 13px; border-radius: 14px;
  border: 1px solid var(--hairline); min-width: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)); }
.lb-pod.g1 { padding-top: 32px; padding-bottom: 24px;
  border-color: rgba(255, 199, 102, .55);
  background: linear-gradient(180deg, rgba(247, 167, 43, .17), rgba(247, 167, 43, .03));
  box-shadow: 0 0 28px rgba(247, 167, 43, .14); }
.lb-pod.g2 { border-color: rgba(190, 200, 215, .42);
  background: linear-gradient(180deg, rgba(190, 200, 215, .11), rgba(190, 200, 215, .02)); }
.lb-pod.g3 { border-color: rgba(205, 127, 50, .48);
  background: linear-gradient(180deg, rgba(205, 127, 50, .13), rgba(205, 127, 50, .02)); }
.lb-medal { position: absolute; top: -15px; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 14px/1 var(--font-mono); color: #17130a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .45); }
.lb-medal.m1 { width: 40px; height: 40px; top: -20px;
  background: radial-gradient(circle at 32% 28%, #ffe9ad, #f7a72b 62%, #a8690f); }
.lb-medal.m1 svg { width: 19px; height: 19px; }
.lb-medal.m2 { background: radial-gradient(circle at 32% 28%, #f2f6fb, #b9c2d0 62%, #7d8798); }
.lb-medal.m3 { background: radial-gradient(circle at 32% 28%, #f3c9a2, #cd7f32 62%, #7e4712); }
.lb-rank { font: 700 10px/1 var(--font-mono); letter-spacing: .14em;
  color: var(--text-3); margin-top: 2px; }
.lb-pod.g1 .lb-rank { color: var(--amber-2); }
.lb-name { font-size: 13.5px; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.lb-pod.g1 .lb-name { font-size: 15px; }
.lb-club { font-size: 10.5px; color: var(--text-3); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-cups { display: flex; align-items: center; gap: 5px; margin-top: 6px;
  color: var(--amber); font-size: 19px; }
.lb-pod.g1 .lb-cups { font-size: 24px; }
.lb-cups svg { width: 15px; height: 15px; }
.lb-pod.g1 .lb-cups svg { width: 18px; height: 18px; }
.lb-prs { font: 500 10px/1.3 var(--font-mono); color: var(--text-4, var(--text-3));
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------------------------
   Üst çubuk kasa parlayışı: değer değişince tek seferlik renk vurgusu —
   artışta nane, azalışta gül. Sınıfı JS ekliyor (shell.js → paintTop),
   sonraki boyamada içerik yenilendiği için kendiliğinden düşüyor.
   -------------------------------------------------------------------------- */
.tb-stat b.tick-up { animation: cash-tick-up 900ms ease-out; }
.tb-stat b.tick-down { animation: cash-tick-down 900ms ease-out; }

@keyframes cash-tick-up {
  0% { color: var(--mint); text-shadow: 0 0 16px rgba(74, 222, 160, .55); transform: translateY(-1px); }
  100% { color: inherit; text-shadow: none; transform: none; }
}

@keyframes cash-tick-down {
  0% { color: var(--rose); text-shadow: 0 0 16px rgba(242, 85, 90, .5); transform: translateY(1px); }
  100% { color: inherit; text-shadow: none; transform: none; }
}

/* --- görev zinciri (kulüp ekranı) ---------------------------------------- */
.quest-list { display: grid; gap: 8px; }
.quest {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--hairline);
  border-radius: 10px; background: var(--surface-1);
}
.quest .q-dot {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-2);
  font-size: 13px; color: var(--text-3);
}
.quest.is-done { border-color: rgba(247, 167, 43, .45); }
.quest.is-done .q-dot { color: var(--amber); background: rgba(247, 167, 43, .12); }
.quest.is-claimed { opacity: .55; }
.quest.is-claimed .q-dot { color: var(--mint); background: rgba(47, 211, 155, .12); }
.quest .q-txt { flex: 1; min-width: 0; }
.quest .q-name { font-size: 13px; font-weight: 600; }
.quest .q-reward { font-size: 11px; color: var(--text-3); }

/* --- takım maskotları ----------------------------------------------------- */
/* Büyük armalarda maskot logo üstte, kısa kod altta küçük — kimliğin iki
   yarısı. Küçük armalar (tablolar) koda sadık kalıyor: 22 pikselde glif
   seçilmiyor. */
.crest.has-mascot { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
.crest .mglyph { width: 60%; height: 60%; margin-top: 2%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.crest .mcode { font-style: normal; font-size: .44em; letter-spacing: .1em; line-height: 1; margin-top: 4%; opacity: .92; }

/* Kulüp bandındaki büyük maskot: süs, yazının sağında, forma arkasında. */
.club-band .cb-mascot {
  position: absolute;
  right: 196px;
  top: 50%;
  width: 78px;
  height: 78px;
  transform: translateY(-50%) rotate(-8deg);
  color: #fff;
  opacity: .5;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .4));
}
.club-band .cb-mascot path { fill: currentColor; }
.club-band .cb-mascot path[fill='none'] { fill: none !important; stroke: currentColor; }

/* Sihirbazdaki maskot seçici. */
.mascot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
.mascot-pick {
  aspect-ratio: 1;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: linear-gradient(155deg, var(--c1, var(--amber)), var(--c2, #1b2740));
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mascot-pick .mglyph { width: 62%; height: 62%; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.mascot-pick:hover { transform: translateY(-1px); }
.mascot-pick.on { outline: 2px solid var(--amber); outline-offset: 2px; box-shadow: var(--sh-1); }

/* Sihirbaz — hazır kadrolar (üç harfli gerçek kadro kodları). */
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.preset-chip {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 10px 6px 8px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: linear-gradient(180deg, rgb(255 255 255 / 3%), rgb(255 255 255 / 0%));
  color: var(--text-2);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  animation: stagger-in .3s ease both;
}
.preset-chip b { font-size: 17px; letter-spacing: .14em; color: var(--text-1); }
.preset-chip span { font-size: 10.5px; color: var(--text-4); }
.preset-chip:hover { transform: translateY(-1px); border-color: rgb(247 167 43 / 45%); }
.preset-chip.on {
  border-color: var(--amber);
  background: linear-gradient(180deg, rgb(247 167 43 / 16%), rgb(247 167 43 / 4%));
  box-shadow: var(--sh-1);
}
.preset-chip.on b { color: var(--amber); }

/* Sakat oyuncu işareti: yuvarlak içinde artı (tıbbi rozet). */
.med-dot {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-right: 2px;
  border-radius: 50%;
  background: var(--rose);
  color: #fff;
  font-style: normal;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  vertical-align: -2px;
  box-shadow: 0 0 0 1.5px var(--bg-0);
}

/* --- "Sıradaki maç" VS afişi ----------------------------------------------
   Kullanıcının mockup'ı: karanlık arena, iki yandan takım renkli ışık,
   parlayan çerçeveli panel, saha + pota, grafiti doku. Tamamı vektör. */
.vs-hero {
  --hc: var(--amber);
  --ac: #3b82f6;
  position: relative;
  margin-bottom: 16px;
  padding: 18px 12px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(90% 70% at 0% 20%, color-mix(in srgb, var(--hc) 26%, transparent), transparent 62%),
    radial-gradient(90% 70% at 100% 20%, color-mix(in srgb, var(--ac) 26%, transparent), transparent 62%),
    linear-gradient(180deg, #05070f, #090d1a 70%, #05070f);
}
.vs-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.vs-beam {
  position: absolute;
  top: -30px;
  width: 46%;
  height: 150px;
  filter: blur(2px);
  opacity: .5;
  animation: vs-flicker 3.6s ease-in-out infinite alternate;
}
.vs-beam.l {
  left: -6%;
  transform: skewX(24deg);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--hc) 60%, #fff) 0 10px, transparent 10px 26px);
  mask-image: linear-gradient(180deg, #000, transparent 80%);
}
.vs-beam.r {
  right: -6%;
  transform: skewX(-24deg);
  animation-delay: 1.4s;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ac) 60%, #fff) 0 10px, transparent 10px 26px);
  mask-image: linear-gradient(180deg, #000, transparent 80%);
}
@keyframes vs-flicker { from { opacity: .28; } to { opacity: .6; } }
.vs-graffiti {
  position: absolute;
  right: -6px;
  top: 6px;
  transform: rotate(-9deg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .05);
  -webkit-text-stroke: 1px rgba(255, 255, 255, .07);
  user-select: none;
}

.vs-head2 { position: relative; text-align: center; margin-bottom: 12px; }
.vs-head2 .vs-kicker {
  color: var(--amber-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.vs-head2 .vs-big {
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff, #b9c4da 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 6px 22px rgba(0, 0, 0, .55);
}
.vs-head2 .vs-sub {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.vs-head2 .vs-sub svg { width: 14px; height: 14px; opacity: .8; }

.vs-panel {
  position: relative;
  border-radius: 18px;
  padding: 1px;
  overflow: hidden;
  /* Parlayan çerçeve: soldan ev sahibi, sağdan deplasman rengi. */
  background: linear-gradient(90deg, var(--hc), rgba(255, 255, 255, .18) 50%, var(--ac));
  box-shadow:
    0 0 24px color-mix(in srgb, var(--hc) 34%, transparent),
    0 0 24px color-mix(in srgb, var(--ac) 34%, transparent);
}
.vs-court {
  position: absolute;
  inset: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: 17px;
}
.vs-cols {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 17px;
  overflow: hidden;
  background:
    radial-gradient(80% 90% at 12% 30%, color-mix(in srgb, var(--hc) 22%, transparent), transparent 60%),
    radial-gradient(80% 90% at 88% 30%, color-mix(in srgb, var(--ac) 22%, transparent), transparent 60%),
    linear-gradient(180deg, #0a0f1e, #060a16);
}
.vs-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 8px 18px;
  cursor: pointer;
}
.vs-team .vs-mascot {
  width: 62px;
  height: 62px;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
}
.vs-team .vs-city {
  color: var(--tc);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vs-team .vs-nick {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.05;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vs-team .vs-rec { margin-top: 3px; color: var(--tc); font-size: 12px; letter-spacing: .3em; }
.vs-mark {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) rotate(-6deg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 46px;
  font-style: italic;
  letter-spacing: .02em;
  color: #fff;
  text-shadow:
    0 0 18px rgba(255, 255, 255, .35),
    3px 3px 0 rgba(0, 0, 0, .5),
    0 6px 22px rgba(0, 0, 0, .8);
  pointer-events: none;
}
/* Panelden geçen ışık süpürmesi — "canlı afiş" hissi. */
.vs-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46px;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), transparent);
  animation: vs-sweep 5.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vs-sweep {
  0%, 55% { left: -20%; }
  85%, 100% { left: 115%; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-beam, .vs-sweep { animation: none; }
}

/* Hero'nun altındaki keşif şeridi: gönder düğmesi / geri sayım / raporu aç. */
.vs-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 14px 14px;
  position: relative;
  z-index: 1;
}
/* Afişin altındaki tek eylem — maç afişiyle aynı sahnede durduğu için
   sıradan düğme kayboluyordu: hap biçimli, büyük harfli, ışımalı. */
.vs-actions .btn.vs-scout-cta {
  min-height: 44px;
  padding: 0 26px;
  border-radius: 99px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.vs-actions .btn.pri.vs-scout-cta {
  box-shadow: 0 10px 30px -8px rgba(247, 167, 43, .95);
}
.vs-actions .btn.ok.vs-scout-cta {
  box-shadow: 0 10px 30px -8px rgba(47, 211, 155, .85);
}
/* Nabız halkası kehribar doğuyor; rapor düğmesi naneyle atsın. */
.btn.ok.pulse::after { animation-name: pulse-ring-mint; }
@keyframes pulse-ring-mint {
  0% { box-shadow: 0 0 0 0 rgba(47, 211, 155, .5); }
  70% { box-shadow: 0 0 0 12px rgba(47, 211, 155, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 211, 155, 0); }
}
.vs-scoutwait {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-2);
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 99px;
  background: rgba(255, 255, 255, .045);
}
.vs-scoutwait b { color: var(--amber-2, #ffc766); }

.vs-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0 10px;
}
.vs-tile {
  padding: 9px 8px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(10, 15, 30, .82);
  text-align: center;
}
.vs-tile .ic { display: inline-block; color: color-mix(in srgb, var(--hc) 70%, #fff); }
.vs-tile .ic.vio { color: #a78bfa; }
.vs-tile .ic.gold { color: var(--amber-2); }
.vs-tile .ic svg { width: 20px; height: 20px; }
.vs-tile .k {
  margin-top: 2px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.vs-tile .v {
  margin-top: 2px;
  font-weight: 700;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vs-prep {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  color: #201403;
  background: linear-gradient(180deg, #ffcf70, var(--amber));
  box-shadow: 0 6px 18px rgba(247, 167, 43, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.vs-prep .ic svg { width: 26px; height: 26px; }
.vs-prep .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vs-prep .txt b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.vs-prep .txt small { font-size: 11.5px; opacity: .78; }
.vs-prep .arr { font-size: 18px; font-weight: 700; }

/* ==========================================================================
   Online lig ekranı
   ========================================================================== */

.ol-hero { text-align: center; }
.ol-hero .vs-big { letter-spacing: .02em; }
.ol-points {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 14px 14px 16px;
  text-align: left;
}
.ol-point {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  font-size: 12.5px;
  font-weight: 600;
}
.ol-point .ico { width: 17px; height: 17px; opacity: .85; flex: none; }
.ol-note {
  position: relative;
  margin: 0 14px 14px;
  font-size: 11.5px;
  opacity: .75;
}

/* Lobi koltukları */
.ol-seats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.ol-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface-2);
  text-align: center;
}
.ol-seat .nm { font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.ol-seat .mg { font-size: 10.5px; color: var(--text-3); }
.ol-seat.empty { border-style: dashed; opacity: .55; justify-content: center; min-height: 96px; }
.ol-seat.empty .ph .ico { width: 26px; height: 26px; opacity: .5; }

/* Aday tahtası */
.ol-board { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ol-wish {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 12.5px;
}
.ol-wish .ord { color: var(--amber); min-width: 18px; text-align: center; }
.ol-wish .nm, .ol-p .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ol-wish .pos, .ol-p .pos {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--text-3);
  min-width: 20px;
}
.ol-wish .acts { display: flex; gap: 4px; }
.ol-wish .acts button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.ol-wish .acts button:disabled { opacity: .3; cursor: default; }
.ol-pool { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.ol-p {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-size: 12.5px;
}
.ol-p.in { opacity: .6; }
.ol-p .btn.sm { min-width: 56px; }

/* Maç hazırlığı */
.ol-tac { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ol-slider input[type="range"] { width: 100%; margin-top: 4px; }
.ol-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.ol-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.ol-pick .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ol-pick.on {
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 14%, var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--amber);
}

/* Fikstür ve draft satırları */
.ol-fx {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--hairline);
  font-size: 12.5px;
}
.ol-fx:last-child { border-bottom: 0; }
.ol-fx .rd { min-width: 22px; text-align: center; color: var(--text-3); }
.ol-fx .side { font-size: 10.5px; color: var(--text-3); min-width: 62px; }
.ol-fx .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ol-fx .win { color: var(--mint); }
.ol-fx .loss { color: var(--rose); }
.ol-fx.now {
  border: 1px solid var(--amber);
  border-radius: 10px;
  background: color-mix(in srgb, var(--amber) 9%, transparent);
}

/* Fikstür sekmesi: hafta gezgini + tüm ligin maç satırları. */
.ol-wknav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.ol-wkttl { display: flex; align-items: center; gap: 8px; }
.ol-wkttl h3 { margin: 0; }
.ol-match {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--hairline);
  font-size: 12.5px;
  cursor: pointer;
}
.ol-match:last-child { border-bottom: 0; }
.ol-match .mh,
.ol-match .ma {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.ol-match .ma { justify-content: flex-end; text-align: right; }
.ol-match .win { color: var(--mint); }
.ol-match .loss { color: var(--rose); }
.ol-match.now {
  border: 1px solid var(--amber);
  border-radius: 10px;
  background: color-mix(in srgb, var(--amber) 9%, transparent);
}

/* Takım sayfasındaki keşif bölmesi. */
.ol-scout {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--amber) 8%, transparent), transparent 55%),
    var(--surface-2);
}
.ol-scout h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 13px;
}
.ol-scout h4 .ic { width: 15px; height: 15px; color: var(--amber); }

/* Taktik kaydırıcıları: değer rozeti + uç etiketleri. */
.ol-tacval {
  min-width: 34px;
  padding: 2px 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  color: var(--amber);
  text-align: center;
  font-size: 11.5px;
}
.ol-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-4);
}

/* Teklif kartı: iki paket sütunu + toplam değer satırı. */
.ol-pkg2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 8px;
  margin-top: 8px;
}
.ol-pkg2 .swap { align-self: center; font-size: 15px; }
.ol-pkgcol {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 6px 8px;
  background: var(--surface-2);
  min-width: 0;
}
.ol-pkgcol .hd {
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 4px;
}
.ol-pkgcol .tot {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--hairline);
  font-size: 11.5px;
  color: var(--amber);
  text-align: right;
}
.ol-pick .val { font-size: 10px; }

/* İlk 5 saha görünümü — yarım saha, pota üstte, mevki noktaları. */
.ol-court {
  position: relative;
  margin: 10px 0 12px;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 70%),
    linear-gradient(180deg, #0e1730, #0a0f1c);
  border: 1px solid var(--hairline-strong);
}
.ol-court svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ol-spot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 1px;
  animation: spot-in .4s var(--e-spring, ease-out) both;
}
@keyframes spot-in {
  from { opacity: 0; transform: translate(-50%, -34%) scale(.6); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.ol-spot .dot {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #0a0f1c;
  background: linear-gradient(160deg, var(--amber), #d97706);
  box-shadow: 0 4px 14px rgba(247, 167, 43, .35);
}
.ol-spot .dot.empty {
  color: var(--text-4);
  background: transparent;
  border: 1.5px dashed var(--hairline-strong);
  box-shadow: none;
  font-size: 9px;
}
.ol-spot b {
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
}
.ol-spot span { font-size: 8.5px; color: var(--text-4); letter-spacing: .06em; }

/* Pazar taraması + satılık rafı: kulüplü, yaşlı, maaşlı zengin satır. */
.ol-scanrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out),
    background var(--d-fast) var(--e-out),
    transform var(--d-fast) var(--e-out);
  animation: stagger-in var(--d-slow) var(--e-out) both;
}
.ol-scanrow:hover { border-color: rgba(247, 167, 43, .4); transform: translateX(2px); }
.ol-scanrow.listed {
  border-color: rgba(247, 167, 43, .35);
  background: linear-gradient(120deg, rgba(247, 167, 43, .07), transparent 55%);
}
.ol-scanrow .pos {
  min-width: 26px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-3);
  background: var(--surface-3);
  border-radius: 6px;
  padding: 3px 0;
}
.ol-scanrow .mid { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ol-scanrow .nm {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}
.ol-scanrow .meta {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  color: var(--text-4);
}
.ol-scanrow .fig { display: grid; justify-items: end; gap: 1px; }
.ol-scanrow .fig b { font-size: 13px; color: var(--amber-2); }
.ol-scanrow .fig span { font-size: 9.5px; }
.ol-scanrow .mk-go { flex-shrink: 0; }
.mk-tag {
  display: inline-block;
  font-style: normal;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber-2);
  border: 1px solid rgba(247, 167, 43, .5);
  background: rgba(247, 167, 43, .14);
  border-radius: 5px;
  padding: 1px 5px;
  vertical-align: 1px;
}
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mk-chip {
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out),
    background var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out);
}
.mk-chip:hover { border-color: rgba(247, 167, 43, .5); }
.mk-chip.on {
  border-color: var(--amber);
  background: rgba(247, 167, 43, .16);
  color: var(--amber-2);
}
.mk-seg button { font-size: 10.5px; padding: 5px 9px; }

/* Sakatlar bölümü: gül kırmızısı tonlu satır. */
.ol-p.inj-row {
  border-color: rgba(240, 82, 82, .35);
  background: linear-gradient(120deg, rgba(240, 82, 82, .07), transparent 55%);
}


/* Zengin oyuncu satırı: ad + sakatlık rozeti üstte, enerji/rol altta. */
.ol-p.rich { align-items: center; }
.ol-p .mid {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.ol-p .mid .nm {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 600;
}
.ol-p .mid .meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--text-4);
}
.ol-p .enbar {
  width: 46px;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, #fff 8%, transparent);
}
.ol-p .enbar b {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--mint);
}
.ol-p .enbar b.mid { background: var(--amber); }
.ol-p .enbar b.low { background: var(--rose); }
.ol-p .meta em { font-style: normal; font-size: 9.5px; }
.chip.inj {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-color: color-mix(in srgb, var(--rose) 55%, transparent);
  background: color-mix(in srgb, var(--rose) 12%, transparent);
  color: var(--rose);
  font-size: 9.5px;
  white-space: nowrap;
}
.chip.inj .ic { width: 10px; height: 10px; }

/* Puan durumu madalyonları — ilk üç sıra (kariyer + online aynı dil). */
.st-medal {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
}
.st-medal.m1 { color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 70%, transparent); background: color-mix(in srgb, var(--amber) 18%, transparent); }
.st-medal.m2 { color: #b9c4d6; border: 1px solid rgba(185, 196, 214, .7); background: rgba(185, 196, 214, .16); }
.st-medal.m3 { color: #b9743a; border: 1px solid rgba(185, 116, 58, .7); background: rgba(185, 116, 58, .16); }

/* Pano'daki gazete vitrini — dokununca ön sayfa açılır. */
/* Gelen kutusu satırı: metin solda, saat sağda; satırlar ince çizgiyle. */
.ol-nb {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
  font-size: 12.5px;
}
.ol-nb:first-of-type { border-top: 0; }
.ol-nb .tx { flex: 1; min-width: 0; }
.ol-nb .tm { flex: none; color: var(--text-3); font-size: 11px; }

.ol-papertease {
  padding: 14px 16px;
  cursor: pointer;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(120, 90, 40, .08), transparent 60%),
    #f0e9d8;
  color: #191410;
  border: 1px solid rgba(25, 20, 16, .3);
  transition: transform var(--d-fast) ease, box-shadow var(--d-fast) ease;
}
.ol-papertease:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.ol-papertease .mast {
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
  border-bottom: 2px solid #191410;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ol-papertease h4 {
  margin: 8px 0 4px;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.15;
  text-transform: uppercase;
  color: #191410;
}
.ol-papertease p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(25, 20, 16, .8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ol-papertease .more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7a5510;
}
.ol-papertease .more .ic { width: 12px; height: 12px; }

/* Oyuncu kartındaki reyting topu. */
.ol-ovrball {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--amber), #d97706);
  color: #0a0f1c;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(247, 167, 43, .35);
}
.ol-p[data-pcard] { cursor: pointer; }

/* Kulüp nabzı: üç moral çubuğu. */
.ol-mood {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 11.5px;
}
.ol-mood .lb { min-width: 74px; color: var(--text-3); }
.ol-mood .bar {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, #fff 7%, transparent);
}
.ol-mood .bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .6s var(--e-spring, ease-out);
}
.ol-mood.m-board .bar i { background: var(--amber); }
.ol-mood.m-fans .bar i { background: var(--sky, #38bdf8); }
.ol-mood.m-team .bar i { background: var(--mint); }
.ol-mood b { min-width: 24px; text-align: right; }

/* ==========================================================================
   Online pazar — arena fonu (bkz. ui/online.js → scanHtml)
   ========================================================================== */
.mk-arena { position: relative; overflow: hidden; }
.mk-arena > * { position: relative; z-index: 1; }
.mk-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 55%),
    radial-gradient(120% 90% at 0% 100%, color-mix(in srgb, var(--sky, #38bdf8) 8%, transparent), transparent 55%);
}
.mk-beam {
  position: absolute;
  top: -40%;
  right: -10%;
  width: 42%;
  height: 180%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 3.5%, transparent), transparent);
}
.mk-graffiti {
  position: absolute;
  right: 8px;
  bottom: -14px;
  font-family: var(--font-display);
  font-size: 74px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 3.5%, transparent);
  white-space: nowrap;
  user-select: none;
}

/* Tarama satırları: cam kart + kehribar vurgu (mevcut hover'ın üstüne). */
.mk-arena .ol-scanrow {
  background: color-mix(in srgb, #fff 2.5%, transparent);
  backdrop-filter: blur(2px);
}

/* ==========================================================================
   Birebir görüşme — konuşma hissi (bkz. ui/talk.js)
   ========================================================================== */
.talk-pop { --tk: var(--amber); }
.talk-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--amber) 14%, transparent), transparent 60%),
    var(--surface-1);
  border: 1px solid color-mix(in srgb, var(--amber) 22%, transparent);
}
.talk-head .who { min-width: 0; flex: 1; }
.talk-head .nm { display: block; font-size: 15px; }
.talk-head .meta { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.talk-head .chip b { margin-left: 4px; }
.talk-left {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  color: var(--amber);
  font-weight: 800;
  font-size: 13px;
}
.talk-sub { margin: 10px 2px 2px; font-size: 12px; color: var(--text-3); }

.talk-group { margin-top: 12px; }
.talk-group .gh {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tk);
  margin: 0 2px 6px;
}
.talk-group.amber { --tk: var(--amber); }
.talk-group.sky { --tk: var(--sky, #38bdf8); }
.talk-group.mint { --tk: var(--mint); }
.talk-group .opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 6px;
}
.talk-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  border-left: 3px solid color-mix(in srgb, var(--tk) 55%, transparent);
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .14s var(--e-out), border-color .14s ease, background .14s ease;
}
.talk-opt:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--tk) 7%, var(--surface-1));
  border-color: color-mix(in srgb, var(--tk) 45%, transparent);
}
.talk-opt .ic {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--tk) 13%, transparent);
  color: var(--tk);
  flex: none;
}
.talk-opt .ic svg { width: 15px; height: 15px; }
.talk-opt .tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.talk-opt .tx b { font-size: 12.5px; }
.talk-opt .tx i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.talk-opt .go { color: var(--text-4); font-size: 16px; }

/* Cevap balonu: oyuncu sana konuşur. */
.talk-reply { display: flex; gap: 12px; align-items: flex-start; padding: 4px 0; }
.talk-reply .bubble {
  position: relative;
  flex: 1;
  padding: 12px 14px;
  border-radius: 4px 14px 14px 14px;
  background: color-mix(in srgb, var(--amber) 8%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--amber) 26%, transparent);
  animation: talk-in .35s var(--e-out) both;
}
.talk-reply .bubble b { font-size: 12px; color: var(--amber); }
.talk-reply .bubble p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }
@keyframes talk-in { from { opacity: 0; transform: translateY(6px); } }

/* Menajer masası: oyuncu seçici. */
.talk-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px;
  margin-top: 10px;
  max-height: 46vh;
  overflow: auto;
}
.talk-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 11px;
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
  transition: border-color .14s ease, background .14s ease;
}
.talk-row:hover { border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: var(--surface-2); }
.talk-row.done { opacity: .45; }
.talk-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talk-row .chip.rose { color: var(--rose, #fb7185); }
.talk-row .chip.mint { color: var(--mint); }

/* Kadro ekranındaki menajer masası şeridi. */
.talk-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--amber) 26%, transparent);
  background:
    radial-gradient(130% 160% at 100% 0%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 55%),
    var(--surface-1);
}
.talk-banner .ic {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  color: var(--amber);
  flex: none;
}
.talk-banner .tx { flex: 1; min-width: 0; }
.talk-banner .tx b { display: block; font-size: 13.5px; }
.talk-banner .tx span { font-size: 11.5px; color: var(--text-3); }

/* Dil kartları — bayrak + ad + kod, seçili olan kehribar (bkz. settings.js). */
.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 6px;
}
.lang-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px; /* dokunma tabanı */
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-1);
  color: var(--text-2);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.lang-card:hover { background: var(--surface-2); }
.lang-card .fl { font-size: 16px; line-height: 1; }
.lang-card .nm {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lang-card .cd { font-size: 10.5px; color: var(--text-4); letter-spacing: .06em; }
.lang-card.on {
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  color: var(--text);
}
.lang-card.on .cd { color: var(--amber); }
.lang-card .ok {
  display: inline-flex;
  color: var(--amber);
}
.lang-card .ok svg { width: 13px; height: 13px; }

/* Canlı piyasa değeri dökümü — oyuncu kartında "neden bu fiyat". */
.mv-box {
  margin-top: 10px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--amber) 26%, transparent);
  border-radius: 13px;
  background:
    radial-gradient(130% 120% at 100% 0%, color-mix(in srgb, var(--amber) 11%, transparent), transparent 55%),
    var(--surface-1);
}
.mv-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.mv-head b { font-size: 16px; color: var(--amber); text-shadow: 0 0 18px color-mix(in srgb, var(--amber) 40%, transparent); }
.mv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  padding: 2.5px 0;
  color: var(--text-2);
}
.mv-row .up,
.mv-row .down {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
}
.mv-row .up { color: var(--mint); background: color-mix(in srgb, var(--mint) 12%, transparent); }
.mv-row .down { color: var(--rose, #fb7185); background: color-mix(in srgb, var(--rose, #fb7185) 12%, transparent); }
.mv-hint {
  margin: 6px 0 0;
  font-size: 10.5px;
  color: var(--text-3);
}

/* Lig gazetesi — gerçek ön sayfa dili: gazete kâğıdı, mürekkep, kurallar. */
.ol-paper {
  max-height: 68vh;
  overflow: auto;
  padding: 18px 18px 14px;
  border-radius: 10px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(120, 90, 40, .08), transparent 60%),
    #f0e9d8;
  color: #191410;
  box-shadow: inset 0 0 40px rgba(80, 60, 20, .12);
}
.ol-paper header h2 {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 34px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #191410;
}
.ol-paper header .rule {
  height: 4px;
  margin: 8px 0 0;
  border-top: 2px solid #191410;
  border-bottom: 1px solid #191410;
}
.ol-paper .dateline {
  display: flex;
  justify-content: space-between;
  padding: 5px 2px;
  border-bottom: 1px solid rgba(25, 20, 16, .35);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(25, 20, 16, .65);
}
.ol-paper article {
  padding: 10px 2px;
  border-bottom: 1px dotted rgba(25, 20, 16, .3);
}
.ol-paper article .kick {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid #191410;
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}
.ol-paper article h4 {
  margin: 6px 0 4px;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #191410;
}
.ol-paper article.lead h4 { font-size: clamp(19px, 4.5vw, 26px); }
.ol-paper article p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(25, 20, 16, .85);
}
.ol-paper article.lead p { font-size: 13.5px; }
.ol-paper .old-hd {
  margin: 14px 0 2px;
  padding-top: 8px;
  border-top: 2px solid #191410;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(25, 20, 16, .6);
}
.ol-paper .issue:not(.first) article h4 { font-size: 13px; }
.ol-paper .issue:not(.first) article p { font-size: 11.5px; }
.ol-paper .empty { color: rgba(25, 20, 16, .6); font-size: 13px; text-align: center; padding: 24px 0; }

/* Kurucu denge çubuğu. */
.ol-balance { margin-top: 10px; }
.ol-balance .bar {
  display: flex;
  height: 7px;
  margin-top: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, #fff 7%, transparent);
}
.ol-balance .bar .a { background: var(--amber); border-radius: 999px 0 0 999px; }
.ol-balance .bar .b { background: var(--sky, #38bdf8); margin-left: auto; border-radius: 0 999px 999px 0; }
.ol-balance .warn {
  margin-top: 6px;
  font-size: 11px;
  color: var(--rose);
}

/* --- lig türü anahtarı ------------------------------------------------------
   Kullanıcı aynı anda bir AÇIK lig + bir ARKADAŞ liginde olabilir; öbür
   türde üyelik varsa başlığın altında iki çipli bir anahtar durur. */

.ol-kindbar {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}
.ol-kindbar .chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--d-fast), border-color var(--d-fast), background var(--d-fast);
}
.ol-kindbar .chip .ic { width: 14px; height: 14px; }
.ol-kindbar .chip:hover { color: var(--text); border-color: var(--hairline-strong); }
.ol-kindbar .chip.on {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}

/* --- online sekmeleri -------------------------------------------------------
   Aktif lig kariyer gibi bölümlü: kariyer kabuğu içinde ÜSTTE hap sırası
   (kabuğun kendi alt çubuğuyla çakışmasın), bağımsız sayfada ALTTA kariyer
   alt çubuğuyla aynı duruşta bir gezinme çubuğu. */

.ol-tabs {
  display: flex;
  gap: 6px;
  margin: 2px 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ol-tabs::-webkit-scrollbar { display: none; }

.ol-tabs .ol-tabbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color var(--d-fast), border-color var(--d-fast), background var(--d-fast);
}
.ol-tabs .ol-tabbtn .ic { width: 15px; height: 15px; }
.ol-tabs .ol-tabbtn:hover { color: var(--text); border-color: var(--hairline-strong); }
.ol-tabs .ol-tabbtn.on {
  color: var(--amber-ink, #150f02);
  background: var(--amber);
  border-color: var(--amber);
  font-weight: 700;
}

.ol-tabbar {
  position: fixed;
  z-index: 45;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: rgba(10, 15, 28, .92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid var(--hairline);
}

.ol-tabbar .ol-tabbtn {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 0 2px;
  color: var(--text-3);
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color var(--d-fast);
}
.ol-tabbar .ol-tabbtn > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ol-tabbar .ol-tabbtn .ic { width: 19px; height: 19px; transition: transform var(--d-mid) var(--e-spring); }
.ol-tabbar .ol-tabbtn.on { color: var(--amber); }
.ol-tabbar .ol-tabbtn.on .ic { transform: translateY(-2px) scale(1.12); }
.ol-tabbar .ol-tabbtn.on::after {
  content: '';
  position: absolute;
  top: 4px;
  width: 24px;
  height: 3px;
  border-radius: 99px;
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber);
}

/* Alt çubuk varken içerik çubuğun altında kalmasın. */
.has-olbar { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 18px); display: block; }

/* Kariyer kabuğu içindeki online: masaüstünde üst haplar, mobilde
   kariyerdeki gibi ALT çubuk (kabuğun kendi çubuğu ol-view'da gizli). */
.ol-tabbar.m-only { display: none; }

@media (max-width: 720px) {
  .ol-tabs { display: none; }
  .ol-tabbar.m-only { display: grid; }
  /* Giriş animasyonu (view-in, fill both) transform bağlamını KALICI
     bırakıyor ve fixed alt çubuğu viewport yerine .view'a bağlıyordu —
     online görünümünde animasyon kapalı, çubuk gerçekten altta. */
  body.ol-view .main .view { animation: none; }
  .has-olbar-m {
    display: block;
    padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 18px);
  }
  body.ol-view .tabbar { display: none; }
}

/* Online kasa çipi — başlık satırının sağında, her sekmede görünür. */
.page-head .ol-cash {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--amber2);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}
.page-head .ol-cash .ic { width: 15px; height: 15px; }

/* Puan durumu satırları takım sayfası açar. */
.ol-rowlink { cursor: pointer; }
.ol-rowlink:hover td { background: color-mix(in srgb, var(--amber) 6%, transparent); }

/* --- yuva ekranı online girişi -------------------------------------------- */

.ol-entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  margin-top: 4px;
  border: 1px solid rgba(247, 167, 43, .38);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  background:
    radial-gradient(520px 260px at 8% 0%, rgba(247, 167, 43, .2), transparent 62%),
    radial-gradient(520px 260px at 92% 0%, rgba(47, 211, 155, .16), transparent 60%),
    linear-gradient(180deg, #05070f, #090d1a 70%, #05070f);
  box-shadow: 0 0 0 1px rgba(247, 167, 43, .12), 0 14px 40px -18px rgba(247, 167, 43, .5);
  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.ol-entry:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(247, 167, 43, .3), 0 20px 52px -18px rgba(247, 167, 43, .6);
}
.ol-entry .vs-graffiti { font-size: 54px; right: 10px; top: -6px; }
.ol-entry-main { position: relative; flex: 1; min-width: 0; }
.ol-entry-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff, #ffc766 82%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 4px 0 6px;
}
.ol-entry-meta { font-size: 12.5px; color: var(--text-2); }
/* Canlı lig vitrini: kehribar nokta + sayı — kalabalık hissi. */
.ol-entry-live { font-size: 12px; color: var(--amber-2); margin: 2px 0 3px; }
.ol-entry-live:empty { display: none; }
.ol-entry-live::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--mint);
  box-shadow: 0 0 8px rgba(47, 211, 155, .8);
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse { 50% { opacity: .45; } }
:root[data-fx="lite"] .ol-entry-live::before { animation: none; }
.ol-entry-side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: none;
}
.ol-entry-count {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 4px 18px rgba(247, 167, 43, .45);
}
.ol-entry-cta { pointer-events: none; }

/* Üç oyun kapısı üst üste — kartların arasında nefes payı. */
#mode-cards { display: flex; flex-direction: column; gap: 12px; }

/* Arkadaş ligi ve normal kariyer kartları: aynı vitrin dili, kendi renk
   kimlikleri. Sağdaki halka ikon sayaç bloğunun sade karşılığı. */
.mode-go {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: var(--text-2);
}

.ol-entry.mode-fr {
  border-color: rgba(47, 211, 155, .38);
  background:
    radial-gradient(520px 260px at 8% 0%, rgba(47, 211, 155, .18), transparent 62%),
    radial-gradient(520px 260px at 92% 0%, rgba(111, 79, 184, .18), transparent 60%),
    linear-gradient(180deg, #05070f, #081410 70%, #05070f);
  box-shadow: 0 0 0 1px rgba(47, 211, 155, .1), 0 14px 40px -18px rgba(47, 211, 155, .45);
}
.ol-entry.mode-fr:hover {
  box-shadow: 0 0 0 1px rgba(47, 211, 155, .3), 0 20px 52px -18px rgba(47, 211, 155, .55);
}
.ol-entry.mode-fr .ol-entry-title {
  background: linear-gradient(180deg, #fff, #7fe9c4 85%);
  -webkit-background-clip: text;
  background-clip: text;
}
.ol-entry.mode-fr .mode-go { color: var(--mint); border-color: rgba(47, 211, 155, .4); }

.ol-entry.mode-du {
  border-color: rgba(242, 85, 90, .38);
  background:
    radial-gradient(520px 260px at 8% 0%, rgba(242, 85, 90, .18), transparent 62%),
    radial-gradient(520px 260px at 92% 0%, rgba(247, 167, 43, .14), transparent 60%),
    linear-gradient(180deg, #05070f, #140809 70%, #05070f);
  box-shadow: 0 0 0 1px rgba(242, 85, 90, .1), 0 14px 40px -18px rgba(242, 85, 90, .45);
}
.ol-entry.mode-du:hover {
  box-shadow: 0 0 0 1px rgba(242, 85, 90, .3), 0 20px 52px -18px rgba(242, 85, 90, .55);
}
.ol-entry.mode-du .ol-entry-title {
  background: linear-gradient(180deg, #fff, #ffb3b5 85%);
  -webkit-background-clip: text;
  background-clip: text;
}
.ol-entry.mode-du .mode-go { color: var(--rose); border-color: rgba(242, 85, 90, .4); }

.ol-entry.mode-cr {
  border-color: rgba(78, 168, 245, .38);
  background:
    radial-gradient(520px 260px at 8% 0%, rgba(78, 168, 245, .17), transparent 62%),
    radial-gradient(520px 260px at 92% 0%, rgba(247, 167, 43, .12), transparent 60%),
    linear-gradient(180deg, #05070f, #081019 70%, #05070f);
  box-shadow: 0 0 0 1px rgba(78, 168, 245, .1), 0 14px 40px -18px rgba(78, 168, 245, .45);
}
.ol-entry.mode-cr:hover {
  box-shadow: 0 0 0 1px rgba(78, 168, 245, .3), 0 20px 52px -18px rgba(78, 168, 245, .55);
}
.ol-entry.mode-cr .ol-entry-title {
  background: linear-gradient(180deg, #fff, #9fd0ff 85%);
  -webkit-background-clip: text;
  background-clip: text;
}
.ol-entry.mode-cr .mode-go { color: var(--sky); border-color: rgba(78, 168, 245, .4); }

@media (max-width: 560px) {
  .ol-entry { flex-direction: column; align-items: stretch; text-align: center; }
  .ol-entry-side { align-items: center; }
  .ol-entry-title { font-size: 26px; }
  /* Sağ halka dar ekranda kartın altına ORTALANIR — kolon düzeninde sola
     yapışıp asimetrik duruyordu. */
  .mode-go { margin: 10px auto 0; }
}

/* --- inşaat kartı ----------------------------------------------------------- */

.ol-facs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.ol-fac {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-2);
}
.ol-fac .nm { font-size: 12px; font-weight: 700; }
.ol-fac .lv { font-size: 10px; letter-spacing: .22em; color: var(--amber); }
.ol-fac .btn { margin-top: 4px; }
.ol-build { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.ol-bar {
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.ol-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--amber), var(--amber-2));
  box-shadow: 0 0 12px rgba(247, 167, 43, .55);
  transition: width var(--d-slow) var(--e-out);
}

/* --- teklif masası ---------------------------------------------------------- */

.ol-offer {
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-2);
}
.ol-offer .who { font-size: 12px; margin-bottom: 4px; }
.ol-offer .pkg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
}
.ol-offer .side-a { color: var(--amber-2); }
.ol-offer .side-b { color: var(--sky); }
.ol-offer .acts { gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ol-offer .chip.warn {
  border-color: rgba(247, 167, 43, .5);
  color: var(--amber-2);
}
.ol-offer .chip.st-done { color: var(--mint); border-color: rgba(47, 211, 155, .4); }
.ol-offer .chip.st-vetoed,
.ol-offer .chip.st-rejected { color: var(--rose); border-color: rgba(242, 85, 90, .4); }
.ol-offer .chip.st-expired,
.ol-offer .chip.st-cancelled { color: var(--text-3); }

.ol-pickers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}


/* --- Teke Tek (1v1) --------------------------------------------------------
   Duello sayfası: canlı nokta, kip kartları, sayaç halkası, havuz ızgarası.
   Sayaç halkası conic degrade — --p (1→0) kalan oranı, JS her karede yazar. */

.du-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-2);
}
.du-live b { font-variant-numeric: tabular-nums; color: var(--mint); }
.du-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--mint);
  animation: duPulse 1.6s ease-in-out infinite;
}
@keyframes duPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 211, 155, .5); }
  55% { box-shadow: 0 0 0 7px rgba(47, 211, 155, 0); }
}

/* Kahraman başlık: degrade zemin, köşede dev "1v1" filigranı, süpüren parlama. */
.du-hero {
  position: relative; overflow: hidden;
  border: 1px solid rgba(242, 85, 90, .3); border-radius: var(--r-lg);
  background:
    radial-gradient(120% 150% at 88% -25%, rgba(242, 85, 90, .26), transparent 55%),
    radial-gradient(90% 130% at -12% 115%, rgba(247, 167, 43, .14), transparent 52%),
    linear-gradient(165deg, var(--surface-2), var(--bg-1));
  padding: 16px 16px 15px; margin-bottom: 12px;
}
.du-hero::after {
  content: ''; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .05), transparent);
  transform: skewX(-18deg); animation: duSweep 4.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes duSweep { 0%, 55% { left: -60%; } 100% { left: 150%; } }
:root[data-fx="lite"] .du-hero::after { animation: none; }
.du-hero-mark {
  position: absolute; right: 4px; top: -14px;
  font-family: var(--font-display); font-size: 92px;
  color: rgba(242, 85, 90, .1); user-select: none; pointer-events: none;
}
.du-hero h2 {
  margin: 12px 0 3px; font-family: var(--font-display);
  font-size: 27px; letter-spacing: .04em;
}
.du-hero p { margin: 0; font-size: 12.5px; color: var(--text-3); max-width: 42ch; }
.du-hero-top {
  position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.du-hero-top .grow { flex: 1 1 auto; }

/* Kip kartları: kart = düğme; renk aurası, ışıldayan ikon, kayan ok. */
.du-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .du-modes { grid-template-columns: 1fr; } }
.du-mode {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 15px 14px 13px; text-align: left; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: linear-gradient(170deg, var(--surface-2), var(--surface-1));
  transition: border-color var(--d-fast), transform var(--d-fast),
    box-shadow var(--d-fast);
}
.du-mode::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 95% at 14% 0%, var(--du-tint), transparent 55%);
}
.du-mode.draft { --du-a: var(--rose); --du-tint: rgba(242, 85, 90, .15); }
.du-mode.full { --du-a: var(--amber); --du-tint: rgba(247, 167, 43, .13); }
.du-mode:hover {
  border-color: var(--du-a); transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55);
}
.du-mode:active { transform: scale(.98); }
.du-mode-ic {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; position: relative;
  border: 1px solid var(--du-a); color: var(--du-a); background: var(--du-tint);
  animation: duGlow 2.8s ease-in-out infinite;
}
@keyframes duGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--du-tint); }
  50% { box-shadow: 0 0 18px 3px var(--du-tint); }
}
:root[data-fx="lite"] .du-mode-ic { animation: none; }
.du-mode-ic .ic { width: 20px; height: 20px; }
.du-mode-t {
  font-family: var(--font-display); font-size: 16px; letter-spacing: .06em;
  text-transform: uppercase; position: relative;
}
.du-mode-s { font-size: 12px; color: var(--text-3); min-height: 30px; position: relative; }
.du-mode-go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 2px;
  font-family: var(--font-display); font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--du-a); position: relative;
}
.du-mode-go .ic { width: 13px; height: 13px; }
.du-mode-go i { font-style: normal; transition: transform var(--d-fast); }
.du-mode:hover .du-mode-go i { transform: translateX(3px); }

/* Hak şeridi: tam genişlik, ikonlu — metin hiç kesilmez, satıra sarar. */
.du-credit {
  display: flex; align-items: center; gap: 11px; margin-top: 12px;
  padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: linear-gradient(168deg, var(--surface-2), var(--surface-1));
}
.du-credit.has { border-color: rgba(47, 211, 155, .4); }
.du-credit.none { border-color: rgba(242, 85, 90, .42); }
.du-credit-ic {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center;
}
.du-credit.has .du-credit-ic {
  color: var(--mint); border: 1px solid rgba(47, 211, 155, .5);
  background: rgba(47, 211, 155, .1);
}
.du-credit.none .du-credit-ic {
  color: var(--rose); border: 1px solid rgba(242, 85, 90, .5);
  background: rgba(242, 85, 90, .09);
}
.du-credit-ic .ic { width: 16px; height: 16px; }
.du-credit-tx { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.3; }
.du-credit.has .du-credit-tx { color: var(--mint); }
.du-credit.none .du-credit-tx { color: var(--rose); }
.du-credit .btn { flex: 0 0 auto; }
@media (max-width: 420px) {
  .du-credit { flex-wrap: wrap; }
  .du-credit .btn { margin-left: 45px; }
}

/* Kulüp kimliği: ince şerit — şehir + takma ad yan yana. */
.du-ident { margin-top: 12px; padding: 12px 14px 13px; }
.du-ident-l {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
}
.du-ident .grid { margin-top: 8px; }

/* Sıralama kapısı: podyuma götüren kart. */
.du-ranknav {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: 12px; padding: 13px 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background:
    radial-gradient(110% 130% at 100% 0%, rgba(247, 167, 43, .1), transparent 55%),
    linear-gradient(168deg, var(--surface-2), var(--surface-1));
  transition: border-color var(--d-fast), transform var(--d-fast);
}
.du-ranknav:hover { border-color: rgba(247, 167, 43, .5); transform: translateY(-1px); }
.du-ranknav:active { transform: scale(.99); }
.du-ranknav-ic {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center; color: var(--amber);
  border: 1px solid rgba(247, 167, 43, .5); background: rgba(247, 167, 43, .12);
}
.du-ranknav-ic .ic { width: 20px; height: 20px; }
.du-ranknav-tx { flex: 1; min-width: 0; }
.du-ranknav-tx b {
  display: block; font-family: var(--font-display); font-size: 15px;
  letter-spacing: .07em; text-transform: uppercase;
}
.du-ranknav-tx span {
  display: block; font-size: 11.5px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.du-ranknav-me { text-align: right; flex: 0 0 auto; }
.du-ranknav-me b {
  display: block; font-family: var(--font-mono); font-size: 16px;
  color: var(--amber);
}
.du-ranknav-me span { font-size: 10.5px; color: var(--text-3); }
.du-ranknav-arrow { font-size: 24px; color: var(--text-3); line-height: 1; }

/* Podyum: 2-1-3 dizilimi, şampiyon kartında parlama süpürmesi. */
.du-podium {
  display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 9px;
  align-items: end; margin: 4px 0 12px;
}
.du-pod {
  position: relative; overflow: hidden; text-align: center;
  padding: 13px 8px 11px; border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: linear-gradient(172deg, var(--surface-2), var(--surface-1));
  animation: duRise .45s ease-out backwards;
}
.du-pod:nth-child(1) { animation-delay: .1s; }
.du-pod:nth-child(3) { animation-delay: .18s; }
@keyframes duRise {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
:root[data-fx="lite"] .du-pod { animation: none; }
.du-pod.p1 { padding-top: 20px; padding-bottom: 16px; border-color: rgba(247, 167, 43, .55); }
.du-pod.p1::after {
  content: ''; position: absolute; top: -40%; bottom: -40%; left: -70%; width: 55%;
  background: linear-gradient(105deg, transparent, rgba(247, 167, 43, .12), transparent);
  transform: skewX(-18deg); animation: duSweep 3.6s ease-in-out infinite;
  pointer-events: none;
}
:root[data-fx="lite"] .du-pod.p1::after { animation: none; }
.du-pod-medal {
  width: 34px; height: 34px; margin: 0 auto 7px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 15px;
  border: 1px solid var(--hairline-strong); color: var(--text-2);
  background: var(--surface-1);
}
.du-pod.p1 .du-pod-medal {
  border-color: rgba(247, 167, 43, .7); color: var(--amber);
  background: rgba(247, 167, 43, .14);
  box-shadow: 0 0 18px rgba(247, 167, 43, .35);
}
.du-pod.p2 .du-pod-medal {
  border-color: rgba(196, 208, 226, .55); color: #c4d0e2;
  background: rgba(196, 208, 226, .1);
}
.du-pod.p3 .du-pod-medal {
  border-color: rgba(209, 138, 75, .55); color: #d18a4b;
  background: rgba(209, 138, 75, .1);
}
.du-pod-nm {
  font-size: 12.5px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.du-pod-cl {
  font-size: 10.5px; color: var(--text-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.du-pod-pt {
  margin-top: 4px; font-family: var(--font-mono); font-size: 14px;
  color: var(--amber);
}

.du-center { text-align: center; }

/* radar: eşleşme beklerken genişleyen halkalar */
.du-radar { position: relative; width: 84px; height: 84px; margin: 8px auto 0; }
.du-radar i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(242, 85, 90, .55);
  animation: duRadar 2.2s ease-out infinite;
}
.du-radar i:nth-child(2) { animation-delay: .7s; }
.du-radar i:nth-child(3) { animation-delay: 1.4s; }
@keyframes duRadar {
  0% { transform: scale(.35); opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}
.du-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--hairline-strong); border-top-color: var(--amber);
  animation: duSpin 1s linear infinite; display: inline-block;
}
@keyframes duSpin { to { transform: rotate(360deg); } }

/* Ortalama eşleşme göstergesi: kuyruk ekranında ışıltılı küçük vitrin. */
.du-avg {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: 14px; padding: 10px 18px 10px 12px;
  border: 1px solid rgba(247, 167, 43, .4); border-radius: 999px;
  background:
    radial-gradient(120% 160% at 0% 50%, rgba(247, 167, 43, .14), transparent 60%),
    linear-gradient(165deg, var(--surface-2), var(--surface-1));
}
.du-avg::after {
  content: ''; position: absolute; top: -40%; bottom: -40%; left: -70%;
  width: 50%; transform: skewX(-18deg); pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .07), transparent);
  animation: duSweep 3.8s ease-in-out infinite;
}
:root[data-fx="lite"] .du-avg::after { animation: none; }
.du-avg-ic {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; color: var(--amber);
  border: 1px solid rgba(247, 167, 43, .55); background: rgba(247, 167, 43, .12);
  animation: duGlow 2.6s ease-in-out infinite;
  --du-tint: rgba(247, 167, 43, .16);
}
:root[data-fx="lite"] .du-avg-ic { animation: none; }
.du-avg-ic .ic { width: 17px; height: 17px; }
.du-avg-tx { text-align: left; }
.du-avg-tx b {
  display: block; font-size: 17px; color: var(--amber);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.du-avg-tx span {
  display: block; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}

.du-vs {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px;
  align-items: center; margin-bottom: 10px;
}
.du-side {
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--surface-1); padding: 10px 12px; min-width: 0;
}
.du-side.me { border-color: rgba(247, 167, 43, .4); }
.du-side-h b { display: block; font-size: 13.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.du-side-h .dim { font-size: 11.5px; }
.du-side-n { font-size: 15px; color: var(--amber); margin-top: 2px; }

.du-ring {
  --p: 1;
  width: 62px; height: 62px; border-radius: 50%; position: relative;
  display: grid; place-items: center;
  background:
    radial-gradient(closest-side, var(--bg-1) 76%, transparent 77%),
    conic-gradient(var(--amber) calc(var(--p) * 360deg), var(--surface-2) 0);
  transition: none;
}
.du-ring b {
  font-family: var(--font-mono); font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.du-ring.hot {
  background:
    radial-gradient(closest-side, var(--bg-1) 76%, transparent 77%),
    conic-gradient(var(--rose) calc(var(--p) * 360deg), var(--surface-2) 0);
  animation: duHot .9s ease-in-out infinite;
}
@keyframes duHot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.du-turn {
  text-align: center; margin: 4px 0 10px;
  font-family: var(--font-display); letter-spacing: .1em;
  text-transform: uppercase; font-size: 13px; color: var(--text-3);
}
.du-turn.you { color: var(--mint); animation: duPulseTxt 1.4s ease-in-out infinite; }
.du-turn.opp { color: var(--text-3); }
@keyframes duPulseTxt { 50% { opacity: .55; } }

.du-pool, .du-five {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 8px;
}
.du-p {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 8px 10px; cursor: pointer; text-align: left; position: relative;
  border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--surface-1);
  transition: border-color var(--d-fast), opacity var(--d-fast);
}
.du-p:hover:not([disabled]) { border-color: var(--hairline-strong); }
.du-p .pos {
  flex: 0 0 auto; font-size: 10.5px; font-family: var(--font-mono);
  color: var(--text-3); width: 20px;
}
.du-p .nm { flex: 1; min-width: 0; font-size: 12.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.du-p .ovr { flex: 0 0 auto; font-size: 13px; color: var(--amber); }
.du-p .st { position: absolute; right: -5px; top: -5px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--mint); color: #06231a;
  display: grid; place-items: center; }
.du-p .st .ic { width: 11px; height: 11px; }
.du-p.mine { border-color: rgba(47, 211, 155, .55); background: rgba(47, 211, 155, .07); }
.du-p.gone { opacity: .32; }
.du-p[disabled] { cursor: default; }

.du-stick {
  position: sticky; bottom: 8px; margin-top: 12px;
  display: flex; gap: 8px; align-items: center;
  background: color-mix(in srgb, var(--bg-1) 88%, transparent);
  backdrop-filter: blur(8px); padding: 8px; border-radius: var(--r-md);
  border: 1px solid var(--hairline);
}
.du-stick .block { flex: 1; }

.du-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.du-preset {
  padding: 12px 8px; cursor: pointer; text-align: center;
  font-family: var(--font-display); font-size: 12.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-2);
  border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface-1);
}
.du-preset.on {
  color: var(--amber-ink, #150f02); background: var(--amber); border-color: var(--amber);
}

/* Sonuç arenası: tribün, gezinen spot ışıkları, parke ve konfeti.
   Sahne katmanları salt CSS — JS yalnız skoru sayar ve konfeti serper. */
.du-arena {
  position: relative; overflow: hidden;
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  min-height: min(78dvh, 700px);
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(180deg, #050a1a 0%, #0a1226 48%, #0d1830 100%);
}
.du-arena.win { border-color: rgba(47, 211, 155, .35); }
.du-arena.lose { border-color: rgba(242, 85, 90, .3); }
.du-arena::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 32%;
  background: linear-gradient(180deg, transparent, rgba(3, 6, 14, .6));
  pointer-events: none;
}

.du-crowd {
  position: absolute; left: -4%; right: -4%; top: 0; height: 66%;
  background-image:
    radial-gradient(circle, rgba(214, 226, 246, .3) 1.3px, transparent 1.8px);
  background-size: 13px 11px;
  transform: perspective(300px) rotateX(28deg);
  transform-origin: 50% 100%;
  opacity: .5;
  animation: duCrowdA 2.8s ease-in-out infinite;
  -webkit-mask-image:
    linear-gradient(180deg, transparent, #000 22%, #000 82%, transparent);
  mask-image:
    linear-gradient(180deg, transparent, #000 22%, #000 82%, transparent);
  pointer-events: none;
}
.du-crowd.b {
  background-position: 6px 5px; background-size: 17px 13px;
  opacity: .32; animation: duCrowdB 3.6s ease-in-out infinite;
}
@keyframes duCrowdA { 50% { opacity: .64; } }
@keyframes duCrowdB { 50% { opacity: .2; } }

.du-beam {
  position: absolute; top: -12%; width: 36%; height: 78%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 80%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  mix-blend-mode: screen; pointer-events: none;
}
.du-beam.l { left: 4%; animation: duBeamL 5.6s ease-in-out infinite alternate; }
.du-beam.r { right: 4%; animation: duBeamR 6.6s ease-in-out infinite alternate; }
@keyframes duBeamL { from { transform: rotate(-16deg); } to { transform: rotate(18deg); } }
@keyframes duBeamR { from { transform: rotate(16deg); } to { transform: rotate(-18deg); } }
.du-arena.win .du-beam {
  background: linear-gradient(180deg, rgba(47, 211, 155, .22), transparent 80%);
}
.du-arena.lose .du-beam {
  background: linear-gradient(180deg, rgba(242, 85, 90, .15), transparent 80%);
}
:root[data-fx="lite"] .du-crowd,
:root[data-fx="lite"] .du-beam { animation: none; }


.du-conf { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.du-conf i {
  position: absolute; top: -14px; width: 7px; height: 11px; border-radius: 2px;
  animation: duConf linear infinite;
}
@keyframes duConf {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translateY(760px) rotate(680deg); }
}
:root[data-fx="lite"] .du-conf { display: none; }

.du-arena-body {
  position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 16px 8px; text-align: center;
}
.du-arena-acts {
  position: relative; z-index: 1; display: flex; gap: 10px;
  justify-content: center; flex-wrap: wrap; padding: 0 16px 20px;
}
.du-arena-acts .btn.pri { box-shadow: var(--glow-amber); }
.du-arena-acts .btn.ghost {
  border-color: var(--hairline-strong);
  background: rgba(238, 243, 251, .05);
}
.du-res-tag {
  display: inline-block; padding: 8px 18px; border-radius: 999px;
  font-family: var(--font-display); font-size: 14px; letter-spacing: .12em;
  text-transform: uppercase;
  animation: duPop .55s cubic-bezier(.2, 1.6, .4, 1) .15s backwards;
}
.du-arena.win .du-res-tag {
  color: var(--mint); border: 1px solid rgba(47, 211, 155, .5);
  background: rgba(47, 211, 155, .1);
  box-shadow: 0 0 26px rgba(47, 211, 155, .28);
}
.du-arena.lose .du-res-tag {
  color: var(--rose); border: 1px solid rgba(242, 85, 90, .45);
  background: rgba(242, 85, 90, .08);
}
@keyframes duPop { from { transform: scale(.4); opacity: 0; } }

.du-res-names {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin-top: 6px; font-size: 13px;
}
.du-res-names i {
  font-style: normal; font-family: var(--font-display); font-size: 11px;
  color: var(--text-3); letter-spacing: .14em;
}
.du-res-names .won { color: var(--amber); text-shadow: 0 0 18px rgba(247, 167, 43, .5); }

/* Maç özeti paneli: MVP + takım karşılaştırması. Yarı saydam — sahne
   arkada akmaya devam eder. */
.du-stats {
  margin-top: 16px; width: min(100%, 336px);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: rgba(6, 10, 24, .58);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  padding: 9px 14px 10px;
  animation: duPop .5s cubic-bezier(.2, 1.4, .4, 1) .5s backwards;
}
.du-mvp {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  flex-wrap: wrap; font-size: 12.5px; padding-bottom: 8px; margin-bottom: 5px;
  border-bottom: 1px solid var(--hairline);
}
.du-mvp .ic { width: 14px; height: 14px; color: var(--amber); flex: 0 0 auto; }
.du-mvp span { color: var(--text-3); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; }
.du-mvp b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 40%; }
.du-mvp em { font-style: normal; color: var(--amber); font-size: 12px; }
.du-strow {
  display: grid; grid-template-columns: 1fr 108px 1fr; gap: 12px;
  align-items: center; padding: 3px 0; font-size: 13px;
}
.du-strow > b { font-family: var(--font-mono); color: var(--text-2); }
.du-strow > b:first-child { text-align: right; }
.du-strow > b.hi { color: var(--amber); }
.du-strow span {
  color: var(--text-3); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap; text-align: center;
}
.du-strow.tops { margin-top: 4px; padding-top: 7px;
  border-top: 1px solid var(--hairline); }
.du-strow.tops i {
  font-style: normal; font-size: 11px; color: var(--text-2); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.du-strow.tops i:first-child { text-align: right; }
.du-strow.tops i b { color: var(--amber); }

.du-final { width: 100%; font-size: 13.5px; }
.du-final b {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px;
  align-items: baseline; width: 100%;
  font-size: 42px; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .6);
}
.du-final b span:first-child { text-align: right; }
.du-final b span:last-child { text-align: left; }
.du-final b i { font-style: normal; color: var(--text-3); font-size: 30px; }
.du-final.win b { color: var(--mint); }
.du-final.lose b { color: var(--rose); }

.du-rank { display: flex; flex-direction: column; margin-top: 8px; }
.du-rankrow {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px;
  border-top: 1px solid var(--hairline); font-size: 13px;
}
.du-rankrow:first-child { border-top: 0; }
.du-rankrow .rk { width: 26px; color: var(--text-3); text-align: right; }
.du-rankrow .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.du-rankrow .nm i { color: var(--text-3); font-style: normal; font-size: 11.5px; }
.du-rankrow .pt { color: var(--amber); }
.du-rankrow.me {
  background: rgba(247, 167, 43, .08); border-radius: 8px; border-top: 0;
  outline: 1px solid rgba(247, 167, 43, .3);
}

/* ==========================================================================
   Pazarlık masası — takas/kiralama panelleri
   ========================================================================== */
.ng-give { gap: 7px; }
.ng-give .mk-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: 11px;
}
.ng-give .mk-chip .nm {
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ng-give .mk-chip .ov { font-size: 11px; opacity: .85; }
.ng-give .mk-chip .tick { display: none; color: var(--amber); line-height: 0; }
.ng-give .mk-chip .tick svg { width: 12px; height: 12px; }
.ng-give .mk-chip.on .tick { display: inline-flex; }

.ng-cash {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  padding: 8px 12px; border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--surface-1);
}
.ng-cash:focus-within { border-color: color-mix(in srgb, var(--amber) 55%, transparent); }
.ng-cash .ic {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber);
}
.ng-cash .ic svg { width: 13px; height: 13px; }
.ng-cash label { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-2); }
.ng-cash .input { width: 118px; text-align: right; border: 0; background: transparent; }
.ng-cash .cur { font-size: 11px; color: var(--text-3); }

.ng-meter {
  margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--amber) 24%, transparent);
  background:
    radial-gradient(130% 130% at 0% 0%, color-mix(in srgb, var(--amber) 9%, transparent), transparent 55%),
    var(--surface-1);
}
.ng-meter .tops { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.ng-meter .tops i {
  display: block; font-style: normal; font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 2px;
}
.ng-meter .tops b { font-size: 15px; color: var(--amber); }
.ng-meter .tops .r { text-align: right; }
.ng-meter .tops .r b { color: var(--sky); }
.ng-meter .track {
  margin-top: 9px; height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); overflow: hidden;
}
.ng-meter .track i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 60%, transparent), var(--amber));
  transition: width .25s ease;
}
.ng-meter.ok { border-color: color-mix(in srgb, var(--mint) 34%, transparent); }
.ng-meter.ok .tops b { color: var(--mint); }
.ng-meter.ok .track i {
  background: linear-gradient(90deg, color-mix(in srgb, var(--mint) 60%, transparent), var(--mint));
}

.ng-facts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ng-facts .f { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.ng-facts .ic {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.ng-facts .ic svg { width: 13px; height: 13px; }
.ng-facts .tone-sky { background: color-mix(in srgb, var(--sky) 14%, transparent); color: var(--sky); }
.ng-facts .tone-amber { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }
.ng-facts .tone-mint { background: color-mix(in srgb, var(--mint) 14%, transparent); color: var(--mint); }

/* ==========================================================================
   Online lig — antrenman odağı çipleri
   ========================================================================== */
.olf-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.olf {
  --tk: var(--amber);
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--surface-1); color: var(--text-2);
  font-family: var(--font-display, inherit); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.olf[data-tone="play"] { --tk: var(--sky); }
.olf[data-tone="def"] { --tk: var(--mint); }
.olf[data-tone="phy"] { --tk: var(--rose); }
.olf u { width: 7px; height: 7px; border-radius: 50%; background: var(--tk); opacity: .8; flex: none; }
.olf:hover { border-color: color-mix(in srgb, var(--tk) 55%, transparent); color: var(--text); }
.olf.on {
  background: color-mix(in srgb, var(--tk) 15%, transparent);
  border-color: color-mix(in srgb, var(--tk) 60%, transparent);
  color: var(--text);
}

/* ==========================================================================
   Piyasa raporu — kahraman başlık, sıra rozetli satırlar, talep kutuları
   ========================================================================== */
.mkr-hero {
  display: flex; gap: 12px; align-items: center; padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--mint) 28%, var(--hairline));
  background:
    radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--mint) 11%, transparent), transparent 60%),
    radial-gradient(120% 150% at 100% 0%, color-mix(in srgb, var(--sky) 8%, transparent), transparent 60%),
    var(--surface-1);
}
.mkr-hero .ic {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mint) 17%, transparent); color: var(--mint);
}
.mkr-hero .ic svg { width: 16px; height: 16px; }
.mkr-hero b { display: block; font-family: var(--font-display, inherit); font-size: 15px; letter-spacing: .04em; }
.mkr-hero span { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 2px; }

.ol-p.mkr .rk { width: 20px; flex: none; text-align: center; font-size: 11px; color: var(--text-4); }
.ol-p.mkr .heat {
  display: block; margin-top: 5px; height: 3px; max-width: 190px;
  border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden;
}
.ol-p.mkr .heat i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mint) 45%, transparent), var(--mint));
}
.mkr-up {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 4px 9px; border-radius: 999px; font-size: 11px;
  color: var(--mint); background: color-mix(in srgb, var(--mint) 13%, transparent);
}
.mkr-up svg { width: 10px; height: 10px; }
.mkr-pos {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px 5px 6px; border-radius: 10px;
  border: 1px solid var(--hairline); background: var(--surface-1); font-size: 11px;
}
.mkr-pos .mono { color: var(--text-3); }
.mkr-pos.up { border-color: color-mix(in srgb, var(--mint) 34%, var(--hairline)); }
.mkr-pos.up .mono { color: var(--mint); }
.mkr-pos.down { border-color: color-mix(in srgb, var(--rose) 34%, var(--hairline)); }
.mkr-pos.down .mono { color: var(--rose); }

/* Piyasa değeri dökümü — satır ikonları */
.mv-row { gap: 8px; }
.mv-row > span:not(.ic) { flex: 1; min-width: 0; }
.mv-row .ic {
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); color: var(--text-3);
}
.mv-row .ic svg { width: 11px; height: 11px; }

/* Kiralama koşulları paneli */
.ng-panel {
  padding: 11px 13px 4px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-1);
}
.ng-facts .tone-rose { background: color-mix(in srgb, var(--rose) 14%, transparent); color: var(--rose); }

/* ==========================================================================
   Pazarlık karar kartı — ret sallanır, kabul parlar, karşı teklif tartar
   ========================================================================== */
.ng-verdict {
  --vt: var(--amber);
  display: flex; align-items: center; gap: 11px;
  margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--vt) 38%, transparent);
  background:
    radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--vt) 11%, transparent), transparent 60%),
    var(--surface-1);
  animation: ng-in .32s cubic-bezier(.2, .9, .3, 1.2) both;
}
.ng-verdict.mint { --vt: var(--mint); box-shadow: var(--glow-mint); }
.ng-verdict.rose { --vt: var(--rose); }
.ng-verdict .ic {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--vt) 16%, transparent); color: var(--vt);
}
.ng-verdict .ic svg { width: 14px; height: 14px; }
.ng-verdict.mint .ic { animation: ng-pop .5s cubic-bezier(.2, 1.4, .4, 1) .08s both; }
.ng-verdict .tx { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.5; }
.ng-verdict.rose .tx { color: #ffa6a8; }
.ng-verdict .btn { flex: none; }
.ng-verdict.shake { animation: ng-in .32s cubic-bezier(.2, .9, .3, 1.2) both, ng-shake .45s ease .18s; }

@keyframes ng-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes ng-pop {
  0% { transform: scale(.2); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes ng-shake {
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
:root[data-fx="lite"] .ng-verdict,
:root[data-fx="lite"] .ng-verdict.shake,
:root[data-fx="lite"] .ng-verdict.mint .ic { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ng-verdict, .ng-verdict.shake, .ng-verdict.mint .ic { animation: none; }
}

/* Maç kampı kartı — pano köşesi */
.ol-campcard {
  border-color: color-mix(in srgb, var(--mint) 26%, var(--hairline));
  background:
    radial-gradient(130% 140% at 100% 0%, color-mix(in srgb, var(--mint) 8%, transparent), transparent 55%),
    var(--surface-1);
}
.ol-campcard .camp-ic {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mint) 16%, transparent); color: var(--mint);
}
.ol-campcard .camp-ic svg { width: 16px; height: 16px; }

/* ==========================================================================
   Basın toplantısı — mikrofonlar açık
   ========================================================================== */
.press-hero {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 14px; margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--violet) 30%, var(--hairline));
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--violet) 13%, transparent), transparent 60%),
    var(--surface-1);
}
.press-hero .ic {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--violet) 18%, transparent); color: var(--violet);
}
.press-hero .ic svg { width: 17px; height: 17px; }
.press-hero > div { flex: 1; min-width: 0; }
.press-hero b { display: block; font-family: var(--font-display, inherit); font-size: 15px; letter-spacing: .05em; }
.press-hero span { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.press-live {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 10px; border-radius: 999px; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--rose); background: color-mix(in srgb, var(--rose) 13%, transparent);
}
.press-live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--rose);
  animation: press-blink 1.2s ease-in-out infinite;
}
@keyframes press-blink { 50% { opacity: .25; } }
:root[data-fx="lite"] .press-live i { animation: none; }

.press-q {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 4px 14px 14px 14px; margin-bottom: 12px;
  border: 1px solid var(--hairline); background: var(--surface-2);
}
.press-q .who {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07); color: var(--text-3);
}
.press-q .who svg { width: 13px; height: 13px; }
.press-q p { margin: 2px 0 0; font-size: 13px; line-height: 1.55; font-style: italic; }

.press-a .tx i {
  font-family: inherit; letter-spacing: 0; font-size: 10.5px;
  color: var(--text-3); font-style: normal;
}
.press-a.dim-out { opacity: .35; }

.press-effs { display: flex; gap: 7px; flex-wrap: wrap; margin: 12px 0 0; }
.press-eff {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px; font-size: 11px;
  border: 1px solid var(--hairline); background: var(--surface-1);
  animation: ng-in .3s cubic-bezier(.2, .9, .3, 1.2) both;
}
.press-eff.up { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 34%, var(--hairline)); }
.press-eff.down { color: var(--rose); border-color: color-mix(in srgb, var(--rose) 34%, var(--hairline)); }

.press-clip {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(120, 90, 40, .08), transparent 60%),
    var(--surface-1);
  border: 1px solid var(--hairline-strong);
  animation: ng-in .35s cubic-bezier(.2, .9, .3, 1.2) .1s both;
}
.press-clip .mast {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--hairline-strong); padding-bottom: 6px; margin-bottom: 8px;
}
.press-clip .mast span {
  font-family: var(--font-display, inherit); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase;
}
.press-clip .mast i { font-style: normal; font-size: 10px; color: var(--text-3); letter-spacing: .1em; text-transform: uppercase; }
.press-clip h4 { margin: 0; font-size: 14.5px; line-height: 1.45; }

/* ==========================================================================
   Devre arası — soyunma odası
   ========================================================================== */
.ht-hero {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: 14px; margin-bottom: 10px;
  border: 1px solid color-mix(in srgb, var(--amber) 26%, var(--hairline));
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 60%),
    var(--surface-1);
}
.ht-hero .ic {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber);
}
.ht-hero .ic svg { width: 16px; height: 16px; }
.ht-hero > div { flex: 1; min-width: 0; }
.ht-hero b { display: block; font-family: var(--font-display, inherit); font-size: 15px; letter-spacing: .05em; }
.ht-hero span { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.ht-score {
  flex: none; padding: 6px 11px; border-radius: 10px; font-size: 13px;
  font-weight: 700; background: var(--surface-2); border: 1px solid var(--hairline);
}
.ht-score.up { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 34%, var(--hairline)); }
.ht-score.down { color: var(--rose); border-color: color-mix(in srgb, var(--rose) 34%, var(--hairline)); }

.ht-pulse {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; border-radius: 12px;
  border: 1px solid var(--hairline); background: var(--surface-1);
  font-size: 11.5px; color: var(--text-2);
}
.ht-pulse .bar {
  flex: 1; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .07);
}
.ht-pulse .bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 55%, transparent), var(--amber));
}

.ht-card {
  --tk: var(--amber);
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--surface-1);
  color: var(--text); transition: border-color .15s ease, background .15s ease;
}
.ht-card[data-tone="rose"] { --tk: var(--rose); }
.ht-card[data-tone="sky"] { --tk: var(--sky); }
.ht-card .strip { width: 3px; height: 32px; border-radius: 2px; flex: none; background: color-mix(in srgb, var(--tk) 55%, transparent); }
.ht-card .ic {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tk) 14%, transparent); color: var(--tk);
}
.ht-card .ic svg { width: 14px; height: 14px; }
.ht-card .tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ht-card .tx b { font-size: 12.5px; }
.ht-card .tx span { font-size: 10.5px; color: var(--text-3); }
.ht-card:hover { border-color: color-mix(in srgb, var(--tk) 55%, transparent); background: color-mix(in srgb, var(--tk) 7%, var(--surface-1)); }

/* ==========================================================================
   Derbi haftası — kulüp panosunun alev şeridi
   ========================================================================== */
.derby-week {
  margin-bottom: 16px; padding: 14px 16px 12px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--rose) 36%, var(--hairline));
  background:
    radial-gradient(130% 160% at 0% 0%, color-mix(in srgb, var(--rose) 13%, transparent), transparent 55%),
    radial-gradient(130% 160% at 100% 0%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 55%),
    var(--surface-1);
  animation: dw-glow 2.6s ease-in-out infinite;
}
@keyframes dw-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(242, 85, 90, .12), 0 10px 34px -14px rgba(242, 85, 90, .35); }
  50% { box-shadow: 0 0 0 1px rgba(242, 85, 90, .28), 0 12px 40px -12px rgba(242, 85, 90, .55); }
}
:root[data-fx="lite"] .derby-week { animation: none; }
@media (prefers-reduced-motion: reduce) { .derby-week { animation: none; } }

.dw-top { display: flex; align-items: flex-start; gap: 12px; }
.dw-top .flame {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--rose) 24%, transparent), color-mix(in srgb, var(--amber) 20%, transparent));
  color: var(--rose);
}
.dw-top .flame svg { width: 17px; height: 17px; }
.dw-top > div { flex: 1; min-width: 0; }
.dw-top b {
  display: block; font-family: var(--font-display, inherit); font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--rose), var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dw-top span { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.dw-tally {
  flex: none; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--hairline-strong); background: var(--surface-2);
}
.dw-meter {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  font-size: 11.5px; color: var(--text-2);
}
.dw-meter .bar { flex: 1; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .07); }
.dw-meter .bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--rose), var(--amber));
}
.dw-career { margin: 8px 0 0; font-size: 11px; color: var(--text-3); }

/* ==========================================================================
   Maç önü rakip brifingi
   ========================================================================== */
.pv-brief {
  margin-top: 12px; padding: 13px 15px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sky) 26%, var(--hairline));
  background:
    radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--sky) 9%, transparent), transparent 60%),
    var(--surface-1);
}
.bf-head { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 10px; }
.bf-ic {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sky) 15%, transparent); color: var(--sky);
}
.bf-ic svg { width: 14px; height: 14px; }
.bf-head p { margin: 3px 0 0; font-size: 11.5px; color: var(--text-2); }

.bf-lane {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border-radius: 10px; margin-top: 6px; font-size: 12px;
  border: 1px solid var(--hairline); background: var(--surface-2);
}
.bf-lane .ic {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); color: var(--text-3);
}
.bf-lane .ic svg { width: 11px; height: 11px; }
.bf-lane .lb { flex: 1; min-width: 0; }
.bf-lane .tag {
  padding: 2px 8px; border-radius: 999px; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase;
}
.bf-lane.hot .tag { color: var(--rose); background: color-mix(in srgb, var(--rose) 13%, transparent); }
.bf-lane.cold .tag { color: var(--mint); background: color-mix(in srgb, var(--mint) 13%, transparent); }

.bf-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.bf-plan {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 6px; border-radius: 11px; cursor: pointer; text-align: center;
  border: 1px solid var(--hairline); background: var(--surface-1); color: var(--text-2);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.bf-plan .ic {
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); color: var(--text-3);
}
.bf-plan .ic svg { width: 13px; height: 13px; }
.bf-plan b { font-size: 10.5px; line-height: 1.3; }
.bf-plan:hover { border-color: color-mix(in srgb, var(--sky) 50%, transparent); color: var(--text); }
.bf-plan.on {
  border-color: color-mix(in srgb, var(--sky) 60%, transparent);
  background: color-mix(in srgb, var(--sky) 13%, transparent); color: var(--text);
}
.bf-plan.on .ic { background: color-mix(in srgb, var(--sky) 18%, transparent); color: var(--sky); }
.bf-hint { margin: 9px 0 0; font-size: 10.5px; color: var(--text-3); }
.bf-hint.set { color: var(--mint); }

/* ==========================================================================
   Yönetim masası — sezon hedefi sözleşmesi
   ========================================================================== */
.bd-hero {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 14px; margin-bottom: 10px;
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--hairline));
  background:
    radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 60%),
    var(--surface-1);
}
.bd-hero .ic {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--amber) 17%, transparent); color: var(--amber);
}
.bd-hero .ic svg { width: 17px; height: 17px; }
.bd-hero > div { flex: 1; min-width: 0; }
.bd-hero b { display: block; font-family: var(--font-display, inherit); font-size: 15px; letter-spacing: .05em; }
.bd-hero span { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 2px; }

.bd-say {
  margin: 0 0 12px; padding: 11px 14px; font-size: 12.5px; line-height: 1.55;
  font-style: italic; color: var(--text-2);
  border-radius: 4px 14px 14px 14px;
  border: 1px solid var(--hairline); background: var(--surface-2);
}

.bd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
@media (max-width: 560px) { .bd-grid { grid-template-columns: 1fr; } }
.bd-card {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 13px 12px; border-radius: 13px;
  border: 1px solid var(--hairline); background: var(--surface-1);
  color: var(--text); font: inherit;
  transition: transform .16s ease, border-color .16s ease;
  animation: ng-in .32s cubic-bezier(.2, .9, .3, 1.2) both;
}
.bd-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
}
.bd-card:nth-child(2) { animation-delay: .06s; }
.bd-card:nth-child(3) { animation-delay: .12s; }
.bd-card.low::before { background: var(--mint); }
.bd-card.mid::before { background: var(--sky); }
.bd-card.high::before { background: var(--amber); }
.bd-card:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--hairline-strong); }
.bd-card.sug {
  border-color: color-mix(in srgb, var(--sky) 44%, var(--hairline));
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--sky) 9%, transparent), transparent 60%),
    var(--surface-1);
}
.bd-card.dim-out { opacity: .35; }
.bd-card .ic {
  width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); color: var(--text-2);
}
.bd-card .ic svg { width: 15px; height: 15px; }
.bd-card.low .ic { background: color-mix(in srgb, var(--mint) 14%, transparent); color: var(--mint); }
.bd-card.mid .ic { background: color-mix(in srgb, var(--sky) 14%, transparent); color: var(--sky); }
.bd-card.high .ic { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }
.bd-card > b { font-size: 13.5px; line-height: 1.3; }
.bd-wins { font-size: 10.5px; color: var(--text-2); }
.bd-cash {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: var(--mint); background: color-mix(in srgb, var(--mint) 12%, transparent);
}
.bd-cash svg { width: 12px; height: 12px; }
.bd-card > i { font-style: normal; font-size: 10.5px; color: var(--text-3); line-height: 1.4; }
.bd-sug {
  position: absolute; top: 9px; right: 9px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px; font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sky); background: color-mix(in srgb, var(--sky) 14%, transparent);
}
.bd-sug svg { width: 10px; height: 10px; }

.bd-signed {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 11px; align-items: center;
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--mint) 34%, var(--hairline));
  background: color-mix(in srgb, var(--mint) 7%, var(--surface-1));
  animation: ng-pop .4s cubic-bezier(.2, .9, .3, 1.4) both;
}
.bd-signed .ic {
  grid-row: span 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mint) 18%, transparent); color: var(--mint);
}
.bd-signed .ic svg { width: 15px; height: 15px; }
.bd-signed b { font-size: 13px; }
.bd-signed > span:not(.ic) { font-size: 11.5px; color: var(--text-2); line-height: 1.45; }

:root[data-fx="lite"] .bd-card,
:root[data-fx="lite"] .bd-signed { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .bd-card, .bd-signed { animation: none; }
  .bd-card:hover:not(:disabled) { transform: none; }
}

/* ==========================================================================
   Menajer kimliği — itibar + lisans profil kartı
   ========================================================================== */
.mg-card {
  --mg-tone: var(--amber);
  position: relative; overflow: hidden;
  padding: 16px; border-radius: 16px; margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--mg-tone) 26%, var(--hairline));
  background:
    radial-gradient(130% 170% at 0% 0%, color-mix(in srgb, var(--mg-tone) 10%, transparent), transparent 55%),
    radial-gradient(120% 160% at 100% 100%, color-mix(in srgb, var(--mg-tone) 6%, transparent), transparent 55%),
    var(--surface-1);
}
.mg-card.tier-bronze { --mg-tone: #c98d5f; }
.mg-card.tier-silver { --mg-tone: #9fb2c8; }
.mg-card.tier-gold { --mg-tone: var(--amber); }
.mg-card.tier-legend { --mg-tone: var(--violet); }

.mg-head { display: flex; align-items: center; gap: 13px; }
.mg-ava {
  width: 52px; height: 52px; border-radius: 16px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display, inherit); font-size: 19px; letter-spacing: .04em;
  color: var(--mg-tone);
  background: color-mix(in srgb, var(--mg-tone) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--mg-tone) 40%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mg-tone) 8%, transparent);
}
.mg-who { flex: 1; min-width: 0; }
.mg-who b {
  display: block; font-family: var(--font-display, inherit);
  font-size: 19px; letter-spacing: .04em; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mg-who > span:not(.eyebrow) { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 1px; }
.mg-tier {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 6px 12px; border-radius: 999px; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--mg-tone);
  background: color-mix(in srgb, var(--mg-tone) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--mg-tone) 30%, transparent);
}
.mg-tier svg { width: 12px; height: 12px; }

.mg-rep { margin-top: 14px; }
.mg-rep .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.mg-rep .top b { font-size: 16px; }
.mg-rep .top b i { font-style: normal; font-size: 11px; color: var(--text-3); }
.mg-meter {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--mg-tone) 10%, var(--surface-2));
}
.mg-meter i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mg-tone) 55%, transparent), var(--mg-tone));
  animation: mg-fill .7s cubic-bezier(.25, .9, .3, 1) both;
  transform-origin: left;
}
@keyframes mg-fill { from { transform: scaleX(0); } }
:root[data-fx="lite"] .mg-meter i { animation: none; }
@media (prefers-reduced-motion: reduce) { .mg-meter i { animation: none; } }

.mg-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px;
}
.mg-stats > div {
  padding: 9px 6px; border-radius: 11px; text-align: center;
  border: 1px solid var(--hairline); background: var(--surface-2);
}
.mg-stats b { display: block; font-size: 15px; }
.mg-stats span {
  display: block; margin-top: 2px; font-size: 10.5px; color: var(--text-3);
  letter-spacing: .05em; text-transform: uppercase;
}

.mg-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.mg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; font-size: 11px;
  border: 1px solid var(--hairline); background: var(--surface-1);
  color: var(--text-3);
}
.mg-chip svg { width: 12px; height: 12px; }
.mg-chip.got {
  color: var(--mg-tone);
  border-color: color-mix(in srgb, var(--mg-tone) 34%, var(--hairline));
  background: color-mix(in srgb, var(--mg-tone) 9%, transparent);
}

@media (max-width: 560px) {
  .mg-stats { grid-template-columns: repeat(2, 1fr); }
  .mg-tier { padding: 5px 9px; }
}

/* ==========================================================================
   Menajer telefonu — gelen transfer araması
   ========================================================================== */
.ph-frame {
  border-radius: 18px; overflow: hidden; margin-bottom: 12px;
  border: 1px solid var(--hairline-strong);
  background:
    radial-gradient(140% 100% at 50% 0%, color-mix(in srgb, var(--mint) 7%, transparent), transparent 55%),
    var(--surface-2);
}
.ph-status {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--hairline);
}
.ph-status > span:nth-child(2) { flex: 1; }
.ph-sig { display: inline-flex; align-items: flex-end; gap: 2px; }
.ph-sig i { width: 3px; border-radius: 1px; background: var(--text-3); display: block; }
.ph-sig i:nth-child(1) { height: 4px; }
.ph-sig i:nth-child(2) { height: 7px; }
.ph-sig i:nth-child(3) { height: 10px; }
.ph-live {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--mint); letter-spacing: .12em;
}
.ph-live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mint);
  animation: press-blink 1.1s ease-in-out infinite;
}
:root[data-fx="lite"] .ph-live i { animation: none; }

.ph-caller { padding: 18px 16px 14px; text-align: center; }
.ph-ring {
  position: relative; display: inline-flex; padding: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--mint) 8%, transparent);
}
.ph-ring::before, .ph-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--mint) 45%, transparent);
  animation: ph-pulse 1.8s ease-out infinite;
}
.ph-ring::after { animation-delay: .9s; }
@keyframes ph-pulse {
  from { transform: scale(1); opacity: .9; }
  to { transform: scale(1.65); opacity: 0; }
}
:root[data-fx="lite"] .ph-ring::before,
:root[data-fx="lite"] .ph-ring::after { animation: none; opacity: .35; }
@media (prefers-reduced-motion: reduce) {
  .ph-ring::before, .ph-ring::after { animation: none; opacity: .35; }
  .ph-live i { animation: none; }
  .ph-calling i { animation: none; }
}
.ph-caller b {
  display: block; margin-top: 9px;
  font-family: var(--font-display, inherit); font-size: 17px; letter-spacing: .04em;
}
.ph-calling { display: block; margin-top: 2px; font-size: 11px; color: var(--text-3); }
.ph-calling i {
  font-style: normal; animation: ph-dot 1.2s infinite;
}
.ph-calling i:nth-child(2) { animation-delay: .2s; }
.ph-calling i:nth-child(3) { animation-delay: .4s; }
@keyframes ph-dot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
:root[data-fx="lite"] .ph-calling i { animation: none; }

.ph-deal { padding: 0 14px 14px; }
.ph-player {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--hairline); background: var(--surface-1);
}
.ph-player b { font-size: 13.5px; }
.ph-player .dim { font-size: 11px; }
.ph-price {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 9px; padding: 11px 13px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--hairline));
  background: color-mix(in srgb, var(--amber) 7%, var(--surface-1));
}
.ph-price b { display: block; font-size: 21px; margin-top: 2px; }
.ph-keen {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px; font-size: 10.5px;
  color: var(--sky); background: color-mix(in srgb, var(--sky) 12%, transparent);
}
.ph-keen svg { width: 12px; height: 12px; }
.ph-note { margin: 9px 2px; font-size: 11.5px; color: var(--text-3); }
#ph-counter { margin-bottom: 4px; }
#ph-counter.dim-out { opacity: .4; }
.ph-reply {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 9px 12px; border-radius: 10px; font-size: 11.5px;
  border: 1px solid var(--hairline); background: var(--surface-1);
  animation: ng-in .3s cubic-bezier(.2, .9, .3, 1.2) both;
}
.ph-reply svg { width: 13px; height: 13px; flex: none; }
.ph-reply.ok { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 34%, var(--hairline)); }
.ph-reply.no { color: var(--text-2); }
:root[data-fx="lite"] .ph-reply { animation: none; }

/* Brifing kilidi — keşif raporu olmadan damarlar kapalı göz. */
.bf-lock {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; padding: 16px 12px; margin-top: 2px; cursor: pointer;
  border: 1px dashed var(--hairline-strong); border-radius: 12px;
  background: var(--surface-1); color: var(--text-2); font: inherit;
  text-align: center; transition: border-color .15s ease;
}
.bf-lock:hover { border-color: color-mix(in srgb, var(--sky) 45%, var(--hairline-strong)); }
.bf-lock .ic {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); color: var(--text-3);
}
.bf-lock .ic svg { width: 17px; height: 17px; }
.bf-lock b { font-size: 12.5px; }
.bf-lock > span:not(.ic) { font-size: 10.5px; color: var(--text-3); line-height: 1.45; }

/* ==========================================================================
   Referans üretim — oyuncu kartındaki gerçek dünya karnesi
   ========================================================================== */
.ref-card {
  background:
    radial-gradient(120% 150% at 100% 0%, color-mix(in srgb, var(--sky) 8%, transparent), transparent 55%),
    var(--surface-1);
}
.ref-ic {
  width: 28px; height: 28px; border-radius: 9px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sky) 14%, transparent); color: var(--sky);
}
.ref-ic svg { width: 14px; height: 14px; }
.ref-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 12px 0;
}
.ref-grid > div {
  padding: 9px 4px; border-radius: 11px; text-align: center;
  border: 1px solid var(--hairline); background: var(--surface-2);
}
.ref-grid > div.hi {
  border-color: color-mix(in srgb, var(--amber) 34%, var(--hairline));
  background: color-mix(in srgb, var(--amber) 7%, var(--surface-2));
}
.ref-grid > div.hi b { color: var(--amber); }
.ref-grid b { display: block; font-size: 15px; }
.ref-grid span {
  display: block; margin-top: 2px; font-size: 9px; color: var(--text-3);
  letter-spacing: .1em; text-transform: uppercase;
}
.ref-meter { display: flex; align-items: center; gap: 9px; margin-top: 7px; }
.ref-meter .lb {
  width: 34px; flex: none; font-size: 10px; color: var(--text-3);
  letter-spacing: .1em; text-transform: uppercase;
}
.ref-meter .bar {
  flex: 1; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .07);
}
.ref-meter .bar i { display: block; height: 100%; border-radius: 999px; }
.ref-meter .bar i.amber { background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 55%, transparent), var(--amber)); }
.ref-meter .bar i.sky { background: linear-gradient(90deg, color-mix(in srgb, var(--sky) 55%, transparent), var(--sky)); }
.ref-meter b { flex: none; width: 44px; text-align: right; font-size: 11.5px; }
@media (max-width: 560px) { .ref-grid { grid-template-columns: repeat(5, 1fr); gap: 5px; } }

/* ==========================================================================
   Kabine kapısı — oyuncu talebi sahnesi
   ========================================================================== */
.gk-hero {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px; border-radius: 16px; margin-bottom: 10px;
  border: 1px solid var(--hairline-strong); background: var(--surface-1);
  position: relative; overflow: hidden;
}
.gk-hero.tone-rose {
  border-color: color-mix(in srgb, var(--rose) 32%, var(--hairline));
  background:
    radial-gradient(130% 170% at 0% 0%, color-mix(in srgb, var(--rose) 12%, transparent), transparent 58%),
    radial-gradient(120% 160% at 100% 100%, color-mix(in srgb, var(--rose) 6%, transparent), transparent 55%),
    var(--surface-1);
}
.gk-hero.tone-amber {
  border-color: color-mix(in srgb, var(--amber) 32%, var(--hairline));
  background:
    radial-gradient(130% 170% at 0% 0%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 58%),
    radial-gradient(120% 160% at 100% 100%, color-mix(in srgb, var(--amber) 6%, transparent), transparent 55%),
    var(--surface-1);
}
.gk-hero.tone-mint {
  border-color: color-mix(in srgb, var(--mint) 32%, var(--hairline));
  background:
    radial-gradient(130% 170% at 0% 0%, color-mix(in srgb, var(--mint) 12%, transparent), transparent 58%),
    radial-gradient(120% 160% at 100% 100%, color-mix(in srgb, var(--mint) 6%, transparent), transparent 55%),
    var(--surface-1);
}
.gk-ring {
  position: relative; display: inline-flex; padding: 5px; border-radius: 50%;
  flex: none; background: rgba(255, 255, 255, .05);
}
.gk-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--hairline-strong);
  animation: ph-pulse 2s ease-out infinite;
}
.gk-hero.tone-rose .gk-ring::before { border-color: color-mix(in srgb, var(--rose) 45%, transparent); }
.gk-hero.tone-amber .gk-ring::before { border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.gk-hero.tone-mint .gk-ring::before { border-color: color-mix(in srgb, var(--mint) 45%, transparent); }
:root[data-fx="lite"] .gk-ring::before { animation: none; opacity: .4; }
.gk-ava {
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display, inherit); font-size: 16px; letter-spacing: .04em;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  background: linear-gradient(135deg, var(--c1, var(--amber)), var(--c2, #16233d));
  border: 1px solid rgba(255, 255, 255, .18);
}
.gk-hero > div { flex: 1; min-width: 0; }
.gk-kind {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  background: rgba(255, 255, 255, .07); color: var(--text-2);
}
.gk-hero.tone-rose .gk-kind { color: var(--rose); background: color-mix(in srgb, var(--rose) 13%, transparent); }
.gk-hero.tone-amber .gk-kind { color: var(--amber); background: color-mix(in srgb, var(--amber) 13%, transparent); }
.gk-hero.tone-mint .gk-kind { color: var(--mint); background: color-mix(in srgb, var(--mint) 13%, transparent); }
.gk-kind svg { width: 11px; height: 11px; }
.gk-hero b {
  display: block; margin-top: 4px;
  font-family: var(--font-display, inherit); font-size: 17px; letter-spacing: .04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gk-sub { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 1px; }
.gk-pos { flex: none; }

.gk-meters {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
  padding: 10px 13px; border-radius: 12px; margin-bottom: 10px;
  border: 1px solid var(--hairline); background: var(--surface-1);
}
@media (max-width: 430px) { .gk-meters { grid-template-columns: 1fr; } }
.gk-meter { display: flex; align-items: center; gap: 8px; }
.gk-meter .lb {
  flex: none; width: 44px; font-size: 9.5px; color: var(--text-3);
  letter-spacing: .1em; text-transform: uppercase;
}
.gk-meter .bar {
  flex: 1; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .07);
}
.gk-meter .bar i {
  display: block; height: 100%; border-radius: 999px;
  animation: mg-fill .6s cubic-bezier(.25, .9, .3, 1) both;
  transform-origin: left;
}
.gk-meter .bar i.mint { background: linear-gradient(90deg, color-mix(in srgb, var(--mint) 55%, transparent), var(--mint)); }
.gk-meter .bar i.amber { background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 55%, transparent), var(--amber)); }
.gk-meter .bar i.rose { background: linear-gradient(90deg, color-mix(in srgb, var(--rose) 55%, transparent), var(--rose)); }
.gk-meter b { flex: none; width: 24px; text-align: right; font-size: 11.5px; }
:root[data-fx="lite"] .gk-meter .bar i { animation: none; }

.gk-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px;
  margin-bottom: 10px;
}
.gk-stats > div {
  padding: 8px 4px; border-radius: 11px; text-align: center;
  border: 1px solid var(--hairline); background: var(--surface-1);
}
.gk-stats > div.hi {
  border-color: color-mix(in srgb, var(--amber) 34%, var(--hairline));
  background: color-mix(in srgb, var(--amber) 7%, var(--surface-1));
}
.gk-stats > div.hi b { color: var(--amber); }
.gk-stats b { display: block; font-size: 14px; }
.gk-stats span {
  display: block; margin-top: 2px; font-size: 9px; color: var(--text-3);
  letter-spacing: .1em; text-transform: uppercase;
}
@media (max-width: 430px) { .gk-stats { gap: 5px; } }

.gk-say {
  position: relative;
  padding: 14px 16px 13px 40px; border-radius: 4px 16px 16px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--hairline); background: var(--surface-2);
}
.gk-q {
  position: absolute; top: 2px; left: 12px;
  font-family: var(--font-display, inherit); font-size: 34px; line-height: 1;
  color: var(--text-4, var(--text-3)); opacity: .8;
}
.gk-q::before { content: "\201C"; }
.gk-say p { margin: 0; font-size: 13.5px; line-height: 1.6; font-style: italic; }
.gk-hint {
  display: flex; align-items: center; gap: 7px;
  margin: 0 2px 10px; font-size: 10.5px; color: var(--text-3);
}
.gk-hint svg { width: 12px; height: 12px; flex: none; }

.gk-opts { display: grid; gap: 8px; }
.gk-opt {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 12px 13px 12px 16px; border-radius: 13px; text-align: left;
  border: 1px solid var(--hairline); background: var(--surface-1);
  color: var(--text); font: inherit;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
  animation: ng-in .32s cubic-bezier(.2, .9, .3, 1.2) both;
}
.gk-opt::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; }
.gk-opt.tone-mint::before { background: var(--mint); }
.gk-opt.tone-sky::before { background: var(--sky); }
.gk-opt.tone-amber::before { background: var(--amber); }
.gk-opt.tone-rose::before { background: var(--rose); }
.gk-opt:nth-child(2) { animation-delay: .06s; }
.gk-opt:nth-child(3) { animation-delay: .12s; }
.gk-opt:hover:not(:disabled) { transform: translateY(-1px); }
.gk-opt.tone-mint:hover:not(:disabled) { border-color: color-mix(in srgb, var(--mint) 45%, var(--hairline)); background: color-mix(in srgb, var(--mint) 5%, var(--surface-1)); }
.gk-opt.tone-sky:hover:not(:disabled) { border-color: color-mix(in srgb, var(--sky) 45%, var(--hairline)); background: color-mix(in srgb, var(--sky) 5%, var(--surface-1)); }
.gk-opt.tone-amber:hover:not(:disabled) { border-color: color-mix(in srgb, var(--amber) 45%, var(--hairline)); background: color-mix(in srgb, var(--amber) 5%, var(--surface-1)); }
.gk-opt.tone-rose:hover:not(:disabled) { border-color: color-mix(in srgb, var(--rose) 45%, var(--hairline)); background: color-mix(in srgb, var(--rose) 5%, var(--surface-1)); }
.gk-opt.dim-out { opacity: .32; }
.gk-opt .ic {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); color: var(--text-2);
}
.gk-opt.tone-mint .ic { background: color-mix(in srgb, var(--mint) 14%, transparent); color: var(--mint); }
.gk-opt.tone-sky .ic { background: color-mix(in srgb, var(--sky) 14%, transparent); color: var(--sky); }
.gk-opt.tone-amber .ic { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }
.gk-opt.tone-rose .ic { background: color-mix(in srgb, var(--rose) 14%, transparent); color: var(--rose); }
.gk-opt .ic svg { width: 15px; height: 15px; }
.gk-opt .tx { flex: 1; min-width: 0; }
.gk-opt .tx b { display: block; font-size: 13px; line-height: 1.35; }
.gk-opt .tx i {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 10.5px; color: var(--text-3); line-height: 1.4;
}

.gk-res {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 9px; padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--hairline); background: var(--surface-1);
  font-size: 12px; line-height: 1.55; color: var(--text-2);
  animation: ng-pop .4s cubic-bezier(.2, .9, .3, 1.4) both;
}
.gk-res.tone-mint {
  border-color: color-mix(in srgb, var(--mint) 34%, var(--hairline));
  background: color-mix(in srgb, var(--mint) 6%, var(--surface-1));
}
.gk-res.tone-rose {
  border-color: color-mix(in srgb, var(--rose) 30%, var(--hairline));
  background: color-mix(in srgb, var(--rose) 5%, var(--surface-1));
}
.gk-res .ic {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07); color: var(--text-2);
}
.gk-res.tone-mint .ic { background: color-mix(in srgb, var(--mint) 16%, transparent); color: var(--mint); }
.gk-res.tone-rose .ic { background: color-mix(in srgb, var(--rose) 16%, transparent); color: var(--rose); }
.gk-res .ic svg { width: 12px; height: 12px; }

:root[data-fx="lite"] .gk-opt,
:root[data-fx="lite"] .gk-res { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .gk-opt, .gk-res { animation: none; }
  .gk-opt:hover:not(:disabled) { transform: none; }
  .gk-ring::before { animation: none; opacity: .4; }
  .gk-meter .bar i { animation: none; }
}

/* ==========================================================================
   PANO oyunlaştırma — menajer şeridi, hedef halkası, hero eklentileri
   ========================================================================== */
.mgr-strip {
  --ms-tone: var(--amber);
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 14px; margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--ms-tone) 24%, var(--hairline));
  background:
    radial-gradient(130% 200% at 0% 0%, color-mix(in srgb, var(--ms-tone) 11%, transparent), transparent 55%),
    radial-gradient(120% 200% at 100% 100%, color-mix(in srgb, var(--ms-tone) 6%, transparent), transparent 50%),
    var(--surface-1);
}
/* Üst kenarda ton renkli ışık çizgisi — stat kutularıyla aynı dil. */
.mgr-strip::before {
  content: '';
  position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ms-tone) 48%, transparent), transparent);
  pointer-events: none;
}
.mgr-strip.tier-bronze { --ms-tone: #c98d5f; }
.mgr-strip.tier-silver { --ms-tone: #9fb2c8; }
.mgr-strip.tier-gold { --ms-tone: var(--amber); }
.mgr-strip.tier-legend { --ms-tone: var(--violet); }
.mgr-strip .ava {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display, inherit); font-size: 13px;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  background: linear-gradient(135deg, var(--c1, var(--amber)), var(--c2, #16233d));
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-tone) 12%, transparent);
}
.mgr-strip .who { flex: none; min-width: 0; }
.mgr-strip .who b {
  display: block; font-family: var(--font-display, inherit);
  font-size: 13.5px; letter-spacing: .04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px;
}
.mgr-strip .tier {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
  padding: 2px 8px; border-radius: 999px; font-size: 8.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ms-tone); background: color-mix(in srgb, var(--ms-tone) 13%, transparent);
}
.mgr-strip .tier svg { width: 10px; height: 10px; }
.mgr-strip .rep { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 120px; }
.mgr-strip .rep .lb {
  flex: none; font-size: 10.5px; color: var(--text-3);
  letter-spacing: .12em; text-transform: uppercase;
}
.mgr-strip .rep .bar {
  position: relative;
  flex: 1; height: 8px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--ms-tone) 10%, var(--surface-2));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
/* Lisans eşiği çentikleri (35/60/85) — bir sonraki kademeye ne kadar
   kaldığı çubuğun üzerinde okunur. */
.mgr-strip .rep .bar u {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: rgba(255, 255, 255, .28); text-decoration: none;
  pointer-events: none;
}
.mgr-strip .rep .bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ms-tone) 55%, transparent), var(--ms-tone));
  animation: mg-fill .7s cubic-bezier(.25, .9, .3, 1) both; transform-origin: left;
}
.mgr-strip .rep b { flex: none; font-size: 12.5px; }
:root[data-fx="lite"] .mgr-strip .rep .bar i { animation: none; }
@media (max-width: 560px) {
  .mgr-strip { flex-wrap: wrap; }
  .mgr-strip .rep { min-width: 100%; }
}

.goal-ring {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
}
.goal-ring .gr-wrap { position: relative; flex: none; width: 64px; height: 64px; }
.goal-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.goal-ring .track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 6; }
.goal-ring .fill {
  fill: none; stroke-width: 6; stroke-linecap: round;
  transition: stroke-dasharray .6s cubic-bezier(.25, .9, .3, 1);
}
.goal-ring.tone-mint .fill { stroke: var(--mint); }
.goal-ring.tone-amber .fill { stroke: var(--amber); }
.goal-ring.tone-rose .fill { stroke: var(--rose); }
.goal-ring .num {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 15px; font-weight: 700;
}
.goal-ring .num i { font-style: normal; font-size: 10px; color: var(--text-3); margin-top: 3px; }
.goal-ring .txt { flex: 1; min-width: 0; }
.goal-ring .txt b { display: block; font-size: 13.5px; margin-top: 2px; }
.goal-ring .pace { display: block; margin-top: 3px; font-size: 10.5px; }
.goal-ring.tone-mint .pace { color: var(--mint); }
.goal-ring.tone-amber .pace { color: var(--amber); }
.goal-ring.tone-rose .pace { color: var(--rose); }

.vs-form { display: flex; justify-content: center; margin-top: 5px; }
.vs-odds {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  margin: 12px 2px 0; padding: 9px 12px; border-radius: 11px;
  border: 1px solid var(--hairline); background: rgba(0, 0, 0, .22);
}
.vs-odds .lb {
  flex: none; font-size: 10.5px; color: var(--text-3);
  letter-spacing: .12em; text-transform: uppercase;
}
.vs-odds .bar {
  flex: 1; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.vs-odds .bar i { display: block; height: 100%; border-radius: 999px; }
.vs-odds .bar i.up { background: linear-gradient(90deg, color-mix(in srgb, var(--mint) 55%, transparent), var(--mint)); }
.vs-odds .bar i.down { background: linear-gradient(90deg, color-mix(in srgb, var(--rose) 55%, transparent), var(--rose)); }
.vs-odds b { flex: none; font-size: 12.5px; }
.vs-derbyin {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 8px 2px 0; padding: 6px 10px; border-radius: 999px;
  font-size: 10.5px; letter-spacing: .06em;
  color: var(--rose); background: color-mix(in srgb, var(--rose) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--rose) 35%, transparent);
}
.vs-derbyin svg { width: 12px; height: 12px; }
.vs-go {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 12px; padding: 14px; border-radius: 13px;
  border: 0; cursor: pointer; font: inherit;
  font-family: var(--font-display, inherit); letter-spacing: .08em;
  color: #1a1206; background: linear-gradient(135deg, #ffd37a, var(--amber));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--amber) 30%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.vs-go:hover { transform: translateY(-1px); box-shadow: 0 8px 26px color-mix(in srgb, var(--amber) 38%, transparent); }
.vs-go:active { transform: translateY(0); }
.vs-go .ic {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .18); color: #1a1206;
}
.vs-go .ic svg { width: 13px; height: 13px; }
.vs-go b { font-size: 14.5px; }
@media (prefers-reduced-motion: reduce) {
  .vs-go, .vs-go:hover { transform: none; }
  .mgr-strip .rep .bar i, .goal-ring .fill { animation: none; transition: none; }
}

/* --- hızlı aksiyon ızgarası ------------------------------------------------ */
.qa-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.qa-tile {
  --qa: var(--amber);
  position: relative; display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start; text-align: left;
  padding: 11px 12px; min-height: 44px; border-radius: 13px;
  border: 1px solid var(--hairline); background: var(--surface-1);
  color: var(--text-1, inherit); font: inherit; cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.qa-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--qa) 45%, var(--hairline));
}
.qa-tile:active { transform: translateY(0); }
.qa-tile .ic {
  width: 28px; height: 28px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--qa) 14%, transparent);
  color: var(--qa);
}
.qa-tile .ic svg { width: 15px; height: 15px; }
.qa-tile b { font-size: 12px; }
.qa-tile .sub {
  font-size: 10.5px; color: var(--text-3); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.qa-tile .dot {
  position: absolute; top: 8px; right: 8px; min-width: 17px; height: 17px;
  padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 10.5px/1 var(--font-mono);
}
.qa-tile .dot.rose {
  color: #fff; background: var(--rose);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 22%, transparent);
}
.qa-tile .dot.amber {
  color: #1a1206; background: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent);
}
@media (max-width: 900px) {
  .qa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}
:root[data-fx="lite"] .qa-tile, :root[data-fx="lite"] .qa-tile:hover { transition: none; transform: none; }

/* --- seri alevi ------------------------------------------------------------ */
.stk-band {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding: 12px 15px; border-radius: 14px; margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--hairline));
  background:
    radial-gradient(120% 220% at 0% 50%, color-mix(in srgb, var(--rose) 13%, transparent), transparent 45%),
    radial-gradient(120% 220% at 12% 50%, color-mix(in srgb, var(--amber) 15%, transparent), transparent 55%),
    var(--surface-1);
}
.stk-band > .ic {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--amber), var(--rose));
  color: #fff;
  box-shadow: 0 0 18px color-mix(in srgb, var(--amber) 55%, transparent);
}
.stk-band > .ic svg { width: 19px; height: 19px; }
.stk-band .txt { flex: 1; min-width: 190px; }
.stk-band .eyebrow {
  display: block; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber);
  font-family: var(--font-display);
}
.stk-band .txt b { display: block; font-size: 13.5px; margin-top: 2px; }
.stk-band .txt .sub { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.stk-band .steps { display: inline-flex; gap: 5px; align-items: flex-end; }
.stk-band .steps i {
  width: 14px; border-radius: 4px 4px 2px 2px;
  background: rgba(255, 255, 255, .08);
}
.stk-band .steps i.on {
  background: linear-gradient(180deg, var(--amber), var(--rose));
  box-shadow: 0 0 10px color-mix(in srgb, var(--amber) 45%, transparent);
}
.stk-band .steps i:nth-child(1) { height: 11px; }
.stk-band .steps i:nth-child(2) { height: 15px; }
.stk-band .steps i:nth-child(3) { height: 18px; }
.stk-band .steps i:nth-child(4) { height: 21px; }
.stk-band .steps i:nth-child(5) { height: 25px; }
.stk-band .steps i:nth-child(6) { height: 29px; }
.stk-band .steps i:nth-child(7) { height: 33px; }
.stk-band .rec {
  flex: none; padding: 5px 11px; border-radius: 999px; font-size: 10.5px;
  font-weight: 700; color: #1a1206;
  background: linear-gradient(90deg, #ffd98a, var(--amber));
  box-shadow: 0 0 12px color-mix(in srgb, var(--amber) 45%, transparent);
}

/* --- rozet vitrini ---------------------------------------------------------- */
.bdg-card { padding: 14px 16px; margin-bottom: 16px; }
.bdg-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.bdg-head h3 { margin: 0; }
.bdg-head .cnt { font-size: 11px; color: var(--text-3); }
.bdg-row {
  display: flex; gap: 13px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin;
}
.bdg {
  --bt: var(--amber);
  flex: none; width: 84px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; text-align: center;
}
.bdg .disc {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background:
    radial-gradient(100% 100% at 30% 25%, color-mix(in srgb, var(--bt) 38%, transparent), color-mix(in srgb, var(--bt) 12%, var(--surface-2)));
  border: 2px solid color-mix(in srgb, var(--bt) 55%, transparent);
  color: var(--bt);
  box-shadow: 0 0 14px color-mix(in srgb, var(--bt) 25%, transparent);
}
.bdg .disc svg { width: 23px; height: 23px; }
.bdg b { font-size: 10.5px; line-height: 1.25; }
.bdg .st { font-size: 10.5px; color: var(--text-3); }
.bdg.is-locked .disc {
  background: var(--surface-2); border-color: var(--hairline-strong);
  color: var(--text-3); box-shadow: none; filter: saturate(.25);
}
.bdg.is-locked b { color: var(--text-3); }
.bdg .pr {
  width: 100%; height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); overflow: hidden;
}
.bdg .pr i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 55%, transparent), var(--amber));
}

/* --- günlük seri ödülü kartı ---------------------------------------------- */
.daily-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 16px;
  border-color: color-mix(in srgb, var(--amber) 26%, var(--hairline));
  background:
    radial-gradient(130% 220% at 0% 0%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 52%),
    var(--surface-1);
}
.daily-card::before {
  content: '';
  position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--amber) 50%, transparent), transparent);
  pointer-events: none;
}
.dc-gift {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #1a1206;
  background: linear-gradient(150deg, #ffd98a, var(--amber));
  box-shadow: 0 0 16px color-mix(in srgb, var(--amber) 45%, transparent);
}
.dc-gift svg { width: 20px; height: 20px; }
.dc-txt { flex: 1; min-width: 180px; }
.dc-eyebrow {
  display: block; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--amber);
  font-family: var(--font-display);
}
.dc-txt b { display: block; font-size: 14px; margin-top: 2px; }
.dc-sub { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 2px; max-width: 520px; }
.dc-side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dc-week { display: flex; gap: 5px; }
.dc-pip {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 10.5px/1 var(--font-mono); color: var(--text-3);
  border: 1px solid var(--hairline-strong);
  background: var(--surface-2);
}
.dc-pip.on {
  color: #1a1206; border-color: transparent;
  background: linear-gradient(160deg, #ffd98a, var(--amber));
  box-shadow: 0 0 8px color-mix(in srgb, var(--amber) 40%, transparent);
}
.dc-pip.star { color: var(--amber); border-style: dashed; background: color-mix(in srgb, var(--amber) 8%, transparent); }
.dc-pip.star.on { color: #1a1206; border-style: solid; background: linear-gradient(160deg, #ffd98a, var(--amber)); }
.dc-pip svg { width: 11px; height: 11px; }
.dc-claim { white-space: nowrap; }
@media (max-width: 560px) {
  .dc-side { flex: 1 1 100%; justify-content: space-between; }
  .dc-claim { flex: 1; }
}

/* ==========================================================================
   Kariyer yuvası kartları — kariyer dosyası havası
   ========================================================================== */
.slot-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 11px;
  min-height: 190px; padding: 16px;
  border-color: color-mix(in srgb, var(--amber) 20%, var(--hairline));
  background:
    radial-gradient(130% 190% at 0% 0%, color-mix(in srgb, var(--amber) 9%, transparent), transparent 52%),
    var(--surface-1);
}
.slot-card::before {
  content: '';
  position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--amber) 45%, transparent), transparent);
  pointer-events: none;
}
.sc-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sc-crest {
  flex: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--amber) 14%, transparent),
    0 4px 14px rgba(0, 0, 0, .35);
}
.sc-who { min-width: 0; flex: 1; }
.sc-name {
  font-size: 18px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.sc-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.sc-cup {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px; font-size: 12px;
  color: #1a1206; background: linear-gradient(150deg, #ffd98a, var(--amber));
  box-shadow: 0 0 12px color-mix(in srgb, var(--amber) 40%, transparent);
}
.sc-cup svg { width: 13px; height: 13px; }
.sc-rec { display: flex; align-items: center; gap: 10px; }
.sc-rec > b { font-size: 15px; }
.sc-rec .bar {
  flex: 1; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.sc-rec .bar i { display: block; height: 100%; border-radius: 999px; }
.sc-rec.tone-mint .bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--mint) 55%, transparent), var(--mint)); }
.sc-rec.tone-amber .bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 55%, transparent), var(--amber)); }
.sc-rec.tone-rose .bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--rose) 55%, transparent), var(--rose)); }
.sc-rec .pct { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.sc-rec.tone-mint .pct { color: var(--mint); }
.sc-rec.tone-rose .pct { color: var(--rose); }
.sc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px;
  color: var(--text-3); border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, .03);
}
.sc-chip svg { width: 12px; height: 12px; }
.sc-chip.pres { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 30%, var(--hairline)); }
.slot-card .btn.pri svg { width: 13px; height: 13px; }

/* Boş yuva: davetkâr kesikli kart. */
.slot-card.is-empty {
  align-items: center; justify-content: center; gap: 10px;
  text-align: center; cursor: pointer;
  border-style: dashed; background: var(--surface-1);
  transition: border-color .15s, transform .15s;
}
.slot-card.is-empty:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--amber) 45%, var(--hairline));
}
.slot-card.is-empty::before { display: none; }
.sc-plus {
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--amber) 45%, transparent);
}
.sc-plus svg { width: 20px; height: 20px; }
.sc-newlb { font-size: 15px; letter-spacing: .1em; }
.sc-slotno {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-3); border: 1px solid var(--hairline);
}
:root[data-fx="lite"] .slot-card.is-empty, :root[data-fx="lite"] .slot-card.is-empty:hover { transition: none; transform: none; }

/* ==========================================================================
   Bütçe kartı + seçim hakları + kulüp haberleri cilası
   ========================================================================== */
.bg-rows { display: flex; flex-direction: column; }
.bg-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 2px; font-size: 13px;
}
.bg-row + .bg-row { border-top: 1px solid rgba(255, 255, 255, .04); }
.bg-row .ic {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bt, var(--amber)) 13%, transparent);
  color: var(--bt, var(--amber));
}
.bg-row .ic svg { width: 13px; height: 13px; }
.bg-row .lb { flex: 1; min-width: 0; color: var(--text-2); }
.bg-row .val { font-size: 13.5px; }
.bg-cap { margin-top: 11px; }
.bg-cap .head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11.5px; color: var(--text-3); margin-bottom: 6px;
}
.bg-cap .head b { font-size: 12.5px; }
.bg-cap.tone-mint .head b { color: var(--mint); }
.bg-cap.tone-amber .head b { color: var(--amber); }
.bg-cap.tone-rose .head b { color: var(--rose); }
.bg-cap .bar {
  display: block; height: 7px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.bg-cap .bar i { display: block; height: 100%; border-radius: 999px; }
.bg-cap.tone-mint .bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--mint) 55%, transparent), var(--mint)); }
.bg-cap.tone-amber .bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 55%, transparent), var(--amber)); }
.bg-cap.tone-rose .bar i {
  background: linear-gradient(90deg, color-mix(in srgb, var(--rose) 55%, transparent), var(--rose));
  box-shadow: 0 0 10px color-mix(in srgb, var(--rose) 45%, transparent);
}

/* Seçim hakları: 1. tur kehribar, 2. tur sönük, takasla gelen gök. */
.pk-wrap { display: flex; flex-wrap: wrap; gap: 7px; }
.pk-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 999px; font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--text-2); border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, .03);
}
.pk-chip.r1 {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 35%, var(--hairline));
  background: color-mix(in srgb, var(--amber) 9%, transparent);
}
.pk-chip.from {
  color: var(--sky, #4ea8f5);
  border-color: color-mix(in srgb, var(--sky, #4ea8f5) 35%, var(--hairline));
  background: color-mix(in srgb, var(--sky, #4ea8f5) 10%, transparent);
}
.pk-chip svg { width: 11px; height: 11px; }
.pk-legend {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: 11.5px; color: var(--text-3); margin: 9px 0 0;
}
.pk-legend svg { flex: none; width: 13px; height: 13px; margin-top: 1px; }

/* Kulüp haberleri: zaman çizgisi — sol ray, tonlu noktalar. */
.nw-line { position: relative; padding-left: 4px; }
.nw-line::before {
  content: '';
  position: absolute; left: 8px; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--hairline-strong) 12%, var(--hairline-strong) 88%, transparent);
}
.nw-line .news-item {
  position: relative; align-items: flex-start;
  padding: 8px 6px 8px 16px; border-left: 0; border-radius: 9px;
}
.nw-line .news-item:hover { background: rgba(255, 255, 255, .03); }
.nw-line .nw-dot {
  position: absolute; left: 1px; top: 13px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-4, var(--text-3));
}
.nw-line .news-item.amber .nw-dot { background: var(--amber); box-shadow: 0 0 7px color-mix(in srgb, var(--amber) 60%, transparent); }
.nw-line .news-item.mint .nw-dot { background: var(--mint); box-shadow: 0 0 7px color-mix(in srgb, var(--mint) 60%, transparent); }
.nw-line .news-item.rose .nw-dot { background: var(--rose); box-shadow: 0 0 7px color-mix(in srgb, var(--rose) 60%, transparent); }
.nw-line .news-item .r { padding-top: 1px; }
.nw-line .news-item .tx { font-size: 12.5px; line-height: 1.45; }

/* ==========================================================================
   Oyuncu kartı modernizasyonu — OVR halkası + nitelik grupları
   ========================================================================== */
.pc-ovr { position: relative; flex: none; width: 64px; height: 64px; margin-left: auto; }
.pc-ovr svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.pc-ovr .track { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 5; }
.pc-ovr .fill { fill: none; stroke-width: 5; stroke-linecap: round; }
.pc-ovr.tone-amber .fill { stroke: var(--amber); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--amber) 55%, transparent)); }
.pc-ovr.tone-sky .fill { stroke: var(--sky, #4ea8f5); }
.pc-ovr.tone-rose .fill { stroke: var(--rose); }
.pc-ovr .num {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0;
}
.pc-ovr .num b { font-size: 19px; line-height: 1; }
.pc-ovr .num i {
  font-style: normal; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); margin-top: 2px;
}

/* Sözleşme satırları: ince ayraçlar — düz liste "tablo" gibi okunur. */
.pc-rows { display: flex; flex-direction: column; font-size: 13px; }
.pc-rows > .row { padding: 6px 0; }
.pc-rows > .row + .row,
.pc-rows > .scout-row { border-top: 1px solid rgba(255, 255, 255, .04); }
.pc-rows > .scout-row { padding-top: 8px; margin-top: 2px; }

/* En yüksek üç nitelik. */
.ag-best { margin: 4px 0 14px; }
.ag-best .eyebrow { display: block; margin-bottom: 8px; }
.ag-best .cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.ag-best .cell {
  --at: var(--amber);
  padding: 10px 8px; text-align: center; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--at) 26%, var(--hairline));
  background:
    radial-gradient(120% 150% at 50% 0%, color-mix(in srgb, var(--at) 10%, transparent), transparent 60%),
    var(--surface-2);
}
.ag-best .cell.tone-sky { --at: var(--sky, #4ea8f5); }
.ag-best .cell.tone-rose { --at: var(--rose); }
.ag-best .cell b { display: block; font-size: 21px; color: var(--at); }
.ag-best .cell span { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 3px; }

/* Kategori grupları: ikonlu başlık + ortalama rozeti + tonlu çubuklar. */
.ag-group { padding: 10px 0 4px; border-top: 1px solid rgba(255, 255, 255, .05); }
.ag-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.ag-head .ic {
  width: 24px; height: 24px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .05); color: var(--text-2);
}
.ag-head .ic svg { width: 13px; height: 13px; }
.ag-head .lb {
  flex: 1; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); font-family: var(--font-display);
}
.ag-head .avg {
  min-width: 34px; text-align: center; padding: 3px 8px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
}
.ag-head .avg.tone-amber { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.ag-head .avg.tone-sky { color: var(--sky, #4ea8f5); background: color-mix(in srgb, var(--sky, #4ea8f5) 12%, transparent); }
.ag-head .avg.tone-rose { color: var(--rose); background: color-mix(in srgb, var(--rose) 12%, transparent); }
.ag-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.ag-row .lb { flex: none; width: 92px; font-size: 12px; color: var(--text-2); }
.ag-row .bar {
  flex: 1; height: 7px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .07);
}
.ag-row .bar i { display: block; height: 100%; border-radius: 999px; }
.ag-row .bar.tone-amber i { background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 55%, transparent), var(--amber)); }
.ag-row .bar.tone-sky i { background: linear-gradient(90deg, color-mix(in srgb, var(--sky, #4ea8f5) 55%, transparent), var(--sky, #4ea8f5)); }
.ag-row .bar.tone-rose i { background: linear-gradient(90deg, color-mix(in srgb, var(--rose) 55%, transparent), var(--rose)); }
.ag-row .vl { flex: none; min-width: 24px; text-align: right; font-size: 12.5px; }

/* ==========================================================================
   Oyuncu kartı aksiyon karoları + reklam bandı
   ========================================================================== */
.pc-acts {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px; align-items: stretch;
}
.pca {
  --pt: var(--amber);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 8px; min-height: 44px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--pt) 24%, var(--hairline));
  background:
    radial-gradient(120% 150% at 50% 0%, color-mix(in srgb, var(--pt) 8%, transparent), transparent 60%),
    var(--surface-1);
  color: var(--text-1, inherit); font: inherit; cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.pca:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--pt) 55%, var(--hairline));
}
.pca:active:not(:disabled) { transform: translateY(0); }
.pca:disabled { opacity: .45; cursor: default; }
.pca .ic {
  width: 30px; height: 30px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--pt) 14%, transparent);
  color: var(--pt);
}
.pca .ic svg { width: 15px; height: 15px; }
.pca b {
  font-size: 11px; line-height: 1.2; text-align: center;
  letter-spacing: .04em;
}
.pca.t-sky { --pt: var(--sky, #4ea8f5); }
.pca.t-violet { --pt: var(--violet); }
.pca.t-mint { --pt: var(--mint); }
.pca.t-rose { --pt: var(--rose); }
.pca.t-amber { --pt: var(--amber); }
/* Etkin durum (dinleniyor): dolgun kehribar/gök. */
.pca.is-on {
  border-color: var(--pt);
  background: color-mix(in srgb, var(--pt) 16%, var(--surface-1));
  box-shadow: 0 0 12px color-mix(in srgb, var(--pt) 30%, transparent);
}
:root[data-fx="lite"] .pca, :root[data-fx="lite"] .pca:hover { transition: none; transform: none; }

/* Reklam ödül bandı — antrenman ekranındaki iki ödül tek dilde. */
.ad-band {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 14px; border-radius: 13px; text-align: left;
  border: 1px dashed color-mix(in srgb, var(--amber) 45%, transparent);
  background:
    radial-gradient(130% 200% at 0% 50%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 55%),
    var(--surface-1);
  color: var(--text-1, inherit); font: inherit; cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.ad-band:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--amber); }
.ad-band:disabled { opacity: .55; cursor: default; }
.ad-band .ic {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #1a1206;
  background: linear-gradient(150deg, #ffd98a, var(--amber));
  box-shadow: 0 0 12px color-mix(in srgb, var(--amber) 45%, transparent);
}
.ad-band .ic svg { width: 14px; height: 14px; }
.ad-band b { flex: 1; font-size: 13px; }
.ad-band .arr { flex: none; color: var(--amber); font-weight: 700; }
:root[data-fx="lite"] .ad-band, :root[data-fx="lite"] .ad-band:hover { transition: none; transform: none; }

/* ==========================================================================
   Kulüp incelemesi cilası — menajer şeridi + hedef + iklim
   ========================================================================== */
.ins-coach {
  display: flex; align-items: center; gap: 11px;
  margin: 10px 14px 0; padding: 10px 13px; border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--c1, var(--amber)) 26%, var(--hairline));
  background:
    radial-gradient(130% 200% at 0% 0%, color-mix(in srgb, var(--c1, var(--amber)) 10%, transparent), transparent 55%),
    var(--surface-1);
}
.ins-coach .ava {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display, inherit); font-size: 12.5px; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  background: linear-gradient(135deg, var(--c1, var(--amber)), var(--c2, #16233d));
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1, var(--amber)) 14%, transparent);
}
.ins-coach .who { flex: 1; min-width: 0; }
.ins-coach .who .eyebrow { display: block; font-size: 10.5px; }
.ins-coach .who b {
  display: block; font-size: 14px; margin-top: 1px;
  font-family: var(--font-display, inherit); letter-spacing: .03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ins-coach .btn { flex: none; }

.ins-goal {
  display: flex; align-items: center; gap: 11px;
  margin-top: 8px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--amber) 26%, var(--hairline));
  background:
    radial-gradient(120% 170% at 0% 0%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 60%),
    var(--surface-2);
}
.ins-goal .ic {
  flex: none; width: 30px; height: 30px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  color: var(--amber);
}
.ins-goal .ic svg { width: 15px; height: 15px; }
.ins-goal .tx { min-width: 0; }
.ins-goal .tx b { display: block; font-size: 13.5px; }
.ins-goal .tx span { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; }

/* İklim satırları: değer, tonlu pil olarak okunur. */
.ins-mood .mood-row .vl {
  min-width: 34px; text-align: center; padding: 2px 8px;
  border-radius: 999px; font-size: 12px; font-weight: 700;
}
.ins-mood .mood-row.mood-good .vl { color: var(--mint); background: color-mix(in srgb, var(--mint) 12%, transparent); }
.ins-mood .mood-row.mood-mid .vl { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.ins-mood .mood-row.mood-bad .vl { color: var(--rose); background: color-mix(in srgb, var(--rose) 12%, transparent); }

/* Online iklim değerleri: tonlu pil (kariyer paneliyle aynı dil). */
.ol-mood .vl {
  min-width: 34px; text-align: center; padding: 2px 8px;
  border-radius: 999px; font-size: 12px; font-weight: 700;
}
.ol-mood.mood-good .vl { color: var(--mint); background: color-mix(in srgb, var(--mint) 12%, transparent); }
.ol-mood.mood-mid .vl { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.ol-mood.mood-bad .vl { color: var(--rose); background: color-mix(in srgb, var(--rose) 12%, transparent); }

/* ==========================================================================
   Teke Tek kademe dili — arma, çerçeve, kademe kartı, bahis, RP şeridi
   (bkz. public/js/ui/rankbits.js). Kademe renkleri tek yerde: .rk-<kademe>
   --rk değişkenini kurar, geri kalan her parça ondan türer.
   ========================================================================== */
.rk-none    { --rk: #7c8798; --rk2: #3b4454; }
.rk-sokak   { --rk: #8b95a5; --rk2: #4a5262; }
.rk-mahalle { --rk: #c98d5f; --rk2: #7a4d2b; }
.rk-bolge   { --rk: #b9c7d9; --rk2: #6b7a90; }
.rk-ulusal  { --rk: var(--amber); --rk2: #9a5f12; }
.rk-pro     { --rk: #4ea8f5; --rk2: #1f5fa3; }
.rk-efsane  { --rk: #c084fc; --rk2: #f7a72b; }

/* Arma */
.rk-crest {
  --rs: 28px;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--rs); height: calc(var(--rs) * 1.125);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}
.rk-crest svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rk-crest .rk-crest-bg { fill: var(--rk2); }
.rk-crest .rk-crest-rim { fill: var(--rk); }
.rk-crest b {
  position: relative; z-index: 1; font-family: var(--font-display);
  font-size: calc(var(--rs) * .46); line-height: 1; color: #0b1020;
  letter-spacing: .02em; padding-top: 2px;
}
.rk-efsane .rk-crest .rk-crest-rim { fill: var(--rk); }
.rk-efsane .rk-crest b { color: #2a1246; }
.rk-none .rk-crest .rk-crest-rim { fill: color-mix(in srgb, var(--rk) 55%, transparent); }
.rk-none .rk-crest b { color: var(--text-1); }

/* Avatar çerçevesi: kademe rengiyle çift halka + köşede minik arma. */
.rk-frame {
  position: relative;
  box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--rk),
    0 0 14px color-mix(in srgb, var(--rk) 45%, transparent) !important;
}
.rk-efsane.rk-frame {
  box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--rk),
    0 0 0 6px color-mix(in srgb, var(--rk2) 70%, transparent),
    0 0 18px color-mix(in srgb, var(--rk) 55%, transparent) !important;
}
.rk-frame-badge {
  position: absolute; right: -9px; bottom: -9px; z-index: 2; line-height: 0;
}
.rk-frame-badge .rk-crest { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); }

/* Kademe çipi */
.rk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 4px; border-radius: 999px; font-size: 11px;
  color: var(--rk); border: 1px solid color-mix(in srgb, var(--rk) 40%, transparent);
  background: color-mix(in srgb, var(--rk) 11%, transparent); white-space: nowrap;
}
.rk-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rk-chip b { color: var(--text-1); flex: none; }

/* Kademe kartı */
.rk-card {
  position: relative; overflow: hidden; margin-top: 12px;
  padding: 14px 15px; border-radius: var(--r-lg); text-align: left; width: 100%;
  border: 1px solid color-mix(in srgb, var(--rk) 38%, var(--hairline));
  background:
    radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--rk) 14%, transparent), transparent 55%),
    radial-gradient(110% 140% at 100% 100%, color-mix(in srgb, var(--rk2) 18%, transparent), transparent 55%),
    var(--surface-1);
  color: inherit; font: inherit; cursor: default;
}
.rk-card.compact { cursor: pointer; margin: 0 0 12px; transition: border-color var(--d-fast), transform var(--d-fast); }
.rk-card.compact:hover { border-color: var(--rk); transform: translateY(-1px); }
.rk-card.compact:active { transform: scale(.99); }
.rk-card-head { display: flex; align-items: center; gap: 12px; }
.rk-card-who { flex: 1; min-width: 0; }
.rk-card-who b {
  display: block; font-family: var(--font-display); font-size: 19px;
  letter-spacing: .05em; line-height: 1.15; color: var(--rk);
}
.rk-card-who > span:not(.eyebrow) {
  display: block; font-size: 11px; color: var(--text-3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rk-card-rp { text-align: right; flex: none; }
.rk-card-rp b { display: block; font-size: 22px; line-height: 1; color: var(--text-1); }
.rk-card-rp span { font-size: 10px; letter-spacing: .12em; color: var(--text-3); text-transform: uppercase; }
.rk-card-arrow { font-size: 24px; color: var(--text-3); line-height: 1; margin-left: 2px; }
.rk-meter {
  height: 7px; border-radius: 999px; overflow: hidden; margin-top: 12px;
  background: color-mix(in srgb, var(--rk) 12%, var(--surface-2));
}
.rk-meter i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rk) 55%, transparent), var(--rk));
  animation: mg-fill .7s cubic-bezier(.25, .9, .3, 1) both; transform-origin: left;
}
.rk-meter-lb {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 5px;
  font-size: 11px; color: var(--text-3);
}
.rk-dots { display: flex; gap: 6px; margin-top: 12px; }
.rk-dots i {
  flex: 1; height: 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--rk) 14%, var(--surface-2));
}
.rk-dots i.on { background: var(--rk); }
.rk-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rk-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: 999px; font-size: 11px; color: var(--text-2);
  border: 1px solid var(--hairline); background: var(--surface-2);
}
.rk-pill .ic, .rk-pill svg { width: 12px; height: 12px; }
.rk-pill.hot { color: var(--amber); border-color: rgba(247, 167, 43, .4); background: rgba(247, 167, 43, .1); }
.rk-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px;
}
.rk-stats > div {
  padding: 8px 4px; border-radius: 11px; text-align: center;
  border: 1px solid var(--hairline); background: var(--surface-2);
}
.rk-stats b { display: block; font-size: 14px; }
.rk-stats span { font-size: 10px; color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; }

/* VS başlığındaki menajer satırı ve bahis: çip kutuyu doldurur, ad
   kırpılır, RP hep görünür. */
.du-side-rk { display: flex; align-items: center; margin-top: 6px; min-width: 0; }
.du-side-rk .rk-chip { width: 100%; max-width: 100%; justify-content: space-between; padding-right: 7px; font-size: 10.5px; }
.rk-stake {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: -2px 0 10px; font-size: 12.5px;
}
.rk-stake span { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-weight: 700; }
.rk-stake .up { color: var(--mint); }
.rk-stake .dn { color: var(--rose); }
.rk-stake i { font-style: normal; font-size: 10px; letter-spacing: .12em; color: var(--text-3); }
.rk-stake svg, .rk-stake .ic { width: 12px; height: 12px; }

/* Sonuç şeridi */
.rk-strip {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  margin: 14px auto 0; max-width: 360px; padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--rk) 40%, var(--hairline));
  background: color-mix(in srgb, var(--rk) 9%, rgba(10, 14, 26, .55));
  text-align: left; animation: rkIn .5s .35s cubic-bezier(.2, .9, .3, 1.1) both;
}
@keyframes rkIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.rk-strip-num b { font-size: 22px; line-height: 1.1; display: block; color: var(--text-1); }
.rk-strip-num b i { font-style: normal; font-size: 10px; letter-spacing: .12em; color: var(--text-3); }
.rk-strip .eyebrow { color: var(--rk); }
.rk-delta {
  font-size: 18px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  animation: rkPop .45s 1.6s cubic-bezier(.2, 1.2, .3, 1) both;
}
@keyframes rkPop { from { opacity: 0; transform: scale(.6); } }
.rk-delta.up { color: var(--mint); background: rgba(47, 211, 155, .14); }
.rk-delta.dn { color: var(--rose); background: rgba(242, 85, 90, .14); }
.rk-banner {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px; font-family: var(--font-display);
  letter-spacing: .08em; text-transform: uppercase; font-size: 13px;
  animation: rkPop .5s 1.9s cubic-bezier(.2, 1.2, .3, 1) both;
}
.rk-banner svg, .rk-banner .ic { width: 16px; height: 16px; }
.rk-banner.up { color: var(--amber); background: rgba(247, 167, 43, .14); }
.rk-banner.dn { color: var(--rose); background: rgba(242, 85, 90, .12); }
.rk-banner.sh { color: #4ea8f5; background: rgba(78, 168, 245, .12); }
.rk-note { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-3); text-align: center; }

/* Sıralama sayfası: sekmeler, satırlarda arma, kademe merdiveni, sezon */
.rk-tabs { display: flex; gap: 6px; margin: 4px 0 12px; }
.rk-tabs button {
  flex: 1; padding: 9px 6px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; color: var(--text-2); border: 1px solid var(--hairline);
  background: var(--surface-1); cursor: pointer;
}
.rk-tabs button.on { color: var(--amber); border-color: rgba(247, 167, 43, .5); background: rgba(247, 167, 43, .1); }
.du-rankrow .rk-crest { margin-right: 2px; }
.du-rankrow .tr { font-size: 10.5px; color: var(--text-3); display: block; }
.du-rankrow .fl { color: var(--amber); font-size: 10.5px; margin-left: 4px; }
.du-pod .rk-crest { margin: 0 auto 6px; }
.rk-ladder { display: grid; gap: 8px; }
.rk-tier-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--rk) 30%, var(--hairline));
  background: color-mix(in srgb, var(--rk) 7%, var(--surface-1));
}
.rk-tier-row.me { outline: 2px solid var(--rk); outline-offset: 1px; }
.rk-tier-row .nm { flex: 1; min-width: 0; }
.rk-tier-row .nm b { display: block; color: var(--rk); font-family: var(--font-display); letter-spacing: .05em; font-size: 15px; }
.rk-tier-row .nm span { font-size: 11px; color: var(--text-3); }
.rk-tier-row .rg { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.rk-hist {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px;
  padding: 9px 10px; border-bottom: 1px solid var(--hairline); font-size: 12.5px;
}
.rk-hist:last-child { border-bottom: 0; }
.rk-hist .sn { font-family: var(--font-mono); color: var(--text-3); }
.rk-hist .tr { color: var(--rk); font-weight: 700; }
.rk-season-hero {
  display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-lg);
  border: 1px solid rgba(247, 167, 43, .3);
  background: radial-gradient(120% 140% at 0% 0%, rgba(247, 167, 43, .14), transparent 55%), var(--surface-1);
}
.rk-season-hero b { display: block; font-family: var(--font-display); font-size: 22px; letter-spacing: .05em; }
.rk-season-hero span { font-size: 12px; color: var(--text-3); }
.rk-rules { display: grid; gap: 8px; margin-top: 12px; }
.rk-rules div { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--text-2); }
.rk-rules .ic, .rk-rules svg { width: 16px; height: 16px; flex: none; color: var(--amber); margin-top: 1px; }

/* Ödüllü ayrıcalık düğmesi (kalkan uzat / kayıp yarıla) */
.rk-perk {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 0 0 10px; padding: 10px 12px; text-align: left; cursor: pointer;
  border-radius: var(--r-md); color: inherit; font: inherit;
  border: 1px solid rgba(78, 168, 245, .4);
  background: linear-gradient(120deg, rgba(78, 168, 245, .14), var(--surface-1));
  transition: transform var(--d-fast), border-color var(--d-fast);
}
.rk-perk:hover { transform: translateY(-1px); border-color: #4ea8f5; }
.rk-perk > svg, .rk-perk > .ic { width: 20px; height: 20px; color: #4ea8f5; flex: none; }
.rk-perk .tx { flex: 1; min-width: 0; }
.rk-perk .tx b { display: block; font-size: 13px; }
.rk-perk .tx span { display: block; font-size: 11px; color: var(--text-3); }
.rk-perk .ad {
  flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  color: var(--amber); background: rgba(247, 167, 43, .12); border: 1px solid rgba(247, 167, 43, .4);
}
.rk-perk .ad svg, .rk-perk .ad .ic { width: 14px; height: 14px; }
.rk-perk.arena { max-width: 360px; margin: 10px auto 0; }