/* Ballinc — tema değişkenleri açık modda tanımlı, koyu modda yeniden atanıyor.
   Üç durum: data-theme="light" / "dark" / "auto" (sistemi izler). */

:root {
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --surface-3: #e4e8ee;
  --border: #dde1e8;
  --text: #12151a;
  --text-muted: #646c78;
  --accent: #0b7d51;
  --accent-soft: #e2f3eb;
  --home: #2f7de1;
  --draw: #97a0ae;
  --away: #e2603a;
  --warn: #a96700;
  --warn-soft: #fdf3e2;
  --crest-bg: #f2f4f7;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 20, 28, .05), 0 6px 16px rgba(16, 20, 28, .05);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1014;
    --surface: #161a20;
    --surface-2: #1e232b;
    --surface-3: #272d36;
    --border: #2a3038;
    --text: #e9ebef;
    --text-muted: #8b93a0;
    --accent: #35c98a;
    --accent-soft: #10281f;
    --home: #5c9dfa;
    --draw: #78818f;
    --away: #f0805c;
    --warn: #e0a24a;
    --warn-soft: #2a2113;
    --crest-bg: #232932;
    --shadow: 0 1px 2px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0d1014;
  --surface: #161a20;
  --surface-2: #1e232b;
  --surface-3: #272d36;
  --border: #2a3038;
  --text: #e9ebef;
  --text-muted: #8b93a0;
  --accent: #35c98a;
  --accent-soft: #10281f;
  --home: #5c9dfa;
  --draw: #78818f;
  --away: #f0805c;
  --warn: #e0a24a;
  --warn-soft: #2a2113;
  --crest-bg: #232932;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
img { max-width: 100%; }

.wrap { width: min(940px, 100% - 1.75rem); margin-inline: auto; }
.muted { color: var(--text-muted); }
.loading { padding: 3rem 0; text-align: center; color: var(--text-muted); }

/* Lig logoları: koyu temada okunmayanlar için ayrı varyant var. */
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: inline-block; }
}

/* ─── Üst bar ─────────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner { display: flex; align-items: center; gap: .85rem; min-height: 54px; }

.brand {
  display: flex; align-items: center; gap: .4rem;
  font-weight: 750; font-size: 1.08rem; letter-spacing: -.02em;
  color: var(--text); text-decoration: none; flex-shrink: 0;
}
/* Logo hem açık hem koyu zeminde çalışan tek bir yeşil işaret; ayrı
   varyant gerekmiyor. */
.brand-mark { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }

.leagues { display: flex; gap: .2rem; overflow-x: auto; flex: 1; scrollbar-width: none; }
.leagues::-webkit-scrollbar { display: none; }

.league-tab {
  display: flex; align-items: center; gap: .4rem;
  flex-shrink: 0;
  padding: .34rem .65rem;
  border-radius: 999px;
  font-size: .855rem;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background .12s, color .12s;
}
.league-tab img { width: 17px; height: 17px; object-fit: contain; }
.league-tab:hover { background: var(--surface-2); color: var(--text); }
.league-tab[aria-current="page"] {
  background: var(--accent-soft); color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  font-weight: 620;
}

.icon-btn {
  flex-shrink: 0;
  width: 33px; height: 33px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text-muted);
  cursor: pointer; font-size: .95rem;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

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

.page-head { padding: 1.4rem 0 .6rem; }
.page-title { display: flex; align-items: center; gap: .65rem; }
.page-title img { width: 34px; height: 34px; object-fit: contain; }
.page-head h1 { margin: 0; font-size: 1.42rem; letter-spacing: -.025em; }
.page-head .sub { margin: .25rem 0 0; font-size: .86rem; color: var(--text-muted); }

.tabs { display: flex; gap: .1rem; margin-top: .9rem; border-bottom: 1px solid var(--border); }
.tab {
  padding: .5rem .8rem; font-size: .9rem;
  color: var(--text-muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 620; }

/* ─── Maç listesi ─────────────────────────────────────────────────────── */

.date-head {
  position: sticky; top: 54px; z-index: 5;
  padding: .85rem .3rem .4rem;
  background: var(--bg);
  font-size: .78rem; font-weight: 680;
  color: var(--text-muted);
  text-transform: capitalize; letter-spacing: .03em;
}

.match-list {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}

.match {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto 1rem;
  align-items: center;
  gap: .8rem;
  padding: .7rem .85rem;
  background: var(--surface);
  color: inherit; text-decoration: none;
  transition: background .12s;
}
a.match:hover { background: var(--surface-2); }

.match-time { font-size: .84rem; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.match-time .tbd { display: block; font-size: .63rem; color: var(--warn); }

.match-teams { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.team-line { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-line.dim .team-name { color: var(--text-muted); }
.team-score { margin-left: auto; padding-left: .5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.crest {
  width: 21px; height: 21px; flex-shrink: 0;
  object-fit: contain;
  border-radius: 4px;
  background: var(--crest-bg);
}
.crest.lg { width: 52px; height: 52px; border-radius: 10px; padding: 3px; }

.match-markets { display: flex; flex-direction: column; gap: .3rem; align-items: stretch; }

.odds { display: flex; gap: .22rem; }
.odds-cell {
  min-width: 3rem;
  text-align: center;
  padding: .26rem .3rem;
  border-radius: 7px;
  background: var(--surface-2);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.odds-cell span { display: block; font-size: .6rem; color: var(--text-muted); letter-spacing: .04em; }
.odds-cell b { display: block; font-size: .84rem; font-weight: 650; }
.odds-cell.best { background: var(--accent-soft); color: var(--accent); }
.odds-cell.best span { color: inherit; opacity: .72; }

/* Kullanıcı diğer tahminleri görmek için tıklamak gerektiğini bilmeyebilir,
   bu yüzden en önemli iki market satırda doğrudan görünüyor. */
.extra { display: flex; gap: .28rem; }
.extra-chip {
  flex: 1;
  text-align: center;
  padding: .16rem .35rem;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: .68rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.extra-chip b { color: var(--text); font-weight: 620; font-variant-numeric: tabular-nums; }

.chev { color: var(--text-muted); font-size: 1.1rem; text-align: right; }

/* ─── Hafta seçici ────────────────────────────────────────────────────── */

.weeks {
  display: flex; gap: .3rem; overflow-x: auto;
  padding: .85rem .1rem .2rem;
  scrollbar-width: none;
}
.weeks::-webkit-scrollbar { display: none; }
.week-chip {
  flex-shrink: 0;
  padding: .42rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: .8rem; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.week-chip:hover { background: var(--surface-2); color: var(--text); }
.week-chip[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 620;
}

/* ─── Maç detayı ──────────────────────────────────────────────────────── */

/* Cıplak bir bağlantı olarak sayfanın tepesinde asılı duruyordu; tıklanabilir
   bir hedef gibi görünsün diye çip haline getirildi. */
.back {
  display: inline-flex; align-items: center; gap: .35rem;
  margin: 1.1rem 0 .9rem;
  padding: .34rem .75rem .34rem .55rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted); font-size: .84rem; font-weight: 550;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.back:hover { background: var(--surface-2); color: var(--text); }
.back .arrow { font-size: 1rem; line-height: 1; }
.back img { width: 16px; height: 16px; object-fit: contain; }

/* Üç sütunlu düzen artık içteki .hero-names'te; hero'nun kendisi dikey
   akıyor ki olasılık çubuğu tam genişlikte alta gelsin. */
.match-hero {
  display: block;
  padding: 1.5rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  text-align: center; box-shadow: var(--shadow);
}
.hero-team { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.hero-team strong { font-size: 1.02rem; line-height: 1.25; }
.hero-team span { font-size: .74rem; color: var(--text-muted); }
.hero-mid { font-size: .78rem; color: var(--text-muted); }
.hero-mid strong { display: block; font-size: 1.25rem; color: var(--text); font-variant-numeric: tabular-nums; }

.card {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; margin-top: .9rem;
  box-shadow: var(--shadow);
}
.card > h2 {
  margin: 0 0 .8rem; font-size: .95rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}

.badge {
  font-size: .67rem; font-weight: 640;
  padding: .13rem .45rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}
.badge.weak { background: var(--warn-soft); color: var(--warn); }

.bars { display: flex; flex-direction: column; gap: .55rem; }
.bar-row { display: grid; grid-template-columns: 6.5rem 1fr 3rem; align-items: center; gap: .6rem; font-size: .87rem; }
.bar-track { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--draw); transition: width .3s; }
.bar-fill.home { background: var(--home); }
.bar-fill.away { background: var(--away); }
.bar-fill.yes { background: var(--accent); }
.bar-pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 640; }

.note {
  margin: .8rem 0 0; padding: .6rem .7rem;
  background: var(--warn-soft); border-left: 3px solid var(--warn);
  border-radius: 5px; font-size: .8rem; color: var(--text);
}

.scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: .5rem; }
.score-cell { text-align: center; padding: .6rem .3rem; background: var(--surface-2); border-radius: 9px; }
.score-cell b { display: block; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.score-cell span { font-size: .71rem; color: var(--text-muted); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-col h3 { margin: 0 0 .5rem; font-size: .8rem; color: var(--text-muted); font-weight: 640; }
.pills { display: flex; gap: .25rem; }
.pill {
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 6px; font-size: .71rem; font-weight: 700;
  background: var(--surface-3); color: var(--text-muted);
}
.pill.G { background: var(--accent-soft); color: var(--accent); }
.pill.M { background: color-mix(in srgb, var(--away) 18%, transparent); color: var(--away); }

/* ─── Tablolar ────────────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { padding: .48rem .5rem; text-align: right; white-space: nowrap; }
th { font-size: .7rem; color: var(--text-muted); font-weight: 640; text-transform: uppercase; letter-spacing: .04em; }
table:not(.table-metrics) th:nth-child(2),
table:not(.table-metrics) td:nth-child(2) { text-align: left; width: 100%; white-space: normal; }
.table-metrics th:first-child, .table-metrics td:first-child { text-align: left; width: 100%; }
tbody tr { border-top: 1px solid var(--border); }
td.rank { color: var(--text-muted); font-variant-numeric: tabular-nums; }
td.pts { font-weight: 700; }
/* Sınıf <td> değil içindeki <span>'de; `td.team-cell` yazıldığı için kural
   hiç uygulanmıyordu ve arma yazının taban çizgisine oturup satırı yamultuyordu. */
.team-cell { display: inline-flex; align-items: center; gap: .45rem; line-height: 1; }
.team-cell .crest { width: 20px; height: 20px; }

/* ─── Boş durum ───────────────────────────────────────────────────────── */

.empty {
  padding: 2.5rem 1rem; text-align: center;
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius); color: var(--text-muted); font-size: .9rem;
}

/* ─── Alt bilgi ───────────────────────────────────────────────────────── */

.footer {
  margin-top: 3rem; padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--border);
  font-size: .8rem; color: var(--text-muted);
}
.footer p { margin: .35rem 0; }

@media (max-width: 620px) {
  .match {
    grid-template-columns: 2.8rem minmax(0, 1fr) 1rem;
    row-gap: .55rem;
  }
  .match-markets { grid-column: 1 / -1; }
  .odds-cell { flex: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .match-hero { padding: 1.15rem .7rem; gap: .5rem; }
  .bar-row { grid-template-columns: 5rem 1fr 2.7rem; }
  .crest.lg { width: 42px; height: 42px; }
  .page-title img { width: 28px; height: 28px; }
}


/* ─── Tarih şeridi (ana sayfa) ────────────────────────────────────────── */

/* position+z-index zorunlu: #view > * üzerindeki opaklık animasyonu bu
   öğeye kendi yığınlama bağlamını veriyor (fill-mode `both` yüzünden kalıcı
   olarak). O bağlam olmadan takvimin z-index'i kök seviyede geçerli olmuyor
   ve DOM'da sonra gelen maç listesi takvimin üstüne biniyor. */
.datestrip {
  position: relative; z-index: 40;
  display: flex; align-items: center; gap: .5rem;
  margin: 1rem 0 .4rem;
  padding: .55rem .6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.strip-track {
  display: flex; gap: .25rem; flex: 1;
  overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
}
.strip-track::-webkit-scrollbar { display: none; }

.day-btn {
  flex: 1 0 auto; min-width: 4.6rem;
  display: flex; flex-direction: column; align-items: center; gap: .18rem;
  padding: .55rem .4rem;
  border: 1px solid transparent; border-radius: 9px;
  background: none; color: var(--text-muted);
  font: inherit; font-size: .78rem; cursor: pointer;
  line-height: 1.25;
}
.day-btn .dow { font-size: .68rem; letter-spacing: .06em; }
.day-btn .dnum { font-variant-numeric: tabular-nums; font-weight: 640; font-size: .86rem; color: var(--text); }
.day-btn .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); margin-top: .1rem;
}
.day-btn:hover { background: var(--surface-2); }
.day-btn[aria-pressed="true"] {
  background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--accent);
}
.day-btn[aria-pressed="true"] .dnum { color: var(--accent); }
.day-btn:disabled { opacity: .32; cursor: default; }
.day-btn:disabled:hover { background: none; }

/* Ok ve takvim düğmeleri aynı ölçüde; dar-uzun kutu içinde ikon sıkışık
   duruyordu. */
.strip-nav {
  flex-shrink: 0;
  width: 38px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text-muted);
  cursor: pointer; font-size: 1.05rem; line-height: 1;
}
.strip-nav svg { display: block; }
.cal-btn[aria-expanded="true"] {
  background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent);
}
.strip-nav:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.strip-nav:disabled { opacity: .3; cursor: default; }
.strip-date { position: relative; }
.strip-date input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
  border: 0; padding: 0;
}

/* ─── Hafta carousel'i ────────────────────────────────────────────────── */

.week-bar { display: flex; align-items: center; gap: .35rem; margin: .9rem 0 .2rem; }
/* Kaydırıcı hissi: seçili hafta ortada, komşular kenarlarda görünüyor.
   scroll-snap sayesinde parmakla kaydırınca haftalar yerine oturuyor. */
.weeks {
  display: flex; gap: .35rem; flex: 1;
  overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
  scroll-snap-type: x mandatory;
  padding: .2rem .1rem;
}
/* Kenar solması yalnızca şerit gerçekten taşıyorsa: az sayıda hafta varken
   solma, çipleri pasifmiş gibi gösteriyordu. Sınıf JS tarafından ekleniyor. */
.weeks.scrollable {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.6rem,
                                      #000 calc(100% - 1.6rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 1.6rem,
                                      #000 calc(100% - 1.6rem), transparent);
}
.weeks::-webkit-scrollbar { display: none; }
.week-chip { scroll-snap-align: center; }

/* ─── Maç sayfası ─────────────────────────────────────────────────────── */

.hero-names { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }

/* 1X2 tek bir yığılmış çubukta: üç ayrı çubuk yerine payların birbirine
   göre büyüklüğü tek bakışta okunuyor. */
.prob-bar {
  display: flex; height: 34px; margin-top: 1.1rem;
  border-radius: 9px; overflow: hidden;
  background: var(--surface-3);
}
.prob-seg {
  display: grid; place-items: center;
  font-size: .82rem; font-weight: 700; color: #fff;
  min-width: 0; overflow: hidden;
  transition: flex-grow .3s;
}
.prob-seg.home { background: var(--home); }
.prob-seg.draw { background: var(--draw); }
.prob-seg.away { background: var(--away); }

.prob-legend {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: .5rem; margin-top: .5rem;
  font-size: .72rem; color: var(--text-muted);
}
.prob-legend span { display: flex; align-items: center; gap: .3rem; }
.prob-legend i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.prob-legend span:nth-child(2) { justify-content: center; }
.prob-legend span:nth-child(3) { justify-content: flex-end; }

.headline {
  display: flex; align-items: center; gap: 1.1rem;
  padding: .3rem 0;
}
.headline-score {
  font-size: 2.1rem; font-weight: 750; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.headline-meta { font-size: .8rem; color: var(--text-muted); }
.headline-meta b { color: var(--text); font-size: .95rem; }

/* Takım karşılaştırması: değerler ortadan iki yana büyüyor. */
.compare { display: flex; flex-direction: column; gap: .6rem; }
.compare-row {
  display: grid; grid-template-columns: 2.6rem 1fr auto 1fr 2.6rem;
  align-items: center; gap: .5rem;
  font-size: .82rem; font-variant-numeric: tabular-nums;
}
.compare-row .lbl {
  grid-column: 3; text-align: center;
  font-size: .68rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.cmp-track { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; display: flex; }
.cmp-track.left { justify-content: flex-end; }
.cmp-fill { height: 100%; background: var(--home); border-radius: 999px; }
.cmp-track.right .cmp-fill { background: var(--away); }
.compare-row .v { color: var(--text); font-weight: 620; }
.compare-row .v.r { text-align: right; }

.compare-head {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: .5rem;
  margin-bottom: .9rem; font-size: .85rem; font-weight: 650;
}
.compare-head .t { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.compare-head .t.r { justify-content: flex-end; }
.compare-head .t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 620px) {
  .headline-score { font-size: 1.7rem; }
  .compare-row { grid-template-columns: 2.2rem 1fr auto 1fr 2.2rem; gap: .35rem; font-size: .78rem; }
  .day-btn { min-width: 3.5rem; }
}

/* ─── Takvim ──────────────────────────────────────────────────────────── */
/* Tarayıcının yerleşik <input type="date"> penceresi CSS ile biçimlendirilemiyor
   ve siteyle uyumsuz duruyordu; bu yüzden takvim baştan yazıldı. */

.cal-wrap { position: relative; flex-shrink: 0; }

.cal {
  position: absolute; top: calc(100% + .45rem); right: 0; z-index: 30;
  width: 17.5rem; padding: .7rem;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18), var(--shadow);
}

.cal-head {
  display: grid; grid-template-columns: 2rem 1fr 2rem;
  align-items: center; gap: .3rem; margin-bottom: .5rem;
}
.cal-head strong { text-align: center; font-size: .88rem; }
.cal-nav {
  width: 2rem; height: 2rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: none; color: var(--text-muted);
  cursor: pointer; font-size: .95rem;
}
.cal-nav:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.cal-nav:disabled { opacity: .3; cursor: default; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .15rem; }
.cal-dow {
  margin-bottom: .2rem;
  font-size: .68rem; color: var(--text-muted); text-align: center;
  letter-spacing: .03em;
}

.cal-day {
  aspect-ratio: 1; display: grid; place-items: center;
  position: relative;
  border: 1px solid transparent; border-radius: 8px;
  background: none; color: var(--text);
  font: inherit; font-size: .8rem; font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.cal-day:hover:not(:disabled) { background: var(--surface-2); }
.cal-day:disabled { color: var(--text-muted); opacity: .35; cursor: default; }
.cal-day.today { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.cal-day[aria-pressed="true"] {
  background: var(--accent); color: #fff; font-weight: 680; border-color: var(--accent);
}
/* Maçı olan günler noktalı: kullanıcı hangi güne tıklayabileceğini görsün. */
.cal-day .cal-dot {
  position: absolute; bottom: .22rem;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}
.cal-day[aria-pressed="true"] .cal-dot { background: #fff; }
.cal-empty { aspect-ratio: 1; }

.cal-foot {
  display: flex; justify-content: flex-end;
  margin-top: .5rem; padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.cal-today-btn {
  border: 0; background: none; color: var(--accent);
  font: inherit; font-size: .8rem; font-weight: 620; cursor: pointer;
  padding: .2rem .4rem; border-radius: 6px;
}
.cal-today-btn:hover:not(:disabled) { background: var(--accent-soft); }
.cal-today-btn:disabled { color: var(--text-muted); cursor: default; }


/* ─── Sonuçlarda geçmiş tahmin ────────────────────────────────────────── */

.pred-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .16rem .45rem;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: .68rem; color: var(--text-muted);
  white-space: nowrap;
}
.pred-chip b { color: var(--text); font-weight: 620; font-variant-numeric: tabular-nums; }
.pred-chip .mark { font-weight: 700; }
.pred-chip.hit { background: var(--accent-soft); color: var(--accent); }
.pred-chip.hit b { color: inherit; }
.pred-chip.miss { background: color-mix(in srgb, var(--away) 15%, transparent); color: var(--away); }
.pred-chip.miss b { color: inherit; }


/* ─── Ana sayfada lig başlığı ─────────────────────────────────────────── */

.league-head {
  display: flex; align-items: center; gap: .5rem;
  margin: .85rem 0 .35rem;
  padding: .45rem .7rem;
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 9px;
  color: inherit; text-decoration: none;
  transition: background .12s;
}
.league-head:hover { background: var(--surface-3); }
.league-head img { width: 19px; height: 19px; object-fit: contain; }
.lh-name { font-size: .86rem; font-weight: 640; }
.lh-count { margin-left: auto; font-size: .74rem; color: var(--text-muted); }
.league-head .chev { font-size: 1rem; color: var(--text-muted); }


/* ─── Model / piyasa tablosu ──────────────────────────────────────────── */

.market-table td.pos { color: var(--accent); font-weight: 680; }
.market-table th:first-child, .market-table td:first-child { width: auto; }
.market-table td { font-variant-numeric: tabular-nums; }

/* ─── Hareket ─────────────────────────────────────────────────────────── */
/* Tamamı prefers-reduced-motion ile kapanıyor: hareket hassasiyeti olan
   kullanıcılar için bu bir erişilebilirlik gereği, tercih değil.
   GSAP yerine CSS: bu efektler tarayıcının kendi imkânlarıyla ek bir
   bağımlılık ve indirme maliyeti olmadan yapılabiliyor. */

@media (prefers-reduced-motion: no-preference) {

  @keyframes rise {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes pop {
    from { opacity: 0; transform: scale(.96) translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes growX {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* Görünüm değişince içerik yumuşak giriyor. */
  #view > * { animation: fade .22s ease both; }

  /* Maç ve sonuç satırları sırayla beliriyor. Gecikme 10. satırdan sonra
     sabitleniyor: 25 maçlık bir günde son satırın 1 saniye beklemesi
     akıcı değil, yavaş hissettirir. */
  .match-list .match {
    animation: rise .3s cubic-bezier(.22, .68, .36, 1) both;
    animation-delay: calc(min(var(--i, 0), 10) * 26ms);
  }

  .league-head { animation: rise .3s ease both; }
  .card { animation: rise .34s cubic-bezier(.22, .68, .36, 1) both; }
  .match-hero { animation: rise .36s cubic-bezier(.22, .68, .36, 1) both; }

  /* Takvim sağ üstten açılıyor — düğmeden çıkıyormuş gibi. */
  .cal { animation: pop .18s cubic-bezier(.2, .8, .3, 1) both; transform-origin: top right; }

  /* Çubuklar soldan büyüyor. scaleX kullanılıyor çünkü genişlik satır içi
     stille veriliyor ve CSS onu hedef olarak alamıyor. */
  .bar-fill, .cmp-track .cmp-fill {
    transform-origin: left;
    animation: growX .5s cubic-bezier(.22, .68, .36, 1) both;
  }
  .cmp-track.left .cmp-fill { transform-origin: right; }
  .prob-bar { animation: rise .4s cubic-bezier(.22, .68, .36, 1) both; }

  .datestrip { animation: rise .3s ease both; }
  .day-btn, .week-chip, .league-tab, .odds-cell, .strip-nav, .back {
    transition: background .15s ease, color .15s ease,
                border-color .15s ease, transform .12s ease;
  }
  .day-btn:active, .week-chip:active, .strip-nav:active { transform: scale(.95); }
  a.match { transition: background .15s ease; }
  .crest, .brand-mark { transition: transform .2s ease; }
  a.match:hover .crest { transform: scale(1.08); }
  .brand:hover .brand-mark { transform: rotate(-12deg); }
}

/* Ay değişiminde yalnızca gün ızgarası, gidilen yönden kayarak geliyor.
   Kutunun tamamını yeniden çizmek açılış animasyonunu tekrarlatıyordu. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes calSlide {
    from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 16px)); }
    to   { opacity: 1; transform: none; }
  }
  .cal-slide { animation: calSlide .2s cubic-bezier(.22, .68, .36, 1) both; }
  .cal-head strong { transition: none; }
}