/* ══════════════════════════════════════════
   MOBİL HATA DÜZELTMELERİ
   Bu dosya, hâlâ eski inline "critical-css" mimarisini kullanan
   sayfalarda (index, hakkimizda, hizmetler, contact, okul-is-yardimi,
   qeydiyyat, sinav) mobil taşma/bozulma düzeltmelerini taşır.
   Sadece @media (max-width:768px) içinde çalışır — masaüstü etkilenmez.
   Inline <style id="critical-css"> bloğundan SONRA yüklenir ki aynı
   seçicilerde (aynı özgüllükte) bu kurallar kazansın.
══════════════════════════════════════════ */

@media (max-width: 768px) {
  /* MADDE 1 — Mobil menü kapanmıyordu:
     nav{position:fixed;z-index:1000} kendi stacking context'ini
     oluşturuyor; .burger-menu'nün z-index:1100'ü bu context İÇİNDE
     geçerli, .mobile-nav-panel (z-index:1050) nav'ın DIŞINDA olduğu
     için panel açıkken nav'ın tamamı (burger dahil) panelin altında
     kalıyor ve kapatma dokunuşu panel tarafından yutuluyordu. */
  nav {
    z-index: 1101;
  }
  /* Panel açıkken X çizgileri her koşulda (nav "stuck" olmasa da)
     görünür/kontrastlı kalsın. */
  .burger-menu.open span {
    background: var(--text);
  }

  /* MADDE 3 — .video-row.left masaüstü zigzag düzeninden kalma
     transform:translateX(-60px) mobilde de uygulanıyordu (iki sınıflı
     seçici .video-row.left, mobil bloğundaki tek sınıflı .video-row
     sıfırlamasından daha özgül olduğu için onu eziyordu). Kart
     "revealed" olmadan önce (veya threshold eşiğine yaklaşırken) bu
     yüzden ~60px sola kayık ve solda kırpılmış görünüyordu. .video-row
     (ve .right varyantı) ile aynı dikey mobil düzene eşitliyoruz —
     .revealed durumunda zaten transform:translateX(0) !important
     devreye giriyor, bu kural sadece o ana kadarki geçiş durumunu
     düzeltiyor. */
  .video-row.left {
    transform: translateY(40px);
  }

  /* MADDE 5 — ~41px yatay taşma (scrollWidth 416px vs viewport 375px):
     <body>'de overflow-x:hidden var ama <html>'de yok. transform ile
     hareket eden .ticker-track (marquee), .notes-track (marquee) ve
     .reveal-left/.reveal-right/.video-row gibi elemanların transform
     kaynaklı görsel taşması (ink overflow), aralarında ekstra bir
     overflow:hidden katmanı olmadığında <html>'in scrollWidth'ini
     gerçekten büyütüyordu — body'nin hidden'ı bunu tam engellemiyor
     (window.scrollTo ile sayfa gerçekten ~45px sağa kayabiliyordu).
     <html>'e de overflow-x:hidden ekleyerek taşmayı kaynağında kapatıyoruz;
     hero-bg-image/shorts-bg-image zaten kendi overflow:hidden
     kapsayıcıları (.video-hero-wrap/.shorts-section) içinde düzgün
     kırpılıyor, ek bir müdahale gerekmiyor. */
  html {
    overflow-x: hidden;
  }

  /* MADDE 4 — Yorumlar (.notes-track) sürekli akan marquee'ydi; kartlar
     her an sol/sağ kenardan kesik görünüyor, bir yorumu baştan sona
     okumak neredeyse imkânsızdı. Kullanıcı onayıyla: mobilde animasyon
     tamamen durur, statik + parmakla yatay kaydırılabilir bir listeye
     dönüşür. .note-card zaten mobilde tek-kart genişliğinde
     (min-width:82vw/88vw) tanımlıydı — bu, tasarımın zaten "bir kerede
     bir kart" swipe deneyimini hedeflediğini gösteriyor. */
  .notes-track {
    animation: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .note-card {
    scroll-snap-align: center;
  }
}
