/*
 * Zikir Odası — Global UI container + responsive background bridge.
 *
 * Bu dosya ikinci bir tasarım sistemi değildir. Renk paleti ve tipografi
 * token'ları zo-zikirmatik.css içindeki :root'ta kalır (bkz. CLAUDE.md
 * TASARIM). Burada yalnız site genelinde paylaşılan iki şey tanımlanır:
 *   1) 1300px konteyner/gutter token'ları (header/footer/native sayfalar/
 *      shortcode ekranları için tek kaynak — 1300px hiçbir yerde tekrar
 *      hard-code edilmez).
 *   2) zo_core_settings() (desktop/laptop/tablet/mobile arka plan URL'leri)
 *      için --zo-bg-* değişken köprüsü; PHP tarafı GlobalUiModule tarafından
 *      body üzerine yazılır (bkz. src/Modules/GlobalUi/GlobalUiModule.php).
 *
 * --zo-bg-image / --zo-bg-desktop / --zo-bg-laptop / --zo-bg-tablet /
 * --zo-bg-mobile değişken adları zo-zikirmatik.css ile birebir aynıdır;
 * Online Zikirmatik'in kendi .zo-app-shell kuralları burada değiştirilmez.
 *
 * --oz-content köprüsü (staging'de doğrulandı, 2026-08-27): aktif tema
 * (online-zikirmatik-theme) kendi dist/styles.css'inde `:root { --oz-content:
 * 1180px; --oz-reading: 780px; }` tanımlıyor ve header/footer/tüm sayfa
 * şablonlarında genişliği `min(calc(100% - 40px), var(--oz-content))` ile
 * hesaplıyor. Tema dosyasına dokunmadan bu değeri 1300px'e taşımak için tek
 * güvenilir yol budur — ÇÜNKÜ stylesheet yazdırma sırası şablona göre
 * DEĞİŞKEN: Ana Sayfa'da tema önce, eklenti sonra yazdırılıyor; Zikir
 * Odaları ve Zikir Oluştur'da ise eklenti önce, tema SONRA yazdırılıyor
 * (staging'de üç sayfa da <link> sırası incelenerek doğrulandı). Yani
 * öncelik/sıra tabanlı bir çözüm bazı şablonlarda çalışıp bazılarında
 * sessizce etkisiz kalırdı. Bu yüzden CLAUDE.md/ROADMAP'in "zorunlu
 * override gerekçesi belgelenir" maddesi kapsamında, yalnız bu TEK
 * değişken ataması için bilinçli olarak !important kullanılıyor — CSS'te
 * custom property önemliliği köken+importance'a göre kazanır, kaynak
 * sırasından bağımsızdır. --oz-reading (780px, "okuma" şablonları için)
 * zaten doğru değerde — tema tarafında DEĞİŞTİRİLMEDİ, yalnız referans
 * alınır.
 *
 * GÜNCEL !important ENVANTERİ (2026-09-03): bu not eskiden "bu dosyanın
 * başka hiçbir kuralında !important yok" diyordu; artık doğru değil ve
 * yanlış güven veriyordu. Dosyada şu an üç gerekçeli küme var, her biri
 * kendi bloğunda ayrıca belgelenmiştir:
 *   1) yukarıdaki --oz-content değişken köprüsü,
 *   2) §2b içerik yığılma katmanı (position/z-index),
 *   3) §2e ve §2e-bis editör başlık ölçeği (tema override'ı).
 * Yeni bir !important eklendiğinde bu envanter de güncellenir.
 */

:root {
  --zo-container-max: 1300px;
  --zo-page-gutter: clamp(16px, 3vw, 40px);

  /* KÜÇÜK METİN ALTINI — tek doğruluk kaynağı (ROADMAP P1 madde 6).
   *
   * Marka altını `--zo-gold` (#D6B24A) dekoratif bir renktir: halka, çerçeve,
   * ikon dolgusu, gradyan. Açık krem/kart zeminde METİN olarak kullanıldığında
   * gerçek tarayıcı ölçümünde 2.0:1 veriyor — WCAG AA'nın küçük metin için
   * istediği 4.5:1'in çok altında. Bu token aynı altın hue'sundan (~44°)
   * koyulaştırılmış metin varyantıdır; krem zeminde 5.39:1, kart zeminde
   * 5.87:1 ölçüldü (ikisi de AA geçer).
   *
   * KULLANIM: yalnız açık zemin üzerindeki KÜÇÜK METİN için. Dekoratif altın
   * (ikon/çerçeve/gradyan) ve KOYU zemin üzerindeki altın metin (ör.
   * .zo-info-compare .is-room span — ölçüm 7.51:1, zaten geçiyor) `--zo-gold`
   * ailesinde kalır; körlemesine değiştirilmez.
   *
   * NEDEN BU DOSYADA: yukarıdaki nota göre palet token'ları normalde
   * zo-zikirmatik.css :root'unda durur, ama o stylesheet bilgi sayfalarında
   * (iletişim/üyelik/nasıl çalışır) enqueue EDİLMİYOR. Her sayfada yüklenen
   * tek stylesheet bu dosya olduğu için, tek kaynak olması istenen bu token
   * burada tanımlandı. Dekoratif --zo-gold yerinde kaldı. */
  --zo-gold-text: #7D5F11;

  /* Tema değişkeni köprüsü — bkz. yukarıdaki not. Yazdırma sırası şablona
     göre değiştiği için !important zorunlu; bu dosyada başka yerde
     kullanılmıyor. */
  --oz-content: var(--zo-container-max) !important;
}

/* ===== 1. Global konteyner ===== */

.zo-global-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--zo-container-max);
  margin-inline: auto;
  padding-inline: max(var(--zo-page-gutter), env(safe-area-inset-left, 0px));
}

/* Okuma ekranları (Yardım, İletişim, Gizlilik/KVKK/Çerez/Kullanım Şartları
   gibi metin ağırlıklı sayfalar) için dar iç genişlik korunur. Tema zaten
   --oz-reading:780px tanımlıyor; ikinci bir sayı icat etmek yerine onu
   kullanıyoruz, yalnız tema hiç yüklenmezse 780px'e düşer. */
.zo-global-container--reading {
  max-width: var(--oz-reading, 780px);
}

@media (max-width: 480px) {
  .zo-global-container {
    padding-inline: max(16px, env(safe-area-inset-left, 0px));
  }
}

/* ===== 1b. Ortak sayfa başlığı (.zo-page-title) =====
 *
 * Paket A madde 2: iç sayfaların H1'i (Zikir Odaları, Zikir Oluştur, Nasıl
 * Çalışır, İletişim) ana sayfadaki "Online Zikirmatik" başlığıyla aynı
 * ölçekte olmalı. Ana sayfanın H1'i zo-zikirmatik.css içindeki eski
 * .zo-main-header h1 kademeli override zincirinde kalıyor (kod kapısı:
 * o dosyaya elle dokunmak — CLAUDE.md madde 5 "sıfırdan yeniden yazma yok" —
 * onlarca !important katmanına ek regresyon riski taşır). Bu yüzden tek
 * doğruluk kaynağı BURASI: değerler o zincirin masaüstü kazanan kuralından
 * birebir alındı (zo-zikirmatik.css satır ~3768, "v1.0 desktop finish" —
 * clamp(25px,2.05vw,34px)/800/1.06/-0.04em) ve mobilde onlarca breakpoint'in
 * ortak paydası olan 24px'ten alındı (satır ~5809/5578/6310). Diğer
 * sayfalar başlıklarını tekrar tanımlamak yerine yalnız bu sınıfı
 * kullanır (bkz. zo-rooms.css/zo-wizard.css/zo-info.css'teki ilgili
 * h1 kuralları — artık yalnız düzen/max-width taşır, tipografi taşımaz). */
.zo-page-title {
  margin: 0 0 10px;
  color: var(--zo-dark-green, #0F2A22);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(25px, 2.05vw, 34px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

@media (max-width: 760px) {
  .zo-page-title {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.08;
    letter-spacing: -0.02em;
  }
}

/* ===== 1b-bis. SEO içerik kartı (.zo-content-card) =====
 *
 * 2026-09-16: Ana Sayfa, Zikir Odaları, Zikir Oluştur ve Üyelik
 * Ayrıcalıkları sayfalarına eklenen uzun-form SEO metni (shortcode'un
 * ALTINA WP editöründen yapıştırıldı) düz arka plan üzerinde kartsız
 * duruyordu — sitedeki diğer her bileşen (.zo-card, adım kartları,
 * sayaç kartı) kutulu/hizalı. Bu dosya §doc "ikinci bir tasarım sistemi
 * değildir" der; burada renk paleti İCAT edilmiyor, yalnız .zo-page-title
 * ile aynı prensiple zo-zikirmatik.css :root token'ları var()+fallback
 * ile referans alınıyor (bu dosya home dışındaki sayfalarda da yükleniyor,
 * o token'lar orada tanımlı olmayabilir). Kapsam kasıtlı dar: yalnız kap
 * (arka plan/kenarlık/gölge/dolgu) + H2/H3/p/ul/strong/a için okunabilirlik
 * — yeni bir tipografi ölçeği değil, WP varsayılanının üstüne asgari kural. */
.zo-content-card {
  box-sizing: border-box;
  max-width: var(--zo-container-max, 1300px);
  margin: 28px auto 0;
  padding: clamp(22px, 4vw, 48px);
  background: rgba(255, 253, 247, 0.92);
  border: 1px solid rgba(15, 42, 34, 0.10);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(15, 42, 34, 0.08);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1E1E1E;
}

.zo-content-card > *:first-child {
  margin-top: 0;
}

.zo-content-card > *:last-child {
  margin-bottom: 0;
}

.zo-content-card h2 {
  margin: 30px 0 12px;
  color: var(--zo-dark-green, #0F2A22);
  font-size: clamp(19px, 1.6vw, 25px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.zo-content-card h3 {
  margin: 22px 0 10px;
  color: var(--zo-dark-green, #0F2A22);
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 700;
  line-height: 1.25;
}

.zo-content-card p {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.65;
  color: #1E1E1E;
}

.zo-content-card ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.zo-content-card li {
  margin-bottom: 6px;
  line-height: 1.6;
}

.zo-content-card strong {
  color: var(--zo-dark-green, #0F2A22);
}

.zo-content-card a {
  color: var(--zo-emerald, #2F8F5B);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(47, 143, 91, 0.35);
  text-underline-offset: 2px;
}

.zo-content-card a:hover,
.zo-content-card a:focus-visible {
  text-decoration-color: currentColor;
}

@media (max-width: 760px) {
  .zo-content-card {
    margin-top: 20px;
    padding: 20px;
    border-radius: 20px;
  }

  .zo-content-card h2 {
    margin-top: 24px;
  }
}

/* ===== 1c. Ortak yasal footer (.zo-legal-footer) =====
 *
 * PageChrome::legalFooter() tüm uygulama ekranlarında (Online Zikirmatik ana
 * sayfası + Rooms/Wizard/Info/Katalog) tek kaynaktan basar. Tema footer'ına
 * bağımlı değildir. Sakin/minimal; sayaç ve ana içeriğin önüne geçmez.
 * Konteyner 1300px token'ıyla hizalı; mobilde alt sabit navigasyonun (z-index
 * ~150, ~112px) altına girmemesi için ekstra alt boşluk taşır. */
.zo-legal-footer {
  box-sizing: border-box;
  width: 100%;
  margin-top: 28px;
  padding: 18px var(--zo-page-gutter);
  border-top: 1px solid rgba(15, 42, 34, 0.10);
  background: rgba(255, 253, 247, 0.72);
}

.zo-legal-footer-inner {
  box-sizing: border-box;
  max-width: var(--zo-container-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 22px;
}

.zo-legal-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

/* Dokunma hedefi: bu bağlantılar cümle içi değil, kendi <nav>'ı içinde
   bağımsız hedeflerdir; salt satır yüksekliğinde (19.5px) bırakılırsa WCAG
   2.2 AA "Target Size (Minimum)" 24x24 eşiğinin bile altında kalıyordu.
   Masaüstünde 24px taban, dokunmatik/mobil genişlikte 44px (ROADMAP P1). */
.zo-legal-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--zo-dark-green, #0F2A22);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  opacity: 0.82;
  transition: opacity .15s ease;
}

.zo-legal-footer-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

.zo-legal-footer-links a:focus-visible {
  opacity: 1;
  outline: 2px solid var(--zo-emerald, #2F8F5B);
  outline-offset: 3px;
  border-radius: 3px;
}

.zo-legal-footer-copy {
  margin: 0;
  font-size: 12px;
  color: rgba(30, 30, 30, 0.58);
}

@media (max-width: 820px) {
  .zo-legal-footer {
    padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  }
  .zo-legal-footer-links a {
    min-height: 44px;
  }
}

@media (max-width: 560px) {
  .zo-legal-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .zo-legal-footer-links {
    gap: 8px 14px;
  }
}

/* ===== 2. Responsive arka plan köprüsü ===== */

body.zo-global-shell {
  position: relative;
  isolation: isolate;
  /* Madde 4: iç sayfalardaki arka plan katmanı ana sayfayla (.zo-app-shell::before,
     AUDIT.md M4 ~%60 krem overlay) aynı görünsün diye overlay değerleri
     ana sayfanınkiyle eşitlendi. zo-global-bg-overlay-{light,strong} body
     class'ı yönetici tercihiyle bunu hafifletir/koyulaştırır; varsayılan
     (medium) ana sayfayla birebir aynıdır. */
  --zo-global-overlay-h: linear-gradient(90deg, rgba(248, 243, 231, 0.62) 0%, rgba(248, 243, 231, 0.58) 48%, rgba(248, 243, 231, 0.60) 100%);
  --zo-global-overlay-v: linear-gradient(180deg, rgba(248, 243, 231, 0.68) 0%, rgba(248, 243, 231, 0.58) 52%, rgba(248, 243, 231, 0.70) 100%);
  /* Mobil (<=760px) overlay: zo-global-mobile-overlay-{light,medium,strong}
     body class'ı ana sayfanın mobil overlay'iyle (zo-mobile-overlay-*) eşit. */
  --zo-global-overlay-mobile: linear-gradient(180deg, rgba(248, 243, 231, 0.36) 0%, rgba(248, 243, 231, 0.24) 52%, rgba(248, 243, 231, 0.46) 100%);
}

body.zo-global-shell.zo-global-bg-overlay-light {
  --zo-global-overlay-h: linear-gradient(90deg, rgba(248, 243, 231, 0.52) 0%, rgba(248, 243, 231, 0.46) 48%, rgba(248, 243, 231, 0.52) 100%);
  --zo-global-overlay-v: linear-gradient(180deg, rgba(248, 243, 231, 0.58) 0%, rgba(248, 243, 231, 0.48) 52%, rgba(248, 243, 231, 0.60) 100%);
}

body.zo-global-shell.zo-global-bg-overlay-strong {
  --zo-global-overlay-h: linear-gradient(90deg, rgba(248, 243, 231, 0.86) 0%, rgba(248, 243, 231, 0.80) 48%, rgba(248, 243, 231, 0.88) 100%);
  --zo-global-overlay-v: linear-gradient(180deg, rgba(248, 243, 231, 0.90) 0%, rgba(248, 243, 231, 0.84) 100%);
}

body.zo-global-shell.zo-global-mobile-overlay-medium {
  --zo-global-overlay-mobile: linear-gradient(180deg, rgba(248, 243, 231, 0.54) 0%, rgba(248, 243, 231, 0.40) 52%, rgba(248, 243, 231, 0.60) 100%);
}

body.zo-global-shell.zo-global-mobile-overlay-strong {
  --zo-global-overlay-mobile: linear-gradient(180deg, rgba(248, 243, 231, 0.74) 0%, rgba(248, 243, 231, 0.60) 52%, rgba(248, 243, 231, 0.80) 100%);
}

body.zo-global-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--zo-global-overlay-h), var(--zo-bg-desktop, var(--zo-bg-image, none)) center top / cover no-repeat;
}

@media (max-width: 1440px) {
  body.zo-global-shell::before {
    background: var(--zo-global-overlay-h), var(--zo-bg-laptop, var(--zo-bg-desktop, var(--zo-bg-image, none))) center top / cover no-repeat;
  }
}

@media (max-width: 820px) {
  body.zo-global-shell::before {
    background: var(--zo-global-overlay-v), var(--zo-bg-tablet, var(--zo-bg-mobile, var(--zo-bg-image, none))) center top / cover no-repeat;
  }
}

@media (max-width: 760px) {
  body.zo-global-shell:not(.zo-global-mobile-bg-off)::before {
    background: var(--zo-global-overlay-mobile, var(--zo-global-overlay-v)), var(--zo-bg-mobile, var(--zo-bg-tablet, var(--zo-bg-image, none))) center top / cover no-repeat;
  }

  /* zo_core_settings()'teki mobile_background_position (top/center/bottom)
     köprüsü — masaüstünde her zaman "center top" kalır. */
  body.zo-global-shell.zo-global-mobile-bg-position-center:not(.zo-global-mobile-bg-off)::before {
    background-position: center center;
  }

  body.zo-global-shell.zo-global-mobile-bg-position-bottom:not(.zo-global-mobile-bg-off)::before {
    background-position: center bottom;
  }

  body.zo-global-shell.zo-global-mobile-bg-off::before {
    background: none;
  }
}

/* ===== 2b. #oz-main'i arka plan köprüsünün üstüne sabitle =====
 *
 * Bug (2026-08-29, kullanıcı bildirdi + canlı Chromium'da doğrulandı):
 * `body.zo-global-shell::before` (yukarıda) position:fixed + z-index:-1 ile
 * body'nin isolate edilmiş stacking context'inde en alt katman olacak
 * şekilde tasarlandı. Ancak tema'nın `#oz-main.oz-app-main` sarmalayıcısı
 * hiçbir position/z-index bildirmiyordu (computed: position:static) — bu
 * durumda sayaç kartının ALTINA eklenen görünür SEO içeriği (.zo-seo,
 * .zo-info-define/.zo-info-faq) DOM'da vardı, sayfa normal scroll oluyordu,
 * ama hiçbir masaüstü genişliğinde görünmüyordu (fixed arka plan köprüsü
 * `.zo-app-shell::before, body.zo-global-shell::before` DevTools'ta geçici
 * olarak gizlenince içerik anında ortaya çıktı — canlı doğrulama).
 * #oz-main'e body'nin stacking context'i içinde AÇIK bir pozitif z-index
 * vermek, arka plan köprüsünün görsel/fixed davranışını DEĞİŞTİRMEDEN bu
 * içeriğin her zaman üstte kalmasını garanti eder. Sayfa şablonuna göre
 * stylesheet yazdırma sırası değiştiği için (yukarıdaki --oz-content notuna
 * bkz.) !important zorunlu. */
.oz-app-main {
  position: relative !important;
  z-index: 1 !important;
}

/* ===== 2c. Uygulama ekranlarındaki WordPress editör içeriğini 1300px
 * konteynere al (2026-09-02, gerçek Chrome + CDP ile ölçüldü) =====
 *
 * BULGU: Ana sayfa, Zikir Odaları ve Zikir Oluştur ekranlarında shortcode
 * çıktısından SONRA gelen WordPress editör blokları `#oz-main.oz-app-main`
 * içinde ÇIPLAK KARDEŞ olarak duruyor. Shortcode kabuğu (.zo-app-shell /
 * .zo-rooms-shell / .zo-wizard-shell) 1300px konteynerini kendi üzerinde
 * taşıdığı için bloklara hiçbir konteyner uygulanmıyordu: 1440px viewport'ta
 * ölçüm `left:0 / width:1440` (kenardan kenara, yatay padding YOK), 390px'te
 * metin doğrudan ekran kenarına yapışıyordu.
 *
 * DÜZELTME: blokların kendisi 1300px token'ıyla ortalanır ve kabuğun yatay
 * padding'iyle AYNI iç kenardan başlar. Ölçülen hizalama (metnin başladığı
 * x, blok vs. kabuk): 1920 -> 328/328, 1440 -> 88/88, 1366 -> 51/51,
 * 1181 -> 18/18, 430 -> 10/10, 390 -> 10/10. Sekiz viewport'ta da yatay
 * taşma 0.
 *
 * 1024/768'de kabuk bilinçli olarak telefon çerçevesine daralıyor (780px /
 * 430px); düzyazı ona DEĞİL, sitenin 1300px konteynerine hizalanır — yoksa
 * 768px tablette 430px'lik bir metin sütunu kalırdı.
 *
 * Kapsam `[class*="wp-block"]`: yalnız editörden gelen bloklar hedeflenir,
 * eklentinin kendi shortcode kabukları (kendi max-width'lerini taşırlar)
 * dokunulmadan kalır. Yeni sayfa-başına CSS sistemi üretilmedi; 1300px
 * yeniden hard-code edilmedi, --zo-container-max token'ı kullanıldı.
 * z-index KULLANILMADI: görünürlük sorununun kökü stacking değil, yinelenen
 * arka plan katmanıydı (bkz. zo-zikirmatik-ui.css `.zo-app-shell::before`).
 *
 * 2026-09-16 (kullanıcı bulgusu, ekran görüntüsü): `.zo-content-card`
 * (Ana Sayfa/Rooms/Wizard SEO+SSS kartı, `[zo_home_faq]` vb. yer tutucu
 * shortcode'ların Gutenberg "Kısa kod" bloğundan bastığı kök `<div>`)
 * `[class*="wp-block"]` ile EŞLEŞMİYOR — bu shortcode çıktısı kendi
 * wp-block-shortcode sarmalayıcısını basmıyor, `.zo-content-card` doğrudan
 * `#oz-main`'in çocuğu oluyor. Sonuç: kart bu hizalama sözleşmesinin
 * dışında kalıp x:0'dan başlıyordu (üstteki sayaç/oda içeriğiyle solda
 * kayık). `.zo-content-card` aşağıdaki MARGIN kurallarına (kartın
 * KONUMU) `[class*="wp-block"]` ile birlikte eklendi. `padding-inline`
 * BİLEREK eklenmedi: `.zo-content-card`'ın kendi kuralı (§1b-bis, bu
 * dosyada yukarıda) zaten `padding: clamp(22px, 4vw, 48px)` ile dört
 * yönü de doğru veriyor — 18px'lik düz padding-inline'ı da eklemek
 * yalnız sol/sağı ezip üst/alttan asimetrik bir iç boşluk yaratırdı. */
#oz-main.oz-app-main > [class*="wp-block"] {
  box-sizing: border-box;
  max-width: var(--zo-container-max, 1300px);
  margin-inline: auto;
  padding-inline: 18px;
}

#oz-main.oz-app-main > .zo-content-card {
  margin-inline: auto;
}

/* 2026-09-14 kullanıcı bulgusu (ekran görüntüsü + kırmızı hizalama
   çizgileri): SEO kartı üst alandaki sayaç/oda içeriğiyle "aynı hizada"
   değildi. `.zo-app-shell` bir grid'tir (masaüstünde sidebar + gap +
   kendi shell padding'i kadar sol; sağda yalnız 18px). Bu blok sidebar
   sütununu BİLMEDİĞİ için sıfırdan (x:0) başlıyor, üst alanla solda bir
   kayma yaratıyordu. Aşağıdaki kurallar `.zo-app-shell`'in KENDİ
   padding/grid değerleriyle eşleşecek şekilde margin veriyor. Bu genel/
   varsayılan kural yalnız Ana Sayfa'yı etkiler (Katalog'un #oz-main
   içinde wp-block içeriği yok, dolayısıyla etkisiz; Wizard/Rooms/Info'nun
   KENDİ, daha özgül sözleşmesi aşağıda ayrıca tanımlı, buradan
   etkilenmez).

   2026-09-16 (breakpoint birleştirmesi QA turu, bkz. ROADMAP.md P1
   madde 8): Ana Sayfa'nın KENDİ sidebar sütun genişliği tek bir sabit
   DEĞİL — zo-zikirmatik-ui.css'teki `@media (min-width:1181px)` bloğu
   sidebar sütununu 198px'ten 220px'e GENİŞLETİYOR (zo-zikirmatik.css'te
   iki ayrı, media-query'siz `.zo-app-shell{grid-template-columns:198px
   ...}` kuralı taban değeri veriyor). Bu, ilk breakpoint birleştirme
   turunda GÖZDEN KAÇTI (yalnız `max-width:1180px` bloklarını taşıdım,
   bu `min-width:1181px` ailesini hiç aramadım) — sonuç, 821-1180px
   aralığında kartın 256px yerine GERÇEKTE 234px (18px padding + 198px
   sidebar + 18px gap) olması gereken sol boşluğa sahip olması, canlıda
   ~22px'lik asimetrik bir kayma (getBoundingClientRect ile ölçüldü:
   mainPanel.left=234, card.left=256 @ 1024px VE 1180px). Aşağıda iki
   ayrı katman: 821-1180px (198px sidebar, 234px) ve >=1181px (220px
   sidebar, 256px, zo-zikirmatik-ui.css'teki genişletmeyle birebir
   eşleşiyor). */
@media (min-width: 821px) and (max-width: 1180px) {
  /* bkz. altındaki >=1181px bloğunun KART'IN KENDİSİ / calc() açıklaması
     — aynı gerekçe, yalnız sabit 234px (198px sidebar + 18px gap + 18px
     shell padding) kullanılıyor. */
  #oz-main.oz-app-main > [class*="wp-block"],
  #oz-main.oz-app-main > .zo-content-card {
    margin-left: calc(max(0px, (100vw - 1300px) / 2) + 234px);
    margin-right: calc(max(0px, (100vw - 1300px) / 2) + 18px);
  }
}

@media (min-width: 1181px) {
  /* KART'IN KENDİSİ (arka plan/kenarlık/gölge) üst alandaki mainPanel'in
     dış kenarlarıyla eşleşmeli — yalnız içindeki metni içeri itmek
     (padding) YETMEZ, kartın kendisi yanlış yerde kalır (1367px'te
     canlıda görüldü: kart 43-1343 iken mainPanel 299-1325).
     margin-left/right düz sayı olarak denendiğinde de 1400px+'te bozuldu:
     .zo-app-shell 1300px'e sıkışıp viewport'ta ek dış boşlukla
     ortalanıyor (örn. 1400px'te (1400-1300)/2=50px), ama düz margin bu
     boşluğu hesaba katmıyordu.
     ÇÖZÜM: calc() ile AYNI ek boşluğu hesaba kat. .zo-app-shell'in kendi
     formülü max(0, (100vw-1300px)/2) + 256px (220px sidebar + 18px gap +
     18px shell padding) — sağda aynı ek boşluk + 18px shell padding. */
  #oz-main.oz-app-main > [class*="wp-block"],
  #oz-main.oz-app-main > .zo-content-card {
    margin-left: calc(max(0px, (100vw - 1300px) / 2) + 256px);
    margin-right: calc(max(0px, (100vw - 1300px) / 2) + 18px);
  }
}

@media (max-width: 820px) {
  #oz-main.oz-app-main > [class*="wp-block"],
  #oz-main.oz-app-main > .zo-content-card {
    margin-inline: 16px;
  }
}

/* `.zo-content-card` burada BİLEREK ayrı: dosyanın yukarısındaki kendi
 * `@media (max-width: 760px) { .zo-content-card { padding: 20px } }`
 * kuralı zaten dört yönü de veriyor — padding-inline eklemek yalnız
 * sol/sağı ezip üst/alttan asimetrik bırakırdı (bkz. yukarıdaki not). */
@media (max-width: 760px) {
  #oz-main.oz-app-main > [class*="wp-block"] {
    margin-inline: 10px;
    padding-inline: 10px;
  }

  #oz-main.oz-app-main > .zo-content-card {
    margin-inline: 10px;
  }
}

/* fix/info-katalog-seo-alignment (2026-09-14, 2026-09-16'da breakpoint
 * birleştirmesiyle güncellendi): yukarıdaki 821/760 kırılma noktaları ve
 * 256px offset SADECE ana sayfanın kendi sözleşmesiyle (`.zo-app-shell`:
 * gap 18px sabit) birebir eşleşir. Wizard/Rooms/Nasıl-Çalışır sayfaları da
 * aynı `#oz-main.oz-app-main` kabuğunu kullanır ama KENDİ shell'leri
 * (`.zo-wizard-shell` / `.zo-rooms-shell` / `.zo-info-shell`) farklı bir
 * sözleşme taşır: gap 24px (>=1121px) / 18px (821-1120px) — tek sütuna
 * düşme noktası artık ikisinde de aynı (820px), ama gap farkı sürüyor
 * (canlı ölçüm, getComputedStyle — kaynaktaki bir üst .zo-app-shell kuralı
 * 22px yazıyor ama sonraki bir kural 18px'e eziyor; wizard/rooms/info'da
 * ise ezen bir kural YOK, gerçek gap 24px kalıyor). Bu yüzden >=1121px'te
 * hâlâ 262px (256 değil) gerekiyor — üstteki paylaşılan kural artık
 * breakpoint'te eşleşse de gap farkı nedeniyle offset'te eşleşmiyor. Kendi
 * shell değerleriyle birebir eşleşen, yüksek özgüllüklü (body.X ile) ayrı
 * kural: */
@media (min-width: 1121px) {
  body.zo-wizard-page #oz-main.oz-app-main > [class*="wp-block"],
  body.zo-rooms-page #oz-main.oz-app-main > [class*="wp-block"],
  body.zo-info-page #oz-main.oz-app-main > [class*="wp-block"],
  body.zo-wizard-page #oz-main.oz-app-main > .zo-content-card,
  body.zo-rooms-page #oz-main.oz-app-main > .zo-content-card,
  body.zo-info-page #oz-main.oz-app-main > .zo-content-card {
    margin-left: calc(max(0px, (100vw - 1300px) / 2) + 262px);
    margin-right: calc(max(0px, (100vw - 1300px) / 2) + 18px);
  }
}

@media (min-width: 821px) and (max-width: 1120px) {
  body.zo-wizard-page #oz-main.oz-app-main > [class*="wp-block"],
  body.zo-rooms-page #oz-main.oz-app-main > [class*="wp-block"],
  body.zo-info-page #oz-main.oz-app-main > [class*="wp-block"],
  body.zo-wizard-page #oz-main.oz-app-main > .zo-content-card,
  body.zo-rooms-page #oz-main.oz-app-main > .zo-content-card,
  body.zo-info-page #oz-main.oz-app-main > .zo-content-card {
    margin-left: calc(max(0px, (100vw - 1300px) / 2) + 256px);
    margin-right: calc(max(0px, (100vw - 1300px) / 2) + 18px);
  }
}

/* ===== 2c-bis. KALDIRILDI (2026-09-14) — kullanıcı bulgusu =====
 *
 * 2026-09-03'te bu blok metin/başlıkları 780px okuma genişliğine
 * sınırlıyordu (satır uzunluğu okunabilirliği için). Ama SEO kartları
 * (§2f) üst alandaki sayaç/oda içeriğiyle AYNI genişlikte olacak şekilde
 * kutulanmıştı — 780px sınırı bu kartın SOLUNDA görünür, istenmeyen bir
 * boşluk bırakıyordu (kullanıcı: "seo içerikleri üst alanın genişliği
 * kadar olsun boşluk olmasın solunda"). §2c'nin 1300px konteyneri artık
 * metin/başlıklar için de geçerli — tablo/görsel/grup bloklarıyla aynı
 * genişlik. --oz-reading token'ı DEĞİŞMEDİ, yalnız burada kullanılmıyor;
 * .zo-global-container--reading (Yardım/İletişim/hukuki sayfalar) hâlâ
 * kendi dar genişliğini koruyor. */

/* ===== 2d. Editör içeriğindeki geniş tablolar mobilde sayfayı taşırmasın
 * (2026-09-02, gerçek Chrome + CDP ile ölçüldü) =====
 *
 * BULGU: /cerez-politikasi/ (sayfa ID 60) gövdesindeki 4 sütunlu çerez
 * tablosu 390px viewport'ta 365px genişliğe zorluyor ama sarmalayıcısı
 * 324px; sonuç: BELGE 8px yatay taşıyordu (documentElement.scrollWidth 398
 * vs clientWidth 390). Hukuki sayfalarda body üzerinde `overflow-x: hidden`
 * güvencesi YOK (uygulama sayfalarından farkı), bu yüzden taşma doğrudan
 * sayfa seviyesine çıkıyordu. 430px ve üzeri genişliklerde sorun yok.
 *
 * DÜZELTME: tablo yalnız mobilde kendi yatay kaydırma kutusuna alınır.
 * İçerik KAYBOLMAZ/kırpılmaz — tablo kendi içinde kaydırılabilir hale gelir
 * (ölçüm: scrollWidth 365 > clientWidth 324, 6 satır / 24 hücrenin tamamı
 * DOM'da ve erişilebilir kalıyor). Ölçülen sonuç: 390px'te yatay taşma
 * 8 -> 0; 768px ve 1440px'te tablo genişliği ve davranışı DEĞİŞMİYOR
 * (o genişliklerde kural zaten devrede değil).
 *
 * Not: tablo WordPress sayfa editöründeki owner içeriğidir; içeriğe
 * DOKUNULMADI, düzeltme yalnız sunum katmanında. Sınıfsız <table> olduğu
 * için seçici `#oz-main table` kapsamında; 760px eşiği dosyadaki mevcut
 * breakpoint sözleşmesiyle aynı. `!important` gerekmedi. */
@media (max-width: 760px) {
  #oz-main table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ===== 2e. Editör içeriğindeki başlıkları uygulama tipografi skalasına al
 * (2026-09-03, ROADMAP §17.3 bulgu B2 — gerçek Chrome + CDP ölçümü) =====
 *
 * BULGU: `#oz-main.oz-app-main` içindeki WordPress editör blokları eklenti
 * tipografisinden hiç pay almıyor, tema varsayılanına düşüyor. Ölçüm:
 *
 *   /nasil-calisir/          h2 "Bilmen gereken temel kurallar"  42px / 700
 *   /uyelik-ayricaliklari/   h2.wp-block-heading  x2             38px / 600
 *   /faziletli-zikirler/     h2.wp-block-heading                 34px / 800
 *   (üç sayfada da uygulama H1'i .zo-page-title ile 29.5px / 800)
 *
 * Yani gövde başlıkları sayfa başlığından BÜYÜK: görsel hiyerarşi tersine
 * dönüyor ve "tek görsel kimlik" kuralı (docs/UI-UX-RULES.md §7) ihlal
 * ediliyor. Ayrıca aynı seviyedeki başlık üç sayfada üç farklı ölçek/ağırlık
 * gösteriyor.
 *
 * DÜZELTME: h2/h3/h4 için tek bir ölçek ataması. Değerler .zo-page-title'ın
 * (§1b) altında kalacak şekilde ondan türetildi — H1 clamp(25,2.05vw,34),
 * h2 clamp(20,1.55vw,26), h3 clamp(17,1.2vw,20), h4 16px. Ölçek sırası her
 * viewport'ta korunur: 1920 -> 34/26/20, 1440 -> 29.5/22.3/17.3,
 * 1181 -> 25/20/17, 390 -> 24/20/17 (mobilde H1 24px sabit, §1b).
 *
 * KAPSAM iki seçici: (a) doğrudan çocuk başlıklar — `h2.wp-block-heading`
 * üst seviye editör içeriğinde #oz-main'in doğrudan çocuğudur; (b) group /
 * columns gibi sarmalayıcı blokların İÇİNDEKİ başlıklar. Eklentinin kendi
 * kabukları (.zo-app-shell / .zo-rooms-shell / .zo-wizard-shell / .zo-info-*)
 * `[class*="wp-block"]` altında YAŞAMADIĞI için bu kuralın dışında kalır;
 * .zo-page-title'a dokunulmaz (SEO-PLAN §3, 2026-08-27 kullanıcı kararı).
 * Hukuki sayfalar `.oz-app-main` taşımaz — onların başlık ağacı 4. turda
 * doğrulandı ve DEĞİŞMEZ.
 *
 * !important GEREKÇESİ (docs/DESIGN-SYSTEM.md §5 uyarınca yazılıyor): tema
 * bu başlıkları şu an kazanıyor; sayfa şablonuna göre stylesheet yazdırma
 * sırası değişebildiği için (bkz. §2b notu) kaynak sırasına güvenilemez.
 * Kapsam üç özellik ve tek blok ile sınırlı tutuldu; yeni breakpoint yaması
 * üretilmedi, dosyadaki 760px sözleşmesi korundu. */
#oz-main.oz-app-main > h2,
#oz-main.oz-app-main > [class*="wp-block"] h2 {
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(20px, 1.55vw, 26px) !important;
  font-weight: 800 !important;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--zo-dark-green, #0F2A22);
}

#oz-main.oz-app-main > h3,
#oz-main.oz-app-main > [class*="wp-block"] h3 {
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(17px, 1.2vw, 20px) !important;
  font-weight: 700 !important;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--zo-dark-green, #0F2A22);
}

#oz-main.oz-app-main > h4,
#oz-main.oz-app-main > [class*="wp-block"] h4 {
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  color: var(--zo-dark-green, #0F2A22);
}

/* ===== 2e-bis. Aynı ölçek, `oz-page-main` kullanan iki eklenti sayfası
 * için (2026-09-03) =====
 *
 * BULGU (staging 3.6.0-alpha.20, gerçek Chromium, 390px): §2e yalnız
 * `.oz-app-main` kapsamında. Üyelik ve Faziletli Zikirler sayfaları tema
 * "site" şablonunu kullandığı için `#oz-main` üzerinde `.oz-page-main`
 * taşıyor ve editör blokları bu ölçeğin DIŞINDA kalıyordu:
 *
 *   /faziletli-zikirler/  h2.wp-block-heading  25px  > sayfa H1'i (24px)
 *   /uyelik-ayricaliklari/ h2.wp-block-heading 28px  > sayfa H1'i (24px)
 *
 * Yani §2e'nin düzelttiği ters hiyerarşi bu iki sayfada duruyordu.
 *
 * Kapsam BODY SINIFI ile daraltıldı: yalnız bu iki eklenti sayfası.
 * Hukuki sayfalar da `.oz-page-main` taşır ama `zo-info-page` /
 * `zo-zikir-katalog-page` sınıflarını TAŞIMAZ — onların başlık ağacı
 * §2e'deki gibi kapsam dışında kalır (4. tur doğrulaması korunur).
 *
 * Ölçek §2e ile birebir aynıdır; yeni bir basamak icat edilmedi. */
body.zo-info-page #oz-main.oz-page-main .oz-prose h2[class*="wp-block"],
body.zo-zikir-katalog-page #oz-main.oz-page-main .oz-prose h2[class*="wp-block"] {
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(20px, 1.55vw, 26px) !important;
  font-weight: 800 !important;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--zo-dark-green, #0F2A22);
}

body.zo-info-page #oz-main.oz-page-main .oz-prose h3[class*="wp-block"],
body.zo-zikir-katalog-page #oz-main.oz-page-main .oz-prose h3[class*="wp-block"] {
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(17px, 1.2vw, 20px) !important;
  font-weight: 700 !important;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--zo-dark-green, #0F2A22);
}

/* ===== 2f. Uygulama ekranlarındaki (ana sayfa/odalar/sihirbaz) SEO
 * metnini tek bir kart bölümü gibi göster (kullanıcı isteği, 2026-09-12:
 * "kutuların içinde, ayrı bir section, aşağıda hizalı ve estetik") =====
 *
 * Bu metin WordPress editöründen gelir ve sarmalayıcı bir <div> ÜRETMEZ —
 * her blok (bkz. §2c) #oz-main.oz-app-main'in doğrudan çocuğudur. Ek bir
 * DOM sarmalayıcısı olmadan TEK kart görünümü vermek için ardışık
 * bloklara aynı kart zemini/kenarlığı verilir, üst/alt köşe yuvarlama +
 * gölge yalnız ilk/son bloğa uygulanır. Kart dili yeni icat edilmedi —
 * zo-info.css'teki .zo-info-faq/.zo-membership-auth ile BİREBİR aynı
 * renk/radius/gölge değerleri kullanıldı.
 *
 * content-stacking-contract-test.php §2c'nin (max-width/margin-inline/
 * padding-inline:18px, z-index YOK) hâlâ TEK BLOK olarak var olmasını
 * zorunlu kılıyor; bu yüzden kart zemini ayrı bir kural değil, aynı §2c
 * seçicisine yeni deklarasyonlar eklenerek uygulanır (z-index kullanılmadı,
 * sözleşme testi bozulmaz).
 *
 * Bug (staging QA, 2026-09-12): ilk sürüm `:first-of-type`/`:last-of-type`
 * kullanıyordu. Bu pseudo-class'lar ETİKET ADINA göre çalışır — kardeşler
 * arasında h2/p/ul/h3 karışık olduğunda HER etiket adının kendi ilk/son
 * örneği ayrı ayrı eşleşir (ilk h2 VE ilk p VE ilk h3, hepsi "first"
 * sayılır). Sonuç: her blok kendi köşe+gölgesini alıyordu — tek kart
 * yerine art arda ayrı kartlar yığını görünüyordu (4 sayfada doğrulandı).
 * Düzeltme: etiket adından bağımsız gerçek "ilk/son eşleşen kardeş"
 * seçici — `:not(A ~ A)` (önce gelen bir A yoksa ilk budur) ve
 * `:not(:has(~ A))` (sonra gelen bir A yoksa son budur). */
/* fix/seo-card-seams (2026-09-14): yukarıdaki :not(A~A)/:not(:has(~A))
   düzeltmesi yalnız köşe yuvarlama+gölgeyi ilk/son bloğa taşıdı; ARADAKİ
   bloklar (h2/p/ul karışık) kendi tarayıcı/tema varsayılan margin'lerini
   (örn. h2 margin-bottom ~21px) hâlâ taşıyordu. Bu margin kutunun DIŞINDA
   olduğu için arka plan rengini taşımaz — art arda gelen bloklar arasında
   sayfa zeminini gösteren görünür bir "dikiş" (gap) bırakıyordu, tek kart
   yerine yine ayrı parçalar gibi görünüyordu. Düzeltme: tüm bloklarda
   margin sıfırlanır, boşluk yerine (arka planı taşıyan) padding kullanılır;
   ilk/son bloğun kendi padding-top/padding-bottom'u daha yüksek
   özgüllükle bunun üzerine yazmaya devam eder. */
#oz-main.oz-app-main > [class*="wp-block"] {
  background: rgba(255, 253, 247, .94);
  border-left: 1px solid rgba(15, 42, 34, .09);
  border-right: 1px solid rgba(15, 42, 34, .09);
  margin-top: 0;
  margin-bottom: 0;
  padding-top: clamp(18px, 3.4vw, 28px);
  padding-bottom: clamp(18px, 3.4vw, 28px);
}

#oz-main.oz-app-main > [class*="wp-block"]:not([class*="wp-block"] ~ [class*="wp-block"]) {
  margin-top: clamp(28px, 5vw, 56px);
  padding-top: clamp(26px, 5vw, 48px);
  border-top: 1px solid rgba(15, 42, 34, .09);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 18px 42px rgba(15, 42, 34, .07);
}

#oz-main.oz-app-main > [class*="wp-block"]:not(:has(~ [class*="wp-block"])) {
  padding-bottom: clamp(26px, 5vw, 48px);
  border-bottom: 1px solid rgba(15, 42, 34, .09);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 18px 42px rgba(15, 42, 34, .07);
  margin-bottom: clamp(20px, 4vw, 40px);
}

@media (max-width: 480px) {
  #oz-main.oz-app-main > [class*="wp-block"]:not([class*="wp-block"] ~ [class*="wp-block"]) {
    border-radius: 20px 20px 0 0;
  }
  #oz-main.oz-app-main > [class*="wp-block"]:not(:has(~ [class*="wp-block"])) {
    border-radius: 0 0 20px 20px;
  }
}

/* ===== 2g. Bilgi sayfalarında (nasıl-çalışır/üyelik/faziletli-zikirler)
 * aynı kart dili =====
 *
 * Bu şablonlarda WP editör içeriği #oz-main.oz-app-main içinde değil,
 * temanın gövde metni konteyneri `.oz-prose.oz-content-width` içinde
 * render edilir (bkz. zo-info.css — kabuk sıfırlaması bu konteynerden
 * kaldırıldı, bkz. o dosyadaki not). [zo_info_page] kısayolunun kendi
 * kartları (`.zo-info-shell` vb.) `wp-block-*` sınıfı TAŞIMADIĞI için bu
 * seçicinin dışında kalır — yalnız WP editöründen gelen serbest metin
 * hedeflenir, kısayolun kendi bölümleri ikinci kez kutulanmaz. */
/* fix/seo-card-seams: bkz. §2f'deki aynı not — aradaki bloklar tarayıcı
   varsayılan margin'i yüzünden sayfa zeminini gösteren bir dikiş
   bırakıyordu. Aynı düzeltme (margin sıfır, padding ile boşluk). */
body.zo-info-page .oz-prose.oz-content-width > [class*="wp-block"],
body.zo-zikir-katalog-page .oz-prose.oz-content-width > [class*="wp-block"] {
  background: rgba(255, 253, 247, .94);
  border-left: 1px solid rgba(15, 42, 34, .09);
  border-right: 1px solid rgba(15, 42, 34, .09);
  padding-inline: clamp(20px, 4vw, 40px);
  margin-top: 0;
  margin-bottom: 0;
  padding-top: clamp(18px, 3.4vw, 28px);
  padding-bottom: clamp(18px, 3.4vw, 28px);
}

/* fix/info-katalog-seo-alignment: bu kutu .zo-info-shell / .zo-katalog-shell
 * ile AYNI grid'in disinda, .oz-prose.oz-content-width'un dogrudan cocugu
 * olarak render ediliyor — kendi basina konumlanir, shell'in 220px sidebar +
 * gap + padding'ini hesaba katmaz. Offset 262px (220 sidebar + 24 gap + 18
 * shell padding, >=1121px) / 256px (18px gap'e dustugu 821-1120px araligi)
 * — zo-katalog-shell'deki "mainX 262 vs 256" notuyla birebir ayni sozlesme.
 *
 * TAKIP (aynı gün, üçüncü canlı ölçüm — kritik fark): Info ve Katalog
 * sayfalarının `.oz-prose.oz-content-width` üst kabuğu AYNI DAVRANMIYOR.
 * Katalog'da (zo-zikir-katalog.css) bu kabuk `width:100%; max-width:none`
 * — tam viewport genişliğinde, homepage'in `#oz-main.oz-app-main`'i gibi
 * TAM YAYILIMLI (full-bleed). Info'da (zo-info.css) ise kabuğun KENDİSİ
 * `max-width:1300px; margin-inline:auto` ile ZATEN ortalanmış durumda.
 * `calc(max(0,(100vw-1300px)/2)+offset)` formülü yalnız tam-yayılımlı bir
 * ebeveyn için doğrudur (offset'i viewport'tan itibaren yeniden hesaplar);
 * Info'da ebeveyn zaten kendi ortalamasını yapmış olduğundan bu formül
 * ortalama payını İKİNCİ KEZ ekliyordu (canlıda ölçüldü: kabuk zaten
 * x=142.5'te, formül üstüne +150px daha bindirip kutuyu 150px fazladan
 * sağa itiyordu). Info için offset artık DÜZ (calc'sız) sayı; Katalog
 * (ve homepage/wizard/rooms, hepsi tam-yayılımlı) calc'lı kalır. */
@media (min-width: 1121px) {
  body.zo-info-page .oz-prose.oz-content-width > [class*="wp-block"] {
    margin-left: 262px;
    margin-right: 18px;
  }
  body.zo-zikir-katalog-page .oz-prose.oz-content-width > [class*="wp-block"] {
    margin-left: calc(max(0px, (100vw - 1300px) / 2) + 262px);
    margin-right: calc(max(0px, (100vw - 1300px) / 2) + 18px);
  }
}

@media (min-width: 821px) and (max-width: 1120px) {
  body.zo-info-page .oz-prose.oz-content-width > [class*="wp-block"] {
    margin-left: 256px;
    margin-right: 18px;
  }
  body.zo-zikir-katalog-page .oz-prose.oz-content-width > [class*="wp-block"] {
    margin-left: calc(max(0px, (100vw - 1300px) / 2) + 256px);
    margin-right: calc(max(0px, (100vw - 1300px) / 2) + 18px);
  }
}

@media (max-width: 820px) {
  body.zo-info-page .oz-prose.oz-content-width > [class*="wp-block"],
  body.zo-zikir-katalog-page .oz-prose.oz-content-width > [class*="wp-block"] {
    margin-inline: 10px;
  }
}

/* Bug (staging QA, 2026-09-12): aynı :first-of-type/:last-of-type etiket-adı
 * hatası burada da vardı — bkz. §2f'deki not. Aynı :not(A ~ A) /
 * :not(:has(~ A)) düzeltmesi uygulandı. */
body.zo-info-page .oz-prose.oz-content-width > [class*="wp-block"]:not([class*="wp-block"] ~ [class*="wp-block"]),
body.zo-zikir-katalog-page .oz-prose.oz-content-width > [class*="wp-block"]:not([class*="wp-block"] ~ [class*="wp-block"]) {
  margin-top: clamp(28px, 5vw, 48px);
  padding-top: clamp(26px, 5vw, 40px);
  border-top: 1px solid rgba(15, 42, 34, .09);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 18px 42px rgba(15, 42, 34, .07);
}

body.zo-info-page .oz-prose.oz-content-width > [class*="wp-block"]:not(:has(~ [class*="wp-block"])),
body.zo-zikir-katalog-page .oz-prose.oz-content-width > [class*="wp-block"]:not(:has(~ [class*="wp-block"])) {
  padding-bottom: clamp(26px, 5vw, 40px);
  border-bottom: 1px solid rgba(15, 42, 34, .09);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 18px 42px rgba(15, 42, 34, .07);
  margin-bottom: clamp(20px, 4vw, 36px);
}

@media (max-width: 480px) {
  body.zo-info-page .oz-prose.oz-content-width > [class*="wp-block"]:not([class*="wp-block"] ~ [class*="wp-block"]),
  body.zo-zikir-katalog-page .oz-prose.oz-content-width > [class*="wp-block"]:not([class*="wp-block"] ~ [class*="wp-block"]) {
    border-radius: 20px 20px 0 0;
  }
  body.zo-info-page .oz-prose.oz-content-width > [class*="wp-block"]:not(:has(~ [class*="wp-block"])),
  body.zo-zikir-katalog-page .oz-prose.oz-content-width > [class*="wp-block"]:not(:has(~ [class*="wp-block"])) {
    border-radius: 0 0 20px 20px;
  }
}

/* ===== 3. Blog yorum formu — mobil taşma (2026-09-16, browser-qa turu) =====
 *
 * BULGU: `#comment` textarea'sı WordPress'in kendi `cols="45"` HTML
 * niteliğinden içerik genişliği alıyor (391 karakter × ortalama karakter
 * genişliği ≈ 400px), ama CSS'te hiçbir yerde `width`/`box-sizing`
 * tanımlanmamıştı. Sonuç: 390px genişlikteki bir telefonda textarea kendi
 * `.comment-form-comment` kapsayıcısından (362px) taşıyor, sayfa yatay
 * kaydırılabilir hale geliyordu (üç blog yazısında da aynı, paylaşılan
 * tema yorum şablonundan kaynaklanıyor — içerikle veya breakpoint
 * birleştirmesiyle ilgisi yok). Yalnız blog yazılarını etkiler; app
 * sayfalarında yorum formu yok.
 *
 * ÇÖZÜM: standart "responsive form alanı" deseni — box-sizing:border-box
 * + width:100% + max-width:100%, `cols`/`size` niteliklerini artık yalnız
 * geniş ekranlarda (konteyner onlardan daha genişken) etkisiz bir üst
 * sınır haline getirir. */
#commentform textarea,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* ===== 4. Blog/hukuki sayfa (tema varsayılan şablonu) marka logosu =====
 *
 * BULGU (kullanıcı bulgusu, 2026-09-16): tema kendi `.oz-brand-logo`
 * marka görselini (`header.oz-site-header > .oz-brand.oz-brand--image`)
 * yalnız `max-width:100%` ile sınırlıyor — kapsayıcı genişliğinin kendisi
 * küçülmediği için görsel 768px'te 653x218px, 390px'te 302x101px gibi
 * aşırı büyük render ediliyordu. Yalnız Blog ve hukuki sayfalar (Gizlilik/
 * KVKK/Çerez/Kullanım Şartları — hepsi aynı tema varsayılan şablonunu
 * kullanıyor) etkileniyor; app sayfaları (`zo_info_page` vb.) kendi
 * kompakt PageChrome logosunu kullanıyor, bu kuralın kapsamı dışında.
 *
 * KAPSAM: kullanıcı isteği yalnız tablet+telefon; masaüstünde (>1180px)
 * logo de büyük ölçülüyor ama bu turun kapsamına dahil edilmedi. */
@media (max-width: 1180px) {
  .oz-brand-logo {
    max-width: 200px !important;
    height: auto !important;
  }
}

@media (max-width: 600px) {
  .oz-brand-logo {
    max-width: 140px !important;
  }
}