/* =====================================================================
   AYARLAR — MASAÜSTÜ DÜZENİ (29 Eyl 2026)
   =====================================================================
   Ölçüldü (canlı, 1440): 2×3 ızgara kartları eşit yüksekliğe çekiyordu;
   Seviye'nin altında ~110px, Hatırlatma'da ~170px boşluk, Hakkında'nın
   üçte ikisi boş (sayfa 1479px). Solda yapışkan bölüm listesi
   (Dilbilgisi/Rozetler ile AYNI bileşen), sağda tek sütun kart; her
   satırda denetim sabit genişlikte ve aynı hizada. İşaretleme telefonla
   ortak: nav telefonda gizli, `.settings-grid` orada aynen çalışır.
   ===================================================================== */
.ay-nav { display: none; }

/* `hidden` öznitelikli ayar satırı GİZLİ kalır — `.setting-row`
   `display:flex` yazdığı için "Test sonucu" satırı test çalışmadan boş
   bir kutuyla görünüyordu (iki genişlikte de). */
.setting-row[hidden] { display: none; }

@media (min-width: 941px) {
  .ay-duzen { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }

  .ay-nav {
    position: sticky; top: calc(var(--ctrl-h-lg) + 2 * var(--sp-4) + 1px + var(--sp-4));
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--sp-2); border: 1px solid var(--line-kart); border-radius: var(--r-lg); background: var(--card);
  }

  /* tek sütun: kartlar içerik kadar, eşit yükseklik yok */
  .ay-icerik.settings-grid { display: flex; flex-direction: column; gap: var(--sp-4); }
  .ay-icerik.settings-grid > .card { flex: none; width: 100%; scroll-margin-top: calc(var(--ctrl-h-lg) + 2 * var(--sp-4) + var(--sp-4)); }
  .ay-icerik > .card > h2 { margin-bottom: var(--sp-1); }
  .ay-icerik > .card > .sub { margin-bottom: var(--sp-2); }

  /* satır: solda etiket + açıklama, sağda SABİT sütunda denetim */
  .ay-icerik .setting-row { flex-wrap: nowrap; gap: var(--sp-8); }
  .ay-icerik .setting-row > .sr-l { flex: 1 1 auto; }
  .ay-icerik .setting-row > :not(.sr-l) { flex: 0 0 280px; min-width: 0; max-width: none; }
  .ay-icerik .setting-row > select,
  .ay-icerik .setting-row > .dd,
  .ay-icerik .setting-row > .btn,
  .ay-icerik .setting-row > input[type=text] { width: 280px; }
  .ay-icerik .setting-row > input[type=text] { text-align: left; }
  .ay-icerik .setting-row > .btn-row { display: flex; justify-content: stretch; }
  .ay-icerik .setting-row > .btn-row > .btn { flex: 1 1 0; }
  /* çok düğmeli satırlar (düzeltmeler · ders hatırlatması) içerik kadar */
  .ay-icerik .setting-row > .btn-row:has(> .btn + .btn),
  .ay-icerik .setting-row > .ha-sag { flex: 0 0 auto; }
  .ay-icerik .setting-row > .btn-row:has(> .btn + .btn) > .btn { flex: 0 0 auto; }
  .ay-icerik .setting-row:has(> .ha-sag) { flex-wrap: wrap; }
  .ay-icerik .setting-row:has(> .ha-sag) > .sr-l { flex: 1 1 100%; }
  .ay-icerik .setting-row > .ha-sag { justify-content: flex-start; }

  /* bütün düğmeler tek boy (34px'lik "Sesi test et", "Bildirime izin ver",
     "Test e-postası gönder", "Düzeltmeler" 44'lerin yanında duruyordu) */
  .ay-icerik .btn, .ay-icerik .btn-sm, .ay-icerik .schip { min-height: var(--ctrl-h); }
  .ay-icerik .setting-row .btn-sm { font-size: var(--fs-kontrol); }
  /* "Test e-postası gönder" segmentten 10px aşağıda duruyordu */
  .ay-icerik .ha-sag { align-items: center; }
  .ay-icerik .ha-sag > .btn, .ay-icerik .ha-sag > .ha-seg { margin: 0; }   /* segmentin 20px alt boşluğu düğmeyi 10px aşağı itiyordu */
  /* Veri: yedek düğmeleri ile "Hatalı bildirilen" satırı arasında nefes */
  .ay-icerik .btn-row.tek-sira + .setting-row { margin-top: var(--sp-3); border-top: 1px solid var(--line); }

  /* ses testi raporu: satırın tamamı */
  .ay-icerik #sesTestSatir > .sr-l { flex: 1 1 100%; }
}

/* dar masaüstü (941–1199): bölüm listesi + 280px denetim sığmıyordu
   (1100 ve 941'de yatay taşma, etiketler kesik). Liste gizlenir, tek
   sütun tam genişlik; denetim sütunu 240. */
@media (min-width: 941px) and (max-width: 1199px) {
  .ay-duzen { grid-template-columns: minmax(0, 1fr); }
  .ay-nav { display: none; }
  .ay-icerik .setting-row { gap: var(--sp-5); }
  .ay-icerik .setting-row > :not(.sr-l) { flex-basis: 240px; }
  .ay-icerik .setting-row > select,
  .ay-icerik .setting-row > .dd,
  .ay-icerik .setting-row > .btn,
  .ay-icerik .setting-row > input[type=text] { width: 240px; }
  /* üç düğmeli satır: etiket üstte, düğmeler altta */
  .ay-icerik .setting-row:has(> .btn-row > .btn + .btn) { flex-wrap: wrap; }
  .ay-icerik .setting-row:has(> .btn-row > .btn + .btn) > .sr-l { flex-basis: 100%; }
}

/* =====================================================================
   AYARLAR — TELEFON VE TABLET (30 Eyl 2026)
   =====================================================================
   Olculdu (390): 3,6 ekran (320'de 5,6) — her satirda etiket, aciklama
   ve TAM GENISLIK denetim alt alta, satir 140–200px. iOS Ayarlar deseni:
   etiket solda, denetim SAGDA ayni satirda, aciklama altinda tam
   genislik. Cok dugmeli satirlar (ders hatirlatmasi, veri) tam genislik
   kalir. `.sr-l > b` dogrudan cocuk kurali (AYARLAR) korunur. */
@media (max-width: 940px) {
  #view .ay-icerik .setting-row:not([hidden]):not(:has(> .ha-sag)):not(:has(> .btn-row)) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); row-gap: var(--sp-1);
    align-items: center;
  }
  #view .ay-icerik .setting-row:not([hidden]):not(:has(> .ha-sag)):not(:has(> .btn-row)) > .sr-l { display: contents; }
  #view .ay-icerik .setting-row:not([hidden]):not(:has(> .ha-sag)):not(:has(> .btn-row)) > .sr-l > b { grid-column: 1; grid-row: 1; }
  #view .ay-icerik .setting-row:not([hidden]):not(:has(> .ha-sag)):not(:has(> .btn-row)) > .sr-l > span { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  #view .ay-icerik .setting-row:not([hidden]):not(:has(> .ha-sag)):not(:has(> .btn-row)) > :not(.sr-l) {
    grid-column: 2; grid-row: 1; width: auto; min-width: 0; max-width: min(58vw, 320px); justify-self: end;
  }
  #view .ay-icerik .setting-row > .dd .dd-btn { max-width: 100%; }
  #view .ay-icerik .setting-row > .dd .dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* sag taraftaki duz metin (Kullanilan ses) sola degil saga yasli */
  #view .ay-icerik .setting-row > span:not(.sr-l) { text-align: right; color: var(--muted); font-size: var(--fs-sm); }
}

/* 941–1199 + RAY (varsayilan, app.js): icerik ~938px — bolum listesi
   (200px) sigar. Menu genisletilmisse icerik 768'e duser, liste gizli kalir. */
@media (min-width: 941px) and (max-width: 1199px) {
  .layout.rail .ay-duzen { grid-template-columns: 200px minmax(0, 1fr); }
  .layout.rail .ay-nav { display: flex; }
}