/* ============================================================================
   TASARIM BELİRTEÇLERİ (design tokens)
   ----------------------------------------------------------------------------
   Bu dosyada daha önce 41 ayrı hex renk, 229 ayrı rgba ve 54 ayrı font boyutu
   vardı; ölçek yoktu, değerler tek tek yazılmıştı. Bu yüzden benzer öğeler
   birbirinden hafifçe farklı görünüyor ve her düzenleme yeni bir varyant
   ekliyordu. Aşağıdaki belirteçler tek kaynak oluşturur; yeni kurallar ham
   değer yerine bunları kullanır.
   ========================================================================== */
:root {
  color-scheme: light;

  /* --- yüzeyler (açık tema) ---
     Saf beyaz zemin düz ve göz yorucu okunuyordu. Sayfa kırık beyaza iner,
     kartlar sayfadan bir basamak AÇIK durur: derinlik parlaklıkla değil,
     yüzeyler arası ton farkı ve yumuşak gölgeyle kurulur.

     --surface-rgb, yarı saydam katmanların tema ile birlikte değişebilmesi
     için ayrı tutulur; sabit beyaz kullanılsaydı koyu temada kırılırdı. */
  --bg: #f4f7f5;
  --bg-soft: #eef2f0;
  --panel: #ffffff;
  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-raised: #ffffff;
  --surface-sunken: #f7f9f8;
  --surface-tint: #edf5f1;
  --line: rgba(14, 26, 22, 0.09);
  --line-strong: rgba(11, 143, 90, 0.22);

  /* --- metin ---
     Üç basamak: başlık/gövde, kart içi ikincil, üçüncül. Açık zeminde
     kontrast oranları AA hedefiyle seçildi. */
  --text: #0f1c17;
  --text-soft: #3f4f49;
  --muted: #6b7c76;

  /* --- marka ve durum ---
     Zümrüt ana renk; beyaz üzerinde okunması için parlak yeşil yerine
     doygun ton. Vurgu seçici kullanılır: eylem, canlı durum ve veri
     göstergeleri. Nötr yüzeyler yeşile boyanmaz. */
  --green: #0b8f5a;
  --green-deep: #086a43;
  --green-tint: #e8f5ef;
  --cyan: #0d9488;
  --live: #c81e2d;
  --warn: #b07410;
  --ink: #0e1a16;

  /* Eski adlar. Bir kısmı stil dosyasında kullanılıyordu ama hiçbir yerde
     tanımlı değildi: tanımsız değişken özelliği tümden geçersiz kılar, yani
     o kurallar sessizce hiç uygulanmıyordu. Takma ad olarak bağlanır ki tek
     bir renk kaynağı kalsın ve tema değiştiğinde hepsi birlikte değişsin. */
  --soft: var(--text-soft);
  --accent: var(--green);
  --accent-2: var(--cyan);
  --amber: var(--warn);
  --red: var(--live);
  --surface-strong: var(--surface-raised);

  /* --- tipografi ölçeği ---
     Taban 16px. En küçük basamak bilinçli olarak 13px: eski dosyadaki
     0.70–0.76rem (11–12px) değerleri mobilde okunmuyordu. */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;

  /* --- boşluk ölçeği (4px tabanlı) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* --- biçim --- */
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(14, 26, 22, 0.102), 0 8px 24px rgba(14, 26, 22, 0.075);
  --ring: 0 0 0 2px rgba(13, 148, 136, 0.275);

  /* --- dokunma hedefi ---
     Denetimde 13 bağlantı/düğme 32px altındaydı; parmakla isabet ettirmek
     zor. Etkileşimli öğeler için taban yükseklik. */
  --tap: 40px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, #ffffff 0%, #ffffff 42%, var(--bg-soft) 100%),
    repeating-linear-gradient(90deg, rgba(11, 143, 90, 0.022) 0 1px, transparent 1px 92px),
    #ffffff;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: calc(100% - 36px);
  max-width: 1120px;
  margin-inline: auto;
}

.topbar {
  border-bottom: 1px solid rgba(11, 143, 90, 0.055);
  background: rgba(247, 250, 249, 0.82);
  backdrop-filter: blur(18px);
}

.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-weight: 850;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(11, 143, 90, 0.242);
  border-radius: var(--radius);
  color: var(--green);
  background: rgba(11, 143, 90, 0.066);
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.nav-links a,
.cta,
.back-link {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 12px;
  color: #5b6b65;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"],
.back-link:hover,
.back-link:focus-visible {
  background: rgba(var(--surface-rgb), 0.057);
  outline: 0;
}

.nav-links a[aria-current="page"] {
  border-color: rgba(11, 143, 90, 0.176);
  color: var(--green);
}

.cta {
  border: 1px solid rgba(11, 143, 90, 0.253);
  color: var(--green);
  background: rgba(11, 143, 90, 0.055);
  font-weight: 800;
}

.hero {
  padding: 72px 0 34px;
}

.eyebrow {
  display: inline-flex;
  width: fit-content;
  min-height: 30px;
  align-items: center;
  border: 1px solid rgba(13, 148, 136, 0.15);
  border-radius: 999px;
  padding: 0 11px;
  color: var(--cyan);
  background: rgba(13, 148, 136, 0.04);
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

h1 {
  max-width: 760px;
  margin: 16px 0 14px;
  font-size: clamp(2.25rem, 7vw, 4.8rem);
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.lead {
  max-width: 690px;
  margin: 0;
  color: var(--muted);
  font-size: 1.08rem;
  overflow-wrap: anywhere;
}

.hero-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.hero-meta {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 13px;
  color: #5b6b65;
  background: rgba(var(--surface-rgb), 0.052);
  font-size: 0.82rem;
  white-space: nowrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  padding: 22px 0 64px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid.tight {
  padding-bottom: 24px;
}

.competition-switcher {
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1.65fr);
  gap: 18px;
  align-items: center;
  margin: 0 0 20px;
  border: 1px solid rgba(13, 148, 136, 0.09);
  border-radius: var(--radius);
  padding: 16px;
  background: rgba(247, 250, 249, 0.78);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.home-competition-switcher {
  margin-top: 18px;
}

.competition-switcher-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.competition-switcher-copy span {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.competition-switcher-copy strong {
  font-size: 0.94rem;
  line-height: 1.35;
}

.competition-chip-row {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 2px 7px;
  scrollbar-width: thin;
}

.competition-chip-row a {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(11, 143, 90, 0.076);
  border-radius: 999px;
  padding: 0 13px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.competition-chip-row a:hover,
.competition-chip-row a:focus-visible,
.competition-chip-row a.is-active {
  border-color: rgba(11, 143, 90, 0.264);
  color: var(--green);
  background: rgba(11, 143, 90, 0.055);
  outline: 0;
}

/* SATIR SIĞMADIĞINDA SARSIN.
   Bu şerit iki bloktan oluşuyor: tarih gezinmesi (~513px) ve durum
   süzgeçleri (~300px). 16px boşlukla toplam ~829px; sarma kuralı olmadığı
   için 721-880px arasında ikinci blok kapsayıcıyı aşıyor ve SAYFA yatay
   kayıyordu (760px'te 98px, 820px'te 52px). 720px altında `flex-direction:
   column` devreye girdiği, 900px üstünde de ikisi yan yana sığdığı için
   sorun tam da bu aradaki tablet genişliklerinde görünüyordu.

   Çözüm sarmak: sığdığı sürece tek satır, sığmadığında süzgeçler alt satıra
   iner. Sabit bir kırılma noktası eklemek yerine sarma tercih edildi —
   içerik uzadığında (yeni bir süzgeç, uzun bir tarih) kural kendiliğinden
   doğru kalır. */
.match-explorer,
.live-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 16px;
  border: 1px solid rgba(11, 143, 90, 0.067);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: rgba(247, 250, 249, 0.72);
  box-shadow: var(--shadow);
}

.match-explorer {
  align-items: stretch;
}

.match-date-nav,
.match-status-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}

.match-date-current {
  display: grid;
  min-width: 190px;
  gap: 2px;
}

.match-date-current span,
.match-date-picker span,
.live-context-bar span {
  color: var(--cyan);
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.match-date-current strong,
.live-context-bar strong {
  font-size: 0.9rem;
  line-height: 1.3;
}

.match-nav-button,
.match-today-button,
.match-status-filters a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(11, 143, 90, 0.076);
  border-radius: 7px;
  padding: 0 12px;
  color: var(--muted);
  background: rgba(var(--surface-rgb), 0.029);
  font-size: 0.78rem;
  font-weight: 850;
  text-decoration: none;
}

.match-nav-button {
  width: 38px;
  padding: 0;
  color: var(--text);
  font-size: 1.1rem;
}

.match-nav-button:hover,
.match-nav-button:focus-visible,
.match-today-button:hover,
.match-today-button:focus-visible,
.match-today-button.is-active,
.match-status-filters a:hover,
.match-status-filters a:focus-visible,
.match-status-filters a.is-active {
  border-color: rgba(11, 143, 90, 0.275);
  color: var(--green);
  background: rgba(11, 143, 90, 0.055);
  outline: 0;
}

.match-date-picker {
  display: grid;
  gap: 3px;
  margin-left: 4px;
}

.match-date-picker input {
  min-height: 38px;
  border: 1px solid rgba(11, 143, 90, 0.076);
  border-radius: 7px;
  padding: 0 9px;
  color: var(--text);
  background: #f7faf9;
  color-scheme: light;
  font: inherit;
  font-size: 0.78rem;
}

.live-context-bar div {
  display: grid;
  gap: 3px;
}

.match-score-value {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .competition-switcher {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .competition-chip-row {
    margin-inline: -2px;
  }

  .match-explorer,
  .live-context-bar {
    align-items: stretch;
    flex-direction: column;
    padding: 13px;
  }

  .match-date-nav {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
  }

  .match-date-current {
    min-width: 0;
    text-align: center;
  }

  .match-today-button,
  .match-date-picker {
    grid-column: span 3;
    margin-left: 0;
  }

  .match-date-picker input {
    width: 100%;
  }

  .match-status-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .match-status-filters a {
    min-width: 0;
    padding-inline: 6px;
  }
}

.card {
  min-width: 0;
  max-width: 100%;
  min-height: 168px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.063), rgba(var(--surface-rgb), 0.029)), var(--panel);
  box-shadow: 0 18px 60px rgba(14, 26, 22, 0.102);
}

.card h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}

.card p {
  margin: 0;
  color: var(--muted);
}

.data-empty {
  display: grid;
  min-height: 132px;
  place-content: center;
  gap: 8px;
  border: 1px dashed rgba(11, 143, 90, 0.092);
  border-radius: var(--radius);
  padding: 18px;
  color: var(--muted);
  background: rgba(var(--surface-rgb), 0.04);
  text-align: center;
}

.data-empty strong {
  color: var(--text);
  font-size: 1rem;
}

.data-empty span {
  max-width: 420px;
  font-size: 0.88rem;
}

.match-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 8px;
}

.match-empty-actions .detail-link {
  min-width: 0;
  max-width: 100%;
  height: auto;
  padding-block: 8px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

.table-body {
  display: block;
}

.card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.card-kicker {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.big-value {
  color: var(--green);
  font-size: 2rem;
  font-weight: 950;
  line-height: 1;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.tag {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid rgba(13, 148, 136, 0.14);
  border-radius: 999px;
  padding: 0 9px;
  color: var(--cyan);
  background: rgba(13, 148, 136, 0.037);
  font-size: 0.76rem;
  font-weight: 800;
}

.tag.green {
  border-color: rgba(11, 143, 90, 0.176);
  color: var(--green);
  background: rgba(11, 143, 90, 0.041);
}

.tag.soft {
  border-color: rgba(14, 26, 22, 0.149);
  color: #5b6b65;
  background: rgba(var(--surface-rgb), 0.052);
}

.bar-row {
  display: grid;
  grid-template-columns: 92px 1fr 38px;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  color: #5b6b65;
  font-size: 0.86rem;
}

.bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.115);
}

.bar i {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--cyan));
}

.form-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0 4px;
}

.form-dots span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--surface-rgb), 0.081);
  color: #5b6b65;
  font-size: 0.72rem;
  font-weight: 900;
}

.form-dots .win {
  color: var(--green);
  background: rgba(11, 143, 90, 0.088);
}

.form-dots .draw {
  color: #b07410;
  background: rgba(176, 116, 16, 0.09);
}

.form-dots .loss {
  color: #c81e2d;
  background: rgba(200, 30, 45, 0.09);
}

.data-panel {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 22px 0 24px;
  background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.063), rgba(var(--surface-rgb), 0.029)), var(--panel);
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(14, 26, 22, 0.102);
}

.panel-title {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid rgba(14, 26, 22, 0.081);
}

.panel-title h2 {
  margin: 0;
  font-size: 1.18rem;
}

.panel-title span {
  color: var(--muted);
  font-size: 0.86rem;
}

.table-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1.4fr) repeat(4, minmax(68px, 0.6fr));
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(14, 26, 22, 0.069);
  color: #5b6b65;
  font-size: 0.9rem;
}

.table-row:last-child {
  border-bottom: 0;
}

.table-row.header {
  min-height: 44px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.table-row b {
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.match-card {
  min-height: 220px;
}

.match-teams {
  display: grid;
  min-width: 0;
  gap: 10px;
  margin: 12px 0;
}

.team-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 850;
}

.score {
  color: var(--green);
}

.live-score-card {
  display: flex;
  flex-direction: column;
}

.live-score-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 14px;
}

.live-score-league {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.live-score-time {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.live-score-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  border: 1px solid var(--line);
  background: rgba(var(--surface-rgb), 0.046);
  color: var(--muted);
}

.live-score-status .live-pulse {
  display: none;
}

.live-score-status-live {
  color: #ffd7d7;
  border-color: rgba(255, 107, 107, 0.4);
  background: rgba(255, 107, 107, 0.12);
}

.live-score-status-live .live-pulse {
  display: inline-block;
}

.live-score-status-finished {
  color: var(--muted);
  border-color: var(--line);
}

.live-score-status-scheduled {
  color: var(--cyan);
  border-color: rgba(13, 148, 136, 0.16);
  background: rgba(13, 148, 136, 0.04);
}

.live-score-status-muted {
  color: var(--muted);
  opacity: 0.8;
}

.live-score-match {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 8px 0 16px;
}

.live-score-team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.live-score-team-away {
  flex-direction: row-reverse;
  text-align: right;
}

.live-score-team-logo,
.live-score-team-logo-wrap {
  flex: none;
  width: 40px;
  height: 40px;
}

.live-score-team-logo {
  object-fit: contain;
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.069);
}

.live-score-team-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(11, 143, 90, 0.059);
  color: var(--green);
  font-size: 0.85rem;
  font-weight: 800;
}

.live-score-team-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
  font-weight: 800;
}

.live-score-result {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
}

/* Bu başlık dört parçadan oluşuyor: [logo][ev sahibi] [logo][deplasman].
   Sarma kuralı yokken 320px'te ikinci takım adı kartın sağ kenarından taşıp
   kesiliyordu ("Samsunspo…") ve ilk ad "Westerlo -" biçiminde ortasından
   kırılıyordu. Sarınca her takım kendi satırına iner; ad da kesilmez. */
.live-score-team-name-inline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.live-score-team-name-inline .live-score-team-logo,
.live-score-team-name-inline .live-score-team-logo-wrap,
.live-score-team-name-inline .live-score-team-logo-fallback {
  width: 24px;
  height: 24px;
  font-size: 0.65rem;
}

@media (max-width: 480px) {
  .live-score-match {
    gap: 8px;
  }

  .live-score-team-logo,
  .live-score-team-logo-wrap,
  .live-score-team-logo-fallback {
    width: 32px;
    height: 32px;
  }

  .live-score-team-name {
    font-size: 0.82rem;
  }

  .live-score-result {
    font-size: 1.25rem;
  }
}

.source-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 48px;
  padding: 18px;
  background: rgba(var(--surface-rgb), 0.046);
}

.source-strip span {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
  text-transform: uppercase;
}

.source-strip b {
  display: block;
  margin-top: 6px;
  color: #5b6b65;
  font-size: 0.92rem;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 42px;
}

.back-link {
  border: 1px solid var(--line-strong);
  color: var(--cyan);
}

.footer {
  border-top: 1px solid rgba(11, 143, 90, 0.055);
  padding: 24px 0 34px;
  color: var(--muted);
  font-size: 0.86rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  line-height: 1.8;
}

.footer-links a {
  color: var(--soft);
  font-weight: 750;
}

.footer-links a:hover {
  color: var(--green);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.breadcrumb a {
  color: var(--cyan);
}

.breadcrumb span:last-child {
  color: var(--soft);
}

.alias-redirect {
  min-height: 70vh;
  align-items: center;
}

@media (max-width: 920px) {
  .nav {
    grid-template-columns: 1fr;
    padding: 14px 0;
  }

  .nav-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .cta {
    width: 100%;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .grid.two,
  .grid.four {
    grid-template-columns: 1fr;
  }

  .hero-row,
  .panel-title {
    display: grid;
    align-items: start;
  }

  .hero-meta {
    width: fit-content;
    white-space: normal;
  }

  .table-row {
    grid-template-columns: 30px minmax(0, 1fr) 42px 42px;
    gap: 8px;
    padding-inline: 12px;
    font-size: 0.82rem;
  }

  .table-row span:nth-child(5),
  .table-row span:nth-child(6) {
    display: none;
  }

  .source-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .container {
    width: 342px;
    max-width: calc(100vw - 24px);
    margin-left: 12px;
    margin-right: auto;
  }

  h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .team-line {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .team-line span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Home page styles moved from index.html */
:root {
        color-scheme: light;
        --bg: #ffffff;
        --bg-soft: #f6faf8;
        --panel: rgba(246, 250, 248, 0.72);
        --panel-strong: rgba(255, 255, 255, 0.9);
        --line: rgba(11, 143, 90, 0.067);
        --line-strong: rgba(11, 143, 90, 0.134);
        --text: #0e1a16;
        --muted: #5b6b65;
        --soft: #5b6b65;
        --green: #0b8f5a;
        --cyan: #0d9488;
        --amber: #b07410;
        --red: #c81e2d;
        --shadow: 0 22px 80px rgba(14, 26, 22, 0.122);
        --radius: 8px;
        --container: 1180px;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        min-width: 320px;
        overflow-x: hidden;
        background:
          linear-gradient(180deg, rgba(247, 250, 249, 0.86), rgba(247, 250, 249, 0.98) 42%, #ffffff 100%),
          repeating-linear-gradient(90deg, rgba(11, 143, 90, 0.019) 0 1px, transparent 1px 96px),
          repeating-linear-gradient(0deg, rgba(13, 148, 136, 0.015) 0 1px, transparent 1px 84px),
          #ffffff;
        color: var(--text);
        font-family:
          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        line-height: 1.5;
      }

      body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background:
          linear-gradient(115deg, rgba(11, 143, 90, 0.039), transparent 28%),
          linear-gradient(245deg, rgba(13, 148, 136, 0.03), transparent 36%),
          linear-gradient(180deg, transparent, rgba(14, 26, 22, 0.082));
        mix-blend-mode: screen;
        opacity: 0.72;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      button,
      a {
        -webkit-tap-highlight-color: transparent;
      }

      .shell {
        position: relative;
        z-index: 1;
      }

      .container {
        width: calc(100% - 36px);
        max-width: var(--container);
        margin-inline: auto;
      }

      .topbar {
        position: sticky;
        top: 0;
        z-index: 10;
        border-bottom: 1px solid rgba(11, 143, 90, 0.055);
        background: rgba(247, 250, 249, 0.78);
        backdrop-filter: blur(18px);
      }

      .nav {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 24px;
        min-height: 76px;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-weight: 800;
        font-size: 1.08rem;
        letter-spacing: 0;
        white-space: nowrap;
      }

      .brand-mark {
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border: 1px solid rgba(11, 143, 90, 0.242);
        border-radius: 8px;
        background: linear-gradient(145deg, rgba(11, 143, 90, 0.11), rgba(13, 148, 136, 0.06));
        color: var(--green);
        font-weight: 900;
        box-shadow: 0 0 24px rgba(11, 143, 90, 0.088);
      }

      .nav-links {
        display: flex;
        justify-content: center;
        gap: 6px;
        min-width: 0;
      }

      .nav-links a {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        border: 1px solid transparent;
        border-radius: 999px;
        padding: 0 12px;
        color: var(--soft);
        font-size: 0.88rem;
        white-space: nowrap;
      }

      .nav-links a:hover,
      .nav-links a:focus-visible {
        border-color: var(--line);
        background: rgba(var(--surface-rgb), 0.046);
        color: var(--text);
        outline: 0;
      }

      .cta {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(11, 143, 90, 0.253);
        border-radius: 999px;
        padding: 0 15px;
        background: rgba(11, 143, 90, 0.066);
        color: var(--green);
        font-size: 0.86rem;
        font-weight: 800;
        white-space: nowrap;
        box-shadow: 0 0 26px rgba(11, 143, 90, 0.066);
      }

      .cta:hover,
      .cta:focus-visible,
      .button:hover,
      .button:focus-visible {
        transform: translateY(-1px);
        outline: 0;
      }

      .hero {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
        gap: 34px;
        align-items: center;
        padding: 64px 0 38px;
      }

      .eyebrow,
      .section-kicker {
        display: inline-flex;
        width: fit-content;
        min-height: 30px;
        align-items: center;
        gap: 8px;
        border: 1px solid rgba(13, 148, 136, 0.14);
        border-radius: 999px;
        padding: 0 11px;
        background: rgba(13, 148, 136, 0.04);
        color: var(--cyan);
        font-size: 0.75rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      h1,
      h2,
      h3,
      p {
        margin-top: 0;
      }

      h1 {
        max-width: 760px;
        margin-bottom: 22px;
        font-size: clamp(2.55rem, 7vw, 5.55rem);
        line-height: 0.94;
        letter-spacing: 0;
        overflow-wrap: break-word;
      }

      h1 span {
        display: block;
      }

      .hero-copy {
        max-width: 720px;
        margin-bottom: 28px;
        color: #b8cbc8;
        font-size: clamp(1rem, 1.8vw, 1.2rem);
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 30px;
      }

      .button {
        min-height: 48px;
        display: inline-flex;
        flex: 0 1 auto;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        padding: 0 19px;
        color: var(--text);
        font-weight: 850;
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          background 180ms ease;
      }

      .button.primary {
        border-color: rgba(11, 143, 90, 0.297);
        background: linear-gradient(135deg, rgba(11, 143, 90, 0.528), rgba(13, 148, 136, 0.45));
        color: #f7faf9;
        box-shadow: 0 18px 48px rgba(13, 148, 136, 0.09);
      }

      .button.secondary {
        background: rgba(var(--surface-rgb), 0.052);
      }

      .hero-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        max-width: 720px;
      }

      .metric-tile,
      .glass-card,
      .signal-card,
      .team-card,
      .player-card,
      .article-card,
      .source-strip {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background:
          linear-gradient(180deg, rgba(14, 26, 22, 0.069), rgba(14, 26, 22, 0.03)),
          var(--panel);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
      }

      .metric-tile {
        min-height: 96px;
        padding: 15px;
      }

      .metric-tile strong {
        display: block;
        font-size: 1.48rem;
        line-height: 1;
      }

      .metric-tile span {
        display: block;
        margin-top: 8px;
        color: var(--muted);
        font-size: 0.78rem;
      }

      .match-card {
        position: relative;
        overflow: hidden;
        padding: 24px;
        isolation: isolate;
      }

      .match-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
          linear-gradient(90deg, transparent 49%, rgba(11, 143, 90, 0.088) 49% 51%, transparent 51%),
          repeating-linear-gradient(0deg, rgba(238, 248, 245, 0.06) 0 1px, transparent 1px 48px),
          linear-gradient(160deg, rgba(11, 143, 90, 0.099), rgba(13, 148, 136, 0.04) 38%, transparent 64%);
        opacity: 0.82;
      }

      .match-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 24px;
      }

      .status-dot {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--green);
        font-size: 0.78rem;
        font-weight: 800;
        text-transform: uppercase;
      }

      .status-dot::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--green);
        box-shadow: 0 0 18px var(--green);
      }

      .match-date {
        color: var(--muted);
        font-size: 0.82rem;
      }

      .versus {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 13px;
        align-items: center;
        margin-bottom: 26px;
      }

      .club {
        min-width: 0;
      }

      .club b {
        display: block;
        overflow-wrap: anywhere;
        font-size: clamp(1.45rem, 3vw, 2rem);
        line-height: 1.05;
      }

      .club span {
        display: block;
        margin-top: 8px;
        color: var(--muted);
        font-size: 0.82rem;
      }

      .vs-pill {
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        border: 1px solid rgba(13, 148, 136, 0.18);
        border-radius: 50%;
        background: rgba(var(--surface-rgb), 0.088);
        color: var(--cyan);
        font-size: 0.78rem;
        font-weight: 900;
      }

      .radar-visual {
        height: 174px;
        display: grid;
        place-items: center;
        margin-bottom: 22px;
        border: 1px solid rgba(11, 143, 90, 0.05);
        border-radius: var(--radius);
        background:
          linear-gradient(90deg, transparent 48%, rgba(13, 148, 136, 0.13) 48% 52%, transparent 52%),
          linear-gradient(0deg, transparent 48%, rgba(11, 143, 90, 0.11) 48% 52%, transparent 52%),
          repeating-linear-gradient(45deg, rgba(14, 26, 22, 0.046) 0 1px, transparent 1px 18px),
          rgba(2, 10, 10, 0.52);
      }

      .radar-ring {
        position: relative;
        width: min(55%, 220px);
        aspect-ratio: 1;
        border: 1px solid rgba(11, 143, 90, 0.33);
        border-radius: 50%;
        background:
          conic-gradient(from 220deg, rgba(11, 143, 90, 0.088) 0 105deg, transparent 105deg 360deg),
          radial-gradient(circle, rgba(13, 148, 136, 0.15) 0 4px, transparent 5px),
          radial-gradient(circle, transparent 0 35%, rgba(13, 148, 136, 0.09) 36% 37%, transparent 38% 63%, rgba(11, 143, 90, 0.121) 64% 65%, transparent 66%);
        box-shadow: inset 0 0 34px rgba(13, 148, 136, 0.08), 0 0 34px rgba(11, 143, 90, 0.066);
      }

      .radar-ring::before,
      .radar-ring::after {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        width: 45%;
        height: 2px;
        transform-origin: left center;
        background: linear-gradient(90deg, var(--green), transparent);
      }

      .radar-ring::before {
        transform: rotate(24deg);
      }

      .radar-ring::after {
        transform: rotate(142deg);
      }

      .prediction-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
      }

      .prediction {
        min-height: 86px;
        border: 1px solid rgba(14, 26, 22, 0.115);
        border-radius: var(--radius);
        padding: 12px;
        background: rgba(var(--surface-rgb), 0.071);
      }

      .prediction span {
        display: block;
        color: var(--muted);
        font-size: 0.72rem;
      }

      .prediction b {
        display: block;
        margin-top: 6px;
        color: var(--text);
        font-size: 1.06rem;
      }

      .bar-row {
        display: grid;
        grid-template-columns: 94px 1fr 36px;
        gap: 10px;
        align-items: center;
        margin: 10px 0;
        color: var(--soft);
        font-size: 0.86rem;
      }

      .bar {
        height: 8px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(var(--surface-rgb), 0.115);
      }

      .bar i {
        display: block;
        width: var(--value);
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--green), var(--cyan));
      }

      .section {
        padding: 44px 0;
        scroll-margin-top: 92px;
      }

      .section-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 22px;
        margin-bottom: 18px;
      }

      .section-title {
        max-width: 720px;
      }

      .section h2 {
        margin-bottom: 8px;
        font-size: clamp(1.8rem, 3vw, 2.72rem);
        line-height: 1.05;
        letter-spacing: 0;
      }

      .section-title p {
        margin-bottom: 0;
        color: var(--muted);
      }

      .data-stamp {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(11, 143, 90, 0.121);
        border-radius: 999px;
        padding: 0 13px;
        color: var(--soft);
        font-size: 0.8rem;
        white-space: nowrap;
      }

      .home-radar-ticker {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        border: 1px solid rgba(11, 143, 90, 0.099);
        border-radius: var(--radius);
        padding: 12px;
        background:
          linear-gradient(90deg, rgba(11, 143, 90, 0.044), rgba(13, 148, 136, 0.018)),
          rgba(14, 26, 22, 0.03);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
      }

      .radar-ticker-label {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-height: 40px;
        border: 1px solid rgba(11, 143, 90, 0.121);
        border-radius: 999px;
        padding: 0 13px;
        color: var(--green);
        font-size: 0.82rem;
        font-weight: 900;
        white-space: nowrap;
      }

      .radar-ticker-track {
        display: flex;
        gap: 10px;
        min-width: 0;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: thin;
      }

      .radar-ticker-track a {
        min-width: 182px;
        min-height: 54px;
        display: grid;
        gap: 4px;
        align-content: center;
        border: 1px solid rgba(14, 26, 22, 0.115);
        border-radius: 8px;
        padding: 10px 12px;
        background: rgba(var(--surface-rgb), 0.046);
        color: var(--text);
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          background 180ms ease;
      }

      .radar-ticker-track a:hover,
      .radar-ticker-track a:focus-visible {
        transform: translateY(-1px);
        border-color: rgba(11, 143, 90, 0.231);
        background: rgba(11, 143, 90, 0.039);
        outline: 0;
      }

      .radar-ticker-track span {
        color: var(--cyan);
        font-size: 0.72rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .radar-ticker-track b {
        overflow-wrap: anywhere;
        font-size: 0.88rem;
      }

      .traffic-hub {
        padding-top: 24px;
      }

      .traffic-hub-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 14px;
        align-items: stretch;
      }

      .traffic-hub-head,
      .traffic-routes,
      .traffic-card {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background:
          linear-gradient(180deg, rgba(14, 26, 22, 0.074), rgba(14, 26, 22, 0.03)),
          var(--panel);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
      }

      .traffic-hub-head {
        grid-column: 1 / -1;
        display: grid;
        gap: 10px;
        padding: 22px;
        overflow: hidden;
        position: relative;
      }

      .traffic-hub-head::after {
        content: "";
        position: absolute;
        right: -120px;
        top: -120px;
        width: 280px;
        height: 280px;
        border: 1px solid rgba(13, 148, 136, 0.1);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(13, 148, 136, 0.075), transparent 66%);
        pointer-events: none;
      }

      .traffic-hub-head h2 {
        max-width: 820px;
        margin: 0;
        font-size: clamp(1.9rem, 3vw, 3.1rem);
        line-height: 1.02;
      }

      .traffic-hub-head p {
        max-width: 720px;
        margin: 0;
        color: var(--muted);
      }

      .traffic-hub-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }

      .traffic-card {
        min-height: 202px;
        display: grid;
        align-content: space-between;
        gap: 14px;
        padding: 18px;
        color: var(--text);
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          background 180ms ease;
      }

      .traffic-card:hover,
      .traffic-card:focus-visible,
      .traffic-route-chip:hover,
      .traffic-route-chip:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(11, 143, 90, 0.231);
        outline: 0;
      }

      .traffic-card.is-live {
        background:
          linear-gradient(145deg, rgba(11, 143, 90, 0.072), rgba(13, 148, 136, 0.035)),
          var(--panel);
      }

      .traffic-card-kicker,
      .traffic-routes-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--cyan);
        font-size: 0.74rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .live-pulse {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--green);
        box-shadow: 0 0 0 0 rgba(11, 143, 90, 0.358);
        animation: livePulse 1.7s ease-out infinite;
      }

      @keyframes livePulse {
        0% {
          box-shadow: 0 0 0 0 rgba(11, 143, 90, 0.303);
        }
        70% {
          box-shadow: 0 0 0 11px rgba(11, 143, 90, 0.0);
        }
        100% {
          box-shadow: 0 0 0 0 rgba(11, 143, 90, 0.0);
        }
      }

      .traffic-card strong {
        font-size: 1.2rem;
        line-height: 1.1;
      }

      .traffic-card p {
        margin: 0;
        color: var(--muted);
        font-size: 0.9rem;
      }

      .traffic-card b {
        display: inline-flex;
        width: fit-content;
        min-height: 32px;
        align-items: center;
        border: 1px solid rgba(11, 143, 90, 0.154);
        border-radius: 999px;
        padding: 0 11px;
        color: var(--green);
        font-size: 0.82rem;
      }

      .traffic-routes {
        display: grid;
        gap: 18px;
        align-content: start;
        padding: 18px;
      }

      .traffic-routes strong {
        display: block;
        margin-top: 9px;
        font-size: 1.18rem;
        line-height: 1.12;
      }

      .traffic-route-list {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
      }

      .traffic-route-chip {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(14, 26, 22, 0.138);
        border-radius: 999px;
        padding: 0 11px;
        background: rgba(var(--surface-rgb), 0.051);
        color: var(--soft);
        font-size: 0.82rem;
        font-weight: 760;
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          color 180ms ease;
      }

      .home-search-section {
        padding-top: 20px;
      }

      .home-search-shell,
      .home-search-results,
      .home-search-card,
      .home-search-empty {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background:
          linear-gradient(180deg, rgba(14, 26, 22, 0.067), rgba(14, 26, 22, 0.028)),
          var(--panel);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
      }

      .home-search-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
        gap: 18px;
        align-items: end;
        padding: 20px;
      }

      .home-search-copy {
        display: grid;
        gap: 10px;
      }

      .home-search-copy h2 {
        max-width: 820px;
        margin: 0;
        font-size: clamp(1.85rem, 3vw, 2.9rem);
        line-height: 1.04;
      }

      .home-search-copy p {
        max-width: 720px;
        margin: 0;
        color: var(--muted);
      }

      .home-search-box {
        display: grid;
        gap: 9px;
      }

      .home-search-box span {
        color: var(--cyan);
        font-size: 0.74rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .home-search-box input {
        width: 100%;
        min-height: 52px;
        border: 1px solid rgba(11, 143, 90, 0.132);
        border-radius: 999px;
        padding: 0 18px;
        background: rgba(var(--surface-rgb), 0.72);
        color: var(--text);
        font: inherit;
        font-weight: 780;
        outline: 0;
      }

      .home-search-box input:focus {
        border-color: rgba(11, 143, 90, 0.303);
        box-shadow: 0 0 0 4px rgba(11, 143, 90, 0.044);
      }

      .home-search-box b {
        color: var(--muted);
        font-size: 0.82rem;
      }

      .home-search-results {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        margin-top: 14px;
        padding: 14px;
      }

      .home-search-card {
        min-width: 0;
        min-height: 118px;
        display: grid;
        align-content: start;
        gap: 8px;
        padding: 13px;
        color: var(--text);
        box-shadow: none;
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          background 180ms ease;
      }

      .home-search-card[hidden] {
        display: none;
      }

      .home-search-card:hover,
      .home-search-card:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(11, 143, 90, 0.231);
        background: rgba(11, 143, 90, 0.039);
        outline: 0;
      }

      .home-search-card span {
        color: var(--cyan);
        font-size: 0.72rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .home-search-card strong {
        font-size: 1rem;
        line-height: 1.12;
        overflow-wrap: anywhere;
      }

      .home-search-card em {
        color: var(--muted);
        font-size: 0.8rem;
        font-style: normal;
      }

      .home-search-empty {
        margin: 12px 0 0;
        padding: 14px;
        color: var(--muted);
        text-align: center;
      }

      .home-hot-routes {
        padding-top: 0;
      }

      .home-hot-shell {
        display: grid;
        grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1fr) minmax(280px, 0.88fr);
        gap: 14px;
        align-items: stretch;
        border: 1px solid rgba(11, 143, 90, 0.077);
        border-radius: var(--radius);
        padding: 16px;
        background:
          radial-gradient(circle at 8% 10%, rgba(11, 143, 90, 0.066), transparent 32%),
          linear-gradient(135deg, rgba(13, 148, 136, 0.033), rgba(14, 26, 22, 0.029)),
          var(--panel);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
      }

      .home-hot-head {
        display: grid;
        align-content: center;
        gap: 10px;
      }

      .home-hot-head h2 {
        margin: 0;
        color: var(--text);
        font-size: clamp(1.35rem, 2.2vw, 2.15rem);
        line-height: 1.04;
      }

      .home-hot-head p {
        margin: 0;
        color: var(--muted);
        font-size: 0.92rem;
        line-height: 1.6;
      }

      .home-hot-query-grid,
      .home-hot-direct {
        display: grid;
        gap: 10px;
        min-width: 0;
      }

      .home-hot-query-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .home-hot-query-grid button,
      .home-hot-direct a {
        min-width: 0;
        border: 1px solid rgba(13, 148, 136, 0.08);
        border-radius: 12px;
        background: rgba(var(--surface-rgb), 0.046);
        color: var(--text);
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          background 180ms ease;
      }

      .home-hot-query-grid button {
        display: grid;
        min-height: 68px;
        align-content: center;
        gap: 5px;
        padding: 10px 12px;
        font: inherit;
        text-align: left;
        cursor: pointer;
      }

      .home-hot-query-grid span,
      .home-hot-direct span {
        color: var(--green);
        font-size: 0.7rem;
        font-weight: 950;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .home-hot-query-grid b,
      .home-hot-direct b {
        color: var(--soft);
        font-size: 0.92rem;
        line-height: 1.18;
      }

      .home-hot-direct a {
        display: grid;
        min-height: 76px;
        align-content: center;
        gap: 5px;
        padding: 11px 12px;
      }

      .home-hot-direct em {
        color: var(--muted);
        font-size: 0.78rem;
        font-style: normal;
        line-height: 1.35;
      }

      .home-hot-query-grid button:hover,
      .home-hot-query-grid button:focus-visible,
      .home-hot-direct a:hover,
      .home-hot-direct a:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(11, 143, 90, 0.209);
        background: rgba(11, 143, 90, 0.039);
        outline: 0;
      }

      .home-transfer-watch {
        padding-top: 20px;
      }

      .home-transfer-watch-shell {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
        gap: 14px;
        align-items: stretch;
      }

      .home-transfer-feature,
      .home-transfer-side {
        min-width: 0;
        border: 1px solid rgba(13, 148, 136, 0.08);
        border-radius: var(--radius);
        background:
          radial-gradient(circle at 92% 0%, rgba(13, 148, 136, 0.06), transparent 33%),
          linear-gradient(180deg, rgba(14, 26, 22, 0.069), rgba(14, 26, 22, 0.03)),
          var(--panel);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
      }

      .home-transfer-feature {
        display: grid;
        gap: 14px;
        padding: 18px;
      }

      .home-transfer-player {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        min-width: 0;
      }

      .home-transfer-player > div {
        min-width: 0;
        display: grid;
        gap: 7px;
      }

      .home-transfer-player span,
      .home-transfer-score span {
        color: var(--cyan);
        font-size: 0.73rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .home-transfer-player h3 {
        margin: 0;
        color: var(--text);
        font-size: clamp(1.45rem, 2.2vw, 2.2rem);
        line-height: 0.98;
        overflow-wrap: anywhere;
      }

      .home-transfer-player p {
        margin: 0;
        max-width: 68ch;
        color: var(--muted);
        font-size: 0.93rem;
        line-height: 1.55;
      }

      .home-transfer-score {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 10px;
        align-items: center;
        min-width: 0;
        border: 1px solid rgba(11, 143, 90, 0.094);
        border-radius: var(--radius);
        padding: 12px;
        background: rgba(var(--surface-rgb), 0.068);
      }

      .home-transfer-score strong {
        color: var(--green);
        font-size: 2rem;
        line-height: 1;
      }

      .home-transfer-score em {
        display: inline-flex;
        min-height: 28px;
        align-items: center;
        border: 1px solid rgba(11, 143, 90, 0.121);
        border-radius: 999px;
        padding: 5px 10px;
        color: #dfffea;
        background: rgba(11, 143, 90, 0.044);
        font-size: 0.78rem;
        font-style: normal;
        font-weight: 900;
        white-space: nowrap;
      }

      .home-transfer-score i {
        grid-column: 1 / -1;
        position: relative;
        height: 8px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(var(--surface-rgb), 0.103);
      }

      .home-transfer-score i b {
        position: absolute;
        inset: 0 auto 0 0;
        width: var(--value);
        border-radius: inherit;
        background: linear-gradient(90deg, var(--green), var(--cyan));
      }

      .home-transfer-route {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        min-width: 0;
        border: 1px solid rgba(14, 26, 22, 0.115);
        border-radius: var(--radius);
        padding: 12px;
        background: rgba(var(--surface-rgb), 0.04);
      }

      .home-transfer-route b {
        color: var(--text);
        overflow-wrap: anywhere;
      }

      .home-transfer-route em {
        color: var(--green);
        font-style: normal;
        font-weight: 950;
      }

      .home-transfer-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
      }

      .home-transfer-side {
        display: grid;
        gap: 12px;
        padding: 16px;
      }

      .home-transfer-metrics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
      }

      .home-transfer-list {
        display: grid;
        gap: 9px;
      }

      .home-transfer-row {
        display: grid;
        grid-template-columns: minmax(82px, auto) minmax(0, 1fr) auto;
        gap: 9px;
        align-items: center;
        min-width: 0;
        border: 1px solid rgba(14, 26, 22, 0.115);
        border-radius: 8px;
        padding: 10px;
        color: var(--text);
        background: rgba(var(--surface-rgb), 0.044);
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          background 180ms ease;
      }

      .home-transfer-row:hover,
      .home-transfer-row:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(11, 143, 90, 0.187);
        background: rgba(11, 143, 90, 0.039);
        outline: 0;
      }

      .home-transfer-row span {
        color: var(--cyan);
        font-size: 0.74rem;
        font-weight: 900;
      }

      .home-transfer-row strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .home-transfer-row b {
        color: var(--green);
      }

      .home-daily-route {
        padding-top: 20px;
      }

      .home-daily-route-shell {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
        gap: 14px;
        align-items: stretch;
      }

      .home-daily-route-list {
        position: relative;
        display: grid;
        gap: 10px;
        min-width: 0;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .home-daily-route-list::before {
        content: "";
        position: absolute;
        inset: 18px auto 18px 23px;
        width: 2px;
        border-radius: 999px;
        background: linear-gradient(180deg, var(--green), rgba(13, 148, 136, 0.11));
        opacity: 0.58;
      }

      .home-daily-route-list li {
        position: relative;
        min-width: 0;
      }

      .home-daily-route-list a {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        min-width: 0;
        border: 1px solid rgba(13, 148, 136, 0.075);
        border-radius: var(--radius);
        padding: 13px;
        color: var(--text);
        background:
          linear-gradient(180deg, rgba(14, 26, 22, 0.064), rgba(14, 26, 22, 0.028)),
          rgba(14, 26, 22, 0.04);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          background 180ms ease;
      }

      .home-daily-route-list a:hover,
      .home-daily-route-list a:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(11, 143, 90, 0.198);
        background: rgba(11, 143, 90, 0.036);
        outline: 0;
      }

      .home-daily-route-list span {
        position: relative;
        z-index: 1;
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border: 1px solid rgba(11, 143, 90, 0.165);
        border-radius: 999px;
        color: #f7faf9;
        background: linear-gradient(135deg, var(--green), var(--cyan));
        font-size: 0.76rem;
        font-weight: 950;
      }

      .home-daily-route-list div {
        display: grid;
        gap: 5px;
        min-width: 0;
      }

      .home-daily-route-list strong {
        color: var(--text);
        font-size: 1rem;
        line-height: 1.15;
        overflow-wrap: anywhere;
      }

      .home-daily-route-list p {
        margin: 0;
        color: var(--muted);
        font-size: 0.84rem;
        line-height: 1.45;
      }

      .home-daily-route-list b {
        display: inline-flex;
        min-height: 28px;
        align-items: center;
        border: 1px solid rgba(14, 26, 22, 0.115);
        border-radius: 999px;
        padding: 4px 9px;
        color: var(--soft);
        background: rgba(var(--surface-rgb), 0.046);
        font-size: 0.76rem;
        white-space: nowrap;
      }

      .home-daily-route-note {
        display: grid;
        align-content: start;
        gap: 14px;
        min-width: 0;
        border: 1px solid rgba(11, 143, 90, 0.094);
        border-radius: var(--radius);
        padding: 18px;
        background:
          radial-gradient(circle at 90% 0%, rgba(11, 143, 90, 0.066), transparent 32%),
          linear-gradient(180deg, rgba(14, 26, 22, 0.069), rgba(14, 26, 22, 0.03)),
          var(--panel);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
      }

      .home-daily-route-note > span {
        color: var(--cyan);
        font-size: 0.73rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .home-daily-route-note h3 {
        margin: 0;
        color: var(--text);
        font-size: clamp(1.4rem, 2.4vw, 2.1rem);
        line-height: 1;
      }

      .home-daily-route-note p {
        margin: 0;
        color: var(--muted);
        line-height: 1.6;
      }

      .home-daily-route-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
      }

      .home-daily-route-metrics strong {
        display: grid;
        gap: 5px;
        min-width: 0;
        border: 1px solid rgba(14, 26, 22, 0.103);
        border-radius: 8px;
        padding: 10px;
        background: rgba(var(--surface-rgb), 0.061);
      }

      .home-daily-route-metrics b {
        color: var(--green);
        font-size: 1.2rem;
      }

      .home-daily-route-metrics em {
        color: var(--muted);
        font-size: 0.74rem;
        font-style: normal;
        font-weight: 850;
      }

      .home-directory {
        padding-top: 20px;
      }

      .home-directory-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
      }

      .home-directory-panel {
        min-width: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 18px;
        background:
          linear-gradient(180deg, rgba(14, 26, 22, 0.067), rgba(14, 26, 22, 0.028)),
          var(--panel);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
      }

      .home-directory-panel h3 {
        margin: 0 0 13px;
        font-size: 1.08rem;
      }

      .home-directory-panel a {
        min-height: 38px;
        display: flex;
        align-items: center;
        border-top: 1px solid rgba(14, 26, 22, 0.092);
        color: var(--soft);
        font-size: 0.88rem;
        font-weight: 760;
        transition:
          color 180ms ease,
          padding-left 180ms ease;
      }

      .home-directory-panel a:hover,
      .home-directory-panel a:focus-visible {
        color: var(--green);
        padding-left: 6px;
        outline: 0;
      }

      .home-intelligence-board {
        padding-top: 20px;
      }

      .home-intelligence-grid {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 14px;
      }

      .home-leaderboard-panel,
      .home-flow-panel,
      .home-team-corridor {
        min-width: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 18px;
        background:
          linear-gradient(180deg, rgba(14, 26, 22, 0.067), rgba(14, 26, 22, 0.028)),
          var(--panel);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
      }

      .home-panel-head {
        display: grid;
        gap: 7px;
        margin-bottom: 14px;
      }

      .home-panel-head span {
        color: var(--cyan);
        font-size: 0.74rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .home-panel-head strong {
        color: var(--text);
        font-size: 1.14rem;
        line-height: 1.12;
      }

      .home-leaderboard-list,
      .home-flow-list,
      .home-team-grid {
        display: grid;
        gap: 9px;
      }

      .home-flow-list {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .home-leader-row,
      .home-flow-list a,
      .home-team-grid a {
        min-width: 0;
        border: 1px solid rgba(14, 26, 22, 0.127);
        border-radius: 8px;
        background: rgba(var(--surface-rgb), 0.044);
        color: var(--text);
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          background 180ms ease;
      }

      .home-leader-row {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) auto;
        gap: 9px;
        align-items: center;
        min-height: 54px;
        padding: 11px;
      }

      .home-leader-row span,
      .home-flow-list span,
      .home-team-grid span {
        color: var(--cyan);
        font-size: 0.72rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .home-leader-row strong {
        overflow-wrap: anywhere;
        font-size: 0.92rem;
      }

      .home-leader-row b {
        display: inline-grid;
        min-width: 38px;
        height: 34px;
        place-items: center;
        border: 1px solid rgba(11, 143, 90, 0.154);
        border-radius: 999px;
        color: var(--green);
        font-size: 0.9rem;
      }

      .home-flow-list a {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 9px 12px;
        align-items: center;
        min-height: 58px;
        padding: 11px;
      }

      .home-flow-list span {
        grid-row: span 2;
        display: inline-grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border-radius: 999px;
        background: rgba(11, 143, 90, 0.055);
        color: var(--green);
      }

      .home-flow-list strong,
      .home-team-grid strong {
        font-size: 0.96rem;
        line-height: 1.12;
      }

      .home-flow-list em,
      .home-team-grid em {
        color: var(--muted);
        font-size: 0.8rem;
        font-style: normal;
      }

      .home-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .home-team-grid a {
        display: grid;
        gap: 8px;
        min-height: 112px;
        align-content: start;
        padding: 13px;
      }

      .home-team-grid span {
        display: inline-flex;
        width: fit-content;
        min-height: 30px;
        align-items: center;
        border: 1px solid rgba(11, 143, 90, 0.132);
        border-radius: 999px;
        padding: 0 9px;
        color: var(--green);
      }

      .home-leader-row:hover,
      .home-leader-row:focus-visible,
      .home-flow-list a:hover,
      .home-flow-list a:focus-visible,
      .home-team-grid a:hover,
      .home-team-grid a:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(11, 143, 90, 0.209);
        background: rgba(11, 143, 90, 0.039);
        outline: 0;
      }

      .home-agenda-hub {
        padding-top: 20px;
      }

      .home-agenda-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }

      .home-agenda-card {
        min-width: 0;
        min-height: 236px;
        display: grid;
        align-content: start;
        gap: 12px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 18px;
        background:
          radial-gradient(circle at 100% 0%, rgba(13, 148, 136, 0.05), transparent 34%),
          linear-gradient(180deg, rgba(14, 26, 22, 0.067), rgba(14, 26, 22, 0.028)),
          var(--panel);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
      }

      .home-agenda-card > span {
        color: var(--cyan);
        font-size: 0.74rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .home-agenda-card strong {
        font-size: 1.16rem;
        line-height: 1.12;
      }

      .home-agenda-card p {
        margin: 0;
        color: var(--muted);
        font-size: 0.88rem;
      }

      .home-agenda-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 2px;
      }

      .home-agenda-actions a {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(11, 143, 90, 0.127);
        border-radius: 999px;
        padding: 0 10px;
        background: rgba(11, 143, 90, 0.036);
        color: var(--soft);
        font-size: 0.78rem;
        font-weight: 780;
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          color 180ms ease;
      }

      .home-agenda-actions a:hover,
      .home-agenda-actions a:focus-visible {
        transform: translateY(-1px);
        border-color: rgba(11, 143, 90, 0.275);
        color: var(--green);
        outline: 0;
      }

      .traffic-deep-links {
        padding-top: 20px;
      }

      .traffic-stack-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.95fr);
        gap: 14px;
      }

      .traffic-panel {
        min-width: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 18px;
        background:
          linear-gradient(180deg, rgba(14, 26, 22, 0.067), rgba(14, 26, 22, 0.028)),
          var(--panel);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
      }

      .traffic-panel-head {
        display: grid;
        gap: 7px;
        margin-bottom: 14px;
      }

      .traffic-panel-head span,
      .traffic-player-card span,
      .traffic-fixture-note span {
        color: var(--cyan);
        font-size: 0.74rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .traffic-panel-head strong {
        color: var(--text);
        font-size: 1.14rem;
        line-height: 1.12;
      }

      .traffic-player-list,
      .traffic-mini-links,
      .traffic-team-strip {
        display: grid;
        gap: 9px;
      }

      .traffic-player-card,
      .traffic-mini-link,
      .traffic-panel-cta,
      .traffic-fixture-note,
      .traffic-team-strip a {
        border: 1px solid rgba(14, 26, 22, 0.127);
        border-radius: 8px;
        background: rgba(var(--surface-rgb), 0.044);
      }

      .traffic-player-card,
      .traffic-mini-link,
      .traffic-panel-cta,
      .traffic-team-strip a {
        color: var(--text);
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          background 180ms ease;
      }

      .traffic-player-card {
        display: grid;
        gap: 6px;
        padding: 13px;
      }

      .traffic-player-card strong {
        font-size: 0.98rem;
        line-height: 1.12;
      }

      .traffic-player-card em {
        color: var(--muted);
        font-size: 0.82rem;
        font-style: normal;
      }

      .traffic-mini-link {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 9px;
        align-items: center;
        min-height: 54px;
        padding: 11px;
        font-size: 0.88rem;
        font-weight: 820;
      }

      .traffic-mini-link span {
        min-width: 0;
        overflow-wrap: anywhere;
      }

      .traffic-mini-link b {
        display: inline-grid;
        width: 32px;
        height: 32px;
        place-items: center;
        border-radius: 999px;
        background: rgba(11, 143, 90, 0.061);
        color: var(--green);
        font-size: 0.7rem;
      }

      .traffic-panel-cta {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 12px;
        color: var(--green);
        font-weight: 850;
      }

      .traffic-fixture-note {
        display: grid;
        gap: 9px;
        margin-bottom: 12px;
        padding: 14px;
        background:
          radial-gradient(circle at 95% 5%, rgba(11, 143, 90, 0.066), transparent 36%),
          rgba(14, 26, 22, 0.044);
      }

      .traffic-fixture-note strong {
        font-size: 1.24rem;
      }

      .traffic-fixture-note p {
        margin: 0;
        color: var(--muted);
        font-size: 0.88rem;
      }

      .traffic-team-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .traffic-team-strip a {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        color: var(--soft);
        font-size: 0.82rem;
        font-weight: 780;
        text-align: center;
      }

      .traffic-player-card:hover,
      .traffic-player-card:focus-visible,
      .traffic-mini-link:hover,
      .traffic-mini-link:focus-visible,
      .traffic-panel-cta:hover,
      .traffic-panel-cta:focus-visible,
      .traffic-team-strip a:hover,
      .traffic-team-strip a:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(11, 143, 90, 0.209);
        background: rgba(11, 143, 90, 0.039);
        outline: 0;
      }

      .home-match-command,
      .home-player-leagues,
      .home-rivalry-wall {
        padding-top: 20px;
      }

      .home-lockin-grid,
      .home-rank-grid {
        display: grid;
        gap: 14px;
      }

      .home-lockin-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .home-rank-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .home-lockin-card,
      .home-rank-card,
      .rivalry-wall-shell,
      .rivalry-route-grid a {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background:
          linear-gradient(180deg, rgba(14, 26, 22, 0.067), rgba(14, 26, 22, 0.028)),
          var(--panel);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
      }

      .home-lockin-card,
      .rivalry-route-grid a {
        color: var(--text);
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          background 180ms ease;
      }

      .home-lockin-card {
        min-height: 235px;
        display: grid;
        align-content: space-between;
        gap: 16px;
        padding: 18px;
      }

      .home-lockin-card.is-hot {
        background:
          radial-gradient(circle at 95% 4%, rgba(11, 143, 90, 0.099), transparent 38%),
          linear-gradient(180deg, rgba(14, 26, 22, 0.078), rgba(14, 26, 22, 0.032)),
          var(--panel);
      }

      .home-lockin-card span,
      .home-rank-card > span,
      .rivalry-route-grid span {
        color: var(--cyan);
        font-size: 0.74rem;
        font-weight: 850;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .home-lockin-card strong {
        display: block;
        font-size: 1.28rem;
        line-height: 1.08;
      }

      .home-lockin-card p {
        margin: 0;
        color: var(--muted);
        font-size: 0.9rem;
        line-height: 1.55;
      }

      .home-lockin-card b,
      .home-rank-cta {
        color: var(--green);
        font-size: 0.84rem;
        font-weight: 850;
      }

      .home-explore-lab {
        padding-top: 22px;
      }

      .explore-lab-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
      }

      .explore-lab-card {
        min-width: 0;
        min-height: 218px;
        display: grid;
        align-content: space-between;
        gap: 14px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 18px;
        color: var(--text);
        background:
          radial-gradient(circle at 100% 0%, rgba(13, 148, 136, 0.06), transparent 34%),
          linear-gradient(180deg, rgba(14, 26, 22, 0.067), rgba(14, 26, 22, 0.028)),
          var(--panel);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          background 180ms ease;
      }

      .explore-lab-card span {
        color: var(--cyan);
        font-size: 0.74rem;
        font-weight: 850;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .explore-lab-card strong {
        display: block;
        font-size: 1.18rem;
        line-height: 1.12;
      }

      .explore-lab-card p {
        margin: 0;
        color: var(--muted);
        font-size: 0.9rem;
        line-height: 1.55;
      }

      .explore-lab-card b {
        color: var(--green);
        font-size: 0.84rem;
        font-weight: 850;
      }

      .home-rank-card {
        min-width: 0;
        padding: 18px;
      }

      .home-rank-card h3 {
        margin: 8px 0 14px;
        font-size: 1.18rem;
      }

      .home-rank-card ol {
        display: grid;
        gap: 9px;
        margin: 0 0 14px;
        padding: 0;
        list-style: none;
      }

      .home-rank-card li a {
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: 1px solid rgba(14, 26, 22, 0.127);
        border-radius: 8px;
        padding: 10px 11px;
        background: rgba(var(--surface-rgb), 0.044);
        color: var(--text);
      }

      .home-rank-card li b {
        min-width: 36px;
        min-height: 28px;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        background: rgba(11, 143, 90, 0.061);
        color: var(--green);
        font-size: 0.78rem;
      }

      .home-rank-cta {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
      }

      .rivalry-wall-shell {
        display: grid;
        grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
        gap: 18px;
        padding: 20px;
        overflow: hidden;
      }

      .rivalry-copy {
        display: grid;
        align-content: center;
        gap: 12px;
      }

      .rivalry-copy h2 {
        margin: 0;
        font-size: clamp(1.6rem, 3vw, 2.45rem);
        line-height: 1.02;
      }

      .rivalry-copy p {
        margin: 0;
        color: var(--muted);
        line-height: 1.6;
      }

      .rivalry-route-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
      }

      .rivalry-route-grid a {
        display: grid;
        gap: 7px;
        min-height: 132px;
        padding: 15px;
      }

      .rivalry-route-grid strong {
        font-size: 1rem;
        line-height: 1.15;
      }

      .rivalry-route-grid em {
        color: var(--muted);
        font-size: 0.82rem;
        font-style: normal;
        line-height: 1.45;
      }

      .home-lockin-card:hover,
      .home-lockin-card:focus-visible,
      .home-rank-card li a:hover,
      .home-rank-card li a:focus-visible,
      .explore-lab-card:hover,
      .explore-lab-card:focus-visible,
      .rivalry-route-grid a:hover,
      .rivalry-route-grid a:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(11, 143, 90, 0.209);
        background: rgba(11, 143, 90, 0.039);
        outline: 0;
      }

      .intent-hero {
        min-height: auto;
        padding-bottom: 24px;
      }

      .intent-hero .hero-copy {
        max-width: 760px;
      }

      .intent-grid-section,
      .intent-route-panel {
        padding-top: 12px;
      }

      .intent-card-grid,
      .intent-link-grid {
        display: grid;
        gap: 14px;
      }

      .intent-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .intent-link-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .intent-player-card,
      .intent-link-grid a {
        min-width: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background:
          linear-gradient(180deg, rgba(14, 26, 22, 0.067), rgba(14, 26, 22, 0.028)),
          var(--panel);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
      }

      .intent-player-card {
        display: grid;
        gap: 10px;
        min-height: 188px;
        padding: 18px;
      }

      .intent-player-card > span {
        display: inline-grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border: 1px solid rgba(11, 143, 90, 0.132);
        border-radius: 999px;
        background: rgba(11, 143, 90, 0.055);
        color: var(--green);
        font-weight: 900;
      }

      .intent-player-card h3 {
        margin: 0;
        font-size: 1.2rem;
        line-height: 1.1;
      }

      .intent-player-card p,
      .intent-link-grid span {
        margin: 0;
        color: var(--muted);
        line-height: 1.48;
      }

      .intent-player-card a {
        align-self: end;
        width: fit-content;
        color: var(--green);
        font-size: 0.86rem;
        font-weight: 850;
      }

      .intent-link-grid a {
        display: grid;
        gap: 8px;
        min-height: 118px;
        padding: 16px;
        color: var(--text);
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          background 180ms ease;
      }

      .intent-link-grid strong {
        font-size: 1rem;
        line-height: 1.16;
      }

      .intent-link-grid a:hover,
      .intent-link-grid a:focus-visible,
      .intent-player-card a:hover,
      .intent-player-card a:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(11, 143, 90, 0.209);
        background: rgba(11, 143, 90, 0.039);
        outline: 0;
      }

      .intent-stack-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .intent-stack-card {
        min-width: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 18px;
        background:
          linear-gradient(180deg, rgba(14, 26, 22, 0.067), rgba(14, 26, 22, 0.028)),
          var(--panel);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
      }

      .intent-stack-card > span {
        color: var(--cyan);
        font-size: 0.74rem;
        font-weight: 850;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .intent-stack-card h3 {
        margin: 9px 0 10px;
        font-size: 1.18rem;
        line-height: 1.12;
      }

      .intent-stack-card p {
        margin: 0 0 14px;
        color: var(--muted);
        line-height: 1.55;
      }

      .intent-mini-list {
        display: grid;
        gap: 9px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .intent-mini-list li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 1px solid rgba(14, 26, 22, 0.115);
        border-radius: 8px;
        padding: 10px 11px;
        background: rgba(var(--surface-rgb), 0.04);
        color: var(--soft);
      }

      .intent-mini-list b {
        color: var(--green);
        white-space: nowrap;
      }

      .intent-chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
      }

      .intent-chip-row a {
        display: inline-flex;
        min-height: 38px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(11, 143, 90, 0.121);
        border-radius: 999px;
        padding: 0 12px;
        color: var(--soft);
        background: rgba(11, 143, 90, 0.033);
        font-size: 0.84rem;
        font-weight: 760;
      }

      .intent-chip-row a:hover,
      .intent-chip-row a:focus-visible {
        border-color: rgba(11, 143, 90, 0.231);
        color: var(--green);
        background: rgba(11, 143, 90, 0.055);
        outline: 0;
      }

      .daily-command-grid,
      .daily-pulse-grid {
        display: grid;
        gap: 14px;
      }

      .daily-command-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .daily-pulse-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .daily-command-card,
      .daily-pulse-card {
        position: relative;
        min-width: 0;
        overflow: hidden;
        border: 1px solid rgba(13, 148, 136, 0.075);
        border-radius: var(--radius);
        background:
          linear-gradient(180deg, rgba(14, 26, 22, 0.064), rgba(14, 26, 22, 0.028)),
          var(--panel);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
      }

      .daily-command-card {
        display: grid;
        min-height: 232px;
        align-content: start;
        gap: 12px;
        padding: 18px;
        color: var(--text);
      }

      .daily-command-card.is-hot {
        border-color: rgba(11, 143, 90, 0.187);
        background:
          radial-gradient(circle at 90% 8%, rgba(11, 143, 90, 0.088), transparent 35%),
          linear-gradient(180deg, rgba(14, 26, 22, 0.069), rgba(14, 26, 22, 0.03)),
          var(--panel);
      }

      .daily-command-card span,
      .daily-pulse-card span {
        width: fit-content;
        border: 1px solid rgba(11, 143, 90, 0.11);
        border-radius: 999px;
        padding: 6px 9px;
        color: var(--green);
        background: rgba(11, 143, 90, 0.036);
        font-size: 0.72rem;
        font-weight: 950;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      .daily-command-card strong,
      .daily-pulse-card strong {
        color: var(--text);
        font-size: 1.08rem;
        line-height: 1.18;
      }

      .daily-command-card p,
      .daily-pulse-card p {
        margin: 0;
        color: var(--muted);
        font-size: 0.9rem;
        line-height: 1.58;
      }

      .daily-command-card em {
        align-self: end;
        width: fit-content;
        margin-top: auto;
        border-top: 1px solid rgba(11, 143, 90, 0.121);
        padding-top: 9px;
        color: var(--cyan);
        font-size: 0.78rem;
        font-style: normal;
        font-weight: 900;
      }

      .daily-pulse-card {
        display: grid;
        gap: 12px;
        padding: 18px;
      }

      .daily-pulse-card div {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .daily-pulse-card a {
        display: inline-flex;
        min-height: 34px;
        align-items: center;
        border: 1px solid rgba(13, 148, 136, 0.08);
        border-radius: 999px;
        padding: 0 10px;
        color: var(--soft);
        background: rgba(var(--surface-rgb), 0.046);
        font-size: 0.8rem;
        font-weight: 850;
      }

      .daily-command-card:hover,
      .daily-command-card:focus-visible,
      .daily-pulse-card a:hover,
      .daily-pulse-card a:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(11, 143, 90, 0.209);
        background: rgba(11, 143, 90, 0.039);
        outline: 0;
      }

      .home-daily-brief,
      .brief-flow-section {
        padding-top: 22px;
      }

      .daily-brief-shell,
      .brief-command-card {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background:
          radial-gradient(circle at 95% 4%, rgba(11, 143, 90, 0.072), transparent 34%),
          linear-gradient(180deg, rgba(14, 26, 22, 0.067), rgba(14, 26, 22, 0.028)),
          var(--panel);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
      }

      .daily-brief-shell {
        display: grid;
        grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
        gap: 18px;
        padding: 20px;
      }

      .daily-brief-lead {
        display: grid;
        align-content: center;
        gap: 12px;
      }

      .daily-brief-lead h2 {
        margin: 0;
        font-size: clamp(1.55rem, 3vw, 2.35rem);
        line-height: 1.02;
      }

      .daily-brief-lead p {
        margin: 0;
        color: var(--muted);
        line-height: 1.6;
      }

      .daily-brief-link {
        width: fit-content;
        color: var(--green);
        font-size: 0.88rem;
        font-weight: 850;
      }

      .daily-brief-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .daily-brief-card {
        min-width: 0;
        display: grid;
        gap: 8px;
        border: 1px solid rgba(14, 26, 22, 0.127);
        border-radius: 8px;
        padding: 15px;
        background: rgba(var(--surface-rgb), 0.041);
        color: var(--text);
      }

      .daily-brief-card span,
      .brief-command-card > span {
        color: var(--cyan);
        font-size: 0.72rem;
        font-weight: 850;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .daily-brief-card strong {
        line-height: 1.16;
      }

      .daily-brief-card em {
        color: var(--muted);
        font-size: 0.84rem;
        font-style: normal;
        line-height: 1.45;
      }

      .brief-command-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }

      .brief-command-card {
        display: grid;
        gap: 12px;
        min-height: 226px;
        padding: 18px;
      }

      .brief-command-card h3 {
        margin: 0;
        font-size: 1.2rem;
        line-height: 1.12;
      }

      .brief-command-card p {
        margin: 0;
        color: var(--muted);
        line-height: 1.55;
      }

      .brief-command-card a {
        align-self: end;
        width: fit-content;
        color: var(--green);
        font-size: 0.86rem;
        font-weight: 850;
      }

      .matches-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
      }

      /* Canlı maç yokken canlı skor sayfasında gösterilen günün sonuçları.
         Sarmalayıcı `.grid` üç sütunlu; bu bölüm tek hücreye sıkışırsa
         içindeki kartlar okunamayacak kadar daralıyor, o yüzden satırın
         tamamını kaplar. */
      .live-score-daily {
        grid-column: 1 / -1;
        min-width: 0;
      }

      /* Kart sayısı değişken olduğu için sabit dört sütun yerine sığdıkça
         yerleşir; üç maçlık bir günde kartlar dörtte bire düşmez.

         Taban, genel maç ızgarasıyla AYNI (228px). Bu seçici daha özgül
         olduğu için 240px'te bırakıldığında canlı skor sayfası masaüstünde
         dört sütunda kalıyor, diğer iki yüzey beşe çıkıyordu; aynı kart aynı
         genişlikte iki farklı sayfada farklı diziliyordu. */
      .live-score-daily .matches-grid {
        grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
      }

      .live-score-daily-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 10px;
        margin: 0 0 14px;
      }

      .live-score-daily-head span {
        color: var(--muted);
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      .live-score-daily-head strong {
        color: var(--text);
        font-size: 1.02rem;
      }

      .live-score-daily .match-empty-actions {
        margin-top: 14px;
      }

      .glass-card {
        min-height: 268px;
        padding: 17px;
      }

      .match-meta {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 16px;
        color: var(--muted);
        font-size: 0.78rem;
      }

      .teams {
        display: grid;
        gap: 10px;
        margin-bottom: 16px;
      }

      .team-line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .team-line strong {
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: 1.02rem;
      }

      .form-score {
        flex: 0 0 auto;
        min-width: 42px;
        border: 1px solid rgba(13, 148, 136, 0.12);
        border-radius: 999px;
        padding: 4px 8px;
        color: var(--cyan);
        font-size: 0.78rem;
        text-align: center;
      }

      .card-stat {
        display: grid;
        gap: 6px;
        margin-top: 14px;
      }

      .stat-line {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        color: var(--muted);
        font-size: 0.82rem;
      }

      .tag-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 16px;
      }

      .tag {
        display: inline-flex;
        min-height: 29px;
        align-items: center;
        border: 1px solid rgba(14, 26, 22, 0.138);
        border-radius: 999px;
        padding: 0 9px;
        background: rgba(var(--surface-rgb), 0.052);
        color: var(--soft);
        font-size: 0.76rem;
        font-weight: 750;
      }

      .tag.green {
        border-color: rgba(11, 143, 90, 0.187);
        color: var(--green);
      }

      .tag.cyan {
        border-color: rgba(13, 148, 136, 0.17);
        color: var(--cyan);
      }

      .tag.amber {
        border-color: rgba(176, 116, 16, 0.216);
        color: var(--amber);
      }

      .signals-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
      }

      .signal-card {
        min-height: 168px;
        padding: 18px;
      }

      .signal-label {
        color: var(--muted);
        font-size: 0.75rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .signal-card h3 {
        margin: 14px 0 10px;
        font-size: 1.1rem;
        line-height: 1.15;
      }

      .signal-value {
        display: block;
        color: var(--green);
        font-size: 1.82rem;
        font-weight: 900;
        line-height: 1;
      }

      .signal-card p {
        margin: 12px 0 0;
        color: var(--muted);
        font-size: 0.86rem;
      }

      .radar-layout {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 14px;
      }

      .teams-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .team-card {
        min-height: 230px;
        padding: 18px;
      }

      .team-card header,
      .player-card header {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
      }

      .team-card h3,
      .player-card h3,
      .article-card h3 {
        margin-bottom: 5px;
        font-size: 1.18rem;
        line-height: 1.18;
      }

      .team-card header span,
      .player-card header span {
        color: var(--muted);
        font-size: 0.82rem;
      }

      .momentum-number {
        flex: 0 0 auto;
        color: var(--green);
        font-size: 1.9rem;
        font-weight: 950;
        line-height: 1;
      }

      .form-dots {
        display: flex;
        gap: 7px;
        margin-bottom: 16px;
      }

      .form-dots span {
        display: grid;
        width: 30px;
        height: 30px;
        place-items: center;
        border-radius: 50%;
        background: rgba(var(--surface-rgb), 0.081);
        color: var(--soft);
        font-size: 0.72rem;
        font-weight: 900;
      }

      .form-dots .win {
        background: rgba(11, 143, 90, 0.088);
        color: var(--green);
      }

      .form-dots .draw {
        background: rgba(176, 116, 16, 0.096);
        color: var(--amber);
      }

      .form-dots .loss {
        background: rgba(200, 30, 45, 0.084);
        color: var(--red);
      }

      .detail-link {
        display: inline-flex;
        min-height: 36px;
        align-items: center;
        justify-content: center;
        margin-top: 16px;
        border: 1px solid rgba(13, 148, 136, 0.12);
        border-radius: 999px;
        padding: 0 13px;
        color: var(--cyan);
        font-size: 0.82rem;
        font-weight: 800;
      }

      button.detail-link {
        background: rgba(13, 148, 136, 0.03);
        cursor: pointer;
        font: inherit;
        font-size: 0.82rem;
        font-weight: 800;
      }

      .detail-link.ghost {
        border-color: rgba(11, 143, 90, 0.076);
        color: #5b6b65;
        background: rgba(var(--surface-rgb), 0.046);
        cursor: pointer;
        font: inherit;
        font-size: 0.82rem;
        font-weight: 800;
      }

      .standings {
        border: 1px solid rgba(13, 148, 136, 0.09);
        border-radius: var(--radius);
        background: rgba(var(--surface-rgb), 0.082);
        box-shadow: var(--shadow);
        overflow: hidden;
      }

      .standings header {
        padding: 18px;
        border-bottom: 1px solid rgba(14, 26, 22, 0.092);
      }

      .standings h3 {
        margin-bottom: 4px;
        font-size: 1.12rem;
      }

      .standings p {
        margin: 0;
        color: var(--muted);
        font-size: 0.82rem;
      }

      .standing-row {
        display: grid;
        grid-template-columns: 30px 1fr 48px 50px;
        gap: 10px;
        align-items: center;
        padding: 13px 18px;
        border-bottom: 1px solid rgba(14, 26, 22, 0.069);
        color: var(--soft);
        font-size: 0.88rem;
      }

      .standing-row:last-child {
        border-bottom: 0;
      }

      .standing-row b {
        color: var(--text);
      }

      .standing-row span:first-child,
      .standing-row span:nth-child(3),
      .standing-row span:nth-child(4) {
        color: var(--muted);
        text-align: right;
      }

      .players-grid,
      .articles-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }

      .player-toolbar {
        display: grid;
        grid-template-columns: repeat(6, minmax(130px, 1fr));
        align-items: end;
        gap: 12px;
        margin: -30px 0 18px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 14px;
        background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.063), rgba(var(--surface-rgb), 0.029)), var(--panel);
        box-shadow: var(--shadow);
      }

      .filter-group {
        display: grid;
        gap: 7px;
        min-width: 0;
      }

      .filter-group label {
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 850;
        text-transform: uppercase;
      }

      .filter-group select,
      .filter-group input {
        width: 100%;
        min-height: 40px;
        border: 1px solid rgba(13, 148, 136, 0.1);
        border-radius: var(--radius);
        padding: 0 10px;
        color: var(--text);
        background: rgba(var(--surface-rgb), 0.84);
        font: inherit;
        font-size: 0.88rem;
      }

      .filter-group select:focus-visible,
      .filter-group input:focus-visible,
      .filter-chip:focus-visible {
        outline: 2px solid rgba(11, 143, 90, 0.248);
        outline-offset: 2px;
      }

      .filter-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        grid-column: 1 / 6;
        min-width: 0;
      }

      .filter-chip {
        min-height: 38px;
        border: 1px solid rgba(11, 143, 90, 0.076);
        border-radius: 999px;
        padding: 0 12px;
        color: #5b6b65;
        background: rgba(var(--surface-rgb), 0.052);
        font: inherit;
        font-size: 0.82rem;
        font-weight: 850;
        cursor: pointer;
      }

      .filter-chip.is-active {
        border-color: rgba(11, 143, 90, 0.264);
        color: var(--green);
        background: rgba(11, 143, 90, 0.055);
      }

      .player-count {
        align-self: center;
        justify-self: end;
        grid-column: 6;
        color: var(--muted);
        font-size: 0.82rem;
        font-weight: 850;
        white-space: nowrap;
      }

      .player-filter-note {
        margin: 0 0 18px;
        border: 1px solid rgba(13, 148, 136, 0.09);
        border-radius: var(--radius);
        padding: 14px 16px;
        color: #5b6b65;
        background: rgba(13, 148, 136, 0.035);
        font-size: 0.94rem;
      }

      .player-radar-hero {
        position: relative;
      }

      .player-quick-links {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        margin: -28px 0 18px;
      }

      .player-quick-links a {
        display: inline-flex;
        min-height: 36px;
        align-items: center;
        border: 1px solid rgba(11, 143, 90, 0.11);
        border-radius: 999px;
        padding: 0 12px;
        color: var(--green);
        background: rgba(11, 143, 90, 0.041);
        font-size: 0.82rem;
        font-weight: 900;
      }

      .comparison-hub-strip {
        display: grid;
        gap: 14px;
        margin: 0 0 18px;
        border: 1px solid rgba(13, 148, 136, 0.08);
        border-radius: var(--radius);
        padding: 16px;
        background:
          linear-gradient(180deg, rgba(13, 148, 136, 0.028), rgba(11, 143, 90, 0.014)),
          var(--panel);
        box-shadow: var(--shadow);
      }

      .comparison-hub-head {
        display: grid;
        gap: 5px;
      }

      .comparison-hub-head span {
        color: var(--green);
        font-size: 0.74rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      .comparison-hub-head h2 {
        margin: 0;
        color: var(--text);
        font-size: clamp(1.15rem, 2.4vw, 1.7rem);
        line-height: 1.12;
      }

      .comparison-hub-head p {
        max-width: 780px;
        margin: 0;
        color: var(--muted);
        line-height: 1.5;
      }

      .comparison-hub-all {
        justify-self: start;
        color: var(--cyan);
        font-size: 0.84rem;
        font-weight: 900;
      }

      .comparison-hub-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }

      .comparison-hub-card {
        display: grid;
        min-width: 0;
        gap: 8px;
        border: 1px solid rgba(11, 143, 90, 0.077);
        border-radius: var(--radius);
        padding: 13px;
        color: var(--text);
        background: rgba(var(--surface-rgb), 0.04);
      }

      .comparison-hub-card span,
      .comparison-hub-card em {
        color: var(--muted);
        font-size: 0.72rem;
        font-style: normal;
        font-weight: 900;
        text-transform: uppercase;
      }

      .comparison-hub-card strong {
        color: var(--green);
        font-size: 0.94rem;
        line-height: 1.24;
      }

      .comparison-hub-card em {
        color: var(--cyan);
      }

      .player-summary-metrics {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
        margin: 0 0 18px;
      }

      .player-radar-metrics {
        width: 100%;
      }

      .player-summary-metric {
        min-width: 0;
        border: 1px solid rgba(11, 143, 90, 0.076);
        border-radius: var(--radius);
        padding: 15px;
        background:
          linear-gradient(180deg, rgba(11, 143, 90, 0.036), rgba(14, 26, 22, 0.029)),
          var(--panel);
        box-shadow: var(--shadow);
      }

      .player-summary-metric span,
      .player-summary-metric em {
        display: block;
        color: var(--muted);
        font-size: 0.74rem;
        font-style: normal;
        font-weight: 850;
        text-transform: uppercase;
      }

      .player-summary-metric strong {
        display: block;
        margin: 8px 0 5px;
        color: var(--green);
        font-size: clamp(1.45rem, 3vw, 2.1rem);
        line-height: 0.95;
      }

      .player-summary-metrics + .player-toolbar {
        margin-top: 0;
      }

      .player-filter-panel {
        box-shadow: var(--shadow);
      }

      .player-trust-note {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        margin: -4px 0 18px;
        border: 1px solid rgba(11, 143, 90, 0.088);
        border-radius: var(--radius);
        padding: 13px 15px;
        background: rgba(11, 143, 90, 0.03);
      }

      .player-trust-note strong {
        color: var(--green);
        white-space: nowrap;
      }

      .player-trust-note span {
        color: var(--muted);
        font-size: 0.86rem;
        line-height: 1.55;
      }

      .player-card,
      .article-card {
        min-height: 218px;
        padding: 18px;
      }

      .player-card-header {
        gap: 14px;
      }

      .rating {
        flex: 0 0 auto;
        min-width: 58px;
        border: 1px solid rgba(11, 143, 90, 0.176);
        border-radius: var(--radius);
        padding: 8px;
        color: var(--green);
        font-weight: 950;
        text-align: center;
        background: rgba(11, 143, 90, 0.044);
      }

      .player-rating-badge {
        min-width: 64px;
        border: 1px solid rgba(11, 143, 90, 0.176);
        border-radius: var(--radius);
        padding: 8px 10px;
        background: rgba(11, 143, 90, 0.044);
        text-align: center;
      }

      .trend {
        display: inline-flex;
        min-height: 30px;
        align-items: center;
        margin: 0 0 16px;
        border-radius: 999px;
        padding: 0 10px;
        background: rgba(13, 148, 136, 0.05);
        color: var(--cyan);
        font-size: 0.78rem;
        font-weight: 800;
      }

      .badge-row {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin: 0 0 14px;
      }

      .radar-badge {
        display: inline-flex;
        min-height: 28px;
        align-items: center;
        border: 1px solid rgba(11, 143, 90, 0.154);
        border-radius: 999px;
        padding: 0 9px;
        color: var(--green);
        background: rgba(11, 143, 90, 0.044);
        font-size: 0.74rem;
        font-weight: 850;
      }

      .player-summary {
        margin: -4px 0 14px;
        color: var(--muted);
        font-size: 0.9rem;
      }

      .player-card-title {
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 10px;
      }

      .player-card-title > div {
        min-width: 0;
      }

      .player-avatar {
        display: inline-grid;
        width: 42px;
        height: 42px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid rgba(11, 143, 90, 0.187);
        border-radius: 999px;
        color: var(--green);
        background:
          radial-gradient(circle at 35% 25%, rgba(11, 143, 90, 0.121), transparent 48%),
          rgba(5, 18, 16, 0.88);
        box-shadow: 0 0 18px rgba(11, 143, 90, 0.072);
        font-size: 0.78rem;
        font-weight: 950;
        letter-spacing: 0;
        overflow: hidden;
      }

      .player-avatar.large {
        width: 76px;
        height: 76px;
        font-size: 1.15rem;
      }

      .player-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .player-status-row {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin: 0 0 12px;
      }

      .player-status-badge {
        white-space: nowrap;
      }

      .player-card-scout-note {
        display: grid;
        gap: 6px;
        margin: 0 0 14px;
        border: 1px solid rgba(13, 148, 136, 0.07);
        border-radius: 8px;
        padding: 10px 12px;
        background: rgba(13, 148, 136, 0.028);
      }

      .player-card-scout-note span {
        color: var(--cyan);
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      .player-card-scout-note strong {
        color: var(--text);
        font-size: 0.88rem;
      }

      .radar-mini-bars {
        display: grid;
        gap: 8px;
      }

      .radar-mini-bar {
        min-width: 0;
      }

      .player-empty-state {
        grid-column: 1 / -1;
      }

      .player-card-meta-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 0 0 14px;
      }

      .data-quality-warning {
        margin: 0 0 14px;
        border: 1px solid rgba(176, 116, 16, 0.144);
        border-radius: var(--radius);
        padding: 10px 12px;
        color: #ffe2a1;
        background: rgba(176, 116, 16, 0.048);
        font-size: 0.82rem;
        font-weight: 800;
      }

      .compare-tray {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) auto;
        align-items: center;
        gap: 12px;
        margin: 0 0 18px;
        border: 1px solid rgba(11, 143, 90, 0.132);
        border-radius: var(--radius);
        padding: 14px;
        background:
          linear-gradient(90deg, rgba(11, 143, 90, 0.044), rgba(13, 148, 136, 0.022)),
          var(--panel);
        box-shadow: var(--shadow);
      }

      .compare-tray[hidden] {
        display: none;
      }

      .compare-tray span,
      .compare-tray em {
        color: var(--muted);
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 850;
        text-transform: uppercase;
      }

      .compare-tray strong {
        display: block;
        margin-top: 4px;
        color: var(--green);
      }

      .compare-tray-players,
      .compare-tray-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
      }

      .compare-tray-players button {
        display: inline-flex;
        min-height: 34px;
        align-items: center;
        gap: 8px;
        border: 1px solid rgba(11, 143, 90, 0.076);
        border-radius: 999px;
        padding: 0 10px;
        color: #e2ece7;
        background: rgba(var(--surface-rgb), 0.052);
        font: inherit;
        font-size: 0.78rem;
        font-weight: 850;
        cursor: pointer;
      }

      .compare-tray-players button span {
        color: var(--green);
        font-size: 1rem;
        line-height: 1;
      }

      @media (max-width: 1180px) {
        .compare-tray {
          grid-template-columns: 1fr;
        }
      }

      .player-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 0 0 14px;
      }

      .player-metric {
        min-width: 0;
        border: 1px solid rgba(13, 148, 136, 0.08);
        border-radius: var(--radius);
        padding: 9px;
        background: rgba(var(--surface-rgb), 0.046);
      }

      .player-metric span {
        display: block;
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 800;
        text-transform: uppercase;
      }

      .player-metric b {
        display: block;
        margin-top: 4px;
        color: var(--text);
        font-size: 1rem;
        line-height: 1;
      }

      .player-radar {
        display: grid;
        gap: 9px;
        margin: 0 0 14px;
      }

      .player-radar .bar-row {
        grid-template-columns: 96px 1fr 38px;
        margin: 0;
      }

      .player-detail-card {
        min-height: 360px;
      }

      .player-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        margin-top: 14px;
      }

      .player-actions.compact {
        margin-top: 12px;
      }

      .player-actions.compact .detail-link {
        min-height: 32px;
        padding: 0 10px;
        font-size: 0.78rem;
      }

      .match-actions .detail-link {
        margin-top: 0;
      }

      .featured-match-actions {
        margin-top: 12px;
      }

      .player-signals-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
      }

      .player-signal-card {
        min-width: 0;
        min-height: 188px;
        border: 1px solid rgba(11, 143, 90, 0.076);
        border-radius: var(--radius);
        padding: 16px;
        background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.063), rgba(var(--surface-rgb), 0.029)), var(--panel);
        box-shadow: var(--shadow);
      }

      .player-signal-card h3 {
        margin: 8px 0 9px;
        font-size: 1.02rem;
        line-height: 1.16;
      }

      .player-signal-card p {
        margin: 8px 0 12px;
        color: var(--muted);
        font-size: 0.82rem;
      }

      .player-signal-card .signal-note {
        min-height: 58px;
        color: #5b6b65;
      }

      .player-signal-card a {
        color: var(--green);
        font-size: 0.82rem;
        font-weight: 850;
      }

      .player-signal-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
      }

      .player-signal-actions a {
        display: inline-flex;
        min-height: 30px;
        align-items: center;
        border: 1px solid rgba(11, 143, 90, 0.099);
        border-radius: 999px;
        padding: 6px 9px;
        background: rgba(var(--surface-rgb), 0.046);
      }

      .popular-links {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        align-items: center;
        margin: -22px 0 54px;
      }

      .popular-links span {
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 850;
        text-transform: uppercase;
      }

      .popular-links a {
        display: inline-flex;
        min-height: 34px;
        align-items: center;
        border: 1px solid rgba(13, 148, 136, 0.09);
        border-radius: 999px;
        padding: 0 11px;
        color: #5b6b65;
        background: rgba(var(--surface-rgb), 0.046);
        font-size: 0.82rem;
        font-weight: 800;
      }

      .route-chain {
        display: grid;
        grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1.45fr);
        gap: 16px;
        align-items: stretch;
        margin: 0 0 54px;
      }

      .route-chain-head,
      .route-chain-card {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(13, 148, 136, 0.08);
        border-radius: var(--radius);
        background:
          linear-gradient(135deg, rgba(11, 143, 90, 0.05), rgba(13, 148, 136, 0.018)),
          rgba(14, 26, 22, 0.046);
        box-shadow: 0 22px 60px rgba(14, 26, 22, 0.075);
      }

      .route-chain-head {
        padding: 20px;
      }

      .route-chain-head span,
      .route-chain-card span {
        display: inline-flex;
        width: fit-content;
        align-items: center;
        border: 1px solid rgba(11, 143, 90, 0.121);
        border-radius: 999px;
        padding: 6px 9px;
        color: var(--green);
        background: rgba(11, 143, 90, 0.041);
        font-size: 0.72rem;
        font-weight: 950;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .route-chain-head h2 {
        margin: 16px 0 9px;
        color: var(--text);
        font-size: clamp(1.25rem, 2.4vw, 2rem);
        line-height: 1.05;
      }

      .route-chain-head p,
      .route-chain-card p {
        margin: 0;
        color: var(--muted);
        font-size: 0.92rem;
        line-height: 1.65;
      }

      .route-chain-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        min-width: 0;
      }

      .route-chain-card {
        display: flex;
        min-height: 172px;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        color: var(--text);
      }

      .route-chain-card::after {
        content: "";
        position: absolute;
        inset: auto 16px 14px 16px;
        height: 1px;
        background: linear-gradient(90deg, rgba(11, 143, 90, 0.303), transparent);
        opacity: 0.7;
      }

      .route-chain-card strong {
        color: var(--text);
        font-size: 1rem;
        line-height: 1.2;
      }

      .route-chain-card:hover,
      .route-chain-card:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(11, 143, 90, 0.198);
        background:
          linear-gradient(135deg, rgba(11, 143, 90, 0.072), rgba(13, 148, 136, 0.03)),
          rgba(14, 26, 22, 0.063);
      }

      .route-chain-card.is-next {
        border-color: rgba(11, 143, 90, 0.187);
      }

      .search-trap {
        display: grid;
        grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1.55fr);
        gap: 14px;
        align-items: stretch;
        margin: -34px 0 54px;
        border: 1px solid rgba(11, 143, 90, 0.072);
        border-radius: var(--radius);
        padding: 14px;
        background:
          linear-gradient(135deg, rgba(13, 148, 136, 0.028), rgba(11, 143, 90, 0.019)),
          rgba(14, 26, 22, 0.032);
      }

      .search-trap-head {
        display: grid;
        align-content: center;
        gap: 8px;
        border-right: 1px solid rgba(14, 26, 22, 0.092);
        padding: 6px 14px 6px 4px;
      }

      .search-trap-head span,
      .search-trap-links span {
        color: var(--green);
        font-size: 0.72rem;
        font-weight: 950;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      .search-trap-head strong {
        color: var(--text);
        font-size: 1.02rem;
        line-height: 1.25;
      }

      .search-trap-links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        min-width: 0;
      }

      .search-trap-links a {
        display: grid;
        min-height: 70px;
        align-content: center;
        gap: 5px;
        border: 1px solid rgba(13, 148, 136, 0.07);
        border-radius: 12px;
        padding: 11px 12px;
        color: var(--text);
        background: rgba(var(--surface-rgb), 0.046);
      }

      .search-trap-links a:hover,
      .search-trap-links a:focus-visible {
        transform: translateY(-1px);
        border-color: rgba(11, 143, 90, 0.165);
        background: rgba(11, 143, 90, 0.039);
      }

      .search-trap-links b {
        color: var(--soft);
        font-size: 0.88rem;
        line-height: 1.2;
      }

      .landing-insights {
        display: grid;
        gap: 14px;
        margin: -18px 0 20px;
      }

      .landing-insights-head {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        align-items: end;
      }

      .landing-insights-head span {
        display: block;
        color: var(--green);
        font-size: 0.76rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      .landing-insights-head strong {
        display: block;
        margin-top: 4px;
        font-size: 1.08rem;
      }

      .landing-insights-head p {
        max-width: 460px;
        margin: 0;
        color: var(--muted);
        font-size: 0.88rem;
        text-align: right;
      }

      .landing-insights-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }

      .landing-insight-card {
        min-height: 156px;
        border: 1px solid rgba(13, 148, 136, 0.07);
        border-radius: var(--radius);
        padding: 15px;
        background:
          linear-gradient(180deg, rgba(14, 26, 22, 0.063), rgba(14, 26, 22, 0.028)),
          rgba(14, 26, 22, 0.04);
        box-shadow: 0 16px 45px rgba(14, 26, 22, 0.061);
      }

      .landing-insight-card.action {
        border-color: rgba(11, 143, 90, 0.132);
        background:
          linear-gradient(145deg, rgba(11, 143, 90, 0.05), rgba(13, 148, 136, 0.022)),
          rgba(14, 26, 22, 0.04);
      }

      .landing-insight-card span {
        display: block;
        color: var(--muted);
        font-size: 0.74rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      .landing-insight-card strong {
        display: block;
        margin: 9px 0 6px;
        font-size: 1.02rem;
        line-height: 1.2;
      }

      .landing-insight-card b {
        display: inline-flex;
        border: 1px solid rgba(11, 143, 90, 0.11);
        border-radius: 999px;
        padding: 4px 8px;
        color: var(--green);
        background: rgba(11, 143, 90, 0.044);
        font-size: 0.75rem;
      }

      .landing-insight-card p {
        margin: 10px 0 0;
        color: #c7d6d4;
        font-size: 0.84rem;
      }

      .landing-insight-card a {
        display: inline-flex;
        margin-top: 12px;
        color: var(--cyan);
        font-size: 0.82rem;
        font-weight: 900;
      }

      .fixture-overview {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin: -26px 0 20px;
      }

      .fixture-note {
        margin-bottom: 18px;
      }

      .fixture-rounds {
        display: grid;
        gap: 16px;
        margin-bottom: 42px;
      }

      .fixture-round-card,
      .fixture-team-card {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background:
          linear-gradient(180deg, rgba(14, 26, 22, 0.063), rgba(14, 26, 22, 0.029)),
          var(--panel);
        box-shadow: var(--shadow);
      }

      .fixture-round-card {
        padding: 18px;
      }

      .fixture-round-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 14px;
      }

      .fixture-round-head span,
      .fixture-team-card span {
        color: var(--muted);
        font-size: 0.82rem;
        font-weight: 750;
      }

      .fixture-round-head h2 {
        margin: 5px 0 0;
        font-size: 1.25rem;
      }

      .fixture-round-head b {
        display: inline-flex;
        min-height: 32px;
        align-items: center;
        border: 1px solid rgba(11, 143, 90, 0.121);
        border-radius: 999px;
        padding: 0 11px;
        color: var(--green);
        background: rgba(11, 143, 90, 0.039);
        font-size: 0.78rem;
      }

      .fixture-match-list {
        display: grid;
        gap: 10px;
      }

      .fixture-match-row {
        display: grid;
        grid-template-columns: minmax(90px, 0.6fr) minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        border: 1px solid rgba(14, 26, 22, 0.092);
        border-radius: var(--radius);
        padding: 12px;
        background: rgba(var(--surface-rgb), 0.04);
      }

      .fixture-time {
        color: var(--muted);
        font-size: 0.82rem;
        font-weight: 800;
      }

      .fixture-match-row {
        grid-template-columns: minmax(78px, 0.55fr) minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 0.7fr);
      }

      .fixture-match-time {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .fixture-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        width: fit-content;
        border-radius: 999px;
        padding: 2px 9px;
        font-size: 0.72rem;
        font-weight: 800;
        border: 1px solid var(--line);
        color: var(--muted);
      }

      .fixture-status-badge[data-status="live"] {
        color: #c81e2d;
        border-color: rgba(200, 30, 45, 0.21);
        background: rgba(200, 30, 45, 0.06);
      }

      .fixture-status-badge[data-status="finished"] {
        color: var(--muted);
      }

      .fixture-status-badge[data-status="scheduled"] {
        color: var(--cyan);
        border-color: rgba(13, 148, 136, 0.15);
      }

      .fixture-status-badge[data-status="postponed"],
      .fixture-status-badge[data-status="cancelled"] {
        color: #b07410;
        border-color: rgba(176, 116, 16, 0.192);
      }

      .fixture-match-team {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        font-weight: 800;
        overflow-wrap: anywhere;
      }

      .fixture-match-team-away {
        flex-direction: row-reverse;
        text-align: right;
      }

      .fixture-team-logo,
      .fixture-team-logo-fallback {
        flex: none;
        width: 26px;
        height: 26px;
        border-radius: 7px;
      }

      .fixture-team-logo {
        object-fit: contain;
        background: rgba(var(--surface-rgb), 0.069);
      }

      .fixture-team-logo-fallback {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(11, 143, 90, 0.059);
        color: var(--green);
        font-size: 0.68rem;
        font-weight: 800;
      }

      .fixture-match-score {
        font-size: 1.05rem;
        font-weight: 900;
        white-space: nowrap;
        text-align: center;
      }

      .fixture-venue {
        color: var(--muted);
        font-size: 0.78rem;
        text-align: right;
      }

      @media (max-width: 760px) {
        .fixture-match-row {
          grid-template-columns: 1fr;
        }

        .fixture-match-team-away {
          flex-direction: row;
          text-align: left;
        }

        .fixture-venue {
          text-align: left;
        }
      }

      .fixture-controls {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        margin: 0 0 14px;
      }

      .fixture-week-nav {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .fixture-week-prev,
      .fixture-week-next {
        min-width: 40px;
        min-height: 40px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: rgba(var(--surface-rgb), 0.046);
        color: var(--text);
        font-size: 1.1rem;
        cursor: pointer;
      }

      .fixture-week-prev:hover,
      .fixture-week-next:hover {
        border-color: var(--green);
      }

      .fixture-week-prev:disabled,
      .fixture-week-next:disabled {
        opacity: 0.35;
        cursor: not-allowed;
      }

      .fixture-week-prev:focus-visible,
      .fixture-week-next:focus-visible {
        outline: 2px solid rgba(11, 143, 90, 0.118);
        outline-offset: 2px;
      }

      .fixture-week-current {
        display: grid;
        gap: 2px;
        min-width: 90px;
        text-align: center;
      }

      .fixture-week-current span {
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
      }

      .fixture-week-current strong {
        font-size: 1.1rem;
      }

      .fixture-team-filter {
        display: grid;
        gap: 6px;
      }

      .fixture-team-filter span {
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
      }

      .fixture-team-filter select {
        min-height: 42px;
        min-width: 200px;
        border: 1px solid var(--line);
        border-radius: 6px;
        padding: 0 34px 0 11px;
        color: var(--text);
        background: #f2f7f5;
        font: inherit;
      }

      .fixture-team-filter select:focus-visible {
        border-color: var(--green);
        outline: 2px solid rgba(11, 143, 90, 0.092);
        outline-offset: 2px;
      }

      .fixture-week-jump {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 16px;
      }

      .fixture-week-jump-item {
        min-width: 38px;
        min-height: 34px;
        padding: 0 10px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: rgba(var(--surface-rgb), 0.034);
        color: var(--muted);
        font-weight: 800;
        font-size: 0.82rem;
        cursor: pointer;
      }

      .fixture-week-jump-item:hover {
        border-color: var(--green);
        color: var(--text);
      }

      .fixture-week-jump-item.is-active {
        color: var(--green);
        border-color: rgba(11, 143, 90, 0.22);
        background: rgba(11, 143, 90, 0.044);
      }

      .fixture-week-jump-item:focus-visible {
        outline: 2px solid rgba(11, 143, 90, 0.118);
        outline-offset: 2px;
      }

      @media (max-width: 640px) {
        .fixture-controls {
          flex-direction: column;
          align-items: stretch;
        }

        .fixture-team-filter select {
          min-width: 0;
          width: 100%;
        }
      }

      .fixture-team-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }

      .fixture-team-card {
        min-height: 128px;
        display: grid;
        gap: 8px;
        align-content: start;
        padding: 15px;
      }

      .fixture-team-card strong {
        font-size: 1rem;
        line-height: 1.15;
      }

      .data-empty.compact {
        min-height: 112px;
      }

      .compare-toolbar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
        gap: 12px;
        align-items: end;
        margin: -30px 0 18px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 14px;
        background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.063), rgba(var(--surface-rgb), 0.029)), var(--panel);
        box-shadow: var(--shadow);
      }

      .compare-guide {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin: -30px 0 12px;
      }

      .compare-guide-card {
        display: grid;
        gap: 8px;
        min-height: 132px;
        border: 1px solid rgba(13, 148, 136, 0.08);
        border-radius: var(--radius);
        padding: 15px;
        background:
          linear-gradient(180deg, rgba(13, 148, 136, 0.029), rgba(11, 143, 90, 0.014)),
          rgba(14, 26, 22, 0.039);
      }

      .compare-guide-card span {
        display: inline-grid;
        width: 28px;
        height: 28px;
        place-items: center;
        border: 1px solid rgba(11, 143, 90, 0.143);
        border-radius: 999px;
        color: var(--green);
        background: rgba(11, 143, 90, 0.044);
        font-weight: 900;
      }

      .compare-guide-card strong {
        color: var(--text);
        font-size: 1rem;
      }

      .compare-guide-card p {
        margin: 0;
        color: var(--muted);
        font-size: 0.84rem;
        line-height: 1.5;
      }

      .compare-quick-links {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        margin: 0 0 14px;
      }

      .compare-quick-links a {
        display: inline-flex;
        min-height: 36px;
        align-items: center;
        border: 1px solid rgba(11, 143, 90, 0.11);
        border-radius: 999px;
        padding: 0 12px;
        color: var(--green);
        background: rgba(11, 143, 90, 0.041);
        font-size: 0.82rem;
        font-weight: 900;
      }

      .compare-presets {
        display: grid;
        gap: 12px;
        margin: 0 0 18px;
      }

      .compare-presets-head {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        align-items: end;
      }

      .compare-presets-head span {
        display: block;
        color: var(--green);
        font-size: 0.76rem;
        font-weight: 900;
        letter-spacing: 0;
        text-transform: uppercase;
      }

      .compare-presets-head strong {
        display: block;
        margin-top: 4px;
        font-size: 1.02rem;
      }

      .compare-presets-head p {
        max-width: 420px;
        margin: 0;
        color: var(--muted);
        font-size: 0.86rem;
        text-align: right;
      }

      .compare-preset-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
      }

      .compare-preset-card {
        min-height: 142px;
        border: 1px solid rgba(13, 148, 136, 0.07);
        border-radius: var(--radius);
        padding: 13px;
        color: var(--text);
        text-align: left;
        background:
          linear-gradient(180deg, rgba(14, 26, 22, 0.063), rgba(14, 26, 22, 0.025)),
          rgba(14, 26, 22, 0.04);
        cursor: pointer;
        transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
      }

      .compare-preset-card:hover,
      .compare-preset-card:focus-visible,
      .compare-preset-card.is-active {
        border-color: rgba(11, 143, 90, 0.248);
        background:
          linear-gradient(145deg, rgba(11, 143, 90, 0.055), rgba(13, 148, 136, 0.028)),
          rgba(14, 26, 22, 0.046);
        transform: translateY(-1px);
        outline: none;
      }

      .compare-preset-card span,
      .compare-preset-card em {
        display: block;
        color: var(--muted);
        font-size: 0.74rem;
        font-style: normal;
        font-weight: 850;
      }

      .compare-preset-card strong {
        display: block;
        margin: 9px 0;
        font-size: 0.92rem;
        line-height: 1.25;
      }

      .compare-grid {
        display: grid;
        gap: 14px;
      }

      .compare-card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 18px;
        background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.063), rgba(var(--surface-rgb), 0.029)), var(--panel);
        box-shadow: var(--shadow);
      }

      .compare-card-multi {
        grid-template-columns: 1fr;
      }

      .compare-player-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }

      .compare-player {
        border: 1px solid rgba(13, 148, 136, 0.07);
        border-radius: var(--radius);
        padding: 14px;
        background: rgba(var(--surface-rgb), 0.04);
      }

      .compare-player.right {
        text-align: right;
      }

      .compare-player span {
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 800;
      }

      .compare-player h2 {
        margin: 5px 0 0;
        font-size: 1.25rem;
      }

      .compare-player p {
        margin: 7px 0 0;
        color: var(--muted);
        font-size: 0.82rem;
      }

      .compare-row,
      .compare-note {
        grid-column: 1 / -1;
      }

      .compare-row {
        display: grid;
        grid-template-columns: minmax(110px, 1fr) minmax(0, 0.65fr) minmax(72px, 0.5fr) minmax(0, 0.65fr);
        gap: 10px;
        align-items: center;
        border-bottom: 1px solid rgba(14, 26, 22, 0.081);
        padding: 10px 0;
      }

      .compare-row-multi {
        grid-template-columns: minmax(110px, 1fr) repeat(3, minmax(64px, 0.65fr));
      }

      .compare-row span {
        color: var(--muted);
        font-size: 0.82rem;
        font-weight: 800;
      }

      .compare-row b {
        color: var(--green);
        text-align: right;
      }

      .compare-row b.is-leading {
        color: var(--cyan);
        text-shadow: 0 0 14px rgba(13, 148, 136, 0.14);
      }

      .compare-row em {
        justify-self: center;
        border: 1px solid rgba(11, 143, 90, 0.067);
        border-radius: 999px;
        padding: 4px 8px;
        color: var(--muted);
        background: rgba(var(--surface-rgb), 0.046);
        font-size: 0.72rem;
        font-style: normal;
        font-weight: 850;
        white-space: nowrap;
      }

      .compare-note {
        margin: 8px 0 0;
        color: #5b6b65;
        font-size: 0.9rem;
      }

      .compare-winner {
        grid-column: 1 / -1;
        border: 1px solid rgba(11, 143, 90, 0.121);
        border-radius: var(--radius);
        padding: 14px;
        background:
          linear-gradient(90deg, rgba(11, 143, 90, 0.05), rgba(13, 148, 136, 0.022)),
          rgba(14, 26, 22, 0.04);
      }

      .compare-winner span {
        display: block;
        color: var(--muted);
        font-size: 0.75rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      .compare-winner strong {
        display: block;
        margin: 6px 0;
        color: var(--green);
        font-size: 1.24rem;
      }

      .compare-winner p {
        margin: 0;
        color: #5b6b65;
        font-size: 0.9rem;
      }

      .compare-insights {
        display: grid;
        grid-column: 1 / -1;
        gap: 12px;
      }

      .compare-insights-head {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
        align-items: end;
      }

      .compare-insights-head span {
        color: var(--green);
        font-size: 0.74rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      .compare-insights-head strong {
        color: var(--text);
        font-size: 0.98rem;
      }

      .compare-insights-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }

      .compare-insight-card {
        display: grid;
        min-width: 0;
        gap: 8px;
        align-content: start;
        border: 1px solid rgba(13, 148, 136, 0.08);
        border-radius: var(--radius);
        padding: 13px;
        background:
          linear-gradient(180deg, rgba(13, 148, 136, 0.028), rgba(11, 143, 90, 0.013)),
          rgba(14, 26, 22, 0.037);
      }

      .compare-insight-card span {
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      .compare-insight-card strong {
        color: var(--text);
        font-size: 0.98rem;
        line-height: 1.22;
      }

      .compare-insight-card b {
        width: fit-content;
        border: 1px solid rgba(11, 143, 90, 0.11);
        border-radius: 999px;
        padding: 4px 8px;
        color: var(--green);
        background: rgba(11, 143, 90, 0.044);
        font-size: 0.76rem;
      }

      .compare-insight-card p {
        margin: 0;
        color: #5b6b65;
        font-size: 0.82rem;
        line-height: 1.5;
      }

      .compare-insight-card a {
        color: var(--cyan);
        font-size: 0.8rem;
        font-weight: 900;
      }

      .comparison-share-panel {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 14px;
        align-items: center;
        border: 1px solid rgba(13, 148, 136, 0.09);
        border-radius: var(--radius);
        padding: 14px;
        background:
          linear-gradient(90deg, rgba(13, 148, 136, 0.04), rgba(11, 143, 90, 0.025)),
          rgba(14, 26, 22, 0.04);
      }

      .comparison-share-panel span {
        display: block;
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      .comparison-share-panel strong {
        display: block;
        margin: 5px 0;
        color: var(--green);
        font-size: 1.06rem;
      }

      .comparison-share-panel p {
        margin: 0;
        color: #5b6b65;
        font-size: 0.88rem;
      }

      .compare-share-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
      }

      .player-profile-shell {
        display: grid;
        gap: 14px;
        min-width: 0;
        max-width: 100%;
      }

      .player-profile-card {
        display: grid;
        width: 100%;
        gap: 14px;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 18px;
        background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.063), rgba(var(--surface-rgb), 0.029)), var(--panel);
        box-shadow: var(--shadow);
      }

      .profile-hero {
        display: flex;
        justify-content: space-between;
        min-width: 0;
        max-width: 100%;
        gap: 18px;
        border-bottom: 1px solid rgba(14, 26, 22, 0.092);
        padding-bottom: 16px;
      }

      .profile-hero span {
        color: var(--muted);
        font-size: 0.82rem;
        font-weight: 850;
        overflow-wrap: anywhere;
      }

      .profile-hero h1 {
        margin: 6px 0 8px;
        font-size: clamp(2rem, 5vw, 3.2rem);
        overflow-wrap: anywhere;
      }

      .profile-hero p {
        max-width: 720px;
        margin: 0;
        color: #5b6b65;
        overflow-wrap: anywhere;
      }

      .profile-hero strong {
        display: grid;
        width: 76px;
        height: 76px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid rgba(11, 143, 90, 0.198);
        border-radius: var(--radius);
        color: var(--green);
        background: rgba(11, 143, 90, 0.044);
        font-size: 1.7rem;
        font-weight: 950;
      }

      .profile-hero-pro {
        position: relative;
        align-items: stretch;
        border: 1px solid rgba(11, 143, 90, 0.11);
        border-radius: var(--radius);
        padding: 18px;
        background:
          radial-gradient(circle at 8% 12%, rgba(11, 143, 90, 0.088), transparent 28%),
          linear-gradient(135deg, rgba(13, 148, 136, 0.04), rgba(14, 26, 22, 0.029)),
          rgba(14, 26, 22, 0.061);
      }

      .profile-identity {
        display: flex;
        min-width: 0;
        gap: 14px;
      }

      .profile-identity > div {
        min-width: 0;
      }

      .profile-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
      }

      .profile-score-card {
        display: grid;
        min-width: 172px;
        align-content: center;
        gap: 6px;
        border: 1px solid rgba(11, 143, 90, 0.132);
        border-radius: var(--radius);
        padding: 14px;
        background: rgba(var(--surface-rgb), 0.075);
      }

      .profile-score-card span {
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      .profile-score-card strong {
        display: block;
        width: auto;
        height: auto;
        border: 0;
        border-radius: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
        color: var(--green);
        font-size: 2.5rem;
        line-height: 1;
      }

      .profile-score-card p,
      .profile-score-card em {
        margin: 0;
        color: #5b6b65;
        font-size: 0.86rem;
        font-style: normal;
      }

      .profile-radar-snapshot {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
      }

      .profile-radar-snapshot article {
        min-width: 0;
        border: 1px solid rgba(13, 148, 136, 0.07);
        border-radius: var(--radius);
        padding: 12px;
        background: rgba(var(--surface-rgb), 0.04);
      }

      .profile-radar-snapshot span {
        display: block;
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      .profile-radar-snapshot strong {
        display: block;
        margin: 6px 0 9px;
        color: var(--text);
        font-size: 1.12rem;
      }

      .profile-radar-snapshot i {
        display: block;
        height: 6px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(var(--surface-rgb), 0.092);
      }

      .profile-radar-snapshot i::before {
        display: block;
        width: var(--value, 0%);
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--green), var(--cyan));
        content: "";
      }

      .team-detail-lead {
        max-width: 720px;
        margin: 8px 0 0;
        color: #c9d8d5;
        font-size: 0.95rem;
        line-height: 1.65;
      }

      .team-radar-snapshot {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
        margin: 14px 0;
      }

      .team-radar-snapshot article,
      .team-signal-card {
        min-width: 0;
        border: 1px solid rgba(13, 148, 136, 0.07);
        border-radius: var(--radius);
        background: rgba(var(--surface-rgb), 0.04);
        box-shadow: inset 0 1px 0 rgba(14, 26, 22, 0.04);
      }

      .team-radar-snapshot article {
        padding: 12px;
      }

      .team-radar-snapshot span,
      .team-signal-card span {
        display: block;
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .team-radar-snapshot strong {
        display: block;
        margin: 6px 0 9px;
        color: var(--text);
        font-size: 1.12rem;
      }

      .team-radar-snapshot i {
        display: block;
        height: 6px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(var(--surface-rgb), 0.092);
      }

      .team-radar-snapshot i::before {
        display: block;
        width: var(--value, 0%);
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--green), var(--cyan));
        content: "";
      }

      .team-signal-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin: 14px 0;
      }

      .team-signal-card {
        display: grid;
        gap: 8px;
        align-content: start;
        padding: 14px;
      }

      .team-signal-card h3 {
        margin: 0;
        color: var(--text);
        font-size: 1rem;
      }

      .team-signal-card strong {
        color: var(--green);
        font-size: 1.1rem;
      }

      .team-signal-card p {
        margin: 0;
        color: #5b6b65;
        font-size: 0.84rem;
        line-height: 1.55;
      }

      .team-signal-card a {
        width: fit-content;
        color: var(--accent);
        font-size: 0.82rem;
        font-weight: 900;
      }

      .match-detail-lead {
        max-width: 780px;
        margin: 12px 0 0;
        color: #c9d8d5;
        font-size: 0.95rem;
        line-height: 1.65;
      }

      .match-radar-snapshot {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
        margin: 14px 0;
      }

      .match-radar-snapshot article,
      .match-signal-card,
      .match-team-links a {
        min-width: 0;
        border: 1px solid rgba(13, 148, 136, 0.07);
        border-radius: var(--radius);
        background: rgba(var(--surface-rgb), 0.04);
        box-shadow: inset 0 1px 0 rgba(14, 26, 22, 0.04);
      }

      .match-radar-snapshot article {
        padding: 12px;
      }

      .match-radar-snapshot span,
      .match-signal-card span,
      .match-team-links span {
        display: block;
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .match-radar-snapshot strong {
        display: block;
        margin: 6px 0 9px;
        color: var(--text);
        font-size: 1.12rem;
      }

      .match-radar-snapshot i {
        display: block;
        height: 6px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(var(--surface-rgb), 0.092);
      }

      .match-radar-snapshot i::before {
        display: block;
        width: var(--value, 0%);
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--green), var(--cyan));
        content: "";
      }

      .match-signal-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin: 14px 0;
      }

      .match-signal-card {
        display: grid;
        gap: 8px;
        align-content: start;
        padding: 14px;
      }

      .match-signal-card h3 {
        margin: 0;
        color: var(--green);
        font-size: 1.05rem;
      }

      .match-signal-card p {
        margin: 0;
        color: #5b6b65;
        font-size: 0.84rem;
        line-height: 1.55;
      }

      .match-signal-card a {
        width: fit-content;
        color: var(--accent);
        font-size: 0.82rem;
        font-weight: 900;
      }

      .match-team-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin: 14px 0;
      }

      .match-team-links a {
        display: grid;
        gap: 7px;
        padding: 14px;
      }

      .match-team-links strong {
        color: var(--text);
        font-size: 1.05rem;
      }

      .match-action-panel {
        display: grid;
        gap: 12px;
        margin: 14px 0;
        border: 1px solid rgba(11, 143, 90, 0.077);
        border-radius: var(--radius);
        padding: 15px;
        background:
          radial-gradient(circle at 100% 0%, rgba(11, 143, 90, 0.055), transparent 30%),
          rgba(14, 26, 22, 0.032);
      }

      .match-action-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }

      .match-action-card {
        display: grid;
        min-width: 0;
        gap: 7px;
        border: 1px solid rgba(13, 148, 136, 0.065);
        border-radius: 8px;
        padding: 12px;
        background: rgba(247, 250, 249, 0.48);
      }

      .match-action-card span {
        color: var(--cyan);
        font-size: 0.7rem;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .match-action-card strong {
        color: var(--text);
        font-size: 0.95rem;
      }

      .match-action-card p {
        margin: 0;
        color: var(--muted);
        font-size: 0.8rem;
        line-height: 1.45;
      }

      .profile-section {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        border: 1px solid rgba(13, 148, 136, 0.07);
        border-radius: var(--radius);
        padding: 15px;
        background: rgba(var(--surface-rgb), 0.037);
      }

      .profile-section h2 {
        margin: 0 0 12px;
        font-size: 1.08rem;
      }

      .profile-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
      }

      .profile-section-head h2 {
        margin: 0;
      }

      .profile-section-head span {
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 800;
        text-align: right;
      }

      .scouting-summary-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }

      .scouting-summary-card {
        display: grid;
        min-width: 0;
        gap: 8px;
        border: 1px solid rgba(11, 143, 90, 0.067);
        border-radius: var(--radius);
        padding: 13px;
        background:
          linear-gradient(180deg, rgba(11, 143, 90, 0.03), rgba(13, 148, 136, 0.013)),
          rgba(14, 26, 22, 0.054);
      }

      .scouting-summary-card span {
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .scouting-summary-card strong {
        color: var(--text);
        font-size: 1rem;
        line-height: 1.25;
      }

      .scouting-summary-card p {
        margin: 0;
        color: #5b6b65;
        font-size: 0.84rem;
        line-height: 1.55;
      }

      .scouting-summary-card a {
        width: fit-content;
        color: var(--green);
        font-size: 0.82rem;
        font-weight: 900;
      }

      .watch-checklist-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
      }

      .watch-check-card {
        display: grid;
        min-width: 0;
        gap: 8px;
        align-content: start;
        border: 1px solid rgba(13, 148, 136, 0.08);
        border-radius: var(--radius);
        padding: 13px;
        background:
          linear-gradient(180deg, rgba(13, 148, 136, 0.028), rgba(11, 143, 90, 0.013)),
          rgba(14, 26, 22, 0.054);
      }

      .watch-check-card span {
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .watch-check-card strong {
        color: var(--cyan);
        font-size: 0.98rem;
        line-height: 1.24;
      }

      .watch-check-card p {
        margin: 0;
        color: #5b6b65;
        font-size: 0.83rem;
        line-height: 1.55;
      }

      .profile-compare-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }

      .profile-compare-card {
        display: grid;
        min-width: 0;
        gap: 8px;
        align-content: start;
        border: 1px solid rgba(11, 143, 90, 0.088);
        border-radius: var(--radius);
        padding: 13px;
        background:
          linear-gradient(180deg, rgba(11, 143, 90, 0.033), rgba(13, 148, 136, 0.013)),
          rgba(14, 26, 22, 0.054);
      }

      .profile-compare-card span {
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .profile-compare-card strong {
        color: var(--text);
        font-size: 1rem;
        line-height: 1.22;
      }

      .profile-compare-card b {
        color: var(--green);
        font-size: 0.78rem;
      }

      .profile-compare-card p {
        margin: 0;
        color: #5b6b65;
        font-size: 0.83rem;
        line-height: 1.55;
      }

      .profile-compare-actions,
      .profile-compare-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
      }

      .profile-compare-actions a {
        color: var(--cyan);
        font-size: 0.8rem;
        font-weight: 900;
      }

      .profile-compare-footer {
        margin-top: 14px;
      }

      .static-profile-links {
        display: grid;
        gap: 12px;
        margin: 18px 0;
        border: 1px solid rgba(13, 148, 136, 0.07);
        border-radius: var(--radius);
        padding: 16px;
        background:
          linear-gradient(180deg, rgba(13, 148, 136, 0.026), rgba(11, 143, 90, 0.013)),
          var(--panel);
        box-shadow: var(--shadow);
      }

      .static-profile-link-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }

      .static-profile-link-card {
        display: grid;
        min-width: 0;
        gap: 7px;
        border: 1px solid rgba(11, 143, 90, 0.077);
        border-radius: var(--radius);
        padding: 12px;
        color: var(--text);
        background: rgba(var(--surface-rgb), 0.04);
      }

      .static-profile-link-card span,
      .static-profile-link-card em {
        color: var(--muted);
        font-size: 0.72rem;
        font-style: normal;
        font-weight: 900;
        text-transform: uppercase;
      }

      .static-profile-link-card strong {
        color: var(--green);
        font-size: 0.92rem;
        line-height: 1.24;
      }

      .compare-seo-page .comparison-hero {
        margin-bottom: 18px;
      }

      .static-comparison-summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr) minmax(0, 1fr);
        gap: 14px;
        margin: 18px 0;
      }

      .comparison-mini-card {
        display: grid;
        min-width: 0;
        gap: 12px;
        border: 1px solid rgba(13, 148, 136, 0.07);
        border-radius: var(--radius);
        padding: 16px;
        background:
          linear-gradient(180deg, rgba(13, 148, 136, 0.026), rgba(11, 143, 90, 0.011)),
          var(--panel);
        box-shadow: var(--shadow);
      }

      .comparison-mini-card-accent {
        border-color: rgba(11, 143, 90, 0.132);
        background:
          radial-gradient(circle at 20% 0%, rgba(11, 143, 90, 0.055), transparent 34%),
          linear-gradient(180deg, rgba(13, 148, 136, 0.026), rgba(11, 143, 90, 0.013)),
          var(--panel);
      }

      .comparison-mini-card span {
        color: var(--muted);
        font-size: 0.74rem;
        font-weight: 900;
        letter-spacing: 0;
        text-transform: uppercase;
      }

      .comparison-mini-card h2 {
        margin: 0;
        color: var(--text);
        font-size: clamp(1.05rem, 2vw, 1.45rem);
        line-height: 1.16;
      }

      .comparison-mini-card dl {
        display: grid;
        gap: 8px;
        margin: 0;
      }

      .comparison-mini-card dl div {
        display: flex;
        min-width: 0;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid rgba(14, 26, 22, 0.081);
        padding-bottom: 8px;
      }

      .comparison-mini-card dt,
      .comparison-mini-card dd {
        margin: 0;
        min-width: 0;
        font-size: 0.86rem;
      }

      .comparison-mini-card dt {
        color: var(--muted);
      }

      .comparison-mini-card dd {
        color: var(--text);
        font-weight: 900;
        text-align: right;
      }

      .comparison-mini-card ul {
        display: grid;
        gap: 8px;
        margin: 0;
        padding-left: 18px;
        color: var(--muted);
        line-height: 1.45;
      }

      .comparison-mini-card p {
        margin: 0;
        color: var(--cyan);
        font-size: 0.84rem;
        font-weight: 900;
      }

      .comparison-mini-card a {
        justify-self: start;
        color: var(--green);
        font-size: 0.82rem;
        font-weight: 900;
      }

      .comparison-seo-links {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        margin: 18px 0 26px;
        border: 1px solid rgba(13, 148, 136, 0.07);
        border-radius: var(--radius);
        padding: 14px;
        background: rgba(var(--surface-rgb), 0.04);
      }

      .comparison-seo-links span {
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      .comparison-seo-links a {
        border: 1px solid rgba(11, 143, 90, 0.088);
        border-radius: 999px;
        padding: 8px 11px;
        color: var(--text);
        font-size: 0.82rem;
        font-weight: 900;
        background: rgba(11, 143, 90, 0.029);
      }

      .comparison-index-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin: 18px 0;
      }

      .comparison-index-card {
        display: grid;
        min-width: 0;
        gap: 9px;
        border: 1px solid rgba(13, 148, 136, 0.07);
        border-radius: var(--radius);
        padding: 14px;
        color: var(--text);
        background:
          linear-gradient(180deg, rgba(13, 148, 136, 0.023), rgba(11, 143, 90, 0.012)),
          var(--panel);
        box-shadow: var(--shadow);
      }

      .comparison-index-card span,
      .comparison-index-card em {
        color: var(--muted);
        font-size: 0.72rem;
        font-style: normal;
        font-weight: 900;
        text-transform: uppercase;
      }

      .comparison-index-card strong {
        color: var(--green);
        font-size: 0.98rem;
        line-height: 1.24;
      }

      .comparison-index-card p {
        margin: 0;
        color: var(--muted);
        font-size: 0.84rem;
        line-height: 1.45;
      }

      .comparison-index-card em {
        color: var(--cyan);
      }

      .profile-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 9px;
        min-width: 0;
      }

      .profile-item {
        min-width: 0;
        border: 1px solid rgba(14, 26, 22, 0.081);
        border-radius: var(--radius);
        padding: 10px;
        background: rgba(var(--surface-rgb), 0.061);
      }

      .profile-item span {
        display: block;
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 850;
        text-transform: uppercase;
      }

      .profile-item b {
        display: block;
        margin-top: 5px;
        color: var(--text);
        font-size: 0.94rem;
        overflow-wrap: anywhere;
      }

      .status-badge {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        width: fit-content;
        border: 1px solid rgba(14, 26, 22, 0.138);
        border-radius: 999px;
        padding: 4px 9px;
        color: var(--soft);
        background: rgba(var(--surface-rgb), 0.057);
        font-size: 0.72rem;
        font-weight: 900;
        white-space: nowrap;
      }

      .status-badge.verified {
        border-color: rgba(11, 143, 90, 0.187);
        color: var(--green);
        background: rgba(11, 143, 90, 0.044);
      }

      .status-badge.estimated,
      .status-badge.pending {
        border-color: rgba(176, 116, 16, 0.204);
        color: var(--amber);
        background: rgba(176, 116, 16, 0.048);
      }

      .status-badge.stale {
        border-color: rgba(255, 110, 110, 0.36);
        color: #ff9b9b;
        background: rgba(255, 110, 110, 0.08);
      }

      .transfer-section {
        overflow: hidden;
      }

      .transfer-summary-grid,
      .transfer-radar-summary {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        margin: 0 0 14px;
      }

      .transfer-timeline {
        position: relative;
        display: grid;
        gap: 10px;
        min-width: 0;
      }

      .transfer-timeline::before {
        position: absolute;
        top: 8px;
        bottom: 8px;
        left: 118px;
        width: 1px;
        background: linear-gradient(180deg, rgba(11, 143, 90, 0.231), rgba(13, 148, 136, 0.04));
        content: "";
      }

      .transfer-event {
        position: relative;
        display: grid;
        grid-template-columns: minmax(110px, 0.28fr) minmax(0, 1fr);
        gap: 12px;
        min-width: 0;
        max-width: 100%;
        border: 1px solid rgba(13, 148, 136, 0.07);
        border-radius: var(--radius);
        padding: 12px;
        background:
          linear-gradient(90deg, rgba(13, 148, 136, 0.028), transparent),
          rgba(14, 26, 22, 0.061);
      }

      .transfer-event::before {
        position: absolute;
        top: 18px;
        left: 113px;
        width: 11px;
        height: 11px;
        border: 2px solid var(--green);
        border-radius: 999px;
        background: #f7faf9;
        box-shadow: 0 0 14px rgba(11, 143, 90, 0.154);
        content: "";
      }

      .transfer-date {
        align-self: start;
        color: var(--cyan);
        font-size: 0.78rem;
        font-weight: 900;
      }

      .transfer-body {
        display: grid;
        min-width: 0;
        gap: 8px;
      }

      .transfer-route {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }

      .transfer-route b {
        min-width: 0;
        color: var(--text);
        font-size: 0.96rem;
        overflow-wrap: anywhere;
      }

      .transfer-route em {
        color: var(--green);
        font-style: normal;
        font-weight: 950;
      }

      .transfer-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 7px;
      }

      .transfer-meta > span:not(.status-badge) {
        display: inline-flex;
        min-height: 26px;
        align-items: center;
        border: 1px solid rgba(14, 26, 22, 0.115);
        border-radius: 999px;
        padding: 4px 9px;
        color: var(--muted);
        background: rgba(var(--surface-rgb), 0.046);
        font-size: 0.72rem;
        font-weight: 850;
      }

      .transfer-note {
        margin: 0;
        color: var(--muted);
        font-size: 0.82rem;
        line-height: 1.5;
      }

      .former-team-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .former-team-chip {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        border: 1px solid rgba(14, 26, 22, 0.115);
        border-radius: 999px;
        padding: 5px 10px;
        color: #e2ece7;
        background: rgba(var(--surface-rgb), 0.052);
        font-size: 0.8rem;
        font-weight: 850;
      }

      .transfer-toolbar {
        display: grid;
        grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
        gap: 10px;
        align-items: end;
        margin: 18px 0;
      }

      .transfer-filter-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .transfer-filter-chips button {
        min-height: 38px;
        border: 1px solid rgba(11, 143, 90, 0.076);
        border-radius: 999px;
        padding: 0 12px;
        color: #e2ece7;
        background: rgba(var(--surface-rgb), 0.052);
        font: inherit;
        font-size: 0.82rem;
        font-weight: 850;
        cursor: pointer;
      }

      .transfer-filter-chips button.is-active {
        border-color: rgba(11, 143, 90, 0.242);
        color: #f7faf9;
        background: linear-gradient(135deg, var(--green), var(--cyan));
      }

      /* Örtük tek sütun `auto` boyutlanıyordu: başlığın min-content genişliği
         (319px) sütunu şişirip kartın 280px'lik içerik kutusunu taşırıyordu.
         Kartın kendisi kırpılmadığı için içerik sağdan sessizce kesiliyordu
         (1024px'te ~30px, 320px'te ~23px). `minmax(0, 1fr)` sütunun küçülmesine
         izin verir; çocuklardaki `min-width: 0` da onların min-content
         eşiğinin altına inebilmesini sağlar. */
      .transfer-radar-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
        min-width: 0;
        border: 1px solid rgba(13, 148, 136, 0.08);
        border-radius: var(--radius);
        padding: 15px;
        background:
          radial-gradient(circle at 92% 4%, rgba(13, 148, 136, 0.06), transparent 30%),
          rgba(14, 26, 22, 0.04);
        box-shadow: var(--shadow);
      }

      .transfer-radar-card > * {
        min-width: 0;
      }

      /* Başlık iki bloktan oluşuyor ve `strong` nowrap; dar sütunda yan yana
         sığmadığında sarmalı, yoksa kartı taşırır. */
      .transfer-radar-card header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
      }

      .transfer-radar-card header strong {
        color: var(--green);
        font-size: 1.1rem;
        white-space: nowrap;
      }

      .transfer-verification {
        margin: -2px 0 0;
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 750;
      }

      .transfer-route-large {
        border: 1px solid rgba(11, 143, 90, 0.088);
        border-radius: var(--radius);
        padding: 10px;
        background: rgba(var(--surface-rgb), 0.061);
      }

      .transfer-watch-brief {
        display: grid;
        gap: 10px;
        min-width: 0;
        border: 1px solid rgba(11, 143, 90, 0.099);
        border-radius: var(--radius);
        padding: 12px;
        background:
          linear-gradient(135deg, rgba(11, 143, 90, 0.05), rgba(13, 148, 136, 0.028)),
          rgba(14, 26, 22, 0.068);
      }

      .transfer-watch-brief > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 10px;
        min-width: 0;
      }

      .transfer-watch-brief span {
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: 0.02em;
      }

      .transfer-watch-brief strong {
        color: var(--green);
        font-size: 1.45rem;
        line-height: 1;
      }

      .transfer-watch-brief em {
        display: inline-flex;
        min-height: 26px;
        align-items: center;
        border: 1px solid rgba(11, 143, 90, 0.099);
        border-radius: 999px;
        padding: 4px 9px;
        color: #dfffea;
        background: rgba(11, 143, 90, 0.044);
        font-size: 0.76rem;
        font-style: normal;
        font-weight: 900;
        white-space: nowrap;
      }

      .transfer-watch-brief i {
        position: relative;
        display: block;
        height: 7px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(var(--surface-rgb), 0.092);
      }

      .transfer-watch-brief i b {
        position: absolute;
        inset: 0 auto 0 0;
        width: var(--value);
        border-radius: inherit;
        background: linear-gradient(90deg, var(--green), var(--cyan));
        box-shadow: 0 0 20px rgba(11, 143, 90, 0.154);
      }

      .transfer-watch-brief p {
        margin: 0;
        color: #c8d9d5;
        font-size: 0.84rem;
        line-height: 1.5;
      }

      .transfer-radar-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
      }

      .reliability-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        min-width: 0;
      }

      .reliability-grid article {
        display: grid;
        gap: 8px;
        min-width: 0;
        border: 1px solid rgba(14, 26, 22, 0.092);
        border-radius: var(--radius);
        padding: 11px;
        background: rgba(var(--surface-rgb), 0.061);
      }

      .reliability-grid article span:first-child {
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      .reliability-grid b {
        color: var(--text);
        font-size: 0.88rem;
      }

      .metric-grid.compact,
      .metric-grid.profile-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin: 14px 0;
      }

      .metric-grid.profile-metrics span {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .metric-grid.profile-metrics b {
        color: var(--text);
        font-size: 1.02rem;
        letter-spacing: 0;
        text-transform: none;
      }

      .metric-grid.compact span,
      .metric-grid.profile-metrics span,
      .timeline-row,
      .squad-player-card {
        border: 1px solid rgba(91, 107, 101, 0.112);
        border-radius: 8px;
        background: rgba(247, 250, 249, 0.42);
        padding: 12px;
      }

      .metric-grid.compact span,
      .timeline-row span,
      .squad-player-card span,
      .profile-note {
        color: var(--muted);
      }

      .squad-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }

      .team-player-spotlight {
        margin-top: 18px;
      }

      .team-player-spotlight-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }

      .team-player-spotlight-card {
        display: grid;
        min-width: 0;
        gap: 10px;
        border: 1px solid rgba(11, 143, 90, 0.088);
        border-radius: var(--radius);
        padding: 14px;
        background:
          radial-gradient(circle at 96% 4%, rgba(13, 148, 136, 0.06), transparent 34%),
          rgba(247, 250, 249, 0.5);
        box-shadow: var(--shadow);
      }

      .team-player-spotlight-card > span {
        color: var(--cyan);
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }

      .team-player-spotlight-main {
        display: grid;
        gap: 4px;
        min-width: 0;
      }

      .team-player-spotlight-main strong {
        color: var(--text);
        font-size: 1rem;
      }

      .team-player-spotlight-main em,
      .team-player-spotlight-card p,
      .team-player-spotlight-meta small {
        color: var(--muted);
      }

      .team-player-spotlight-main em {
        font-size: 0.8rem;
        font-style: normal;
        line-height: 1.4;
      }

      .team-player-spotlight-card b {
        color: var(--green);
        font-size: 1.18rem;
      }

      .team-player-spotlight-card p {
        min-height: 44px;
        margin: 0;
        font-size: 0.82rem;
        line-height: 1.45;
      }

      .team-player-spotlight-meta,
      .team-player-spotlight-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }

      .team-player-spotlight-meta small {
        display: inline-flex;
        min-height: 26px;
        align-items: center;
        border: 1px solid rgba(14, 26, 22, 0.092);
        border-radius: 999px;
        padding: 0 8px;
        background: rgba(var(--surface-rgb), 0.046);
        font-size: 0.72rem;
        font-weight: 850;
      }

      .team-player-spotlight-actions a {
        display: inline-flex;
        min-height: 30px;
        align-items: center;
        border: 1px solid rgba(13, 148, 136, 0.08);
        border-radius: 999px;
        padding: 0 10px;
        background: rgba(13, 148, 136, 0.03);
        color: var(--accent);
        font-size: 0.78rem;
        font-weight: 900;
      }

      .team-recent-transfers {
        display: grid;
        gap: 8px;
        min-width: 0;
        border: 1px solid rgba(13, 148, 136, 0.07);
        border-radius: 8px;
        padding: 12px;
        background: rgba(13, 148, 136, 0.022);
      }

      .team-recent-transfers-head {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
      }

      .team-recent-transfers-head span,
      .team-recent-transfers-head a {
        color: var(--cyan);
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      .team-transfer-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 4px 8px;
        align-items: center;
        min-width: 0;
        border-top: 1px solid rgba(14, 26, 22, 0.081);
        padding-top: 8px;
      }

      .team-transfer-direction {
        grid-row: 1 / span 2;
        display: inline-flex;
        min-height: 26px;
        align-items: center;
        border-radius: 999px;
        padding: 0 8px;
        background: rgba(11, 143, 90, 0.061);
        color: var(--green);
        font-size: 0.68rem;
        font-weight: 900;
      }

      .team-transfer-direction.outgoing {
        background: rgba(255, 190, 92, 0.1);
        color: #ffcf7a;
      }

      .team-transfer-row strong {
        min-width: 0;
        overflow-wrap: anywhere;
        color: var(--text);
        font-size: 0.84rem;
      }

      .team-transfer-row em {
        min-width: 0;
        overflow-wrap: anywhere;
        color: var(--muted);
        font-size: 0.74rem;
        font-style: normal;
      }

      .team-transfer-row b {
        grid-column: 3;
        grid-row: 1 / span 2;
        color: var(--muted);
        font-size: 0.7rem;
        white-space: nowrap;
      }

      .team-card-player {
        display: grid;
        gap: 6px;
        min-width: 0;
        border: 1px solid rgba(11, 143, 90, 0.077);
        border-radius: 8px;
        padding: 12px;
        background: rgba(11, 143, 90, 0.03);
      }

      .team-card-player span {
        color: var(--cyan);
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      .team-card-player strong {
        color: var(--text);
        font-size: 0.92rem;
      }

      .team-card-player em {
        color: var(--muted);
        font-size: 0.78rem;
        font-style: normal;
      }

      .team-card-player a {
        color: var(--green);
        font-size: 0.8rem;
        font-weight: 900;
      }

      .team-card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .squad-player-card {
        display: grid;
        gap: 8px;
      }

      .squad-player-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .squad-player-actions a {
        display: inline-flex;
        min-height: 30px;
        align-items: center;
        border: 1px solid rgba(13, 148, 136, 0.08);
        border-radius: 999px;
        padding: 0 10px;
        background: rgba(13, 148, 136, 0.03);
        color: var(--accent);
        font-size: 0.78rem;
        font-weight: 900;
      }

      .squad-player-card a,
      .timeline-row a {
        color: var(--accent);
        font-weight: 800;
      }

      .timeline-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
      }

      .profile-note {
        margin: 0;
      }

      .scouting-list {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
      }

      .scouting-pill {
        display: inline-flex;
        min-height: 32px;
        align-items: center;
        border: 1px solid rgba(11, 143, 90, 0.132);
        border-radius: 999px;
        padding: 0 11px;
        color: var(--green);
        background: rgba(11, 143, 90, 0.044);
        font-size: 0.82rem;
        font-weight: 850;
      }

      .player-radar-chart {
        grid-column: 1 / -1;
        display: grid;
        gap: 14px;
        border: 1px solid rgba(11, 143, 90, 0.076);
        border-radius: var(--radius);
        padding: 16px;
        background:
          radial-gradient(circle at 50% 40%, rgba(11, 143, 90, 0.066), transparent 36%),
          rgba(14, 26, 22, 0.04);
      }

      .radar-chart-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .radar-chart-head span {
        color: var(--cyan);
        font-size: 0.75rem;
        font-weight: 850;
        text-transform: uppercase;
      }

      .radar-chart-head strong {
        color: var(--text);
        font-size: 0.96rem;
        text-align: right;
      }

      .radar-chart-stage {
        display: grid;
        min-height: 260px;
        place-items: center;
        overflow: hidden;
      }

      .player-radar-chart svg {
        width: min(100%, 360px);
        height: auto;
        overflow: visible;
      }

      .radar-grid-ring {
        fill: none;
        stroke: rgba(11, 143, 90, 0.084);
        stroke-width: 1;
      }

      .radar-axis {
        stroke: rgba(14, 26, 22, 0.115);
        stroke-width: 1;
      }

      .radar-axis-label {
        fill: #b9cbc8;
        font-size: 8px;
        font-weight: 800;
        text-anchor: middle;
        dominant-baseline: central;
      }

      .radar-area {
        stroke-width: 2.5;
        vector-effect: non-scaling-stroke;
      }

      .radar-area-left {
        fill: rgba(11, 143, 90, 0.121);
        stroke: var(--green);
      }

      .radar-area-right {
        fill: rgba(13, 148, 136, 0.09);
        stroke: var(--cyan);
      }

      .radar-area-third {
        fill: rgba(176, 116, 16, 0.096);
        stroke: var(--amber);
      }

      .radar-center {
        fill: var(--text);
      }

      .radar-chart-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .radar-chart-legend span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--soft);
        font-size: 0.82rem;
        font-weight: 800;
      }

      .radar-chart-legend i {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: var(--green);
        box-shadow: 0 0 14px rgba(11, 143, 90, 0.231);
      }

      .radar-chart-legend .right i {
        background: var(--cyan);
        box-shadow: 0 0 14px rgba(13, 148, 136, 0.21);
      }

      .radar-chart-legend .third i {
        background: var(--amber);
        box-shadow: 0 0 14px rgba(176, 116, 16, 0.228);
      }

      .similar-player-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
      }

      .similar-player-card {
        min-width: 0;
        border: 1px solid rgba(13, 148, 136, 0.07);
        border-radius: var(--radius);
        padding: 12px;
        background: rgba(var(--surface-rgb), 0.04);
      }

      .similar-player-card span,
      .similar-player-card b {
        display: block;
        color: var(--muted);
        font-size: 0.76rem;
        font-weight: 800;
      }

      .similar-player-card strong {
        display: block;
        margin: 6px 0;
        color: var(--text);
        line-height: 1.18;
      }

      .similar-player-card a {
        display: inline-flex;
        margin-top: 10px;
        color: var(--green);
        font-size: 0.82rem;
        font-weight: 850;
      }

      .similar-player-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 8px;
      }

      .similar-player-actions a {
        margin-top: 0;
      }

      .radar-chart-placeholder {
        grid-column: 1 / -1;
        display: grid;
        min-height: 140px;
        place-content: center;
        gap: 8px;
        border: 1px dashed rgba(11, 143, 90, 0.154);
        border-radius: var(--radius);
        padding: 18px;
        text-align: center;
        background:
          radial-gradient(circle at center, rgba(11, 143, 90, 0.066), transparent 34%),
          rgba(14, 26, 22, 0.04);
      }

      .radar-chart-placeholder span {
        color: var(--cyan);
        font-size: 0.78rem;
        font-weight: 850;
        text-transform: uppercase;
      }

      .radar-chart-placeholder strong {
        color: var(--text);
        font-size: 1.12rem;
      }

      .radar-chart-placeholder p {
        margin: 0;
        color: var(--muted);
      }

      .article-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .article-card p {
        color: var(--muted);
        font-size: 0.9rem;
      }

      .article-card a {
        color: var(--green);
        font-weight: 850;
        font-size: 0.88rem;
      }

      .source-strip {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin: 34px 0 54px;
        padding: 18px;
      }

      .source-strip span {
        display: block;
        color: var(--muted);
        font-size: 0.75rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .source-strip b {
        display: block;
        margin-top: 6px;
        color: var(--soft);
        font-size: 0.92rem;
        font-weight: 750;
      }

      .footer {
        border-top: 1px solid rgba(11, 143, 90, 0.059);
        padding: 24px 0 34px;
        color: var(--muted);
        font-size: 0.85rem;
      }

      @media (max-width: 1180px) {
        .nav {
          grid-template-columns: 1fr auto;
          gap: 14px;
          padding: 13px 0;
        }

        .brand {
          grid-column: 1;
          grid-row: 1;
        }

        .cta {
          grid-column: 2;
          grid-row: 1;
        }

        .nav-links {
          grid-column: 1 / -1;
          grid-row: 2;
          justify-content: start;
          overflow-x: auto;
          padding-bottom: 4px;
          scrollbar-width: thin;
        }

        .hero,
        .radar-layout,
        .traffic-hub-shell,
        .home-search-shell,
        .home-hot-shell,
        .home-transfer-watch-shell,
        .home-daily-route-shell,
        .home-radar-ticker {
          grid-template-columns: 1fr;
        }

        .matches-grid,
        .signals-grid,
        .traffic-hub-grid,
        .traffic-stack-grid,
        .home-lockin-grid,
        .home-rank-grid,
        .home-search-results,
        .home-directory-grid,
        .home-intelligence-grid,
        .home-agenda-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .rivalry-wall-shell {
          grid-template-columns: 1fr;
        }

        .rivalry-route-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .standings {
          max-width: none;
        }

        .player-toolbar {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .player-summary-metrics {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .player-card-meta-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .filter-chips,
        .player-count {
          grid-column: 1 / -1;
        }

        .player-count {
          justify-self: start;
        }

        .player-signals-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .landing-insights-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .profile-compare-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .static-profile-link-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .static-comparison-summary {
          grid-template-columns: 1fr;
        }

        .comparison-hub-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .comparison-index-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .compare-guide {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .fixture-overview,
        .fixture-team-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .compare-toolbar {
          grid-template-columns: 1fr;
        }

        .compare-preset-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .compare-insights-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .compare-player-row {
          grid-template-columns: 1fr;
        }

        .comparison-share-panel {
          grid-template-columns: 1fr;
        }

        .compare-share-actions {
          justify-content: flex-start;
        }

        .profile-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .profile-radar-snapshot,
        .scouting-summary-grid,
        .watch-checklist-grid,
        .profile-compare-grid,
        .static-profile-link-grid,
        .team-radar-snapshot,
        .team-signal-grid,
        .match-radar-snapshot,
        .match-action-grid,
        .match-signal-grid,
        .transfer-summary-grid,
        .transfer-radar-summary {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .team-player-spotlight-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .transfer-toolbar {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .transfer-filter-chips {
          grid-column: 1 / -1;
        }

        .reliability-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .metric-grid.compact,
        .metric-grid.profile-metrics,
        .squad-grid {
          grid-template-columns: 1fr;
        }

        .timeline-row {
          align-items: flex-start;
          flex-direction: column;
        }
      }

      @media (max-width: 760px) {
        .container {
          width: 100%;
          max-width: var(--container);
          padding-inline: 18px;
        }

        .nav {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
        }

        .brand,
        .cta,
        .nav-links {
          grid-column: auto;
          grid-row: auto;
        }

        .brand {
          order: 1;
        }

        .cta {
          flex: 0 0 100%;
          width: 100%;
          min-height: 36px;
          margin-top: 2px;
          padding-inline: 12px;
          font-size: 0.78rem;
          order: 3;
        }

        .nav-links {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          flex: 0 0 100%;
          max-width: 100%;
          overflow: visible;
          scrollbar-width: none;
          order: 2;
        }

        .nav-links a {
          min-height: 32px;
          justify-content: center;
          padding-inline: 8px;
          font-size: 0.78rem;
        }

        .nav-links::-webkit-scrollbar {
          display: none;
        }

        .hero {
          padding-top: 44px;
        }

        h1 {
          font-size: clamp(2.05rem, 9.3vw, 2.55rem);
          line-height: 1;
        }

        .hero-copy {
          font-size: 1rem;
        }

        .hero-actions .button {
          flex: 0 0 100%;
          width: 100%;
        }

        .player-toolbar {
          grid-template-columns: 1fr;
          margin-top: -22px;
        }

        .player-summary-metrics {
          grid-template-columns: 1fr;
          margin-top: -22px;
        }

        .home-transfer-player {
          align-items: flex-start;
        }

        .home-transfer-score {
          grid-template-columns: 1fr;
        }

        .home-transfer-score em {
          justify-self: start;
        }

        .home-transfer-metrics {
          grid-template-columns: 1fr;
        }

        .home-transfer-row {
          grid-template-columns: minmax(0, 1fr) auto;
        }

        .home-transfer-row span {
          grid-column: 1 / -1;
        }

        .home-daily-route-list::before {
          left: 18px;
        }

        .home-daily-route-list a {
          grid-template-columns: 38px minmax(0, 1fr);
        }

        .home-daily-route-list b {
          grid-column: 2;
          justify-self: start;
        }

        .home-daily-route-metrics {
          grid-template-columns: 1fr;
        }

        .comparison-hub-grid {
          grid-template-columns: 1fr;
        }

        .comparison-index-grid {
          grid-template-columns: 1fr;
        }

        .player-card-meta-grid {
          grid-template-columns: 1fr;
        }

        .filter-chips {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .filter-chip {
          width: 100%;
          padding-inline: 8px;
        }

        .hero-metrics,
        .prediction-grid,
        .matches-grid,
        .signals-grid,
        .traffic-hub-grid,
        .traffic-stack-grid,
        .home-lockin-grid,
        .home-rank-grid,
        .home-transfer-watch-shell,
        .home-daily-route-shell,
        .home-hot-shell,
        .rivalry-route-grid,
        .home-search-results,
        .home-directory-grid,
        .home-intelligence-grid,
        .home-agenda-grid,
        .daily-command-grid,
        .daily-pulse-grid,
        .route-chain,
        .route-chain-grid,
        .search-trap,
        .search-trap-links,
        .teams-grid,
        .players-grid,
        .articles-grid,
        .fixture-overview,
        .fixture-team-grid,
        .source-strip {
          grid-template-columns: 1fr;
        }

        .traffic-hub-head,
        .traffic-card,
        .traffic-routes {
          padding: 16px;
        }

        .traffic-card {
          min-height: 176px;
        }

        .home-search-shell,
        .home-search-results {
          padding: 16px;
        }

        .search-trap {
          margin-top: -26px;
        }

        .search-trap-head {
          border-right: 0;
          border-bottom: 1px solid rgba(14, 26, 22, 0.092);
          padding: 4px 2px 14px;
        }

        .radar-ticker-label {
          width: fit-content;
        }

        .radar-ticker-track a {
          min-width: 170px;
        }

        .traffic-mini-link,
        .traffic-team-strip,
        .home-leader-row,
        .home-team-grid {
          grid-template-columns: 1fr;
        }

        .traffic-mini-link b {
          width: fit-content;
          min-width: 34px;
          height: 24px;
          justify-self: start;
        }

        .fixture-round-head,
        .fixture-match-row {
          grid-template-columns: 1fr;
        }

        .fixture-round-head {
          display: grid;
        }

        .player-signals-grid {
          grid-template-columns: 1fr;
        }

        .player-actions {
          display: grid;
        }

        .compare-card,
        .compare-guide,
        .compare-row {
          grid-template-columns: 1fr;
        }

        .compare-presets-head {
          align-items: flex-start;
          flex-direction: column;
        }

        .compare-presets-head p {
          max-width: none;
          text-align: left;
        }

        .landing-insights-head {
          align-items: flex-start;
          flex-direction: column;
        }

        .landing-insights-head p {
          max-width: none;
          text-align: left;
        }

        .player-trust-note {
          grid-template-columns: 1fr;
        }

        .landing-insights-grid {
          grid-template-columns: 1fr;
        }

        .team-player-spotlight-grid {
          grid-template-columns: 1fr;
        }

        .compare-preset-grid {
          grid-template-columns: 1fr;
        }

        .compare-insights-grid {
          grid-template-columns: 1fr;
        }

        .match-action-grid {
          grid-template-columns: 1fr;
        }

        .compare-preset-card {
          min-height: 120px;
        }

        .compare-player.right,
        .compare-row b,
        .compare-row em {
          text-align: left;
          justify-self: start;
        }

        .profile-hero {
          display: grid;
        }

        .profile-identity {
          flex-direction: column;
        }

        .player-profile-card {
          width: 100%;
          max-width: calc(100vw - 60px);
          margin-inline: auto;
          padding: 12px;
        }

        .player-profile-card *,
        .player-profile-shell,
        main.container {
          max-width: 100%;
        }

        .profile-hero,
        .profile-hero > div,
        .profile-hero p,
        .profile-section,
        .profile-compare-grid,
        .profile-grid,
        .profile-item {
          max-width: 100%;
          min-width: 0;
        }

        .profile-hero h1 {
          font-size: clamp(1.85rem, 8.4vw, 2.28rem);
        }

        .profile-hero p,
        .player-summary {
          white-space: normal;
          word-break: normal;
          overflow-wrap: anywhere;
        }

        .badge-row,
        .tag-row {
          max-width: 100%;
          min-width: 0;
        }

        .radar-badge,
        .tag,
        .status-badge {
          max-width: 100%;
          white-space: normal;
        }

        .profile-grid {
          grid-template-columns: 1fr;
        }

        .profile-radar-snapshot,
        .scouting-summary-grid,
        .watch-checklist-grid,
        .team-radar-snapshot,
        .team-signal-grid,
        .match-radar-snapshot,
        .match-signal-grid,
        .match-team-links,
        .transfer-summary-grid,
        .transfer-radar-summary,
        .transfer-toolbar,
        .transfer-radar-meta {
          grid-template-columns: 1fr;
        }

        .profile-section-head {
          display: grid;
        }

        .profile-section-head span {
          text-align: left;
        }

        .transfer-event {
          grid-template-columns: 1fr;
        }

        .transfer-timeline::before,
        .transfer-event::before {
          display: none;
        }

        .transfer-date {
          width: fit-content;
          border: 1px solid rgba(13, 148, 136, 0.09);
          border-radius: 999px;
          padding: 4px 8px;
          background: rgba(13, 148, 136, 0.03);
        }

        .reliability-grid {
          grid-template-columns: 1fr;
        }

        .similar-player-grid {
          grid-template-columns: 1fr;
        }

        .radar-chart-head {
          display: grid;
        }

        .radar-chart-head strong {
          text-align: left;
        }

        .section-head {
          display: grid;
          align-items: start;
        }

        .data-stamp {
          width: fit-content;
          white-space: normal;
        }

        .versus {
          grid-template-columns: 1fr;
          text-align: left;
        }

        .vs-pill {
          width: 38px;
          height: 38px;
        }

        .bar-row {
          grid-template-columns: 82px 1fr 36px;
        }

        .player-metrics {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .player-radar .bar-row {
          grid-template-columns: 88px 1fr 34px;
        }

        .standing-row {
          grid-template-columns: 24px 1fr 42px 44px;
          padding-inline: 14px;
        }
      }
/* Consolidated responsive navbar */
.nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  min-height: 76px;
}

.nav .brand {
  grid-column: auto;
  grid-row: auto;
  order: 0;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(11, 143, 90, 0.231);
  border-radius: 8px;
  padding: 9px;
  background: rgba(11, 143, 90, 0.055);
  color: var(--green);
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}

.nav .nav-links {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  order: 0;
  overflow: visible;
}

.nav .nav-links a {
  flex: 0 0 auto;
}

.nav .cta {
  flex: 0 0 auto;
  width: auto;
  margin-top: 0;
  order: 0;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .nav {
    grid-template-columns: 1fr auto;
    gap: 12px;
    min-height: auto;
    padding: 13px 0;
  }

  .nav-toggle {
    display: inline-grid !important;
  }

  .nav.is-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav.is-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .nav.is-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav-menu {
    display: none;
    grid-column: 1 / -1;
    width: min(342px, calc(100vw - 24px));
    max-width: 342px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    background: rgba(247, 250, 249, 0.94);
    box-shadow: 0 18px 60px rgba(14, 26, 22, 0.109);
    backdrop-filter: blur(18px);
  }

  .nav.is-open .nav-menu {
    display: grid;
    gap: 8px;
  }

  .nav .nav-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    width: 100%;
  }

  .nav .nav-links a,
  .nav .cta {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    padding: 0 14px;
    white-space: normal;
  }

  .nav .cta {
    justify-content: center;
    margin-top: 2px;
  }
}

@media (max-width: 760px) {
  .home-page .container {
    width: calc(100% - 24px);
    max-width: var(--container);
    margin-inline: auto;
  }

  .subpage .container {
    width: 100%;
    max-width: calc(100vw - 36px);
    margin-inline: auto;
    padding-inline: 0;
  }
}

/* Live fixture statistics and deterministic match analysis */
.live-analysis-section {
  border-color: rgba(11, 143, 90, 0.132);
  background: linear-gradient(145deg, rgba(11, 143, 90, 0.039), rgba(var(--surface-rgb), 0.76));
}

.live-analysis-summary {
  max-width: 860px;
  margin: 0 0 16px;
  color: #d7e7e3;
  font-size: 1rem;
  line-height: 1.7;
}

.live-analysis-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.live-analysis-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(13, 148, 136, 0.08);
  border-radius: var(--radius);
  background: rgba(var(--surface-rgb), 0.58);
}

.live-analysis-card span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.live-analysis-card strong {
  display: block;
  margin: 8px 0;
  color: var(--green);
  font-size: 1.2rem;
}

.live-analysis-card p,
.live-analysis-note {
  margin: 0;
  color: #b9cbc7;
  font-size: 0.84rem;
  line-height: 1.55;
}

.live-analysis-note {
  margin-top: 14px;
  color: var(--muted);
}

@media (max-width: 980px) {
  .live-analysis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .live-analysis-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .match-empty-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .match-empty-actions .detail-link {
    width: 100%;
    margin-top: 0;
  }
}

/* Homepage: live scores are the primary product surface. */
.home-page #hero-canli-skor {
  grid-template-columns: minmax(300px, 0.72fr) minmax(520px, 1.28fr);
  gap: 28px;
  align-items: stretch;
  padding-top: 42px;
  padding-bottom: 26px;
}

.home-page #hero-canli-skor > div {
  display: grid;
  align-content: center;
}

.home-page #hero-canli-skor h1 {
  margin: 18px 0;
  font-size: clamp(3rem, 5.4vw, 4.8rem);
  line-height: 0.96;
}

.home-page #hero-canli-skor .hero-copy {
  max-width: 520px;
  margin-bottom: 24px;
  font-size: 1.05rem;
  line-height: 1.6;
}

.home-page #hero-canli-skor .hero-actions {
  margin-bottom: 0;
}

.home-page #hero-canli-skor .match-command-card {
  height: 100%;
}

.home-page #bugunun-maclari-preview {
  padding-top: 38px;
}

.home-match-command-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-score-card {
  display: grid;
  min-width: 0;
  min-height: 184px;
  gap: 14px;
  border: 1px solid rgba(13, 148, 136, 0.08);
  border-radius: var(--radius);
  padding: 16px;
  background: rgba(247, 250, 249, 0.82);
  box-shadow: var(--shadow);
}

.home-score-card.is-live {
  border-color: rgba(200, 30, 45, 0.228);
  background: linear-gradient(145deg, rgba(200, 30, 45, 0.048), rgba(247, 250, 249, 0.9) 48%);
}

.home-score-card-head,
.home-score-card-foot,
.home-score-teams > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-score-card-head span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-score-card-head b {
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 0.78rem;
}

.home-score-card.is-live .home-score-card-head b {
  color: #ff8994;
}

.home-score-teams {
  display: grid;
  gap: 4px;
  border-block: 1px solid rgba(14, 26, 22, 0.081);
  padding-block: 10px;
}

.home-score-teams > div {
  min-height: 34px;
}

.home-score-teams strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.96rem;
}

.home-score-teams b {
  flex: 0 0 auto;
  min-width: 24px;
  color: var(--soft);
  font-size: 1.22rem;
  text-align: right;
}

.home-score-card.is-live .home-score-teams b {
  color: var(--green);
}

.home-score-card-foot {
  align-self: end;
  color: var(--muted);
  font-size: 0.76rem;
}

.home-score-card-foot a {
  flex: 0 0 auto;
  color: var(--green);
  font-weight: 850;
}

@media (max-width: 1180px) {
  .home-page #hero-canli-skor {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-page #hero-canli-skor > div {
    max-width: 720px;
  }
}

@media (max-width: 760px) {
  .home-page #hero-canli-skor {
    gap: 22px;
    padding-top: 34px;
  }

  .home-page #hero-canli-skor h1 {
    font-size: clamp(2.55rem, 13vw, 3.8rem);
  }

  .home-page #hero-canli-skor .hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page #hero-canli-skor .hero-actions .button:first-child {
    grid-column: auto;
  }

  .home-match-command-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-match-command-metrics a:nth-child(3) {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

@media (max-width: 520px) {
  .home-page #hero-canli-skor .hero-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-score-card-foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
}

.home-page .home-match-command-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .home-page .home-match-command-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-page .home-match-command-metrics a:nth-child(3) {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

@media (max-width: 1180px) {
  .intent-card-grid,
  .intent-link-grid,
  .intent-stack-grid,
  .daily-brief-grid,
  .brief-command-grid,
  .home-lockin-grid,
  .home-rank-grid,
  .explore-lab-grid,
  .rivalry-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .home-page .container,
  .subpage .container {
    width: calc(100% - 24px) !important;
    inline-size: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    max-inline-size: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero,
  .radar-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden;
  }

  .hero > *,
  .hero-copy,
  .hero-metrics {
    width: 100%;
    inline-size: 100%;
    max-width: 100%;
    max-inline-size: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .hero-actions,
  .hero-actions .button,
  .match-card,
  .glass-card,
  .metric-tile,
  .source-strip {
    max-width: 100%;
    max-inline-size: 100%;
    min-width: 0;
  }

  .hero-actions .button {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  body.home-page .hero {
    width: calc(100% - 24px) !important;
    inline-size: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    max-inline-size: calc(100% - 24px) !important;
    min-width: 0 !important;
  }

  body.home-page .hero > div,
  body.home-page .hero-copy,
  body.home-page .hero-actions,
  body.home-page .hero-actions .button,
  body.home-page .hero-metrics,
  body.home-page .metric-tile {
    width: 100% !important;
    inline-size: 100% !important;
    max-width: 100% !important;
    max-inline-size: 100% !important;
    min-width: 0 !important;
  }

  body.home-page .hero-copy {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .intent-card-grid,
  .intent-link-grid,
  .intent-stack-grid,
  .daily-brief-grid,
  .brief-command-grid,
  .home-lockin-grid,
  .home-rank-grid,
  .explore-lab-grid,
  .rivalry-route-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .intent-player-card,
  .intent-link-grid a,
  .intent-stack-card,
  .daily-brief-card,
  .brief-command-card,
  .home-lockin-card,
  .home-rank-card,
  .explore-lab-card,
  .rivalry-route-grid a {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .intent-hero {
    padding-top: 46px !important;
  }

  .intent-player-card {
    min-height: 0;
  }

  .daily-brief-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 16px !important;
  }
}

/* Match analysis pages use the same data-dense dashboard language without hiding missing inputs. */
.match-freshness-strip,
.match-radar-board,
.match-context-grid,
.match-related-grid {
  display: grid;
  gap: 14px;
  margin: 22px 0;
}

.match-freshness-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 14px;
  border: 1px solid rgba(11, 143, 90, 0.09);
  background: rgba(var(--surface-rgb), 0.72);
}

.match-freshness-strip div,
.match-confidence,
.match-squad-metrics div {
  min-width: 0;
}

.match-freshness-strip span,
.match-confidence span,
.match-squad-metrics dt,
.radar-explanation span,
.match-related-card span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0;
}

.match-freshness-strip b {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

/* Statistics center */
.stats-hero {
  margin-bottom: 20px;
}

.stats-toolbar {
  position: sticky;
  top: 76px;
  z-index: 20;
  display: flex;
  gap: 8px;
  margin: 18px 0 26px;
  padding: 10px;
  overflow-x: auto;
  border: 1px solid rgba(11, 143, 90, 0.09);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.9);
  backdrop-filter: blur(18px);
  scrollbar-width: none;
}

.stats-toolbar::-webkit-scrollbar {
  display: none;
}

.stats-toolbar button {
  min-height: 40px;
  padding: 0 15px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: rgba(var(--surface-rgb), 0.029);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.stats-toolbar button:hover,
.stats-toolbar button:focus-visible,
.stats-toolbar button.is-active {
  color: #f7faf9;
  border-color: var(--green);
  background: var(--green);
  outline: none;
}

.stats-filter-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin: 0 0 24px;
  padding: 14px;
  border: 1px solid rgba(11, 143, 90, 0.08);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.86);
}

.stats-filter-bar label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.stats-filter-bar label > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.stats-filter-bar select,
.stats-filter-bar button {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: #f2f7f5;
  font: inherit;
}

.stats-filter-bar select {
  padding: 0 34px 0 11px;
}

.stats-filter-bar button {
  padding: 0 14px;
  color: var(--green);
  font-weight: 800;
  cursor: pointer;
}

.stats-filter-bar select:focus-visible,
.stats-filter-bar button:focus-visible {
  border-color: var(--green);
  outline: 2px solid rgba(11, 143, 90, 0.092);
  outline-offset: 2px;
}

.stats-filter-result {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.8rem;
}

.home-competition-row {
  margin: 0 0 18px;
  padding-bottom: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Clear multi-league match command */
.match-command-card {
  min-height: 0;
  padding: 0;
}

.match-command-card::before {
  background:
    linear-gradient(145deg, rgba(11, 143, 90, 0.066), rgba(13, 148, 136, 0.028) 44%, transparent 72%),
    repeating-linear-gradient(0deg, rgba(238, 248, 245, 0.035) 0 1px, transparent 1px 52px);
}

.home-match-command {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.home-match-command-head,
.home-match-command-row,
.league-match-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.home-match-command-head > div {
  display: grid;
  gap: 5px;
}

.home-match-command-head span,
.home-match-command-metrics span,
.league-match-group > header span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-match-command-head strong {
  font-size: 1.05rem;
}

.home-match-command-head > a {
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 850;
}

.home-match-command-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}

.home-match-command-metrics a {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px 10px;
  color: inherit;
}

.home-match-command-metrics a + a {
  border-left: 1px solid var(--line);
}

.home-match-command-metrics b {
  color: var(--soft);
  font-size: 1.45rem;
  line-height: 1;
}

.home-match-command-metrics .live-number {
  color: #c81e2d;
}

.home-match-command-list {
  display: grid;
  gap: 2px;
}

.home-match-command-row {
  display: grid;
  grid-template-columns: minmax(98px, 0.7fr) minmax(160px, 1.5fr) auto;
  min-height: 54px;
  border-bottom: 1px solid rgba(14, 26, 22, 0.075);
  color: inherit;
}

.home-match-command-row > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-match-command-row i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(var(--surface-rgb), 0.23);
}

.home-match-command-row i.is-live {
  background: #c81e2d;
  box-shadow: 0 0 12px rgba(200, 30, 45, 0.432);
}

.home-match-command-row strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-match-command-row em {
  color: var(--muted);
  font-style: normal;
}

.home-match-command-row b {
  color: var(--cyan);
  font-size: 0.86rem;
}

.home-match-command-empty {
  display: grid;
  gap: 6px;
  padding: 4px 0;
}

.home-match-command-empty strong {
  color: var(--soft);
  font-size: 0.95rem;
}

.home-match-command-empty span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.home-match-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.home-match-command-actions .button {
  min-height: 40px;
  padding: 0 14px;
  font-size: 0.78rem;
}

.league-match-group {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  min-width: 0;
}

.league-match-group + .league-match-group {
  margin-top: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.league-match-group > header {
  padding: 0 2px;
}

.league-match-group > header > div {
  display: grid;
  gap: 3px;
}

.league-match-group > header h2 {
  margin: 0;
  font-size: 1.15rem;
}

.league-match-group > header > b {
  border: 1px solid rgba(13, 148, 136, 0.09);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--cyan);
  background: rgba(13, 148, 136, 0.03);
  font-size: 0.72rem;
}

.league-match-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1180px) {
  .league-match-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .home-page .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .hero-actions .button {
    width: 100%;
    min-width: 0;
  }

  .home-page .hero-actions .button:first-child {
    grid-column: 1 / -1;
  }

  .home-page .hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .home-page .metric-tile {
    min-height: 82px;
    padding: 11px;
  }

  .home-page .metric-tile strong {
    font-size: 1.05rem;
  }

  .home-page .metric-tile span {
    margin-top: 6px;
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .home-match-command {
    padding: 17px;
  }

  .home-match-command-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-match-command-metrics a:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .home-match-command-metrics a:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .home-match-command-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 10px;
    padding: 9px 0;
  }

  .home-match-command-row > span {
    grid-column: 1 / -1;
  }

  .home-match-command-row strong {
    white-space: normal;
  }

  .home-match-command-actions .button {
    flex: 1 1 130px;
  }

  .league-match-grid {
    grid-template-columns: 1fr;
  }
}

.home-statistics-entry .section-head {
  align-items: end;
}

/* Post-match analysis */
.home-post-match-shell,
.post-match-verdict,
.post-match-stat-group,
.post-match-lineup-card,
.post-match-substitutions,
.post-match-context-strip,
.post-match-next-grid a,
.team-latest-match {
  border: 1px solid rgba(13, 148, 136, 0.07);
  border-radius: var(--radius);
  background: rgba(247, 250, 249, 0.78);
  box-shadow: inset 0 1px 0 rgba(14, 26, 22, 0.046);
}

.home-post-match-shell {
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(280px, 1.4fr) auto;
  gap: 24px;
  align-items: center;
  padding: 22px;
}

.home-post-match-shell > div,
.team-latest-match-score > div {
  display: grid;
  gap: 6px;
}

.home-post-match-shell span,
.post-match-context-strip span,
.post-match-next-grid span,
.team-latest-match-score + span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.home-post-match-shell strong {
  color: var(--green);
  font-size: 1.05rem;
}

.home-post-match-shell p,
.team-latest-match p {
  margin: 0;
  color: #5b6b65;
  line-height: 1.65;
}

.post-match-page main {
  padding-bottom: 64px;
}

.post-match-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.75fr);
  gap: 36px;
  align-items: center;
  padding: 34px 0 28px;
}

.post-match-heading h1 {
  max-width: 780px;
  margin: 12px 0;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.post-match-heading > p {
  max-width: 780px;
  margin: 0;
  color: #cad8d5;
  line-height: 1.72;
}

.post-match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.post-match-meta span {
  border: 1px solid rgba(91, 107, 101, 0.112);
  border-radius: 6px;
  padding: 7px 9px;
  color: var(--muted);
  font-size: 0.78rem;
}

.post-match-scoreboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(11, 143, 90, 0.099);
  border-radius: var(--radius);
  padding: 20px;
  background: linear-gradient(145deg, rgba(var(--surface-rgb), 0.96), rgba(var(--surface-rgb), 0.96));
}

.post-match-scoreboard > div:not(.post-match-score) {
  display: grid;
  min-width: 0;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.post-match-scoreboard strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.9rem;
}

.team-monogram {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(255, 236, 61, 0.42);
  border-radius: 50%;
  background: #f7faf9;
  color: #fff05a;
  font-weight: 950;
}

.team-monogram.away {
  border-color: rgba(14, 26, 22, 0.322);
  background: var(--surface);
  color: white;
}

/* Analiz durumu rozeti. Kısmi bir analiz "tam" gibi sunulmaz; okuyucu
   neye baktığını kartın üstünde görür. */
.post-match-status {
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  background: rgba(var(--surface-rgb), 0.081);
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 750;
}

.post-match-status.is-full,
.post-match-status.is-completed {
  background: rgba(22, 138, 90, 0.12);
  color: var(--accent);
}

/* Kısmi ve yalnızca-olay kapsamları uyarı tonunda: yüksek kapsam gibi
   görünmemeleri bilinçli. */
.post-match-status.is-partial,
.post-match-status.is-events-only,
.post-match-status.is-partial_data,
.post-match-status.is-waiting_for_final_data,
.post-match-status.is-retry_scheduled {
  background: rgba(200, 140, 30, 0.14);
  color: #8a5a00;
}

.post-match-status.is-awaiting-provider {
  background: rgba(var(--surface-rgb), 0.14);
  color: var(--muted);
}

/* Anahtar eksikliği bir veri sorunu değil, kurulum sorunu — ayrı renk. */
.post-match-status.is-api-key-missing,
.post-match-status.is-failed {
  background: rgba(200, 30, 45, 0.096);
  color: var(--live);
}

.post-match-missing.is-key-missing {
  background: rgba(200, 30, 45, 0.07);
}

@media (prefers-color-scheme: dark) {
  .post-match-status.is-partial,
  .post-match-status.is-events-only,
  .post-match-status.is-partial_data,
  .post-match-status.is-waiting_for_final_data,
  .post-match-status.is-retry_scheduled {
    color: #f0c274;
  }
}

.post-match-score {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.post-match-score span,
.post-match-score small {
  color: var(--muted);
  font-size: 0.72rem;
}

.post-match-score b {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--text);
  font-size: 2.4rem;
}

.post-match-score i {
  color: var(--muted);
  font-style: normal;
}

.post-match-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 18px;
}

.post-match-kpi-grid article {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(91, 107, 101, 0.098);
  border-radius: var(--radius);
  padding: 16px;
  background: rgba(var(--surface-rgb), 0.029);
}

.post-match-kpi-grid span,
.post-match-kpi-grid small {
  color: var(--muted);
  font-size: 0.74rem;
}

.post-match-kpi-grid strong {
  color: var(--green);
  font-size: 1.42rem;
}

.post-match-verdict {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 24px;
}

.post-match-verdict h2,
.post-match-analysis-grid h2 {
  margin: 6px 0 10px;
}

.post-match-verdict p,
.post-match-analysis-grid p {
  margin: 0;
  color: #5b6b65;
  line-height: 1.68;
}

.post-match-verdict-score {
  display: grid;
  min-width: 190px;
  gap: 6px;
  border-left: 1px solid rgba(91, 107, 101, 0.126);
  padding-left: 24px;
}

.post-match-verdict-score span,
.post-match-verdict-score small {
  color: var(--muted);
  font-size: 0.76rem;
}

.post-match-verdict-score strong {
  color: var(--green);
  font-size: 1.2rem;
}

.post-match-analysis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.post-match-section {
  margin-top: 42px;
}

.post-match-team-labels {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  padding: 0 16px 12px;
  color: var(--text);
}

.post-match-team-labels strong:last-child {
  text-align: right;
}

.post-match-team-labels span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.post-match-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.post-match-stat-group {
  min-width: 0;
  padding: 18px;
}

.post-match-stat-group h3 {
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 0.9rem;
}

.post-match-stat-list {
  display: grid;
  gap: 12px;
}

.post-match-stat-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  gap: 12px;
  align-items: center;
}

.post-match-stat-row > b {
  color: var(--text);
  font-size: 0.86rem;
}

.post-match-stat-row > b:last-child {
  text-align: right;
}

.post-match-stat-row > div {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.post-match-stat-row span {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.73rem;
  text-align: center;
}

.post-match-stat-row i {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  height: 5px;
}

.post-match-stat-row i em {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: 999px;
  background: var(--green);
}

.post-match-stat-row i em:first-child {
  justify-self: end;
}

.post-match-stat-row i em:last-child {
  justify-self: start;
  background: var(--cyan);
}

.post-match-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 18px;
}

.post-match-events {
  display: grid;
  gap: 10px;
}

.post-match-event {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  border-left: 2px solid rgba(13, 148, 136, 0.15);
  padding: 11px 14px;
  background: rgba(var(--surface-rgb), 0.029);
}

.post-match-event.is-goal {
  border-left-color: var(--green);
  background: rgba(11, 143, 90, 0.03);
}

.post-match-event time {
  color: var(--green);
  font-weight: 950;
}

.post-match-event span {
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 900;
}

.post-match-event p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.post-match-key-points {
  padding: 20px;
}

.post-match-key-points h3 {
  margin-top: 0;
}

.post-match-key-points ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 18px;
  color: #5b6b65;
  line-height: 1.56;
}

.post-match-lineups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.post-match-lineup-card {
  padding: 18px;
}

.post-match-lineup-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.post-match-lineup-card h3 {
  margin: 0;
}

.post-match-lineup-card header span {
  color: var(--green);
  font-weight: 900;
}

.post-match-lineup-card ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 22px;
  margin: 18px 0 0;
  padding-left: 24px;
  color: #5b6b65;
}

.post-match-substitutions {
  margin-top: 14px;
  padding: 18px;
}

.post-match-substitutions h3 {
  margin: 0 0 14px;
}

.post-match-substitutions > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.post-match-sub-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid rgba(91, 107, 101, 0.084);
  border-radius: 6px;
  padding: 10px;
}

.post-match-sub-row time {
  color: var(--accent);
  font-weight: 900;
}

.post-match-sub-row div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.post-match-sub-row span,
.post-match-sub-row small {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.7rem;
}

.post-match-sub-row strong {
  overflow-wrap: anywhere;
  font-size: 0.82rem;
}

.post-match-context-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 32px;
  overflow: hidden;
}

.post-match-context-strip div {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: rgba(var(--surface-rgb), 0.029);
}

.post-match-next-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.post-match-next-grid a {
  display: grid;
  gap: 8px;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}

.post-match-next-grid a:hover,
.post-match-next-grid a:focus-visible {
  border-color: rgba(11, 143, 90, 0.264);
}

.post-match-next-grid strong {
  color: var(--text);
}

.post-match-next-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.team-latest-match {
  margin-top: 16px;
  padding: 20px;
}

.team-latest-match-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
}

.team-latest-match-score h2 {
  margin: 6px 0;
}

.team-latest-match-score > strong {
  color: var(--green);
  font-size: 2rem;
}

.lineup-row strong small {
  color: var(--green);
}

.statistic-pair span {
  display: flex;
  gap: 16px;
}

.statistic-pair span b {
  color: var(--green);
}

.statistic-pair span em {
  color: var(--cyan);
  font-style: normal;
  font-weight: 900;
}

@media (max-width: 900px) {
  .post-match-hero,
  .post-match-story-grid {
    grid-template-columns: 1fr;
  }

  .post-match-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .post-match-stats-grid,
  .post-match-analysis-grid,
  .post-match-substitutions > div,
  .post-match-next-grid,
  .home-post-match-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .post-match-heading h1 {
    font-size: 2rem;
  }

  .post-match-scoreboard {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    padding: 14px 10px;
  }

  .post-match-score b {
    gap: 6px;
    font-size: 1.7rem;
  }

  .team-monogram {
    width: 44px;
    height: 44px;
  }

  .post-match-kpi-grid,
  .post-match-lineups,
  .post-match-context-strip {
    grid-template-columns: 1fr;
  }

  .post-match-verdict {
    grid-template-columns: 1fr;
  }

  .post-match-verdict-score {
    border-top: 1px solid rgba(91, 107, 101, 0.126);
    border-left: 0;
    padding-top: 16px;
    padding-left: 0;
  }

  .post-match-stat-row {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: 8px;
  }

  .post-match-lineup-card ol {
    grid-template-columns: 1fr;
  }

  .post-match-team-labels {
    font-size: 0.8rem;
  }
}

.section-player-radar .player-signals-grid {
  margin-top: 16px;
}

.statistics-hub,
.stats-group {
  display: grid;
  gap: 22px;
}

.statistics-hub {
  margin-bottom: 34px;
}

.stats-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.stats-summary article,
.stats-panel,
.stats-match-grid article,
.stats-coverage-grid article,
.stats-route-grid a {
  min-width: 0;
  border: 1px solid rgba(11, 143, 90, 0.08);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(var(--surface-rgb), 0.88), rgba(var(--surface-rgb), 0.92));
  box-shadow: 0 18px 44px rgba(14, 26, 22, 0.058);
}

.stats-summary article {
  min-height: 126px;
  padding: 16px;
}

.stats-summary span,
.stats-summary small,
.stats-match-grid span,
.stats-match-grid small,
.stats-panel header span,
.stats-panel header em,
.stats-leader-name small,
.stats-coverage-grid small,
.stats-route-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.77rem;
  font-style: normal;
}

.stats-summary strong {
  display: block;
  margin: 8px 0 5px;
  color: var(--green);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1;
}

.stats-group[hidden] {
  display: none;
}

.stats-group-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-top: 8px;
  border-top: 1px solid rgba(11, 143, 90, 0.065);
}

.stats-group-head span {
  display: block;
  margin-bottom: 5px;
  color: var(--turquoise);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.stats-group-head h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
}

.stats-group-head > a {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 0.85rem;
  font-weight: 800;
}

.stats-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.stats-panel {
  padding: 16px;
}

.stats-panel header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.stats-panel header h3 {
  margin: 4px 0 0;
  font-size: 1rem;
}

.stats-leader-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats-leader-list a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 56px;
  padding: 8px;
  border-radius: 6px;
  color: var(--text);
}

.stats-leader-list a:hover,
.stats-leader-list a:focus-visible {
  background: rgba(11, 143, 90, 0.037);
  outline: 1px solid rgba(11, 143, 90, 0.11);
}

.stats-rank {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(11, 143, 90, 0.12);
  border-radius: 50%;
  color: var(--turquoise);
  font-size: 0.75rem;
  font-weight: 900;
}

.stats-leader-name {
  min-width: 0;
}

.stats-leader-name strong,
.stats-leader-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-leader-list b {
  color: var(--green);
  font-size: 0.9rem;
}

.stats-empty {
  display: grid;
  gap: 5px;
  padding: 18px 10px;
  color: var(--muted);
}

.stats-empty strong {
  color: var(--text);
}

.stats-match-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.stats-match-grid article {
  padding: 17px;
}

.stats-match-grid strong {
  display: block;
  margin: 8px 0;
  color: var(--green);
  font-size: 2rem;
}

.stats-match-grid a {
  color: var(--turquoise);
  font-size: 0.78rem;
  font-weight: 800;
}

.stats-coverage-note {
  max-width: 760px;
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.stats-coverage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.stats-coverage-grid article {
  padding: 14px;
}

.stats-coverage-grid article > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.stats-coverage-grid b {
  color: var(--green);
}

.stats-coverage-track {
  height: 7px;
  margin: 11px 0 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.092);
}

.stats-coverage-track i {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--turquoise));
}

.stats-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.stats-route-grid a {
  display: grid;
  gap: 7px;
  min-height: 112px;
  padding: 17px;
  color: var(--text);
}

.stats-route-grid a:hover,
.stats-route-grid a:focus-visible {
  border-color: var(--green);
  transform: translateY(-2px);
  outline: none;
}

.stats-route-grid strong {
  font-size: 0.95rem;
}

@media (max-width: 1180px) {
  .stats-filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stats-summary,
  .stats-match-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stats-panel-grid,
  .stats-coverage-grid,
  .stats-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .stats-filter-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats-filter-result {
    grid-column: 1;
  }

  .stats-toolbar {
    top: 68px;
    margin-inline: 0;
  }

  .stats-summary,
  .stats-panel-grid,
  .stats-match-grid,
  .stats-coverage-grid,
  .stats-route-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats-summary article {
    min-height: 0;
  }

  .stats-group-head {
    align-items: start;
    flex-direction: column;
  }

  .stats-panel,
  .stats-match-grid article,
  .stats-coverage-grid article,
  .stats-route-grid a {
    max-width: 100%;
  }

  .stats-leader-list a {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }
}

.match-radar-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.match-radar-team-card,
.match-context-grid > .card,
.match-related-card {
  border: 1px solid rgba(11, 143, 90, 0.09);
  background: linear-gradient(145deg, rgba(var(--surface-rgb), 0.9), rgba(var(--surface-rgb), 0.85));
  box-shadow: 0 18px 42px rgba(14, 26, 22, 0.058);
}

.match-radar-team-card {
  padding: 20px;
}

.match-radar-team-head,
.match-confidence,
.match-key-player-list li,
.match-squad-metrics div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.match-radar-team-head span {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
}

.match-radar-team-head strong {
  color: var(--accent);
  font-size: 1.38rem;
}

.match-confidence {
  margin: 14px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(11, 143, 90, 0.06);
}

.match-confidence b {
  color: var(--accent-2);
  font-size: 0.78rem;
}

.match-radar-bars {
  display: grid;
  gap: 10px;
}

.match-radar-bars > div {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(56px, 1.8fr) 28px;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.77rem;
}

.match-radar-bars i {
  display: block;
  block-size: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.092);
}

.match-radar-bars i b {
  display: block;
  inline-size: min(100%, var(--value));
  block-size: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.match-radar-bars em {
  color: var(--text);
  font-style: normal;
  text-align: end;
}

.radar-explanation {
  margin-top: 18px;
  border-top: 1px solid rgba(11, 143, 90, 0.06);
  padding-top: 12px;
}

.radar-explanation summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 700;
}

.radar-explanation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.radar-explanation ul {
  margin: 7px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.82rem;
}

.match-context-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.match-context-grid > .card {
  padding: 20px;
}

.match-key-player-list,
.match-squad-metrics {
  display: grid;
  gap: 9px;
  margin: 16px 0 0;
}

.match-key-player-list {
  padding: 0;
  list-style: none;
}

.match-key-player-list a {
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
}

.match-key-player-list span,
.match-squad-metrics dd {
  margin: 0;
  color: var(--accent-2);
  font-size: 0.8rem;
}

.match-squad-metrics div {
  padding-top: 9px;
  border-top: 1px solid rgba(11, 143, 90, 0.05);
}

.match-radar-disclaimer,
.muted-copy {
  color: var(--muted);
  font-size: 0.84rem;
}

.match-related-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.match-related-card {
  display: block;
  min-height: 150px;
  padding: 18px;
  color: var(--text);
  text-decoration: none;
}

.match-related-card strong {
  display: block;
  margin: 8px 0;
  color: var(--accent);
}

.match-related-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.fixture-match-row {
  text-decoration: none;
}

[data-static-fallback="true"][data-state="fallback"] {
  opacity: 1;
}

@media (max-width: 760px) {
  .match-freshness-strip,
  .match-radar-board,
  .match-context-grid,
  .match-related-grid,
  .radar-explanation-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .match-radar-bars > div {
    grid-template-columns: minmax(90px, 1fr) minmax(48px, 1.5fr) 26px;
  }
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.news-grid-page {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.team-news-section {
  display: grid;
  gap: 18px;
  margin-top: 32px;
}

.team-news-section .news-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.news-card {
  min-width: 0;
  min-height: 260px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(247, 250, 249, 0.9), rgba(247, 250, 249, 0.92));
  box-shadow: var(--shadow-soft);
}

.news-card-meta,
.news-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.news-card-meta time,
.news-card-footer > span {
  color: var(--muted);
  font-size: 0.78rem;
}

.news-card h3 {
  margin: 8px 0 10px;
  font-size: 1.1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.news-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.news-card-footer {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.standings-empty {
  min-width: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  border: 1px dashed rgba(13, 148, 136, 0.14);
  border-radius: 8px;
  background: rgba(13, 148, 136, 0.028);
}

.standings-empty.compact {
  margin: 0 14px 14px;
  padding: 18px;
}

.standings-empty strong {
  color: var(--text);
  font-size: 1.05rem;
}

.standings-empty p {
  max-width: 620px;
  margin: 0 0 4px;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 1050px) {
  .news-grid,
  .news-grid-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-news-section .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .news-grid,
  .news-grid-page {
    grid-template-columns: 1fr;
  }

  .team-news-section .news-grid {
    grid-template-columns: 1fr;
  }

  .news-card {
    min-height: 0;
  }

  .news-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Trend Radar SEO pages */
.trend-seo-page main {
  padding-bottom: 48px;
}

.trend-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.34fr);
  gap: 28px;
  align-items: end;
  padding: 34px 0 24px;
}

.trend-hero h1 {
  max-width: 920px;
  margin: 10px 0 14px;
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.trend-hero p {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.72;
}

.trend-hero aside {
  display: grid;
  gap: 7px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(247, 250, 249, 0.78);
}

.trend-hero aside span,
.trend-hero aside small {
  color: var(--muted);
}

.trend-hero aside strong {
  color: var(--accent);
}

.trend-fact-grid,
.trend-transfer-grid,
.trend-link-grid,
.trend-explainer-grid,
.trend-need-grid,
.trend-player-links,
.trend-radar-home-grid {
  display: grid;
  gap: 14px;
}

.trend-fact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trend-fact-card,
.trend-transfer-card,
.trend-explainer-grid article,
.trend-need-grid article,
.trend-link-grid > a,
.trend-player-links > a,
.trend-radar-home-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(247, 250, 249, 0.91), rgba(247, 250, 249, 0.94));
  box-shadow: var(--shadow-soft);
}

.trend-fact-card {
  min-height: 150px;
  padding: 20px;
}

.trend-fact-card span,
.trend-transfer-head time,
.trend-link-grid span,
.trend-player-links span,
.trend-radar-home-card > span {
  color: var(--accent-2);
  font-size: 0.76rem;
  font-weight: 750;
  text-transform: uppercase;
}

.trend-fact-card strong {
  display: block;
  margin: 10px 0 8px;
  color: var(--text);
  font-size: 1.32rem;
}

.trend-fact-card p,
.trend-transfer-card p,
.trend-explainer-grid p,
.trend-need-grid p,
.trend-link-grid p,
.trend-radar-home-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.trend-section {
  margin-top: 46px;
}

.trend-transfer-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trend-transfer-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.trend-transfer-head,
.trend-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.trend-transfer-card h3 {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}

.trend-transfer-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 52px;
  padding: 10px;
  border: 1px solid rgba(11, 143, 90, 0.06);
  background: rgba(11, 143, 90, 0.02);
  text-align: center;
}

.trend-transfer-route span {
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  font-weight: 700;
}

.trend-transfer-route b {
  color: var(--accent);
}

.trend-mini-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.trend-mini-stats div {
  min-width: 0;
  padding: 10px;
  background: rgba(var(--surface-rgb), 0.029);
}

.trend-mini-stats dt {
  color: var(--muted);
  font-size: 0.72rem;
}

.trend-mini-stats dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  font-weight: 700;
}

.trend-card-actions {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.trend-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.trend-timeline article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 22px;
  background: var(--surface-strong, #f2f7f5);
}

.trend-timeline article > span {
  align-self: start;
  padding: 6px 8px;
  color: var(--accent-2);
  border: 1px solid rgba(13, 148, 136, 0.125);
  font-size: 0.72rem;
  font-weight: 750;
}

.trend-timeline article.is-current {
  background: rgba(11, 143, 90, 0.044);
}

.trend-timeline h3,
.trend-timeline p {
  margin: 0;
}

.trend-timeline p {
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.55;
}

.trend-note,
.trend-home-cta {
  padding: 24px;
  border: 1px solid rgba(11, 143, 90, 0.132);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(11, 143, 90, 0.041), rgba(13, 148, 136, 0.018));
}

.trend-note strong {
  font-size: 1.08rem;
}

.trend-note p {
  max-width: 880px;
  margin: 9px 0 16px;
  color: var(--muted);
  line-height: 1.65;
}

.trend-data-table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.trend-table-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) repeat(2, minmax(100px, 0.8fr));
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
}

.trend-table-row:first-child {
  border-top: 0;
}

.trend-table-row.head {
  color: var(--muted);
  background: rgba(13, 148, 136, 0.03);
  font-size: 0.78rem;
}

.trend-explainer-grid,
.trend-need-grid,
.trend-player-links,
.trend-link-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trend-explainer-grid article,
.trend-need-grid article,
.trend-player-links > a,
.trend-link-grid > a {
  padding: 20px;
}

.trend-explainer-grid article > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #f7faf9;
  background: var(--accent);
  font-weight: 850;
}

.trend-explainer-grid h3,
.trend-need-grid strong,
.trend-link-grid strong,
.trend-player-links strong {
  display: block;
  margin: 10px 0 8px;
}

.trend-need-grid span {
  color: var(--accent-2);
  font-size: 0.76rem;
  font-weight: 750;
}

.trend-fixture-list {
  display: grid;
  gap: 10px;
}

.trend-fixture-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: rgba(247, 250, 249, 0.78);
}

.trend-fixture-list span,
.trend-player-links small {
  color: var(--muted);
  font-size: 0.78rem;
}

.trend-fixture-list h3,
.trend-fixture-list p {
  margin: 5px 0 0;
}

.trend-fixture-list p {
  color: var(--muted);
}

.trend-link-grid > a,
.trend-player-links > a,
.trend-radar-home-card {
  color: var(--text);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.trend-link-grid > a:hover,
.trend-player-links > a:hover,
.trend-radar-home-card:hover {
  border-color: rgba(11, 143, 90, 0.248);
  background: rgba(11, 143, 90, 0.039);
  transform: translateY(-2px);
}

.trend-home-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 46px;
}

.trend-home-cta h2,
.trend-home-cta p {
  margin: 6px 0 0;
}

.trend-home-cta p {
  color: var(--muted);
}

.trend-radar-home-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.trend-radar-home-card {
  min-height: 168px;
  padding: 18px;
}

.trend-radar-home-card strong {
  display: block;
  margin: 9px 0;
  line-height: 1.35;
}

.trend-radar-home-card.is-featured {
  border-color: rgba(11, 143, 90, 0.187);
  background: linear-gradient(145deg, rgba(11, 143, 90, 0.066), rgba(247, 250, 249, 0.95));
}

.trend-empty {
  grid-column: 1 / -1;
}

@media (max-width: 1100px) {
  .trend-radar-home-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trend-transfer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .trend-hero,
  .trend-fact-grid,
  .trend-transfer-grid,
  .trend-link-grid,
  .trend-explainer-grid,
  .trend-need-grid,
  .trend-player-links,
  .trend-radar-home-grid,
  .trend-timeline {
    grid-template-columns: minmax(0, 1fr);
  }

  .trend-hero {
    padding-top: 22px;
  }

  .trend-hero h1 {
    font-size: 2.35rem;
  }

  .trend-table-row {
    grid-template-columns: minmax(120px, 1.2fr) repeat(2, minmax(64px, 0.65fr));
    padding: 12px;
    font-size: 0.82rem;
  }

  .trend-fixture-list article,
  .trend-home-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .trend-card-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Match Center v1: pre-match intelligence components */

.match-intelligence-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(11, 143, 90, 0.1);
  border-radius: var(--radius);
  background: linear-gradient(155deg, rgba(var(--surface-rgb), 0.92), rgba(var(--surface-rgb), 0.88));
  box-shadow: 0 18px 42px rgba(14, 26, 22, 0.058);
}

.match-intelligence-card .card-head {
  margin-bottom: 0;
}

.research-verdict-card {
  border-color: rgba(13, 148, 136, 0.14);
}

.research-verdict-card p {
  margin: 0;
  font-weight: 650;
}

.quantitative-model-headline {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}

.quantitative-model-card[data-confidence-band="insufficient"] {
  border-color: rgba(200, 30, 45, 0.192);
}

.quantitative-model-detail summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 6px;
}

.confidence-warning-card {
  padding: 12px 18px;
}

.confidence-warning-card p {
  margin: 0;
  font-weight: 700;
}

.confidence-warning-card[data-confidence-band="insufficient"] {
  color: #c81e2d;
  border-color: rgba(200, 30, 45, 0.21);
}

.confidence-warning-card[data-confidence-band="low"] {
  color: #b07410;
  border-color: rgba(176, 116, 16, 0.21);
}

.confidence-warning-card[data-confidence-band="medium"] {
  color: var(--cyan);
  border-color: rgba(13, 148, 136, 0.16);
}

.confidence-warning-card[data-confidence-band="high"] {
  color: var(--green);
  border-color: rgba(11, 143, 90, 0.193);
}

.deep-analysis-editorial h3 {
  margin: 4px 0 0;
  font-size: 1rem;
}

.deep-analysis-editorial > ul,
.deep-analysis-editorial p {
  margin: 0;
}

.deep-analysis-editorial ul {
  padding-left: 1.1em;
  display: grid;
  gap: 6px;
}

.deep-analysis-editorial li strong {
  display: block;
}

.deep-analysis-short-answer {
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--text);
}

.deep-analysis-source-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}

.deep-analysis-source-list li {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.deep-analysis-source-list p {
  color: var(--muted);
  font-size: 0.88rem;
}

.deep-analysis-source-date {
  color: var(--muted);
  font-size: 0.78rem;
}

.analysis-confidence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.analysis-confidence[data-level="high"] {
  border-color: rgba(11, 143, 90, 0.22);
  color: var(--green);
}

.analysis-confidence[data-level="medium"] {
  border-color: rgba(176, 116, 16, 0.24);
  color: #b07410;
}

.analysis-confidence[data-level="low"] {
  border-color: rgba(200, 30, 45, 0.21);
  color: #d94854;
}

.analysis-confidence::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.goal-potential-badge,
.upset-risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 800;
  border: 1px solid rgba(14, 26, 22, 0.161);
  color: var(--soft);
  background: rgba(var(--surface-rgb), 0.052);
}

.goal-potential-badge[data-label="high"],
.upset-risk-badge[data-label="low"] {
  border-color: rgba(11, 143, 90, 0.198);
  color: var(--green);
  background: rgba(11, 143, 90, 0.044);
}

.goal-potential-badge[data-label="medium"],
.upset-risk-badge[data-label="medium"] {
  border-color: rgba(176, 116, 16, 0.216);
  color: #b07410;
  background: rgba(176, 116, 16, 0.048);
}

.goal-potential-badge[data-label="low"],
.upset-risk-badge[data-label="high"] {
  border-color: rgba(200, 30, 45, 0.192);
  color: #d94854;
  background: rgba(200, 30, 45, 0.048);
}

.goal-potential-badge[data-label="unavailable"],
.upset-risk-badge[data-label="unavailable"] {
  color: var(--muted);
  border-style: dashed;
}

.match-balance {
  display: grid;
  gap: 6px;
}

.match-balance-labels {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.76rem;
}

.match-balance-labels strong {
  color: var(--text);
  font-weight: 800;
}

.match-balance-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(var(--surface-rgb), 0.092);
}

.match-balance-track span {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: block;
  width: var(--home-share, 50%);
  background: linear-gradient(90deg, var(--cyan), var(--green));
  border-radius: inherit;
}

.match-balance-note {
  color: var(--muted);
  font-size: 0.74rem;
}

.probability-bar {
  display: grid;
  gap: 8px;
}

.probability-bar-track {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(var(--surface-rgb), 0.092);
}

.probability-bar-track span {
  display: block;
  height: 100%;
}

.probability-bar-track .home-share {
  background: var(--green);
}

.probability-bar-track .draw-share {
  background: rgba(var(--surface-rgb), 0.368);
}

.probability-bar-track .away-share {
  background: var(--cyan);
}

.probability-bar-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  font-size: 0.78rem;
  color: var(--muted);
}

.probability-bar-legend b {
  display: block;
  color: var(--text);
  font-size: 0.95rem;
}

.probability-bar-legend .is-primary b {
  color: var(--green);
}

.matchup-grid {
  display: grid;
  gap: 14px;
}

.matchup-row {
  display: grid;
  grid-template-columns: minmax(70px, 0.7fr) minmax(0, 1fr) minmax(70px, 0.7fr);
  align-items: center;
  gap: 10px;
}

.matchup-row-label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.matchup-row-value {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text);
}

.matchup-row-value.is-home {
  text-align: start;
}

.matchup-row-value.is-away {
  text-align: end;
}

.matchup-row-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.092);
  overflow: hidden;
}

.matchup-row-track span {
  position: absolute;
  inset-block: 0;
  border-radius: inherit;
}

.matchup-row-track .home-fill {
  inset-inline-start: 0;
  background: var(--green);
  width: var(--home-width, 0%);
}

.matchup-row-track .away-fill {
  inset-inline-end: 0;
  background: var(--cyan);
  width: var(--away-width, 0%);
}

.matchup-row.is-unavailable .matchup-row-track {
  background: repeating-linear-gradient(90deg, rgba(var(--surface-rgb), 0.092) 0 8px, transparent 8px 16px);
}

.matchup-row.is-unavailable .matchup-row-value {
  color: var(--muted);
  font-weight: 600;
}

.key-duel-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(11, 143, 90, 0.09);
  border-radius: var(--radius);
  background: rgba(var(--surface-rgb), 0.55);
}

.key-duel-title {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.key-duel-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.key-duel-player {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.key-duel-player a {
  color: var(--text);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.key-duel-player a:hover,
.key-duel-player a:focus-visible {
  color: var(--green);
}

.key-duel-player span {
  color: var(--muted);
  font-size: 0.76rem;
}

.key-duel-player.is-away {
  text-align: end;
}

.key-duel-vs {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.key-duel-advantage {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid rgba(14, 26, 22, 0.161);
  color: var(--soft);
}

.key-duel-advantage[data-advantage="home"] {
  border-color: rgba(11, 143, 90, 0.198);
  color: var(--green);
}

.key-duel-advantage[data-advantage="away"] {
  border-color: rgba(13, 148, 136, 0.18);
  color: var(--cyan);
}

.key-duel-summary {
  color: var(--muted);
  font-size: 0.82rem;
}

.lineup-summary {
  display: grid;
  gap: 12px;
}

.lineup-summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lineup-summary-head h3 {
  margin: 0;
  font-size: 1rem;
}

.lineup-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid rgba(14, 26, 22, 0.161);
  color: var(--soft);
}

.lineup-status-badge[data-status="official"] {
  border-color: rgba(11, 143, 90, 0.22);
  color: var(--green);
}

.lineup-status-badge[data-status="probable"] {
  border-color: rgba(13, 148, 136, 0.18);
  color: var(--cyan);
}

.lineup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.lineup-player-card {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(var(--surface-rgb), 0.034);
}

.lineup-player-card a {
  color: var(--text);
  font-weight: 700;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.lineup-player-card a:hover,
.lineup-player-card a:focus-visible {
  color: var(--green);
}

.lineup-player-card span {
  color: var(--muted);
  font-size: 0.72rem;
}

.lineup-player-card[data-out-of-position="true"] span.lineup-oop-flag {
  color: #b07410;
}

.lineup-missing-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lineup-missing-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.8rem;
}

.match-analysis-section {
  display: grid;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
  padding: 22px 0 64px;
}

.match-analysis-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
}

.match-analysis-tabs::-webkit-scrollbar {
  display: none;
}

.match-analysis-tab {
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 9px 14px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.match-analysis-tab:hover {
  color: var(--text);
}

.match-analysis-tab:focus-visible {
  outline: 0;
  border-color: var(--line-strong);
  background: rgba(var(--surface-rgb), 0.046);
}

.match-analysis-tab[aria-selected="true"] {
  color: var(--green);
  border-color: rgba(11, 143, 90, 0.176);
  background: rgba(11, 143, 90, 0.044);
}

.match-analysis-panel {
  padding-top: 16px;
}

.match-analysis-panel[hidden] {
  display: none;
}

.prediction-note {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed rgba(91, 107, 101, 0.245);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.prediction-note::before {
  content: "i";
  flex: 0 0 auto;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(91, 107, 101, 0.35);
  font-size: 0.72rem;
  font-weight: 900;
  font-style: normal;
}

.match-empty-state {
  display: grid;
  gap: 8px;
  min-height: 132px;
  place-content: center;
  justify-items: center;
  text-align: center;
  border: 1px dashed rgba(11, 143, 90, 0.092);
  border-radius: var(--radius);
  padding: 24px 18px;
}

.match-empty-state strong {
  color: var(--text);
  font-size: 1rem;
}

.match-empty-state span {
  max-width: 420px;
  color: var(--muted);
  font-size: 0.88rem;
}

@media (prefers-reduced-motion: reduce) {
  .match-balance-track span,
  .matchup-row-track span {
    transition: none !important;
  }
}

@media (max-width: 480px) {
  .key-duel-matchup {
    grid-template-columns: 1fr;
    text-align: start;
    gap: 8px;
  }

  .key-duel-player.is-away {
    text-align: start;
  }

  .key-duel-advantage {
    justify-self: start;
  }

  .probability-bar-legend {
    font-size: 0.72rem;
  }

  .matchup-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .matchup-row-value.is-away {
    text-align: start;
  }
}

/* ============================================================================
   TASARIM KATMANI
   ----------------------------------------------------------------------------
   Bu blok dosyanın sonundadır: aynı özgüllükteki eski kuralları kaynak sırasına
   göre geçersiz kılar, böylece 11.500 satırlık mevcut CSS'i yeniden yazmadan
   tutarlı bir görünüm elde edilir. Her bölüm neyi neden değiştirdiğini yazar.
   ========================================================================== */

/* --- 1. Okunabilirlik tabanı ------------------------------------------------
   Denetimde ana sayfada 38, oyuncu radarında 2366 metin öğesi 12 pikselin
   altındaydı. Bu boyutlar mobilde okunmuyor. Aşağıdaki kurallar en küçük
   basamağı 13 piksele çeker; hiyerarşi korunur, yalnızca taban yükselir. */
.card-kicker,
.section-kicker,
.eyebrow,
.tag,
.status-badge,
.muted-copy,
.metric-grid span,
.metric-grid.compact span,
.transfer-radar-meta span,
.trend-mini-stats dt,
.fixture-status-badge,
.home-score-card-head,
.home-match-command-metrics span {
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
}

.metric-grid b,
.trend-mini-stats dd,
.transfer-radar-meta b {
  font-size: var(--fs-base);
  letter-spacing: 0;
}

p,
.lead,
.section-title p {
  font-size: var(--fs-base);
  line-height: 1.6;
}

/* --- 2. Dokunma hedefleri ---------------------------------------------------
   Bağlantı ve düğmelerin dikey hedefi 32 pikselin altındaydı. Metin boyutunu
   büyütmeden isabet alanını büyütür. */
.nav-links a,
.detail-link,
.section-link,
.competition-chip-row a,
.stats-route-grid a,
.button {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

/* --- 3. Küçük ekranda konteyner --------------------------------------------
   560 piksel altında konteyner `width: 342px; margin-left: 12px` ile sabitti:
   390 piksellik bir telefonda içerik sola yaslanıyor, sağda 36 piksel ölü alan
   kalıyordu. Akışkan ve simetrik hale getirir. */
@media (max-width: 560px) {
  .container {
    width: calc(100% - 32px);
    max-width: none;
    margin-inline: auto;
  }
}

/* --- 4. Öğe sayısına uyan ızgaralar ----------------------------------------
   Maç ızgaraları sabit dört sütundu. Günde tek maç olduğunda kart %25
   genişlikte kalıp yanında üç sütunluk boşluk bırakıyordu — sayfa bozuk
   görünüyordu. `auto-fit` kart sayısına uyum sağlar. */
.matches-grid,
.players-grid,
.news-grid,
.league-match-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-4);
}

/* Maç ızgaralarında boşluk bir basamak dar: on iki kart yan yana dizilirken
   16px'lik boşluk satır başına bir kart kaybettiriyordu. */
.matches-grid,
.league-match-grid {
  gap: var(--sp-3);
}

/* Tek kart tüm satırı kaplamasın: okunabilir bir üst sınır. */
.matches-grid > *,
.news-grid > * {
  min-width: 0;
}

/* --- 5. Dikey ritim ---------------------------------------------------------
   Bölüm dolgusu 44px + başlık boşlukları ile bölümler arası ~100px boşluk
   oluşuyordu; sayfa seyrek ve gereksiz uzun görünüyordu. */
.section {
  padding: var(--sp-8) 0;
}

.section-head {
  margin-bottom: var(--sp-5);
  gap: var(--sp-4);
}

/* Başlık ile "Tümünü gör" bağlantısı aynı hizada dursun; bağlantı eskiden
   kendi satırına düşüp başlıktan kopuyordu. */
.section-head {
  align-items: flex-end;
  flex-wrap: wrap;
}

.section-link {
  white-space: nowrap;
  color: var(--cyan);
  font-weight: 600;
}

/* --- 6. Kart yüzeyi ---------------------------------------------------------
   Kartlar arasında kenarlık/gölge/dolgu değerleri farklıydı; tek yüzey dili. */
.card,
.glass-card,
.home-score-card,
.news-card,
.match-card,
.transfer-radar-card,
.static-match-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* --- 7. Odak görünürlüğü ----------------------------------------------------
   Klavye ile gezinirken odak halkası çoğu öğede görünmüyordu (erişilebilirlik).
   Fare kullanıcısını rahatsız etmemek için yalnızca klavye odağında. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius);
}

/* ============================================================================
   PREMIUM KATMAN
   ----------------------------------------------------------------------------
   Amaç: Sofascore / FotMob / OneFootball sınıfı bir "his" - geniş düzen, cam
   yüzeyler, yumuşak gölge, tutarlı yuvarlaklık ve akıcı geçişler.
   Neden dosyanın sonuna eklendi: 11.700 satırlık mevcut CSS'te aynı seçicinin
   onlarca varyantı var. Sonda ve daha yüksek özgüllükle yazmak, çalışan hiçbir
   kuralı silmeden görünümü tek elden yönetmeyi sağlar.
   ========================================================================== */

:root {
  /* Geniş düzen: içerik 1120px'e sıkışmıştı, 27" ekranda sayfanın %40'ı boştu. */
  --wide: 1440px;
  --gutter: clamp(16px, 3.2vw, 40px);
  --header-h: 64px;

  /* Derinlik basamakları. Açık zeminde gölge, koyu zemindekinin aynısı
     olamaz: aynı opaklık ekranı kirletir. Üç seviye de iki katmanlıdır —
     yakın ve sıkı bir kontur gölgesi, uzak ve yumuşak bir alan gölgesi. */
  --shadow-sm: 0 1px 2px rgba(14, 26, 22, 0.04), 0 1px 3px rgba(14, 26, 22, 0.06);
  --shadow-md: 0 2px 6px rgba(14, 26, 22, 0.05), 0 8px 24px rgba(14, 26, 22, 0.07);
  --shadow-lg: 0 4px 12px rgba(14, 26, 22, 0.06), 0 24px 56px rgba(14, 26, 22, 0.1);
  --shadow-accent: 0 6px 20px rgba(11, 143, 90, 0.18);
  --shadow: var(--shadow-lg);
  --shadow-card: var(--shadow-md);
  --shadow-soft: var(--shadow-sm);

  /* Cam efekti ve marka geçişleri tek yerden. */
  --glass: rgba(255, 255, 255, 0.82);
  --glass-strong: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(14, 26, 22, 0.08);
  --grad-accent: linear-gradient(135deg, var(--green), var(--cyan));
  --grad-surface: linear-gradient(180deg, #ffffff, #fbfdfc);
  /* Beyazdan yeşile: sayfa üstünde nefes, altında marka rengine iniş. */
  --grad-hero: linear-gradient(180deg, #ffffff 0%, #f7fbf9 55%, var(--green-tint) 100%),
    radial-gradient(120% 130% at 88% 0%, rgba(11, 143, 90, 0.1), transparent 62%);
  /* Koyu bölümler (footer, vurgu şeritleri) için charcoal-yeşil iniş. */
  --grad-deep: linear-gradient(160deg, #0e1a16 0%, #0b3d2c 100%);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
}

/* --- Geniş konteyner --------------------------------------------------------
   `.container` (1120px) korunur ama premium bölümler `.container-wide` ile
   1440px'e kadar açılır; kenar boşluğu viewport ile ölçeklenir. */
.container-wide {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

body .container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ----------------------------------------------------------------------------
   1. YAPIŞKAN ÜST ÇUBUK
   Eski başlık sayfayla birlikte kayıyordu; uzun listelerde menüye dönmek için
   en üste çıkmak gerekiyordu. Artık sabit, cam yüzeyli ve kaydırınca
   yoğunlaşan bir çubuk.
   -------------------------------------------------------------------------- */
.topbar-premium {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(246, 250, 248, 0.94), rgba(246, 250, 248, 0.78));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}

.topbar-premium.is-stuck {
  background: rgba(var(--surface-rgb), 0.96);
  box-shadow: 0 10px 30px rgba(14, 26, 22, 0.153);
}

.topbar-premium .nav {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--header-h);
  /* Yatay dolgu `.container-wide`den gelir; `padding: 0` onu da siliyor ve
     başlık içeriği ekran kenarına yapışıyordu. */
  padding-block: 0;
}

.topbar-premium .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.topbar-premium .brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: var(--grad-accent);
  color: #f4faf7;
  box-shadow: 0 6px 18px rgba(13, 148, 136, 0.14);
}

.brand-mark svg {
  width: 20px;
  height: 20px;
}

.brand-text b {
  color: var(--green);
  font-weight: 800;
}

.topbar-premium .nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: 0;
}

.topbar-premium .nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.topbar-premium .nav-links a {
  position: relative;
  min-height: 38px;
  border-radius: 10px;
  padding: 0 12px;
  color: var(--text-soft);
  font-size: var(--fs-sm);
  font-weight: 650;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.topbar-premium .nav-links a::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 4px;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-accent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.topbar-premium .nav-links a:hover,
.topbar-premium .nav-links a:focus-visible {
  background: rgba(var(--surface-rgb), 0.069);
  color: var(--text);
}

.topbar-premium .nav-links a[aria-current="page"] {
  background: rgba(11, 143, 90, 0.055);
  color: var(--green);
}

.topbar-premium .nav-links a[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

/* İkincil bağlantılar yalnızca mobil çekmecede: masaüstünde çubuğu şişirirdi. */
.topbar-premium .nav-links-secondary {
  display: none;
}

.topbar-premium .cta {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  padding: 0 14px;
  background: var(--grad-accent);
  color: #f4faf7;
  font-size: var(--fs-sm);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(13, 148, 136, 0.11);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.topbar-premium .cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(13, 148, 136, 0.16);
}

/* --- Arama kutusu ---------------------------------------------------------- */
.site-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: clamp(180px, 20vw, 260px);
  height: 38px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  padding: 0 10px 0 12px;
  background: rgba(var(--surface-rgb), 0.046);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), width var(--dur) var(--ease);
}

.site-search:focus-within {
  border-color: rgba(13, 148, 136, 0.25);
  background: rgba(var(--surface-rgb), 0.95);
}

.site-search-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--muted);
}

.site-search-icon svg,
.nav-search-toggle svg {
  width: 17px;
  height: 17px;
}

.site-search-input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  outline: none;
}

.site-search-input::placeholder {
  color: var(--muted);
}

.site-search-input::-webkit-search-cancel-button {
  display: none;
}

.site-search-clear {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--surface-rgb), 0.092);
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.site-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 70;
  width: min(360px, calc(100vw - 2 * var(--gutter)));
  max-height: min(60vh, 420px);
  overflow-y: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 6px;
  /* Neredeyse opak: yarı saydam panel mobil çekmecede alttaki bağlantıların
     üstüne biniyor ve iki metin üst üste okunuyordu. */
  background: rgba(var(--surface-rgb), 0.985);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-search-panel[hidden] {
  display: none;
}

.site-search-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--text);
  text-align: start;
}

.site-search-option:hover,
.site-search-option.is-active {
  background: rgba(13, 148, 136, 0.05);
}

.site-search-option i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: rgba(11, 143, 90, 0.066);
  color: var(--green);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.site-search-option strong {
  display: block;
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-search-option span {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.site-search-empty {
  padding: 12px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.nav-search-toggle {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: rgba(var(--surface-rgb), 0.046);
  color: var(--text-soft);
  cursor: pointer;
}

/* ----------------------------------------------------------------------------
   2. SON DAKİKA BANDI
   Sürekli akan, hover/odakta duran, tıklanabilir şerit. Sonsuzluk için içerik
   iki kez basılır ve şerit %50 kaydırılır - dikişsiz döngü.
   -------------------------------------------------------------------------- */
.news-ticker {
  position: relative;
  z-index: 40;
  border-bottom: 1px solid rgba(11, 143, 90, 0.042);
  background: linear-gradient(90deg, rgba(200, 30, 45, 0.06), rgba(246, 250, 248, 0.6) 22%, rgba(246, 250, 248, 0.6));
}

.news-ticker-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: 40px;
}

.news-ticker-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Rozet asla ezilmesin: dar ekranda ızgara onu daraltıp "Son Dakika"yı
     iki satıra bölüyordu ve bandın yüksekliği zıplıyordu. */
  flex: none;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  background: rgba(200, 30, 45, 0.096);
  color: var(--live);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.news-ticker-viewport {
  position: relative;
  overflow: hidden;
  min-width: 0;
  /* Kenarlarda sert kesim yerine yumuşak sönümleme. */
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.news-ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll var(--ticker-duration, 46s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.news-ticker:hover .news-ticker-track,
.news-ticker:focus-within .news-ticker-track {
  animation-play-state: paused;
}

.news-ticker-group {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-right: var(--sp-3);
}

.news-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--text-soft);
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

/* TAKIM ADI DİKEY KIRILMASIN.
   Şerit `width: max-content` olduğu için normalde sıkışma yok; ama bant dar
   bir kapsayıcıya ya da uzun bir başlığa denk geldiğinde satır içi kutular
   kırılabiliyor ve "Fenerbah- çe" gibi dikey bölünmüş adlar çıkıyordu.
   Kural öğenin İÇİNDEKİ kutulara da uygulanıyor; başlık tek satırda kalır. */
.news-ticker-item > * {
  white-space: nowrap;
  flex: 0 0 auto;
}

.news-ticker-item:hover {
  color: var(--green);
}

.news-ticker-tag {
  border-radius: 6px;
  padding: 2px 7px;
  background: rgba(11, 143, 90, 0.066);
  color: var(--green);
  font-size: var(--fs-xs);
  font-weight: 750;
}

/* ----------------------------------------------------------------------------
   RADAR YORUMU — KÖŞE YAZILARI
   Görsel dil bilerek haber kartlarından FARKLI: yorum ile haber karışmasın.
   Ayrımı taşıyan işaret "Yorum" rozeti; renk ve kenarlık onu destekler.
   -------------------------------------------------------------------------- */
.column-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.column-card {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--glass-border);
  /* Sol kenardaki kalın çizgi yorum bölümünün imzası. */
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius-lg);
  background: var(--glass);
  min-width: 0;
  overflow-wrap: anywhere;
}

.column-card-image {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  background: rgba(6, 132, 163, 0.08);
}

.column-card-image img,
.column-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.column-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* "Yorum" rozeti: okuyucunun bunun kanaat olduğunu anladığı yer. */
.column-badge {
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  background: rgba(6, 132, 163, 0.12);
  border: 1px solid rgba(6, 132, 163, 0.32);
  color: var(--cyan);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.column-category {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.column-card h3 {
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
}

.column-card p {
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.column-card-meta,
.column-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.column-author {
  color: var(--text-soft);
  font-weight: 800;
}

a.column-author:hover,
a.column-author:focus-visible {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.column-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  align-self: end;
  padding-top: 2px;
}

.column-card-detail {
  color: var(--green);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.column-card-detail:hover,
.column-card-detail:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.column-card-share-actions,
.column-share-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.column-card-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--glass-border);
  border-radius: 7px;
  background: rgba(var(--surface-rgb), 0.32);
  color: var(--text-soft);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.column-card-share:hover,
.column-card-share:focus-visible {
  border-color: rgba(11, 143, 90, 0.54);
  background: rgba(11, 143, 90, 0.1);
  color: var(--green);
  outline: 2px solid var(--green);
  outline-offset: 2px;
  transform: translateY(-1px);
}

.column-card-share-facebook,
.column-share-facebook .column-share-symbol {
  color: #4de5ff;
}

.column-card-share-x,
.column-share-x .column-share-symbol {
  color: var(--text);
}

.column-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.column-tag {
  border-radius: 6px;
  padding: 2px 8px;
  background: rgba(11, 143, 90, 0.066);
  color: var(--green);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.article-sources {
  display: grid;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--glass-border);
}

.article-sources h2 {
  font-size: var(--fs-base);
  font-weight: 800;
}

.article-sources ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.article-sources a {
  display: inline-flex;
  padding: 5px 9px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--cyan);
  font-size: var(--fs-xs);
  font-weight: 750;
}

.column-empty {
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-lg);
  color: var(--text-soft);
}

.column-empty h3 {
  margin-bottom: 6px;
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--text);
}

/* Yazı sayfası. Okunabilirlik için ölçü sınırlı. */
.column-article {
  max-width: 72ch;
  margin: 0 auto;
  display: grid;
  gap: var(--sp-4);
  padding: clamp(20px, 3vw, 34px) 0;
}

.column-article-head {
  display: grid;
  gap: var(--sp-2);
}

.column-article-head h1 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: 0;
}

.column-featured-image {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  background: rgba(6, 132, 163, 0.08);
}

.column-standfirst {
  color: var(--text-soft);
  font-size: var(--fs-lg);
  font-weight: 650;
  line-height: 1.55;
}

.column-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}

.column-share-label {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 750;
}

.column-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--glass-border);
  border-radius: 7px;
  background: rgba(var(--surface-rgb), 0.35);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.column-share-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  font-size: 1rem;
  font-weight: 900;
}

.column-share-button:hover,
.column-share-button:focus-visible {
  border-color: rgba(11, 143, 90, 0.6);
  background: rgba(11, 143, 90, 0.1);
  color: var(--green);
  outline: 2px solid var(--green);
  outline-offset: 2px;
  transform: translateY(-1px);
}

@media (max-width: 520px) {
  .column-share {
    align-items: stretch;
  }

  .column-share-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .column-share-button {
    min-width: 0;
    padding-inline: 10px;
  }
}

.column-author-hero {
  max-width: 72ch;
}

.column-author-summary {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 750;
}

/* Künye: yorumun haberden ayrıldığını SÖYLEYEN cümle. Göz ardı edilmesin
   diye gövdeden görsel olarak ayrılıyor. */
.column-disclaimer {
  padding: var(--sp-3);
  border-left: 3px solid var(--cyan);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: rgba(6, 132, 163, 0.06);
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.article-update-note {
  display: grid;
  gap: 6px;
  padding: var(--sp-3);
  border-left: 3px solid var(--green);
  border-radius: 0 6px 6px 0;
  background: var(--green-tint);
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.article-update-note strong {
  color: var(--green-deep);
  font-size: var(--fs-base);
}

.article-update-note p {
  margin: 0;
}

.column-body {
  display: grid;
  gap: var(--sp-3);
}

.column-body p {
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.7;
}

/* Yazı içi ara başlıklar ("## " öneki ile girilen bölümler). Grid boşluğuna
   ek olarak üstte nefes payı bırakılır ki bölümler paragraf akışından
   ayrışsın; mobilde de aynı oran korunur. */
.column-body h2 {
  margin-top: var(--sp-3);
  font-size: var(--fs-lg);
  line-height: 1.35;
  color: var(--text);
}

.column-body h2:first-child {
  margin-top: 0;
}

.column-back {
  padding-bottom: var(--sp-5);
}

/* ----------------------------------------------------------------------------
   MAÇ SONU RAPORU — BEŞ BÖLÜMLÜK OMURGA
   Mobilde tek sütun, geniş ekranda iki. `auto-fit` + `minmax` kullanılıyor ki
   ara genişliklerde de kırılmasın; sabit sütun sayısı 360-420px arasında
   taşmaya yol açıyordu.
   -------------------------------------------------------------------------- */
.core-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.core-section {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass);
  /* Uzun takım/oyuncu adları dar ekranda kutudan taşmasın. */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Boş bölüm gizlenmiyor ama öne de çıkmıyor: dürüst, sessiz. */
.core-section.is-empty {
  background: transparent;
  border-style: dashed;
}

.core-section-head {
  display: grid;
  gap: 2px;
}

.core-section-head h3 {
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.core-section-question {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.core-section p {
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.core-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.1em;
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.core-list li {
  list-style: disc;
}

.core-empty {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.core-empty b {
  color: var(--text-soft);
  font-weight: 800;
}

/* Alıntı: metin olduğu gibi, kaynağı görünür. */
.core-quote {
  display: grid;
  gap: 6px;
  margin: 0;
}

.core-quote blockquote {
  margin: 0;
  padding-left: var(--sp-3);
  border-left: 3px solid var(--green);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.55;
  font-style: italic;
}

.core-quote figcaption {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* GÜVEN ROZETİ — kesinleşmemiş bilgiye görsel çekince.
   Kategori etiketinden (yeşil, nötr) belirgin biçimde ayrışmalı ki okuyucu
   iki rozeti karıştırmasın: biri konuyu, diğeri güvenilirliği söylüyor. */
.news-ticker-confidence {
  border-radius: 6px;
  padding: 2px 7px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Söylenti: en güçlü çekince. Kırmızıya yakın uyarı tonu. */
.news-ticker-confidence.is-rumour {
  border: 1px solid rgba(200, 30, 45, 0.34);
  background: rgba(200, 30, 45, 0.09);
  color: var(--live);
}

/* Basında yer aldı: doğrulanmamış ama kaynaklı. Daha yumuşak, amber. */
.news-ticker-confidence.is-reported {
  border: 1px solid rgba(176, 116, 12, 0.34);
  background: rgba(176, 116, 12, 0.1);
  color: #8a5c06;
}

@media (prefers-color-scheme: dark) {
  .news-ticker-confidence.is-reported { color: #e0a83a; }
}

:root[data-theme="dark"] .news-ticker-confidence.is-reported { color: #e0a83a; }
:root[data-theme="light"] .news-ticker-confidence.is-reported { color: #8a5c06; }

.news-ticker-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(91, 107, 101, 0.35);
}

.news-ticker-all {
  color: var(--cyan);
  font-size: var(--fs-xs);
  font-weight: 750;
  white-space: nowrap;
}

@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ----------------------------------------------------------------------------
   3. SAYFA GİRİŞ GEÇİŞLERİ
   Sayfa açılışında içerik sert biçimde "zıplıyordu". Bölümler görünüm alanına
   girerken kısa bir yükselme animasyonu ile belirir; hareket azaltma tercihi
   olan kullanıcılar için tamamen kapatılır.
   -------------------------------------------------------------------------- */
main > * {
  animation: fr-rise 420ms var(--ease) both;
}

/* `hidden` bölümlerde animasyon çalışmaz (display:none), ama fill-mode "both"
   başlangıç karesini yine de uygular: JS bölümü gösterdiğinde öğe opacity 0'da
   kilitli kalıyor ve bölüm hiç görünmüyordu. Gizliyken animasyon kapatılır;
   öznitelik kaldırıldığında kural eşleşmeyi bırakır ve giriş animasyonu
   baştan, doğru şekilde çalışır. */
main > *[hidden] {
  animation: none;
}

main > *:nth-child(2) { animation-delay: 40ms; }
main > *:nth-child(3) { animation-delay: 80ms; }
main > *:nth-child(4) { animation-delay: 120ms; }
main > *:nth-child(n + 5) { animation-delay: 160ms; }

/* Giriş animasyonu yalnızca hareket taşır, opaklık taşımaz.
   Opaklık animasyonu ile fill-mode "both" birleşince, başlangıçta gizli olan
   (JS'in sonradan gösterdiği) bir bölüm opacity 0 karesinde kilitleniyor ve
   sayfada hiç görünmüyordu. Hareket aynı zarifliği veriyor, görünmezlik
   riski taşımıyor. */
@keyframes fr-rise {
  from { transform: translate3d(0, 12px, 0); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  main > *,
  .news-ticker-track {
    animation: none !important;
  }

  /* HAREKETİ KAPATMAK İÇERİĞİ GİZLEMEK DEĞİLDİR.
     Animasyon durunca şerit (`width: max-content`) taşma gizlenen bir
     pencerede duruyordu: ilk iki başlıktan sonrasına ulaşmanın hiçbir yolu
     kalmıyordu. Hareket tercihi kapalıysa bant elle kaydırılabilir bir
     şeride dönüşür; klavye kullanıcısı için de odaklanılabilir kalır. */
  .news-ticker-viewport {
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  /* İkinci kopya yalnızca kesintisiz DÖNGÜ için basılıyor; döngü yokken
     aynı başlıkları ikinci kez kaydırmak gereksiz mesafe demek. */
  .news-ticker-track > .news-ticker-group[aria-hidden="true"] {
    display: none;
  }
}

/* ----------------------------------------------------------------------------
   4. HERO - GÜNÜN ÖNE ÇIKAN MAÇI
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(28px, 5vw, 56px) 0 clamp(20px, 3vw, 32px);
}

.home-page .hero::before {
  content: "";
  position: absolute;
  inset: -40% 0 auto;
  z-index: -1;
  height: 620px;
  background: var(--grad-hero);
  pointer-events: none;
}

.hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* Değer önermesi: başlıktan hemen sonra gelen tek cümle. Gövde metninden
   ayrılsın diye daha büyük ve tam kontrastta; başlıkla yarışmasın diye
   ondan belirgin biçimde küçük. */
.hero-value-prop {
  max-width: 42ch;
  margin-top: var(--sp-3);
  color: var(--text);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.hero-copy {
  max-width: 46ch;
  color: var(--text-soft);
  font-size: var(--fs-md);
}

/* ----------------------------------------------------------------------------
   GÜNÜN ÜÇ BAŞLIĞI
   Sıralı, tıklanabilir üç satır. Numara sırayı görünür kılar: bunlar eşit
   ağırlıkta kartlar değil, önem sırasına dizilmiş başlıklardır.
   -------------------------------------------------------------------------- */
.daily-headlines {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.daily-headline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: clamp(14px, 1.8vw, 18px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.daily-headline:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

.daily-headline-index {
  font-size: var(--fs-lg);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--muted);
}

.daily-headline.is-live .daily-headline-index {
  color: var(--live);
}

.daily-headline-body {
  display: grid;
  gap: 6px;
}

.daily-headline-kicker {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.daily-headline.is-live .daily-headline-kicker {
  color: var(--live);
}

.daily-headline-title {
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.daily-headline-score {
  color: var(--text-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Kanca: tıklama sebebi. Uzun analiz cümleleri satırı şişirmesin diye
   üç satırda kesiliyor. */
.daily-headline-hook {
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----------------------------------------------------------------------------
   PAYLAŞIM BLOĞU
   Metin ekranda göründüğü gibi kopyalanır; kutuda gösterilmeyen bir cümle
   panoya yazılmaz.
   -------------------------------------------------------------------------- */
.share-block {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: clamp(14px, 1.8vw, 18px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass);
}

.share-block-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  justify-content: space-between;
}

.share-block-title {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.share-block-text {
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.share-copy {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm, 10px);
  padding: 6px 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.share-copy:hover {
  border-color: var(--line-strong);
}

.share-copy[data-copied="true"] {
  color: var(--live);
  border-color: var(--live);
}

.share-targets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.share-target {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm, 10px);
  padding: 6px 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  transition: border-color var(--dur) var(--ease);
}

.share-target:hover {
  border-color: var(--line-strong);
}

/* Öne çıkan maç paneli: büyük skor/saat, takım logoları, hızlı istatistikler. */
.featured-fixture {
  display: grid;
  gap: var(--sp-4);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: clamp(16px, 2.4vw, 24px);
  background: var(--grad-surface);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.featured-fixture-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.featured-fixture-league {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
}

.featured-fixture-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
}

.featured-fixture-team {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.featured-fixture-team img,
.featured-fixture-team .team-logo-fallback,
.featured-fixture-team .fixture-row-fallback {
  width: clamp(48px, 7vw, 64px);
  height: clamp(48px, 7vw, 64px);
  border-radius: 18px;
  font-size: clamp(1rem, 2vw, 1.35rem);
  object-fit: contain;
}

.featured-fixture-team strong {
  font-size: var(--fs-md);
  font-weight: 750;
  line-height: 1.2;
}

.featured-fixture-score {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 108px;
}

.featured-fixture-score b {
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.featured-fixture-score span {
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  background: rgba(var(--surface-rgb), 0.081);
  color: var(--text-soft);
  font-size: var(--fs-xs);
  font-weight: 750;
}

.featured-fixture.is-live .featured-fixture-score span {
  background: rgba(200, 30, 45, 0.096);
  color: var(--live);
}

/* --- Hero karuseli ----------------------------------------------------------
   Kart tasarımı değişmedi: her slayt aynı `.featured-fixture` panosunu taşır.
   Karusel yalnızca bir kap, gezinme ve "aktif slayt" durumu ekler. Slaytlar
   üst üste bindirilmez, aktif olmayan slayt `hidden` ile listeden düşer;
   böylece kabın yüksekliği her zaman görünen kartın yüksekliğidir ve düzen
   kart değişince zıplamaz. */
.featured-carousel {
  display: grid;
  gap: var(--sp-3);
  min-width: 0;
}

.featured-carousel-viewport {
  min-width: 0;
}

.featured-carousel-slide[hidden] {
  display: none;
}

.featured-carousel-slide.is-active {
  animation: featured-slide-in 320ms ease-out both;
}

@keyframes featured-slide-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.featured-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}

.featured-carousel-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  padding: 0;
  background: rgba(var(--surface-rgb), 0.081);
  color: var(--text-soft);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.featured-carousel-arrow:hover,
.featured-carousel-arrow:focus-visible {
  border-color: var(--accent);
  background: rgba(var(--surface-rgb), 0.16);
  color: var(--text);
}

.featured-carousel-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Nokta görsel olarak küçük ama dokunma hedefi 24 pikselden küçük olmamalı;
   bu yüzden düğme şeffaf bir dolguyla büyütülüp içindeki span boyanıyor. */
.featured-carousel-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

/* Pasif nokta rengi `--text-soft` üzerinden kurulur: yüzey rengiyle
   (`--surface-rgb`) kurulduğunda açık temada beyaz üstüne beyaz düşüyor ve
   yalnızca aktif nokta görünüyordu. `--text-soft` iki temada da zemine
   karşıt olduğu için nokta her koşulda okunur. */
.featured-carousel-dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-soft);
  opacity: 0.32;
  transition: background 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.featured-carousel-dot:hover span,
.featured-carousel-dot:focus-visible span {
  opacity: 0.7;
}

.featured-carousel-dot.is-active span {
  background: var(--accent);
  opacity: 1;
  transform: scale(1.35);
}

/* Hareket azaltma tercihi: otomatik dönüş JS tarafında zaten kapanıyor,
   geçiş animasyonu da burada kapatılır. */
@media (prefers-reduced-motion: reduce) {
  .featured-carousel-slide.is-active {
    animation: none;
  }

  .featured-carousel-dot span {
    transition: none;
  }
}

/* --- Maç sonrası analiz kartları ---------------------------------------------
   Analiz sayfası ve maç detay sayfası aynı kartı kullanır; kaynak build
   sırasında bir kez üretilen data/post-match-reports.json. */
.post-match-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--sp-4);
}

.post-match-card {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: clamp(14px, 2vw, 20px);
  background: var(--grad-surface);
  box-shadow: var(--shadow-md, var(--shadow-lg));
  min-width: 0;
}

/* Türk takımı maçı: sıralamada önde geldiği gibi görsel olarak da işaretli. */
.post-match-card.is-turkish {
  border-left: 3px solid var(--accent);
}

.post-match-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.post-match-meta {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.post-match-finish {
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  background: rgba(200, 30, 45, 0.096);
  color: var(--live);
  font-size: var(--fs-xs);
  font-weight: 750;
}

.post-match-score {
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.25;
}

.post-match-card h3 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 750;
  line-height: 1.35;
}

.post-match-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.post-match-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.post-match-moments ul,
.post-match-players ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-match-moments li,
.post-match-players li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.post-match-moments li b,
.post-match-players li b {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.post-match-moments li span,
.post-match-players li span {
  color: var(--text-soft);
}

.post-match-moments li.is-pivotal b {
  color: var(--accent);
}

.post-match-late p {
  margin: 0;
}

/* Sağlayıcının vermediği alanlar. Bilinçli olarak görünür: eksik veri
   gizlenirse okuyucu ölçüm yapılmış sanır. */
.post-match-missing {
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(var(--surface-rgb), 0.081);
  color: var(--text-soft);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.post-match-missing strong {
  display: block;
  color: var(--text);
}

.post-match-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--glass-border);
}

.post-match-coverage,
.post-match-note {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* Hero altındaki hızlı istatistik kartları. */
.quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.quick-stat {
  display: grid;
  gap: 4px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  background: var(--glass);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.quick-stat:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

.quick-stat span {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.quick-stat b {
  font-size: var(--fs-xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.quick-stat.is-live b {
  color: var(--live);
}

/* ----------------------------------------------------------------------------
   5. MAÇ KARTLARI
   Eski kart yalnızca metin listesiydi. Yeni kart: lig satırı, takım logoları,
   skor/saat, form yüzdesi, tahmini kazanma oranı ve analiz düğmesi.
   -------------------------------------------------------------------------- */
/* KOMPAKT MAÇ KARTI.
   Boşluklar ve dolgu bir basamak daraltıldı; logo (26px) ve skor tipografisi
   (--fs-md, 800) BİLEREK dokunulmadı — kartın okunur kalması bu iki öğeye
   bağlı. Kazanılan yükseklik ~24px, yani beş sütunlu ızgarada iki satır
   yerine iki buçuk satırda on iki maç. */
.fixture-card {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 12px;
  background: var(--glass);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.fixture-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}

.fixture-card.is-live {
  border-color: rgba(200, 30, 45, 0.216);
}

.fixture-card.is-live::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--live), rgba(200, 30, 45, 0.0));
}

.fixture-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.fixture-card-league {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  color: var(--text-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fixture-card-league img {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
}

.fixture-card-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  background: rgba(var(--surface-rgb), 0.069);
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

.fixture-card-state.is-live {
  background: rgba(200, 30, 45, 0.096);
  color: var(--live);
}

.fixture-card-state.is-final {
  background: rgba(11, 143, 90, 0.066);
  color: var(--green);
}

.fixture-card-rows {
  display: grid;
  gap: 6px;
}

/* Logo sütunu 26px'te sabit: takım rozetleri bundan küçükte tanınmaz hâle
   geliyor ve kartın ilk okunan öğesi o. */
.fixture-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.fixture-row img,
.fixture-row .fixture-row-fallback {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.fixture-row-fallback {
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(var(--surface-rgb), 0.092);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 800;
}

.fixture-row-name {
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fixture-row.is-winner .fixture-row-name {
  color: var(--text);
  font-weight: 800;
}

.fixture-row-score {
  font-size: var(--fs-md);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Form yüzdesi ve tahmini kazanma oranı. */
.fixture-card-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  border-top: 1px solid rgba(14, 26, 22, 0.069);
  padding-top: 8px;
}

.fixture-metric {
  display: grid;
  gap: 4px;
}

.fixture-metric span {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.fixture-metric b {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.fixture-bar {
  display: flex;
  height: 5px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(var(--surface-rgb), 0.092);
}

.fixture-bar i {
  display: block;
  height: 100%;
}

.fixture-bar i:nth-child(1) { background: var(--green); }
.fixture-bar i:nth-child(2) { background: rgba(91, 107, 101, 0.385); }
.fixture-bar i:nth-child(3) { background: var(--cyan); }

.fixture-card-action {
  display: inline-flex;
  min-height: var(--tap);
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(13, 148, 136, 0.16);
  border-radius: 10px;
  padding: 0 14px;
  color: var(--cyan);
  font-size: var(--fs-sm);
  font-weight: 750;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.fixture-card-action:hover {
  background: rgba(13, 148, 136, 0.06);
}

/* Masaüstünde eylem düğmesi bir basamak alçak. `--tap` (40px) dokunmatik
   hedef alt sınırı; fare kullanılan genişliklerde o sınır geçerli değil ve
   40px kartın yüksekliğinin altıda birini yiyordu. Dokunmatik genişliklerde
   kural hiç uygulanmaz. */
@media (min-width: 761px) {
  .fixture-card-action {
    min-height: 34px;
  }
}

/* ----------------------------------------------------------------------------
   MAÇ LİSTESİ PENCERESİ — "Daha Fazla Göster"
   Liste on iki kartta kesilir; gerisi DOM'da durur ama gizlidir. Silmek
   yerine gizlemek bilinçli: buton basıldığında yeniden çizim gerekmez ve
   o sırada gelen canlı skorla yarışılmaz.
   -------------------------------------------------------------------------- */

/* `[hidden]` tek başına yetmiyor: kartlar `display: grid` taşıyor ve bu
   tarayıcının `[hidden] { display: none }` varsayılanını geçersiz kılıyor. */
.fixture-card[hidden],
.live-score-card[hidden] {
  display: none;
}

/* Buton ızgaranın içinde duruyor (çizim hedefi ızgaranın kendisi); satırın
   tamamını kaplamazsa bir kart hücresine sıkışıp kart gibi görünür. */
.match-more-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding-top: var(--sp-2);
}

.match-more {
  display: inline-flex;
  min-height: var(--tap);
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 0 var(--sp-5);
  background: var(--surface);
  color: var(--green);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 750;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.match-more:hover {
  border-color: var(--green);
  background: var(--green-tint);
}

.match-more:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   6. YATAY KAYDIRMALI ŞERİTLER (trend oyuncular / takımlar)
   Izgara yerine şerit: mobilde dikeyde 6 kart taramak yerine yatayda kaydırma.
   -------------------------------------------------------------------------- */
.slider-shell {
  position: relative;
}

.slider-rail {
  display: grid;
  grid-auto-columns: minmax(232px, 264px);
  grid-auto-flow: column;
  gap: var(--sp-3);
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.slider-rail > * {
  scroll-snap-align: start;
}

.slider-rail::-webkit-scrollbar {
  height: 6px;
}

.slider-rail::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: rgba(11, 143, 90, 0.092);
}

.slider-nav {
  display: inline-flex;
  gap: 6px;
}

.slider-nav button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: rgba(var(--surface-rgb), 0.057);
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.slider-nav button:hover:not(:disabled) {
  background: rgba(13, 148, 136, 0.07);
  color: var(--cyan);
}

.slider-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}

.trend-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 14px;
  background: var(--glass);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.trend-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
}

.trend-card-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.trend-card-head img,
.trend-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: contain;
}

.trend-card-avatar {
  display: grid;
  place-items: center;
  background: var(--grad-accent);
  color: #f4faf7;
  font-size: 13px;
  font-weight: 850;
}

.trend-card-head strong {
  display: block;
  overflow: hidden;
  font-size: var(--fs-base);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trend-card-head span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trend-card-score {
  border-radius: 10px;
  padding: 5px 9px;
  background: rgba(11, 143, 90, 0.066);
  color: var(--green);
  font-size: var(--fs-md);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.trend-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.trend-card-stats div {
  border-radius: 9px;
  padding: 7px 8px;
  background: rgba(var(--surface-rgb), 0.046);
  text-align: center;
}

.trend-card-stats dt {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.trend-card-stats dd {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------
   7. LİG BÖLÜMLERİ
   -------------------------------------------------------------------------- */
.league-block {
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: clamp(14px, 2vw, 20px);
  background: rgba(var(--surface-rgb), 0.5);
}

.league-block + .league-block {
  margin-top: var(--sp-4);
}

.league-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.league-block-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: var(--fs-md);
  font-weight: 800;
}

.league-block-title img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.league-block-count {
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  background: rgba(var(--surface-rgb), 0.081);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 750;
}

/* ----------------------------------------------------------------------------
   8. BÖLÜM BAŞLIKLARI VE KARTLARIN ORTAK YÜZEYİ
   -------------------------------------------------------------------------- */
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cyan);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-head h2 {
  margin: 6px 0 0;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.card,
.news-card,
.player-detail-card,
.static-match-card,
.home-score-card {
  border-radius: var(--radius-lg);
  background: var(--glass);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card:hover,
.news-card:hover,
.player-detail-card:hover,
.home-score-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}

.button.primary {
  border: 0;
  background: var(--grad-accent);
  color: #f4faf7;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(13, 148, 136, 0.11);
}

.button.primary:hover {
  transform: translateY(-1px);
}

/* ----------------------------------------------------------------------------
   9. PROFESYONEL ALT BİLGİ
   -------------------------------------------------------------------------- */
.footer-premium {
  margin-top: clamp(32px, 5vw, 64px);
  border-top: 1px solid var(--glass-border);
  padding: clamp(28px, 4vw, 48px) 0 24px;
  background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.5), rgba(var(--surface-rgb), 0.9));
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(140px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.footer-brand .brand {
  font-size: var(--fs-md);
  font-weight: 800;
}

.footer-brand p {
  max-width: 44ch;
  margin: 12px 0 16px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

.footer-social {
  display: flex;
  gap: 8px;
}

.footer-social a {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  background: rgba(var(--surface-rgb), 0.046);
  color: var(--text-soft);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.footer-social a:hover {
  transform: translateY(-2px);
  background: rgba(11, 143, 90, 0.066);
  color: var(--green);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

.footer-col h2 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-col-links {
  display: grid;
  gap: 2px;
}

.footer-col-links a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: var(--fs-sm);
  transition: color var(--dur) var(--ease);
}

.footer-col-links a:hover {
  color: var(--green);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: clamp(20px, 3vw, 32px);
  padding-top: 18px;
  border-top: 1px solid rgba(14, 26, 22, 0.069);
  color: var(--muted);
  font-size: var(--fs-xs);
}

.footer-bottom .footer-links {
  display: inline-flex;
  gap: 14px;
}

/* ----------------------------------------------------------------------------
   10. MOBİL
   Öncelik: taşma yok, 44px dokunma hedefi, çekmece menü sorunsuz.
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .topbar-premium .nav-links a {
    padding: 0 9px;
    font-size: var(--fs-xs);
  }

  .site-search {
    width: clamp(150px, 16vw, 200px);
  }
}

@media (max-width: 1180px) {
  .topbar-premium .nav {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--sp-2);
    min-height: 58px;
    padding-block: 0;
  }

  .topbar-premium .nav-toggle {
    display: inline-grid !important;
    position: static;
    grid-column: 3;
    grid-row: 1;
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .topbar-premium .nav-search-toggle {
    display: inline-grid;
    grid-column: 2;
    grid-row: 1;
  }

  /* Arama, çekmece açıldığında menünün üstünde belirir: mobilde çubuğa
     sığdırmak taşmaya yol açıyordu. */
  .topbar-premium .site-search {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 42px;
    margin-bottom: 10px;
  }

  .topbar-premium .nav.is-open .site-search {
    display: flex;
  }

  .topbar-premium .site-search-panel {
    right: 0;
    left: 0;
    width: auto;
  }

  .topbar-premium .nav-menu {
    display: none;
    grid-column: 1 / -1;
    grid-row: 3;
    /* Masaüstünde `.nav-menu` bir flex satırı ve ortalanmış; ızgaraya
       dönüşünce `justify-content: center` sütun izini içeriğe göre daraltıp
       bağlantıları ortaya itiyordu. Çekmecede tam genişlik gerekir. */
    justify-content: stretch;
    justify-items: stretch;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: none;
    margin-bottom: 12px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 10px;
    background: var(--glass-strong);
    box-shadow: var(--shadow-lg);
  }

  .topbar-premium .nav.is-open .nav-menu {
    display: grid;
    gap: 6px;
    animation: fr-rise 260ms var(--ease) both;
  }

  .topbar-premium .nav-links,
  .topbar-premium .nav-links-secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  .topbar-premium .nav-links-secondary {
    border-top: 1px solid rgba(14, 26, 22, 0.081);
    padding-top: 6px;
  }

  .topbar-premium .nav-links a {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    padding: 0 12px;
    font-size: var(--fs-sm);
    white-space: normal;
  }

  .topbar-premium .cta {
    width: 100%;
    min-height: 44px;
    margin-top: 2px;
  }

  .featured-fixture-board {
    gap: var(--sp-2);
  }
}

@media (max-width: 760px) {
  .news-ticker-all {
    display: none;
  }

  .news-ticker-inner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .fixture-card-meta {
    grid-template-columns: 1fr;
  }

  .slider-rail {
    grid-auto-columns: minmax(210px, 74vw);
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .topbar-premium .brand-text {
    font-size: var(--fs-base);
  }

  .topbar-premium .nav-links {
    grid-template-columns: 1fr;
  }

  /* İkincil bağlantılar iki sütunda kalır; tek sütunda çekmece 12 satıra
     çıkıp ekranı aşıyordu. */
  .topbar-premium .nav-links-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar-premium .nav-links-secondary a {
    font-size: var(--fs-xs);
  }

  /* Skor tablosu dar ekranda da satır düzenini korur: ev sahibi | skor |
     deplasman. Alt alta yığmak "15:00 / Göztepe / Rudeš" gibi okunuyordu. */
  .featured-fixture-board {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--sp-2);
  }

  .featured-fixture-team img,
  .featured-fixture-team .team-logo-fallback,
  .featured-fixture-team .fixture-row-fallback {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 0.95rem;
  }

  .featured-fixture-team strong {
    font-size: var(--fs-sm);
  }

  .featured-fixture-score {
    min-width: 86px;
  }

  .featured-fixture-score b {
    font-size: 1.75rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Taşma güvenliği: uzun takım adları ve tablolar sayfayı yana kaydırmasın. */
img,
svg,
video,
table {
  max-width: 100%;
}

.table-scroll,
.standings-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Bölüm başlığı yan eylemleri (şerit okları + "tümü" bağlantısı) ------- */
.section-head-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}

@media (max-width: 760px) {
  /* Mobilde ok düğmeleri gereksiz: parmakla kaydırma zaten var. */
  .slider-nav {
    display: none;
  }
}

/* --- Hero'daki öne çıkan maç kabı -------------------------------------------
   Eskiden `.glass-card.match-card` idi: kartın içinde ikinci bir kart
   çiziliyor, çift kenarlık ve çift dolgu oluşuyordu. Artık şeffaf bir kap. */
.hero-featured {
  display: grid;
  gap: var(--sp-3);
  min-width: 0;
}

/* Hero'daki hızlı istatistikler dört sütuna sığmalı ama daralınca ikiye insin. */
.hero-featured .quick-stats {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-top: 0;
}

/* Trend şeritlerindeki form noktaları kart genişliğini zorlamasın. */
.trend-card .form-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.trend-card .form-dot {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-size: var(--fs-xs);
  font-weight: 800;
}

/* ----------------------------------------------------------------------------
   11. HERO DENGESİ VE IZGARA DÜZELTMELERİ
   Bu bloktaki seçiciler bilinçli olarak kimlik (#) taşır: ana sayfa hero'su
   dosyanın ortasında `.home-page #hero-canli-skor …` kurallarıyla tanımlı ve
   sınıf tabanlı bir kural onları geçemiyor. Aynı özgüllükte, dosyanın sonunda
   yazmak tek güvenli yol.
   -------------------------------------------------------------------------- */

/* Başlık 436 piksellik sütunda 77 piksel puntoyla üç satıra bölünüyordu.
   Ölçek viewport ile orantılı hale getirildi. */
.home-page #hero-canli-skor h1 {
  margin: 14px 0 16px;
  font-size: clamp(2.1rem, 3.6vw, 3.35rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  overflow-wrap: normal;
}

/* Sağdaki maç panosu içeriği sütunu zorlamasın; iki sütun da sıfıra kadar
   daralabilsin. Aksi halde uzun takım adları soldaki metni eziyordu. */
.home-page #hero-canli-skor {
  grid-template-columns: minmax(320px, 0.88fr) minmax(420px, 1.12fr);
  align-items: center;
}

.hero > *,
.hero-featured > *,
.featured-fixture > * {
  min-width: 0;
}

/* Tek maç olduğunda kart tüm satırı kaplayıp devasa görünüyordu.
   `auto-fill` boş sütunları korur, kart normal genişliğinde kalır.

   MAÇ IZGARALARI DAHA SIK. 260px'lik taban 1440px'te dört sütun veriyordu;
   başlangıç penceresi on iki karta çıkınca bu üç satır demekti. 228px beş
   sütun veriyor ve kart hâlâ ~238px — takım adı, logo ve skor için yeterli.
   Mobilde (≤430px) 228+12 tek sütundan fazlasına yetmediği için düzen
   kendiliğinden tek sütunda kalır; okunabilirlik değişmez.

   Haber ve oyuncu ızgaraları eski tabanında bırakıldı: onların kartları
   metin ağırlıklı ve 228px'te satır sonu bozuluyor. */
.players-grid,
.news-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.matches-grid,
.league-match-grid {
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
}

/* Şerit kartları biraz daha geniş: oyuncu kartı yoğun bir bileşen. */
.slider-rail {
  grid-auto-columns: minmax(248px, 288px);
}

@media (max-width: 900px) {
  .home-page #hero-canli-skor {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ----------------------------------------------------------------------------
   12. ÖZET KUTUCUKLARI
   `.stats-match-grid` üç sütunlu `.grid` bölümünün tek hücresine düşüyordu:
   altı kutucuk 74 piksellik sütunlara sıkışıp metinleri üst üste biniyordu.
   Tam satırı kaplar ve kutucuk sayısına uyum sağlar.
   -------------------------------------------------------------------------- */
.grid > .stats-match-grid,
.grid > .stats-coverage-grid {
  grid-column: 1 / -1;
}

.stats-match-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
}

.stats-match-grid article {
  display: grid;
  align-content: start;
  gap: 6px;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.stats-match-grid article strong {
  color: var(--green);
  font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

/* ----------------------------------------------------------------------------
   13. ALT SAYFA HERO'SU
   `.hero` genel olarak iki sütunlu ızgaraydı; ancak yalnızca ana sayfada iki
   çocuk var. Alt sayfalarda tek çocuk sol sütuna sıkışıyor, başlık gereksiz
   yere sarıyor ve sağdaki "son kontrol" rozeti sayfanın ortasında kalıyordu.
   Tek sütun taban, iki çocuk varsa iki sütun.
   -------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}

.hero:has(> * + *) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

.hero-row {
  align-items: center;
}

/* Lig kısayolları yatayda kayar; kesik kenar yerine yumuşak sönümleme ve
   dokunmatik kaydırma. */
.competition-chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
}

.competition-chip-row::-webkit-scrollbar {
  display: none;
}

.competition-chip-row a {
  flex: 0 0 auto;
}

/* ----------------------------------------------------------------------------
   14. LİG İŞARETİ
   Veri sağlayıcı lig amblemi vermiyor. Amblem uydurmak yerine turnuvanın baş
   harflerinden kararlı bir rozet üretilir: aynı lig her sayfada aynı kısaltma
   ve aynı renk tonuyla görünür, kart üstünde logo boşluğu kalmaz.
   -------------------------------------------------------------------------- */
.league-mark {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0;
}

.league-mark-0 { background: rgba(11, 143, 90, 0.088); color: var(--green); }
.league-mark-1 { background: rgba(13, 148, 136, 0.08); color: var(--cyan); }
.league-mark-2 { background: rgba(176, 116, 16, 0.096); color: var(--warn); }
.league-mark-3 { background: rgba(200, 30, 45, 0.096); color: var(--live); }
.league-mark-4 { background: rgba(91, 107, 101, 0.098); color: var(--text-soft); }

.featured-fixture-league .league-mark {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

/* ══════════════════════════════════════════════════════════════════════════
   MAÇ MERKEZİ — premium maç detayı
   Bölümler (md-*) maçın doğrulanmış kaydından türer. Veri yoksa .md-empty
   basılır; kart hiçbir koşulda üretilmiş değer göstermez.
   ══════════════════════════════════════════════════════════════════════════ */

.md-shell {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-5);
}

/* --- skor tabelası --- */
.md-scoreboard {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(13, 148, 136, 0.06), transparent 60%),
    var(--surface-raised);
}

.md-scoreboard.is-live {
  border-color: rgba(200, 30, 45, 0.27);
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(200, 30, 45, 0.096), transparent 60%),
    var(--surface-raised);
}

.md-scoreboard-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
}

.md-competition {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.md-competition em {
  font-style: normal;
  color: var(--muted);
}

.md-state {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  white-space: nowrap;
}

.md-state.is-live {
  border-color: rgba(200, 30, 45, 0.3);
  color: var(--live);
}

.md-state.is-final {
  border-color: var(--line-strong);
  color: var(--green);
}

.md-scoreboard-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-3);
  align-items: center;
}

.md-side {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  text-align: center;
  min-width: 0;
}

.md-side-badge img,
.md-side-badge .team-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.md-side-name {
  font-size: var(--fs-md);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.md-side.is-winner .md-side-name { color: var(--green); }

.md-side-role {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.md-score-core {
  display: grid;
  justify-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-3);
}

.md-score {
  font-size: clamp(2.2rem, 8vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.md-score-sub,
.md-score-status {
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
}

/* --- künye --- */
.md-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-2);
  margin: 0;
}

.md-facts > div {
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.md-facts dt {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: 2px;
}

.md-facts dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.md-lead {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-soft);
}

/* --- bölüm iskeleti --- */
.md-section {
  display: grid;
  gap: var(--sp-4);
}

.md-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}

.md-section-head h2 {
  margin: 0;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
}

.md-section-head span {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.md-empty {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.md-empty svg {
  width: 26px;
  height: 26px;
  color: var(--muted);
}

.md-empty strong { font-size: var(--fs-base); }

.md-empty span {
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: 46ch;
}

/* --- maç akışı --- */
.md-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.md-ev {
  display: grid;
  grid-template-columns: 46px 32px 1fr;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.md-ev-min {
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}

.md-ev-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(91, 107, 101, 0.084);
  color: var(--text-soft);
}

.md-ev-icon { width: 18px; height: 18px; }

.md-ev-body { display: grid; gap: 2px; min-width: 0; }

.md-ev-body b {
  font-size: var(--fs-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: baseline;
}

.md-ev-body em {
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.md-ev-body > span {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.5;
}

.md-ev-goal,
.md-ev-penalty { border-left-color: var(--green); }
.md-ev-goal .md-ev-mark,
.md-ev-penalty .md-ev-mark {
  background: rgba(11, 143, 90, 0.088);
  color: var(--green);
}

.md-ev-red,
.md-ev-own-goal { border-left-color: var(--live); }
.md-ev-red .md-ev-mark,
.md-ev-own-goal .md-ev-mark {
  background: rgba(200, 30, 45, 0.108);
  color: var(--live);
}

.md-ev-yellow { border-left-color: var(--warn); }
.md-ev-yellow .md-ev-mark {
  background: rgba(176, 116, 16, 0.108);
  color: var(--warn);
}

.md-ev-var,
.md-ev-sub { border-left-color: var(--cyan); }
.md-ev-var .md-ev-mark,
.md-ev-sub .md-ev-mark {
  background: rgba(13, 148, 136, 0.08);
  color: var(--cyan);
}

/* --- kadrolar --- */
.md-lineup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-4);
}

.md-lineup {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.md-lineup-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  justify-content: space-between;
}

.md-lineup-head strong { font-size: var(--fs-md); }

.md-formation {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  background: rgba(13, 148, 136, 0.07);
  color: var(--cyan);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.md-coach {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.md-coach b { color: var(--text-soft); }

.md-lineup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  counter-reset: md-player;
}

.md-lineup-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  background: rgba(var(--surface-rgb), 0.023);
}

.md-lineup-list li::before {
  counter-increment: md-player;
  content: counter(md-player);
  min-width: 18px;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.md-lineup-list li > span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.md-mark {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.md-mark.is-goal { background: rgba(11, 143, 90, 0.11); color: var(--green); }
.md-mark.is-yellow { background: var(--warn); width: 10px; min-width: 10px; height: 14px; border-radius: 2px; }
.md-mark.is-red { background: var(--live); width: 10px; min-width: 10px; height: 14px; border-radius: 2px; }
.md-mark.is-off {
  background: rgba(91, 107, 101, 0.098);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.md-bench h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.md-bench ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.md-bench li {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
}

.md-bench-empty,
.md-coach-only {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.md-coach-only {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.md-coach-only div {
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.md-coach-only span { display: block; font-size: var(--fs-xs); color: var(--muted); }
.md-coach-only strong { font-size: var(--fs-sm); color: var(--text); }

/* --- istatistikler --- */
.md-stat-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.md-stat-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-5);
}

.md-stat-group h3 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.md-stat { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-3); }

.md-stat-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-2);
  align-items: baseline;
}

.md-stat-top b {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.md-stat-top span {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.md-stat-bar {
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(200, 30, 45, 0.21);
  overflow: hidden;
}

.md-stat-bar i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--green), var(--cyan));
}

/* --- AI analiz --- */
.md-ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-4);
}

.md-ai-lead {
  grid-column: 1 / -1;
  padding: var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(13, 148, 136, 0.04), transparent 70%),
    var(--surface-raised);
}

.md-ai-lead h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
}

.md-ai-lead p {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-soft);
}

.md-ai-verdict {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  color: var(--text) !important;
}

.md-ai-card {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  align-self: start;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.md-ai-card > span:first-child {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.md-ai-card strong { font-size: var(--fs-md); }

.md-ai-card p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-soft);
}

.md-ai-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.md-ai-card li {
  display: grid;
  gap: 2px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.md-turning li,
.md-standouts li,
.md-signals li {
  grid-template-columns: auto 1fr;
  gap: var(--sp-2);
  align-items: baseline;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}

.md-turning li b,
.md-standouts li b,
.md-signals li b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.md-signals li p { grid-column: 1 / -1; }

.md-tactical div { display: grid; gap: 2px; }

.md-tactical b {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cyan);
}

.md-momentum-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(200, 30, 45, 0.18);
  overflow: hidden;
}

.md-momentum-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--cyan));
}

.md-prob-bar {
  display: flex;
  height: 10px;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.md-prob-bar i.is-home { background: var(--green); }
.md-prob-bar i.is-draw { background: rgba(91, 107, 101, 0.35); }
.md-prob-bar i.is-away { background: var(--cyan); }

.md-prob-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--muted);
}

.md-probability.is-empty p { color: var(--muted); }

.md-ai-note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* --- oyuncu kartları --- */
.md-player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-3);
}

.md-player {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.md-player-head {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}

.md-player-mono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: rgba(13, 148, 136, 0.07);
  color: var(--cyan);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.md-player-head strong {
  display: block;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.md-player-head span {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.md-player-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.md-chip {
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.md-chip.is-goal { background: rgba(11, 143, 90, 0.099); color: var(--green); }
.md-chip.is-assist { background: rgba(13, 148, 136, 0.08); color: var(--cyan); }
.md-chip.is-yellow { background: rgba(176, 116, 16, 0.108); color: var(--warn); }
.md-chip.is-red { background: rgba(200, 30, 45, 0.108); color: var(--live); }

.md-player-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: var(--sp-2);
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.md-player-stats dt {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.md-player-stats dd {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.md-player-notes {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.5;
}

/* --- kaynak --- */
.md-source {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--muted);
}

.md-source-links {
  display: inline-flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.md-source a { color: var(--cyan); }

/* --- maç kartı canlı rozetleri (ana sayfa ve listeler) --- */
.fixture-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.fixture-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid var(--line);
  color: var(--text-soft);
  white-space: nowrap;
}

.fixture-chip i {
  display: inline-block;
  width: 7px;
  height: 10px;
  border-radius: 1px;
}

.fixture-chip.is-red {
  border-color: rgba(200, 30, 45, 0.27);
  color: var(--live);
}

.fixture-chip.is-red i { background: var(--live); }

.fixture-chip.is-pen {
  border-color: rgba(176, 116, 16, 0.27);
  color: var(--warn);
}

.fixture-chip.is-pen i {
  background: var(--warn);
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.fixture-chip.is-ht { color: var(--muted); }

/* --- dar ekran --- */
@media (max-width: 640px) {
  .md-shell { padding: var(--sp-4); gap: var(--sp-5); }

  .md-scoreboard { padding: var(--sp-4); }

  .md-scoreboard-main {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--sp-2);
  }

  .md-side-badge img,
  .md-side-badge .team-logo { width: 40px; height: 40px; }

  .md-side-name { font-size: var(--fs-sm); }

  .md-side-role { display: none; }

  .md-ev {
    grid-template-columns: 40px 28px 1fr;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-2);
  }

  .md-ev-mark { width: 28px; height: 28px; }

  .md-player-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .md-stat-bar i,
  .md-momentum-bar i { transition: none; }
}

/* Maç detayı tek sütuna sıkışmamalı: sarmalayıcı .grid üç sütun tanımlıyor ve
   tek kart sol sütunda kalıyordu. Bu bölüm tam genişlik ister. */
section[data-api-section="match-detail"],
section[data-api-target="match-detail"] {
  grid-template-columns: minmax(0, 1fr);
}

/* ══════════════════════════════════════════════════════════════════════════
   TAKIM RADARI — premium pano
   Maç merkeziyle aynı dil. Uzun tek sütun yerine çok sütunlu kart ızgarası:
   aynı bilgi çok daha az dikey kaydırmayla okunur.
   ══════════════════════════════════════════════════════════════════════════ */

.td-shell {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-5);
}

section[data-api-section="team-detail"],
section[data-api-target="team-detail"] {
  grid-template-columns: minmax(0, 1fr);
}

/* --- künye --- */
.td-hero {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(110% 130% at 0% 0%, rgba(13, 148, 136, 0.06), transparent 60%),
    var(--surface-raised);
}

.td-hero-id {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  min-width: 0;
}

.td-hero-badge img,
.td-hero-badge .team-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.td-hero-league {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--muted);
}

.td-hero h2 {
  margin: var(--sp-1) 0;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}

.td-hero p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  max-width: 62ch;
}

.td-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0;
}

.td-hero-stats > div {
  min-width: 84px;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.td-hero-stats dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.td-hero-stats dd {
  margin: 2px 0 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- kart ızgarası --- */
.td-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--sp-4);
  align-items: start;
}

.td-card {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  min-width: 0;
}

.td-card.is-wide { grid-column: 1 / -1; }

.td-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}

.td-card-head h2 {
  margin: 0;
  font-size: var(--fs-md);
}

.td-card-head span {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.td-note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.td-note b { color: var(--text-soft); }

/* --- göstergeler --- */
.td-meters { display: grid; gap: var(--sp-3); }

.td-meter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
}

.td-meter span { font-size: var(--fs-sm); color: var(--text-soft); }

.td-meter b {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.td-meter i {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(91, 107, 101, 0.098);
  position: relative;
  overflow: hidden;
}

.td-meter i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value, 0%);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--green), var(--cyan));
}

/* --- künye listesi --- */
.td-facts { display: grid; gap: var(--sp-2); margin: 0; }

.td-facts > div {
  display: flex;
  gap: var(--sp-3);
  justify-content: space-between;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}

.td-facts > div:last-child { border-bottom: 0; }

.td-facts dt { font-size: var(--fs-xs); color: var(--muted); }

.td-facts dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

/* --- kadro --- */
.td-squad-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-4);
}

.td-squad-group h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.td-squad-group h3 em {
  font-style: normal;
  color: var(--cyan);
}

.td-squad-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.td-squad-list a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  min-height: var(--tap);
}

.td-squad-list a:hover,
.td-squad-list a:focus-visible {
  background: rgba(13, 148, 136, 0.04);
}

.td-squad-name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.td-squad-meta {
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
}

.td-squad-meta b {
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.td-face {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(13, 148, 136, 0.06);
}

.td-face.is-mono {
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--cyan);
}

/* --- liderler --- */
.td-leader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--sp-3);
}

.td-leader {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(var(--surface-rgb), 0.023);
}

.td-leader-rank {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(91, 107, 101, 0.098);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.td-leader strong {
  display: block;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.td-leader span {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.td-leader-score {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.td-leader-links {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
}

.td-leader-links a { color: var(--cyan); }

/* --- maçlar --- */
.td-fixture-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-2);
}

.td-fixture {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  min-height: var(--tap);
}

.td-fixture:hover,
.td-fixture:focus-visible { border-color: var(--line-strong); }

.td-fixture-state {
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.td-fixture-state.is-live { color: var(--live); border-color: rgba(200, 30, 45, 0.27); }
.td-fixture-state.is-final { color: var(--green); }

.td-fixture-teams {
  font-size: var(--fs-sm);
  min-width: 0;
  overflow-wrap: anywhere;
}

.td-fixture-score {
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- dar ekran --- */
@media (max-width: 640px) {
  .td-shell { padding: var(--sp-4); gap: var(--sp-4); }

  .td-hero { padding: var(--sp-4); gap: var(--sp-4); }

  .td-hero-badge img,
  .td-hero-badge .team-logo { width: 48px; height: 48px; }

  .td-hero-stats { width: 100%; }

  .td-hero-stats > div { flex: 1 1 70px; min-width: 70px; }

  .td-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Analizin maç yaşam döngüsündeki aşaması: okuyucu elindeki okumanın maç
   öncesi mi, devre arası mı yoksa nihai mi olduğunu görmeli. */
.md-phase {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-xs);
  color: var(--muted);
}

.md-phase-tag {
  padding: 2px var(--sp-3);
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(91, 107, 101, 0.098);
  color: var(--text-soft);
}

.md-phase-live { border-color: rgba(200, 30, 45, 0.27); }
.md-phase-live .md-phase-tag { background: rgba(200, 30, 45, 0.108); color: var(--live); }

.md-phase-halftime { border-color: rgba(176, 116, 16, 0.24); }
.md-phase-halftime .md-phase-tag { background: rgba(176, 116, 16, 0.108); color: var(--warn); }

.md-phase-final .md-phase-tag { background: rgba(11, 143, 90, 0.088); color: var(--green); }
.md-phase-preview .md-phase-tag { background: rgba(13, 148, 136, 0.08); color: var(--cyan); }

.quick-stat.is-ready b { color: var(--green); }

/* ══════════════════════════════════════════════════════════════════════════
   TEMA KATMANI
   İki tema aynı düzeni, aynı bileşenleri ve aynı işlevi paylaşır; yalnızca
   renk, gölge ve gradyan değişir. Bütün yüzeyler token üzerinden boyandığı
   için geçiş yeniden yükleme gerektirmez.

   Öncelik sırası:
     1. data-theme="dark" | "light"  -> kullanıcının açık tercihi (localStorage)
     2. prefers-color-scheme          -> ilk ziyarette sistem tercihi
     3. :root                         -> varsayılan (açık)
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Yüzeyler: sayfa en koyu, kartlar bir basamak açık — açık temadaki
     katmanlanmanın aynısı, ters yönde. */
  --bg: #0a1512;
  --bg-soft: #0d1a16;
  --panel: #10201b;
  --surface: #12241e;
  --surface-rgb: 18, 36, 30;
  --surface-raised: #162b24;
  --surface-sunken: #0d1a16;
  --surface-tint: #122a21;
  --line: rgba(180, 226, 208, 0.14);
  --line-strong: rgba(52, 211, 153, 0.32);

  /* Koyu zeminde metin saf beyaz olmaz: hafif yeşilimsi kırık beyaz
     parlamayı düşürür ve uzun okumada göz yormaz. */
  --text: #e8f2ee;
  --text-soft: #b9cbc4;
  --muted: #8b9e97;

  /* Vurgu koyu zeminde daha açık tona kayar; aynı marka ailesi. */
  --green: #34d399;
  --green-deep: #10b981;
  --green-tint: rgba(52, 211, 153, 0.14);
  --cyan: #2dd4bf;
  --live: #fb7185;
  --warn: #fbbf24;
  --ink: #e8f2ee;

  /* Koyu zeminde gölge daha derin ve geniş olmalı, yoksa kart yüzmez. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.44), 0 28px 64px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 6px 22px rgba(52, 211, 153, 0.22);

  --soft: var(--text-soft);
  --accent: var(--green);
  --accent-2: var(--cyan);
  --amber: var(--warn);
  --red: var(--live);
  --surface-strong: var(--surface-raised);
  --shadow: var(--shadow-lg);
  --shadow-card: var(--shadow-md);
  --shadow-soft: var(--shadow-sm);
  --grad-accent: linear-gradient(135deg, var(--green), var(--cyan));

  --glass: rgba(18, 36, 30, 0.82);
  --glass-strong: rgba(13, 26, 22, 0.95);
  --glass-border: rgba(180, 226, 208, 0.12);
  --grad-surface: linear-gradient(180deg, #162b24, #12241e);
  --grad-hero: linear-gradient(180deg, #0a1512 0%, #0d1a16 55%, #12241e 100%),
    radial-gradient(120% 130% at 88% 0%, rgba(52, 211, 153, 0.12), transparent 62%);
  --grad-deep: linear-gradient(160deg, #0a1512 0%, #10352a 100%);
}

/* İlk ziyaret: kullanıcı henüz seçim yapmadıysa sistem tercihi uygulanır.
   data-theme yazıldığı anda bu blok devre dışı kalır. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0a1512;
    --bg-soft: #0d1a16;
    --panel: #10201b;
    --surface: #12241e;
    --surface-rgb: 18, 36, 30;
    --surface-raised: #162b24;
    --surface-sunken: #0d1a16;
    --surface-tint: #122a21;
    --line: rgba(180, 226, 208, 0.14);
    --line-strong: rgba(52, 211, 153, 0.32);
    --text: #e8f2ee;
    --text-soft: #b9cbc4;
    --muted: #8b9e97;
    --green: #34d399;
    --green-deep: #10b981;
    --green-tint: rgba(52, 211, 153, 0.14);
    --cyan: #2dd4bf;
    --live: #fb7185;
    --warn: #fbbf24;
    --ink: #e8f2ee;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.36);
    --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.44), 0 28px 64px rgba(0, 0, 0, 0.5);
    --shadow-accent: 0 6px 22px rgba(52, 211, 153, 0.22);
    --soft: var(--text-soft);
    --accent: var(--green);
    --accent-2: var(--cyan);
    --amber: var(--warn);
    --red: var(--live);
    --surface-strong: var(--surface-raised);
    --shadow: var(--shadow-lg);
    --shadow-card: var(--shadow-md);
    --shadow-soft: var(--shadow-sm);
    --grad-accent: linear-gradient(135deg, var(--green), var(--cyan));

    --glass: rgba(18, 36, 30, 0.82);
    --glass-strong: rgba(13, 26, 22, 0.95);
    --glass-border: rgba(180, 226, 208, 0.12);
    --grad-surface: linear-gradient(180deg, #162b24, #12241e);
    --grad-hero: linear-gradient(180deg, #0a1512 0%, #0d1a16 55%, #12241e 100%),
      radial-gradient(120% 130% at 88% 0%, rgba(52, 211, 153, 0.12), transparent 62%);
    --grad-deep: linear-gradient(160deg, #0a1512 0%, #10352a 100%);
  }
}

/* Sayfa zemini token'a bağlanır: tema değişince gövde de değişmeli.
   Daha önce doğrudan beyaz yazılıydı ve koyu temada beyaz kalırdı. */
body {
  background:
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 42%, var(--bg-soft) 100%),
    repeating-linear-gradient(90deg, rgba(11, 143, 90, 0.022) 0 1px, transparent 1px 92px),
    var(--bg);
}

/* Tema geçişi: renk değişimi ani değil, kısa ve yumuşak. Hareket azaltma
   tercihi olan kullanıcıda geçiş kapanır. */
body,
.card,
.topbar,
.td-card,
.md-section,
.fixture-card {
  transition: background-color var(--dur, 220ms) var(--ease, ease),
    border-color var(--dur, 220ms) var(--ease, ease),
    color var(--dur, 220ms) var(--ease, ease);
}

@media (prefers-reduced-motion: reduce) {
  body,
  .card,
  .topbar,
  .td-card,
  .md-section,
  .fixture-card {
    transition: none;
  }
}

/* --- tema düğmesi --- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms var(--ease, ease), border-color 160ms var(--ease, ease), color 160ms var(--ease, ease);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--line-strong);
  color: var(--text);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* İkon tema ile değişir: açık temada ay (koyuya geç), koyuda güneş. */
.theme-toggle .theme-icon-dark { display: inline-block; }
.theme-toggle .theme-icon-light { display: none; }

:root[data-theme="dark"] .theme-toggle .theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-light { display: inline-block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .theme-icon-dark { display: none; }
  :root:not([data-theme]) .theme-toggle .theme-icon-light { display: inline-block; }
}

@media (max-width: 900px) {
  .theme-toggle .theme-toggle-label { display: none; }
  .theme-toggle { padding: 0 var(--sp-2); }
}

/* Marka adı üst çubukta menünün üstüne biniyordu: .brand `min-width: 0` ile
   daralabiliyor, ama metin sarmalanmadığı için kutudan taşıyordu. Marka
   kolonu kendi içeriği kadar yer tutar ve taşmaz; menü kalan alanı alır. */
.topbar-premium .brand {
  /* Grid kolonu ölçülürken web fontu henüz yüklenmemiş olabiliyor; yedek font
     daha dar ölçülüp kolon küçük kalıyor, font gelince marka adı menünün
     üstüne taşıyordu. Kolon içeriğe göre ölçülür VE taşmaya izin vermez. */
  min-width: max-content;
  flex: none;
  padding-right: var(--sp-3);
  overflow: visible;
}

.topbar-premium .brand-text {
  white-space: nowrap;
}

/* Çok dar ekranda marka adı gizlenir, işaret kalır: menü ve arama için yer
   açılır, kimlik korunur. */
@media (max-width: 420px) {
  .topbar-premium .brand-text {
    display: none;
  }
}

/* 1180-1400 arası: birincil menü açık kalır ama ikincil bağlantılar gizlenir.
   Tema düğmesi üst çubuğa eklendikten sonra bu aralıkta marka, menü, CTA ve
   arama aynı satıra sığmıyor ve öğeler üst üste biniyordu. */
@media (min-width: 1181px) and (max-width: 1400px) {
  .topbar-premium .nav-links-secondary {
    display: none;
  }

  .topbar-premium .nav-links a {
    padding: 0 9px;
    font-size: var(--fs-xs);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ÜST ÇUBUK ARAMA — büyüteç düğmesi ve açılır arama kutusu

   Düğme artık markanın yanında değil, "Maç Merkezi" ile "Koyu Tema"
   arasında duruyor; arama, gezinmenin sonundaki eylem grubuna ait.

   Masaüstünde arama kutusu sürekli yer kaplamaz: düğmeye basılınca açılır.
   Böylece menü, CTA ve tema düğmesi tek satıra rahatça sığar (önceki
   düzenlemede kutu sığmadığı için tamamen gizlenmiş ve düğme hiçbir şey
   açmayan ölü bir ikona dönüşmüştü).
   ══════════════════════════════════════════════════════════════════════════ */

/* Masaüstü düğmesi menü grubunun içinde, CTA ile tema düğmesi arasında. */
.topbar-premium .nav-search-toggle-desktop {
  display: none;
  width: 38px;
  height: 38px;
  flex: none;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}

.topbar-premium .nav-search-toggle-desktop:hover,
.topbar-premium .nav-search-toggle-desktop:focus-visible,
.topbar-premium .nav-search-toggle-desktop[aria-expanded="true"] {
  border-color: var(--line-strong);
  color: var(--green);
}

.topbar-premium .nav-search-toggle-desktop svg {
  width: 17px;
  height: 17px;
}

@media (min-width: 1181px) {
  .topbar-premium .nav-search-toggle-desktop {
    display: inline-grid;
  }

  /* Mobil büyüteç masaüstünde görünmez: iki düğme aynı anda durmaz. */
  .topbar-premium .nav-search-toggle-mobile {
    display: none;
  }

  /* Ana menü hafifçe sola: arama düğmesi eylem grubuna katılınca sağ taraf
     ağırlaştı, bağlantılar sola yaslanarak denge kuruluyor. */
  .topbar-premium .nav-menu {
    justify-content: flex-start;
    gap: var(--sp-3);
  }

  .topbar-premium .nav-links {
    margin-right: auto;
  }

  /* Arama kutusu kapalıyken yer kaplamaz, açılınca üst çubuğun sağında
     belirir. Konumlandırma çubuğa göre yapılır ki düzen kaymasın. */
  /* Görünürlük display ile açılıp kapanır, opacity/visibility ile değil:
     gizli (visibility:hidden) bir öğe odak alamadığı için düğmeye basınca
     kutu "açılıyor" ama imleç girdiye hiç gitmiyordu. display none -> flex
     geçişinde öğe odak alabilir duruma net biçimde geçer. */
  .topbar-premium .site-search {
    display: none;
    position: absolute;
    top: 50%;
    right: var(--gutter, 24px);
    z-index: 40;
    width: min(380px, 42vw);
    transform: translateY(-50%);
  }

  .topbar-premium .site-search.is-expanded {
    display: flex;
    animation: fr-search-in 160ms var(--ease) both;
  }

  /* Arama açıkken üst çubuk "arama moduna" geçer: menü bağlantıları ve CTA
     kutuya yer açar. Aksi hâlde mutlak konumlu kutu "Maç Merkezi" düğmesinin
     üstüne biniyor ve iki öğe üst üste okunuyordu. Marka, arama düğmesi ve
     tema düğmesi yerinde kalır — çubuğun kimliği ve çıkışlar kaybolmaz. */
  .topbar-premium .nav.is-searching .nav-links,
  .topbar-premium .nav.is-searching .nav-links-secondary,
  .topbar-premium .nav.is-searching .cta {
    visibility: hidden;
  }

  .topbar-premium .nav.is-searching .site-search {
    right: calc(var(--gutter, 24px) + 96px);
    width: min(520px, 52vw);
  }

  .topbar-premium .nav {
    position: relative;
  }
}

/* Çekmece düzeni: mobil büyüteç görünür, masaüstü kopyası menüde gizli
   kalır (menü kapalıyken zaten görünmez, açıkken ikinci bir ikon gereksiz). */
@media (max-width: 1180px) {
  .topbar-premium .nav-search-toggle-desktop {
    display: none;
  }
}

@keyframes fr-search-in {
  from { transform: translateY(-50%) scaleX(0.97); }
  to { transform: translateY(-50%) scaleX(1); }
}

/* ---------------------------------------------------------------------------
   VERİ BEKLENİYOR
   Sağlayıcı bir maçın ayrıntısını getiremediğinde fikstür artık gizlenmiyor;
   eksik alan açıkça bekleniyor olarak gösteriliyor. Bu yüzden bekleme
   ifadesi skorun yerini alabilecek kadar okunur, ama onunla karışmayacak
   kadar da sakin olmalı: skor rakamdır, bu bir durum bildirimidir.
--------------------------------------------------------------------------- */
.md-score.is-awaiting {
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  font-weight: 650;
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;
}

.td-fixture-score.is-awaiting {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.fixture-awaiting {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-sunken);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
}

.fixture-awaiting-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  flex: none;
}

/* ---------------------------------------------------------------------------
   TAKIM TRANSFERLERİ — gelen / giden
   Doğrulanmış hareketler iki sütunda; her satırda tür, tarih ve izlenebilir
   kaynak var. Kaynak bağlantısı süs değil: yayımlanan her hareketin
   doğrulanabilir olması kuralının görünür karşılığı.
--------------------------------------------------------------------------- */
.td-transfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.td-transfer-col-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.6rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.td-transfer-col-title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.7rem;
  letter-spacing: 0;
}

.td-transfer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.td-transfer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.td-transfer-dir {
  grid-row: span 2;
  align-self: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.td-transfer-in .td-transfer-dir { color: var(--green); }
.td-transfer-out .td-transfer-dir { color: var(--muted); }

.td-transfer-player {
  display: block;
  font-size: 0.88rem;
  line-height: 1.25;
}

.td-transfer-move {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
}

.td-transfer-meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  color: var(--muted);
}

.td-transfer-type {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  font-weight: 600;
}

.td-transfer-source {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
}

.td-transfer-source:hover,
.td-transfer-source:focus-visible { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   OYUNCU FOTOĞRAFLARI
   Görsel yalnızca lisanslı kaynaktan (API-Football medya sunucusu) gelir.
   Kimliği olmayan oyuncuda uydurma görsel yüklenmez; baş harfler gösterilir.
   Yer tutucu ile fotoğraf AYNI ölçüde durur, böylece görsel yüklendiğinde
   ya da düştüğünde satır zıplamaz.
--------------------------------------------------------------------------- */
.player-avatar.is-placeholder,
.td-face.is-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.player-avatar img,
.td-face {
  object-fit: cover;
  background: var(--surface-sunken);
}

.post-match-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  margin-bottom: 0.6rem;
}

.post-match-face.is-placeholder {
  color: var(--muted);
  font-weight: 700;
  font-size: 1rem;
}

/* ---------------------------------------------------------------------------
   MAÇ SONRASI: MOMENTUM VE SİNYALLER
   Çubuklar uydurma bir eğri değil, dilim başına düşen gerçek olay sayısının
   oranı; bu yüzden sayılar da yanında yazıyor. Ölçü yoksa bölüm hiç
   çizilmez, "veri bekleniyor" notu basılır.
--------------------------------------------------------------------------- */
.pm-momentum { display: grid; gap: 0.55rem; }

.pm-momentum-meta {
  margin: 0 0 0.2rem;
  font-size: 0.74rem;
  color: var(--muted);
}

.pm-momentum-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr 3.2rem;
  align-items: center;
  gap: 0.6rem;
}

.pm-momentum-label { font-size: 0.76rem; color: var(--muted); }

.pm-momentum-bar {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  overflow: hidden;
}

.pm-momentum-bar b {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: 999px;
}

.pm-momentum-count {
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text);
}

.pm-momentum-readings {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.pm-signals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
}

.pm-signal { display: grid; gap: 0.2rem; padding: 0.75rem 0.85rem; }
.pm-signal strong { font-size: 0.95rem; }
.pm-signal p { margin: 0; font-size: 0.74rem; color: var(--muted); }
.pm-signal.is-strong { border-color: var(--green); }

.home-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.8rem;
}

.home-report-card {
  display: grid;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}

.home-report-card:hover,
.home-report-card:focus-visible { border-color: var(--green); }

.home-report-meta { font-size: 0.7rem; color: var(--muted); }
.home-report-score { font-size: 0.95rem; }
.home-report-line { margin: 0; font-size: 0.78rem; color: var(--muted); }
.home-report-coverage { font-size: 0.7rem; color: var(--muted); }

/* ---------------------------------------------------------------------------
   MAÇ SONRASI ANALİZ PANOSU
   Grafikler satır içi: harici kütüphane yok. Renkler tema değişkenlerinden
   geldiği için açık ve koyu temada aynı okunurluk korunur. Sayılar her
   zaman çubuğun yanında yazılı — çubuk tek başına bir ölçü değil, sayının
   görsel karşılığı.
--------------------------------------------------------------------------- */
.pmi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1rem;
}

.pmi-section { display: grid; gap: 0.7rem; align-content: start; padding: 1.05rem 1.15rem; }

.pmi-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.pmi-section-head h3 { margin: 0; font-size: 1rem; letter-spacing: -0.01em; }

.pmi-confidence {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-sunken);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.pmi-confidence i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}

.pmi-confidence.is-high i { background: var(--green); }
.pmi-confidence.is-medium i { background: var(--amber); }
.pmi-confidence.is-low i { background: var(--muted); }

.pmi-metric { display: grid; gap: 0.28rem; }

.pmi-metric-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.76rem;
}

.pmi-metric-head span { text-align: center; color: var(--muted); }
.pmi-metric-head b { font-variant-numeric: tabular-nums; font-size: 0.85rem; }

.pmi-bar {
  display: flex;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
}

.pmi-bar-home { background: var(--green); }
.pmi-bar-away { background: color-mix(in srgb, var(--muted) 55%, transparent); }

.pmi-readings {
  margin: 0.2rem 0 0;
  padding-left: 1.05rem;
  display: grid;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.pmi-basis {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  font-size: 0.66rem;
  font-style: normal;
}

.pmi-performers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }

.pmi-performers li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.8rem;
}

.pmi-performers span { color: var(--muted); font-size: 0.72rem; }
.pmi-performers b { margin-left: auto; color: var(--green); }
.pmi-performers em { font-style: normal; color: var(--muted); font-size: 0.7rem; }

.pmi-note,
.pmi-sources { margin: 0; font-size: 0.7rem; color: var(--muted); }

.pmi-derived {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  background: var(--surface-sunken);
  font-size: 0.74rem;
}

.pmi-derived summary { cursor: pointer; font-weight: 600; color: var(--text); }
.pmi-derived p { margin: 0.4rem 0 0; color: var(--muted); }

@media (max-width: 640px) {
  .pmi-grid { grid-template-columns: 1fr; }
  .pmi-section { padding: 0.9rem 0.95rem; }
  .pmi-metric-head { font-size: 0.72rem; }
}

/* Profil fotoğrafı: yalnızca lisanslı sağlayıcı görseli ya da baş harfli
   yer tutucu. Kahraman satırında metnin yanında durur. */
.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--surface-sunken);
}
.player-avatar.is-placeholder.profile-avatar {
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-soft);
}

/* ----------------------------------------------------------------------------
   ARŞİV
   Sezon arşivi, kadro arşivi ve teknik direktör dönem sayfaları. Tablolar
   dar ekranda kırpılmaz: kendi kabuğunda yatay kayar, sayfayı taşırmaz —
   bu, deponun 760-820px'te yaşadığı taşmanın aynısını tekrarlamamak için.
   -------------------------------------------------------------------------- */
.archive-match-list {
  display: grid;
  gap: var(--sp-2);
}

.archive-match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--glass);
}

.archive-match-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.archive-match-row strong {
  font-size: var(--fs-base);
}

.archive-match-date,
.archive-match-meta {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* Tablo kendi kabuğunda kayar; `-webkit-overflow-scrolling` dokunmatik
   ivmeyi korur. Kabuk olmadan geniş tablo sayfayı yatay taşırırdı. */
.archive-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass);
}

.archive-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.archive-table caption {
  padding: 12px 14px 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-align: left;
}

.archive-table th,
.archive-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(14, 26, 22, 0.06);
  text-align: right;
  white-space: nowrap;
}

.archive-table th[scope="row"],
.archive-table thead th:first-child {
  text-align: left;
}

.archive-table thead th {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.archive-table tbody tr:last-child th,
.archive-table tbody tr:last-child td {
  border-bottom: 0;
}

.archive-squad-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.archive-squad-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.archive-squad-list li strong {
  font-size: var(--fs-sm);
  font-weight: 700;
}

.archive-squad-list li span:last-child {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.archive-squad-number {
  flex: 0 0 auto;
  min-width: 22px;
  color: var(--green);
  font-size: var(--fs-xs);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

/* Arşiv istatistik kutusu. Genel `.card` iç akışında etiket ile sayı yan yana
   yapışıyordu; buranın kendi dikey ızgarası var. */
.archive-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: var(--sp-3);
}

.archive-stat {
  display: grid;
  align-content: start;
  gap: 4px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--glass);
}

.archive-stat-label {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.archive-stat-value {
  color: var(--green);
  font-size: var(--fs-xl);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Sayı değil METİN taşıyan künye kutusu: kulüp adı, tarih, güven etiketi.
   Rakam boyutu uzun bir kulüp adını satıra sığdırmaz, sekmeli rakam
   hizalaması da metinde işe yaramaz. */
.archive-stat-value.is-text {
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 800;
  font-variant-numeric: normal;
  line-height: 1.25;
}

.archive-stat-note {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--fs-xs);
/* Google Ads arama landingleri: ilk ekranda kararlı boyut, alt bölümlerde
   daha az stil/yerleşim işi. Ana içerik statik prerender olduğu için bu
   optimizasyon bilgi kaybına yol açmaz. */
.ad-search-page [data-api-target="matches-page"],
.ad-search-page [data-api-target="live-score"] {
  min-height: 18rem;
  contain: layout paint;
}

.ad-search-page h1,
.ad-search-page h2,
.ad-search-page h3 {
  letter-spacing: 0;
}

.ad-search-page .fixture-card,
.ad-search-page .live-context-bar,
.ad-search-page .competition-switcher {
  border-radius: 8px;
}

.ad-search-page .route-chain,
.ad-search-page .search-trap,
.ad-search-page .post-match-section,
.ad-search-page .result-policy,
.ad-search-page .popular-links {
  content-visibility: auto;
  contain-intrinsic-size: auto 24rem;
}

.results-trust-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.results-trust-strip div {
  display: grid;
  gap: 0.25rem;
}

.results-trust-strip span,
.result-card-head span {
  color: var(--muted);
  font-size: 0.78rem;
}

.results-section {
  margin: 0 0 2rem;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.result-card {
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.result-card-head,
.result-card-footer,
.result-card-score > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.result-card-head strong {
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-size: 0.78rem;
}

.result-card-score {
  display: grid;
  gap: 0.6rem;
}

.result-card-score span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.result-card-score b {
  flex: 0 0 2rem;
  font-size: 1.45rem;
  text-align: right;
}

.result-card-footer {
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.result-verified {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
}

.result-card-footer a {
  color: var(--text);
  font-weight: 800;
}

.result-policy {
  max-width: 54rem;
  margin: 0 0 2rem;
}

.result-policy h2 {
  margin: 0.35rem 0 0.6rem;
}

@media (max-width: 900px) {
  .results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ad-search-page .hero-row,
  .ad-search-page .live-context-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .ad-search-page .hero-row > *,
  .ad-search-page .hero h1,
  .ad-search-page .hero .lead,
  .ad-search-page .competition-switcher,
  .ad-search-page .competition-switcher > *,
  .ad-search-page .competition-chip-row,
  .ad-search-page .section-head > *,
  .ad-search-page .fixture-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .ad-search-page .hero-meta {
    justify-self: start;
    max-width: 100%;
    white-space: normal;
  }

  .ad-search-page .live-context-bar .detail-link {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .ad-search-page .competition-switcher,
  .ad-search-page .grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ad-search-page .competition-switcher {
    overflow: hidden;
  }

  .ad-search-page .fixture-card-meta {
    display: none;
  }

  .results-trust-strip,
  .results-grid {
    grid-template-columns: 1fr;
  }

  .results-trust-strip .detail-link {
    justify-self: start;
  }

  .ad-search-page [data-api-target="matches-page"],
  .ad-search-page [data-api-target="live-score"] {
    min-height: 14rem;
  }
}

@media (max-width: 560px) {
  .home-page #hero-canli-skor .hero-featured,
  .home-page #hero-canli-skor .featured-carousel,
  .home-page #hero-canli-skor .featured-carousel-viewport,
  .home-page #hero-canli-skor .featured-carousel-slide {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .home-page #hero-canli-skor .featured-fixture {
    overflow: hidden;
    border-radius: 14px;
    padding: 16px;
  }

  .home-page #hero-canli-skor .featured-fixture-board {
    grid-template-columns: minmax(0, 1fr) minmax(68px, auto) minmax(0, 1fr);
    gap: 8px;
  }

  .home-page #hero-canli-skor .featured-fixture-team {
    min-width: 0;
  }

  .home-page #hero-canli-skor .featured-fixture-team strong {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 0.82rem;
  }

  .home-page #hero-canli-skor .featured-fixture-score {
    min-width: 0;
  }

  .home-page #hero-canli-skor .featured-fixture-score b {
    font-size: 1.55rem;
  }

  .home-page #hero-canli-skor .featured-fixture-score span {
    padding: 2px 6px;
    font-size: 0.68rem;
    white-space: nowrap;
  }

  .home-page #hero-canli-skor .featured-match-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home-page #hero-canli-skor .featured-match-actions .button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .home-page #hero-canli-skor .featured-fixture {
    padding: 14px;
  }

  .home-page #hero-canli-skor .featured-fixture-head {
    font-size: 0.68rem;
    letter-spacing: 0.02em;
  }

  .home-page #hero-canli-skor .featured-fixture-board {
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    gap: 6px;
  }

  .home-page #hero-canli-skor .featured-fixture-team img,
  .home-page #hero-canli-skor .featured-fixture-team .team-logo-fallback,
  .home-page #hero-canli-skor .featured-fixture-team .fixture-row-fallback {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 0.76rem;
  }

  .home-page #hero-canli-skor .featured-fixture-team strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-page #hero-canli-skor .featured-fixture-score b {
    font-size: 1.42rem;
  }

  .home-page #hero-canli-skor .featured-fixture-score span {
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}