/* Zikir Odası v3.5 UI layer.
 * Loaded after the legacy stylesheet so new responsive work stays isolated.
 */

/* AUDIT.md M4/greeting-kontrast: --zo-muted (#6B6B6B) tasarim sisteminde
   (CLAUDE.md) tanimli degil ve kart-disi zeminde (dogrudan .zo-app-shell
   arka planinda) marjsizdi (~4.82:1, best-case). --zo-dark-text'ten
   (#1E1E1E ile ayni notr gri aile) turetilmis #4A4A4A ile degistirildi,
   kart-disi krem zeminde ~8.00:1 (AAA marji). Yalniz bu secici hedeflendi;
   --zo-muted'in diger kullanimlari kart ici oldugu icin dokunulmadi. */
.zo-greeting small {
  color: #4A4A4A;
}

/* AUDIT.md kontrast taramasi: aktif sidebar nav pill'i (.zo-side-nav
   a.is-active) beyaz metin uzerinde acik ucun (var(--zo-emerald)
   #2F8F5B) verdigi 4.04:1 - AA'nin (4.5:1) altinda. Ayni yesil aileden,
   ayni 135deg yonunde koyulastirilmis bir gradyanla degistirildi; en
   acik durak (#226B48) tek basina ~6.44:1 veriyor. */
.zo-side-nav a.is-active {
  background: linear-gradient(135deg, #226B48, #1D5A3D);
}

/* .zo-card-kicker kontrast duzeltmesi buradan KALDIRILDI (ROADMAP P1
   madde 6). Ayni deger iki dosyada durmasin diye artik kaynagin kendisi
   (zo-zikirmatik.css .zo-card-kicker) --zo-gold-text token'ini kullaniyor;
   token zo-global-ui.css :root icinde tanimli. Davranis ayni, tek kaynak. */

.zo-target-slider {
  position: relative;
}

.zo-target-slider-arrow {
  display: none;
}

.zo-current-zikir-spotlight {
  position: relative;
}

.zo-current-zikir-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding-block: 4px;
}

.zo-current-zikir-heading h2 {
  margin: 0 !important;
}

.zo-custom-zikir-trigger {
  border: 1px solid rgba(47, 143, 91, .28);
  color: var(--zo-dark-green);
  background: rgba(47, 143, 91, .08);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.zo-custom-zikir-trigger:hover,
.zo-custom-zikir-trigger:focus-visible,
.zo-custom-zikir-trigger[aria-expanded="true"] {
  border-color: rgba(47, 143, 91, .55);
  background: rgba(47, 143, 91, .14);
}

.zo-custom-zikir-text-trigger:hover,
.zo-custom-zikir-text-trigger:focus-visible,
.zo-custom-zikir-text-trigger[aria-expanded="true"] {
  border-color: rgba(47, 143, 91, .62);
  color: var(--zo-dark-green);
  background: linear-gradient(135deg, rgba(235, 247, 239, .98), rgba(247, 241, 218, .92));
  box-shadow: 0 9px 20px rgba(15, 42, 34, .10);
  transform: translateY(-1px);
}

.zo-custom-zikir-text-trigger:focus-visible {
  outline: 3px solid rgba(47, 143, 91, .18);
  outline-offset: 2px;
}

.zo-custom-zikir-icon-trigger {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 11px;
  padding: 0;
}

.zo-custom-zikir-trigger .zo-svg-icon {
  width: 17px;
  height: 17px;
}

.zo-custom-zikir-trigger .zo-svg-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zo-custom-zikir-text-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.zo-custom-zikir-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: min(100%, 430px);
  gap: 7px;
  margin: 12px auto 4px;
  padding: 7px;
  border: 1px solid rgba(214, 178, 74, .42);
  border-radius: 15px;
  background: rgba(255, 253, 247, .96);
  box-shadow: 0 12px 28px rgba(15, 42, 34, .09);
}

.zo-custom-zikir-editor[hidden] {
  display: none !important;
}

.zo-custom-zikir-editor input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(214, 178, 74, .42);
  border-radius: 11px;
  outline: none;
  color: var(--zo-dark-green);
  background: #fff;
  font: inherit;
}

.zo-custom-zikir-editor input:focus {
  border-color: var(--zo-emerald);
  box-shadow: 0 0 0 3px rgba(47, 143, 91, .12);
}

.zo-custom-zikir-editor .zo-soft-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 11px;
}

.zo-custom-zikir-error {
  grid-column: 1 / -1;
  padding: 1px 5px 2px;
  color: #9b2c2c;
  font-size: 12px;
  font-weight: 700;
}

/* Bug (QA turu, 2026-09-12): "Özel Sayı" artık window.prompt() değil,
   .zo-custom-zikir-editor ile AYNI kart dilini kullanan inline panel. */
.zo-custom-target-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: min(100%, 320px);
  gap: 7px;
  margin: 10px auto 0;
  padding: 7px;
  border: 1px solid rgba(214, 178, 74, .42);
  border-radius: 15px;
  background: rgba(255, 253, 247, .96);
  box-shadow: 0 12px 28px rgba(15, 42, 34, .09);
}

.zo-custom-target-panel[hidden] {
  display: none !important;
}

.zo-custom-target-panel input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(214, 178, 74, .42);
  border-radius: 11px;
  outline: none;
  color: var(--zo-dark-green);
  background: #fff;
  font: inherit;
}

.zo-custom-target-panel input:focus {
  border-color: var(--zo-emerald);
  box-shadow: 0 0 0 3px rgba(47, 143, 91, .12);
}

.zo-custom-target-panel .zo-soft-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 11px;
}

.zo-custom-target-error {
  grid-column: 1 / -1;
  padding: 1px 5px 2px;
  color: #9b2c2c;
  font-size: 12px;
  font-weight: 700;
}

.zo-zikir-select-card .zo-card-title-row {
  align-items: center;
  gap: 10px;
}

.zo-zikir-list {
  min-height: 0 !important;
  max-height: 250px !important;
  margin-top: 6px !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.zo-zikir-list button {
  min-height: 38px !important;
  height: auto !important;
  padding-block: 6px !important;
  text-align: left !important;
}

.zo-zikir-option-target {
  display: inline-grid;
  min-width: 42px;
  min-height: 25px;
  flex: 0 0 auto;
  place-items: center;
  padding: 3px 7px;
  border: 1px solid rgba(47, 143, 91, .18);
  border-radius: 999px;
  color: var(--zo-dark-green);
  background: rgba(47, 143, 91, .07);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

.zo-zikir-list button.is-active .zo-zikir-option-target {
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
  background: rgba(255, 255, 255, .16);
}

.zo-zikir-option-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.zo-zikir-option-copy strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zo-zikir-option-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: #66736d;
  font-size: clamp(8.5px, 2.3vw, 9.5px);
  font-weight: 600;
  line-height: 1.28;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.zo-zikir-list button.is-active .zo-zikir-option-copy small {
  color: rgba(255, 255, 255, .84);
}

.zo-zikir-library-intro {
  margin: -2px 0 8px;
  color: #6f786f;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.zo-zikir-library-detail {
  display: grid;
  gap: 5px;
  margin-top: 7px;
  padding: 10px 11px;
  border: 1px solid rgba(47, 143, 91, .20);
  border-radius: 16px;
  background:
    radial-gradient(circle at 95% 8%, rgba(214, 178, 74, .16), transparent 34%),
    linear-gradient(145deg, rgba(241, 249, 243, .96), rgba(255, 253, 247, .96));
}

.zo-zikir-detail-head,
.zo-zikir-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.zo-zikir-detail-head > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--zo-dark-green);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zo-zikir-detail-category {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--zo-dark-green);
  background: rgba(47, 143, 91, .10);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.zo-zikir-detail-recitation,
.zo-zikir-detail-meaning {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #65716b;
  font-size: 12px;
  font-weight: 620;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Madde 1: uzun Arapça okunuş (Salât-ı Tefriciye, Seyyidü'l İstiğfar,
   Âyetel Kürsî...) hard line-clamp yerine responsive küçülsün ve gerekirse
   kart içinde kaydırılsın; hiçbir viewport'ta yatay/dikey taşma yapmasın. */
.zo-zikir-detail-recitation {
  display: block;
  -webkit-line-clamp: none;
  max-height: 5.4em;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--zo-dark-green);
  font-size: clamp(8.5px, 2.6vw, 11px);
  font-weight: 720;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.zo-zikir-detail-footer {
  margin-top: 2px;
  padding-top: 7px;
  border-top: 1px solid rgba(47, 143, 91, .13);
}

.zo-zikir-detail-target {
  color: #65716b;
  font-size: 12px;
  font-weight: 750;
}

.zo-zikir-detail-action {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(47, 143, 91, .28);
  border-radius: 10px;
  color: #fff;
  background: var(--zo-emerald);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.zo-zikir-detail-action:hover,
.zo-zikir-detail-action:focus-visible {
  background: var(--zo-dark-green);
  box-shadow: 0 8px 18px rgba(15, 42, 34, .15);
}

.zo-preset-card {
  border: 1px solid rgba(214, 178, 74, .32);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,253,247,.96), rgba(244,249,240,.94));
}

/* Paylaşım bileşeni (Web Share API + kopyala/WhatsApp/Telegram). Yalnızca
   mobil üst menüdeki "Uygulamayı Paylaş" panelinde kullanılır — ana sayfadaki
   ayrı kart kullanıcı isteğiyle kaldırıldı. */
.zo-share-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.zo-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid rgba(47, 143, 91, .24);
  border-radius: 12px;
  color: var(--zo-dark-green);
  background: rgba(255, 255, 255, .78);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.zo-share-btn i {
  font-size: 13px;
}

.zo-share-btn:hover,
.zo-share-btn:focus-visible {
  border-color: rgba(47, 143, 91, .55);
  background: rgba(47, 143, 91, .10);
  transform: translateY(-1px);
}

.zo-share-btn:focus-visible {
  outline: 3px solid rgba(214, 178, 74, .42);
  outline-offset: 2px;
}

.zo-share-native {
  grid-column: 1 / -1;
  color: #fff;
  background: var(--zo-emerald);
  border-color: transparent;
}

.zo-share-native:hover,
.zo-share-native:focus-visible {
  background: var(--zo-dark-green);
  color: #fff;
}

.zo-share-whatsapp i { color: #25D366; }
.zo-share-telegram i { color: #229ED9; }
.zo-share-native i { color: #fff; }

.zo-share-btn[hidden] { display: none !important; }

.zo-share-feedback {
  margin: 8px 0 0;
  padding: 6px 9px;
  border-radius: 10px;
  background: rgba(47, 143, 91, .10);
  color: var(--zo-dark-green);
  font-size: 12px;
  font-weight: 750;
}

.zo-share-feedback[hidden] { display: none; }

/* "Uygulamayı Paylaş" paneli (Destek Ol yerine). Dar panelde butonlar tek
   sütun, tam genişlik ve sola hizalı ikon — daha derli toplu görünür. */
.zo-share-panel .zo-share-actions {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 6px;
}

.zo-share-panel .zo-share-btn {
  justify-content: flex-start;
  min-height: 46px;
  padding-inline: 14px;
  font-size: 12.5px;
}

.zo-share-panel .zo-share-native {
  grid-column: auto;
}

.zo-share-panel .zo-share-feedback {
  margin-top: 6px;
}

/* Madde 10: Hızlı Ayarlar paneli aç/kapa satırları */
.zo-panel-toggles {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.zo-panel-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(47, 143, 91, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .66);
  cursor: pointer;
}

.zo-panel-toggle input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex: 0 0 20px;
  accent-color: var(--zo-emerald);
}

.zo-panel-toggle span {
  display: grid;
  gap: 2px;
}

.zo-panel-toggle strong {
  color: var(--zo-dark-green);
  font-size: 12.5px;
  font-weight: 800;
}

.zo-panel-toggle small {
  color: #66736d;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.zo-sidebar-presets {
  flex: 0 0 auto !important;
  padding: 10px !important;
}

.zo-preset-card h3 {
  margin: 3px 0 7px;
  color: var(--zo-dark-green);
  font-size: 13px;
  line-height: 1.25;
}

.zo-preset-list {
  display: grid;
  gap: 6px;
}

.zo-sidebar-presets .zo-preset-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.zo-preset-list button {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid rgba(47, 143, 91, .20);
  border-radius: 10px;
  color: var(--zo-dark-green);
  background: rgba(255,255,255,.72);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.zo-sidebar-presets .zo-preset-list button {
  min-height: 30px;
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1.15;
}

.zo-sidebar-presets .zo-preset-list .zo-svg-icon {
  display: none;
}

.zo-preset-list button:hover,
.zo-preset-list button:focus-visible {
  border-color: rgba(47, 143, 91, .58);
  background: rgba(47, 143, 91, .09);
}

.zo-preset-list .zo-svg-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

@media (min-width: 761px) {
  .zo-main-panel {
    position: relative !important;
  }

  .zo-floating-panels {
    position: absolute !important;
    top: 64px !important;
    right: 0 !important;
    left: auto !important;
    z-index: 9998 !important;
    display: block !important;
    width: min(360px, calc(100% - 24px)) !important;
  }

  /* Masaüstünde de menu/support/settings panelleri normal akışta grid
     satırlarıydı; kapalı paneller (visibility:hidden ama yer kaplıyor) açık
     paneli aşağı itiyordu (Ayarlar ~475px aşağıda açılıyordu). Hepsi aynı
     orijinde üst üste konur; yalnız .is-open görünür. */
  .zo-quick-panel {
    position: absolute !important;
    inset: 0 0 auto !important;
    width: 100% !important;
    max-height: calc(100dvh - 92px) !important;
    overflow-y: auto !important;
    background: #fffdf7 !important;
    box-shadow: 0 24px 54px rgba(15, 42, 34, .20) !important;
  }
}

@media (min-width: 1181px) {
  .zo-app-shell {
    min-height: 100svh !important;
    padding-block: clamp(20px, 2.6vh, 30px) !important;
    /* Madde 5: dikey ortalama yerine üstten hizalama — scroll kilidi
       kalktığı için içerik viewport'u aşarsa (SEO bloğu, paylaş kartı,
       kullanıcı yazı büyütmesi) üst kısım kırpılmaz, sayfa normal kaydırılır. */
    align-content: start !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
  }

  .zo-sidebar {
    top: 0 !important;
    height: 100% !important;
    align-self: stretch !important;
  }

  .zo-sidebar-daily p {
    margin-bottom: 8px !important;
  }

  /* Paket B: kök neden — flex-basis de aynı değere sabitlenmişti, bu hem
     taban HEM tavandı (flex-shrink:0 + flex-grow:0 + flex-basis:164px). "Günün Zikri" kartının gerçek içeriği (kicker+
     başlık+anlam+kaynak+"Başla" butonu) bu sabit yükseklikten uzun olunca
     .zo-daily-card'ın overflow:hidden'ı (zo-zikirmatik.css) butonu kırpıyordu
     — masaüstünde Başla butonu kartın alt sınırının dışına taşıp görünmez
     oluyordu. Taban (min-height) korunuyor, tavan kaldırıldı: kart artık
     kardeşleri (Oda Kur / Hazır Zikirler) gibi içeriğine göre büyüyebiliyor. */
  .zo-sidebar-daily {
    min-height: 164px !important;
    flex: 0 0 auto !important;
  }

  .zo-sidebar-room-card,
  .zo-sidebar-daily,
  .zo-sidebar-presets {
    margin-top: 12px !important;
  }

  .zo-main-panel {
    align-self: stretch !important;
  }

  .zo-main-header {
    align-items: flex-start !important;
    min-height: 82px !important;
    padding-top: 4px !important;
  }

  .zo-header-copy {
    max-width: 720px;
  }

  .zo-main-header h1 {
    margin-top: 2px !important;
    letter-spacing: -.035em;
  }

  /* AUDIT.md 5.1/5.5: align-items:stretch (dashboard-grid) + height:100%/
     align-self:stretch/grid-template-rows'daki minmax(308px,1fr) tabani
     (.zo-side-stack) kartlari 100dvh kilitli satirin tamamini doldurmaya
     zorluyordu (canli olcum: side-stack 784px). Kullanici onayiyla
     kaldirildi/auto'ya cevrildi; canli A/B testi bu icerik icin side-stack'in
     zaten 784px'e ihtiyaci oldugunu (1fr'nin hic devreye girmedigini)
     gosterdi (AUDIT.md 5.5) - yine de kural artik kazara bir stretch'e degil
     gercek icerige dayaniyor. M5 tek-ekran kilidine (height:100dvh/
     overflow:hidden) dokunulmadi. Detay: AUDIT.md "5.1", "5.5". */
  .zo-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 16px !important;
  }

  .zo-side-stack {
    grid-template-rows: auto auto auto !important;
    gap: 12px !important;
  }

  .zo-zikir-select-card {
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* AUDIT.md 5.2: height:100% + justify-content:center, TALEP 1'deki
     stretch (784px) ile birlesince sayac kartinin gercek icerigini
     (~674px) kutunun ortasina yerlestiriyor, ustte/altta olu bosluk
     birakiyordu. Salt justify-content'i kaldirmak yetmezdi (bosluk
     alta kayardi) - height:100% de kaldirildi ki kart icerige gore
     kuculsun. Detay: AUDIT.md "5.2". */
  .zo-counter-card {
    display: flex !important;
    flex-direction: column !important;
    padding-block: 24px !important;
  }

  .zo-current-zikir-spotlight {
    margin-top: 14px !important;
  }

  .zo-zikir-select-card .zo-zikir-list {
    min-height: 126px !important;
    height: 126px !important;
    max-height: 126px !important;
    gap: 5px !important;
  }

  .zo-zikir-select-card .zo-zikir-list button {
    min-height: 36px !important;
    padding: 5px 10px !important;
  }

  /* M4: overlay ~%76-80'den ~%60'a indirildi (AUDIT.md 4.7).
     %50'ye inilmedi - .zo-greeting small (#6B6B6B) icin gercek fotograf
     pikseli olculemedigi icin (CORS/screenshot kisiti) daha fazla
     azaltmanin AA'yi gececegi kanitlanamadi. Detay: AUDIT.md "M4". */
  .zo-app-shell::before {
    background:
      linear-gradient(90deg, rgba(248,243,231,.62) 0%, rgba(248,243,231,.58) 48%, rgba(248,243,231,.60) 100%),
      var(--zo-bg-desktop, var(--zo-bg-image)) center top / cover no-repeat !important;
  }
}

/* Madde 5: eski tek-ekran scroll kilidi (html/body overflow-y:hidden +
   .zo-app-shell height/max-height:100dvh + overflow:hidden) KALDIRILDI.
   Gerekçe: ana sayfanın altına SEO içeriği eklenecek, sayfa serbestçe
   uzayıp scroll edilebilmeli. Kilit yerine yalnız yüksek/geniş masaüstünde
   uygulama kabuğu viewport'u doldurur (min-height) — üstten hizalı kart
   düzeni değişmez, içerik taşarsa sayfa normal şekilde kaydırılır. */
@media (min-width: 1181px) and (min-height: 940px) {
  body.zo-zikirmatik-page .zo-app-shell {
    min-height: 100dvh !important;
  }
}

@media (min-width: 761px) and (max-width: 820px) {
  .zo-app-shell {
    min-height: 100svh !important;
    padding: 22px clamp(16px, 3vw, 34px) 38px !important;
  }

  .zo-main-panel {
    width: min(100%, 1040px) !important;
    margin-inline: auto !important;
  }

  .zo-main-header {
    margin-bottom: 18px !important;
  }

  .zo-dashboard-grid {
    align-items: stretch !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr) !important;
  }

  .zo-side-stack {
    height: 100% !important;
    grid-template-rows: minmax(250px, 1fr) auto auto !important;
  }

  .zo-zikir-select-card {
    height: 100% !important;
  }

  .zo-target-chips button,
  .zo-action-btn,
  .zo-custom-zikir-editor input,
  .zo-custom-zikir-editor .zo-soft-btn,
  .zo-custom-zikir-text-trigger,
  .zo-zikir-detail-action,
  .zo-preset-list button {
    min-height: 44px !important;
  }

  .zo-custom-zikir-icon-trigger {
    width: 44px;
    min-width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
}

@media (max-width: 760px) {
  body .zo-app-shell {
    width: 100% !important;
    max-width: none !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: 10px 10px calc(108px + env(safe-area-inset-bottom)) !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    background: transparent !important;
  }

  body .zo-app-shell::before {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    opacity: 1 !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  body .zo-mobile-overlay-light::before {
    background-image:
      linear-gradient(180deg, rgba(248,243,231,.36) 0%, rgba(248,243,231,.24) 52%, rgba(248,243,231,.46) 100%),
      var(--zo-bg-mobile, var(--zo-bg-tablet, var(--zo-bg-image))) !important;
  }

  body .zo-mobile-overlay-medium::before {
    background-image:
      linear-gradient(180deg, rgba(248,243,231,.54) 0%, rgba(248,243,231,.40) 52%, rgba(248,243,231,.60) 100%),
      var(--zo-bg-mobile, var(--zo-bg-tablet, var(--zo-bg-image))) !important;
  }

  body .zo-counter-card,
  body .zo-zikir-select-card,
  body .zo-progress-insight-card {
    background: rgba(255, 253, 247, .90) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  body .zo-target-slider {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 5px;
    margin-bottom: 0;
  }

  body .zo-target-chips {
    grid-column: 2;
    align-self: center;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    scroll-padding-inline: 0;
  }

  body .zo-target-chips button,
  body .zo-action-btn {
    min-height: 44px !important;
  }

  body .zo-target-slider-arrow {
    position: static;
    z-index: 3;
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(214, 178, 74, .48);
    border-radius: 9px;
    color: var(--zo-dark-green);
    background: rgba(255, 253, 247, .96);
    box-shadow: 0 3px 9px rgba(15, 42, 34, .08);
    font-size: 12px;
    line-height: 1;
  }

  body .zo-target-slider-arrow i {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    line-height: 1;
  }

  body .zo-target-slider-arrow i::before {
    display: block;
    line-height: 1;
  }

  body .zo-target-slider-prev { grid-column: 1; }
  body .zo-target-slider-next { grid-column: 3; }

  body .zo-target-slider-arrow:disabled {
    opacity: .38;
    box-shadow: none;
  }

  body .zo-current-zikir-spotlight {
    min-height: 0 !important;
    margin-top: 4px !important;
    padding-top: 0 !important;
  }

  body .zo-current-zikir-heading {
    gap: 8px;
  }

  body .zo-current-zikir-heading h2 {
    max-width: calc(100% - 52px);
    font-size: clamp(26px, 8.4vw, 38px) !important;
    overflow-wrap: anywhere;
  }

  body .zo-custom-zikir-icon-trigger {
    width: 44px;
    min-width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  body .zo-custom-zikir-editor {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 74px;
    margin-top: 10px;
  }

  body .zo-custom-zikir-editor input,
  body .zo-custom-zikir-editor .zo-soft-btn {
    min-height: 44px;
  }

  body .zo-zikir-select-card .zo-card-title-row {
    flex-wrap: wrap;
  }

  body .zo-custom-zikir-text-trigger {
    min-height: 44px;
    margin-left: auto;
  }

  /* Madde 3: legacy stil <=1180px'te .zo-zikir-list'i yatay flex seridine
     (display:flex + button min-width:150px) ceviriyordu; UI katmani yalniz
     grid-template-columns tanimladigi icin bu kural etkisizdi ve mobilde
     zikir adlari yatay taşma/kesme yaşıyordu. Mobilde acikca dikey tek
     sutun listeye donuluyor, buton icerigi satir satir sarabiliyor. */
  body .zo-zikir-list {
    display: grid !important;
    min-height: 0 !important;
    height: 148px !important;
    max-height: 148px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    gap: 6px !important;
    padding-right: 2px !important;
  }

  body .zo-zikir-list button {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    text-align: left !important;
  }

  body .zo-zikir-option-copy {
    min-width: 0;
  }

  /* Uzun zikir adlari (ör. "Lâ havle ve lâ kuvvete illâ billâh") mobilde
     kesilmesin: nowrap/ellipsis kaldirilir, metin sarabilir. */
  body .zo-zikir-option-copy strong {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
    font-size: 13px;
  }

  body .zo-zikir-option-copy small {
    -webkit-line-clamp: 3;
    font-size: 12px;
  }

  body .zo-zikir-library-intro {
    width: 100%;
    margin: -3px 0 7px;
  }

  body .zo-share-actions {
    gap: 7px;
  }

  body .zo-share-btn {
    min-height: 46px;
    font-size: 12px;
  }

  body .zo-zikir-library-detail {
    padding: 12px;
  }

  body .zo-zikir-detail-action,
  body .zo-mobile-support-grid .zo-preset-list button,
  body .zo-panel-menu a,
  body .zo-quick-panel button {
    min-height: 44px !important;
  }

  body .zo-mobile-top-actions .zo-icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* ROADMAP P1 madde 1 — 44x44 dokunma hedefi, ikinci tur.
     390px'te ana sayfada ölçüldü: marka bağlantısı 36px, "Oda Kur" ve
     "Başla" küçük CTA'ları 40px. Yalnız mobil yükseklik yükseltilir;
     .zo-btn-small'ın masaüstü ölçüsü (40px) değişmez. */
  /* `!important` burada zorunlu (yeni borç değil, mevcut borcu aşmak için):
     zo-zikirmatik.css:3566 `.zo-sidebar-room-card .zo-btn-small` için
     `min-height: 40px !important` tanımlıyor; important olmayan hiçbir kural
     bunu geçemiyor (tarayıcıda ölçülerek doğrulandı). Hemen yukarıdaki
     mobil 44px bloğu da aynı nedenle `!important` kullanıyor. */
  body .zo-mobile-brand,
  body .zo-btn-small,
  body .zo-sidebar-room-card .zo-btn-small {
    min-height: 44px !important;
  }

  body .zo-mobile-support-grid .zo-preset-card {
    grid-column: 1 / -1;
    padding: 17px !important;
  }

  body .zo-mobile-support-grid .zo-preset-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .zo-mobile-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    z-index: 9997 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 72px minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    grid-auto-flow: column !important;
    width: min(calc(100vw - 20px), 430px) !important;
    min-height: 70px !important;
    padding: 8px !important;
    overflow: visible !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, calc(100% + 26px)) !important;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
  }

  body .zo-mobile-bottom-nav.is-revealed {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) !important;
  }

  body .zo-mobile-bottom-nav > * {
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body .zo-mobile-bottom-nav a,
  body .zo-mobile-bottom-nav button,
  body .zo-mobile-bottom-nav .zo-mobile-daily-btn {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 4px 2px !important;
    border-radius: 16px !important;
    color: #5c655f !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body .zo-mobile-bottom-nav .zo-mobile-nav-primary {
    width: 68px !important;
    height: 68px !important;
    min-height: 68px !important;
    align-self: center !important;
    margin: -18px auto 0 !important;
    padding: 7px 5px 6px !important;
    border-radius: 22px !important;
    color: #fff !important;
    background: var(--zo-emerald) !important;
    box-shadow: 0 14px 28px rgba(47, 143, 91, .28) !important;
  }

  body .zo-mobile-bottom-nav .zo-mobile-nav-primary .zo-svg-icon {
    width: 25px !important;
    height: 25px !important;
  }

  body .zo-mobile-bottom-nav .zo-mobile-nav-primary span {
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  body .zo-mobile-bottom-nav .zo-mobile-daily-btn .zo-svg-icon {
    width: 20px !important;
    height: 20px !important;
  }

  body .zo-mobile-bottom-nav a.is-active {
    color: var(--zo-emerald) !important;
    background: rgba(47, 143, 91, .08) !important;
  }

  /* fix/mobile-nav-rework: tüm hücrenin ton değişimi zaten aktif sekmeyi
     işaretliyordu (ve ikon+etiketle birlikte ortalıydı) ama daha net bir
     "app" hissi için ikon+etiketin tam altında küçük bir gösterge çizgisi
     eklendi. Merkez CTA (zo-mobile-nav-primary) zaten kendi yükseltilmiş
     dairesiyle ayırt edici olduğu için hariç tutuldu. */
  body .zo-mobile-bottom-nav a:not(.zo-mobile-nav-primary) {
    position: relative;
  }

  body .zo-mobile-bottom-nav a.is-active:not(.zo-mobile-nav-primary)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: var(--zo-emerald);
  }

  body .zo-mobile-bottom-nav a:not(.zo-mobile-nav-primary):hover,
  body .zo-mobile-bottom-nav button:hover,
  body .zo-mobile-bottom-nav a:not(.zo-mobile-nav-primary):focus-visible,
  body .zo-mobile-bottom-nav button:focus-visible {
    color: var(--zo-dark-green) !important;
    background: rgba(214, 178, 74, .12) !important;
  }

  /* Madde 10 — KÖK NEDEN düzeltmesi (z-index/margin hack'i DEĞİL):
     1) .zo-floating-panels position:absolute idi ve offset parent'ı sticky
        topbar'ın ALTINDAN başlayan .zo-main-panel'di → panel topbar'dan
        ~90px aşağıda açılıyordu. Artık viewport'a fixed, topbar'ın hemen
        altına sabitlenmiş (Wizard'daki .zo-page-floating-panels ile aynı
        desen).
     2) menu/support/settings panelleri normal akışta grid satırlarıydı;
        kapalı paneller (visibility:hidden ama yer kaplıyor) açık paneli
        aşağı itiyordu — 3. panel (Ayarlar) en çok kayan. Artık hepsi aynı
        orijinde üst üste (position:absolute; inset:0 0 auto). */
  /* 3) transform SIFIRLANMALI. Bu blok paneli eski "ortala" düzeninden
        (zo-zikirmatik.css @media max-width:760px: left:50% + transform:
        translateX(-50%)) right:10px/left:auto düzenine geçiriyor, ama o
        kuraldaki transform'u devralıyordu: panel önce doğru yere konup
        sonra 185px sola kayıyordu. Ölçüm (2026-09-02, gerçek Chromium):
        390px'te panel [-175..195] — yani menu/paylas/hesap/ayarlar
        panellerinin sol yarisi ekran disinda kaliyordu; 320/360/390/414
        genisliklerinin HEPSINDE kirpiliyordu. left/right override edildigi
        icin transform'un da burada kapatilmasi gerekiyor. */
  body .zo-floating-panels {
    position: fixed !important;
    top: calc(66px + env(safe-area-inset-top)) !important;
    right: 10px !important;
    left: auto !important;
    transform: none !important;
    z-index: 9998 !important;
    display: block !important;
    width: min(calc(100vw - 20px), 380px) !important;
  }

  body .zo-quick-panel {
    position: absolute !important;
    inset: 0 0 auto !important;
    width: 100% !important;
    max-height: calc(100dvh - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 430px) {
  body .zo-counter-card {
    padding-inline: 14px !important;
  }

  body .zo-target-chips {
    gap: 6px !important;
  }

  body .zo-target-chips button {
    flex-basis: calc((100% - 12px) / 3) !important;
    min-width: calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
    padding-inline: 3px !important;
    font-size: 12px !important;
  }

  body .zo-mobile-bottom-nav span {
    max-width: 100% !important;
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zo-custom-zikir-trigger,
  .zo-target-chips,
  .zo-mobile-bottom-nav {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* ===== Dokunmatik cihaz tabanı (ROADMAP P1 madde 1, tablet boşluğu) =====
 *
 * Sayaç ekranının 44px dokunma tabanı yalnız `@media (max-width: 760px)`
 * içinde tanımlıydı. 768x1024 (tablet dikey) gerçek bir DOKUNMATİK ekran
 * ama 760px'in üstünde kaldığı için taban hiç uygulanmıyordu; ölçümde
 * hedef çipleri (33/99/100/1000/∞/Özel Sayı) 39px, "Geri Al"/"Sıfırla"
 * 42px, marka bağlantısı 39.3px çıktı.
 *
 * Genişlik yerine GİRDİ TÜRÜ sorgulanıyor: `pointer: coarse` yalnız parmak/
 * kalem gibi kaba işaretçilerde eşleşir, faredeki hiçbir genişlikte
 * eşleşmez. Böylece mevcut 760px/761px breakpoint sözleşmeleri (counter-ui
 * contract testinde kilitli) hiç değiştirilmeden tablet boşluğu kapanır ve
 * masaüstü görünümü etkilenmez. Chrome'da ölçülerek doğrulandı:
 * touch emülasyonu kapalıyken pointer:fine, açıkken pointer:coarse.
 *
 * `!important` gerekli: hedeflenen kuralların bir kısmı zo-zikirmatik.css
 * içinde zaten `!important` ile tanımlı (ör. .zo-target-chips button 39px),
 * onlar olmadan bu taban uygulanmıyor. */
@media (pointer: coarse) {
  body .zo-target-chips button,
  body .zo-action-btn,
  body .zo-mobile-brand,
  body .zo-btn-small,
  body .zo-sidebar-room-card .zo-btn-small {
    min-height: 44px !important;
  }
}


/* ===== Ana sayfa: WordPress editör içeriğini kaplayan yinelenen arka plan
 * katmanı kaldırıldı (2026-09-02, gerçek Chrome + CDP ile doğrulandı) =====
 *
 * BULGU: Ana sayfada `[zo_zikirmatik]` çıktısından SONRA gelen WordPress
 * editör içeriği (uzun "Online zikirmatik nedir?..." SEO metni, 71 blok)
 * DOM'da vardı, `visibility:visible`, `opacity:1`, kontrastı yerindeydi ve
 * hit-test bile onu buluyordu — ama HİÇBİR genişlikte EKRANA ÇİZİLMİYORDU.
 * Blokları sarı zemin + kırmızı çerçeve + siyah metne zorlayınca da
 * görünmediler; yani sorun kontrast değil, üstünü kaplayan opak bir katman.
 *
 * KÖK NEDEN: `.zo-app-shell::before` `position:fixed; inset:0` ile TÜM
 * VIEWPORT'u kaplayan opak krem gradyan + arka plan görseli çiziyor.
 * `.zo-app-shell` ise `position:relative` + `isolation:isolate` taşıyor,
 * yani KENDİ stacking context'ini kuruyor ve #oz-main'in context'inde
 * konumlandırılmış bir öğe olarak, konumlandırılmamış kardeşlerinin
 * (h2.wp-block-heading / p.wp-block-paragraph) ÜSTÜNDE, bölünmez tek bir
 * katman olarak boyanıyor. Shell viewport'tan taşan fixed arka planını da
 * beraberinde taşıdığı için, sayfanın geri kalanındaki editör içeriği
 * sürekli bu katmanın altında kalıyor.
 *
 * NEDEN z-index ÇÖZMÜYOR: mobil alt navigasyon (.zo-mobile-bottom-nav,
 * z-index:9997) `.zo-app-shell`in İÇİNDE. Shell `isolation:isolate` ile
 * bölünmez bir birim olarak boyandığından, kardeş bloklara verilecek her
 * z-index onları shell'in arka planının üstüne çıkarırken AYNI ANDA alt
 * navigasyonun da üstüne çıkarıyor (390px'te ölçülerek görüldü: metin
 * navigasyonun içinden geçiyordu). Bu yüzden #oz-main'deki mevcut
 * `.oz-app-main{z-index:1}` köprüsü de tek başına yetmiyor — sorun
 * #oz-main ile body arasında değil, shell ile KARDEŞLERİ arasında.
 *
 * DÜZELTME: shell'in bu katmanı zaten YİNELENMİŞ durumda —
 * `body.zo-global-shell::before` (zo-global-ui.css) aynı görseli aynı
 * gradyanla, doğru `z-index:-1` ile ve aynı ayar sınıflarını
 * (mobile-bg-off / bg-position / overlay) onurlandırarak çiziyor; arka plan
 * URL'leri GlobalUiModule::printBackgroundBridge() tarafından body üzerine
 * yazılıyor. Ölçüm: yalnız bu pseudo-element gizlendiğinde SEO içeriği
 * anında ortaya çıkıyor ve arka plan görseli (kemer, yapraklar, tesbih)
 * masaüstünde de mobilde de DEĞİŞMEDEN kalıyor.
 *
 * `!important` gerekli: hedeflenen kuralların tamamı (zo-zikirmatik.css
 * içinde 17 ayrı breakpoint kopyası) zaten `!important` ile tanımlı.
 * NOT: bu kural devreye girdiği için o 17 kopya artık etkisizdir; ayrı bir
 * temizlik işi olarak kaldırılmaları ROADMAP'e yazıldı (davranış değişmez). */
.zo-app-shell::before {
  display: none !important;
}

/* ===== Ana sayfa sol kenar hızlı erişim sekmeleri (fix/side-quick-tabs-return,
 * 2026-09-14) =====
 *
 * Tarihçe: iki dikey (writing-mode: vertical-rl) sekme -> ikon buna karşı
 * ayrıca -90deg döndürülüyordu (.zo-side-quick-tab i), ikon "ters" duruyormuş
 * gibi algılanıyordu -> tek "+" FAB'a çevrildi (fix/side-quick-fab) -> FAB
 * mobilde alt navigasyonun kendi "+"ıyla çakışıyordu, kullanıcı iki buton
 * deseninin GERİ gelmesini istedi. Bu sürüm: YATAY düzen (ikon solda, metin
 * sağda, tek satır) — writing-mode/rotate YOK, eski bug'ın kök nedeni hiç
 * kullanılmıyor. Yalnız tablet+mobilde görünür (kullanıcı isteği: masaüstünde
 * bu iki buton yerine hiçbir şey yok, sidebar zaten aynı linkleri taşıyor).
 * Saf <a> bağlantıları — yeni JS akışı gerekmez. z-index mobil alt
 * navigasyonun (9997) ve hızlı panellerin (9998) altında tutuldu ki onları
 * açık olduklarında kapatmasın. */
.zo-side-quick-tabs {
  display: none;
  position: fixed;
  /* Kullanıcının verdiği referans desen (asılı WhatsApp/fiyat-hesapla
     sekmeleri): ekranın kenarına YASLANMIŞ "dilcik" görünümü — left:0,
     yalnız içeriğe bakan kenar yuvarlak. Dikey eksende top:50% (viewport'a
     göre sabit) korunuyor: bottom-ankraj denenmiş ama sayfa içi akışa göre
     konumlanan "Geri Al/+/Sıfırla" satırıyla mobilde çakışmıştı. */
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* 2026-09-14 (kullanıcı isteği, referans görsel): dikey metin — reference
   koddaki writing-mode:vertical-rl deseni. ÖNCEKİ turda (fix/side-quick-fab
   öncesi) tam bu kombinasyon ikonun "ters" görünmesine yol açmıştı (ikon
   da yazıyla birlikte dönüyordu, `.zo-side-quick-tab i { transform:
   rotate(-90deg) }` ile telafi denenmiş ama yanlış çıkmıştı). Bu sefer
   İKON dönmüyor: yalnız metin (span) vertical-rl alıyor, ikona ayrı bir
   writing-mode:horizontal-tb ile normal (yatay, dik) kalması sağlanıyor —
   ikon rotasyonunun kök nedenini (yazıyla birlikte istemsiz dönmesi) hiç
   oluşturmuyor. */
.zo-side-quick-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 150px;
  padding: 16px 10px;
  /* Sol (ekran kenarına yaslanan) kenar düz, sağ (içeriğe bakan) kenar
     yuvarlak — referans koddaki 12px 0 0 12px'in (sağa yaslı) sol-yaslı
     karşılığı. */
  border-radius: 0 14px 14px 0;
  color: #fffdf7 !important;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none !important;
  box-shadow: 4px 6px 15px rgba(15, 42, 34, .22);
  transition: transform .2s ease;
}

.zo-side-quick-tab:hover,
.zo-side-quick-tab:focus-visible {
  transform: translateX(5px);
  color: #fffdf7 !important;
}

.zo-side-quick-tab span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.zo-side-quick-tab i {
  writing-mode: horizontal-tb;
  flex-shrink: 0;
  font-size: 17px;
}

.zo-side-quick-tab-wizard {
  background: var(--zo-emerald, #2f8f5b);
}

.zo-side-quick-tab-rooms {
  background: var(--zo-dark-green, #0f2a22);
}

/* Bug (production QA, 2026-09-16): sekmeler `position:fixed; left:0` ile
 * viewport'a göre SABİT bir dikey bantta duruyor — sayfa kaydırıldığında
 * o bandın altına HANGİ kart gelirse (Ortak Hedef, Günün Zikri, Zikir Seç…)
 * onun sol kenarındaki metni kapatıyordu (canlıda ölçüldü: "Ortak Hedef"
 * "Drtak Hedef", "Zikir Odası Kur" "ikir Odası Kur" gibi kırpılıyordu) —
 * çünkü `.zo-app-shell`'in mevcut sol boşluğu (10px, tüm alt breakpoint'lerde
 * ölçüldü) sekmenin gerçek genişliğinden (tablet 41.25px, mobil 31.5px,
 * canlıda getBoundingClientRect ile ölçüldü) çok daha dar. Düzeltme:
 * sekmeler görünürken kabuğa, sekme genişliğini karşılayan ek sol
 * boşluk verildi — yalnız ana sayfada (body.zo-zikirmatik-page), yalnız bu
 * iki breakpoint'te, yalnız padding-left (sağ boşluk/genel düzen dokunulmadı).
 * `!important`: hedef kural zaten `!important` zincirinde (bkz. dosyanın bu
 * bloktan önceki `.zo-app-shell` breakpoint yığını), specificity yarışını
 * kaybetmemek için aynı silah kullanıldı.
 *
 * 2026-09-16 (breakpoint birleştirme): sekmelerin görünürlük eşiği
 * (≤1180px) ve bu padding-left telafisi, ana sayfanın mobil/masaüstü geçiş
 * noktasıyla (zo-zikirmatik.css) birebir birlikte ≤820px'e taşındı — bkz.
 * ROADMAP.md P1 madde 8. 820px üstünde artık masaüstü sidebar'ı görünür
 * olduğu için yüzen sekmelere gerek kalmıyor; ≤760px alt katmanı
 * (boyut/aralık ayarları) değişmedi. */
@media (max-width: 820px) {
  .zo-side-quick-tabs {
    display: flex;
  }

  body.zo-zikirmatik-page .zo-app-shell {
    padding-left: 52px !important;
  }
}

@media (max-width: 760px) {
  .zo-side-quick-tabs {
    top: 56%;
    gap: 8px;
  }

  .zo-side-quick-tab {
    min-height: 116px;
    padding: 11px 7px;
    gap: 6px;
    font-size: 12px;
    box-shadow: 2px 4px 10px rgba(15, 42, 34, .18);
  }

  .zo-side-quick-tab i {
    font-size: 14px;
  }

  body.zo-zikirmatik-page .zo-app-shell {
    padding-left: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zo-side-quick-tab {
    transition: none;
  }
}

/* Bug (staging QA, 2026-09-16, aynı turun devamı): yukarıdaki .zo-app-shell
 * düzeltmesi SEO metnini KAPSAMIYORDU — o blok #oz-main.oz-app-main içinde
 * .zo-app-shell'in ÇIPLAK KARDEŞİDİR (bkz. zo-global-ui.css §2c), padding
 * miras almaz. Canlıda/staging'de ölçüldü: "Online zikirmatik nedir?"
 * paragraflarının her satırının BAŞINDAKİ 1-3 harf sekmenin altında
 * kayboluyordu ("saymak" -> "aymak", "Odası'nın" -> "asası'nın"). Aynı
 * genişlik hesaplarıyla (tablet 52px, mobil 40px) bu konteynere de sol
 * boşluk eklendi — yalnız sol (padding-inline'ın sağ tarafı/genel
 * hizalama dokunulmadı), yalnız ana sayfada, yalnız sekmelerin göründüğü
 * aralıkta (2026-09-16 breakpoint birleştirmesiyle ≤820px — yukarıdaki
 * .zo-side-quick-tabs görünürlük eşiğiyle birebir aynı). */
@media (max-width: 820px) {
  body.zo-zikirmatik-page #oz-main.oz-app-main > [class*="wp-block"] {
    padding-left: 52px !important;
  }
}

@media (max-width: 760px) {
  body.zo-zikirmatik-page #oz-main.oz-app-main > [class*="wp-block"] {
    padding-left: 40px !important;
  }
}

/* ===== Zikir seçimi pop-up'ı (fix/zikir-select-popup) =====
 *
 * Kalem ikonu artık küçük bir inline paneli değil, hem hazır listeyi hem
 * "kendi zikrini yaz" alanını sekmeler halinde barındıran gerçek bir modal
 * dialog'u açıyor (bkz. zikir-odasi-core.php #zo-zikir-select-modal-wrap).
 * Sidebar'daki eski her zaman açık liste kartı, aynı modali açan kompakt
 * bir özet karta dönüştü — .zo-zikir-list tek DOM örneği artık modal
 * içinde yaşıyor (data-zo-zikir-list JS sözleşmesi değişmedi).
 *
 * .zo-zikir-select-card için legacy dosyada (zo-zikirmatik.css) onlarca
 * breakpoint'te height:100% / grid-template-rows: minmax(250px, 1fr) türü
 * kural var (eski uzun listeyi sidebar grid satırına yaymak içindi). O
 * kurallara dokunmuyoruz (etki alanı çok geniş, risk yüksek); bunun yerine
 * .zo-zikir-select-summary kartın içeriğini, kart ne kadar yüksek
 * zorlanırsa zorlansın dikeyde ortalıyor.
 */
.zo-zikir-select-summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.zo-zikir-summary-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(232, 221, 200, .92);
  border-radius: 16px;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.zo-zikir-summary-trigger:hover,
.zo-zikir-summary-trigger:focus-visible,
.zo-zikir-summary-trigger[aria-expanded="true"] {
  border-color: rgba(47, 143, 91, .55);
  background: rgba(47, 143, 91, .1);
  transform: translateY(-1px);
}

.zo-zikir-summary-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.zo-zikir-summary-copy small {
  color: #6b6b6b;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.zo-zikir-summary-copy strong {
  overflow: hidden;
  color: var(--zo-dark-green, #0f2a22);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zo-zikir-summary-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: var(--zo-emerald, #2f8f5b);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
}

.zo-zikir-summary-cta .zo-svg-icon {
  width: 15px;
  height: 15px;
}

/* Modal: sabit tam ekran overlay. z-index 9999 — mobil alt navigasyon
   (9997) ve hızlı paneller (9998) katmanlarının üstünde, gerçek bir
   dialog gibi her şeyi kapatmalı. */
.zo-zikir-select-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

.zo-zikir-select-modal-wrap.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.zo-zikir-select-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(15, 42, 34, .48);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.zo-zikir-select-modal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(440px, 100%);
  max-height: min(640px, 86vh);
  padding: 20px;
  border: 1px solid rgba(232, 221, 200, .92);
  border-radius: 24px;
  background: #fffdf7;
  box-shadow: 0 30px 80px rgba(15, 42, 34, .32);
  overflow: hidden;
  transform: translateY(10px) scale(.98);
  transition: transform .2s ease;
}

.zo-zikir-select-modal-wrap.is-open .zo-zikir-select-modal {
  transform: translateY(0) scale(1);
}

.zo-zikir-select-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.zo-zikir-select-modal-header h2 {
  margin: 0;
  color: var(--zo-dark-green, #0f2a22);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 19px;
  font-weight: 800;
}

.zo-zikir-select-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 42, 34, .07);
  color: var(--zo-dark-green, #0f2a22);
  cursor: pointer;
  transition: background .15s ease;
}

.zo-zikir-select-modal-close:hover,
.zo-zikir-select-modal-close:focus-visible {
  background: rgba(15, 42, 34, .14);
}

.zo-zikir-select-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(15, 42, 34, .05);
}

.zo-zikir-select-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  padding: 10px 8px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #6b6b6b;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.zo-zikir-select-tabs button.is-active {
  background: var(--zo-emerald, #2f8f5b);
  color: #fffdf7;
}

.zo-zikir-select-panel[hidden] {
  display: none !important;
}

.zo-zikir-select-panel {
  /* fix/modal-scroll: min-height:0, tek başına max-height'a güvenmekten
     (flex-shrink hesaplamasını bazı tarayıcılarda tetiklemeyebiliyordu,
     içerik modal dışına taşıp scroll çalışmıyordu) daha güvenilir "kalan
     alanı doldur, taşanı kendi içinde kaydır" deseni — bu KORUNDU.
     2026-09-16 QA: flex-basis'i 0 (flex: 1 1 0) tutmak AYRI, ciddi bir
     regresyon açıyordu — .zo-zikir-select-modal'ın kendi yüksekliği
     `max-height` ile sınırlı ama `height` YOK (içeriğe göre auto
     boyutlanıyor). flex-grow yalnız zaten var olan boş alanı dağıtır;
     auto-boyutlu bir kapta dağıtılacak boş alan hiç yok, bu yüzden
     flex-basis:0 ile panel her zaman TAM 0 yüksekliğe render oluyordu —
     "Zikirni Seç" modalı hem Hazırdan Seç hem Kendi Zikrini Yaz
     sekmesinde tamamen BOŞ görünüyordu (gerçek DOM içerik doluydu,
     yalnız 0 yükseklikte kırpılıyordu). flex-basis:auto, panelin önce
     kendi doğal içerik yüksekliğini almasını sağlıyor; içerik gerçekten
     640px/86vh sınırını aşarsa flex-shrink:1 + min-height:0 zaten devrede
     olduğu için üsteki eski scroll-fix hâlâ aynen çalışıyor. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.zo-zikir-select-panel .zo-zikir-list {
  max-height: none !important;
}

.zo-zikir-select-panel .zo-custom-zikir-editor {
  margin: 0;
}

@media (max-width: 480px) {
  .zo-zikir-select-modal {
    max-height: min(560px, 82vh);
    padding: 16px;
  }
}

/* fix/branded-confirm-dialog (2026-09-15): window.confirm() yerine geçen
 * markalı onay modalı — .zo-zikir-select-modal-wrap ile AYNI iskelet/
 * animasyon deseni, farklı (daha küçük, iki-buton) bir içerik kartı. */
.zo-confirm-dialog-wrap {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

.zo-confirm-dialog-wrap.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.zo-confirm-dialog-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(15, 42, 34, .48);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.zo-confirm-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, 100%);
  padding: 24px;
  border: 1px solid rgba(232, 221, 200, .92);
  border-radius: 24px;
  background: #fffdf7;
  box-shadow: 0 30px 80px rgba(15, 42, 34, .32);
  transform: translateY(10px) scale(.98);
  transition: transform .2s ease;
}

.zo-confirm-dialog-wrap.is-open .zo-confirm-dialog {
  transform: translateY(0) scale(1);
}

.zo-confirm-dialog h2 {
  margin: 0;
  color: var(--zo-dark-green, #0f2a22);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.zo-confirm-dialog p {
  margin: 0;
  color: #4a5550;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.zo-confirm-dialog-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.zo-confirm-dialog-actions button {
  flex: 1 1 0;
  min-height: 46px;
  border-radius: 14px;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.zo-confirm-dialog-cancel {
  border: 1px solid rgba(15, 42, 34, .14);
  background: rgba(15, 42, 34, .04);
  color: var(--zo-dark-green, #0f2a22);
}

.zo-confirm-dialog-cancel:hover,
.zo-confirm-dialog-cancel:focus-visible {
  background: rgba(15, 42, 34, .09);
}

.zo-confirm-dialog-ok {
  border: 1px solid transparent;
  background: #c0392b;
  color: #fffdf7;
}

.zo-confirm-dialog-ok:hover,
.zo-confirm-dialog-ok:focus-visible {
  background: #a4301f;
}

.zo-confirm-dialog-ok:active,
.zo-confirm-dialog-cancel:active {
  transform: scale(.97);
}

@media (prefers-reduced-motion: reduce) {
  .zo-confirm-dialog-wrap,
  .zo-confirm-dialog {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zo-zikir-select-modal-wrap,
  .zo-zikir-select-modal {
    transition: none;
  }
}