/* ============================================================================
   iOS DÜZELTME KATMANI
   ----------------------------------------------------------------------------
   Bu dosyadaki her kural `html.platform-ios` ile sınırlıdır. Sınıfı
   index.html'deki <head> betiği yalnızca Capacitor platformu "ios" olduğunda
   ekler; dolayısıyla Android paketi ve Firebase Hosting'deki web sürümü bu
   dosyadan HİÇ etkilenmez.

   NEDEN AYRI BİR KATMAN
   style.css ve style-v19.css'teki güvenli alan payları "sabit + inset"
   biçiminde yazılmış (ör. `calc(96px + var(--sa-bottom))`). Sabit kısım
   Android'e göre seçilmiş; Android'de alt inset çoğu cihazda 0–24px olduğu
   için sonuç makul çıkıyor. iPhone'da ise alt inset 34pt, üst inset 59pt
   (Dynamic Island) — sabit kısım bunun ÜSTÜNE bindiği için her şey şişiyor.
   Ortak dosyalardaki sayılar Android'de gözle doğrulanamadığı için (makinede
   hiç AVD/system-image yok) değiştirilmedi; iOS'a özel değerler burada.

   Android tarafı PROJE-TAKIP.md'de açık madde olarak duruyor.
   ============================================================================ */


/* --------------------------------------------------------- 1. ALT MENÜ (B1)
   style-v19.css:1221 `height: calc(96px + var(--sa-bottom))` veriyor.
   iPhone'da bu 96 + 34 = 130pt eder; ölçüldü. İçerik (5 üst boşluk + 21px
   simge + 6px aralık + ~12px etiket) yalnızca ~44pt yer kaplıyor, altta 80pt
   boş bant kalıyordu — kullanıcının "alt boşluk çok büyük" dediği şey buydu.

   iOS yerel sekme çubuğu: 49pt içerik + 34pt home indicator = 83pt.
   Aşağıdaki değer tam olarak onu verir.

   Ortadaki "+" düğmesinin `margin-top: -16px`i korunur: 5px üst dolguyla
   düğmenin tepesi çubuğun 11pt üstüne çıkar, altı da home indicator alanına
   girmeden 49pt'lik içerik kutusunun içinde kalır. */
@media (max-width: 768px) {
  html.platform-ios .sidebar {
    height: calc(49px + var(--sa-bottom)) !important;
    padding: 5px 0 0 !important;
    padding-bottom: var(--sa-bottom) !important;
  }
}


/* ------------------------------------------------- 2. PANEL ALT DOLGUSU (B2)
   style-v19.css:1130 `calc(118px + var(--sa-bottom))` = iPhone'da 152pt.
   Alt menü artık 83pt; "+" düğmesi çubuğun 11pt üstüne taşıyor. Gereken pay:
   49 (çubuk) + 11 ("+" taşması) + 8 (nefes payı) + inset = 68 + inset = 102pt. */
@media (max-width: 768px) {
  html.platform-ios .panel {
    padding-bottom: calc(68px + var(--sa-bottom)) !important;
  }

  /* Kazanım Seçimi ekranında alt menü gizli (style-v19.css:2362) ama kendi
     sabit şeridi var. Oradaki dolgu `150px` — güvenli alan terimi HİÇ yok,
     yani şerit (inset dahil ~142pt) dolgudan uzun kalabiliyor ve listenin son
     satırı şeridin altında kayboluyordu. */
  html.platform-ios body.v19-outcomes-open #panel-kazanimlar {
    padding-bottom: calc(120px + var(--sa-bottom)) !important;
  }
}


/* ------------------------------------------- 3. SABİT ALT ŞERİTLER (B3)
   `calc(22px + var(--sa-bottom))` iPhone'da 56pt eder; ölçüldü ("Tamam"
   düğmesinin altında 56.3pt boşluk vardı). iOS'ta home indicator'ın üstünde
   ~8pt bırakmak yeterli; 42pt toplam. */
@media (max-width: 768px) {
  html.platform-ios body.v19-outcomes-open .v19-outcomes-bar {
    padding-bottom: calc(8px + var(--sa-bottom)) !important;
  }
  html.platform-ios .v19-sticky-bar {
    padding-bottom: calc(8px + var(--sa-bottom)) !important;
  }
}


/* ------------------------------------------- 4. DURUM ÇUBUĞU BANDI (A3)
   style-v19.css:1158 ana ekran dışındaki TÜM panellerde `.header`i
   gizliyor. Kaydırma `.main-wrapper`da olduğu için başlık gizlenince kaydırma
   alanı y=0'dan başlıyor ve içerik saatin/Dynamic Island'ın arkasından
   akıyordu (Ayarlar'da "Hesabım" kartı doğrudan saatin üstüne biniyordu).

   Çözüm: o ekranlarda üst güvenli alan kadar opak bir bant. Ana ekranda
   gerek yok — orada `.header` (margin-top: 8px + inset) zaten kaydırma
   alanını aşağı itiyor.

   z-index: alt menü 900, çekmeceler 1200+. 30 içeriğin üstünde, onların
   altında kalır. */
@media (max-width: 768px) {
  html.platform-ios body[data-v19-panel]:not([data-v19-panel="panel-soru-uret"])::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--sa-top);
    background: var(--v19-bg);
    z-index: 30;
    pointer-events: none;
  }

  /* Ana ekranda içerik başlığın alt kenarında kesiliyor ama kesiği belli eden
     hiçbir çizgi yoktu; "Merhaba Öğretmenim" yazısı harfin ortasından
     kesilince hata gibi duruyordu. iOS'ta gezinme çubuğunun altındaki saç
     teli çizgi standarttır. */
  html.platform-ios .header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  }
}


/* ------------------------------------------------ 5. OTOMATİK ZOOM (A1)
   iOS, `font-size < 16px` olan bir metin kutusuna odaklanınca sayfayı
   otomatik yakınlaştırır ve GERİ DÖNDÜRMEZ. style.css'te 12 kural 16px'in
   altındaydı (0.76rem–0.9rem). Sonucu simülatörde ölçüldü: sayfa ~1.18×
   büyüyor, alt menüdeki "Daha Fazla" sekmesi ekran dışına taşıyor ve o
   panellere bir daha hiç girilemiyordu; açık alt sayfanın kapatma düğmesi de
   kayboluyordu. Klavyeyi kapatmak da parmakla uzaklaştırmak da düzeltmiyor,
   yalnızca uygulamayı yeniden başlatmak sıfırlıyordu.

   16px, zoom'u tetiklemeyen eşiktir. viewport'a `maximum-scale=1` EKLENMEDİ:
   o, parmakla yakınlaştırmayı tümden kapatıp erişilebilirliği bozardı.

   !important gerekli: style.css:2959 ve 4148 zaten !important kullanıyor. */
html.platform-ios input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.platform-ios select,
html.platform-ios textarea {
  font-size: 16px !important;
}


/* --------------------------------------- 6. KESİLEN ÜNİTE BAŞLIKLARI (C4)
   app.js:3507 `.topic-label`e satır içi `max-width:180px` + `nowrap` +
   `ellipsis` veriyor. Telefonda satırda ~300pt yer varken başlıklar
   "1. ÜNİTE: Bir Kahraman Doğ…" diye kırpılıyordu. Satır içi stil olduğu için
   !important şart. */
html.platform-ios .topic-label {
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}


/* ----------------------------------------------- 7. AĞAÇ GİRİNTİSİ (C5)
   Kazanım ağacında üst öğenin onay kutusu satır başından 38px içeride
   (8 dolgu + 22 ok + 8 aralık), alt kazanımlarınki ise 35px (app.js:3520
   `marginLeft:22px` + `paddingLeft:12px` + 1px kılavuz çizgi). Yani ALT
   öğeler üst öğeden 3px SOLDA kalıyordu; hiyerarşi tersine okunuyordu.
   Ölçüm: üst 60.0pt, alt 57.3pt.

   33 + 12 + 1 = 46px → alt öğe üst öğenin 8px sağında. Onay kutusu boyutu da
   eşitlenir (üst 16px, alt 14px idi). */
html.platform-ios .outcomes-list {
  margin-left: 33px !important;
}
html.platform-ios .outcome-checkbox {
  width: 16px !important;
  height: 16px !important;
}


/* --------------------------------------- 8. ALT SAYFA YATAY DOLGUSU (C5)
   `.v19-sheet-*` 16px yatay dolgu kullanıyor; paneller, profil sayfası ve
   soru ayarları listesi 22px. Aynı ekranda iki farklı kenar boşluğu
   görünüyordu. 22px'e eşitlenir. */
html.platform-ios .v19-sheet-head {
  padding-left: 22px !important;
  padding-right: 22px !important;
}
html.platform-ios .v19-sheet-body {
  padding-left: 22px !important;
  padding-right: 22px !important;
  padding-bottom: calc(12px + var(--sa-bottom)) !important;
}


/* ------------------------------ 9. SORU AYARLARI ÇEKMECESİ ALT MENÜNÜN ALTINDA
   iOS'a ÖZEL YIĞIN BAĞLAMI HATASI.

   Çekmece (`#panel-soru-uret .input-column`, style.css:4213) `z-index: 920`
   ile alt menünün (`z-index: 900`) üstünde durmak üzere yazılmış — style-v19.css:2148
   yorumu da bunu söylüyor: "prototipte sheet alt menünün üstünü örter".

   Ama çekmece `.main-wrapper`ın içinde ve `.main-wrapper`ta
   `-webkit-overflow-scrolling: touch` var (style-v19.css:1122). WebKit bu
   özellik için YENİ BİR YIĞIN BAĞLAMI (stacking context) açar; çekmecenin 920'si
   o bağlamın içinde kalır ve dışarıdaki alt menüyle yarışamaz. Alt menü
   `.main-wrapper`ın kardeşi ve 900 ile onun üstüne boyanır.

   Android Chrome `-webkit-overflow-scrolling`i yok saydığı için orada bağlam
   açılmaz ve çekmece doğru şekilde alt menüyü örter — sorun yalnızca iOS'ta.

   Etkisi görünürlükten ibaret değildi: isabet testi de boyama sırasını
   izlediği için çekmecenin "Kaydet" ve "Oluştur" düğmeleri iPhone'da
   DOKUNULAMAZ durumdaydı (alt menü dokunuşu kapıyordu). Alt menü 130pt
   olduğu için düğmeler tamamen görünmez olduğundan fark edilmemiş.

   Çözüm, prototibin niyetiyle aynı: çekmece açıkken alt menü çekilir.
   Aynı desen zaten var (style-v19.css:1590 `body.v19-generating .sidebar`). */
@media (max-width: 768px) {
  html.platform-ios body.mobile-settings-open .sidebar {
    display: none !important;
  }
}


/* ------------------------- 10. SORU AYARLARI ÇEKMECESİ ALT DOLGUSU (B3)
   style-v19.css:2197 `calc(26px + var(--sa-bottom))` veriyor; iPhone'da 60pt.
   Çekmece artık alt menüyü örttüğü için düğmelerin altında kalan bu bant
   doğrudan boş alan olarak görünüyor. Diğer sabit şeritlerle aynı ölçüye
   (inset + 12pt) çekilir. */
@media (max-width: 768px) {
  html.platform-ios .v19-drawer-footer {
    padding-bottom: calc(12px + var(--sa-bottom)) !important;
  }
}


/* --------------------------- 11. MEB SENARYO KAZANIM SATIRI: YATAY DOLGU (C4)
   style-v19.css:2811 `#panel-kaynaklar .scenario-card > div > div` seçicisine
   `padding: 15px 0 !important` veriyor. Kural "Ders Seçin / Sınıf Seviyesi"
   alan satırları için yazılmış (onlar çerçevesiz, altlarında ince çizgi var),
   ama aynı seçici kazanım satırlarını da yakalıyor. O satırların KENDİ
   çerçevesi ve 8px köşesi var; yatay dolgu sıfırlanınca sağdaki "Soru"
   etiketi çerçeveye yapışıyor (iPhone'da ölçüldü: metin 412pt'de bitiyor,
   çerçeve 413.7pt'de).

   Satır, `.meb-outcome-checkbox` içeren bir label'ı doğrudan çocuk olarak
   taşıyor; derinlikten bağımsız olarak onunla hedefleniyor. */
@media (max-width: 768px) {
  html.platform-ios #panel-kaynaklar .scenario-card div:has(> label > .meb-outcome-checkbox) {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* ============================================================================
   iPAD
   ----------------------------------------------------------------------------
   01.09.2026'da mobil eşiği 768→743px'e indirildi; artık HİÇBİR iPad telefon
   düzenine düşmüyor, hepsi sol kenar çubuklu masaüstü düzenini kullanıyor.
   Aşağısı o düzenin iPad'e (dokunmatik, 834–1376pt) uyarlanması.

   NOT: üst/alt güvenli alan burada ele alınmıyor — `.app-container`
   (style.css:196) zaten `padding: var(--sa-top) … var(--sa-bottom)` veriyor ve
   iPad Pro 11"de ölçüldü: içerik altta 20.5pt içeride, ana ekran göstergesiyle
   çakışmıyor. Bir kez daha pay eklemek çift boşluk yapardı.
   ========================================================================== */


/* --------------------- 12. SABİT YÜKSEKLİKLİ AÇILIR MENÜLERDE KIRPILMA (A1)
   5 numaralı kural (otomatik zoom) girişleri 16px'e çıkarıyor. Beş `select`
   satır içi `height: 38px` taşıyor (index.html:866, 874, 943, 947, 964);
   `.custom-select` dolgusu 10+10px, kenarlık 2px → içerik kutusu 16px kalıyor,
   16px yazının satır yüksekliği ise ~19px. Sonuç: "Sosyal Bilgiler",
   "Puanlanabilir sınav yok" gibi metinler alttan kesiliyordu.

   iPhone'da görünmüyordu çünkü style.css:3221'deki `min-height: 44px` yalnızca
   mobil düzende geçerli. Aynı 44pt dokunma hedefi burada masaüstü düzenine de
   taşınıyor; satır içi yükseklik ezilmeli, bu yüzden !important. */
html.platform-ios select.custom-select {
  height: auto !important;
  min-height: 44px;
}


/* ------------------------------- 13. KENAR ÇUBUĞU: TABLET ÖLÇÜLERİ (C4)
   Kenar çubuğu 120pt genişlik ve 0.72rem (11.5px) etiketle masaüstü faresi
   için tasarlanmış. iPad'de parmakla kullanılıyor ve "MEB Senaryo / Klasik"
   iki satıra kırılıyordu. Yalnızca iPad genişliklerinde büyütülür; masaüstü
   tarayıcı ve Android etkilenmez. */
@media (min-width: 744px) {
  html.platform-ios .sidebar {
    width: 168px;
    padding: 24px 12px;
  }
  html.platform-ios .menu-item {
    font-size: 0.8rem;
    gap: 8px;
    padding: 14px 8px;
    line-height: 1.25;
  }
  html.platform-ios .menu-item svg {
    width: 24px;
    height: 24px;
  }
}


/* ------------------------------------------- 14. OKUMA GENİŞLİĞİ (C1)
   Masaüstü düzeninde panelin genişlik sınırı yok. iPad Pro 11"de Ayarlar
   satırları ~1100pt geniyordu: ikon ve etiket solda, ">" oku sağda, arada
   ~700pt boşluk; metin satırları da okunamayacak kadar uzundu.

   İçerik ortalanıp sınırlanır. Yalnızca iOS + masaüstü düzeni; Firebase
   Hosting'deki web sürümü ve Android etkilenmez (orada gözle doğrulanmadı).

   NOT: Geçmiş'teki v1.9 arama/İçe Aktar araç çubuğu bilerek KALDI. Masaüstü
   düzeninde de görünüyor (style-v19.css:448 genişlik koşulu içinde değil) ama
   kaldırmak iPad'den geçmişte arama özelliğini götürürdü; eski masaüstünde
   arama hiç yoktu. Görünüm sorunu genişlikti, o da burada çözülüyor. */
@media (min-width: 744px) {
  html.platform-ios .panel {
    max-width: 880px;
    margin-inline: auto;
    width: 100%;
  }
}


/* -------------------------------- 15. ANA DÜĞME METNİ BÜYÜK HARF (C8)
   `style.css:935` `.btn-action-title`a `text-transform: uppercase` veriyor;
   uygulamadaki diğer bütün düğmeler Başlık Düzeni. v1.9 bunu mobilde zaten
   `text-transform: none !important` ile kapatmış (style-v19.css:223, 1340)
   ama o kurallar mobil medya sorgusunun içinde, iPad'e ulaşmıyordu.

   index.html'deki metin de Başlık Düzeni'ne çevrildi; web ve Android'de CSS
   hâlâ büyüttüğü için oradaki görünüm değişmez. */
@media (min-width: 744px) {
  html.platform-ios .btn-action-title {
    text-transform: none;
    letter-spacing: 0;
  }
}