/* ==========================================================================
   Sezon trendleri (/sezon, 28.09.2026) — sayfaya özel stiller.
   Koyu saha yüzeyi site.css'ten (.surface-pitch, .card-glass, .pill-glass);
   burada yalnız küçük çoklu grafik kartları. "Biz" rengi --accent, mağlubiyet
   --red; metinler beyazın opaklık basamaklarında (seri rengi metne girmez).
   ========================================================================== */

.season-head { flex-wrap: wrap; }
.season-head .h-page { color: #fff; margin: 0; }
.season-lead { margin: -8px 0 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); max-width: 70ch; }

/* Maç şeridi */
.season-strip { display: flex; gap: 6px; overflow-x: auto; padding: 8px; scrollbar-width: thin; }
.season-chip {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 46px; padding: 5px 6px; border-radius: 8px; text-decoration: none;
  background: rgba(255, 255, 255, 0.06); border-top: 3px solid rgba(255, 255, 255, 0.3);
  color: #fff; font-variant-numeric: tabular-nums;
}
.season-chip b { font-size: 11px; font-weight: 800; letter-spacing: 0.4px; }
.season-chip span { font-size: 11.5px; color: rgba(255, 255, 255, 0.75); }
.season-chip.is-g { border-top-color: var(--accent); }
.season-chip.is-m { border-top-color: var(--red); }
.season-chip:hover { background: rgba(255, 255, 255, 0.12); }
.season-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Lejant */
.season-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.season-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-line { width: 16px; height: 2px; border-radius: 2px; background: var(--accent); }
.lg-avg { width: 16px; height: 0; border-top: 1.5px dashed rgba(255, 255, 255, 0.7); }
.lg-band { width: 14px; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, 0.10); }
.lg-dot { width: 8px; height: 8px; border-radius: 50%; }
.lg-dot.is-g, .st-res.is-g { background: var(--accent); fill: var(--accent); }
.lg-dot.is-b, .st-res.is-b { background: rgba(255, 255, 255, 0.45); fill: rgba(255, 255, 255, 0.45); }
.lg-dot.is-m, .st-res.is-m { background: var(--red); fill: var(--red); }

.season-subhead {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(255, 255, 255, 0.62);
}
.season-subhead::after { content: ''; flex: 1 1 auto; height: 1px; background: rgba(255, 255, 255, 0.1); }

.season-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.season-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; min-width: 0; }
.sc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sc-title { margin: 0; color: #fff; font-size: 15px; }
.sc-hint { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, 0.58); }
.sc-nums { display: flex; gap: 12px; flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }
.sc-nums span { display: flex; flex-direction: column; font-size: 16px; font-weight: 800; color: #fff; }
.sc-nums span + span { font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.sc-nums small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }

/* Grafik */
.st-chart { display: block; width: 100%; height: auto; overflow: visible; }
.st-grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.st-axis, .st-xdate { fill: rgba(255, 255, 255, 0.5); font-size: 8.5px; font-variant-numeric: tabular-nums; }
.st-xlabel { fill: rgba(255, 255, 255, 0.78); font-size: 9px; font-weight: 700; }
.st-band { fill: rgba(255, 255, 255, 0.06); }
.st-band-label { fill: rgba(255, 255, 255, 0.5); font-size: 8.5px; font-weight: 700; letter-spacing: 0.4px; }
.st-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.st-pt { fill: var(--accent); stroke: #0E0E0E; stroke-width: 1.5; }
.st-bar { fill: var(--accent); }
.st-zero { stroke: rgba(255, 255, 255, 0.35); stroke-width: 2; stroke-linecap: round; }
.st-avg { stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.2; stroke-dasharray: 4 3; }
.st-res { stroke: #0E0E0E; stroke-width: 1; }
.st-hit { cursor: default; }
.st-hit:hover .st-pt { r: 5; }
.st-hit:hover .st-bar { fill: var(--accent-soft); }

/* Yorum */
.sc-insight { margin: 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.88); }
.sc-arrow { font-size: 10px; margin-right: 3px; vertical-align: 1px; color: rgba(255, 255, 255, 0.6); }
.sc-insight.is-good .sc-arrow { color: var(--accent); }
.sc-insight.is-bad .sc-arrow { color: #FF817C; }

.sc-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: 11.5px; color: rgba(255, 255, 255, 0.5); }
.sc-table summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.sc-table[open] { flex: 1 1 100%; }
.sc-foot:has(.sc-table[open]) { flex-wrap: wrap; }
.sc-table table { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 12px; color: rgba(255, 255, 255, 0.82); font-variant-numeric: tabular-nums; }
.sc-table th, .sc-table td { padding: 3px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); text-align: left; }
.sc-table th { font-weight: 700; color: rgba(255, 255, 255, 0.6); }
.sc-table td:last-child, .sc-table th:last-child { text-align: right; }

.season-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.58); }

@media (max-width: 560px) {
  .sc-nums span { font-size: 14px; }
  .season-card { padding: 12px; }
}