/* Spor kitabı kendi çerçevesinde ve sayfanın TEK içeriği: kabuğun üst şeridinin
   altında kalan her şey onun. Yükseklik SABİT DEĞİL: kitap kendi içinde
   kaydırıyor, dış sayfa da kaydırırsa oyuncu iki kaydırma çubuğuyla uğraşır.
   `100dvh` (`vh` değil) — mobilde adres çubuğu toplanınca `vh` sayfayı
   taşırıyor ve alt şerit ekran dışında kalıyor. */
.sports-board {
  /* Kitabın kendi çubuğunu görüş alanının dışına iten pay — gerekçe aşağıda. */
  --kitap-cubuk: 17px;
  margin: 0;
  overflow: hidden;
  background: var(--panel);
}

/*
 * 🔴 KİTABIN ÇUBUĞU BOYANAMIYOR, KIRPILIYOR.
 *
 * Çerçeve ÇAPRAZ-KÖKEN (kitap `sport_base_url` altından servis ediliyor):
 * tarayıcı kuralı gereği bizim CSS'imiz o belgeye GİREMEZ, yani sağdaki gri
 * varsayılan çubuk `::-webkit-scrollbar` ile siyah-kırmızı yapılamaz. Yapılan
 * şey tek gerçek seçenek: çerçeveyi kapsayıcıdan `--kitap-cubuk` kadar geniş
 * verip çubuğu görüş alanının dışında bırakmak. Kapsayıcıda `overflow: hidden`
 * zaten var; tekerlek, dokunma ve klavye ile kaydırma AYNEN sürüyor.
 *
 * ⚠️ TEK RİSK: kitap belge yerine iç bir kutuda kaydırıyorsa kırpılan 17px
 * çubuk değil İÇERİK olur (kuponun sağ kenarı). Geri almak için `--kitap-cubuk`
 * değerini `0px` yapmak yeterli.
 *
 * Çerçevenin İÇİNİ gerçekten kırmızıya boyayan tek kol sağlayıcının kendi
 * teması: BO'daki `sport_color` ayarı (`?color=` olarak adrese yazılıyor).
 */
.sports-frame {
  display: block;
  width: calc(100% + var(--kitap-cubuk));
  /* Mobil pay: yapışkan başlık (42 + 8 + 1px çizgi) + kabuğun alt şerit için
     ayırdığı 112px. Sayfa başlığı kalktığı için başka çıkarılacak bir şey yok. */
  height: calc(100dvh - 163px);
  min-height: 420px;
  border: 0;
}

/*
 * 🔴 GİZLİYKEN GERÇEKTEN GİZLİ. Kitap artık kabukta yaşıyor
 * (`features/sports/SportBook`): `/sports` dışındaki her sayfada `<main>`in
 * çocuğu olarak DURUYOR, çünkü sökmek dönüşü ~13 sn'ye çıkarıyor. Tarayıcının
 * kendi `[hidden]` kuralı `display: none` veriyor ama bu dosyadaki bir
 * `display` bildirimi onu sessizce yener — o gün kitap casino sayfasının
 * ortasında belirirdi. Kural açıkça yazılı ki o kaza olmasın.
 */
.sports-board[hidden] {
  display: none;
}

/*
 * İKİ KİTAP AÇIKKEN GEÇİŞ ŞERİDİ (`sport_kitabi = ikisi`).
 *
 * ⚠️ Tek kitaplı markada bu düğüm DOM'a hiç girmiyor, yani bugünkü ekranın
 * ölçüleri değişmiyor — aşağıdaki `has-kaynak` kuralı da yalnız şerit
 * basıldığında uyanıyor.
 */
/*
 * 2026-10-06 (betforyou, referans sitedeki sağlayıcı şeridi): düğmeler şeridi
 * EŞİT sütunlarla tam genişlikte dolduruyor, her biri 40px yüksek yuvarlak bir
 * sekme; logo BO'dan (`proton_spor_kitap_*_gorseli`), yoksa yazı.
 */
.sports-kaynak {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 8px 12px;
}

.sports-kaynak__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--white-a24);
  border-radius: 20px;
  color: var(--white-a72);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sports-kaynak__btn:hover {
  border-color: var(--white-a72);
  color: var(--white);
}

/* Logo düğmenin içinde ortalı, yüksekliği sabit; geniş logo kutuya sığar. */
.sports-kaynak__logo {
  display: block;
  max-width: 100%;
  max-height: 22px;
  object-fit: contain;
}

.sports-kaynak__btn:not(.is-active) .sports-kaynak__logo {
  opacity: 0.8;
}

/*
 * ⚠️ Seçili hâl RENKLE DEĞİL, ZEMİNLE ayrılıyor. Şerit kiracı temasının
 * üstünde duruyor ve `--accent` markadan markaya değişiyor; yalnız metin
 * rengiyle ayırmak bazı markalarda okunamaz bir fark bırakırdı.
 */
.sports-kaynak__btn.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #000;
}

/*
 * 🔴 ÇERÇEVE MOBİLDE SABİT YÜKSEKLİKTE (`100dvh - 163px`), yani şeridin
 * yüksekliği ondan DÜŞÜLMEK ZORUNDA: düşülmezse sayfa şerit kadar taşar ve
 * oyuncu kitabın kendi kaydırmasıyla sayfanınkini birlikte kullanır.
 * 56px = 40px düğme + şeridin 8+8px dolgusu (2026-10-06 yeni şerit; önce 54).
 */
.sports-board.has-kaynak .sports-frame {
  height: calc(100dvh - 163px - 56px);
}

/*
 * BETCONSTRUCT KÖPRÜSÜ (`sport_kitabi = betco`, 2026-10-01 bababet).
 *
 * 🔴 ÇUBUK PAYI YOK: `--kitap-cubuk` Betby'nin kaydırma çubuğunu dışarı itmek
 * içindi; BC'nin öyle bir sütunu yok ve pay onun SAĞ kenarını kesiyordu
 * (telefonda kupon/ok sütunu 17px ekran dışında — ölçüldü, çerçeve 407px /
 * görüş 390px).
 * 🔴 ALT ÇUBUĞUN ÜSTÜNDE BİTER: BC'nin mobil yapımının KENDİ alt çubuğu var
 * (Canlı · Spor · Bahis Kuponu) ve `100dvh - 163px` onu sitenin alt
 * menüsünün ALTINA sokuyordu — oyuncu kupona ulaşamıyordu. İki yükseklik de
 * canlı ölçülüp yayımlanıyor (`MobileHeader`, `MobileBottomNav`).
 */
.sports-board.is-betco .sports-frame {
  width: 100%;
  height: calc(100dvh - var(--mobile-header-h, 114px) - var(--mobile-bottom-nav-h, 0px));
}

/*
 * GR8 TECH SPOR (`/gr8-spor`, 2026-10-02 betforyou). Çubuk payı YOK (BC ile aynı
 * gerekçe: kuponun sağ kenarı kesilmesin). Yükseklik çerçevenin GERÇEK üst
 * kenarından (`--gr8-ust`) alt menünün üst kenarına (`--gr8-alt`) kadar, ikisini
 * de bileşen ölçüyor (kabuğun `--mobile-bottom-nav-h`i ilk yüklemede boş) —
 * GR8 bildirdi: mobilde kupon alt menünün altında kalıyordu. Ölçüm yoksa
 * başlık yüksekliğine düşer.
 */
.sports-board.is-gr8 .sports-frame {
  width: 100%;
  height: calc(100dvh - var(--gr8-ust, var(--mobile-header-h, 114px)) - var(--gr8-alt, var(--mobile-bottom-nav-h, 0px)));
}

/*
 * BC + GEÇİŞ ŞERİDİ (`sport_kitabi = betco-gr8`, 2026-10-06 betforyou). Yukarıdaki
 * `is-betco` kuralı şeridi bilmiyor; çerçeve şerit kadar taşardı. `SportBook`
 * GR8'deki gibi gerçek üst kenarı ölçüyor (şerit dahil). Ölçüm yoksa şeridin
 * 56px'i elle düşülür (gerekçe `has-kaynak` kuralında).
 */
.sports-board.is-betco.has-kaynak .sports-frame {
  height: calc(100dvh - var(--gr8-ust, calc(var(--mobile-header-h, 114px) + 56px)) - var(--gr8-alt, var(--mobile-bottom-nav-h, 0px)));
}

.sports-board.is-loading,
.sports-board.is-closed,
.sports-board.is-error {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 24px;
  color: var(--white-a72);
  font-weight: 600;
  text-align: center;
}

@media (min-width: 769px) {
  /*
   * ⚠️ SEÇİCİ BİLEREK UZUN. Panelin boşluğunu veren kural
   * `.app-shell.app-fluid > .content` (0,3,1); `.sports-content` tek başına
   * onu YENEMEZ ve kitap dört yanında hava ile otururdu. Sınıf dosya sırasına
   * değil özgüllüğe dayanıyor: `sports.css` sayfa başına yükleniyor ve sırası
   * garanti değil.
   */
  .app-shell.app-fluid > .content.sports-content {
    gap: 0;
    min-height: 0;
    padding: 0;
  }

  /* Kabuk ilk çocuğa (ve mobil başlıktan sonrakine) üstten hava veriyor —
     kitabın üstünde şeffaf bir şerit bırakırdı. */
  .app-shell.app-fluid > .content.sports-content > :first-child,
  .app-shell.app-fluid > .content.sports-content > .mobile-header + * {
    margin-top: 0;
  }

  /*
   * Yükseklik ÖLÇÜLMÜYOR, DEVRALINIYOR. Panel masaüstünde esnek bir sütun ve
   * kendi yüksekliği zaten `calc(100vh - 83px)`; alt bilgi de kalktığı için
   * kitap panelin TEK çocuğu. Burada 83'ü ikinci kez yazmak, üst şerit bir gün
   * değiştiğinde sessizce kayacak bir kopya olurdu.
   *
   * ⚠️ `min-height: 0` şart: `.content > *` daralmayı kapatıyor ve esnek
   * çocuğun kendiliğinden en küçük boyu içeriği kadardır.
   */
  .content.sports-content > .sports-board {
    flex: 1 1 auto;
    min-height: 0;
  }

  /*
   * ⚠️ MASAÜSTÜNDE HESAP YOK: panel esnek bir sütun, şerit ile kitap kardeş
   * ve kitap `flex: 1 1 auto` ile kalanı alıyor. Mobildeki çıkarma burada
   * geri alınmalı — özgüllüğü (0,3,0) düz `.sports-frame`i yendiği için
   * medya sorgusunun içinde AYRICA yazılmak zorunda.
   */
  .sports-frame,
  .sports-board.has-kaynak .sports-frame,
  .sports-board.is-betco .sports-frame,
  .sports-board.is-betco.has-kaynak .sports-frame,
  .sports-board.is-gr8 .sports-frame {
    height: 100%;
  }
}