/*
 * "Faziletli Zikirler" katalog sayfası.
 *
 * Aktif tema uygulama yüzeyi allowlist'inde bu sayfa bulunmadığında tema kendi
 * header/hero/prose/footer kabuğunu basar. Katalog shortcode'u ise PageChrome
 * ile tam uygulama kabuğu üretir. Aşağıdaki sayfa-sınırlı reset iki kabuğun
 * üst üste binmesini (çift header, çift <h1>, çift footer) önler; diğer
 * WordPress sayfalarını etkilemez.
 *
 * !important zorunlu: online-zikirmatik-theme'in dist/styles.css'i eklenti
 * CSS'inden SONRA yazdırılıyor ve .oz-page-hero / .oz-site-header için kendi
 * display kurallarını taşıyor; !important olmadan reset bazı şablon
 * sıralamalarında sessizce etkisiz kalır. Aynı, kanıtlanmış desen
 * zo-info.css'te de kullanılıyor (o dosyanın .oz-* reset bloğu, PR #42).
 * Kalıcı düzeltme /faziletli-zikirler/ WP sayfasını diğer app sayfalarıyla aynı
 * "Elementor Header/Footer" şablonuna almaktır (staging WP-admin, kullanıcı
 * aksiyonu — ROADMAP.md P2 + AUDIT.md açık bulgular). ROADMAP kararı gereği bu
 * reset geçici bir yama değil, şablon düzeltildikten sonra da duracak kalıcı
 * güvenlik ağıdır. */
body.zo-zikir-katalog-page .oz-site-header,
body.zo-zikir-katalog-page .oz-page-hero,
body.zo-zikir-katalog-page .oz-site-footer {
    display: none !important;
}

body.zo-zikir-katalog-page #oz-main.oz-page-main {
    min-height: 100svh;
    margin: 0;
    padding: 0;
}

body.zo-zikir-katalog-page .oz-prose.oz-content-width {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Kabuk genisligi diger uc PageChrome kabuguyla (zo-rooms / zo-wizard /
 * zo-info) BIREBIR ayni olmali; aksi halde sidebar sayfadan sayfaya
 * kayiyor. Onceki hali 1440px te 40px daha genis coziyordu:
 *   yatay padding yok (+36) + gap 20 yerine 24 (+4) = +40px.
 * Olculen: diger sayfalar 1020px icerik, katalog 1060px idi.
 * Asagidaki dort deger uc kabugun ortak sozlesmesidir. */
.zo-katalog-shell {
    width: 100%;
    max-width: var(--zo-container-max, 1300px);
    min-height: 100svh;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    margin-inline: auto;
    padding: 18px;
}

/* Ölçüm (1440px): kabuk 1300px, sidebar 220px + 20px boşluk -> içerik
 * sütunu ~1060px. Eski 760px sınırı bu alanın ~300px'ini ölü bırakıyor,
 * kart içindeki başlık ile CTA arasında devasa boşluk oluşturuyordu.
 * Sütun artık mevcut genişliği kullanır; okunabilirlik kart ızgarasıyla
 * (auto-fill minmax) sağlanır, tek uzun satırla değil. */
/* zo-info-main / zo-wizard-main ile ayni: sutun icinde SOLA hizali,
 * ortalanmaz (margin:auto sutun 1120pxten genisken ikinci bir kayma
 * kaynagi oluyordu). */
.zo-katalog-main {
    width: min(100%, 1120px);
    min-width: 0;
    padding: 8px 8px 44px 0;
}

.zo-katalog-header {
    margin-bottom: 22px;
}

/* fix/katalog-header-eyebrow: Zikir Odaları (.zo-rooms-eyebrow) ve Zikir
 * Oluştur (.zo-wizard-eyebrow) başlığın üstünde küçük harf bir etiket
 * gösteriyordu, bu sayfada hiç yoktu — H1 doğrudan sayfa üstünde çıplak
 * duruyordu. Aynı görsel dile getirildi. */
.zo-katalog-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #2F8F5B;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Tema .oz-prose seçicileri shortcode içindeki ilk H1'ı ve sidebar not
 * tipografisini değiştirmemeli. PageChrome değerlerini daha yüksek,
 * yalnız bu sayfaya ait seçicilerle sabitliyoruz. */
body.zo-zikir-katalog-page .zo-katalog-shell .zo-page-title {
    display: block;
}

.zo-katalog-shell .zo-page-sidebar-note h3 {
    max-width: 156px;
    margin: 0 0 8px;
    padding: 0;
    color: #0F2A22;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: normal;
}

.zo-katalog-shell .zo-page-sidebar-note p {
    max-width: 162px;
    margin: 0;
    color: #5e665f;
    font-size: 11.8px;
    font-weight: 400;
    line-height: 1.42;
}

.zo-katalog-shell .zo-katalog-header p {
    max-width: 70ch;
    margin: 10px 0 0;
    color: #4b5b53;
    font-size: 15px;
    line-height: 1.6;
}

/* ===== Araç çubuğu: bölüm başlığı + sayaç + arama =====
 *
 * 31 kayıtlık bir katalogda tek tek kaydırmak yerine ada/okunuşa/anlama
 * göre daraltmak temel bir kullanılabilirlik ihtiyacıdır. Arama tamamen
 * ilerlemeli: JS çalışmazsa alan görünür kalır ve TÜM kartlar listelenir. */
.zo-katalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 14px 24px;
    margin: 0 0 18px;
}

.zo-katalog-toolbar-lead {
    min-width: 0;
}

/* Bölüm başlığı — sayfa H1'inin altında kalan sakin bir bölüm etiketi.
 * Kart başlıkları (h3, 19px) bunun görsel olarak üstüne çıkmasın diye
 * ölçek h3 ile eşitlendi; ayırt edici olan ağırlık ve harf aralığıdır. */
body.zo-zikir-katalog-page .zo-katalog-shell .zo-katalog-list-heading {
    margin: 0;
    padding: 0;
    color: #0F2A22;
    font-family: inherit;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    text-transform: none;
    opacity: 1;
}

.zo-katalog-shell .zo-katalog-count {
    margin: 4px 0 0;
    color: #5C655F;
    font-size: 13px;
    line-height: 1.4;
}

.zo-katalog-search {
    position: relative;
    flex: 1 1 260px;
    max-width: 380px;
}

.zo-katalog-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: #5C655F;
    pointer-events: none;
    transform: translateY(-50%);
}

.zo-katalog-search-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.zo-katalog-shell .zo-katalog-search input {
    width: 100%;
    min-height: 44px;
    padding: 0 14px 0 40px;
    border: 1px solid rgba(15, 42, 34, .14);
    border-radius: 13px;
    color: #0F2A22;
    background: #FFFDF7;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    appearance: none;
}

.zo-katalog-shell .zo-katalog-search input::placeholder {
    color: #8A938D;
}

.zo-katalog-shell .zo-katalog-search input:focus-visible {
    outline: 2px solid #2F8F5B;
    outline-offset: 2px;
    border-color: rgba(47, 143, 91, .5);
}

/* ===== Kart ızgarası =====
 *
 * Önceki kurgu her genişlikte tek sütundu ve .zo-katalog-main 760px ile
 * sınırlıydı: 1440px'te içerik sütununun sağında geniş bir ölü alan
 * kalıyor, kart içindeki başlık ile CTA arasında ~400px boşluk oluşuyordu
 * (kullanıcı bildirdi, staging'de ölçüldü). Izgara auto-fill ile kendi
 * kırılma noktalarını bulur: 1440'ta 3, 1024/768'de 2, telefonda 1 sütun.
 * Kart içi dizilim dikey (flex-direction: column) kalır. */
.zo-katalog-shell .zo-katalog-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zo-katalog-shell .zo-katalog-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin: 0;
    padding: 20px;
    color: #1E1E1E;
    background: #FFFDF7;
    border: 1px solid rgba(15, 42, 34, .1);
    border-radius: 20px;
    box-shadow: 0 10px 26px rgba(15, 42, 34, .06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.zo-katalog-shell .zo-katalog-card:hover {
    transform: translateY(-2px);
    border-color: rgba(47, 143, 91, .3);
    box-shadow: 0 16px 34px rgba(15, 42, 34, .1);
}

/* Merkezi katalogdaki featured bayrağı — uydurma bir sıralama yapılmaz,
 * yalnız mevcut işaret görünür kılınır. İçerik sırası DEĞİŞMEZ. */
.zo-katalog-shell .zo-katalog-card.is-featured {
    border-color: rgba(214, 178, 74, .5);
    box-shadow: 0 12px 30px rgba(15, 42, 34, .08), inset 0 0 0 1px rgba(214, 178, 74, .16);
}

.zo-katalog-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.zo-katalog-icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    color: #2F8F5B;
    background: rgba(47, 143, 91, .1);
}

.zo-katalog-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.zo-katalog-card.is-featured .zo-katalog-icon {
    color: #9A7B1E;
    background: rgba(214, 178, 74, .2);
}

.zo-katalog-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    color: #9A7B1E;
    background: none;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.zo-katalog-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D6B24A;
}

/* Gövde esner ki alt satır (hedef + CTA) tüm kartlarda aynı hizada otursun. */
.zo-katalog-card-body {
    min-width: 0;
    flex: 1 1 auto;
}

.zo-katalog-shell .zo-katalog-card-body .zo-katalog-card-title {
    margin: 0 0 6px;
    padding: 0;
    color: #0F2A22;
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.015em;
}

.zo-katalog-shell .zo-katalog-arabic {
    margin: 0 0 8px;
    color: #0F2A22;
    font-size: 22px;
    line-height: 1.6;
}

/* Okunuş — sayfa girişinin "okunuşunu incele" vaadinin karşılığı.
 * Veri merkezi katalogda zaten vardı, kartta hiç basılmıyordu. */
.zo-katalog-shell .zo-katalog-recitation {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 8px;
    color: #33453F;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.zo-katalog-shell .zo-katalog-meaning {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    color: #5C655F;
    font-size: 13.5px;
    line-height: 1.55;
    font-style: italic;
}

.zo-katalog-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 42, 34, .09);
}

.zo-katalog-target {
    min-width: 0;
    color: #5C655F;
    font-size: 12px;
    line-height: 1.35;
}

.zo-katalog-target strong {
    display: block;
    color: #0F2A22;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.zo-katalog-shell .zo-katalog-cta {
    min-height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    color: #FFFDF7;
    background: linear-gradient(135deg, #226b48, #1d5a3d);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.zo-katalog-shell .zo-katalog-cta:hover,
.zo-katalog-shell .zo-katalog-cta:focus-visible {
    background: #0F2A22;
}

/* Arama sonucu boşsa — kartlar gizlendiğinde kullanıcı boş ekranla
 * karşılaşmasın. */
.zo-katalog-shell .zo-katalog-empty {
    margin: 18px 0 0;
    padding: 22px 20px;
    border: 1px dashed rgba(15, 42, 34, .2);
    border-radius: 18px;
    color: #5C655F;
    background: rgba(255, 253, 247, .7);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.zo-katalog-shell .zo-katalog-card[hidden] {
    display: none;
}


/* Shortcode altındaki organik Gutenberg SEO içeriği.
 * width/margin:auto BİLEREK burada YOK: bu kutu .oz-prose.oz-content-width'un
 * çocuğu olarak zo-global-ui.css §2g'deki genel [class*="wp-block"] kuralına
 * da girer; sidebar+gap ofsetini hesaba katan margin-left/right ORADA
 * tanımlı (fix/info-katalog-seo-alignment). Eskiden buradaki
 * width:900px + margin:auto, sidebar'ı yok sayıp kutuyu TAM VIEWPORT
 * genişliğinde ortalıyordu — üstteki içerik sütunuyla hizası bu yüzden
 * bozuktu. */
body.zo-zikir-katalog-page .zo-katalog-seo {
    padding: clamp(24px, 4vw, 48px);
    border: 1px solid rgba(15, 42, 34, .1);
    border-radius: 26px;
    background: rgba(255, 253, 247, .94);
    box-shadow: 0 18px 48px rgba(15, 42, 34, .08);
}

body.zo-zikir-katalog-page .zo-katalog-seo > :first-child {
    margin-top: 0;
    padding-top: 0;
}

body.zo-zikir-katalog-page .zo-katalog-seo > :last-child {
    margin-bottom: 0;
}

body.zo-zikir-katalog-page .zo-katalog-seo h2 {
    margin: 1.55em 0 .55em;
    padding: 0;
    color: #0F2A22;
    font-family: inherit;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.025em;
}

body.zo-zikir-katalog-page .zo-katalog-seo h3 {
    margin: 1.35em 0 .45em;
    color: #0F2A22;
    font-family: inherit;
    font-size: clamp(20px, 2.4vw, 25px);
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -.015em;
}

body.zo-zikir-katalog-page .zo-katalog-seo p {
    margin: 0 0 1.05em;
    color: #33453F;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.75;
}

body.zo-zikir-katalog-page .zo-katalog-seo a {
    color: #247249;
    font-weight: 700;
    text-underline-offset: 3px;
}

/* Ara kirilim: zo-rooms / zo-wizard / zo-info kabuklari 1120px altinda
 * gap degerini 18px e dusuruyor. Katalogda bu kural yoktu; 821-1120px
 * arasinda icerik sutunu diger sayfalardan 6px saga kayiyordu
 * (mainX 262 vs 256). Ayni sozlesme buraya da alindi. */
@media (max-width: 1120px) {
    .zo-katalog-shell {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 18px;
    }
}

@media (max-width: 820px) {
    .zo-katalog-shell {
        display: block;
        width: 100%;
        min-height: 100svh;
        padding: 10px 10px calc(104px + env(safe-area-inset-bottom));
    }

    .zo-katalog-main {
        width: 100%;
        padding: 0;
    }

    .zo-katalog-header {
        padding: 17px 4px 15px;
        margin-bottom: 0;
    }

    body.zo-zikir-katalog-page .zo-katalog-seo {
        margin-top: 18px;
        margin-bottom: calc(112px + env(safe-area-inset-bottom));
        padding: 24px 20px;
        border-radius: 22px;
    }
}

@media (max-width: 600px) {
    .zo-katalog-shell .zo-katalog-card {
        gap: 12px;
        padding: 18px;
    }

    /* Dar ekranda hedef ve CTA yan yana sıkışmasın. */
    .zo-katalog-card-foot {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .zo-katalog-shell .zo-katalog-cta {
        width: 100%;
        align-self: stretch;
    }

    .zo-katalog-toolbar {
        align-items: stretch;
    }

    .zo-katalog-search {
        max-width: none;
    }

    body.zo-zikir-katalog-page .zo-katalog-seo h2 {
        font-size: 25px;
    }

    body.zo-zikir-katalog-page .zo-katalog-seo h3 {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zo-katalog-shell *,
    .zo-katalog-shell *::before,
    .zo-katalog-shell *::after {
        scroll-behavior: auto;
        transition: none;
    }
}