/* ============================================================
 *  İSLAM ARŞİVİ — MOBILE-PAGES.CSS
 *  Sayfa-spesifik mobil override katmanı.
 *  responsive.css ve mobile.css'ten SONRA yüklenir.
 *
 *  Breakpoint sistemi:
 *    ≤360px  → ultra-küçük telefon
 *    ≤480px  → standart telefon (1 sütun)
 *    ≤640px  → büyük telefon / küçük tablet portrait
 *    ≤768px  → tablet portrait (ana mobil davranış sınırı)
 *    ≤899px  → mobil/tablet üst sınır
 *    ≤1024px → tablet landscape
 *
 *  KURALLAR:
 *    1) display:none ile İÇERİK silinmez (sadece dekoratif öğeler).
 *    2) Yatay scroll (overflow-x) hiçbir sayfada olmaz.
 *    3) input/select/textarea minimum 16px font (iOS zoom engeli).
 *    4) İnteraktif öğeler ≥44×44 px (tap target).
 * ============================================================ */


/* ============================================================
 *  GLOBAL MOBILE GUARDS
 * ============================================================ */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

@media (max-width: 899px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    a, button,
    [role="button"],
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        min-height: 44px;
    }
    .ia-skip-link { min-height: auto; }
}


/* ============================================================
 *  ANASAYFA (index.html) — MOBILE (<900px)
 * ============================================================ */
@media (max-width: 899px) {

    /* === Scale-to-fit'i devre dışı bırak === */
    .ia-stage {
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
    }
    .ia-fit {
        width: 100% !important;
        transform: none !important;
    }
    .ia-app.page {
        width: 100% !important;
        min-height: auto !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    /* === HERO-BG sadece hero zone === */
    .ia-app .hero { position: relative; isolation: isolate; }
    .ia-app .hero-bg {
        inset: auto !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        height: 100vh !important;
        max-height: 820px !important;
        min-height: 560px !important;
        z-index: 0 !important;
        position: absolute !important;
    }
    .ia-app .hero-photo { opacity: 0.55; }
    .ia-app .scene::before,
    .ia-app .beam,
    .ia-app .rosette { opacity: 0.4; }
    .ia-app .grain { opacity: 0.08; }
    .ia-app .overlay {
        background:
            linear-gradient(180deg, rgba(0,0,0,0.62), rgba(0,0,0,0.55)) !important;
    }

    /* portals + feed + footer hero-bg'nin üstünde olsun */
    .ia-app .portals,
    .ia-app .feed,
    .ia-app .ia-foot {
        position: relative;
        z-index: 5;
    }

    /* === ÜST NAV HEADER mobilde gizli (yerine prayer-strip top bar) === */
    .ia-app .nav { display: none !important; }
    .ia-app .nav-links { display: none !important; }

    /* === PRAYER STRIP yeni layout: [şehir | vakit (orta) | hamburger] === */
    .ia-app .prayer-strip {
        height: auto !important;
        flex-wrap: wrap;
        padding: 8px 10px !important;
        gap: 8px;
        row-gap: 0;
        font-size: 11px !important;
        align-items: center !important;
        position: relative;
    }
    .ia-app .ps-loc {
        order: 1;
        padding: 6px 10px 6px 0 !important;
        margin: 0 !important;
        font-size: 11px;
        height: auto !important;
        min-height: 36px;
        border-right: none !important;
        flex-shrink: 0;
    }
    .ia-app .ps-count {
        order: 2;
        margin: 0 !important;
        padding: 0 !important;
        border-left: none !important;
        font-size: 11px;
        display: flex !important;
        align-items: center;
        gap: 8px;
        flex: 1 !important;
        justify-content: center !important;
        cursor: pointer;
        min-height: 36px;
    }
    .ia-app .ps-count .lbl { font-size: 9px !important; letter-spacing: 0.20em !important; }
    .ia-app .ps-count .num { font-size: 12px !important; }
    .ia-app .ps-count:active { background: rgba(201,164,90,0.06); border-radius: 4px; }

    /* Hamburger butonu — sağ uç (JS ile prayer-strip içine taşınır) */
    .ia-app .prayer-strip .ia-hamburger {
        order: 3 !important;
        display: grid !important;
        place-items: center;
        width: 36px; height: 36px;
        background: rgba(201,164,90,0.08);
        border: 1px solid rgba(201,164,90,0.22);
        border-radius: 6px;
        color: var(--ink, #efe2c4);
        cursor: pointer;
        flex-shrink: 0;
        margin: 0 !important;
    }
    .ia-app .prayer-strip .ia-hamburger:active {
        background: rgba(201,164,90,0.18);
    }

    /* Loc-modal — inline dropdown (vakit kısmını kapatmaz) */
    .ia-app .loc-modal {
        order: 4 !important;
        position: static !important;
        flex: 1 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin-top: 8px !important;
        padding: 8px !important;
        background: rgba(14,9,4,0.95) !important;
        border: 1px solid rgba(201,164,90,0.28) !important;
        border-radius: 8px !important;
        max-height: 280px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 12px 28px -8px rgba(0,0,0,0.6);
    }

    /* 6-vakit DIKEY liste — alt alta, tıklayınca açılır */
    .ia-app .ps-times {
        order: 5;
        flex: 1 0 100% !important;
        width: 100% !important;
        display: none !important;
        overflow: visible !important;
        padding: 6px 0 0 !important;
        margin-top: 8px;
        border-top: 1px solid rgba(201,164,90,0.15) !important;
        gap: 0 !important;
        grid-template-columns: 1fr !important;
    }
    .ia-app .prayer-strip.expanded .ps-times {
        display: grid !important;
    }
    .ia-app .ps-times .t {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 9px 4px !important;
        gap: 12px !important;
        min-width: 0 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(201,164,90,0.10) !important;
        border-radius: 0 !important;
        position: relative;
    }
    .ia-app .ps-times .t:last-child { border-bottom: none !important; }
    .ia-app .ps-times .t::before { display: none !important; }
    .ia-app .ps-times .t.next {
        background: linear-gradient(90deg, rgba(201,164,90,0.14), transparent 70%) !important;
        padding-left: 10px !important;
    }
    .ia-app .ps-times .t.next::after {
        content: '';
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 2px;
        background: linear-gradient(180deg, var(--gold-2, #e6c98a), var(--gold, #c9a45a));
    }
    .ia-app .ps-times .t .lbl {
        font-size: 10px !important;
        letter-spacing: 0.26em !important;
        color: var(--ink-faint, rgba(239,226,196,0.42)) !important;
        flex: 1;
        text-align: left;
    }
    .ia-app .ps-times .t.next .lbl { color: var(--gold-2, #e6c98a) !important; }
    .ia-app .ps-times .t .num {
        font-size: 13px !important;
        font-variant-numeric: tabular-nums;
        color: var(--ink, #efe2c4) !important;
        flex-shrink: 0;
    }
    .ia-app .ps-times .t.next .num { color: var(--gold-2, #e6c98a) !important; font-weight: 600; }
    .ia-app .ps-expand { display: none !important; }

    /* === SEARCH MODAL === */
    .ia-app .ia-search-modal {
        position: fixed !important;
        top: auto !important;
        bottom: 12px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
    }
    .ia-app .ia-search-input {
        font-size: 16px !important;
    }

    /* === HERO (eski hal — user feedback 2026-05-18) === */
    .ia-app .hero {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        padding: 24px 18px 28px !important;
        gap: 28px !important;
        align-items: start !important;
    }
    .ia-app .hero-left {
        align-self: stretch !important;
        max-width: 100% !important;
        padding-top: 8px !important;
        align-items: center !important;
        text-align: center;
    }
    .ia-app .kufic-title {
        width: 180px !important;
        height: 180px !important;
        margin-left: 0 !important;
    }
    .ia-app .title-rule {
        justify-content: center;
        margin: 10px 0 12px !important;
    }
    .ia-app .manifesto {
        font-size: 20px !important;
        max-width: 100% !important;
        text-align: center;
    }
    .ia-app .manifesto .row:nth-child(3) {
        font-size: 11px !important;
        margin-top: 10px !important;
    }
    /* CTA "KEŞFE BAŞLA" — pill shape, soft gold glow, no border */
    .ia-app .cta {
        margin-top: 18px !important;
        padding: 11px 24px !important;
        font-size: 11px !important;
        letter-spacing: 0.34em !important;
        align-self: center !important;
        min-height: 40px;
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        background: linear-gradient(135deg, rgba(201,164,90,0.18), rgba(138,101,41,0.06)) !important;
        border: none !important;
        border-radius: 999px !important;
        color: var(--gold-2, #e6c98a) !important;
        font-weight: 500 !important;
        box-shadow:
            inset 0 1px 0 rgba(255,225,160,0.20),
            0 6px 18px -8px rgba(201,164,90,0.40) !important;
        text-shadow: 0 1px 4px rgba(0,0,0,0.45);
        transition: background .28s ease, transform .2s ease, box-shadow .28s ease;
    }
    .ia-app .cta:active {
        transform: translateY(1px);
        background: linear-gradient(135deg, rgba(201,164,90,0.28), rgba(138,101,41,0.10)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,225,160,0.30),
            0 4px 12px -6px rgba(201,164,90,0.55) !important;
    }
    .ia-app .cta .arrow {
        margin-left: 2px;
        opacity: 0.85;
        transition: transform .25s ease;
    }
    .ia-app .cta:active .arrow { transform: translateX(2px); }
    .ia-app .slogan {
        justify-self: stretch !important;
        width: 100% !important;
        padding: 16px 8px !important;
    }
    .ia-app .slogan-arabic {
        font-size: clamp(36px, 11vw, 56px) !important;
        line-height: 1.3 !important;
        word-break: keep-all;
    }
    .ia-app .slogan-meaning {
        font-size: 17px !important;
        max-width: 100% !important;
    }
    .ia-app .slogan-rule { margin: 16px 0 12px !important; }
    .ia-app .slogan-ref { font-size: 9.5px !important; }

    /* ============================================================
     *  PORTALS — Kompakt 2-col grid (her zaman mobilde 2 sütun)
     *  Compact: [num | ar] / [tr spans] / [sub | arrow]
     * ============================================================ */
    .ia-app .portals {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 22px 10px !important;
        gap: 10px !important;
        border: none !important;
    }
    .ia-app .portal {
        position: relative;
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        column-gap: 10px !important;
        row-gap: 0 !important;
        padding: 12px 12px 10px !important;
        background: linear-gradient(180deg, rgba(28,18,8,0.55) 0%, rgba(10,6,3,0.78) 100%) !important;
        border: 1px solid rgba(201,164,90,0.20) !important;
        border-radius: 12px !important;
        overflow: hidden;
        isolation: isolate;
        transition: border-color .25s ease, background .25s ease, transform .15s ease;
    }
    /* Sağ üst altın aura — daha küçük */
    .ia-app .portal::after {
        content: '';
        position: absolute;
        top: -30px; right: -30px;
        width: 80px; height: 80px;
        background: radial-gradient(circle at center, rgba(201,164,90,0.14), transparent 65%);
        pointer-events: none;
        z-index: 0;
        transition: opacity .3s ease;
    }
    /* Row 1: num solda, Arapça sağda */
    .ia-app .p-num {
        grid-column: 1; grid-row: 1;
        font-size: 9px !important;
        letter-spacing: 0.30em !important;
        color: var(--gold-2, #e6c98a) !important;
        align-self: center;
        margin: 0 !important;
        z-index: 1;
    }
    .ia-app .p-ar {
        grid-column: 2; grid-row: 1;
        font-size: 22px !important;
        line-height: 1 !important;
        align-self: center;
        justify-self: end;
        margin: 0 !important;
        filter: drop-shadow(0 2px 5px rgba(0,0,0,0.6));
        z-index: 1;
    }
    /* Row 2: Türkçe başlık tam genişlik + altın hairline */
    .ia-app .p-tr {
        grid-column: 1 / -1; grid-row: 2;
        font-size: 12px !important;
        letter-spacing: 0.14em !important;
        margin: 10px 0 0 0 !important;
        padding-top: 10px !important;
        border-top: 1px solid rgba(201,164,90,0.18);
        color: var(--ink, #efe2c4) !important;
        font-weight: 500;
        line-height: 1.3;
        z-index: 1;
    }
    /* Row 3: Alt başlık solda + arrow sağda */
    .ia-app .p-sub {
        grid-column: 1; grid-row: 3;
        font-size: 11px !important;
        line-height: 1.35 !important;
        margin: 3px 0 0 0 !important;
        align-self: center;
        color: var(--ink-dim, rgba(239,226,196,0.72)) !important;
        z-index: 1;
    }
    .ia-app .p-arrow {
        grid-column: 2; grid-row: 3;
        margin: 4px 0 0 0 !important;
        width: 28px !important; height: 28px !important;
        min-width: 28px;
        border-radius: 50% !important;
        border: 1px solid rgba(201,164,90,0.32) !important;
        color: var(--gold-2, #e6c98a) !important;
        background: rgba(201,164,90,0.05) !important;
        align-self: center;
        justify-self: end;
        transition: border-color .25s ease, background .25s ease;
        z-index: 1;
    }
    /* Tap state — altın belirginleşir */
    .ia-app .portal:active {
        border-color: rgba(201,164,90,0.55) !important;
        background: linear-gradient(180deg, rgba(28,18,8,0.75) 0%, rgba(20,13,5,0.85) 100%) !important;
        transform: translateY(1px);
    }
    .ia-app .portal:active .p-arrow {
        border-color: var(--gold-2, #e6c98a) !important;
        background: rgba(201,164,90,0.16) !important;
        color: var(--ink, #efe2c4) !important;
    }
    .ia-app .portal:active .p-tr {
        border-top-color: rgba(201,164,90,0.45);
    }
    /* Eski 4-col hover linecap'ini mobilde devre dışı bırak */
    .ia-app .portal::before { display: none !important; }
    .ia-app .portal + .portal,
    .ia-app .portal:nth-child(4n+1),
    .ia-app .portal:nth-child(n+5) {
        border-left: none !important;
        border-top: none !important;
    }

    /* === FEED (Vaaz + Ârifâne) — minimal + iki sütun belirgin ayrım === */
    .ia-app .feed { padding: 28px 16px 24px !important; }
    .ia-app .feed-head { margin-bottom: 26px !important; text-align: center; }
    .ia-app .feed-eyebrow {
        font-size: 9px !important;
        letter-spacing: 0.38em !important;
        margin-bottom: 12px !important;
        gap: 10px !important;
    }
    .ia-app .feed-eyebrow .line { flex: 0 0 44px !important; }
    .ia-app .feed-title {
        font-size: 22px !important;
        line-height: 1.15 !important;
        margin-bottom: 8px !important;
        letter-spacing: 0.015em !important;
    }
    .ia-app .feed-sub { font-size: 13px !important; line-height: 1.4 !important; max-width: 320px !important; }

    /* Grid - tek sütun, sütunlar arasında ornamentli ayraç */
    .ia-app .feed-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .ia-app .feed-col {
        position: relative;
        padding: 24px 0 4px;
    }
    /* İki sütun arasına altın gradient + diamond ornament */
    .ia-app .feed-col + .feed-col {
        margin-top: 12px;
        padding-top: 36px;
    }
    .ia-app .feed-col + .feed-col::before {
        content: '';
        position: absolute;
        top: 0; left: 8%; right: 8%;
        height: 1px;
        background: linear-gradient(90deg,
            transparent,
            rgba(138,101,41,0.35),
            rgba(201,164,90,0.85),
            rgba(138,101,41,0.35),
            transparent);
    }
    .ia-app .feed-col + .feed-col::after {
        content: '';
        position: absolute;
        top: -3.5px; left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 7px; height: 7px;
        background: var(--gold, #c9a45a);
        box-shadow: 0 0 12px rgba(201,164,90,0.7);
    }

    /* Sütun başlığı - belirgin Arapça + Türkçe */
    .ia-app .feed-col-head {
        padding-bottom: 14px !important;
        margin-bottom: 16px !important;
        border-bottom: 1px solid rgba(201,164,90,0.20) !important;
        align-items: center !important;
        gap: 14px !important;
    }
    .ia-app .feed-col-head .col-ar { font-size: 26px !important; line-height: 1 !important; }
    .ia-app .feed-col-head .col-tr { font-size: 13px !important; letter-spacing: 0.24em !important; }
    .ia-app .feed-col-head .col-all { font-size: 9px !important; letter-spacing: 0.24em !important; gap: 5px !important; }

    /* Post — ferah spacing, featured ile regular net ayrı */
    .ia-app .post {
        padding: 18px 4px !important;
        position: relative;
    }
    .ia-app .post-wrap:last-child .post {
        border-bottom: none !important;
        padding-bottom: 6px !important;
    }
    .ia-app .post-wrap + .post-wrap .post {
        padding-top: 18px !important;
    }
    /* Featured post — ferah kart */
    .ia-app .post.post-featured {
        padding: 20px 18px 18px !important;
        margin-bottom: 18px !important;
        border-radius: 10px !important;
        background: linear-gradient(180deg, rgba(201,164,90,0.10), rgba(201,164,90,0.02)) !important;
        border: 1px solid rgba(201,164,90,0.28) !important;
    }
    .ia-app .post.post-featured::after {
        width: 2.5px !important;
    }
    /* Meta — date + tag */
    .ia-app .post-meta {
        font-size: 9px !important;
        letter-spacing: 0.22em !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
        align-items: center;
    }
    .ia-app .post-tag {
        font-size: 8.5px !important;
        padding: 2px 7px !important;
        letter-spacing: 0.26em !important;
    }
    /* Title */
    .ia-app .post-title {
        font-size: 16px !important;
        line-height: 1.3 !important;
        margin: 6px 0 8px !important;
    }
    .ia-app .post.post-featured .post-title {
        font-size: 18px !important;
        line-height: 1.25 !important;
        margin: 6px 0 10px !important;
    }
    /* Excerpt */
    .ia-app .post-excerpt {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    .ia-app .post.post-featured .post-excerpt {
        font-size: 14px !important;
    }
    /* Foot (author + duration) */
    .ia-app .post-foot {
        font-size: 9px !important;
        gap: 12px !important;
        margin-top: 14px !important;
        padding-top: 12px !important;
        letter-spacing: 0.22em !important;
    }

    /* === FOOTER — minimal, kompakt === */
    .ia-app .ia-foot { padding: 26px 16px 18px !important; }
    .ia-app .foot-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-bottom: 18px !important;
    }
    .ia-app .foot-brand { grid-column: 1 !important; }
    .ia-app .foot-brand-head { margin-bottom: 10px !important; gap: 10px !important; }
    .ia-app .foot-mark { width: 36px !important; height: 36px !important; }
    .ia-app .foot-ar { font-size: 18px !important; line-height: 1.2 !important; }
    .ia-app .foot-tr { font-size: 8.5px !important; letter-spacing: 0.30em !important; }
    .ia-app .foot-desc {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 14px !important;
    }
    .ia-app .foot-stats {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 12px 0 !important;
        border-top: 1px solid rgba(201,164,90,0.15);
        border-bottom: 1px solid rgba(201,164,90,0.15);
    }
    .ia-app .foot-stat {
        flex: 1 !important;
        text-align: center;
        display: flex !important;
        flex-direction: column;
        gap: 2px;
        padding: 4px 2px !important;
    }
    .ia-app .foot-stat b { font-size: 14px !important; color: var(--gold-2, #e6c98a) !important; }
    .ia-app .foot-stat span { font-size: 8px !important; letter-spacing: 0.18em !important; opacity: 0.7; }
    /* Foot kategoriler/kurumsal — accordion benzeri kompakt */
    .ia-app .foot-col {
        padding: 14px 0 !important;
        border-bottom: 1px solid rgba(201,164,90,0.10);
    }
    .ia-app .foot-col:last-of-type { border-bottom: none; }
    .ia-app .foot-col-h {
        font-size: 9.5px !important;
        letter-spacing: 0.32em !important;
        margin-bottom: 10px !important;
        color: var(--gold-2, #e6c98a) !important;
    }
    .ia-app .foot-col a {
        font-size: 12.5px !important;
        padding: 7px 0 !important;
        display: block !important;
    }
    /* Foot rule ornament */
    .ia-app .foot-rule { margin: 16px 0 12px !important; gap: 10px !important; }
    .ia-app .foot-rule .line { flex: 1 1 0 !important; }
    /* Foot bottom (cite + copy) */
    .ia-app .foot-bottom {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: center;
    }
    .ia-app .foot-cite { text-align: center; }
    .ia-app .foot-cite-ar { font-size: 18px !important; line-height: 1.3 !important; display: block; margin-bottom: 4px; }
    .ia-app .foot-cite-tr { font-size: 11px !important; line-height: 1.4 !important; }
    .ia-app .foot-copy { font-size: 9px !important; letter-spacing: 0.20em !important; opacity: 0.6; }
}


/* ============================================================
 *  ANASAYFA — küçük telefon (≤480px) ek sıkılaştırmalar
 * ============================================================ */
@media (max-width: 480px) {
    /* Portal grid 2-col KALSIN — kullanıcı listenin uzun olmasını istemiyor */
    .ia-app .portals { padding: 18px 8px !important; gap: 8px !important; }
    .ia-app .kufic-title { width: 150px !important; height: 150px !important; }
    .ia-app .manifesto { font-size: 18px !important; }
    .ia-app .ps-times .t .lbl { font-size: 8.5px !important; }
    .ia-app .ps-times .t .num { font-size: 12px !important; }
    /* Portal — ekstra sıkı */
    .ia-app .portal { padding: 10px 10px 9px !important; column-gap: 8px !important; }
    .ia-app .p-ar { font-size: 20px !important; }
    .ia-app .p-tr { font-size: 11.5px !important; margin-top: 8px !important; padding-top: 8px !important; letter-spacing: 0.12em !important; }
    .ia-app .p-sub { font-size: 10.5px !important; }
    .ia-app .p-arrow { width: 26px !important; height: 26px !important; }
    .ia-app .p-arrow svg { width: 11px; height: 11px; }
    /* Feed — küçük telefon */
    .ia-app .feed-title { font-size: 20px !important; }
    .ia-app .feed-col-head .col-ar { font-size: 24px !important; }
    .ia-app .post-title { font-size: 15.5px !important; }
    .ia-app .post.post-featured .post-title { font-size: 16.5px !important; }
    .ia-app .post-excerpt { font-size: 12px !important; }
    .ia-app .post.post-featured { padding: 16px 14px !important; }
}


/* ============================================================
 *  Küçük telefon ≤380px — brand-name kısaltma
 * ============================================================ */
@media (max-width: 380px) {
    .ia-app .brand-name { display: none; }
    .ia-app .ps-loc { font-size: 10.5px !important; padding-right: 6px !important; }
    .ia-app .ps-count .lbl { font-size: 8.5px !important; }
    .ia-app .ps-count .num { font-size: 11.5px !important; }
}


/* ============================================================
 *  Landscape mobil — kompakt hero
 * ============================================================ */
@media (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
    .ia-app .hero {
        grid-template-columns: 220px 1fr !important;
        gap: 18px !important;
        padding: 16px 18px !important;
    }
    .ia-app .hero-left {
        text-align: left;
        align-items: flex-start !important;
    }
    .ia-app .kufic-title {
        width: 140px !important;
        height: 140px !important;
    }
    .ia-app .manifesto { font-size: 16px !important; text-align: left; }
    .ia-app .slogan { padding: 0 !important; }
    .ia-app .slogan-arabic { font-size: 38px !important; }
}


/* ============================================================
 *  KURAN-MEALI/SURE.HTML — MOBILE (<900px)
 *  Krem zemin + bakır aksan paleti (anasayfanın koyu Ottoman'ına
 *  karıştırılmaz). Yapısal DNA (kompakt grid, hairline ayraç,
 *  pill buton, bottom-sheet) anasayfadan kopyalandı.
 * ============================================================ */
@media (max-width: 899px) {

    /* === Desktop top bar (header.js mv-hdr) tamamen gizli; ia-ident (32px)
       kalır → body üst boşluğu 32px sabit (mv-hdr offsetHeight=0 olduğu için
       header.js'in fallback 64px ataması yanlış olur, açıkça override). */
    body.sure-page .mv-hdr,
    body.sure-page .mv-overlay { display: none !important; }
    body.sure-page { padding-top: 32px !important; padding-bottom: 0 !important; }

    /* ec-heading, ec-sub-bar, ec-jump, ec-actions, ec-a-btn kuralları:
       hotfix bloğunda (dosyanın sonunda) tanımlı, burada tekrar etmiyoruz. */

    /* Hamburger butonu — sub-bar'ın en solunda (JS taşıyor) */
    body.sure-page .sure-mhamb {
        display: grid !important;
        place-items: center;
        width: 36px;
        height: 36px;
        min-width: 36px;
        background: rgba(184,115,51,0.06);
        border: 1px solid rgba(184,115,51,0.22);
        border-radius: 8px;
        color: #B87333;
        cursor: pointer;
        margin-right: 8px;
        flex-shrink: 0;
        padding: 0;
        font-family: inherit;
    }
    body.sure-page .sure-mhamb:active {
        background: rgba(184,115,51,0.16);
        transform: translateY(1px);
    }
    body.sure-page .sure-mhamb:focus-visible {
        outline: 2px solid #B87333;
        outline-offset: 2px;
    }

    /* ec-crumbs, ec-ayetgrid, ec-body, ec-table-card kuralları:
       hotfix bloğunda (dosyanın sonunda) tanımlı. */

    /* === NOTICE === */
    body.sure-page .ec-notice {
        padding: 0 10px !important;
        margin-bottom: 18px !important;
    }
    body.sure-page .ec-notice-box {
        padding: 12px 14px !important;
        font-size: 12.5px !important;
        border-radius: 10px !important;
    }
    body.sure-page .ec-notice-box i.warn { font-size: 14px; }

    /* === TEFSIR MODAL → BOTTOM SHEET === */
    body.sure-page .ec-modal {
        padding: 0 !important;
        align-items: flex-end !important;
        justify-content: stretch !important;
        background: rgba(15,10,7,0.5) !important;
    }
    body.sure-page .ec-modal.active {
        animation: sure-mb-fadein .22s ease;
    }
    body.sure-page .ec-modal-content {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 88vh !important;
        border-radius: 18px 18px 0 0 !important;
        padding: 8px 16px 16px !important;
        box-shadow: 0 -12px 40px rgba(15,10,7,0.35) !important;
        animation: sure-mb-slideup .28s cubic-bezier(0.2, 0.8, 0.3, 1);
        display: flex !important;
        flex-direction: column !important;
        position: relative;
    }
    /* Drag handle (top bar) */
    body.sure-page .ec-modal-content::before {
        content: '';
        display: block;
        width: 38px;
        height: 4px;
        background: #C9BCAB;
        border-radius: 999px;
        margin: 6px auto 10px;
        flex-shrink: 0;
    }
    body.sure-page .ec-modal-h {
        padding-bottom: 10px !important;
        margin-bottom: 12px !important;
        flex-shrink: 0;
    }
    body.sure-page .ec-modal-title {
        font-size: 16px !important;
        gap: 8px !important;
    }
    body.sure-page .ec-modal-title i { font-size: 13px !important; }
    body.sure-page .ec-modal-close {
        width: 32px !important;
        height: 32px !important;
    }
    body.sure-page .ec-modal-body {
        font-size: 15px !important;
        line-height: 1.8 !important;
        padding-bottom: env(safe-area-inset-bottom, 0);
        -webkit-overflow-scrolling: touch;
    }
    @keyframes sure-mb-fadein {
        from { background: rgba(15,10,7,0); }
        to   { background: rgba(15,10,7,0.5); }
    }
    @keyframes sure-mb-slideup {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* === FOOTER — krem sayfa içinde de tek sütun === */
    body.sure-page .site-footer {
        padding: 28px 0 16px !important;
    }
    body.sure-page .ft-inner { padding: 0 16px !important; }
    body.sure-page .ft-top {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        padding-bottom: 18px !important;
    }
    body.sure-page .ft-links {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }
    body.sure-page .ft-links h5 {
        font-size: 10px !important;
        margin-bottom: 8px !important;
    }
    body.sure-page .ft-links a {
        font-size: 12.5px !important;
        padding: 6px 0 !important;
        min-height: 36px;
    }
    body.sure-page .ft-copy {
        flex-direction: column !important;
        gap: 6px !important;
        text-align: center !important;
        font-size: 10.5px !important;
    }

    /* ============================================================
     *  MOBILE DRAWER — BASE LAYOUT (index.html'in inline CSS'i bu
     *  sayfada yok; burada `.sure-page` scope'unda baştan yazılır)
     * ============================================================ */
    body.sure-page .ia-drawer-backdrop[hidden] { display: none !important; }
    body.sure-page .ia-drawer-backdrop {
        position: fixed; inset: 0;
        background: rgba(44,24,16,0.55);
        z-index: 9998;
        animation: sure-drawer-fadein .2s ease-out;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    body.sure-page .ia-drawer[hidden] { display: none !important; }
    body.sure-page .ia-drawer {
        position: fixed; top: 0; right: 0; bottom: 0;
        width: min(340px, 88vw);
        z-index: 9999;
        display: flex; flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        font-family: 'Inter', system-ui, sans-serif;
        transform: translateX(0);
    }
    @keyframes sure-drawer-fadein { from { opacity: 0; } to { opacity: 1; } }

    body.sure-page .ia-drawer-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 18px 18px 14px;
        flex-shrink: 0;
    }
    body.sure-page .ia-drawer-brand { display: flex; align-items: center; gap: 12px; }
    body.sure-page .ia-drawer-brand img {
        width: 40px; height: 40px; object-fit: cover;
        border-radius: 3px; flex-shrink: 0;
    }
    body.sure-page .ia-drawer-ar {
        font-family: 'Reem Kufi', 'Noto Kufi Arabic', serif;
        font-weight: 600; font-size: 18px;
        direction: rtl; white-space: nowrap; line-height: 1.7;
        letter-spacing: 0;
    }
    body.sure-page .ia-drawer-tr {
        font-family: 'Inter', sans-serif;
        font-size: 7.5px;
        letter-spacing: 0.30em;
        text-transform: uppercase;
        margin-top: 2px;
    }
    body.sure-page .ia-drawer-close {
        width: 36px; height: 36px;
        border-radius: 8px;
        cursor: pointer;
        display: grid; place-items: center;
    }
    body.sure-page .ia-drawer-nav {
        flex: 1; min-height: 0;
        display: flex; flex-direction: column;
        padding: 6px 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.sure-page .ia-drawer-nav::-webkit-scrollbar { width: 4px; }
    body.sure-page .ia-drawer-nav::-webkit-scrollbar-thumb {
        background: rgba(184,115,51,0.25); border-radius: 2px;
    }
    body.sure-page .ia-drawer-nav a {
        display: flex; align-items: center; justify-content: space-between;
        padding: 11px 22px;
        text-decoration: none;
        transition: background .18s ease, color .18s ease;
        position: relative;
        min-height: 44px;
    }
    body.sure-page .ia-drawer-nav a.active::after {
        content: ""; position: absolute; right: 18px; top: 50%;
        transform: translateY(-50%);
        width: 5px; height: 5px;
        border-radius: 50%;
    }
    body.sure-page .ia-drawer-nav .tr {
        font-family: 'Inter', sans-serif;
        font-size: 13px; letter-spacing: 0.20em;
        font-weight: 600; text-transform: uppercase;
    }
    body.sure-page .ia-drawer-nav a.active .tr { font-weight: 700; letter-spacing: 0.22em; }
    body.sure-page .ia-drawer-nav .ar {
        font-family: 'Reem Kufi', 'Noto Kufi Arabic', serif;
        font-weight: 600; font-size: 18px;
        line-height: 1.3;
        direction: rtl;
        letter-spacing: 0;
    }
    body.sure-page .ia-drawer-foot {
        padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0));
        flex-shrink: 0;
        display: flex; flex-direction: column; gap: 10px;
    }
    body.sure-page .ia-drawer-search {
        display: flex; align-items: center; gap: 10px;
        padding: 9px 14px;
        border-radius: 999px;
        transition: background .2s ease, border-color .2s ease;
        min-height: 44px;
    }
    body.sure-page .ia-drawer-search svg { flex-shrink: 0; }
    body.sure-page .ia-drawer-search input {
        flex: 1; min-width: 0;
        background: transparent; border: 0; outline: none;
        font-family: 'Inter', sans-serif;
        font-size: 16px; letter-spacing: 0.02em;
        padding: 0;
        -webkit-appearance: none; appearance: none;
    }
    body.sure-page .ia-drawer-search input::-webkit-search-cancel-button {
        -webkit-appearance: none; appearance: none;
    }
    body.sure-page .ia-drawer-mini {
        display: flex; align-items: center; justify-content: center; gap: 6px;
        font-family: 'Inter', sans-serif;
        font-size: 10px; letter-spacing: 0.18em;
        padding-top: 4px;
    }
    body.sure-page .ia-drawer-mini a { text-decoration: none; }

    /* ============================================================
     *  MOBILE DRAWER — krem palette renk override
     * ============================================================ */
    body.sure-page .sure-drawer-bd {
        background: rgba(44,24,16,0.55) !important;
    }
    body.sure-page .sure-drawer {
        background: linear-gradient(180deg, #FAF7F2 0%, #F3EDE4 100%) !important;
        border-left: 1px solid rgba(184,115,51,0.32) !important;
        box-shadow: -20px 0 60px -20px rgba(44,24,16,0.45) !important;
        color: #2C1810 !important;
    }
    /* Head */
    body.sure-page .sure-drawer .ia-drawer-head {
        border-bottom: 1px solid rgba(184,115,51,0.20) !important;
        background: linear-gradient(180deg, rgba(243,237,228,0.7), rgba(250,247,242,0)) !important;
    }
    body.sure-page .sure-drawer .ia-drawer-brand img {
        mix-blend-mode: multiply !important;
        opacity: 0.92;
    }
    body.sure-page .sure-drawer .ia-drawer-ar {
        color: #B87333 !important;
        text-shadow: none !important;
    }
    body.sure-page .sure-drawer .ia-drawer-tr {
        color: #8C7B6B !important;
    }
    body.sure-page .sure-drawer .ia-drawer-close {
        background: rgba(184,115,51,0.06) !important;
        border: 1px solid rgba(184,115,51,0.22) !important;
        color: #6B5B4F !important;
    }
    body.sure-page .sure-drawer .ia-drawer-close:active {
        background: rgba(184,115,51,0.18) !important;
        color: #B87333 !important;
    }
    /* Nav links */
    body.sure-page .sure-drawer .ia-drawer-nav a {
        color: #5C4F45 !important;
        border-left: 3px solid transparent;
    }
    body.sure-page .sure-drawer .ia-drawer-nav a:active {
        background: rgba(184,115,51,0.08) !important;
        color: #2C1810 !important;
    }
    body.sure-page .sure-drawer .ia-drawer-nav a.active {
        background: linear-gradient(90deg, rgba(184,115,51,0.16) 0%, rgba(184,115,51,0.04) 60%, transparent 100%) !important;
        border-left-color: #B87333 !important;
        color: #2C1810 !important;
        box-shadow: inset 0 1px 0 rgba(184,115,51,0.08) !important;
    }
    body.sure-page .sure-drawer .ia-drawer-nav a.active::after {
        background: #B87333 !important;
        box-shadow: 0 0 8px rgba(184,115,51,0.55) !important;
    }
    body.sure-page .sure-drawer .ia-drawer-nav .ar {
        color: rgba(184,115,51,0.82) !important;
        text-shadow: none !important;
    }
    body.sure-page .sure-drawer .ia-drawer-nav a.active .ar {
        color: #B87333 !important;
    }
    /* Foot */
    body.sure-page .sure-drawer .ia-drawer-foot {
        border-top: 1px solid rgba(184,115,51,0.16) !important;
    }
    body.sure-page .sure-drawer .ia-drawer-search {
        background: rgba(184,115,51,0.05) !important;
        border: 1px solid rgba(184,115,51,0.22) !important;
    }
    body.sure-page .sure-drawer .ia-drawer-search:focus-within {
        background: rgba(184,115,51,0.10) !important;
        border-color: rgba(184,115,51,0.50) !important;
    }
    body.sure-page .sure-drawer .ia-drawer-search svg {
        stroke: #B87333 !important;
    }
    body.sure-page .sure-drawer .ia-drawer-search input {
        color: #2C1810 !important;
    }
    body.sure-page .sure-drawer .ia-drawer-search input::placeholder {
        color: rgba(107,91,79,0.55) !important;
    }
    body.sure-page .sure-drawer .ia-drawer-mini {
        color: #8C7B6B !important;
    }
    body.sure-page .sure-drawer .ia-drawer-mini a {
        color: #5C4F45 !important;
    }
    body.sure-page .sure-drawer .ia-drawer-mini a:active {
        color: #B87333 !important;
    }
    /* Backdrop ortak ia-drawer-open class ile body scroll lock */
    body.ia-drawer-open { overflow: hidden !important; }
}


/* ≤480 sure.html ek sıkılaştırma → hotfix bloğunun ≤480 kısmında. */


/* ============================================================
 *  KURAN-MEALI/SURE.HTML — MOBİL DÜZELTMELERİ (user feedback)
 * ============================================================ */
@media (max-width: 899px) {

    /* === 1. BREADCRUMB GİZLE — hamburger drawer'da zaten navigasyon var === */
    body.sure-page .ec-crumbs {
        display: none !important;
    }

    /* === 2. SUB-BAR: sure adı görünür + ok ikonları küçük === */
    body.sure-page .ec-sub-bar {
        padding: 8px 10px !important;
    }
    body.sure-page .ec-sub-inner {
        gap: 8px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.sure-page .ec-sub-inner::-webkit-scrollbar { display: none; }
    body.sure-page .ec-pager {
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }
    body.sure-page .ec-pg-btn {
        padding: 4px 8px !important;
        font-size: 0 !important;
        min-height: 32px !important;
        min-width: 32px;
        line-height: 0 !important;
    }
    body.sure-page .ec-pg-btn i {
        font-size: 9px !important;
        line-height: 1 !important;
    }
    body.sure-page .ec-pg-btn span {
        display: none !important; /* "Önceki/Sonraki" text saklı, sadece ok kalır */
    }
    /* Sure dropdown — sure adı görünür olsun */
    body.sure-page .ec-jump {
        padding: 3px 4px 3px 8px !important;
        flex-shrink: 0;
    }
    body.sure-page .ec-jump-label {
        display: none !important;
    }
    body.sure-page .ec-jump-field .lbl {
        display: none;
    }
    body.sure-page .ec-jump-select {
        max-width: 140px !important;
        min-width: 110px;
        font-size: 13px !important;
        padding: 4px 18px 4px 0 !important;
    }
    body.sure-page .ec-jump-input {
        width: 38px !important;
        font-size: 13px !important;
    }
    body.sure-page .ec-jump-divider {
        height: 18px !important;
    }
    body.sure-page .ec-jump-go {
        width: 26px !important;
        height: 26px !important;
        min-height: 26px !important;
        min-width: 26px !important;
        padding: 0 !important;
    }
    body.sure-page .ec-jump-go i {
        font-size: 9px !important;
    }
    /* Action ikonları sıkıştır */
    body.sure-page .ec-a-btn {
        min-width: 32px;
        min-height: 32px !important;
    }
    /* Pg butonların min-height tap-target'ını override */
    body.sure-page .ec-pg-btn {
        min-height: 32px !important;
        min-width: 32px !important;
    }
    /* Action butonlar (tefsir, audio, paylaş) — ikon-only chip */
    body.sure-page .ec-actions {
        gap: 4px !important;
        flex-shrink: 0;
        flex-wrap: nowrap !important;
    }
    body.sure-page .ec-jump {
        flex-wrap: nowrap !important;
    }
    body.sure-page .ec-pager {
        flex-wrap: nowrap !important;
        flex-shrink: 0;
    }
    body.sure-page .ec-a-btn {
        padding: 6px 10px !important;
        /* font-size 0 → buton'un direkt text node'unu (Ayet Tefsiri, Sesli Dinle)
           gizler; i (ikon) için aşağıda 12px override edilir. */
        font-size: 0 !important;
        min-height: 36px;
        line-height: 0 !important;
        gap: 0 !important;
    }
    body.sure-page .ec-a-btn span {
        display: none; /* sadece ikon */
    }
    body.sure-page .ec-a-btn i {
        font-size: 12px !important;
        line-height: 1 !important;
        margin: 0;
    }

    /* === 3. MEAL TABLE — Arabic-meal stack + horizontal overflow fix === */
    body.sure-page .ec-body {
        padding: 12px 10px 24px !important;
    }
    body.sure-page .ec-table-card {
        border-radius: 10px !important;
    }
    /* Her satırı tek kart yap */
    body.sure-page .ec-table-card thead { display: none !important; }
    body.sure-page .ec-table-card,
    body.sure-page .ec-table-card table,
    body.sure-page .ec-table-card tbody {
        display: block !important;
        width: 100% !important;
    }
    body.sure-page .ec-table-card tbody tr {
        display: block !important;
        padding: 14px 14px !important;
        border-bottom: 1px solid var(--border, #E0D5C8) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    body.sure-page .ec-table-card tbody td {
        display: block !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: anywhere;
        word-break: normal;
    }
    body.sure-page .ec-table-card tbody td.num {
        display: inline-block !important;
        font-size: 10px !important;
        color: var(--c, #B87333);
        letter-spacing: 0.18em;
        margin-right: 8px;
        vertical-align: middle;
        width: auto !important;
    }
    body.sure-page .ec-table-card tbody td.num:empty { display: none !important; }
    body.sure-page .ec-table-card tbody td.name {
        display: inline-block !important;
        font-size: 11px !important;
        color: var(--tm, #6B5B4F);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 6px;
        width: auto !important;
        max-width: 100% !important;
    }
    body.sure-page .ec-table-card tbody td.name .role {
        display: inline-block;
        font-size: 9px;
        margin-left: 6px;
        opacity: 0.7;
        margin-top: 0;
    }
    body.sure-page .ec-table-card tbody td.text {
        display: block !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: var(--t, #2C1810);
        margin-top: 4px;
        padding: 0 !important;
        white-space: normal !important;
    }
    /* Arabic satırı (r-ar) — RTL, büyük font, full width */
    body.sure-page .ec-table-card tr.r-ar {
        padding: 16px 14px !important;
        background: linear-gradient(180deg, #FBF3DD, #F7EDD0) !important;
    }
    body.sure-page .ec-table-card tr.r-ar td.name {
        font-size: 10px !important;
        opacity: 0.6;
        margin-bottom: 8px;
    }
    body.sure-page .ec-table-card tr.r-ar td.text,
    body.sure-page .ec-table-card tr.r-ar td.text.iar-ayet {
        font-family: 'iar-kuran-hat', serif !important;
        font-size: 22px !important;
        line-height: 2.0 !important;
        direction: rtl !important;
        text-align: right !important;
        color: #003366 !important;
        padding: 0 !important;
        word-spacing: 2px;
        margin-top: 0;
    }
    /* Besmele satırı */
    body.sure-page .ec-table-card tr.r-besmele {
        padding: 14px 14px !important;
    }
    body.sure-page .ec-table-card tr.r-besmele td.text {
        font-family: 'iar-kuran-hat', serif !important;
        font-size: 20px !important;
        direction: rtl !important;
        text-align: center !important;
        line-height: 1.9 !important;
    }
    /* Kelime meali (WBW) — chip'ler düzgün wrap */
    body.sure-page .ec-table-card tr.r-kw {
        padding: 12px 14px !important;
    }
    body.sure-page .ec-table-card .kw-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        max-width: 100%;
    }
    body.sure-page .ec-table-card .kw-chip {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        max-width: 100%;
        padding: 6px 10px !important;
    }
    body.sure-page .ec-table-card .kw-ar {
        font-size: 16px !important;
    }
    /* Meal satırları — uzun mealler artık taşmıyor */
    body.sure-page .ec-table-card tr.r-meal td.text {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        hyphens: auto;
    }

    /* === 4. AYET-GRID kompakt === */
    body.sure-page .ec-ayetgrid-wrap {
        padding: 0 10px !important;
        margin: 8px auto 0 !important;
    }
    body.sure-page .ec-ayetgrid {
        grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)) !important;
        padding: 6px !important;
        gap: 4px;
    }
    body.sure-page .ec-ayetgrid a,
    body.sure-page .ec-ayetgrid .ag-btn {
        font-size: 11px !important;
        min-width: 0 !important;
    }

    /* === 5. HEADING (sure başlığı) — minimal kompakt mobil
       label + meta tek satıra (flex-wrap row), name ayrı satır. */
    body.sure-page .ec-heading {
        padding: 6px 12px !important;
    }
    body.sure-page .ec-heading-inner {
        gap: 8px !important;
        align-items: center !important;
    }
    body.sure-page .ec-heading-id {
        display: grid !important;
        grid-template-areas: "lbl meta" "name name";
        grid-template-columns: auto 1fr;
        column-gap: 6px !important;
        row-gap: 0 !important;
        align-items: baseline !important;
        min-width: 0 !important;
    }
    body.sure-page .ec-heading-label {
        grid-area: lbl;
        font-size: 8.5px !important;
        letter-spacing: 0.15em !important;
        line-height: 1.4 !important;
        white-space: nowrap;
        margin: 0 !important;
    }
    body.sure-page .ec-heading-meta {
        grid-area: meta;
        font-size: 9.5px !important;
        line-height: 1.4 !important;
        letter-spacing: 0.02em !important;
        margin: 0 !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.sure-page .ec-heading-name {
        grid-area: name;
        font-size: 16px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        margin: 1px 0 0 !important;
        letter-spacing: -0.3px !important;
    }
    /* label ile meta arasında ince ayraç */
    body.sure-page .ec-heading-label::after {
        content: " ·";
        color: var(--c, #B87333);
        opacity: 0.45;
        margin-left: 2px;
    }
    body.sure-page .ec-heading-num { line-height: 1 !important; }
    body.sure-page .ec-heading-num .ord {
        font-size: 20px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
    body.sure-page .ec-heading-num .of {
        font-size: 9px !important;
        line-height: 1.2 !important;
        opacity: 0.7;
    }
}

/* ≤480px ekstra sıkılaştırma */
@media (max-width: 480px) {
    body.sure-page .ec-jump-select { max-width: none !important; min-width: 0 !important; flex: 1 1 auto; font-size: 12px !important; text-overflow: ellipsis; }
    body.sure-page .ec-jump-field:has(#jumpSure) { flex: 1 1 auto; min-width: 0; }
    body.sure-page .ec-jump-field:has(#jumpAyet) { flex: 0 0 auto; }
    body.sure-page .ec-jump-go { display: none !important; }
    body.sure-page .ec-pg-btn { padding: 6px 7px !important; }
    body.sure-page .ec-table-card tr.r-ar td.text { font-size: 20px !important; line-height: 1.85 !important; }
    body.sure-page .ec-table-card tr.r-meal td.text { font-size: 13px !important; }
    body.sure-page .ec-table-card tbody tr { padding: 12px 10px !important; }
    body.sure-page .ec-ayetgrid { grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)) !important; }
    body.sure-page .ec-heading-name { font-size: 15px !important; }
    body.sure-page .ec-heading { padding: 7px 12px !important; }
    body.sure-page .ec-heading-num .ord { font-size: 20px !important; }
}

/* ============================================================
 *  PRAYER-STRIP + DRAWER — DİĞER SAYFALAR (anasayfa hariç)
 *  Scope: body.page-shell  (class JS tarafından eklenir; anasayfa
 *  page-shell.js'i yüklemediğinden bu class'ı asla almaz, dolayısıyla
 *  anasayfa hem masaüstü hem mobil görünümünde sıfır etkilenir.)
 *  MOBİL-ONLY — masaüstünde (≥900px) prayer-strip + drawer hep gizli.
 * ============================================================ */

/* === DEFAULT (her zaman): page-shell sayfalarında masaüstünde gizli === */
body.page-shell .prayer-strip,
body.page-shell .ia-drawer,
body.page-shell .ia-drawer-backdrop {
    display: none;
}

/* ============================================================
 *  MOBİL (≤899px) — Prayer-strip görünür + top bar layout
 * ============================================================ */
@media (max-width: 899px) {

/* Mobil + page-shell: prayer-strip TEK üst bar olur — ia-ident (koyu kimlik
   şeridi) ve mv-hdr (sayfa nav header'ı) gizlenir. Masaüstü etkilenmez
   (media query mobile-only), anasayfa etkilenmez (page-shell class'ı yok). */
body.page-shell .ia-ident,
body.page-shell .mv-hdr,
body.page-shell .mv-overlay {
    display: none !important;
}

/* === PRAYER-STRIP base (mobilde görünür) === */
body.page-shell .prayer-strip {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg, #FAF7F2);
    border-bottom: 1px solid var(--border, #E0D5C8);
    color: var(--t, #2C1810);
    font-family: 'Inter', sans-serif;
    align-items: center;
    padding: 8px 10px;
    font-size: 11.5px;
    letter-spacing: 0.12em;
    flex-wrap: wrap;
    height: auto;
    gap: 8px;
    row-gap: 0;
}

/* mobile.css ≤480px'te tüm button'lara width:100% verir — content-width gerekenleri serbest bırak */
body.page-shell .prayer-strip .ps-loc,
body.page-shell .prayer-strip .loc-geo {
    width: auto !important;
    min-width: 0;
}
/* Hamburger ve drawer-close explicit 36×36 */
body.page-shell .prayer-strip .ia-hamburger,
body.page-shell .ia-drawer .ia-drawer-close {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex-shrink: 0;
}

/* ps-loc (şehir butonu) — sol */
body.page-shell .prayer-strip .ps-loc {
    order: 1;
    display: flex; align-items: center; gap: 7px;
    background: transparent;
    border: none;
    color: var(--copper, #B87333);
    padding: 6px 10px 6px 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    font-weight: 600;
    min-height: 36px;
    flex-shrink: 0;
}
body.page-shell .prayer-strip .ps-loc svg { flex-shrink: 0; }
body.page-shell .prayer-strip .ps-loc-caret { transition: transform .2s ease; }
body.page-shell .prayer-strip .ps-loc[aria-expanded="true"] .ps-loc-caret { transform: rotate(180deg); }

/* ps-count (sıradaki vakit + countdown) — orta, tıklanabilir */
body.page-shell .prayer-strip .ps-count {
    order: 2;
    display: flex; align-items: center; gap: 10px;
    color: var(--t, #2C1810);
    padding: 0; margin: 0;
    flex: 1;
    justify-content: center;
    cursor: pointer;
    min-height: 36px;
}
body.page-shell .prayer-strip .ps-count .pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--copper, #B87333);
    box-shadow: 0 0 8px rgba(184,115,51,0.4);
    animation: ps-pulse 2s infinite ease-in-out;
}
@keyframes ps-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
body.page-shell .prayer-strip .ps-count .lbl {
    color: var(--tm2, #8C7B6B);
    font-size: 10px;
    letter-spacing: 0.22em;
}
body.page-shell .prayer-strip .ps-count .num {
    color: var(--copper, #B87333);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}

/* Hamburger butonu — sağ uç. CSS !important inline display:none'u ezer. */
body.page-shell .prayer-strip .ia-hamburger {
    order: 3;
    display: grid !important;
    place-items: center;
    width: 36px; height: 36px;
    background: rgba(184,115,51,0.08);
    border: 1px solid rgba(184,115,51,0.32);
    border-radius: 6px;
    color: var(--copper, #B87333);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    padding: 0;
}
body.page-shell .prayer-strip .ia-hamburger:active {
    background: rgba(184,115,51,0.18);
}

/* Loc modal — inline dropdown */
body.page-shell .prayer-strip .loc-modal {
    order: 4;
    position: static !important;
    flex: 1 0 100%;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px;
    padding: 8px;
    background: var(--paper, #FFFFFF);
    border: 1px solid var(--border, #E0D5C8);
    border-radius: 8px;
    max-height: 280px;
    overflow-y: auto;
}
body.page-shell .prayer-strip .loc-modal[hidden] { display: none !important; }
body.page-shell .prayer-strip .loc-head {
    display: flex; gap: 6px; margin-bottom: 8px;
}
body.page-shell .prayer-strip .loc-search {
    flex: 1; min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border, #E0D5C8);
    border-radius: 6px;
    background: var(--bg, #FAF7F2);
    color: var(--t, #2C1810);
    font: inherit;
    font-size: 12px;
    letter-spacing: 0;
    outline: none;
}
body.page-shell .prayer-strip .loc-search:focus {
    border-color: var(--copper, #B87333);
}
body.page-shell .prayer-strip .loc-geo {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 10px;
    background: rgba(184,115,51,0.08);
    border: 1px solid rgba(184,115,51,0.32);
    border-radius: 6px;
    color: var(--copper, #B87333);
    font: inherit;
    font-size: 9px;
    letter-spacing: 0.18em;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    flex-shrink: 0;
}
body.page-shell .prayer-strip .loc-geo:active { background: rgba(184,115,51,0.18); }
body.page-shell .prayer-strip .loc-empty {
    padding: 12px 8px;
    color: var(--tm2, #8C7B6B);
    font-size: 12px;
    text-align: center;
}

/* 6-vakit grid — varsayılan gizli, .expanded ile dikey liste açılır */
body.page-shell .prayer-strip .ps-times {
    order: 5;
    flex: 1 0 100%;
    display: none !important;
    padding: 6px 0 0;
    margin-top: 8px;
    border-top: 1px solid var(--border, #E0D5C8);
    grid-template-columns: 1fr;
    gap: 0;
}
body.page-shell .prayer-strip.expanded .ps-times {
    display: grid !important;
}
body.page-shell .prayer-strip .ps-times .t {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 9px 4px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-soft, #EFE9DC);
    position: relative;
}
body.page-shell .prayer-strip .ps-times .t:last-child { border-bottom: none; }
body.page-shell .prayer-strip .ps-times .t.next {
    background: linear-gradient(90deg, rgba(184,115,51,0.10), transparent 70%);
    padding-left: 10px;
}
body.page-shell .prayer-strip .ps-times .t.next::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--copper, #B87333);
}
body.page-shell .prayer-strip .ps-times .t .lbl {
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--tm2, #8C7B6B);
    flex: 1;
    text-align: left;
}
body.page-shell .prayer-strip .ps-times .t.next .lbl { color: var(--copper, #B87333); }
body.page-shell .prayer-strip .ps-times .t .num {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--t, #2C1810);
    flex-shrink: 0;
}
body.page-shell .prayer-strip .ps-times .t.next .num {
    color: var(--copper, #B87333);
    font-weight: 600;
}

/* === DRAWER (hamburger menu) — mobil görünür === */
body.page-shell .ia-drawer-backdrop[hidden] { display: none !important; }
body.page-shell .ia-drawer-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(15,10,7,0.55);
    z-index: 9998;
    animation: ia-shell-fadein .2s ease-out;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
@keyframes ia-shell-fadein { from { opacity: 0; } to { opacity: 1; } }

body.page-shell .ia-drawer[hidden] { display: none !important; }
body.page-shell .ia-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(340px, 88vw);
    z-index: 9999;
    background: var(--bg, #FAF7F2);
    border-left: 1px solid var(--border, #E0D5C8);
    box-shadow: -20px 0 60px -20px rgba(15,10,7,0.32);
    display: flex; flex-direction: column;
    animation: ia-shell-slidein .28s cubic-bezier(0.2,0.8,0.3,1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--t, #2C1810);
}
@keyframes ia-shell-slidein { from { transform: translateX(100%); } to { transform: translateX(0); } }
body.page-shell.ia-drawer-open { overflow: hidden; }

body.page-shell .ia-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--border, #E0D5C8);
    background: var(--bg-alt, #F3EDE4);
}
body.page-shell .ia-drawer-brand { display: flex; align-items: center; gap: 12px; }
body.page-shell .ia-drawer-brand img {
    width: 40px; height: 40px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
body.page-shell .ia-drawer-ar {
    font-family: 'Reem Kufi', 'Noto Kufi Arabic', serif;
    font-weight: 600; font-size: 18px;
    color: var(--copper, #B87333);
    direction: rtl;
    line-height: 1.4;
}
body.page-shell .ia-drawer-tr {
    font-size: 7.5px;
    letter-spacing: 0.30em;
    color: var(--tm2, #8C7B6B);
    text-transform: uppercase;
    margin-top: 2px;
}
body.page-shell .ia-drawer-close {
    width: 36px; height: 36px;
    background: rgba(184,115,51,0.06);
    border: 1px solid var(--border, #E0D5C8);
    border-radius: 8px;
    color: var(--t, #2C1810);
    cursor: pointer;
    display: grid; place-items: center;
    padding: 0;
}
body.page-shell .ia-drawer-close:active { background: rgba(184,115,51,0.18); }

body.page-shell .ia-drawer-nav {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    padding: 6px 0;
    overflow-y: auto;
}
body.page-shell .ia-drawer-nav a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 22px;
    text-decoration: none;
    color: var(--t, #2C1810);
    border-left: 3px solid transparent;
    transition: background .18s ease, color .18s ease;
    min-height: 44px;
}
body.page-shell .ia-drawer-nav a:hover,
body.page-shell .ia-drawer-nav a:active {
    background: rgba(184,115,51,0.06);
}
body.page-shell .ia-drawer-nav a.active {
    background: linear-gradient(90deg, rgba(184,115,51,0.14) 0%, transparent 60%);
    border-left-color: var(--copper, #B87333);
    color: var(--copper-d, #8B5A2B);
}
body.page-shell .ia-drawer-nav .tr {
    font-size: 13px; letter-spacing: 0.20em;
    font-weight: 600; text-transform: uppercase;
}
body.page-shell .ia-drawer-nav .ar {
    font-family: 'Reem Kufi', 'Noto Kufi Arabic', serif;
    font-weight: 600; font-size: 18px;
    color: var(--copper, #B87333);
    direction: rtl;
    line-height: 1.3;
}

body.page-shell .ia-drawer-foot {
    border-top: 1px solid var(--border, #E0D5C8);
    padding: 14px 18px calc(20px + env(safe-area-inset-bottom, 0));
    flex-shrink: 0;
    display: flex; flex-direction: column; gap: 12px;
    background: var(--bg-alt, #F3EDE4);
}
body.page-shell .ia-drawer-search {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px;
    background: linear-gradient(180deg, var(--copper, #B87333), var(--copper-d, #8B5A2B));
    border: 1px solid var(--copper-d, #8B5A2B);
    border-radius: 8px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px; letter-spacing: 0.28em;
    font-weight: 700; text-transform: uppercase;
    text-decoration: none;
    min-height: 48px;
}
body.page-shell .ia-drawer-search:active { transform: translateY(1px); }
body.page-shell .ia-drawer-mini {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 10px; letter-spacing: 0.18em;
    color: var(--tm2, #8C7B6B);
}
body.page-shell .ia-drawer-mini a { color: var(--tm, #6B5B4F); text-decoration: none; }
body.page-shell .ia-drawer-mini a:active { color: var(--copper, #B87333); }

} /* end @media (max-width: 899px) */

/* ============================================================
 *  AYET-DD — Custom dropdown widget (div/button/input/ul)
 *  Native select kullanılmaz. State: <input type="hidden" id="jumpAyet">
 *  Tüm renkler mevcut tema değişkenlerinden kullanılır (yeni renk yok).
 *  Trigger ve panel aynı genişlikte (panel: left:0 right:0 → parent width).
 * ============================================================ */

.ec-ayet-dd {
    position: relative;
    display: inline-block;
    min-width: 140px;
}
.ec-ayet-dd-panel { min-width: 140px; }
@media (max-width: 768px) {
    .ec-ayet-dd { min-width: 130px !important; }
}

.ec-ayet-dd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 8px;
    background: transparent;
    border: 0;
    font: inherit;
    color: var(--t);
    cursor: pointer;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
}
.ec-ayet-dd-btn:focus { outline: none; }
.ec-ayet-dd-btn:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; border-radius: 4px; }
.ec-ayet-dd-label { white-space: nowrap; }
.ec-ayet-dd-caret {
    margin-left: 6px;
    color: var(--tm);
    font-size: 10px;
    line-height: 1;
    transition: transform .2s ease, color .2s ease;
}
.ec-ayet-dd.open .ec-ayet-dd-caret {
    color: var(--c);
    transform: rotate(180deg);
}

/* Panel — trigger ile aynı genişlik (left:0 + right:0) */
.ec-ayet-dd-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15,10,7,0.12);
    overflow: hidden;
}
.ec-ayet-dd-panel[hidden] { display: none; }

/* Search input — panel üstünde */
.ec-ayet-dd-search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    background: transparent;
    outline: none;
    font: inherit;
    color: var(--t);
}
.ec-ayet-dd-search::placeholder { color: var(--tm); }

/* Liste — max-height + scroll */
.ec-ayet-dd-list {
    max-height: 220px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overscroll-behavior: contain;
}
.ec-ayet-dd-list li {
    padding: 7px 12px;
    cursor: pointer;
    color: var(--t);
    font: inherit;
    line-height: 1.3;
    transition: background .12s ease, color .12s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.ec-ayet-dd-list li:hover,
.ec-ayet-dd-list li:focus {
    background: var(--cream);
    outline: none;
}
.ec-ayet-dd-list li.on {
    background: var(--cream);
    color: var(--c);
    font-weight: 600;
}
/* Scrollbar — tema renkleri */
.ec-ayet-dd-list::-webkit-scrollbar { width: 6px; }
.ec-ayet-dd-list::-webkit-scrollbar-track { background: transparent; }
.ec-ayet-dd-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.ec-ayet-dd-list { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* Mobile: trigger button paper bg + border (touch friendly) */
@media (max-width: 768px) {
    .ec-ayet-dd { min-width: 90px; }
    .ec-ayet-dd-btn {
        min-height: 36px;
        padding: 6px 10px;
        background: var(--paper);
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
    }
    .ec-ayet-dd.open .ec-ayet-dd-btn { border-color: var(--c); }
}