/* ==========================================================================
   İstatistik modülü (Ajan E) — yalnızca mevcut tasarım değişkenleri (tokens.css + app.css türetilmişleri, yedekli).
   Önek: st-  · Koyu / açık tema değişkenlerden gelir · 360 px → masaüstü.
   ========================================================================== */

.st-sub { color: var(--muted, var(--text-muted)); font-size: var(--fs-sm); margin: 2px 0 0; }
.st-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--muted, var(--text-muted)); font-size: var(--fs-xs); }
.st-meta span { display: inline-flex; align-items: center; gap: 6px; }
.st-note { font-size: var(--fs-xs); color: var(--muted, var(--text-muted)); margin: var(--space-3) 0 0; }
.st-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.st-strong { font-weight: 700; color: var(--text); }
.st-team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; color: var(--text); }
.st-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.st-team:hover { color: var(--link, var(--primary)); }

/* Alt gezinme */
.st-nav { margin-block: var(--space-4) var(--space-6); }

/* Başlık bandı */
.st-hero { display: grid; gap: var(--space-3); padding-block: var(--space-4) var(--space-2); }
.st-hero h1 { letter-spacing: -0.03em; }
.st-hero p { color: var(--text-secondary); max-width: 68ch; margin: 0; }
.st-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.st-head__main { min-width: 0; flex: 1 1 260px; }

/* Olasılık çubuğu (tek değer) */
.st-bar { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--surface3); overflow: hidden; min-width: 48px; }
.st-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: var(--radius-pill); background: var(--primary); }
.st-bar--danger i { background: var(--danger); }
.st-bar--accent i { background: var(--accent); }
.st-prob { display: grid; grid-template-columns: minmax(0, 1fr) 56px; align-items: center; gap: var(--space-3); }
.st-prob__value { text-align: end; font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }

/* Liste satırları (kart içi) */
.st-list { display: flex; flex-direction: column; }
.st-list > li, .st-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 10px 0; }
.st-list > li + li { border-block-start: 1px solid var(--border); }
ul.st-list, ol.st-list { list-style: none; margin: 0; padding: 0; }

/* Simülatör kartı (lig yuvası) */
.st-simcard__grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .st-simcard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-simcard h3 { font-size: var(--fs-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-block-end: var(--space-2); }
.st-prob-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(48px, 1fr) 56px; align-items: center; gap: var(--space-3); padding: 6px 0; }
.st-metrics .st-rowhead, .st-metrics tbody th { font-weight: 500; color: var(--text); font-size: var(--fs-sm); }

/* Tablolar */
.st-table th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.st-table th a:hover { color: var(--text); }
.st-table th[aria-sort] { color: var(--text); }
.st-table th[aria-sort]::after { content: '▾'; margin-inline-start: 4px; font-size: 10px; }
.st-table td.is-sorted, .st-table th.is-sorted { background: var(--primary-soft); }
.st-table td.st-hotcell { background: var(--success-soft); }
.st-table td.st-coldcell { background: var(--danger-soft); }
.st-table .st-sticky { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--surface); }
.st-table thead .st-sticky { background: var(--surface2); z-index: 3; }
.st-table tbody tr:hover .st-sticky { background: var(--bg-elevated); }
.st-table td.team-cell { min-width: 150px; max-width: 220px; }
.st-table .st-pct { min-width: 92px; }
.st-pct__wrap { display: grid; grid-template-columns: 40px minmax(32px, 1fr); align-items: center; gap: 8px; }
.st-rank { display: inline-grid; place-items: center; min-width: 24px; font-weight: 700; font-family: var(--font-display); }

/* Isı tablosu (bitiş sırası) */
.st-heat { border-collapse: separate; border-spacing: 2px; font-size: var(--fs-xs); width: 100%; }
.st-heat th { font-weight: 600; color: var(--muted, var(--text-muted)); padding: 4px 2px; text-align: center; white-space: nowrap; }
.st-heat th.st-heat__team { text-align: start; padding-inline-end: 8px; }
.st-heat td { text-align: center; padding: 0; height: 30px; min-width: 30px; border-radius: 5px; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 600;
  background: rgba(var(--heat, 196, 247, 46), var(--a, 0)); color: var(--text); }
.st-heat td.is-zero { color: transparent; }
.st-heat td.is-strong { color: var(--on-primary, #06090F); }
.st-heat tbody th { background: var(--surface); }
.st-heat .st-zoneband th { height: 6px; padding: 0; }
.st-heat .st-zoneband i { display: block; height: 4px; border-radius: 2px; }
/* position: relative → hücre içi sr-only (mutlak konumlu) metinler kaydırma kabının dışına taşıp sayfayı genişletmez */
.st-heat-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-3); }
.st-zone-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.st-z-ucl { background: var(--zone-ucl, var(--info)); }
.st-z-uel { background: var(--zone-uel, var(--warning)); }
.st-z-uecl { background: var(--zone-uecl, var(--success)); }
.st-z-promotion { background: var(--zone-promotion, var(--success)); }
.st-z-playoff { background: var(--zone-playoff, var(--accent)); }
.st-z-relegation { background: var(--zone-relegation, var(--danger)); }
.st-z-other { background: var(--border-strong); }

/* Grafik kabı (kendi ipucumuz: stats.js) */
.st-chart { position: relative; }
.st-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.st-chart .st-grid { stroke: var(--grid, var(--border)); stroke-width: 1; shape-rendering: crispEdges; }
.st-chart .st-axis { stroke: var(--border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.st-chart .st-tick { fill: var(--muted, var(--text-muted)); font-size: 11px; font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.st-chart .st-hit { fill: transparent; cursor: crosshair; }
.st-chart .st-hit:focus { outline: none; }
.st-chart .st-hit:focus-visible { fill: var(--primary-soft); }
.st-chart .st-cross { stroke: var(--text-secondary); stroke-width: 1; pointer-events: none; }
.st-tip { position: absolute; z-index: 6; pointer-events: none; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow);
  padding: 8px 10px; font-size: var(--fs-xs); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }
.st-tip strong { display: block; font-family: var(--font-display); font-size: var(--fs-sm); }
.st-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-xs); color: var(--text-secondary); margin-block-start: var(--space-2); }
.st-legend span { display: inline-flex; align-items: center; gap: 6px; }
.st-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.st-key--home { background: var(--home, var(--primary)); }
.st-key--draw { background: var(--text-muted); }
.st-key--away { background: var(--away, var(--accent)); }
.st-key--a { background: var(--volt-700); }
.st-key--b { background: var(--accent); }

/* Kazanma olasılığı */
.st-wp { margin-block: var(--space-4); }
.st-wp__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-block-end: var(--space-4); }
.st-wp__head h2 { font-size: var(--fs-lg); display: flex; align-items: center; gap: 8px; }
.st-wp__body { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .st-wp__body { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-6); } }
.st-wp__now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 900px) { .st-wp__now { grid-template-columns: minmax(0, 1fr); } }
.st-wp__cell { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface2); min-width: 0; }
.st-wp__cell--home { box-shadow: inset 3px 0 0 var(--home, var(--primary)); }
.st-wp__cell--draw { box-shadow: inset 3px 0 0 var(--text-muted); }
.st-wp__cell--away { box-shadow: inset 3px 0 0 var(--away, var(--accent)); }
.st-wp__label { font-size: var(--fs-xs); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.st-wp__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); line-height: 1.1; }
.st-wp__delta { font-size: var(--fs-xs); color: var(--muted, var(--text-muted)); font-variant-numeric: tabular-nums; }
.st-wp .st-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.st-wp .st-line--home { stroke: var(--home, var(--primary)); }
.st-wp .st-line--draw { stroke: var(--text-muted); }
.st-wp .st-line--away { stroke: var(--away, var(--accent)); }
.st-wp .st-end { stroke: var(--surface); stroke-width: 2; }
.st-wp .st-end--home { fill: var(--home, var(--primary)); }
.st-wp .st-end--draw { fill: var(--text-muted); }
.st-wp .st-end--away { fill: var(--away, var(--accent)); }
.st-wp .st-now { stroke: var(--text-secondary); stroke-width: 1; }
.st-wp .st-mark-line { stroke: var(--border-strong); stroke-width: 1; }
.st-wp .st-goal { stroke: var(--surface); stroke-width: 2; }
.st-wp .st-goal--home { fill: var(--home, var(--primary)); }
.st-wp .st-goal--away { fill: var(--away, var(--accent)); }
.st-wp .st-red { fill: var(--danger); stroke: var(--surface); stroke-width: 1.5; }
.st-key--goal { border-radius: 50%; background: var(--text-secondary); }
.st-key--red { width: 8px; height: 11px; border-radius: 2px; background: var(--danger); }
.st-wp details { margin-block-start: var(--space-3); }
.st-wp summary { cursor: pointer; font-size: var(--fs-sm); color: var(--text-secondary); }
@media (max-width: 600px) {
  .st-wp .st-chart .st-tick { font-size: 20px; }
  .st-wp .st-goal { r: 10px; }
  .st-wp .st-line { stroke-width: 3; }
}

/* Radar */
.st-radar { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 860px) { .st-radar { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.st-radar-chart svg { max-width: 520px; margin-inline: auto; }
.st-radar-chart .st-ring { fill: none; stroke: var(--grid, var(--border)); stroke-width: 1; }
.st-radar-chart .st-ring--mid { stroke: var(--border-strong); }
.st-radar-chart .st-spoke { stroke: var(--grid, var(--border)); stroke-width: 1; }
.st-radar-chart .st-poly--a { fill: var(--volt-700); fill-opacity: 0.16; stroke: var(--volt-700); stroke-width: 2; stroke-linejoin: round; }
.st-radar-chart .st-poly--b { fill: var(--accent); fill-opacity: 0.12; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.st-radar-chart .st-vertex--a { fill: var(--volt-700); stroke: var(--surface); stroke-width: 2; }
.st-radar-chart .st-vertex--b { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.st-radar-chart .st-axis-label { fill: var(--text-secondary); font-size: 12px; font-weight: 600; font-family: var(--font-body); }
.st-radar-chart .st-axis-pct { fill: var(--muted, var(--text-muted)); font-size: 11px; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.st-radar-chart .st-ring-label { fill: var(--muted, var(--text-muted)); font-size: 10px; }
.st-metrics { width: 100%; font-size: var(--fs-sm); }
.st-metrics td, .st-metrics th { padding: 7px 4px; border-block-end: 1px solid var(--border); text-align: start; }
.st-metrics th { font-size: var(--fs-xs); color: var(--muted, var(--text-muted)); font-weight: 600; }
.st-metrics tr:last-child td { border-block-end: 0; }
.st-metrics .n { text-align: end; font-family: var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-pctbar { display: grid; grid-template-columns: minmax(40px, 1fr) 34px; gap: 8px; align-items: center; }
.st-pctbar .st-bar i.p-0 { background: var(--prob-0, var(--danger)); }
.st-pctbar .st-bar i.p-1 { background: var(--prob-1, var(--warning)); }
.st-pctbar .st-bar i.p-2 { background: var(--prob-2, var(--primary)); }
.st-pctbar .st-bar i.p-3 { background: var(--prob-3, var(--success)); }
.st-similar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.st-similar li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 8px 0; }
.st-similar li + li { border-block-start: 1px solid var(--border); }
.st-similar small { display: block; color: var(--muted, var(--text-muted)); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Seriler */
.st-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.st-streak { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--radius-pill); background: var(--surface2); border: 1px solid var(--border); font-size: var(--fs-sm); }
.st-streak b { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding-inline: 6px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary-text, var(--primary)); font-family: var(--font-display); font-size: var(--fs-sm); }
.st-streak--cold b { background: var(--danger-soft); color: var(--danger-text, var(--danger)); }
.st-hot { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .st-hot--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .st-hot--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.st-hot li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); }
.st-hot small { display: block; color: var(--muted, var(--text-muted)); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-count { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding-inline: 8px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-text, var(--primary)); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); }
.st-count--cold { background: var(--danger-soft); color: var(--danger-text, var(--danger)); }
.st-record { display: grid; gap: 6px; }
.st-record__score { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }

/* Merkez */
.st-races { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .st-races { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .st-races { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.st-tools { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .st-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .st-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.st-tool { display: flex; flex-direction: column; gap: var(--space-2); }
.st-tool .icon { width: 22px; height: 22px; color: var(--primary-text, var(--primary)); }
.st-method { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .st-method { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-method p { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); }

/* Takvim */
.st-cal .btn { justify-content: flex-start; }
.st-cal .stack { gap: var(--space-2); }

/* Filtre satırı */
.st-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin-block-end: var(--space-4); }
.st-filters .field { min-width: 160px; flex: 1 1 180px; max-width: 320px; }
.st-filters .field + .field { margin-block-start: 0; }
.st-filters label { font-size: var(--fs-xs); color: var(--muted, var(--text-muted)); font-weight: 600; }

@media (max-width: 480px) {
  .st-wp__now { gap: 6px; }
  .st-wp__cell { padding: 8px; }
  .st-chart .st-tick { font-size: 15px; }
  .st-radar-chart .st-axis-label { font-size: 17px; }
  .st-radar-chart .st-axis-pct { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-bar i { transition: none; }
}