/*
 * sanal-lig/desktop-layout-v287.css — masaüstü üç sütun düzeni.
 *
 * NEDEN VAR
 *   Kullanıcı: "sağ tarafta maçlar/kuponlar/oranlar olan sütun ortanın
 *   üstüne çıkmış; dünya kupası modunda düzgün, diğer liglerin hepsinde
 *   bozuk."
 *
 *   Ölçüm onu doğruladı. Dünya Kupası dışındaki ligler için tek bir kural
 *   var (`sanal-lig/assets/sanal-lig-v101.css`, `@media(min-width:1181px)`):
 *
 *       body:not(.worldCupMode) .layout{
 *         grid-template-columns: 310px minmax(650px,1fr) 440px !important;
 *         gap:14px !important; max-width:1580px !important }
 *
 *   Orta sütunun ALT SINIRI 650 piksel. Üç sütun + boşluklar en az
 *   310+650+440+28 = 1428 piksel ister; sayfanın 32 piksellik iç boşluğuyla
 *   birlikte 1460. Ekran bundan darsa ızgara kapsayıcısını AŞAR ve gövdedeki
 *   `overflow-x:hidden` fazlayı kırpar. Ölçülen sonuç:
 *
 *       ekran 1366 -> sağ sütun x=1310..1750, yani yalnız 56 pikseli görünür
 *       ekran 1280 -> sağ sütun tamamen ekranın dışında
 *
 *   Dünya Kupası'nda bu görülmüyor çünkü o modun daha dar ekranlar için
 *   ayrıca yazılmış basamakları var (280px minmax(600px,1fr) 420px …).
 *
 * NE YAPAR
 *   Dünya Kupası dışındaki ligleri Dünya Kupası'yla aynı davranışa getirir:
 *   sütunlar ekranla birlikte küçülür, sütun arası boşluk 22 piksel olur
 *   (soldaki boşlukla aynı) ve sağ panelin iç boşluğu 19 piksele çıkar.
 *
 * NE YAPMAZ
 *   · `body.worldCupMode` seçicisine hiç dokunmaz — Dünya Kupası düzeni
 *     bugün ne ise o kalır.
 *   · Mobil kabuğa (`body.wos-mobile-app`) girmez; orada düzen tek sütun.
 *   · Hiçbir kart, sütun, bahis türü kaldırılmaz. Yalnız ölçüler değişir.
 *
 * SEÇİCİ GÜCÜ
 *   Ezilecek kural `!important` taşıyor ve `body:not(...):not(...) .layout`
 *   ağırlığında. Buradaki kurallar `html body…main.layout` ile aynı ağırlığı
 *   aşar; dosya HTML'de EN SON yüklenir.
 */

@media (min-width: 1181px) {
  html body:not(.worldCupMode):not(.worldcupMode):not(.wos-mobile-app) main.layout {
    /* Orta sütunun alt sınırı 0: dar masaüstünde ızgara taşmak yerine
       küçülür. Yan sütunlar da esneyebilir ama okunur bir tabanın
       altına inmez. */
    grid-template-columns:
      minmax(258px, 310px)
      minmax(0, 1fr)
      minmax(348px, 440px) !important;
    gap: 22px !important;
    max-width: 1620px !important;
  }

  /* Izgara öğesinin varsayılan `min-width:auto` değeri, içindeki geniş bir
     tablo yüzünden sütunu yeniden şişirebilir. */
  html body:not(.worldCupMode):not(.worldcupMode):not(.wos-mobile-app) main.layout > * {
    min-width: 0 !important;
  }

  /* Sağ panelin iç boşluğu Dünya Kupası'ndaki gibi (12 -> 19 piksel):
     "Detaylı Oranlar" düğmesi takım adına yapışık duruyordu. */
  html body:not(.worldCupMode):not(.worldcupMode):not(.wos-mobile-app) main.layout > aside.card > .body {
    padding: 19px !important;
  }

  html body:not(.worldCupMode):not(.worldcupMode):not(.wos-mobile-app) main.layout > aside.card .v62FixtureTop {
    gap: 10px !important;
  }
}

/*
 * DAR MASAÜSTÜ (1181–1400): yan sütunlar da küçülür.
 *
 * Yalnız orta sütunu esnek bırakmak yetmiyor: `1fr` sıfıra kadar inebildiği
 * için daralma bütünüyle ORTAYA yükleniyor ve 1200 pikselde canlı skor
 * sütunu 366 piksele düşüyordu. Dünya Kupası bu bantta yan sütunları da
 * daraltıyor (250 / 586 / 360); aynı davranış buraya taşındı.
 */
@media (min-width: 1181px) and (max-width: 1400px) {
  html body:not(.worldCupMode):not(.worldcupMode):not(.wos-mobile-app) main.layout {
    grid-template-columns:
      minmax(0, 258px)
      minmax(0, 1fr)
      minmax(0, 372px) !important;
    gap: 18px !important;
  }

  html body:not(.worldCupMode):not(.worldcupMode):not(.wos-mobile-app) main.layout > aside.card > .body {
    padding: 14px !important;
  }
}

/*
 * Çok dar masaüstü / tablet yatay: üç sütun 1181 pikselin altında zaten tek
 * sütuna iniyor (sayfanın kendi kuralı). Arada kalan 1181–1320 bandında üç
 * sütun sıkışık ama taşmıyor; yan sütunların tabanı bunun içindir.
 */

/* ========================================================================
   PENCERELER ÜST ŞERİDİN ALTINDA KALIYORDU (V287)
   ========================================================================

   Kullanıcı: "Nasıl Oynanır kısmı PC'de üst menü kısmına, dil değiştirme
   yerine bitişik geliyor; çarpı kısmı oranın arkasında kalıyor."

   Ölçüm: üst şerit `assets/v60-ui/sanal-lig.css` içinde
   `z-index: 5000 !important` alıyor. `#howToModal` ise 140'ta. Yani şerit
   pencerenin ÜSTÜNDE çiziliyor; pencerenin üst 37 pikseli — kapatma
   düğmesi dâhil (ölçülen y=153, şerit y=0..171) — şeridin arkasında
   kalıyordu.

   Sayfadaki diğer katmanlar (oran detayı 10050, sezon öncesi 15000) zaten
   şeridin üstünde; sorunu yaşayan yalnız bu üç pencereydi. Hepsi aynı
   bandın üstüne çıkarılır ve karartma şeridi de kaplar — pencere artık
   menüye "bitişik" değil, menünün önünde durur.
   ======================================================================== */

html body #howToModal,
html body .modal,
html body #resultShareModal {
  z-index: 6000 !important;
}

/* Pencere ekranın üst kenarına yapışmasın; ekran alçaldıkça kendi içinde
   kaydırılsın. */
html body #howToModal {
  padding: clamp(16px, 4vh, 44px) 16px !important;
  align-items: center !important;
}

html body #howToModal .howToCard {
  width: min(860px, 100%) !important;
  max-height: min(84vh, 760px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Başlık ve "Anladım" sabit; yalnız içerik kayar. Kapatma düğmesi her
   zaman görünür bir dokunma hedefi. */
html body #howToModal .howToHead {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  flex: 0 0 auto !important;
}

html body #howToModal #howToContent {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

html body #howToModal #howToDone {
  flex: 0 0 auto !important;
  min-height: 48px !important;
}

html body #howToModal .howToClose,
html body #howToModal .howToHead button {
  min-width: 40px !important;
  min-height: 40px !important;
}

/* Masaüstünde pencere başlığının alt satırı açık zeminde 3.67 çıkıyordu. */
html body:not(.wos-mobile-app) #howToModal .howToHead p {
  color: #46617a !important;
}