/* ============================================================
   Kickly uygulaması — kabuk ve ortak bileşenler.
   Belirteçler tokens.css'te (koyu varsayılan, açık tema). Tanıtım sitesinin
   yayın grafiği dili: mürekkep zemin, tek yeşil vurgu, canlı için kırmızı,
   Archivo başlık/rakam + Manrope metin.

   Kurallar:
   • Yalnızca mantıksal özellikler (margin-inline-*, padding-inline-*,
     inset-inline-*, text-align: start) — RTL (ar) aynalaması kendiliğinden.
   • Skor ve sayılar .score / .num: direction ltr + unicode-bidi isolate.
   • Oran/genişlik yalnız style="--w:58%" gibi tek özel özellikle (Ruling F: CSP
     style-src-attr'a izin verir); değer sunucuda sayıdan üretilir. Başka satır
     içi stil yok.

   Bileşenler: .btn .iconbtn .tag .badge .chip .seg .pane .card .meter .empty
   ============================================================ */

/* ── Temel ──────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--topbar-h) + var(--sp-4));
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Üstten düşen hafif stadyum ışığı; içerik yüzeyleri düz kalır. */
  background:
    radial-gradient(1100px 420px at 50% -180px, var(--glow), transparent 70%) no-repeat,
    var(--ink);
  color: var(--txt);
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.5;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
/* display: grid/flex veren bileşen kuralları hidden özniteliğini ezmesin (liste süzgeci satırları böyle gizler). */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--green); color: var(--on-green); }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 6px;
}
#center:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: -60px;
  inset-inline-start: var(--sp-4);
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--green);
  color: var(--on-green);
  font-weight: 700;
  transition: inset-block-start .2s var(--ease);
}
.skip-link:focus { inset-block-start: var(--sp-3); }

/* Sayılar hizalı; skor yönü RTL'de de "2 - 1" kalır. */
.num { font-variant-numeric: tabular-nums; }
.score {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

/* htmx kendi göstergesi stilini eklemiyor (includeIndicatorStyles:false). */
.htmx-indicator { opacity: 0; transition: opacity .2s var(--ease); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ── Düğmeler ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 42px;
  padding-inline: 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--display);
  font-size: var(--fs-base);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--green); color: var(--on-green); }
.btn--primary:hover { background: var(--green-2); }
.btn--ghost { background: transparent; border-color: var(--line-2); color: var(--txt); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--sm { min-height: 38px; padding-inline: 14px; font-size: var(--fs-sm); }
.btn--block { display: flex; width: 100%; }

.iconbtn {
  display: inline-grid;
  place-items: center;
  grid-auto-flow: column;
  gap: 6px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--txt-2);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.iconbtn:hover { background: var(--surface-2); color: var(--txt); }
.iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn--wide { padding-inline: 11px 13px; }
.iconbtn--sm { min-width: 32px; height: 32px; }
.iconbtn--sm svg { width: 16px; height: 16px; stroke-width: 2; }

/* ── Üst çubuk ──────────────────────────────────────────── */

.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-block-end: 1px solid var(--line);
}

.topbar__inner {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: var(--track-tight);
  font-variation-settings: 'wdth' 112;
  direction: ltr;
}
.brand__logo { width: 30px; height: 30px; border-radius: 8px; }

.search { position: relative; flex: 0 1 380px; min-width: 0; }
.search__icon {
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: 50%;
  translate: 0 -50%;
  width: 17px; height: 17px;
  fill: none; stroke: var(--txt-2); stroke-width: 2; stroke-linecap: round;
  pointer-events: none;
}
.search__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 40px;
  padding-inline: 40px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--txt);
  font-size: var(--fs-base);
  font-weight: 500;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search__input::placeholder { color: var(--txt-2); opacity: 1; }
.search__input:hover { border-color: var(--txt-3); }
.search__input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

.topnav { display: flex; align-self: stretch; }
.topnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--sp-3);
  font-family: var(--display);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--txt-2);
  transition: color .2s var(--ease);
}
.topnav__link:hover { color: var(--txt); }
.topnav__link[aria-current="page"] { color: var(--txt); }
/* Etkin sekme: alt kenarda yayın grafiği gibi yeşil çizgi */
.topnav__link[aria-current="page"]::after {
  content: '';
  position: absolute;
  inset-inline: var(--sp-3);
  inset-block-end: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--green);
}

/* Geniş ekranda üst çubuk kabuğun kolonlarına oturur: logo alanı = liste kolonu,
   arama orta bölmenin başlangıç çizgisinden başlar. */
@media (min-width: 1024px) {
  .topbar__inner { gap: var(--pane-gap); }
  .topbar__inner > .brand { inline-size: var(--col-side); }
  /* Logo kilidi (işaret + Kickly) RTL'de de soldan sağa; kutunun satır başı kenarına yaslanır. */
  [dir="rtl"] .topbar__inner > .brand { justify-content: flex-end; }
  .topnav { margin-inline-start: var(--sp-2); }
}

.topbar__tools {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline-start: auto;
}

/* Tema düğmesi hedef temayı gösterir: koyuda güneş, açıkta ay. */
[data-theme-toggle] .icon-moon { display: none; }
:root[data-theme="light"] [data-theme-toggle] .icon-sun { display: none; }
:root[data-theme="light"] [data-theme-toggle] .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root[data-theme]:not([data-theme="dark"]) [data-theme-toggle] .icon-sun { display: none; }
  :root[data-theme]:not([data-theme="dark"]) [data-theme-toggle] .icon-moon { display: block; }
}

/* Dil seçici: <details>, betiksiz de çalışır. */
.langmenu { position: relative; }
.langmenu > summary { list-style: none; font-family: var(--display); font-size: var(--fs-sm); font-weight: 700; }
.langmenu > summary::-webkit-details-marker { display: none; }
.langmenu[open] > summary { background: var(--surface-2); color: var(--txt); }
.langmenu__list {
  position: absolute;
  inset-block-start: calc(100% + var(--sp-2));
  inset-inline-end: 0;
  z-index: 60;
  width: 220px;
  padding: 6px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.langmenu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 8px 10px;
  border-radius: var(--r-xs);
  color: var(--txt);
  font-weight: 600;
}
.langmenu__item:hover { background: var(--surface-2); }
.langmenu__item[aria-current="true"] { background: var(--green-soft); color: var(--green); }
.langmenu__tag { font-family: var(--display); font-size: var(--fs-2xs); font-weight: 700; color: var(--txt-2); }
.langmenu__item[aria-current="true"] .langmenu__tag { color: inherit; }

/* ── Kabuk: üç bölme ────────────────────────────────────────
   <1024 tek kolon (belge sırası: liste, orta, sağ) · 1024–1279 iki kolon,
   sağ kolon orta bölmenin altında · ≥1280 üç kolon. */

.shell {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: var(--pane-gap) var(--shell-pad) var(--sp-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pane-gap);
  align-items: start;
  /* Kabuk alt bilgiyi aşağı itmek için uzar; satırlar uzamasın. */
  align-content: start;
}

#mid, #center, #grid-view, #right-col, #right-grid {
  display: grid;
  gap: var(--pane-gap);
  align-content: start;
  min-width: 0;
}
#right-col:empty, #right-grid:empty { display: none; }
/* Yalnız gizli canlı kökleri olan sağ kolon (oynanmamış maçın barem kökü) da yer kaplamaz. */
#right-col:not(:has(> :not([hidden]))) { display: none; }

@media (min-width: 1024px) {
  /* İkinci satır esnek: iki satıra yayılan liste kolonunun fazla yüksekliği orta bölme ile sağ kolon
     arasına boşluk olarak bölüştürülmesin, alttaki satıra gitsin. */
  .shell { grid-template-columns: var(--col-side) minmax(0, 1fr); grid-template-rows: auto 1fr; }

  /* Yan kolonlar kendi içinde kayar; sayfa kaydıkça yerinde durur. */
  #left-col, #right-col, #right-grid {
    position: sticky;
    inset-block-start: calc(var(--topbar-h) + var(--pane-gap));
    max-height: calc(100vh - var(--topbar-h) - 2 * var(--pane-gap));
    max-height: calc(100dvh - var(--topbar-h) - 2 * var(--pane-gap));
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
  }
  #left-col { grid-column: 1; grid-row: 1 / span 2; }
  #mid { grid-column: 2; grid-row: 1; }
  /* İki kolonda sağ kolon orta bölmenin altında, sayfayla birlikte akar. */
  #right-col, #right-grid { grid-column: 2; grid-row: 2; position: static; max-height: none; overflow: visible; }
}

@media (min-width: 1280px) {
  .shell { grid-template-columns: var(--col-side) minmax(0, 1fr) var(--col-side); grid-template-rows: auto; }
  .shell:has(> #right-col:empty) { grid-template-columns: var(--col-side) minmax(0, 1fr); }
  /* :has iç içe yazılamaz: "görünür çocuğu olan sağ kolon yok" tek :has ile. */
  .shell:not(.shell--solo):not(:has(> #right-col > :not([hidden]))) { grid-template-columns: var(--col-side) minmax(0, 1fr); }
  #left-col { grid-row: 1; }
  #right-col, #right-grid {
    grid-column: 3;
    grid-row: 1;
    position: sticky;
    max-height: calc(100vh - var(--topbar-h) - 2 * var(--pane-gap));
    max-height: calc(100dvh - var(--topbar-h) - 2 * var(--pane-gap));
    overflow: auto;
  }
}

/* ── Bölme ──────────────────────────────────────────────── */

.pane {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
}

.pane__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) 18px 14px;
  border-block-end: 1px solid var(--line);
}
/* Liste bölmesinde başlık (Task 5: gün şeridi + filtreler) bölme kendi içinde kayarken
   üstte kalır — yalnız ≥1024'te; dar ekranda bölme kaydırma kabı değildir. */
@media (min-width: 1024px) {
  .pane--list > .pane__head {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: var(--surface);
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
  }
}

.pane__title {
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--track-tight);
  font-variation-settings: 'wdth' 110;
}
.pane__title--lead { font-size: var(--fs-xl); line-height: 1.1; }

.pane__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--sp-2);
  margin-block-start: 6px;
  color: var(--txt-2);
  font-size: var(--fs-sm);
}

.pane__body { padding: var(--sp-4) 18px; }

/* ── Küçük öğeler ───────────────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding-inline: var(--sp-2);
  border-radius: 6px;
  background: var(--green-soft);
  color: var(--green);
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.tag--quiet { background: var(--surface-2); color: var(--txt-2); }

/* Rozetler: CANLI (yayın etiketi), dakika, MS */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding-inline: 7px;
  border-radius: 6px;
  font-family: var(--display);
  font-size: var(--fs-2xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}
.badge--live { background: var(--live-soft); color: var(--live); text-transform: uppercase; letter-spacing: var(--track-caps); }
.badge--live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: kk-blink 1.6s var(--ease) infinite;
}
.badge--min { background: var(--green-soft); color: var(--green); }
.badge--ft { background: var(--surface-2); color: var(--txt-2); }
.badge--warn { background: var(--amber-soft); color: var(--amber); }

@keyframes kk-blink { 50% { opacity: .25; } }

/* Filtre çipleri (Tümü / Canlı / 📌) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--txt-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover { color: var(--txt); border-color: var(--txt-3); }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--green-soft); border-color: transparent; color: var(--green); }

/* Bölümlü anahtar (Tek maç | Izgara, Maç / 1. Yarı / 2. Yarı) */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.seg__btn {
  height: 30px;
  padding-inline: var(--sp-3);
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--txt-2);
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.seg__btn:hover { color: var(--txt); }
.seg__btn[aria-pressed="true"], .seg__btn[aria-selected="true"], .seg__btn[aria-current="true"] {
  background: var(--surface);
  color: var(--txt);
  box-shadow: 0 0 0 1px var(--line-2);
}

/* Bölme içindeki kart (istatistik, olaylar, barem) */
.card {
  min-width: 0;
  padding: 14px var(--sp-4);
  border-radius: var(--r-xs);
  background: var(--surface-2);
}
.card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-block-end: 10px;
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--txt-2);
}

/* İlerleme: <progress class="meter" value max> — satır içi stil gerektirmez. */
.meter {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 99px;
  background: var(--surface-3);
  color: var(--green-fill);
  overflow: hidden;
}
.meter::-webkit-progress-bar { background: var(--surface-3); border-radius: 99px; }
.meter::-webkit-progress-value { background: var(--green-fill); border-radius: 99px; }
.meter::-moz-progress-bar { background: var(--green-fill); border-radius: 99px; }
.meter--warn { color: var(--amber-fill); }
.meter--warn::-webkit-progress-value { background: var(--amber-fill); }
.meter--warn::-moz-progress-bar { background: var(--amber-fill); }

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

.empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 36px var(--sp-6) 40px;
  text-align: center;
}
.empty--wide { padding-block: 48px 52px; }

/* Çizimler (boş saha, boş skor kutusu) yalnızca çizgi rengiyle; tek yeşil nokta. */
.empty__art { width: 132px; height: auto; margin-block-end: 14px; overflow: visible; direction: ltr; }
.empty__art--bug { width: 212px; }
.empty__line { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.empty__spot { fill: var(--green-fill); }
.empty__body { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1.5; }
.empty__bar { fill: var(--surface-3); }
.empty__box { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
.empty__dash { fill: none; stroke: var(--txt-3); stroke-width: 2.5; stroke-linecap: round; }

.empty__title {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--track-tight);
}
.empty__text { max-width: 36ch; color: var(--txt-2); font-size: var(--fs-sm); }

/* ── Uygulama tanıtım kutusu (sağ kolon) ────────────────── */

.promo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--sp-5);
  container-type: inline-size;
}
/* Kutunun üst köşesinde saha çizgileri — tanıtım sitesindeki indirme bandının küçüğü */
.promo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(120% 70% at 100% 0%, #000, transparent 65%);
  mask-image: radial-gradient(120% 70% at 100% 0%, #000, transparent 65%);
}
.promo__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--green-soft);
  color: var(--green);
}
.promo__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.promo__title {
  margin-block: var(--sp-4) var(--sp-2);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}
.promo__text { color: var(--txt-2); font-size: var(--fs-sm); line-height: 1.55; margin-block-end: 18px; }
.promo__note { margin-block-start: 10px; text-align: center; color: var(--txt-2); font-size: var(--fs-xs); }
[dir="rtl"] .promo::before {
  -webkit-mask-image: radial-gradient(120% 70% at 0% 0%, #000, transparent 65%);
  mask-image: radial-gradient(120% 70% at 0% 0%, #000, transparent 65%);
}

/* Geniş yerleşimde (sağ kolon orta bölmenin altına indiğinde) yatay bant. */
@container (min-width: 560px) {
  .promo__layout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon title action" "icon text note";
    column-gap: var(--sp-5);
    align-items: center;
  }
  .promo__icon { grid-area: icon; }
  .promo__title { grid-area: title; margin: 0 0 4px; }
  .promo__text { grid-area: text; margin: 0; }
  .promo__layout > .btn { grid-area: action; width: auto; }
  .promo__note { grid-area: note; margin: 6px 0 0; }
}

/* ── Maç listesi (sol bölme) ────────────────────────────────
   Başlık: h1 + tarih, önceki/sonraki gün, gün şeridi, süzgeç çipleri.
   Bir günde 1000+ maç olabilir: satırlar sade, simgeler CSS maskesiyle. */

.list-head {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  padding-block-end: var(--sp-3);
}
.list-head__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.list-head__title { min-width: 0; }
.daynav { display: flex; gap: 6px; flex-shrink: 0; padding-block-start: 2px; }
[dir="rtl"] .daynav__btn svg { transform: scaleX(-1); }

/* Gün şeridi: bölme kenarına kadar taşar ki kaydırınca öğeler kesik görünmesin. */
.daystrip { margin-inline: -18px; }
.daystrip__list {
  /* Konumlu: içindeki .sr-only (position: absolute) kaydırma kabında kalsın, belgeyi yatay taşırmasın. */
  position: relative;
  display: flex;
  gap: 6px;
  padding-inline: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
}
/* Uzun solma satır sonunda (ileri günler o yönde): RTL'de aynalanır. */
[dir="rtl"] .daystrip__list {
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(270deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
}
.daystrip__list::-webkit-scrollbar { display: none; }
.daystrip li { flex: 0 0 auto; scroll-snap-align: center; }
.day {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 54px;
  padding: 6px 10px 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--txt-2);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.day:hover { background: var(--surface-2); border-color: var(--line-2); color: var(--txt); }
.day__label { font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; white-space: nowrap; }
.day__num {
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--track-tight);
  color: var(--txt);
}
.day--today .day__label { color: var(--green); }
.day[aria-current="date"] { background: var(--green); border-color: transparent; color: var(--on-green); }
.day[aria-current="date"] .day__label,
.day[aria-current="date"] .day__num { color: inherit; }

/* Süzgeç çipleri: sayı yanında, Archivo rakam. */
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip__n {
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--txt-3);
  direction: ltr;
  unicode-bidi: isolate;
}
.chip[aria-pressed="true"] .chip__n { color: inherit; }
.chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.chip--live[aria-pressed="true"] .chip__dot { animation: kk-blink 1.6s var(--ease) infinite; }
.chip--pins { padding-inline: 10px 12px; }

/* Sabitleme simgesi (raptiye): satır içi SVG yerine maske — 1000 satırda 1000 SVG çizilmesin. */
.pin-icon, .pin::before {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5h6M10 3.5v5.2L6.5 13v1.5h11V13L14 8.7V3.5M12 14.5V21'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5h6M10 3.5v5.2L6.5 13v1.5h11V13L14 8.7V3.5M12 14.5V21'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Lig bölümü başlığı: ince bant; ≥1024'te liste başlığının altına yapışır (yükseklik app.js'ten --list-head-h). */
.lg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 34px;
  padding: 6px 18px;
  background: var(--surface-2);
  border-block: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
}
.lg:first-child .lg__head { border-block-start-color: transparent; }
/* Ekran dışındaki lig grupları çizilmez ve yerleştirilmez (gün listesi ~400 grup, ~1.300 satır): telefonda ilk
   yüklemedeki stil + yerleşim süresi ~1 sn'den ~0,2 sn'ye. Tahmini yükseklik satır sayısından (--n, sunucu ve
   süzgeç yazar; başlık 33 px + satır 51,78 px): geri gelince kaydırma konumu ve açık maçı ortalama doğru yere iner.
   Sayfa içi arama çalışmaya devam eder. */
.lg { content-visibility: auto; contain-intrinsic-size: auto calc(33px + var(--n, 4) * 51.78px); }
.lg__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt-2); }
.lg__name { color: var(--txt); font-weight: 700; }
.lg__live {
  flex-shrink: 0;
  font-family: var(--display);
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
}
.lg__count { flex-shrink: 0; font-family: var(--display); font-weight: 700; color: var(--txt-3); }

/* Satır: [saat/dakika] [takımlar] [skor] + kardeş [raptiye]. */
.m {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  transition: background-color .15s var(--ease);
}
.m + .m { border-block-start: 1px solid var(--line); }
.m:hover { background: var(--surface-2); }
/* Sabitlenen satır: satır başı kenarında amber şerit (RTL'de kendiliğinden sağda). */
.m.is-pinned::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--amber-fill);
}

.row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 50px;
  padding-block: 7px;
  padding-inline: 12px 2px;
}
.row:focus-visible { outline-offset: -2px; border-radius: 4px; }

.row__clock {
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--txt-2);
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}
.row__clock--live { color: var(--green); }
.row__clock--ht { color: var(--amber); }
.row__clock--ft { color: var(--txt-3); }

.row__teams { display: grid; gap: 3px; min-width: 0; }
.row__team {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
}
.row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__team--win { font-weight: 800; }
.row__team--lose { color: var(--txt-2); }

.row__score {
  display: grid;
  gap: 3px;
  justify-items: end;
  min-width: 2ch;
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.3;
}
.m--live .row__score { color: var(--green); }
.row__state {
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: var(--fs-2xs);
  font-weight: 700;
  white-space: nowrap;
}
.m:has(.row__state) .row__team { color: var(--txt-2); }

/* Kırmızı kart: küçük kart biçimi; 2+ ise içinde sayı. */
.rc {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 9px;
  height: 12px;
  border-radius: 2px;
  background: var(--live);
  color: var(--on-live);
  font-family: var(--display);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}
.rc:not(:empty) { width: 12px; }

/* Raptiye düğmesi: dinlenirken soluk, satır üzerinde belirgin, sabitliyken amber. */
.pin {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-inline-end: 8px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--txt-3);
  opacity: .5;
  cursor: pointer;
  transition: opacity .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
}
.m:hover .pin, .pin:focus-visible { opacity: 1; }
.pin:hover { color: var(--txt); background: var(--surface-3); }
.pin[aria-pressed="true"] { opacity: 1; color: var(--amber); }
.pin[aria-pressed="true"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5h6M10 3.5v5.2L6.5 13v1.5h11V13L14 8.7V3.5M12 14.5V21'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5h6M10 3.5v5.2L6.5 13v1.5h11V13L14 8.7V3.5M12 14.5V21'/%3E%3C/svg%3E");
}
/* 6 sabit doluyken: kısa sarsıntı (Task 8 uyarı metnini ekler). */
.pin.pin--full { animation: kk-nudge .32s var(--ease); color: var(--live); opacity: 1; }
@keyframes kk-nudge { 25% { translate: -2px 0; } 75% { translate: 2px 0; } }

.list-empty { padding-block: 32px 40px; }

@media (min-width: 1024px) {
  .lg__head { position: sticky; inset-block-start: var(--list-head-h, 0px); z-index: 1; }
}

/* ── Öne çıkan maçlar (orta bölme) ──────────────────────────
   Yayın skor kutusu dili: lig + durum rozeti, armalar, koyu kutuda skor. */

.featured { container-type: inline-size; }
.featured > .pane__head { align-items: center; }
.featured__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-4) 18px 18px;
}
@container (min-width: 560px) {
  .featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Tek sütunda (telefon) ilk dört kart: öne çıkanlar orada listenin altında, sekiz kart sayfayı uzatır. Gizleme
   yalnız burada — geniş ekranda "display: revert" kartın grid düzenini de tarayıcı varsayılanına (inline) döndürür. */
@container (max-width: 559.98px) {
  .featured__grid > :nth-child(n + 5) { display: none; }
}

.fcard {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 14px var(--sp-4) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.fcard:hover { border-color: var(--line-2); background: var(--surface-3); }
.fcard:active { transform: translateY(1px); }
/* Canlı kart: üst kenarda yeşil yayın şeridi, satır başından. */
.fcard--live::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 56px;
  height: 3px;
  border-end-end-radius: 3px;
  background: var(--green-fill);
}

.fcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 22px;
  color: var(--txt-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.fcard__league { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fcard__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
}
.fcard__team { display: grid; justify-items: center; gap: var(--sp-2); min-width: 0; text-align: center; }
.fcard__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.fcard__name .rc { display: inline-grid; margin-inline-start: 5px; vertical-align: -1px; }

.crest { width: 36px; height: 36px; object-fit: contain; }
.crest--mono {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--txt-2);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
}

/* Skor kutusu: yayın grafiğindeki koyu skor bloğu. */
.fcard__score, .fcard__time, .fcard__state {
  /* arma ortasına hizalı: (46 − 36) / 2 */
  align-self: start;
  margin-block-start: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 76px;
  height: 46px;
  padding-inline: 12px;
  border-radius: 8px;
  background: var(--ink);
  border: 1px solid var(--line);
  font-family: var(--display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: var(--track-tight);
  line-height: 1;
}
.fcard__score { font-variant-numeric: tabular-nums; }
.fcard__score i { font-style: normal; color: var(--txt-3); font-weight: 600; }
.fcard--live .fcard__score { color: var(--green); }
.fcard__time { font-size: 22px; color: var(--txt); direction: ltr; }
.fcard__state { font-family: var(--body); font-size: var(--fs-xs); font-weight: 700; color: var(--amber); }

.fcard__foot { text-align: center; color: var(--txt-2); font-size: var(--fs-xs); font-weight: 600; }

/* ── Tek maç sayfası ────────────────────────────────────────
   Orta bölme: başlık bölmesi (lig satırı + #m-header skor kutusu + sekmeler) ve sekme içeriği (#m-tab).
   Özet: momentum (tam genişlik) · istatistik ‖ olaylar · form ve H2H · ilk 11. Sağ kolon: barem, puan
   durumu, reklam. Renk dili: ev sahibi yeşil, deplasman mavi (momentum, istatistik çubuğu, kadro).
   Oran/genişlikler style="--w:58%" ile (Ruling F); değerler sunucuda sayı olarak üretilir. */

.match { display: grid; gap: var(--pane-gap); align-content: start; min-width: 0; }

/* Dar ekranda listeye dönüş (geniş ekranda liste solda zaten görünür). */
.match__back { display: none; }

@media (max-width: 1023px) {
  .match__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-self: start;
    height: 32px;
    padding-inline: 6px 12px;
    margin-block-end: -6px;
    border-radius: 999px;
    color: var(--txt-2);
    font-family: var(--display);
    font-size: var(--fs-sm);
    font-weight: 700;
  }
  .match__back:hover { color: var(--txt); background: var(--surface-2); }
  .match__back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  [dir="rtl"] .match__back svg { transform: scaleX(-1); }

  /* Maç sayfasında önce maç, ardından sağ kolon (barem, puan durumu), en sonda gün listesi. */
  .shell:has(> #mid > #center > .match) > #right-col { order: 1; }
  .shell:has(> #mid > #center > .match) > #left-col { order: 2; }
  /* Izgara açıkken de önce ızgara ve sağ kolonu (Baremlerim), liste en sonda. */
  .shell:has(> #mid > #grid-view:not([hidden])) > #right-grid { order: 1; }
  .shell:has(> #mid > #grid-view:not([hidden])) > #left-col { order: 2; }
}

/* İki kolonlu ekranda (1024–1279) sağ kolon maçın altında: barem ve puan durumu yan yana. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .shell:has(> #mid > #center > .match) > #right-col { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
}

/* Sol listede açık maçın satırı: yeşil şerit + hafif zemin (sabitleme şeridi ::before, bu ::after). */
.m:has(> .row[aria-current="page"]) { background: var(--green-soft); }
.m:has(> .row[aria-current="page"])::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--green);
}
.row[aria-current="page"] .row__name { font-weight: 700; }

/* ── Başlık bölmesi ─────────────────────────────────────── */

.mtop { position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; }
/* Yayın grafiği: skor kutusunun arkasından düşen hafif ışık; canlıda üst kenarda yeşil "yayında" şeridi. */
.mtop::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 90% at 50% 0%, var(--glow), transparent 70%);
}
.mtop:has(.mhead--live)::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 72px;
  height: 3px;
  border-end-end-radius: 3px;
  background: var(--green-fill);
}

.mtop__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 14px 18px 0;
}
.mtop__league {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
  color: var(--txt-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.mtop__comp { color: var(--txt); font-weight: 700; }
.mtop__actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Başlıktaki eylem düğmeleri: Sabitle · Takip et · Paylaş. */
.actbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding-inline: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--txt-2);
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.actbtn:hover { background: var(--surface-2); color: var(--txt); }
.actbtn svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.actbtn .pin-icon { width: 14px; height: 14px; }
.actbtn[aria-pressed="true"] { border-color: transparent; background: var(--amber-soft); color: var(--amber); }
.actbtn[aria-pressed="true"] .pin-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5h6M10 3.5v5.2L6.5 13v1.5h11V13L14 8.7V3.5M12 14.5V21'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5h6M10 3.5v5.2L6.5 13v1.5h11V13L14 8.7V3.5M12 14.5V21'/%3E%3C/svg%3E");
}
.actbtn.is-done { border-color: transparent; background: var(--green-soft); color: var(--green); }
.actbtn.pin--full { animation: kk-nudge .32s var(--ease); color: var(--live); }

/* ── Skor kutusu (#m-header) ── ev | skor | deplasman; ev sütunu merkeze (satır sonuna) yaslı. */

.mhead { padding: 12px 18px 16px; }
.mhead__stale { display: flex; justify-content: center; margin-block-end: var(--sp-3); }

.mhead__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sp-5);
}

.mhead__team { display: grid; align-content: center; gap: 8px; min-width: 0; }
.mhead__team--home { justify-items: end; text-align: end; }
.mhead__team--away { justify-items: start; text-align: start; }

/* Arma merkeze bakar: ev sahibinde ad + arma, deplasmanda arma + ad. */
.mhead__id { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; }
.mhead__team--home .mhead__id { flex-direction: row-reverse; }
.mhead__crest { width: 52px; height: 52px; flex-shrink: 0; }
.mhead__crest.crest--mono { font-size: 21px; }
.mhead__name {
  min-width: 0;
  font-family: var(--display);
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: var(--track-tight);
  font-variation-settings: 'wdth' 106;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.mhead__name .rc { display: inline-grid; margin-inline-start: 7px; vertical-align: 2px; }

.mhead__scorers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  max-width: 100%;
  color: var(--txt-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
}
.mhead__team--home .mhead__scorers { justify-content: flex-end; }
.mhead__scorer { white-space: nowrap; }

/* Top simgesi (gol): satır içi SVG yerine maske, temaya göre renk alır. */
.ball, .ev__ic--goal, .ev__ic--pen, .ev__ic--og, .ev__ic--miss, .ev__ic--var {
  display: inline-block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.4l3.7 2.7-1.4 4.4H9.7L8.3 10.1z' fill='%23000'/%3E%3Cpath d='M12 7.4V2.8M15.7 10.1l4.5-1.5M14.3 14.5l2.8 3.9M9.7 14.5l-2.8 3.9M8.3 10.1 3.8 8.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.4l3.7 2.7-1.4 4.4H9.7L8.3 10.1z' fill='%23000'/%3E%3Cpath d='M12 7.4V2.8M15.7 10.1l4.5-1.5M14.3 14.5l2.8 3.9M9.7 14.5l-2.8 3.9M8.3 10.1 3.8 8.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mhead__scorers .ball { width: 12px; height: 12px; color: var(--txt-2); }

/* Form: son 5 maç, eskiden yeniye; G yeşil, B gri, M kırmızı (harf de yazılı). */
.form { display: flex; gap: 3px; margin: 0; }
.mhead__team--home .form { justify-content: flex-end; }
.fm {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding-inline: 3px;
  border-radius: 5px;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
}
.fm--w { background: var(--green); color: var(--on-green); }
.fm--d { background: var(--surface-3); color: var(--txt-2); }
.fm--l { background: var(--live); color: var(--on-live); }
/* En yeni maç (sağda) biraz ayrık: formun yönü bir bakışta okunur. */
.form > .fm:last-child { box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--line-2); }

.mhead__center { display: grid; justify-items: center; gap: 8px; min-width: 128px; }
.mhead__score {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 9px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--ink);
  font-family: var(--display);
  font-size: var(--fs-score);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--track-tight);
}
.mhead__s { min-width: .62em; text-align: center; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.mhead__score i { font-style: normal; font-size: .62em; font-weight: 600; color: var(--txt-3); }
.mhead--live .mhead__score { color: var(--green); }
.mhead__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; }
.mhead__ht { color: var(--txt-2); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }

.mhead__kick {
  padding: 8px 16px 9px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--ink);
  font-family: var(--display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.mhead__countdown { color: var(--green); font-size: var(--fs-xs); font-weight: 700; text-align: center; }
.mhead__state {
  padding: 9px 16px;
  border-radius: 12px;
  background: var(--amber-soft);
  color: var(--amber);
  font-family: var(--display);
  font-size: var(--fs-md);
  font-weight: 800;
}

/* Sekmeler: alt kenarda yeşil çizgi (üst çubuktaki gibi). */
.mtabs { border-block-start: 1px solid var(--line); }
.mtabs__list {
  display: flex;
  gap: 2px;
  padding-inline: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mtabs__list::-webkit-scrollbar { display: none; }
.mtabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding-inline: 12px;
  color: var(--txt-2);
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.mtabs__tab:hover { color: var(--txt); }
.mtabs__tab:focus-visible { outline-offset: -4px; }
.mtabs__tab[aria-current="page"] { color: var(--txt); }
.mtabs__tab[aria-current="page"]::after {
  content: '';
  position: absolute;
  inset-inline: 12px;
  inset-block-end: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--green);
}

/* Dar başlık (telefon): arma adın üstünde, ortalı; skor küçülür; eylem düğmeleri yalnız simge. */
@container (max-width: 560px) {
  .mtop__bar { padding-inline: 14px; }
  .actbtn { width: 34px; height: 34px; padding: 0; justify-content: center; }
  .actbtn__label {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .mhead { padding: 14px 12px 16px; }
  .mhead__main { column-gap: 10px; align-items: start; }
  .mhead__team, .mhead__team--home, .mhead__team--away { justify-items: center; text-align: center; }
  .mhead__id, .mhead__team--home .mhead__id { flex-direction: column; gap: 8px; }
  .mhead__crest { width: 44px; height: 44px; }
  .mhead__name { font-size: var(--fs-md); }
  .mhead__scorers, .mhead__team--home .mhead__scorers { justify-content: center; font-size: 11px; }
  .mhead__team--home .form { justify-content: center; }
  .fm { min-width: 16px; height: 16px; font-size: 9.5px; border-radius: 4px; }
  .mhead__center { min-width: 0; padding-block-start: 4px; }
  .mhead__score { gap: 8px; padding: 7px 12px 8px; font-size: 30px; border-radius: 12px; }
  .mhead__kick { font-size: 26px; padding: 7px 12px 8px; }
  .mtabs__tab { padding-inline: 10px; }
}

/* ── Sekme içeriği ve kartlar ───────────────────────────── */

.mtab { display: grid; gap: var(--pane-gap); min-width: 0; container-type: inline-size; }
.msum { display: grid; gap: var(--pane-gap); min-width: 0; }

/* Maç sayfasında kartlar bölme gibi (zemin üstünde yüzey); başlık h2. */
.mtab .card {
  padding: 12px 18px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.mtab .card > .card__title { min-height: 30px; margin-block-end: 6px; }
.card__h {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  color: var(--txt);
  font-family: var(--display);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: var(--track-tight);
}
.card__aside { color: var(--txt-2); font-size: var(--fs-sm); font-weight: 700; }

/* "Tamamı →": başlıkta bağlantı, kart sonunda geniş düğme. */
.card__link, .card__more { color: var(--green); font-family: var(--display); font-weight: 700; white-space: nowrap; }
.card__link { font-size: var(--fs-xs); }
.card__link::after, .card__more::after { content: '→'; margin-inline-start: .3em; }
[dir="rtl"] .card__link::after, [dir="rtl"] .card__more::after { content: '←'; }
.card__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.card__more {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-block-start: 10px;
  padding-block: 6px;
  border-radius: 8px;
  font-size: var(--fs-xs);
  transition: background-color .2s var(--ease);
}
.card__more:hover { background: var(--green-soft); }

/* Küçük bölümlü anahtar (Maç / İY / 2Y; puan durumu türü bağlantıları). */
a.seg__btn { display: inline-flex; align-items: center; }
.seg--sm { padding: 2px; border-radius: 8px; }
.seg--sm .seg__btn { height: 26px; padding-inline: 10px; border-radius: 6px; font-size: var(--fs-xs); }

/* ── Momentum ── çubuklar SVG'de (esner), işaret ve eksen etiketleri üstte HTML (yamulmaz). Zaman ekseni
   her dilde soldan sağa (grafik geleneği; RTL'de de dakika ileriye sağa akar). */

.mo-legend { display: flex; gap: 14px; min-width: 0; color: var(--txt-2); font-size: var(--fs-xs); font-weight: 600; }
.mo-legend__key { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-legend__key::before { content: ''; flex-shrink: 0; width: 9px; height: 9px; border-radius: 2px; background: var(--green); }
.mo-legend__key--away::before { background: var(--blue); }
.mo-fig { margin: 0; }

.mo { position: relative; direction: ltr; padding-block: 19px 16px; }
.mo__svg { display: block; width: 100%; height: 84px; overflow: visible; }
.mo__mid { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mo__ht { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.mo__gl { stroke: var(--txt-3); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; opacity: .55; }
.mo__gl--var { stroke: var(--live); opacity: .8; }
.mo__h { fill: var(--green); }
.mo__a { fill: var(--blue); }
.mo__mark, .mo__tick { position: absolute; inset-inline-start: var(--x); line-height: 1; white-space: nowrap; }
.mo__mark { inset-block-start: 0; translate: -50% 0; font-size: 13px; }
.mo__mark--var {
  inset-block-start: 1px;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--live-soft);
  color: var(--live);
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
}
/* Etiket konumuyla orantılı kayar: 0' sola, 90' sağa yaslı, ortadakiler ortalı — kenardan taşmaz. */
.mo__tick { inset-block-end: 0; translate: calc(var(--x) * -1) 0; color: var(--txt-2); font-family: var(--display); font-size: 10.5px; font-weight: 700; }

/* ── İstatistik ‖ Olaylar ── geniş bölmede yan yana; olaylar kartı istatistik kartının yüksekliğini
   aşmaz, içinde kayar (contain: size → satır yüksekliğini istatistik kartı belirler). */

.msum__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pane-gap); }
/* İki kök de boşsa (başlamamış maç) çift yer kaplamasın — kökler Task 7 için DOM'da kalır. */
.msum__pair:not(:has(> :not([hidden]))) { display: none; }
@container (min-width: 620px) {
  .msum__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msum__pair:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }
  .msum__pair:not(:has(> [hidden])) > .ev-card { contain: size; display: flex; flex-direction: column; min-height: 240px; }
  .msum__pair:not(:has(> [hidden])) > .ev-card > .ev-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
  /* Canlıda liste alttan başlar: en yeni olay görünür (tek çocuklu ters sütun, betik yok). */
  .msum__pair:not(:has(> [hidden])) > .ev-card--live > .ev-scroll { display: flex; flex-direction: column-reverse; }
}

.st-list { display: grid; gap: 10px; }
/* Satır: değerler kenarlarda, ad ortada; altında tam genişlik çubuk. */
.st {
  display: grid;
  grid-template-columns: minmax(3.6em, auto) minmax(0, 1fr) minmax(3.6em, auto);
  grid-template-areas: "home lbl away" "bar bar bar";
  align-items: baseline;
  gap: 5px 8px;
}
.st__lbl { grid-area: lbl; min-width: 0; overflow: hidden; color: var(--txt-2); font-size: var(--fs-xs); font-weight: 600; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.st__v {
  color: var(--txt-2);
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}
.st__v--home { grid-area: home; text-align: start; }
.st__v--away { grid-area: away; text-align: end; }
.st__v--lead { color: var(--txt); font-weight: 800; }
/* Ev payı yeşil (satır başından), kalan mavi; aradaki ince boşluk kart zemininden. */
.st__bar { grid-area: bar; display: flex; height: 5px; overflow: hidden; border-radius: 99px; background: var(--blue); }
.st__bar i { display: block; flex: 0 0 auto; inline-size: var(--w, 50%); background: var(--green); border-inline-end: 2px solid var(--surface); }

/* Olaylar: [ev sahibi] [dakika] [deplasman]. */
.ev-scroll { min-height: 0; }
.evs { display: grid; margin: 0; padding: 0; }
.ev {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  align-items: center;
  min-height: 40px;
  padding-block: 5px;
  border-block-start: 1px solid var(--line);
}
.evs > :first-child { border-block-start: 0; }
.ev-sep + .ev { border-block-start: 0; }
.ev__min { grid-row: 1; grid-column: 2; display: grid; justify-items: center; gap: 1px; font-family: var(--display); line-height: 1.2; }
.ev__min b { color: var(--txt-2); font-size: var(--fs-xs); font-weight: 800; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.ev__min small { color: var(--txt); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev__who { grid-row: 1; display: flex; align-items: center; gap: 9px; min-width: 0; }
.ev--home .ev__who { grid-column: 1; flex-direction: row-reverse; text-align: end; }
.ev--away .ev__who { grid-column: 3; text-align: start; }
.ev__txt { display: grid; min-width: 0; font-size: var(--fs-sm); line-height: 1.3; }
.ev__txt b, .ev__txt small, .ev__in, .ev__out { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev__txt b { font-weight: 700; }
.ev__txt small { color: var(--txt-2); font-size: var(--fs-xs); font-weight: 500; }
.ev__tag { color: var(--txt-2); font-weight: 600; }
.ev--goal .ev__txt b, .ev--pen .ev__txt b, .ev--og .ev__txt b { font-weight: 800; }
.ev--goal .ev__min b, .ev--pen .ev__min b, .ev--og .ev__min b { color: var(--txt); }
.ev__in { font-weight: 600; }
.ev__in::before { content: '↑ '; color: var(--green); font-weight: 800; }
.ev__out { color: var(--txt-2); font-size: var(--fs-xs); }
.ev__out::before { content: '↓ '; color: var(--live); font-weight: 800; }

.ev__ic { color: var(--txt); }
.ev__ic--og { color: var(--live); }
.ev__ic--miss { color: var(--txt-3); }
.ev__ic--var { color: var(--live); }
.ev__ic--yellow, .ev__ic--red, .ev__ic--second {
  display: inline-block;
  flex-shrink: 0;
  width: 11px;
  height: 15px;
  border-radius: 2px;
  background: var(--amber-fill);
}
.ev__ic--red { background: var(--live); }
.ev__ic--second { background: linear-gradient(135deg, var(--amber-fill) 0 48%, var(--live) 52%); }
.ev__ic--sub {
  display: inline-block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background: var(--txt-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 20V5M3.8 8.6 7.5 4.9l3.7 3.7M16.5 4v15M12.8 15.4l3.7 3.7 3.7-3.7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 20V5M3.8 8.6 7.5 4.9l3.7 3.7M16.5 4v15M12.8 15.4l3.7 3.7 3.7-3.7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* VAR iptali: canlı kırmızı zemin, metin ve top. */
.ev--var { border-radius: 8px; background: var(--live-soft); border-block-start-color: transparent; }
.ev--var + .ev { border-block-start-color: transparent; }
.ev--var .ev__txt b { color: var(--live); white-space: normal; }
.ev--var .ev__min b { color: var(--live); }

/* Yarı ayracı: "İY 1 - 0", iki yanında çizgi. */
.ev-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 9px;
  color: var(--txt-2);
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 800;
  white-space: nowrap;
}
.ev-sep::before, .ev-sep::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.ev-sep--ft { color: var(--txt); }

/* ── Form ve aralarındaki maçlar ── */

.h2h { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 28px; }
@container (min-width: 620px) {
  .h2h { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .h2h--recent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.h2h--recent { margin-block-start: 22px; padding-block-start: 18px; border-block-start: 1px solid var(--line); }
.h2h__col { min-width: 0; }
.h2h__sub { margin-block-end: 6px; color: var(--txt-2); font-size: var(--fs-xs); font-weight: 700; }
.h2h__col > .h2h__sub ~ .h2h__sub { margin-block-start: 16px; }

.pm-list { display: grid; margin: 0; padding: 0; }
.pm {
  display: grid;
  grid-template-columns: 5.6em minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.pm:first-child { border-block-start: 0; }
.pm__date { color: var(--txt-2); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.pm__team { min-width: 0; overflow: hidden; color: var(--txt-2); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pm__team--home { text-align: end; }
.pm__team--win { color: var(--txt); font-weight: 800; }
.pm__score {
  display: inline-flex;
  justify-content: center;
  gap: 4px;
  min-width: 48px;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--surface-2);
  font-family: var(--display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pm__score i { font-style: normal; color: var(--txt-3); }
.pm__res { margin-inline-start: 2px; }

.rates { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 0; padding: 0; }
.rate {
  position: relative;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 10px 12px 13px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface-2);
}
.rate__v { justify-self: start; font-family: var(--display); font-size: 21px; font-weight: 800; line-height: 1.05; letter-spacing: var(--track-tight); direction: ltr; unicode-bidi: isolate; }
.rate__v small { color: var(--txt-2); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.rate--avg .rate__v { color: var(--green); }
.rate__l { color: var(--txt-2); font-size: var(--fs-xs); font-weight: 600; }
.rate__bar { position: absolute; inset-inline: 0; inset-block-end: 0; height: 3px; background: var(--surface-3); }
.rate__bar::after { content: ''; display: block; height: 100%; inline-size: var(--w, 0%); background: var(--green-fill); }

.h2h__forms { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px 12px; margin: 0; }
.h2h__forms dt { min-width: 0; overflow: hidden; font-size: var(--fs-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.h2h__forms dd { margin: 0; }

/* ── İlk 11: saha ── ev sahibi satır başı yarısında (kaleci kenarda), deplasman aynalı. Saha çizgileri
   degradelerle; dar bölmede saha dikey döner. */

.pitch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 236px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background:
    linear-gradient(var(--line-2), var(--line-2)) center / 1px 100% no-repeat,
    repeating-linear-gradient(90deg, var(--green-soft) 0 6.25%, transparent 6.25% 12.5%),
    var(--surface-2);
}
/* Orta yuvarlak (yönden bağımsız ortada: inset 0 + otomatik kenar boşluğu; RTL'de kaymaz) ve ceza sahaları. */
.pitch::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 76px;
  height: 76px;
  margin: auto;
  border: 1px solid var(--line-2);
  border-radius: 50%;
}
.pitch__half { position: relative; z-index: 1; display: flex; min-width: 0; padding: 12px 4px; }
.pitch__half::before {
  content: '';
  position: absolute;
  inset-block: 26%;
  width: 11%;
  border: 1px solid var(--line-2);
  z-index: -1;
}
.pitch__half--home::before { inset-inline-start: -1px; }
.pitch__half--away::before { inset-inline-end: -1px; }
.pitch__line {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.pl { display: grid; justify-items: center; gap: 3px; min-width: 0; max-width: 100%; }
.pl__n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 0 0 2px var(--surface-2);
}
.pl--home .pl__n { background: var(--green); color: var(--on-green); }
.pl--away .pl__n { background: var(--blue); color: var(--on-blue); }
.pl__name { max-width: 100%; padding-inline: 2px; overflow: hidden; color: var(--txt); font-size: 11px; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.pl__rt { padding: 1px 4px; border-radius: 4px; background: var(--surface-3); color: var(--txt-2); font-family: var(--display); font-size: 10px; font-weight: 800; }
.lu-card--full .pitch { min-height: 300px; }

@container (max-width: 520px) {
  .pitch {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    min-height: 460px;
    background:
      linear-gradient(var(--line-2), var(--line-2)) center / 100% 1px no-repeat,
      repeating-linear-gradient(180deg, var(--green-soft) 0 6.25%, transparent 6.25% 12.5%),
      var(--surface-2);
  }
  .pitch__half { flex-direction: column; padding: 6px 4px; }
  .pitch__half::before { inset-block: auto; inset-inline: 26%; width: auto; height: 11%; }
  .pitch__half--home::before { inset-block-start: -1px; }
  .pitch__half--away::before { inset-block-end: -1px; }
  .pitch__line { flex-direction: row; }
}

.lu-subs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 28px; margin-block-start: 18px; }
@container (min-width: 620px) { .lu-subs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lu-subs__h { margin-block: 14px 4px; color: var(--txt-2); font-size: var(--fs-xs); font-weight: 700; }
.lu-list { display: grid; margin: 0; padding: 0; }
.lu-p {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.lu-p:first-child { border-block-start: 0; }
.lu-p__n { color: var(--txt-2); font-family: var(--display); font-weight: 700; text-align: end; }
.lu-p__name { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.lu-p__rt { padding: 2px 6px; border-radius: 5px; background: var(--surface-2); font-family: var(--display); font-size: var(--fs-xs); font-weight: 800; }
.lu-list--subs .lu-p__name { color: var(--txt-2); }
.rt--hi { background: var(--green-soft); color: var(--green); }
.rt--lo { background: var(--live-soft); color: var(--live); }
.lu-coach { margin-block-start: 12px; color: var(--txt-2); font-size: var(--fs-xs); font-weight: 600; }

/* ── İstatistik sekmesi ve puan durumu sekmesi ── */

.stx__sec + .stx__sec { margin-block-start: 20px; }
.stx__sec .st + .st { margin-block-start: 9px; }

.std__wrap { overflow-x: auto; }
.std__wrap + .h2h__sub { margin-block-start: 18px; }
.std__table, .stm__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.std__table th, .std__table td, .stm__table th, .stm__table td { padding: 8px 6px; font-weight: 600; text-align: end; white-space: nowrap; }
.std__table thead th, .stm__table thead th { border-block-end: 1px solid var(--line); color: var(--txt-2); font-size: var(--fs-xs); font-weight: 700; }
.std__table tbody tr + tr td, .std__table tbody tr + tr th { border-block-start: 1px solid var(--line); }
.std__table .std__team, .stm__table .stm__team { width: 100%; max-width: 0; overflow: hidden; text-align: start; text-overflow: ellipsis; }
.std__rank, .stm__rank { position: relative; width: 2.6em; color: var(--txt-2); text-align: center !important; }
.std__pts, .stm__pts { color: var(--txt); font-weight: 800 !important; }
.std__table abbr { text-decoration: none; }
.std__live { margin-inline-start: 6px; padding: 1px 5px; border-radius: 4px; background: var(--green-soft); color: var(--green); font-family: var(--display); font-size: var(--fs-2xs); font-weight: 800; }
/* Bölge şeridi (Avrupa kupası, düşme…): feed'in rengi satırın başında. */
tr[style*="--zone"] > .std__rank::before, tr[style*="--zone"] > .stm__rank::before {
  content: '';
  position: absolute;
  inset-block: 7px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--zone);
}
.is-team, .stm__row--team { background: var(--green-soft); }
.is-team > th, .stm__row--team > th { color: var(--txt); font-weight: 800; }
.is-team > .std__rank, .stm__row--team > .stm__rank { color: var(--green); font-weight: 800; }
@container (max-width: 520px) { .std__opt { display: none; } }

/* ── Sağ kolon: barem paneli ── */

.bm-pane__head { align-items: center; }
.bm-list { display: grid; margin: 0; padding: 4px 18px 14px; }
.bm { display: grid; gap: 7px; padding-block: 12px; border-block-start: 1px solid var(--line); }
.bm:first-child { border-block-start: 0; }
.bm__row { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.bm__label { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; }
.bm__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--txt-2);
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 800;
  white-space: nowrap;
}
.bm__dot { color: var(--txt-3); }
.bm__val { color: var(--txt-2); font-size: var(--fs-xs); font-weight: 700; }
.bm--open .bm__status { color: var(--txt); }
.bm--warn .bm__status { color: var(--amber); }
.bm--hit .bm__status { color: var(--green); font-size: var(--fs-md); }
.bm--miss .bm__status { color: var(--live); font-size: var(--fs-md); }
.bm--hit .bm__val, .bm--miss .bm__val { font-size: var(--fs-xs); }
.bm--miss .bm__label { color: var(--txt-2); }
.bm__meter { height: 5px; }
.meter--miss { color: var(--txt-3); }
.meter--miss::-webkit-progress-value { background: var(--txt-3); }
.meter--miss::-moz-progress-bar { background: var(--txt-3); }
.bm__h2h { color: var(--txt-2); font-size: var(--fs-xs); font-weight: 600; }
.bm--pending .bm__h2h { color: var(--txt); }

/* ── Sağ kolon: puan durumu kesiti ── */

.stm__head { align-items: center; }
.stm__table { margin-block: 4px 2px; }
.stm__table th:first-child, .stm__table td:first-child { padding-inline-start: 12px; }
.stm__table th:last-child, .stm__table td:last-child { padding-inline-end: 18px; }
.stm__gap td { padding-block: 0; color: var(--txt-3); line-height: 1; text-align: center !important; }
.stm__more { margin: 0 12px 12px; }

/* ── Reklam alanı (Ads:Enabled): yer baştan ayrılır, CLS yok. ── */

.ad {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 300px;
  height: 250px;
  margin-inline: auto;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  color: var(--txt-3);
}
.ad__label { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); }

.tag--warn { background: var(--amber-soft); color: var(--amber); }

/* ── Durum sayfaları (404, 503): tek kolon, ortalı. ── */

.shell--solo { max-width: 760px; }
@media (min-width: 1024px) {
  .shell--solo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .shell--solo > #mid { grid-column: 1; grid-row: 1; }
}
.status { margin-block-start: var(--sp-6); }
.status__code {
  color: var(--green);
  font-family: var(--display);
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: var(--track-tight);
}
.status__title { font-size: var(--fs-xl); }
.status__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-block-start: 18px; }
.status__spot { fill: var(--live); }

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

.footer {
  border-block-start: 1px solid var(--line);
  background: var(--ink-1);
  color: var(--txt-2);
  font-size: var(--fs-sm);
}
.footer__inner {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: var(--sp-8) var(--shell-pad) var(--sp-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr);
  gap: var(--sp-8);
  align-items: start;
}
.footer .brand { color: var(--txt); font-size: 17px; }
.footer .brand__logo { width: 26px; height: 26px; border-radius: 7px; }
.footer__tag { margin-block-start: 10px; max-width: 32ch; }
.footer__nav ul { display: grid; gap: var(--sp-2); }
.footer__langs ul { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: flex-end; }
.footer a { transition: color .2s var(--ease); }
.footer a:hover { color: var(--green); }
.footer__langs a[aria-current="true"] { color: var(--txt); font-weight: 700; }
/* Geniş ekranda alt bilgi de kabuğun kolonlarına oturur (bağlantılar orta bölme hizasında). */
@media (min-width: 1024px) {
  .footer__inner { grid-template-columns: var(--col-side) auto minmax(0, 1fr); gap: var(--pane-gap); }
  .footer__nav { padding-inline-end: var(--sp-8); }
}

.footer__copy {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: var(--sp-4) var(--shell-pad) var(--sp-6);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-xs);
}

/* ── Dar ekranlar ───────────────────────────────────────── */

@media (max-width: 1023px) {
  .topnav { display: none; }
  .footer__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .footer__langs { grid-column: 1 / -1; }
  .footer__langs ul { justify-content: flex-start; }
}

@media (max-width: 719px) {
  :root { --shell-pad: 16px; --pane-gap: 12px; }

  /* Üst çubuk iki satır: logo + araçlar, altında tam genişlik arama. */
  .topbar__inner { flex-wrap: wrap; row-gap: 0; column-gap: var(--sp-3); padding-block-end: 10px; }
  .topbar__inner > .brand { min-height: 56px; }
  .search { order: 3; flex: 1 0 100%; }
  .topbar__cta { min-width: 38px; padding-inline: 10px; }
  .topbar__cta-label {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  .footer__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}

/* ── Canlı yenileme ─────────────────────────────────────────
   Yoklayıcı (#list-poller, #m-poller) boşken yer kaplamaz; üç başarısız istekten sonra içinde "yeniden deneniyor"
   etiketi (app.js). Skor değişince liste satırı, öne çıkan kart ve maç başlığının skoru 1,5 sn parlar (.flash). */

.poller:empty { display: none; }
.poll-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 6px var(--sp-3);
  background: var(--amber-soft);
  color: var(--amber);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
}
.list-head .poll-error { border-radius: var(--r-xs); }
.poll-error::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  animation: kk-blink 1.6s var(--ease) infinite;
}

@keyframes kk-flash { from, 30% { background-color: var(--green-soft); } }
@keyframes kk-score { from, 30% { color: var(--green); border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); } }
/* Satırda tüm liste öğesi (sabitleme düğmesi dahil) parlar; .flash satır bağlantısında. */
.m:has(> .row.flash), .fcard.flash { animation: kk-flash 1.5s var(--ease); }
.mhead.flash .mhead__score { animation: kk-score 1.5s var(--ease); }

/* ── Hareket azaltma ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Tek maç | Izgara anahtarı ve ızgara kartları (Task 8, spec §6.5) ── */

.viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.viewbar__note { color: var(--amber); font-size: var(--fs-xs); font-weight: 700; }
.viewbar__note:empty { display: none; }

.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pane-gap); }
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 5–6 maç geniş ekranda 3×2. */
@media (min-width: 1440px) {
  .grid:is([data-n="5"], [data-n="6"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.grid-view__loading { padding: var(--sp-6); color: var(--txt-2); text-align: center; }

.gcard {
  position: relative;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.gcard--live { border-color: var(--green-soft); }
.gcard__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gcard__league { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--txt-2); font-size: var(--fs-xs); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.gcard__unpin {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--txt-3);
  cursor: pointer;
}
.gcard__unpin::before { content: '×'; font-size: 18px; line-height: 26px; }
.gcard__unpin:hover { background: var(--surface-2); color: var(--txt); }
.gcard__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.gcard__link:hover .gcard__team { color: var(--green); }
.gcard__team { min-width: 0; overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.gcard__team--away { text-align: end; }
.gcard__score {
  display: inline-flex;
  gap: 6px;
  font-family: var(--display);
  font-size: var(--fs-xl);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.gcard__score i { color: var(--txt-3); font-style: normal; }
.gcard__mo .mo__svg { display: block; width: 100%; height: 36px; }
.gcard__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
.gcard__stat { display: grid; gap: 2px; padding: 6px 4px; border-radius: 8px; background: var(--surface-2); text-align: center; }
.gcard__stat dt { color: var(--txt-2); font-size: var(--fs-2xs); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard__stat dd { display: flex; justify-content: center; gap: 6px; margin: 0; font-family: var(--display); font-size: var(--fs-sm); font-weight: 800; }
.gcard__stat dd span + span { color: var(--txt-2); }
.gcard.flash { animation: kk-flash 1.5s var(--ease); }
.badge--quiet { background: var(--surface-2); color: var(--txt-2); }

/* ── Özel barem ── */

.cb-note { padding: 0 18px 10px; color: var(--txt-2); font-size: var(--fs-xs); }
.cb-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 18px 16px; }
.cb-field { display: grid; gap: 4px; min-width: 0; color: var(--txt-2); font-size: var(--fs-2xs); font-weight: 700; }
.cb-field select, .cb-field input {
  width: 100%;
  height: 34px;
  padding-inline: 8px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--txt);
  font: inherit;
  font-size: var(--fs-sm);
}
.cb-add { align-self: end; height: 34px; }
.cb-remove {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--txt-3);
  cursor: pointer;
}
.cb-remove::before { content: '×'; font-size: 18px; line-height: 26px; }
.cb-remove:hover { background: var(--surface-2); color: var(--txt); }

/* ── Maç hakkında (SEO paragrafı, spec §7.2) ── */

.about { display: grid; gap: 8px; padding: 16px 18px; }
.about__text { color: var(--txt-2); font-size: var(--fs-sm); line-height: 1.6; }
.about__links a { color: var(--green); font-size: var(--fs-sm); font-weight: 700; }

/* Maç sayfasında gün listesi yüklenene kadar (DeferList). Yüksekliği sabit: liste gelince başlık kaymaz. */
.list-loading { min-height: 60vh; padding: var(--sp-6) 18px; color: var(--txt-2); font-size: var(--fs-sm); }

/* Kaymasız ilk boyama (CLS): lig / tarih satırı tek satır — yerel saat (app.js) metni değiştirince satır sayısı
   değişip başlığı oynatmasın; sekme çubuğunun yüksekliği font yüklenmesinden bağımsız. */
.mtop__league { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.mtop__league > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mtabs__list { min-height: 42px; }

/* ── Baremlerim (sağ kolon): bu tarayıcıda eklenen bütün özel baremler, maç maç ── */

.ml-match { border-block-start: 1px solid var(--line); }
.ml-match__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 18px 0;
  color: inherit;
  text-decoration: none;
}
.ml-match__head:hover .ml-match__teams { color: var(--green); }
.ml-match__teams { min-width: 0; overflow: hidden; font-size: var(--fs-sm); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.ml-match__score { margin-inline: 4px; color: var(--txt); font-family: var(--display); }
.ml-lines { padding-block-start: 0; }

/* Takip edilen barem değişince sayfa içi uyarı (barem.js). */
.toasts {
  position: fixed;
  inset-block-end: 16px;
  inset-inline-end: 16px;
  z-index: 60;
  display: grid;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
}
.toast {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--green);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--txt);
  font-size: var(--fs-sm);
  font-weight: 700;
  box-shadow: 0 8px 24px rgb(0 0 0 / .25);
}

/* ── Hesap (üst çubuk) ve giriş penceresi (spec §10) ── */

.account-slot:empty { display: none; }
.account__menu { position: relative; }
.account__menu > summary { list-style: none; cursor: pointer; }
.account__menu > summary::-webkit-details-marker { display: none; }
.account__initial {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  font-family: var(--display);
  font-weight: 800;
}
.account__panel {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 50;
  display: grid;
  gap: 6px;
  min-width: 220px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: 0 12px 32px rgb(0 0 0 / .25);
}
.account__name { margin: 0; font-weight: 800; }
.account__email { margin: 0 0 6px; color: var(--txt-2); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.account__push {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border: 0;
  border-block: 1px solid var(--line);
  background: none;
  color: var(--txt);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: start;
  cursor: pointer;
}
.account__push:disabled { cursor: default; opacity: .6; }
.account__push-state { color: var(--txt-2); font-weight: 700; }
.account__push[aria-pressed="true"] .account__push-state { color: var(--green); }
.account__hint { margin: 0; color: var(--txt-2); font-size: var(--fs-xs); }

.login-dlg {
  position: relative;
  width: min(400px, calc(100vw - 32px));
  padding: 28px 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--txt);
  text-align: center;
}
.login-dlg::backdrop { background: rgb(0 0 0 / .55); }
.login-dlg__close-form { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; margin: 0; }
.login-dlg__close { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--txt-2); cursor: pointer; }
.login-dlg__close::before { content: '×'; font-size: 22px; line-height: 32px; }
.login-dlg__title { margin: 0 0 8px; font-family: var(--display); font-size: var(--fs-lg, 18px); font-weight: 800; }
.login-dlg__text { margin: 0 0 18px; color: var(--txt-2); font-size: var(--fs-sm); }
.login-dlg__buttons { display: grid; justify-items: center; gap: 10px; }
.login-dlg__google { min-height: 44px; }
.login-dlg__apple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 280px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.login-dlg__apple svg { width: 18px; height: 18px; fill: currentColor; }
.login-dlg__error { margin: 12px 0 0; color: var(--live); font-size: var(--fs-xs); font-weight: 700; }
.ml-clear { padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--txt-2); font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
.ml-clear:hover { background: var(--surface-2); color: var(--live); }