/*
 * spor.css — spor bahisleri sayfası (2026-11-13, 2ebf70fd).
 *
 * Betjuve (BetConstruct Spring) spor düzeninin ölçüleri (docs/tasarim/betjuve/spor/, getComputedStyle 1440):
 *   sol menü 300 · maç listesi ~443 · maç ayrıntısı 323 · kupon ~320; satır 34–36 px, köşe 5 px, yazı 12 px "Exo 2".
 *   lig başlığı yüzey .10 · tarih başlığı .05 · maç satırı .15 · oran hücresi .20 · pazar başlığı #54606a→#0f1010 gradyanı.
 * Renk/yarıçap/gölge YALNIZ public/tema.css token'larından (yeni değer gerekirse önce oraya). Site yalnız koyu temadır.
 * Kırılımlar: ≥1280 dört sütun · 1024–1279 sol+liste/ayrıntı+kupon · 768–1023 liste/ayrıntı+kupon, sol çekmece ·
 *   <768 tek sütun, kupon alttan açılır. Dokunmatikte her hedef ≥44 px. Gövde hiçbir genişlikte yana kaymaz.
 */

.sayfa-spor { --spor-ust: 72px; }
.spor { padding-bottom: 24px; }

/* ------------------------------------------------------------------ alt gezinti (Maç Önü · Canlı · Sonuçlar) */
.spor-altnav {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 10px 0;
  padding: 0 10px;
  min-height: 34px;
  border-radius: var(--r-10);
  background: var(--altserit-gradyan);
  overflow-x: auto;
  scrollbar-width: none;
}
.spor-altnav::-webkit-scrollbar { display: none; }
/* Tema logosu (özel tema; yoksa gizli) */
.spor-altnav__logo { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: 8px; }
.spor-altnav__logo[hidden] { display: none; }
.spor-altnav__logo img { display: block; max-height: 24px; max-width: 120px; object-fit: contain; }
/* Takım arması (yönetim → Takım armaları; armasız takımda hiç yer kaplamaz) */
.takim-arma { flex-shrink: 0; width: 18px; height: 18px; object-fit: contain; }
.mac-kart__takim .takim-arma { width: 22px; height: 22px; }
.spor-altnav__bag {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  min-height: 34px;
  color: var(--menu-metin);
  font-family: var(--yazi-baslik);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--gecis), border-color var(--gecis);
}
.spor-altnav__bag:hover { color: var(--altin-hover); }
.spor-altnav__bag[aria-current="page"] { color: var(--metin); border-bottom-color: var(--altin-kutu); }

/* ------------------------------------------------------------------ düzen */
.spor-duzen {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.spor-sol, .spor-mac, .spor-kupon { min-width: 0; }
.spor-liste { min-width: 0; }
/* Yükseklik sınırlı esnek sütunlarda (yapışkan sol/ayrıntı/kupon) çocuklar EZİLMEZ; sütun kendi içinde kayar. */
.spor-sol > *, .spor-mac > *, .spor-kupon > *, .kupon__govde > *, .kupon__bahislerim > * { flex-shrink: 0; }
.spor a { -webkit-tap-highlight-color: transparent; }
.mac-satir__ac, .mac-satir__daha, .spor-cip, .spor-satir { text-decoration: none; color: inherit; }

.spor-ikon-dugme {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--r-5);
  background: var(--yuzey-10);
  color: var(--metin-80);
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis);
}
.spor-ikon-dugme:hover { background: var(--yuzey-20); color: var(--metin); }
.spor-ikon-dugme .ikon { width: 18px; height: 18px; }
.sikon { width: 18px; height: 18px; flex: none; }

/* ------------------------------------------------------------------ sol menü */
.spor-sol {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.spor-sol__baslik { display: none; }
.spor-ara {
  position: relative;
  display: flex;
  align-items: center;
  height: 34px;
  border-radius: var(--r-5);
  background: var(--zemin);
  box-shadow: inset 0 0 0 1px var(--cizgi);
}
.spor-ara input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 34px 0 10px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--metin);
  font: 12px var(--yazi-baslik);
}
.spor-ara input::placeholder { color: var(--metin-56); }
.spor-ara input:focus-visible { outline: 2px solid var(--altin-kutu); outline-offset: -2px; }
.spor-ara .ikon { position: absolute; right: 10px; width: 16px; height: 16px; color: var(--metin-60); pointer-events: none; }

.spor-sekmeler { display: grid; grid-template-columns: 1fr 1fr; }
.spor-sekme {
  height: 34px;
  padding: 0 5px;
  border: 0;
  border-radius: var(--r-10);
  background: var(--yuzey-10);
  color: var(--metin);
  font: 12px var(--yazi-govde);
  text-transform: uppercase;
  cursor: pointer;
}
.spor-sekme[aria-selected="true"] { background: var(--zemin); border-radius: var(--r-10) var(--r-10) 0 0; font-weight: 500; }
.spor-sekme span { color: var(--metin-70); text-transform: none; }

.spor-hizli { display: flex; flex-direction: column; gap: 6px; }
.spor-satir {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: var(--r-5);
  background: var(--yuzey-10);
  color: var(--metin);
  font: 12px var(--yazi-baslik);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--gecis);
}
.spor-satir:hover { background: var(--yuzey-15); }
.spor-satir[aria-current="true"], .spor-satir[aria-expanded="true"] { background: var(--yuzey-15); }
.spor-satir__ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spor-satir__sayi { color: var(--metin-70); font: 13px var(--yazi-govde); }
.spor-satir__ok { width: 14px; height: 14px; color: var(--metin-70); transition: transform var(--gecis); }
.spor-satir[aria-expanded="true"] .spor-satir__ok { transform: rotate(90deg); }
.spor-satir--spor { font-size: 13px; }
.spor-satir--spor .sikon { color: var(--altin); }
.spor-satir--bolge { min-height: 32px; background: var(--yuzey-05); font-size: 12px; }
.spor-satir--lig { min-height: 32px; padding-left: 12px; background: var(--yuzey-08); font-size: 12px; }
.spor-satir--lig[aria-current="true"] { box-shadow: inset 3px 0 0 var(--altin-kutu); }
.spor-satir__bayrak {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 16px;
  padding: 0 3px;
  border-radius: 3px;
  background: var(--yuzey-15);
  color: var(--metin-80);
  font: 600 9px var(--yazi-govde);
  letter-spacing: .3px;
}
.spor-agac { display: flex; flex-direction: column; gap: 6px; }
.spor-agac ul { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; padding: 0 0 0 6px; list-style: none; }
.spor-agac > ul { padding: 0; margin: 0; }
.spor-agac li { list-style: none; }
.spor-agac__bos { padding: 14px 10px; color: var(--metin-60); font-size: 12px; text-align: center; }
.spor-arama-sonuc { display: flex; flex-direction: column; gap: 4px; }
.spor-arama-sonuc__baslik { margin: 6px 2px 2px; color: var(--metin-60); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }

/* mobil spor şeridi (yatay, kaydırılabilir; m.betjuve çipleri) */
.spor-serit {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.spor-serit::-webkit-scrollbar { display: none; }
.spor-cip {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 78px;
  height: 64px;
  padding: 6px 4px;
  border: 0;
  border-radius: var(--r-8);
  background: var(--yuzey-10);
  color: var(--metin-85);
  font: 11px var(--yazi-baslik);
  cursor: pointer;
}
.spor-cip .sikon { width: 24px; height: 24px; color: var(--altin); }
.spor-cip__ad { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spor-cip__sayi { position: absolute; top: 4px; right: 6px; color: var(--metin-70); font-size: 10px; }
.spor-cip[aria-current="true"] { background: var(--yesil-gradyan); color: var(--metin); }
.spor-cip[aria-current="true"] .sikon { color: var(--metin); }
.spor-cip--ligler { background: var(--yuzey-15); }

/* ------------------------------------------------------------------ liste başlığı */
.liste-bas {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--r-5);
  background: var(--yuzey-10);
}
.liste-bas__menu { display: none; flex: none; }
.liste-bas__baslik { margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px var(--yazi-baslik); }
.liste-bas__alt { color: var(--metin-60); font-size: 12px; white-space: nowrap; }

/* ------------------------------------------------------------------ maç listesi */
.mac-listesi { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.lig-grup { display: flex; flex-direction: column; gap: 4px; }
.lig-grup__bas {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--r-5);
  background: var(--yuzey-10);
  color: var(--metin-90);
  font: 12px var(--yazi-baslik);
}
.lig-grup__ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lig-grup__kolonlar { display: grid; grid-auto-flow: column; grid-auto-columns: 50px; gap: 2px; margin-right: 38px; color: var(--metin-70); font-size: 11px; text-align: center; }
.tarih-bas {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--r-5);
  background: var(--yuzey-05);
  color: var(--metin-90);
  font-size: 12px;
}
.mac-satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px 5px 8px 10px;
  border-radius: var(--r-5);
  background: var(--yuzey-15);
  transition: background var(--gecis);
}
.mac-satir[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--altin-kutu); }
.mac-satir__ac {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.mac-satir__takimlar { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mac-satir__takim { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--metin); font: 500 12px var(--yazi-baslik); }
.mac-satir__takim > span:not(.mac-satir__skor) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mac-satir__skor { margin-left: auto; color: var(--altin); font-weight: 600; }
.mac-satir__zaman { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--metin-70); font-size: 11px; white-space: nowrap; }
.mac-satir__canli { color: var(--altin-kutu); font-weight: 500; }
.mac-satir__oranlar { display: grid; grid-auto-flow: column; grid-auto-columns: 50px; gap: 2px; }
.mac-satir__daha {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 36px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--metin-70);
  font: 11px var(--yazi-baslik);
  cursor: pointer;
}
.mac-satir__daha .ikon { width: 14px; height: 14px; }
.mac-satir__daha:hover { color: var(--metin); }

/* ------------------------------------------------------------------ oran düğmesi */
.oran {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  height: 34px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--r-5);
  background: var(--yuzey-20);
  color: var(--metin-70);
  font: 12px var(--yazi-baslik);
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis);
}
.oran:hover:not(:disabled) { background: var(--yuzey-24); color: var(--metin); }
.oran[aria-pressed="true"] { background: var(--aksan); color: var(--metin); }
.oran[aria-pressed="true"]:hover { background: var(--aksan-hover); }
.oran:disabled { cursor: not-allowed; color: var(--metin-40); background: var(--yuzey-10); }
.oran__deger { color: var(--metin); font-weight: 500; }
.oran:disabled .oran__deger { color: var(--metin-40); }
.oran__ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.oran--genis { justify-content: space-between; padding: 0 10px; }
.oran__kilit { width: 13px; height: 13px; }
/* Yön yalnız OK işaretiyle gösterilir: renkli METİN gri oran zemininde 2,1–2,6:1 kalıyordu (tatbikat 2026-11-13, eşik 4.5:1). */
.oran.is-yukari::after, .oran.is-asagi::after {
  content: "";
  position: absolute;
  right: 3px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.oran.is-yukari::after { top: 3px; border-bottom: 5px solid var(--basari-hover); }
.oran.is-asagi::after { bottom: 3px; border-top: 5px solid var(--hata-metin); }

/* ------------------------------------------------------------------ maç ayrıntısı */
.spor-mac { display: none; flex-direction: column; gap: 6px; }
.mac-kart {
  position: relative;
  overflow: hidden;
  padding: 10px;
  border-radius: var(--r-5);
  background: var(--karo-gradyan);
  box-shadow: var(--golge-karo);
}
.mac-kart__ust { display: flex; align-items: center; gap: 8px; color: var(--metin-90); font-size: 12px; }
.mac-kart__ust .sikon { width: 16px; height: 16px; }
.mac-kart__lig { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mac-kart__geri { display: none; }
.mac-kart__tarih { margin: 8px 0 10px; color: var(--metin-85); font-size: 12px; }
.mac-kart__takim { display: flex; align-items: center; gap: 8px; margin: 6px 0; font: 600 15px var(--yazi-baslik); text-shadow: var(--golge-karo-yazi); }
.mac-kart__takim > span:not(.mac-kart__skor) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mac-kart__skor { min-width: 28px; padding: 2px 6px; border-radius: var(--r-4); background: var(--kart-ortu); text-align: center; color: var(--altin); }
.mac-kart__durum { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; padding: 3px 8px; border-radius: var(--r-4); background: var(--kart-ortu); color: var(--altin); font: 500 12px var(--yazi-baslik); }
.mac-kart__ist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mac-kart__ist span { padding: 2px 6px; border-radius: var(--r-4); background: var(--kart-ortu); color: var(--metin-85); font-size: 11px; }

.pazar-sekmeler {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-radius: var(--r-5);
  background: var(--yuzey-05);
  scrollbar-width: none;
}
.pazar-sekmeler::-webkit-scrollbar { display: none; }
.pazar-sekme {
  flex: none;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--metin-50);
  font: 14px var(--yazi-govde);
  white-space: nowrap;
  cursor: pointer;
}
.pazar-sekme sup { margin-left: 2px; font-size: 9px; color: var(--metin-50); }
.pazar-sekme:hover { color: var(--metin-80); }
.pazar-sekme[aria-selected="true"] { color: var(--metin); border-bottom-color: var(--altin-kutu); }

.pazar { border-radius: var(--r-5); overflow: hidden; }
.pazar__bas {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 5px 10px;
  border: 0;
  background: var(--altserit-gradyan);
  color: var(--metin-80);
  font: 12px var(--yazi-baslik);
  text-align: left;
  cursor: pointer;
}
.pazar__ad { flex: 1; min-width: 0; }
.pazar__bas .ikon { width: 14px; height: 14px; transition: transform var(--gecis); }
.pazar__bas[aria-expanded="false"] .ikon { transform: rotate(180deg); }
.pazar__govde { display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--yuzey-05); }
.pazar__satir { display: grid; gap: 2px; }
.pazar__satir--ad span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 6px;
  border-radius: var(--r-5);
  background: var(--yuzey-08);
  color: var(--metin-70);
  font: 12px var(--yazi-baslik);
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.pazar__govde[hidden] { display: none; }
.pazar-bos { padding: 18px 10px; border-radius: var(--r-5); background: var(--yuzey-05); color: var(--metin-60); font-size: 12px; text-align: center; }

/* ------------------------------------------------------------------ kupon */
.spor-kupon {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-10);
  background: var(--yuzey-05);
  box-shadow: inset 0 0 0 1px var(--cizgi-ince);
}
.kupon__tutamac { display: none; }
.kupon__sekmeler { display: flex; align-items: stretch; gap: 2px; }
.kupon__sekme {
  flex: 1;
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-10) var(--r-10) 0 0;
  background: var(--gri-gradyan);
  color: var(--metin);
  font: 500 12px var(--yazi-govde);
  text-transform: uppercase;
  cursor: pointer;
}
.kupon__sekme[aria-selected="false"] { background: var(--yuzey-08); color: var(--metin-70); }
.kupon__rozet { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 4px; border-radius: var(--r-hap); background: var(--altin-kutu); color: var(--aksan-metin); font-size: 11px; }
.kupon__kapat { display: none; }
.kupon__govde, .kupon__bahislerim { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.kupon__bahislerim[hidden], .kupon__govde[hidden] { display: none; }
.kupon-turler { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; border-radius: var(--r-5); background: var(--yuzey-08); }
.kupon-tur {
  min-height: 32px;
  border: 0;
  border-radius: var(--r-4);
  background: transparent;
  color: var(--metin-70);
  font: 12px var(--yazi-govde);
  cursor: pointer;
}
.kupon-tur[aria-pressed="true"] { background: var(--zemin); color: var(--metin); font-weight: 500; }
.kupon-tur:disabled { cursor: not-allowed; color: var(--metin-40); }
.kupon-ayar { display: flex; align-items: center; gap: 8px; color: var(--metin-80); font-size: 12px; }
.kupon-ayar .ikon { width: 16px; height: 16px; }
.kupon-ayar select {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-5);
  background: var(--yuzey-08);
  color: var(--metin);
  font: 12px var(--yazi-govde);
}
.kupon-ayar select option { background: var(--modal-zemin); color: var(--metin); }
.kupon-secimler { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kupon-secim {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  padding: 8px 34px 8px 10px;
  border-radius: var(--r-5);
  background: var(--yuzey-10);
}
.kupon-secim.is-kapali { opacity: .6; }
.kupon-secim.is-degisti { box-shadow: inset 3px 0 0 var(--uyari); }
.kupon-secim__mac { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--metin-70); font-size: 11px; }
.kupon-secim__pazar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--metin-60); font-size: 11px; }
.kupon-secim__ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--metin); font: 500 12px var(--yazi-baslik); }
.kupon-secim__oran { align-self: end; color: var(--altin); font: 600 13px var(--yazi-baslik); }
.kupon-secim__eski { margin-right: 4px; color: var(--metin-50); font-weight: 400; text-decoration: line-through; }
.kupon-secim__durum { grid-column: 1 / -1; color: var(--uyari); font-size: 11px; }
.kupon-secim__sil {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--r-4);
  background: transparent;
  color: var(--metin-60);
  cursor: pointer;
}
.kupon-secim__sil:hover { background: var(--yuzey-15); color: var(--metin); }
.kupon-secim__sil .ikon { width: 14px; height: 14px; }
.kupon-secim__tutar { grid-column: 1 / -1; margin-top: 4px; }

.tutar-alan { display: flex; align-items: center; gap: 6px; }
.tutar-alan label { color: var(--metin-70); font-size: 12px; white-space: nowrap; }
.tutar-alan input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-5);
  background: var(--alan-zemin);
  box-shadow: inset 0 0 0 1px var(--cizgi);
  color: var(--metin);
  font: 500 14px var(--yazi-baslik);
  text-align: right;
}
.tutar-alan input:focus-visible { outline: 2px solid var(--altin-kutu); outline-offset: -1px; }
.hizli-tutar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.hizli-tutar button {
  min-height: 30px;
  border: 0;
  border-radius: var(--r-4);
  background: var(--yuzey-10);
  color: var(--metin-85);
  font: 12px var(--yazi-baslik);
  cursor: pointer;
}
.hizli-tutar button:hover { background: var(--yuzey-20); }
.kupon-ozet { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: var(--r-5); background: var(--yuzey-08); font-size: 12px; }
.kupon-ozet div { display: flex; justify-content: space-between; gap: 8px; color: var(--metin-70); }
.kupon-ozet strong { color: var(--metin); font: 600 13px var(--yazi-baslik); }
.kupon-ozet .kupon-ozet__kazanc strong { color: var(--altin); font-size: 15px; }
.kupon-uyari {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-5);
  background: var(--yuzey-08);
  box-shadow: inset 3px 0 0 var(--uyari);
  color: var(--metin-90);
  font-size: 12px;
}
.kupon-uyari .ikon { flex: none; width: 16px; height: 16px; color: var(--uyari); }
.kupon-uyari--hata { box-shadow: inset 3px 0 0 var(--hata); }
.kupon-uyari--hata .ikon { color: var(--hata-metin); }
.kupon-uyari a, .kupon-uyari button.bag { padding: 0; border: 0; background: none; color: var(--altin); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.bahis-yap {
  min-height: 40px;
  border: 0;
  border-radius: var(--r-8);
  background: var(--gri-gradyan);
  color: var(--metin);
  font: 600 14px var(--yazi-govde);
  text-transform: uppercase;
  cursor: pointer;
  transition: filter var(--gecis);
}
.bahis-yap:not(:disabled) { background: var(--yesil-gradyan); }
.bahis-yap:hover:not(:disabled) { filter: brightness(1.12); }
.bahis-yap:disabled { cursor: not-allowed; color: var(--metin-50); }
.bahis-yap[aria-busy="true"] { cursor: progress; }
.kupon-neden { margin: -4px 0 0; color: var(--metin-60); font-size: 11px; text-align: center; }
.kupon-bos { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 10px; color: var(--metin-50); text-align: center; font-size: 12px; }
.kupon-bos .sikon { width: 54px; height: 54px; color: var(--metin-40); }
.kupon-bos strong { color: var(--metin-70); font-weight: 500; }
.kupon-temizle { align-self: flex-end; padding: 4px 0; border: 0; background: none; color: var(--metin-60); font-size: 12px; text-decoration: underline; cursor: pointer; }
.kupon-temizle:hover { color: var(--metin); }

/* bahislerim */
.bahis-kart { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: var(--r-5); background: var(--yuzey-10); }
.bahis-kart__ust { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--metin-60); }
.bahis-kart__ust span:first-child { flex: 1; }
.durum-cip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-hap); font: 600 10px var(--yazi-govde); text-transform: uppercase; letter-spacing: .4px; background: var(--yuzey-15); color: var(--metin-85); }
.durum-cip--acik { background: var(--bilgi); color: var(--metin); }
.durum-cip--kazandi { background: var(--basari); color: var(--metin); }
.durum-cip--kaybetti { background: var(--hata); color: var(--metin); }
.durum-cip--iade, .durum-cip--iptal { background: var(--yuzey-24); color: var(--metin); }
.bahis-kart__secim { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding-top: 6px; border-top: 1px solid var(--cizgi-ince); font-size: 12px; }
.bahis-kart__secim span:nth-child(odd) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bahis-kart__mac { color: var(--metin-70); }
.bahis-kart__karar { font-size: 11px; font-weight: 600; }
.bahis-kart__karar--kazandi { color: var(--basari-hover); }
.bahis-kart__karar--kaybetti { color: var(--hata-metin); }
.bahis-kart__karar--iade { color: var(--metin-70); }
.bahis-kart__alt { display: flex; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--cizgi-ince); color: var(--metin-70); font-size: 12px; }
.bahis-kart__alt strong { color: var(--metin); }

/* boş / hata / iskelet */
.spor-bos { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 14px; border-radius: var(--r-5); background: var(--yuzey-05); color: var(--metin-60); text-align: center; font-size: 13px; }
.spor-bos .sikon { width: 40px; height: 40px; color: var(--metin-40); }
.iskelet--mac { aspect-ratio: auto; height: 54px; border-radius: var(--r-5); }

/* sonuçlar */
.sonuc-filtre { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sonuc-filtre select, .sonuc-filtre input { height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-5); background: var(--yuzey-10); color: var(--metin); font: 12px var(--yazi-govde); }
.sonuc-filtre select option { background: var(--modal-zemin); }
.sonuc-satir { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: var(--r-5); background: var(--yuzey-10); font-size: 12px; }
.sonuc-satir__saat { color: var(--metin-60); }
.sonuc-satir__ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--yazi-baslik); }
.sonuc-satir__skor { color: var(--altin); font: 600 13px var(--yazi-baslik); }

/* kupon çağrı düğmesi + örtü (dar ekran) */
.kupon-cagri {
  position: fixed;
  left: 50%;
  bottom: calc(var(--alt-gezinti-y, 0px) + 10px + env(safe-area-inset-bottom, 0px));
  z-index: 940;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-hap);
  background: var(--yesil-gradyan);
  box-shadow: var(--golge-acilir);
  color: var(--metin);
  font: 600 13px var(--yazi-govde);
  transform: translateX(-50%);
  cursor: pointer;
}
.kupon-cagri[hidden] { display: none; }
.kupon-cagri .ikon { width: 18px; height: 18px; }
.kupon-cagri__sayi { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: var(--r-hap); background: var(--metin); color: var(--zemin); font-size: 12px; }
.kupon-cagri__oran { color: var(--altin); }
.spor-ortu { position: fixed; inset: 0; z-index: 955; background: var(--ortu); }
.spor-ortu[hidden] { display: none; }

/* ------------------------------------------------------------------ kampanya vitrini (banner · öne çıkan maçlar · teklifler)
   Orta sütunun genişliği düzene göre 340–700 px arası değişir → kart sayısı ekran değil KAP genişliğiyle (container query) seçilir.
   Şeritler kendi kabında yatay kayar; gövde hiçbir genişlikte yana taşmaz. */
.spor-vitrin { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin-bottom: 12px; container: vitrin / inline-size; }
.spor-vitrin[hidden], .vitrin-yuva[hidden] { display: none; }
.vitrin-yuva { min-width: 0; }
.vitrin-blok { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vitrin-blok__bas {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 4px 0 10px;
  border-radius: var(--r-5);
  background: var(--yuzey-10);
  color: var(--metin-90);
}
.vitrin-blok__bas > .ikon { width: 16px; height: 16px; color: var(--altin); }
.vitrin-blok__baslik { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px var(--yazi-baslik); }
.vitrin-blok__oklar { display: inline-flex; gap: 4px; }
.vitrin-blok__oklar .spor-ikon-dugme { width: 28px; height: 28px; }
.vitrin-blok__oklar .spor-ikon-dugme .ikon { width: 16px; height: 16px; }
.vitrin-blok__oklar [hidden], .vitrin-ok[hidden], .vitrin-banner-kontrol[hidden], .vitrin-banner__gorsel[hidden] { display: none; }

/* position: relative ŞART: şeridin kayan kartlarındaki mutlak konumlu öğeler (.gorunmez ekran okuyucu metni) kapsayıcı blok
   şerit olmazsa kırpılmıyor ve belgeyi yana genişletiyordu (375 mobilde yerleşim alanı 588 px'e çıktı, ölçüldü 2026-11-14). */
.vitrin-serit {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.vitrin-serit::-webkit-scrollbar { display: none; }
.vitrin-serit > * { min-width: 0; scroll-snap-align: start; }

/* banner şeridi: dar kapta bir kart (ardındaki kart görünür), geniş kapta iki kart */
.vitrin-serit--banner { grid-auto-columns: 100%; border-radius: var(--r-10); }
.vitrin-serit--banner:has(> :nth-child(2)) { grid-auto-columns: 88%; }
.vitrin-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  height: 132px;
  overflow: hidden;
  border-radius: var(--r-10);
  background: var(--karo-gradyan);
  box-shadow: var(--golge-karo);
  color: var(--metin);
  text-decoration: none;
}
.vitrin-banner__gorsel { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Görsel ne olursa olsun yazı okunur: sol tarafa koyu geçiş (zemin token'ı) */
.vitrin-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--zemin-koyu) 0%, transparent 82%); opacity: .88; }
.vitrin-banner__metin { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 80%; padding: 14px 16px; }
.vitrin-banner__baslik {
  display: -webkit-box;
  overflow: hidden;
  font: 600 17px/1.2 var(--yazi-baslik);
  text-shadow: var(--golge-karo-yazi);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.vitrin-banner__alt { display: -webkit-box; overflow: hidden; color: var(--metin-85); font-size: 12px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vitrin-banner__eylem {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  margin-top: 4px;
  padding: 0 12px;
  border-radius: var(--r-hap);
  background: var(--altin-kutu);
  color: var(--aksan-metin);
  font: 600 12px var(--yazi-govde);
  transition: background var(--gecis);
}
.vitrin-banner__eylem .ikon { width: 14px; height: 14px; }
a.vitrin-banner:hover .vitrin-banner__eylem { background: var(--altin-hover); }
a.vitrin-banner:focus-visible { outline: 2px solid var(--altin-kutu); outline-offset: -2px; }
.vitrin-banner-kontrol { display: flex; align-items: center; justify-content: center; gap: 4px; }
.vitrin-ok {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--r-hap);
  background: var(--yuzey-10);
  color: var(--metin-80);
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis);
}
.vitrin-ok:hover { background: var(--yuzey-20); color: var(--metin); }
.vitrin-ok .ikon { width: 14px; height: 14px; }
.vitrin-noktalar { display: flex; }
.vitrin-nokta { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.vitrin-nokta::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-hap); background: var(--metin-40); transition: width var(--gecis), background var(--gecis); }
.vitrin-nokta[aria-current="true"]::before { width: 16px; background: var(--altin); }
.vitrin-nokta:focus-visible { outline: 2px solid var(--altin-kutu); outline-offset: -4px; border-radius: var(--r-hap); }

/* öne çıkan maçlar */
.vitrin-serit--mac { grid-auto-columns: 80%; }
.vitrin-serit--mac:not(:has(> :nth-child(2))) { grid-auto-columns: 100%; }
.vitrin-mac {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: var(--r-5);
  background: var(--yuzey-15);
}
.vitrin-mac.is-canli { box-shadow: inset 0 2px 0 var(--altin-kutu); }
.vitrin-mac__ust { display: flex; align-items: center; gap: 6px; min-height: 20px; color: var(--metin-70); font-size: 11px; }
.vitrin-mac__ust .sikon { width: 14px; height: 14px; color: var(--altin); }
.vitrin-mac__lig { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vitrin-etiket {
  flex: none;
  max-width: 45%;
  height: 18px;
  padding: 0 7px;
  overflow: hidden;
  border-radius: var(--r-hap);
  background: var(--altin-kutu);
  color: var(--aksan-metin);
  font: 600 10px/18px var(--yazi-govde);
  letter-spacing: .4px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.vitrin-mac__ac { display: flex; flex-direction: column; gap: 4px; padding: 2px 0; border-radius: var(--r-4); color: inherit; text-decoration: none; }
.vitrin-mac__ac:focus-visible { outline: 2px solid var(--altin-kutu); outline-offset: 2px; }
.vitrin-mac__takim { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--metin); font: 500 13px var(--yazi-baslik); }
.vitrin-mac__takim > span:not(.vitrin-mac__skor) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vitrin-mac__ac:hover .vitrin-mac__takim > span:not(.vitrin-mac__skor) { text-decoration: underline; text-decoration-color: var(--metin-40); }
.vitrin-mac__skor { color: var(--altin); font-weight: 600; }
.vitrin-mac__zaman { color: var(--metin-70); font-size: 11px; }
.vitrin-mac__canli { display: inline-flex; align-items: center; gap: 4px; color: var(--altin-kutu); font-weight: 500; }
.vitrin-mac__canli .sikon { width: 12px; height: 12px; }
.vitrin-mac__kolonlar, .vitrin-mac__oranlar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
.vitrin-mac__kolonlar { margin-top: auto; color: var(--metin-60); font-size: 11px; text-align: center; }
.vitrin-mac__bos { margin: auto 0 0; color: var(--metin-60); font-size: 12px; }

/* teklif kartları (Günün Kombinesi · Hazır kuponlar): birden çok kartta yatay şerit (dar kapta ardındaki kart görünür) */
.vitrin-serit--teklif { grid-auto-columns: 100%; }
.vitrin-serit--teklif:has(> :nth-child(2)) { grid-auto-columns: 90%; }
.teklif-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding-bottom: 10px;
  overflow: hidden;
  border-radius: var(--r-8);
  background: var(--yuzey-08);
  box-shadow: inset 0 0 0 1px var(--cizgi);
  container: teklif / inline-size;
}
.teklif-kart--artirilmis { box-shadow: inset 0 0 0 1px var(--aksan); }
.teklif-kart__govde { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; padding: 0 10px; }
.teklif-kart__sol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.teklif-kart__bas { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 10px; background: var(--altserit-gradyan); }
.teklif-kart--artirilmis .teklif-kart__bas { background: var(--karo-gradyan); }
.teklif-kart__baslikkap { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.teklif-kart__baslik { margin: 0; color: var(--metin); font: 600 14px/1.25 var(--yazi-baslik); text-shadow: var(--golge-karo-yazi); overflow-wrap: anywhere; }
.teklif-kart__aciklama { color: var(--metin-85); font-size: 12px; line-height: 1.35; text-shadow: var(--golge-karo-yazi); }
.teklif-kart__sure { display: flex; align-items: center; gap: 6px; margin-block: 0; color: var(--metin-70); font-size: 11px; }
.teklif-kart__sure .ikon { width: 13px; height: 13px; }
.teklif-bacaklar { display: flex; flex-direction: column; gap: 4px; margin-block: 0; padding: 0; list-style: none; }
.teklif-bacak {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  padding: 7px 10px;
  border-radius: var(--r-5);
  background: var(--yuzey-10);
}
.teklif-bacak.is-kapali { box-shadow: inset 3px 0 0 var(--uyari); }
.teklif-bacak.is-degisti { box-shadow: inset 3px 0 0 var(--uyari); }
.teklif-bacak__ust { display: flex; grid-column: 1 / -1; align-items: center; gap: 6px; min-width: 0; color: var(--metin-60); font-size: 11px; }
.teklif-bacak__ust .sikon { width: 12px; height: 12px; color: var(--altin); }
.teklif-bacak__lig { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teklif-bacak__zaman { flex: none; }
.teklif-bacak__canli { color: var(--altin-kutu); font-weight: 600; }
.teklif-bacak__mac { grid-column: 1 / -1; overflow: hidden; color: var(--metin); font: 500 12px var(--yazi-baslik); text-overflow: ellipsis; white-space: nowrap; }
.teklif-bacak__secim { overflow: hidden; color: var(--metin-70); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.teklif-bacak__secim strong { color: var(--metin); font-weight: 500; }
.teklif-bacak__oran { display: inline-flex; align-self: end; align-items: center; gap: 4px; color: var(--altin); font: 600 13px var(--yazi-baslik); white-space: nowrap; }
.teklif-bacak__oran .ikon { width: 12px; height: 12px; }
.teklif-bacak.is-kapali .teklif-bacak__oran { color: var(--uyari); font-size: 12px; }
.teklif-kart__toplam {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: var(--r-5);
  background: var(--yuzey-05);
  color: var(--metin-70);
  font-size: 12px;
}
.teklif-kart__oranlar { display: inline-flex; align-items: center; gap: 8px; }
.teklif-kart__eski { color: var(--metin-60); font: 500 13px var(--yazi-baslik); text-decoration: line-through; }
.teklif-kart__oran { color: var(--altin); font: 700 18px var(--yazi-baslik); }
.teklif-kart--artirilmis .teklif-kart__oran { padding: 2px 10px; border-radius: var(--r-5); background: var(--altin-kutu); color: var(--aksan-metin); }
.teklif-kart__oyna { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.teklif-kart__kazanc { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--metin-70); font-size: 12px; }
.teklif-kart__kazanc strong { color: var(--altin); font: 600 15px var(--yazi-baslik); }
.teklif-kart__not { margin: -4px 0 0; color: var(--metin-60); font-size: 11px; }
.teklif-kart__eylem { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.teklif-kart__eylem--iki { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.teklif-ekle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-8);
  background: var(--yuzey-15);
  color: var(--metin);
  font: 600 13px var(--yazi-govde);
  cursor: pointer;
  transition: background var(--gecis);
}
.teklif-ekle:hover:not(:disabled) { background: var(--yuzey-24); }
.teklif-ekle:disabled { cursor: not-allowed; color: var(--metin-50); }
.teklif-ekle .ikon { width: 16px; height: 16px; }
.teklif-kart .kupon-neden { margin: -2px 0 0; }
.teklif-kart .kupon-neden:empty { display: none; }

/* kampanya rozetleri (teklif kartı · bahislerim) */
.kampanya-rozet {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-hap);
  background: var(--yuzey-15);
  color: var(--metin-85);
  font: 600 10px var(--yazi-govde);
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.kampanya-rozet .ikon { width: 12px; height: 12px; flex: none; }
.kampanya-rozet > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kampanya-rozet--artirilmis { background: var(--altin-kutu); color: var(--aksan-metin); }
.teklif-kart--artirilmis .kampanya-rozet--artirilmis { background: var(--kart-ortu); color: var(--altin); }
.kampanya-rozet--freebet { background: var(--yuzey-08); box-shadow: inset 0 0 0 1px var(--basari-hover); color: var(--basari-hover); }
.kampanya-rozet--teklif { flex: 0 1 auto; min-width: 0; font-size: 11px; letter-spacing: 0; text-transform: none; }
.bahis-kart__rozetler { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.kupon-uyari--basari { box-shadow: inset 3px 0 0 var(--basari-hover); }
.kupon-uyari--basari .ikon { color: var(--basari-hover); }
.kupon-uyari--freebet { box-shadow: inset 3px 0 0 var(--altin-kutu); }
.kupon-uyari--freebet .ikon { color: var(--altin); }

/* freebet seçimi + kilitli tutar */
.freebet-sec { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 8px; border: 0; border-radius: var(--r-5); background: var(--yuzey-08); box-shadow: inset 3px 0 0 var(--altin-kutu); }
.freebet-sec__baslik { display: flex; align-items: center; gap: 6px; padding: 0 2px 4px; color: var(--metin); font: 600 12px var(--yazi-govde); }
.freebet-sec__baslik .ikon { width: 16px; height: 16px; color: var(--altin); }
.freebet-secenek {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: var(--r-5);
  background: var(--yuzey-08);
  cursor: pointer;
  transition: background var(--gecis), box-shadow var(--gecis);
}
.freebet-secenek:hover { background: var(--yuzey-12); }
.freebet-secenek:has(input:checked) { background: var(--yuzey-15); box-shadow: inset 0 0 0 1px var(--altin-kutu); }
.freebet-secenek input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--altin-kutu); }
.freebet-secenek input:focus-visible { outline: 2px solid var(--altin-kutu); outline-offset: 2px; }
.freebet-secenek__metin { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.freebet-secenek__metin strong { color: var(--metin); font: 600 13px var(--yazi-baslik); }
.freebet-secenek__metin span { color: var(--metin-70); font-size: 11px; }
.tutar-alan--kilitli input { background: var(--yuzey-08); box-shadow: inset 0 0 0 1px var(--altin-kutu); color: var(--altin); cursor: default; }
.kupon-ozet__not { margin: 2px 0 0; color: var(--metin-60); font-size: 11px; line-height: 1.4; }

/* promosyon kodu (katlanır) */
.promo { border-radius: var(--r-5); background: var(--yuzey-08); }
.promo__bas {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--r-5);
  color: var(--metin-85);
  font: 500 12px var(--yazi-govde);
  list-style: none;
  cursor: pointer;
}
.promo__bas::-webkit-details-marker { display: none; }
.promo__bas > span { flex: 1; }
.promo__bas .ikon { width: 16px; height: 16px; color: var(--altin); }
.promo__bas .promo__ok { width: 14px; height: 14px; color: var(--metin-70); transition: transform var(--gecis); }
.promo[open] .promo__ok { transform: rotate(180deg); }
.promo__bas:hover { color: var(--metin); }
.promo__bas:focus-visible { outline: 2px solid var(--altin-kutu); outline-offset: -2px; }
.promo__form { display: flex; gap: 6px; padding: 0 10px 10px; }
.promo__alan {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-5);
  background: var(--alan-zemin);
  box-shadow: inset 0 0 0 1px var(--cizgi);
  color: var(--metin);
  font: 500 13px var(--yazi-baslik);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.promo__alan::placeholder { color: var(--metin-56); font-weight: 400; letter-spacing: 0; text-transform: none; }
.promo__alan:focus-visible { outline: 2px solid var(--altin-kutu); outline-offset: -1px; }
.promo__alan[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--hata-metin); }
.promo__gonder {
  flex: none;
  min-width: 84px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-5);
  background: var(--aksan);
  color: var(--metin);
  font: 600 12px var(--yazi-govde);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--gecis);
}
.promo__gonder:hover:not(:disabled) { background: var(--aksan-hover); }
.promo__gonder:disabled { cursor: progress; }
.promo__mesaj { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 0 10px 10px; font-size: 12px; line-height: 1.4; }
.promo__mesaj .ikon { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.promo__mesaj--hata { color: var(--hata-metin); }
.promo__mesaj--basari { color: var(--basari-hover); }

@container vitrin (min-width: 440px) {
  .vitrin-serit--mac:has(> :nth-child(2)) { grid-auto-columns: calc((100% - 8px) / 2); }
}
@container vitrin (min-width: 560px) {
  .vitrin-serit--banner:has(> :nth-child(2)) { grid-auto-columns: calc((100% - 8px) / 2); }
}
@container vitrin (min-width: 600px) {
  .vitrin-serit--teklif:has(> :nth-child(2)) { grid-auto-columns: calc((100% - 8px) / 2); }
}
@container vitrin (min-width: 640px) {
  .vitrin-serit--mac:has(> :nth-child(3)) { grid-auto-columns: calc((100% - 16px) / 3); }
}
/* Geniş teklif kartı: bacaklar solda, oynama paneli sağda (dikey boy yarıya iner) */
@container teklif (min-width: 540px) {
  .teklif-kart__govde { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 270px); align-items: start; gap: 10px; }
}

/* ================================================================== kırılımlar */

/* <1024: sol menü çekmece, kupon alttan açılan pano */
@media (max-width: 1023px) {
  .spor-sol {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 960;
    width: min(340px, 88vw);
    padding: 12px 10px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--zemin);
    box-shadow: var(--golge-acilir);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-105%);
    transition: transform var(--gecis);
    visibility: hidden;
  }
  .spor-duzen[data-sol-acik="1"] .spor-sol { transform: none; visibility: visible; }
  .spor-sol__baslik { display: flex; align-items: center; justify-content: space-between; color: var(--metin); font: 600 15px var(--yazi-baslik); }
  .liste-bas__menu { display: inline-grid; }
  .spor-duzen[data-gorunum="mac"] .spor-liste, .spor-duzen[data-gorunum="mac"] .spor-serit { display: none; }
  .spor-duzen[data-gorunum="mac"] .spor-mac { display: flex; }
  .mac-kart__geri { display: inline-grid; }
}

@media (max-width: 767px) {
  .spor-kupon {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 960;
    max-height: min(86dvh, 720px);
    border-radius: var(--r-20) var(--r-20) 0 0;
    background: var(--modal-zemin);
    box-shadow: var(--golge-acilir);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(105%);
    transition: transform var(--gecis);
    visibility: hidden;
  }
  .spor-kupon[data-acik="1"] { transform: none; visibility: visible; }
  .kupon__tutamac { display: block; width: 44px; height: 4px; margin: 8px auto 2px; border-radius: var(--r-hap); background: var(--yuzey-24); }
  .kupon__kapat { display: inline-grid; align-self: center; margin: 0 6px; }
  .kupon__sekme { border-radius: var(--r-10); }
  .spor-altnav { justify-content: flex-start; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .spor-duzen { grid-template-columns: minmax(0, 1fr) 300px; }
  .spor-serit { grid-column: 1 / -1; }
  /* Liste ve maç aynı satırda (yalnız biri görünür). Satır verilmezse maç görünümünde (şerit gizli) maç 1. satıra, kupon 2. satıra
     düşüp sayfanın en altında kalıyordu (2026-11-14 ölçüldü: 768'de kupon y≈5520). */
  .spor-liste, .spor-mac { grid-column: 1; grid-row: 2; }
  .spor-kupon { grid-column: 2; grid-row: 2 / span 2; position: sticky; top: var(--spor-ust); max-height: calc(100dvh - var(--spor-ust) - 12px); overflow-y: auto; }
  .kupon-cagri { display: none; }
}

@media (min-width: 1024px) {
  .spor-serit { display: none; }
  .spor-sol, .spor-kupon {
    position: sticky;
    top: var(--spor-ust);
    max-height: calc(100dvh - var(--spor-ust) - 12px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--yuzey-20) transparent;
  }
  .kupon-cagri { display: none; }
}

/* 1024–1399: üç sütun (sol · liste↔maç · kupon). Dört sütunun en küçük toplamı 300+380+323+320+3×10 = 1353 px; kenar boşluğu ve
   kaydırma çubuğuyla ~1390 px ister → 1280'de 83 px yatay taşma ölçüldü (2026-11-13). Eşik JS `genisEkran` ile AYNI (test). */
@media (min-width: 1024px) and (max-width: 1399px) {
  .spor-duzen { grid-template-columns: 260px minmax(0, 1fr) 300px; }
  .spor-sol { grid-column: 1; grid-row: 1; }
  .spor-liste, .spor-mac { grid-column: 2; grid-row: 1; }
  .spor-kupon { grid-column: 3; grid-row: 1; }
  .spor-duzen[data-gorunum="mac"] .spor-liste { display: none; }
  .spor-duzen[data-gorunum="mac"] .spor-mac { display: flex; }
  .mac-kart__geri { display: inline-grid; }
}

@media (min-width: 1400px) {
  .spor-duzen { grid-template-columns: 300px minmax(380px, 1fr) 323px 320px; }
  .spor-sol { grid-column: 1; }
  .spor-liste { grid-column: 2; }
  .spor-mac { grid-column: 3; display: flex; position: sticky; top: var(--spor-ust); max-height: calc(100dvh - var(--spor-ust) - 12px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--yuzey-20) transparent; }
  .spor-kupon { grid-column: 4; }
}

/* Dokunmatik: her hedef ≥44 px (betjuve masaüstü 34 px'tir; dokunmada büyütülür) */
@media (pointer: coarse) {
  .oran, .mac-satir__daha, .spor-satir, .spor-sekme, .pazar__bas, .pazar-sekme, .kupon__sekme, .kupon-tur, .hizli-tutar button,
  .spor-ikon-dugme, .tutar-alan input, .kupon-ayar select, .spor-ara, .bahis-yap, .spor-altnav__bag, .mac-satir__ac,
  .sonuc-filtre select, .sonuc-filtre input, .kupon-temizle, .hap-dugme { min-height: 44px; }
  .spor-altnav { min-height: 44px; }
  .mac-satir__daha { min-width: 44px; min-height: 44px; }
  .spor-ikon-dugme { width: 44px; height: 44px; }
  .oran { height: 44px; }
  .mac-satir__oranlar, .lig-grup__kolonlar { grid-auto-columns: 54px; }
  .kupon-secim__sil { width: 44px; height: 44px; top: 0; right: 0; }
  .kupon-secim { padding-right: 46px; }
  /* kampanya: kaydırma okları yerine parmakla kaydırma + nokta düğmeleri (44 px hedef) */
  .vitrin-ok { display: none; }
  .vitrin-banner-kontrol { margin-top: -6px; }
  .vitrin-nokta { width: 44px; height: 44px; }
  .vitrin-blok__oklar .spor-ikon-dugme { width: 44px; height: 44px; }
  .vitrin-mac__ac { min-height: 44px; }
  .teklif-ekle, .freebet-secenek, .promo__bas { min-height: 44px; }
  .promo__alan, .promo__gonder { height: 44px; }
}

@media (max-width: 420px) {
  .mac-satir { grid-template-columns: minmax(0, 1fr) auto; }
  .mac-satir__ac { grid-column: 1 / -1; }
  .mac-satir__oranlar { grid-column: 1; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
  .lig-grup__kolonlar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .spor-sol, .spor-kupon, .oran, .pazar__bas .ikon { transition: none; }
  .vitrin-nokta::before, .promo__ok, .vitrin-banner__eylem { transition: none; }
}

/* ---------------------------------------------------------------- Bahislerim: net kazanç / kayıp özeti (27580268, 2026-11-14)
   Kullanıcı: "bir kullanıcının kazancı ve kaybı da net olsun". Sayılar sunucuda TEK yordamdan (spor/kazanc.js → /api/spor/ozetim). */
.bahis-ozet { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-5); background: var(--yuzey-10); border: 1px solid var(--cizgi-ince); }
.bahis-ozet--iskelet { height: 132px; border-radius: var(--r-5); }
.bahis-ozet__ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.bahis-ozet__baslik { font: 600 11px var(--yazi-govde); letter-spacing: .4px; text-transform: uppercase; color: var(--metin-60); }
.bahis-ozet__donem { grid-template-columns: repeat(3, auto); }
.bahis-ozet__donem .kupon-tur { min-height: 28px; padding: 0 10px; }
.bahis-ozet__net { font: 700 24px/1.15 var(--yazi-baslik, var(--yazi-govde)); font-variant-numeric: tabular-nums; color: var(--metin); overflow-wrap: anywhere; }
.bahis-ozet__net--arti { color: var(--basari-hover); }
.bahis-ozet__net--eksi { color: var(--hata-metin); }
.bahis-ozet__satirlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.bahis-ozet__satirlar div { min-width: 0; }
.bahis-ozet__satirlar dt { font-size: 11px; color: var(--metin-60); }
.bahis-ozet__satirlar dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--metin); overflow-wrap: anywhere; }
.bahis-ozet__alt { margin: 0; font-size: 12px; color: var(--metin-60); }
.bahis-ozet__alt .bag, .bahis-ozet .bag { padding: 0; border: 0; background: none; color: var(--altin); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.bahis-daha { align-self: center; }
@media (pointer: coarse) {
  .bahis-ozet__donem .kupon-tur, .bahis-daha { min-height: 44px; }
  .bahis-ozet__alt .bag { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ------------------------------------------------------------------ CANLI — betjuve 3 sütun (2026-11-14, 1552dcdd)
   Betjuve canlıda 3 sütun (ölçüm 1280/1440/1920): sol 300 (arama · sekmeler · spor başlıkları; seçili sporun canlı maç KARTLARI kendi
   başlığının altında) · orta maç ayrıntısı (esnek; ≥700 px'te pazarlar iki sütun) · sağ 320 (animasyon + kupon). Maç önü 4 sütun kalır.
   Liste bölümünü sol sütundaki yuvaya spor.js `listeYerlestir` taşır. Eşik JS `CANLI_GENIS_SORGU` ile AYNI (test). Ayrıntı
   docs/spor/BETJUVE-BIREBIR.md. */
.pazar-liste { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.spor-mac { container: spor-mac / inline-size; }
@container spor-mac (min-width: 700px) {
  .pazar-liste { display: block; columns: 2; column-gap: 6px; }
  .pazar-liste > .pazar { break-inside: avoid; margin-bottom: 6px; }
}
@media (min-width: 1024px) {
  .spor-duzen[data-bolum="canli"] { grid-template-columns: 300px minmax(0, 1fr) 320px; }
  .spor-duzen[data-bolum="canli"] .spor-sol { grid-column: 1; grid-row: 1; }
  .spor-duzen[data-bolum="canli"] .spor-mac {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    position: sticky;
    top: var(--spor-ust);
    max-height: calc(100dvh - var(--spor-ust) - 12px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--yuzey-20) transparent;
  }
  .spor-duzen[data-bolum="canli"] .spor-kupon { grid-column: 3; grid-row: 1; }
  .spor-duzen[data-bolum="canli"] .mac-kart__geri { display: none; }

  /* Sol sütundaki canlı liste (yuva): spor başlığının altında, başlık şeridi yok (spor satırı başlıktır). */
  .spor-duzen[data-bolum="canli"] .spor-sol .spor-liste { display: flex; flex-direction: column; gap: 3px; }
  /* betjuve `sp-sub-list-bc`: açık sporun maçları hafif açık kapta, kartlar arası 3 px */
  .spor-agac__canli { margin: 3px 0 4px; padding: 3px; border-radius: var(--r-5); background: var(--yuzey-05); }
  .spor-agac__canli:empty { display: none; }
  .spor-sol .mac-listesi { gap: 3px; margin-top: 0; }
  .spor-sol .lig-grup { gap: 3px; }
  .spor-sol .mac-satir__skor { color: color-mix(in srgb, var(--altin-kutu) 60%, transparent); font-weight: 700; }
  .spor-sol .liste-bas { display: none; }
  .spor-sol .lig-grup__kolonlar { display: none; }
  .spor-sol .lig-grup__bas { min-height: 34px; padding: 4px 8px; background: var(--yuzey-05); line-height: 1.3; }
  .spor-sol .lig-grup__ad { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  .spor-sol .lig-grup__ad--iki { display: flex; flex-direction: column; gap: 1px; -webkit-line-clamp: unset; }
  .spor-sol .lig-grup__ad--iki > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .spor-sol .lig-grup__ad--iki > span:first-child { color: var(--metin-70); font-size: 11px; }
  .spor-sol .lig-grup__sayi { color: var(--metin-70); font-size: 12px; }

  /* Canlı maç kartı (betjuve `market-game-section` 284×125: zemin beyaz %15, köşe 5, iç boşluk 6/5/10): takımlar + skor sağda ·
     dönem satırının sağında "+N ›" · metin skor + saat · etiketli üç oran. "+N" dönem satırına mutlak konumla oturur. */
  .spor-sol .mac-satir {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ac" "oranlar";
    row-gap: 8px;
    padding: 6px 5px 10px;
  }
  .spor-sol .mac-satir__ac { grid-area: ac; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 0 3px 0 5px; }
  .spor-sol .mac-satir__takim { font: 400 12px var(--yazi-baslik); }
  .spor-sol .mac-satir__zaman { align-items: center; flex-direction: row; gap: 8px; min-height: 22px; padding-right: 64px; }
  .spor-sol .mac-satir__canli { color: var(--metin-70); font-weight: 400; }
  .spor-sol .mac-satir__alt { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--metin-70); font-size: 11px; }
  .spor-sol .mac-satir__metin { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .spor-sol .mac-satir__daha { position: absolute; top: 40px; right: 8px; height: 22px; min-width: 0; padding: 0; }
  .spor-sol .mac-satir__oranlar { grid-area: oranlar; grid-auto-columns: minmax(0, 1fr); }
  .spor-sol .mac-satir__oranlar .oran { height: 34px; }
  .spor-sol .mac-satir__oranlar .oran--genis { padding: 0 8px; }
  .spor-sol .mac-satir__oranlar .oran__ad { color: var(--metin-70); }
}