/*
 * Zikir Odası — site geneli görsel tutarlılık katmanı.
 *
 * KAPSAM
 * Bu dosya yeni bir tasarım sistemi kurmaz ve mevcut bileşenleri yeniden
 * yazmaz. 2026-09-03 tarihinde staging (3.6.0-alpha.20) üzerinde 13 URL x
 * 6 viewport (360/390/430/768/1024/1440) gerçek tarayıcı ölçümüyle
 * doğrulanan, HÂLÂ AÇIK olan tutarsızlıkları kapatır.
 *
 * Editör bloklarına ait hiçbir kural burada TANIMLANMAZ — başlık ölçeği
 * zo-global-ui.css §2e'de, yerleşim ve okuma genişliği §2c/§2c-bis'te
 * tek kaynak olarak durur (tests/editor-heading-scale-contract-test.php
 * ve tests/content-stacking-contract-test.php bunları kilitler).
 *
 * Bu dosyanın kapsamı, o kuralların DIŞINDA kalan dört konudur:
 * shortcode ile basılan kart başlıklarının H1'i geçmesi, mobil alt
 * bardaki kesilen etiket, küçük dokunma hedefleri ve ortak focus
 * göstergesi.
 *
 * Renk paleti CLAUDE.md TASARIM ile birebir aynıdır.
 *
 * YÜKLEME SIRASI: GlobalUiModule bu dosyayı, o sayfada kayıtlı olan zo-*
 * stylesheet'lerini bağımlılık alarak en son enqueue eder; bu yüzden
 * kuralların çoğu düz specificity ile kazanır.
 */

/* Editör metninin okuma genişliği (satır uzunluğu) bu dosyada DEĞİL,
   zo-global-ui.css §2c-bis'te tanımlıdır — editör blok yerleşiminin tek
   kaynağı orasıdır (tests/content-stacking-contract-test.php). */

/* =====================================================================
   0. Kabuk ızgarası — 821-1180px arası ölü sütun (KRİTİK)
   =====================================================================

   BULGU (2026-09-03, staging alpha.23, gerçek Chromium ile 5 sayfada
   ölçüldü): PageChrome sidebar'ı `zo-page-sidebar zo-sidebar` sınıflarını
   birlikte taşıyor. zo-zikirmatik.css içindeki
   `@media (max-width: 1180px) { body .zo-sidebar { display: none } }`
   kuralı — ana sayfa için yazılmış olsa da bu sayfalarda da yüklü —
   sidebar'ı 1180px altında gizliyor. Kabuk ise hâlâ
   `grid-template-columns: 220px minmax(0, 1fr)` taşıdığı için, akıştaki
   TEK grid öğesi olan içerik 220px'lik BİRİNCİ sütuna düşüyordu
   (.zo-page-floating-panels position:fixed olduğundan grid öğesi değil).

   Ölçülen sonuç 821-1180px arasında beş sayfada da aynıydı:
     /zikir-odasi-kur/ /zikir-sihirbazi/ /nasil-calisir/ /iletisim/
     /faziletli-zikirler/  ->  içerik sütunu 220px, yanında 750-900px boş.

   DAHA AĞIR İKİNCİ SONUÇ: aynı aralıkta HİÇBİR navigasyon görünmüyordu.
   Sidebar gizli, mobil üst bar ve mobil alt bar ise yalnız <=820px'te
   açılıyor. Yani 821-1180px arasında (tablet yatay, küçük dizüstü)
   kullanıcının menüsü, logosu, hiçbir gezinme aracı yoktu.

   KÖK NEDEN: `body .zo-sidebar { display: none }` kuralı ANA SAYFA için
   yazılmış (ana sayfa o genişlikte kendi yığılmış düzenine geçiyor).
   PageChrome sidebar'ı görsel eşitlik için aynı `zo-sidebar` sınıfını da
   taşıdığından kural bu sayfalara da sızıyor.

   ÇÖZÜM: kuralı yalnız PageChrome kabukları için, yalnız bu aralıkta
   geri alıyoruz. Böylece bu sayfalar tasarlandığı gibi davranır:
   1181px+ ve 821-1180px'te sidebar, <=820px'te mobil kabuk. Ana
   sayfanın kendi davranışı DEĞİŞMEZ (kural orada aynen geçerli).

   !important GEREKÇESİ: geri alınan kural zo-zikirmatik.css ~4875'te
   `body .zo-sidebar { display: none !important; }` biçiminde yazılmış.
   !important taşıyan bir bildirimi yalnız yine !important ile geri
   alabiliriz; specificity tek başına yetmez (düz `display: flex` ile
   denendi, staging'de ölçüldü, kaybetti). Kapsam tek özellik ve dört
   kabuk seçicisiyle sınırlı tutuldu.

   DURUM NOTU (2026-09-16, breakpoint birleştirmesi): sızan ana sayfa
   kuralının eşiği artık 1180px değil 820px (bkz. ROADMAP.md P1 madde 8),
   yani sızma zaten yalnız ≤820px'te oluyor — PageChrome'un kendi istediği
   "≤820 gizli, >820 görünür" davranışıyla artık ÇAKIŞMIYOR. Bu blok bu
   yüzden şu an İŞLEVSİZ (821-1180px aralığında geri alınacak bir sızma
   yok), ama kaldırmak ayrı, dikkatli bir doğrulama gerektirir — riski
   sıfır olduğu için şimdilik dokunulmadı, yalnız kayda geçirildi. */

@media (min-width: 821px) and (max-width: 1180px) {
  .zo-rooms-shell > .zo-page-sidebar,
  .zo-wizard-shell > .zo-page-sidebar,
  .zo-info-shell > .zo-page-sidebar,
  .zo-katalog-shell > .zo-page-sidebar {
    display: flex !important;
  }
}

/* =====================================================================
   0b. Hızlı panel tipografisi — tema prose'u ele geçiriyordu
   =====================================================================

   BULGU (2026-09-03, staging alpha.29, gerçek Chromium): masaüstünde
   sidebar'daki hesap butonuyla açılan hızlı panelin başlığı ("Giriş /
   Üyelik", "Menü", "Paylaş", "Hızlı Ayarlar") 300px genişliğindeki panel
   içinde 38px basılıyordu — sayfanın kendi H1'inden (29.52px) bile büyük.

   Ölçüm, sorunun tam kapsamını gösterdi:
     oz-app-main sayfaları (Odalar / Zikir Oluştur / Nasıl Çalışır /
       İletişim)                          -> panel h2 17px, p 12px  (doğru)
     oz-page-main sayfaları (Faziletli Zikirler / Üyelik)
                                          -> panel h2 38px, p 18px  (hatalı)

   Kök neden: bu iki sayfa tema "site" şablonunu kullandığı için tema'nın
   `.oz-prose h2 / p` kuralları PageChrome'un kendi
   `.zo-page-quick-panel h2` kuralını (0,1,1 eşit özgüllük, tema sonra
   yazdırılıyor) eziyordu. zo-zikir-katalog.css aynı sorunu .zo-page-title
   ve .zo-page-sidebar-note için zaten belgeleyip korumuş; hızlı panel
   gözden kaçmış.

   Değerler icat edilmedi: zo-page-chrome.css'in kendi panel değerleridir.

   Not (2026-09-16): panel başlığı artık `<h2>` değil `<p class="zo-page-
   panel-title">` — bu paneller sayfanın gerçek H1'inden önce DOM'da yer
   alan UI chrome'du ve heading hiyerarşisini bozuyordu (bkz. AUDIT.md
   "SEO Audit 2026-09-16"). Aşağıdaki tema-override seçicisi buna göre
   güncellendi; ölçülen tipografi değerleri DEĞİŞMEDİ. */

body.zo-zikir-katalog-page .zo-page-quick-panel .zo-page-panel-title,
body.zo-info-page .zo-page-quick-panel .zo-page-panel-title {
  margin: 0 0 13px;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: normal;
}

body.zo-zikir-katalog-page .zo-page-quick-panel p,
body.zo-info-page .zo-page-quick-panel p {
  margin: 0 0 13px;
  font-size: 12px;
  line-height: 1.55;
}

/* =====================================================================
   1. Başlık hiyerarşisi — kart başlıkları H1'i geçmemeli
   =====================================================================

   Ölçüm (390px). Uygulama H1'i her sayfada 24px/800
   (.zo-page-title, zo-global-ui.css §1b):

     /nasil-calisir/  .zo-info-faq h2      28px  > H1   (1440'ta 42px)
     /uyelik-ayricaliklari/  kart h2       28px  > H1

   Her ikisinde de hiyerarşi tersine dönüyordu. Değerler zo-global-ui.css
   §2e'deki editör h2 ölçeğiyle -- clamp(20px, 1.55vw, 26px) -- aynı
   aileden seçildi ki sitede tek bir h2 basamağı olsun.

   KAPSAM DIŞI (bilinçli): /faziletli-zikirler/ sayfasındaki
   .zo-katalog-list-heading 15px/700/uppercase. Bu bir display başlık
   değil, bilinçli olarak küçük tutulmuş bir bölüm ETİKETİ
   (zo-zikir-katalog.css satır ~101'deki yorum bunu açıkça belirtiyor).
   Büyütmek mevcut, gerekçelendirilmiş bir tasarım kararını bozardı. */

.zo-info-faq h2 {
  font-size: clamp(20px, 1.55vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* Üyelik sayfası tema "site" şablonunu (oz-page-main) kullandığı için
   kart başlıkları tema prose ölçeğine (28px/600) düşüyordu. */
body.zo-info-page .zo-info-steps article h2,
body.zo-info-page .zo-info-compare article h2,
body.zo-info-page .zo-contact-grid article h2,
body.zo-info-page .zo-contact-note h2 {
  font-size: clamp(18px, 1.25vw, 21px);
  font-weight: 800;
  line-height: 1.26;
  letter-spacing: -0.02em;
}

/* Aynı ailenin kalan iki BÖLÜM başlığı (2026-09-03, staging 3.6.0-alpha.27,
   gerçek Chromium ölçümü). Yukarıdaki liste kart başlıklarını kapsıyordu;
   bu ikisi bölüm başlığı olduğu için .zo-info-faq h2 basamağını kullanır.

   ÖLÇÜM (1440px, sayfa H1'i .zo-page-title = 29.52px):
     /uyelik-ayricaliklari/  .zo-membership-auth-card h2   38px  > H1
     /iletisim/              .zo-contact-form-section h2   30px  > H1
   390px'te de aynı yönde: 28px / 24px'lik H1.

   KÖK NEDEN İKİSİNDE FARKLI, ÇÖZÜM ORTAK:
   - Üyelik: zo-info.css'te `.zo-membership-auth-card h2 { font-size: 20px }`
     ZATEN var, ama temanın `.oz-prose h2` (clamp(28px,4vw,38px)) kuralıyla
     specificity'si EŞİT (0,0,1,1). Bu şablonda tema stylesheet'i eklentiden
     SONRA yazdırıldığı için kaynak sırası temayı kazandırıyor (bkz.
     zo-global-ui.css başlığındaki sıra notu — staging'de <link> sırası
     doğrulandı: zo-info.css index 11, tema styles.css index 14).
   - İletişim: kazanan kural eklentinin kendi `clamp(22px, 3vw, 30px)`
     değeri; üst sınırı H1'in 0.48px üzerine çıkıyor.

   Bu katman her iki stylesheet'ten de SONRA yüklendiği için düz
   specificity yetiyor — !important EKLENMEDİ. Yeni bir ölçek basamağı da
   icat edilmedi; ikisi de §1'deki mevcut .zo-info-faq h2 değerini alır,
   böylece sitede tek bir "bölüm başlığı" basamağı kalır. Üst sınır 26px,
   her iki sayfanın H1'inin (29.52px/24px) altında kalır. */
body.zo-info-page .zo-membership-auth-card h2,
body.zo-info-page .zo-contact-form-section h2 {
  font-size: clamp(20px, 1.55vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* =====================================================================
   2. Mobil alt bar — kesilen etiket
   =====================================================================

   Ölçüm (430px, ana sayfa): "Faziletli Zikirler" etiketi
   white-space:nowrap + overflow:hidden altında scrollWidth 80px /
   clientWidth 58px — yani kelime ortasından, üç nokta bile olmadan
   kesiliyordu. Etiket metni değişmeden iki satıra sığdırıldı.

   DOKUNULMAYAN (kritik): alt barın konum, transform, görünürlük ve
   z-index değerleri `.is-revealed` mekanizmasına aittir (alt bar sayaç
   kartı geçilene kadar bilinçli gizlenir — zo-zikirmatik.js
   updateMobileNavVisibility, tests/counter-ui-contract-test.php). */

@media (max-width: 820px) {
  body .zo-mobile-bottom-nav a span,
  body .zo-mobile-bottom-nav button span,
  body .zo-page-mobile-nav a span,
  body .zo-page-mobile-nav button span {
    max-width: 100%;
    overflow: visible !important;
    white-space: normal !important;
    line-height: 1.06;
    overflow-wrap: break-word;
    hyphens: none;
  }

  /* İki satırlık etiket alt barı taşırmasın diye öğe yüksekliği ve
     bar yüksekliği iki kabukta da aynı değere hizalandı
     (ölçülen: 70px/52px ana sayfa, 72px/54px iç sayfalar). */
  body .zo-mobile-bottom-nav,
  body .zo-page-mobile-nav {
    min-height: 74px !important;
  }

  body .zo-mobile-bottom-nav a,
  body .zo-mobile-bottom-nav button,
  body .zo-page-mobile-nav a,
  body .zo-page-mobile-nav button {
    height: 56px !important;
    min-height: 56px !important;
  }

  /* Merkez birincil eylem kendi 68x68 sözleşmesini korur. */
  body .zo-mobile-bottom-nav .zo-mobile-nav-primary,
  body .zo-page-mobile-nav .zo-page-mobile-nav-primary {
    height: 68px !important;
    min-height: 68px !important;
  }
}

/* =====================================================================
   3. Dokunma hedefleri
   =====================================================================

   WCAG 2.5.8 (Target Size, Minimum) 24x24 CSS px ister.
   Ölçüm (1440px):
     .zo-room-card "Odaya Katıl"        77 x 18  -> başarısız
     .zo-page-sidebar-account            34 x 34  -> geçiyor ama
       komşularından belirgin küçük
   Görsel tasarım değişmeden yalnız tıklanabilir alan büyütüldü. */

.zo-rooms-grid a[href*="room="],
.zo-room-card a[href*="room="] {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding-block: 4px;
}

.zo-page-sidebar-account {
  width: 40px;
  height: 40px;
}

/* =====================================================================
   4. Erişilebilirlik — tek ve görünür focus göstergesi
   =====================================================================

   :focus-visible olduğu için fare tıklamasında görünmez; mevcut görsel
   tasarımı etkilemez, yalnız klavye kullanıcısına konum bildirir. */

.zo-app-shell a:focus-visible,
.zo-app-shell button:focus-visible,
.zo-page-sidebar a:focus-visible,
.zo-page-sidebar button:focus-visible,
.zo-page-mobile-nav a:focus-visible,
.zo-page-mobile-nav button:focus-visible,
.zo-mobile-bottom-nav a:focus-visible,
.zo-mobile-bottom-nav button:focus-visible,
.zo-page-icon-button:focus-visible,
.zo-icon-btn:focus-visible,
.zo-legal-footer a:focus-visible,
#oz-main.oz-app-main > p.wp-block-paragraph a:focus-visible {
  outline: 2px solid #2f8f5b;
  outline-offset: 2px;
  border-radius: 8px;
}

/* =====================================================================
   5. Zikir çekme geri bildirimi (sayaç dokunuş efekti)
   =====================================================================

   Amaç: sayacın arttığını sakin bir şekilde hissettirmek. Zikir ekranı
   bir odaklanma ekranı olduğu için efekt bilinçli olarak KÜÇÜK tutuldu:
   konfeti, ses, renk patlaması veya ekranı kaplayan animasyon YOK.

   İki parça var, ikisi de tek seferlik ve kısa:
     1) halkanın çevresinde tek bir yumuşak dalga (240ms)
     2) sayının çok hafif "nefes alması" (220ms)

   Aynı efekt hem ana sayfa sayacında (.zo-progress-button) hem toplu oda
   sayacında (.zo-room-progress-button) kullanılır — iki ekran aynı
   dokunuş hissini verir.

   Erişilebilirlik: prefers-reduced-motion: reduce altında animasyon
   tamamen kapanır, düzen ve işlev aynen çalışır. Efekt yalnız görseldir;
   sayma mantığına dokunmaz. */

.zo-progress-button,
.zo-room-progress-button {
  position: relative;
}

.zo-progress-button::after,
.zo-room-progress-button::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(47, 143, 91, .55);
  opacity: 0;
  pointer-events: none;
}

.zo-progress-button.is-tick::after,
.zo-room-progress-button.is-tick::after {
  animation: zo-tick-ring .24s ease-out;
}

.zo-progress-button.is-tick .zo-progress-ring,
.zo-room-progress-button.is-tick .zo-room-progress-ring {
  animation: zo-tick-breath .22s ease-out;
}

@keyframes zo-tick-ring {
  0%   { opacity: .55; transform: scale(.97); }
  100% { opacity: 0;   transform: scale(1.06); }
}

@keyframes zo-tick-breath {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.018); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .zo-progress-button.is-tick::after,
  .zo-room-progress-button.is-tick::after,
  .zo-progress-button.is-tick .zo-progress-ring,
  .zo-room-progress-button.is-tick .zo-room-progress-ring {
    animation: none !important;
  }
}