/* ==========================================================================
   assets/islamic-theme.css
   Tema "Islamic Modern / Muslim Premium" — khusus suite halaman ibadah:
   /waktu-sholat, /al-quran, /dzikir, /doa-harian, /arah-kiblat,
   /kalender-hijriah, /asmaul-husna.

   Discipeed dengan body.page-islamic supaya TIDAK menimpa tema Neumorphism
   biru default di halaman lain (produk, dashboard, dll) — hanya aktif saat
   body punya class ini. Warna dasar tetap memakai token --shadow/--radius
   dari style.php supaya konsisten dengan komponen lain (.card, .btn, .chip).
   ========================================================================== */

body.page-islamic{
    --isl-emerald:#0F6B4C;
    --isl-emerald-deep:#0A4A35;
    --isl-emerald-soft:#E6F4EE;
    --isl-gold:#C9A24B;
    --isl-gold-soft:#F6EDD8;
    --isl-ink:#123328;
    --isl-ink-soft:#4C6B60;
    --isl-paper:#FBFAF5;
    /* GLASSMORPHISM: alpha diturunkan jauh dari versi sebelumnya (dulu .66/.46) supaya kartu
       benar-benar tembus pandang, video latar tetap kelihatan lewat kartu — bukan cuma "susu
       buram". Legibilitas dijaga lewat backdrop-filter:blur() di .isl-card (bukan lewat alpha
       tinggi), lihat blok "Kartu islami dasar" di bawah. */
    --isl-surface:rgba(255,255,255,.22);
    --isl-surface-soft:rgba(255,255,255,.14);
    --isl-border:1px solid rgba(255,255,255,.4);
    --isl-glow:0 18px 44px -18px rgba(10,74,53,.35);
    --isl-text-halo:rgba(255,255,255,.75);
    --font-arabic:'Amiri', 'Noto Naskh Arabic', 'Scheherazade New', serif;
    background:
        radial-gradient(1100px 460px at 12% -8%, rgba(15,107,76,.08), transparent 60%),
        radial-gradient(900px 420px at 100% 0%, rgba(201,162,75,.10), transparent 55%),
        var(--isl-paper);
}
body.page-islamic.isl-dark{
    --isl-emerald:#22B37E;
    --isl-emerald-deep:#0E2B22;
    --isl-emerald-soft:rgba(34,179,126,.14);
    --isl-gold:#E4C374;
    --isl-gold-soft:rgba(228,195,116,.14);
    --isl-ink:#EAF3EE;
    --isl-ink-soft:#9FB8AE;
    --isl-paper:#0B1712;
    --isl-surface:rgba(20,30,26,.28);
    --isl-surface-soft:rgba(20,30,26,.18);
    --isl-border:1px solid rgba(255,255,255,.14);
    --isl-glow:0 18px 44px -16px rgba(0,0,0,.55);
    --isl-text-halo:rgba(0,0,0,.7);
    background:
        radial-gradient(1100px 460px at 12% -8%, rgba(34,179,126,.10), transparent 60%),
        radial-gradient(900px 420px at 100% 0%, rgba(228,195,116,.07), transparent 55%),
        var(--isl-paper);
}


/* ---------- Ornamen pattern geometris islami (dipakai berulang, sangat halus) ---------- */
.isl-pattern{
    position:absolute; inset:0; pointer-events:none; opacity:.5;
    background-image:
        radial-gradient(circle at 0 0, transparent 11px, rgba(15,107,76,.06) 12px, transparent 13px),
        radial-gradient(circle at 40px 40px, transparent 11px, rgba(201,162,75,.07) 12px, transparent 13px);
    background-size:40px 40px;
    mask-image:linear-gradient(180deg, #000 0%, transparent 88%);
}
body.isl-dark .isl-pattern{
    background-image:
        radial-gradient(circle at 0 0, transparent 11px, rgba(34,179,126,.09) 12px, transparent 13px),
        radial-gradient(circle at 40px 40px, transparent 11px, rgba(228,195,116,.08) 12px, transparent 13px);
}

/* ---------- Layout umum halaman islami ---------- */
.isl-wrap{ position:relative; overflow:hidden; }
.isl-container{ max-width:880px; margin:0 auto; padding:0 16px; position:relative; z-index:1; }
.isl-container--wide{ max-width:1080px; }

/* ---------- Video latar "ISLAM.mp4" (hanya di dalam .isl-wrap, lihat isl_bg_video()) ----------
   absolute+inset:0 relatif terhadap .isl-wrap yang position:relative -> video ikut diam di
   tempat saat section di-scroll bersama halaman (bukan video yang scroll-jacking), tidak fixed
   ke viewport supaya tidak menembus keluar section islami ke bagian halaman lain. */
.isl-bg-video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    z-index:0; pointer-events:none;
}
/* Overlay TIPIS supaya video terlihat "bening"/jelas (permintaan: full transparan) — bukan
   untuk menutupi video, cuma sedikit meredam supaya video terlalu terang/kontras tidak
   mengganggu. Keterbacaan teks di atas video TIDAK dibebankan ke overlay ini lagi, melainkan
   ke --isl-text-halo (lihat blok "Teks & elemen di luar kartu" di bawah). */
.isl-bg-video-overlay{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:rgba(251,250,245,.1);
}
body.isl-dark .isl-bg-video-overlay{
    background:rgba(11,23,18,.16);
}
/* Pattern dekoratif tetap tampil tipis di atas video+overlay (bukan diganti, cuma ditumpuk). */
.isl-wrap .isl-pattern{ z-index:0; }

/* ---------- Teks & elemen di luar kartu (langsung di atas video, tanpa background sendiri) ----------
   Karena overlay video sekarang dibuat setipis mungkin (permintaan: "full bening transparan"),
   teks yang TIDAK duduk di dalam .isl-card butuh "halo" tipis di baliknya sendiri supaya tetap
   gampang dibaca di atas video apa pun frame-nya — bukan lewat overlay gelap yang menutupi
   seluruh video. Cuma teks-teks telanjang (hero, crumb, judul menu, label lokasi) yang dikasih
   ini; teks di dalam .isl-card tidak butuh karena sudah punya kaca blur di baliknya. */
.isl-crumb-ar, .isl-crumb-id,
.isl-hero-ar, .isl-hero h1, .isl-hero p,
.isl-menu-head .ar, .isl-menu-head .id,
.isl-section-title .ar, .isl-section-title .id,
.isl-lokasi-label .ar, .isl-lokasi-label .id{
    text-shadow:0 1px 3px var(--isl-text-halo), 0 1px 14px var(--isl-text-halo);
}

/* ---------- Header/topbar mini: dark mode toggle ---------- */
.isl-topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 0 0; }
.isl-crumb{ display:flex; flex-direction:column; line-height:1.35; }
.isl-crumb-ar{ font-family:var(--font-arabic); direction:rtl; font-size:14px; color:var(--isl-emerald); font-weight:700; }
.isl-crumb-id{ font-size:10.5px; color:var(--isl-ink-soft); font-weight:600; }
.isl-toggle-dark{
    display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 13px; border-radius:999px;
    background:var(--isl-surface); border:var(--isl-border); box-shadow:var(--isl-glow); color:var(--isl-ink);
    font-size:11.5px; font-weight:700; cursor:pointer; font-family:var(--font-body);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.isl-toggle-dark svg{ width:15px; height:15px; }
.isl-toggle-dark .isl-ic-sun{ display:none; }
body.isl-dark .isl-toggle-dark .isl-ic-moon{ display:none; }
body.isl-dark .isl-toggle-dark .isl-ic-sun{ display:inline-block; }

/* ---------- Hero ---------- */
.isl-hero{ text-align:center; padding:20px 0 8px; position:relative; }
.isl-hero-ar{ font-family:var(--font-arabic); direction:rtl; font-size:clamp(22px,5vw,32px); color:var(--isl-emerald); font-weight:700; margin-bottom:4px; }
.isl-hero-badge{
    display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    color:var(--isl-emerald); background:var(--isl-emerald-soft); border-radius:999px; padding:5px 12px; margin-bottom:10px;
}
.isl-hero h1{ font-family:var(--font-display); font-size:clamp(23px,4.4vw,34px); color:var(--isl-ink); margin-bottom:8px; letter-spacing:-.01em; }
.isl-hero p{ font-size:12.5px; color:var(--isl-ink-soft); max-width:540px; margin:0 auto; line-height:1.7; }
.isl-hero-orn{ width:100%; max-width:280px; height:46px; margin:14px auto 0; opacity:.85; }

/* ---------- Kartu islami dasar ---------- */
.isl-card{
    background:var(--isl-surface); border:var(--isl-border); border-radius:20px; box-shadow:var(--isl-glow);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); position:relative;
}
.isl-card--pad{ padding:20px; }

.isl-quran-search input{ backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }

/* ---------- Lokasi ---------- */
.isl-lokasi{ max-width:560px; margin:20px auto 0; position:relative; }
.isl-lokasi-label{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:8px; }
.isl-lokasi-label .ar{ font-family:var(--font-arabic); direction:rtl; font-size:15px; color:var(--isl-emerald); font-weight:700; }
.isl-lokasi-label .id{ font-size:11px; color:var(--isl-ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.isl-lokasi input{
    width:100%; height:46px; border-radius:15px; border:var(--isl-border); padding:0 16px 0 42px; font-size:13.5px;
    background:var(--isl-surface-soft); color:var(--isl-ink); font-family:var(--font-body);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.isl-lokasi input::placeholder{ color:var(--isl-ink-soft); }
.isl-lokasi-icon{ position:absolute; left:14px; top:38px; width:17px; height:17px; color:var(--isl-emerald); pointer-events:none; }
.isl-lokasi-dropdown{
    position:absolute; left:0; right:0; top:80px; z-index:20; background:var(--isl-paper); border:var(--isl-border);
    border-radius:15px; box-shadow:var(--isl-glow); max-height:260px; overflow-y:auto; display:none;
}
.isl-lokasi-dropdown.open{ display:block; }
.isl-lokasi-dropdown button{
    display:block; width:100%; text-align:left; padding:11px 16px; font-size:12.5px; background:none; border:none;
    cursor:pointer; color:var(--isl-ink); font-family:var(--font-body); border-bottom:1px solid rgba(15,107,76,.08);
}
.isl-lokasi-dropdown button:last-child{ border-bottom:none; }
.isl-lokasi-dropdown button:hover{ background:var(--isl-emerald-soft); }
.isl-lokasi-info{ text-align:center; margin-top:12px; padding:12px 16px; border-radius:14px; background:var(--isl-surface-soft); border:var(--isl-border); }
.isl-lokasi-info-title{ font-size:12.5px; font-weight:800; color:var(--isl-ink); display:flex; align-items:center; justify-content:center; gap:6px; }
.isl-lokasi-info-title svg{ width:14px; height:14px; color:var(--isl-emerald); }
.isl-lokasi-info-sub{ font-size:11.5px; color:var(--isl-ink-soft); margin-top:3px; line-height:1.5; }
.isl-lokasi-info-status{ font-size:10.5px; color:var(--isl-emerald); font-weight:700; margin-top:5px; }
.isl-gps-btn{
    display:flex; align-items:center; justify-content:center; gap:6px; margin:10px auto 0; background:none; border:none;
    cursor:pointer; font-size:11px; color:var(--isl-emerald); font-weight:700; padding:6px; font-family:var(--font-body);
}
.isl-gps-btn svg{ width:13px; height:13px; }
.isl-gps-btn .ar{ font-family:var(--font-arabic); direction:rtl; }

/* ---------- Countdown utama ---------- */
.isl-countdown{ max-width:420px; margin:24px auto 0; text-align:center; padding:26px 20px; }
.isl-countdown-label-ar{ font-family:var(--font-arabic); direction:rtl; font-size:15px; color:var(--isl-emerald); font-weight:700; }
.isl-countdown-label-id{ font-size:10.5px; color:var(--isl-ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }
.isl-countdown-ring{ position:relative; width:172px; height:172px; margin:0 auto; }
.isl-countdown-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.isl-countdown-ring circle{ fill:none; stroke-width:8; }
.isl-countdown-track{ stroke:rgba(15,107,76,.12); }
body.isl-dark .isl-countdown-track{ stroke:rgba(255,255,255,.08); }
.isl-countdown-bar{ stroke:var(--isl-emerald); stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
.isl-countdown-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.isl-countdown-name-ar{ font-family:var(--font-arabic); direction:rtl; font-size:20px; color:var(--isl-ink); font-weight:700; }
.isl-countdown-name-id{ font-size:11px; color:var(--isl-ink-soft); font-weight:700; margin-bottom:4px; }
.isl-countdown-time{ font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--isl-emerald); font-family:var(--font-display); }

/* ---------- Grid 5 waktu ---------- */
.isl-grid5{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; max-width:920px; margin:24px auto 0; }
@media (max-width:760px){ .isl-grid5{ grid-template-columns:repeat(2,1fr); } .isl-grid5 > .isl-waktu-card:last-child{ grid-column:1 / -1; } }
.isl-waktu-card{ text-align:center; padding:16px 8px; transition:box-shadow .25s var(--ease), transform .25s var(--ease); }
.isl-waktu-card.active{ box-shadow:0 0 0 2px var(--isl-gold), var(--isl-glow); transform:translateY(-2px); }
.isl-waktu-card .ar{ font-family:var(--font-arabic); direction:rtl; font-size:19px; color:var(--isl-ink); font-weight:700; margin-bottom:2px; }
.isl-waktu-card.active .ar{ color:var(--isl-emerald); }
.isl-waktu-card .id{ font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--isl-ink-soft); margin-bottom:6px; }
.isl-waktu-card .jam{ font-size:16px; font-weight:800; color:var(--isl-ink); font-family:var(--font-display); }
.isl-waktu-card .isl-active-dot{ display:none; width:6px; height:6px; border-radius:50%; background:var(--isl-gold); margin:6px auto 0; }
.isl-waktu-card.active .isl-active-dot{ display:block; }

/* ---------- Kutipan ---------- */
.isl-quote{ max-width:640px; margin:24px auto 0; text-align:center; padding:18px 20px; }
.isl-quote-mark{ color:var(--isl-gold); font-size:22px; font-family:var(--font-arabic); }
.isl-quote p{ font-size:12.5px; font-style:italic; color:var(--isl-ink-soft); line-height:1.7; }

/* ---------- Status row ---------- */
.isl-status-row{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:18px auto 0; }
.isl-status-chip{
    display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:7px 13px; border-radius:999px;
    background:var(--isl-surface-soft); border:var(--isl-border); color:var(--isl-ink-soft);
}
.isl-status-chip svg{ width:13px; height:13px; }
.isl-status-chip.on{ color:var(--isl-emerald); background:var(--isl-emerald-soft); }

/* ---------- Menu Islami grid ---------- */
.isl-menu-head{ text-align:center; margin:34px 0 16px; }
.isl-menu-head .ar{ font-family:var(--font-arabic); direction:rtl; font-size:19px; color:var(--isl-emerald); font-weight:700; }
.isl-menu-head .id{ font-size:11px; color:var(--isl-ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.isl-menu-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 auto; max-width:920px; }
@media (max-width:760px){ .isl-menu-grid{ grid-template-columns:repeat(2,1fr); } }
.isl-menu-item{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:18px 10px;
    text-decoration:none; transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.isl-menu-item:hover{ transform:translateY(-3px); }
.isl-menu-item.active{ box-shadow:0 0 0 2px var(--isl-gold), var(--isl-glow); }
.isl-menu-item .isl-menu-ic{
    width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background:var(--isl-emerald-soft); color:var(--isl-emerald);
}
.isl-menu-item .isl-menu-ic svg{ width:21px; height:21px; }
.isl-menu-item .ar{ font-family:var(--font-arabic); direction:rtl; font-size:14px; color:var(--isl-ink); font-weight:700; }
.isl-menu-item .id{ font-size:10.5px; color:var(--isl-ink-soft); font-weight:600; }

/* ---------- Islamic footer strip (di atas footer global situs) ---------- */
.isl-footer-strip{
    margin-top:44px; padding:34px 0; background:linear-gradient(155deg, var(--isl-emerald-deep) 0%, #06251A 100%);
    color:#EAF3EE; text-align:center; position:relative; overflow:hidden;
}
.isl-footer-strip .isl-pattern{ opacity:.14; }
.isl-footer-strip-inner{ position:relative; z-index:1; }
.isl-footer-strip h3{ font-family:var(--font-display); font-size:17px; margin-bottom:4px; }
.isl-footer-strip .ar{ font-family:var(--font-arabic); direction:rtl; font-size:14px; color:#B9E4CE; margin-bottom:8px; }
.isl-footer-strip p{ font-size:11.5px; color:#B9CFC6; max-width:460px; margin:0 auto 16px; line-height:1.7; }
.isl-footer-strip-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-bottom:14px; }
.isl-footer-strip-nav a{ font-size:11.5px; color:#CFE9DD; font-weight:600; text-decoration:none; }
.isl-footer-strip-nav a:hover{ color:#fff; text-decoration:underline; }
.isl-footer-strip-copy{ font-size:10.5px; color:#7FA294; }

/* ---------- Toggle switch modern (dipakai di section notifikasi read-only status) ---------- */
.isl-switch{ position:relative; width:38px; height:22px; border-radius:999px; background:rgba(15,107,76,.16); flex:none; }
.isl-switch.on{ background:var(--isl-emerald); }
.isl-switch .dot{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .2s var(--ease); box-shadow:0 1px 3px rgba(0,0,0,.25); }
.isl-switch.on .dot{ left:18px; }
.isl-toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; }
.isl-toggle-row + .isl-toggle-row{ border-top:1px solid rgba(15,107,76,.1); }
.isl-toggle-row .txt .t1{ font-size:12.5px; font-weight:700; color:var(--isl-ink); display:flex; align-items:center; gap:7px; }
.isl-toggle-row .txt .t1 svg{ width:15px; height:15px; color:var(--isl-emerald); }
.isl-toggle-row .txt .t2{ font-size:10.5px; color:var(--isl-ink-soft); margin-top:2px; }

/* ---------- Banner notifikasi waktu sholat tiba ---------- */
.isl-banner{
    position:fixed; left:50%; bottom:20px; transform:translate(-50%,140%); width:min(92vw,420px); z-index:200;
    background:var(--isl-paper); border:var(--isl-border); border-radius:18px; padding:16px 18px;
    box-shadow:0 16px 40px rgba(0,0,0,.28); transition:transform .4s var(--ease); text-align:center;
}
.isl-banner.show{ transform:translate(-50%,0); }
.isl-banner .judul{ font-weight:800; font-size:14.5px; margin-bottom:4px; color:var(--isl-ink); display:flex; align-items:center; justify-content:center; gap:6px; }
.isl-banner .judul svg{ width:16px; height:16px; color:var(--isl-emerald); }
.isl-banner .sub{ font-size:11.5px; color:var(--isl-ink-soft); }

/* ---------- Halaman generik (Dzikir/Doa/Quran/Kiblat/Hijriah/Asmaul Husna) ---------- */
.isl-section{ margin-top:28px; }
.isl-section-title{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:16px; }
.isl-section-title .ar{ font-family:var(--font-arabic); direction:rtl; font-size:20px; color:var(--isl-emerald); font-weight:700; }
.isl-section-title .id{ font-size:11px; color:var(--isl-ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }

.isl-du-tabs{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:18px; }
.isl-du-tab{
    font-size:11.5px; font-weight:700; padding:8px 15px; border-radius:999px; background:var(--isl-surface-soft);
    border:var(--isl-border); color:var(--isl-ink-soft); cursor:pointer; font-family:var(--font-body);
}
.isl-du-tab.active{ background:var(--isl-emerald); color:#fff; border-color:transparent; }

.isl-du-card{ padding:20px; margin-bottom:14px; }
.isl-du-card h3{ font-size:14px; color:var(--isl-ink); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.isl-du-card h3 svg{ width:16px; height:16px; color:var(--isl-emerald); }
.isl-du-ar{ font-family:var(--font-arabic); direction:rtl; font-size:22px; line-height:2.1; color:var(--isl-ink); text-align:right; margin-bottom:10px; }
.isl-du-latin{ font-size:12px; font-style:italic; color:var(--isl-emerald); line-height:1.8; margin-bottom:8px; }
.isl-du-id{ font-size:12px; color:var(--isl-ink-soft); line-height:1.8; }
.isl-du-copy{
    display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:11px; font-weight:700; color:var(--isl-emerald);
    background:var(--isl-emerald-soft); border:none; border-radius:999px; padding:7px 14px; cursor:pointer; font-family:var(--font-body);
}
.isl-du-copy svg{ width:13px; height:13px; }

/* Dzikir counter */
.isl-dzikir-box{ max-width:420px; margin:0 auto; text-align:center; padding:26px 20px; }
.isl-dzikir-select{ display:flex; gap:8px; overflow-x:auto; margin-bottom:18px; padding-bottom:4px; }
.isl-dzikir-select button{
    flex:none; font-size:11.5px; font-weight:700; padding:8px 14px; border-radius:12px; background:var(--isl-surface-soft);
    border:var(--isl-border); color:var(--isl-ink-soft); cursor:pointer; font-family:var(--font-body);
}
.isl-dzikir-select button.active{ background:var(--isl-emerald); color:#fff; }
.isl-dzikir-ar{ font-family:var(--font-arabic); direction:rtl; font-size:30px; color:var(--isl-ink); margin-bottom:2px; }
.isl-dzikir-latin{ font-size:12px; color:var(--isl-ink-soft); margin-bottom:20px; }
.isl-dzikir-count{ font-size:52px; font-weight:800; color:var(--isl-emerald); font-family:var(--font-display); line-height:1; }
.isl-dzikir-target{ font-size:12px; color:var(--isl-ink-soft); margin-top:4px; margin-bottom:20px; }
.isl-dzikir-tap{
    width:150px; height:150px; border-radius:50%; margin:0 auto; background:var(--isl-emerald); color:#fff; border:none;
    box-shadow:var(--isl-glow); font-size:13px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:transform .1s ease;
}
.isl-dzikir-tap:active{ transform:scale(.94); }
.isl-dzikir-reset{ display:block; margin:16px auto 0; background:none; border:none; color:var(--isl-ink-soft); font-size:11.5px; font-weight:700; cursor:pointer; text-decoration:underline; }

/* Kiblat compass */
.isl-kiblat-box{ max-width:400px; margin:0 auto; text-align:center; padding:28px 20px; }
.isl-compass{ position:relative; width:220px; height:220px; margin:0 auto 18px; border-radius:50%; background:var(--isl-surface-soft); border:var(--isl-border); box-shadow:var(--isl-glow); }
.isl-compass-ring{ position:absolute; inset:10px; border-radius:50%; border:1px dashed rgba(15,107,76,.25); }
.isl-compass-n{ position:absolute; top:6px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:800; color:var(--isl-ink-soft); }
.isl-compass-needle{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:transform .3s ease; }
.isl-compass-needle svg{ width:34px; height:34px; color:var(--isl-gold); }
.isl-kiblat-deg{ font-size:30px; font-weight:800; color:var(--isl-emerald); font-family:var(--font-display); }
.isl-kiblat-sub{ font-size:12px; color:var(--isl-ink-soft); margin-top:4px; }
.isl-kiblat-btn{
    margin-top:16px; height:44px; padding:0 20px; border-radius:14px; background:var(--isl-emerald); color:#fff; border:none;
    font-size:12.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body);
}
.isl-kiblat-note{ font-size:11px; color:var(--isl-ink-soft); margin-top:14px; line-height:1.6; }

/* Kalender Hijriah */
.isl-hijri-box{ max-width:460px; margin:0 auto; text-align:center; padding:26px 20px; }
.isl-hijri-date-ar{ font-family:var(--font-arabic); direction:rtl; font-size:26px; color:var(--isl-emerald); font-weight:700; margin-bottom:4px; }
.isl-hijri-date-id{ font-size:12.5px; color:var(--isl-ink-soft); margin-bottom:16px; }
.isl-hijri-month-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:10px; }
.isl-hijri-day{ font-size:11px; padding:8px 2px; border-radius:9px; color:var(--isl-ink-soft); }
.isl-hijri-day.today{ background:var(--isl-emerald); color:#fff; font-weight:800; }
.isl-hijri-dow{ font-size:9.5px; font-weight:800; color:var(--isl-ink-soft); text-transform:uppercase; }

/* Asmaul Husna grid */
.isl-husna-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:640px){ .isl-husna-grid{ grid-template-columns:repeat(2,1fr); } }
.isl-husna-card{ padding:16px 10px; text-align:center; }
.isl-husna-num{ font-size:10px; color:var(--isl-gold); font-weight:800; margin-bottom:6px; }
.isl-husna-ar{ font-family:var(--font-arabic); direction:rtl; font-size:19px; color:var(--isl-ink); margin-bottom:4px; }
.isl-husna-latin{ font-size:11px; color:var(--isl-emerald); font-weight:700; }
.isl-husna-id{ font-size:10.5px; color:var(--isl-ink-soft); margin-top:2px; }

/* Qur'an reader */
.isl-quran-search{ max-width:420px; margin:0 auto 18px; }
.isl-quran-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (max-width:640px){ .isl-quran-list{ grid-template-columns:1fr; } }
.isl-surat-card{ display:flex; align-items:center; gap:12px; padding:13px 15px; text-decoration:none; cursor:pointer; }
.isl-surat-num{ width:34px; height:34px; border-radius:10px; background:var(--isl-emerald-soft); color:var(--isl-emerald); font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; flex:none; }
.isl-surat-name-id{ font-size:12.5px; font-weight:700; color:var(--isl-ink); }
.isl-surat-name-ar{ font-family:var(--font-arabic); direction:rtl; font-size:15px; color:var(--isl-emerald); }
.isl-surat-meta{ font-size:10.5px; color:var(--isl-ink-soft); margin-top:1px; }
.isl-ayat-card{ padding:18px; margin-bottom:10px; }
.isl-ayat-num{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--isl-emerald-soft); color:var(--isl-emerald); font-size:10.5px; font-weight:800; float:right; margin-left:10px; }
.isl-ayat-ar{ font-family:var(--font-arabic); direction:rtl; font-size:23px; line-height:2.2; color:var(--isl-ink); text-align:right; margin-bottom:10px; }
.isl-ayat-latin{ font-size:12px; font-style:italic; color:var(--isl-emerald); line-height:1.8; clear:both; margin-bottom:8px; }
.isl-ayat-id{ font-size:12px; color:var(--isl-ink-soft); line-height:1.8; }
.isl-loading{ text-align:center; padding:30px 10px; font-size:12px; color:var(--isl-ink-soft); }
.isl-error{ text-align:center; padding:20px; font-size:12px; color:var(--danger); }
.isl-back-link{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--isl-emerald); text-decoration:none; margin-bottom:14px; }
.isl-back-link svg{ width:14px; height:14px; }