/* ============================================================
   mobil.css — istanbulcicekleri klonu için ÖZEL mobil düzeltmeler
   Sadece <768px'de yüklenir (tüm sayfalarda ortak mobSwitch ile).
   Yakalanan gerçek enuygun CSS'inde (mobile.css) eksik kalan
   mobil kuralları burada toplar. Önceki dağınık !important
   eklemelerinin yerine tek temiz dosya.
   ============================================================ */

/* ---------- 1. HEADER: 50px sabit, logo görünür ----------
   Sorun: masaüstü HeaderContainer (153px: logo+menü+arama formu)
   sabit 50px mobil HeaderWrapper'a taşıyor, logo y=-45'e itilip
   kesiliyordu. Çözüm: konteyneri 50px'e sabitle, taşan içeriği
   (menü + arama formu) gizle, logoyu dikey ortala. */
@media (max-width: 767px) {
  [class*="HeaderContainer"] {
    height: 50px !important;
    margin-top: 0 !important;
    overflow: hidden !important;
  }
  [class*="HeaderStyled"] {
    height: 50px !important;
    align-items: center !important;
  }
  [class*="InlineFlexCol"] {
    margin-top: 13px !important;
  }
  [class*="LogoLink"] {
    display: block !important;
  }
}

/* ---------- 2. SATINAL üst bar: linkler sarsın, taşmasın ----------
   satinal.html mobil CSS yüklemiyordu (style.css + fitPage).
   .top-links (Siparişlerim | Giriş Yap | Yardım) 320-400px'de
   logoya girip yatay taşıyordu. */
@media (max-width: 640px) {
  .top-in {
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 12px;
  }
  .top-links {
    margin-left: 0;
    width: 100%;
    gap: 18px;
    font-size: 12px;
  }
  .top-links .sep {
    display: none;
  }
}

/* ---------- 3. ARAMA FORMU BAŞLIK ÇAKIŞMASI ----------
   H2 alt başlıkta margin-top:-24px var (masaüstünde H1'de
   margin-bottom:40px olduğu için sorun yok) ama mobilde H1
   margin-bottom:0'a düşünce H2, H1'in ÜSTÜNE biniyor (ikisi de
   y120). Mobilde H2'yi başlığın altına al. */
@media (max-width: 767px) {
  [class*="IntroSubTitle"] {
    margin-top: 6px !important;
  }
}

/* ---------- 4. GENEL: yatay taşmayı önle ---------- */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
  }
  img, svg, video, iframe {
    max-width: 100%;
  }
}

/* ---------- 5. SEÇİLİ OLMAYAN TAB PANELLERİNİ GİZLE (tüm genişlikler) ----------
   PNR Sorgulama ve Bilet İptal panellerinde hidden özelliği kayıp
   (capture'da düşmüş) — 1px genişlikte kalıp içerikleri (PNR Kodu,
   Yolcunun soyadı etiketleri) overflow:visible ile başlığın ÜSTÜNE
   taşıyordu (mobil + masaüstü ikisinde). Seçili olmayan panel gizli. */
[class*="tabPanel"]:not([data-headlessui-state="selected"]) {
  display: none !important;
}

/* ---------- 7. YAPIŞKAN ARAMA ÇUBUĞU MOBİLDE KAPALI ----------
   affix JS'i scroll'da formu position:fixed yapar — mobilde
   356px'lik form ekranın üçte birini KAPLIYORDU (içerik arkasında
   kayıyordu). CSS !important inline fixed'i ezer: mobilde static. */
@media (max-width: 767px) {
  [data-testid="search-form-affix-static"] {
    position: static !important;
    width: 100% !important;
  }
}

/* ---------- 8. ÖZELLİK KARTLARI (splide) MOBİL GENİŞLİĞİ ----------
   Özellik slider'ında slide genişliği JS'siz kalınca 96px'e düşüyor,
   'En uygun otobüs biletini bul' 67px kolona eziliyordu. SADECE
   FeaturesSection kartlarını taşıyan slide'lar genişletilir
   (.memOn genel konteyner sınıfıdır — diğer slider'lara dokunma!). */
@media (max-width: 767px) {
  .splide__slide:has([class*="FeaturesSection-styled"]) {
    width: 160px !important;
  }
}

/* ---------- 10. BLOG KARTLARI (blogSlide) MOBİL GENİŞLİK ----------
   Blog slider'ında slide 96px'e ezilmiş; PostCard içeriği (başlık
   219px) komşu kartların üstüne BOYANIYORDU. Kartın doğal genişliği
   253px — mobilde slide'ı buna eşitle (peek korunur). */
@media (max-width: 767px) {
  .blogSlide .splide__slide {
    width: 253px !important;
  }
}

/* ---------- 11. GÜVEN ŞERİDİ (whyUseEnuygun) MOBİL GENİŞLİK ----------
   'Hızlı ve kolay'/'Sayısız seçenek' slide'ları 70px'e ezilmiş,
   metinler komşu kartlara boyanıyordu (boya katmanı kanıtlı). */
@media (max-width: 767px) {
  .splide__slide:has([data-testid*="whyUseEnuygun"]) {
    width: 120px !important;
  }
}

/* ---------- 12. UYGULAMA BANNERI 'HEMEN İNDİR' BUTONU (global) ----------
   DownloadButton stil kuralı lazy chunk'ta kalmış — computed bg
   TRANSPARENT, buton görünmüyordu (yalnız beyaz metin). Gerçek tasarım:
   yeşil zemin (#2dc44d, site buton rengi) + beyaz metin. */
[class*="MobileAppBanner-styled__DownloadButton"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-color: #2dc44d !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* ---------- 13. MOBİL FOOTER KOLONLARI ----------
   Footer link kolonları (FooterSection hücreleri) mobilde ~52-66px'e
   ezilmiş; 'Sürdürülebilirlik ve Sosyal Sorumluluk' gibi uzun linkler
   kendi kolonundan 50px taşıp komşu kolonun metnine giriyordu (boya
   katmanı kanıtlı). Mobilde hücreler 2'li ızgara: her kolon ~160px,
   uzun linkler taşmadan sığar. */
@media (max-width: 767px) {
  div:has(> [class*="Footer-styled__FooterSection"]) {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }
}

/* ---------- 9. QR BANNER YÜKSEKLİK TAŞMASI ----------
   Banner konteynerı (bbGkIg) 120px'e sabit; mobilde QR görsel +
   metin dikey dizilince 133px oluyor ve metin footer linklerinin
   üstüne taşıyordu. Mobilde otomatik yükseklik. */
@media (max-width: 767px) {
  .bbGkIg,
  .dWFvEK,
  .jvRtlF {
    height: auto !important;
  }
}

/* ---------- 6. ARAMA FORMU MOBİL DÜZENİ (taze form) ----------
   Taze arama formunun mobil CSS'i (styled-components lazy chunk)
   hiç yakalanmamış; masaüstü yüzde düzeni (%73+%8+%18) mobilde
   eziliyordu: inputlar 24px, buton 52px, Bugün/Yarın çipleri
   butonun ÜSTÜNE biniyordu. Mobilde dikey yığın yap. */
@media (max-width: 767px) {
  [data-testid="undefined-form"] .fSczvT {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 10px !important;
  }
  [data-testid="undefined-form"] .ffcMOW {
    width: 100% !important;
    max-width: 100% !important;
  }
  [data-testid="undefined-form"] .irQqkz {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  [data-testid="undefined-form"] .kHQvcn {
    width: 100% !important;
    max-width: 100% !important;
  }
  [data-testid="undefined-form"] .dyFWcx {
    width: 100% !important;
    max-width: 100% !important;
  }
  [data-testid="undefined-form"] .dyFWcx > div {
    flex-direction: row !important;
    gap: 18px !important;
    width: auto !important;
  }
  [data-testid="undefined-form"] .dyFWcx label {
    width: auto !important;
  }
  [data-testid="undefined-form"] .itIhRa {
    width: 100% !important;
    max-width: 100% !important;
  }
  [data-testid="undefined-form"] .itIhRa button {
    width: 100% !important;
  }
}