/* Layout: sticky brand bar with sliding pill tabs on desktop, icon tab bar on phones;
   library views on a 1120px grid, every reading view on a 740px column. */
:root{
  --paper:#F5F3ED;
  --surface:#FFFFFF;
  --surface-2:#EBE9E1;
  --ink:#101C16;
  --ink-soft:#56655C;
  --line:#DCD8CC;
  --emerald:#05593B;
  --emerald-ink:#043F2A;
  --emerald-soft:#E0EDE6;
  --gold:#8F6B1C;
  --gold-soft:#F5EAD2;
  --shadow:0 1px 2px rgba(20,30,26,.05), 0 8px 24px -14px rgba(20,30,26,.22);
  --shadow-lg:0 2px 6px rgba(20,30,26,.06), 0 24px 48px -26px rgba(20,30,26,.35);

  --font-ui:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-read:'Lora', Georgia, 'Times New Roman', serif;
  --font-quran:'Scheherazade New', 'Amiri Quran', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  --font-arab:'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', serif;
  /* Untuk naskah khutbah: Amiri dirancang untuk teks mengalir, bukan mushaf,
     sehingga jarak antarkata lebih rapat dan rapi saat dicetak. */
  --font-naskah:'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', 'Traditional Arabic', serif;

  --r-sm:10px; --r-md:14px; --r-lg:20px;
  --arab-size:36px; --latin-size:17px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#061109;
    --surface:#0C1D14;
    --surface-2:#14271B;
    --ink:#E8EEE9;
    --ink-soft:#8FA296;
    --line:#1E3326;
    --emerald:#45CE9B;
    --emerald-ink:#7FE7BE;
    --emerald-soft:#0C2A1D;
    --gold:#E8C877;
    --gold-soft:#2A2314;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.7);
    --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 24px 48px -26px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#061109;
  --surface:#0C1D14;
  --surface-2:#14271B;
  --ink:#E8EEE9;
  --ink-soft:#8FA296;
  --line:#1E3326;
  --emerald:#45CE9B;
  --emerald-ink:#7FE7BE;
  --emerald-soft:#0C2A1D;
  --gold:#E8C877;
  --gold-soft:#2A2314;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.7);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 24px 48px -26px rgba(0,0,0,.8);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-ui); font-size:16px; line-height:1.55;
  -webkit-text-size-adjust:100%;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:25;background:var(--surface)}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.02em;font-weight:800}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--emerald);outline-offset:2px;border-radius:6px}
::selection{background:var(--emerald-soft);color:var(--ink)}

/* ---------- App bar ---------- */
.appbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb, var(--surface) 88%, transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.appbar-in{
  max-width:1120px;margin-inline:auto;display:flex;align-items:center;gap:16px;
  padding-block:11px;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
}
.brand{display:flex;align-items:center;gap:9px;background:none;border:0;padding:0;cursor:pointer;color:var(--emerald)}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--emerald-soft);color:var(--emerald)}
.brand-text{font-size:17px;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.brand-text strong{font-weight:800;color:var(--emerald)}

.rail{position:relative;display:none;margin-inline:auto;gap:2px;padding:4px;border-radius:999px;background:var(--surface-2)}
.rail-item{position:relative;z-index:1;padding:7px 15px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--ink-soft);transition:color .18s}
.rail-item.is-on{color:var(--surface)}
.rail-pill{position:absolute;z-index:0;top:4px;height:calc(100% - 8px);border-radius:999px;background:var(--emerald);transition:transform .34s cubic-bezier(.4,1.2,.4,1), width .34s cubic-bezier(.4,1.2,.4,1);left:0}
.appbar-act{display:flex;gap:6px;margin-left:auto}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:.16s}
.icon-btn:hover{color:var(--emerald);border-color:var(--emerald);background:var(--emerald-soft)}

@media (min-width:900px){ .rail{display:flex} }

/* ---------- Main ---------- */
#main{
  max-width:1120px;margin-inline:auto;
  padding-block:24px 28px;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
}
.view{display:none;animation:fade .3s ease}
.view.is-on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.page-head{margin-bottom:20px;max-width:62ch}
.page-head h1{font-size:clamp(28px,4.4vw,38px)}
.page-head p{margin-top:7px;color:var(--ink-soft);font-size:15.5px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);padding:clamp(22px,4vw,40px);box-shadow:var(--shadow)}
.hero-orn{position:absolute;inset:auto -70px -110px auto;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle at 30% 30%, var(--emerald-soft), transparent 68%);pointer-events:none}
.hero-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--emerald)}
.hero-bismillah{font-family:var(--font-quran);font-size:clamp(26px,4.6vw,38px);line-height:2.1;color:var(--gold);margin-top:10px}
.hero-title{font-size:clamp(26px,4.6vw,40px);margin-top:4px;max-width:16ch}
.hero-sub{margin-top:12px;max-width:56ch;color:var(--ink-soft);font-family:var(--font-read);font-size:16px;line-height:1.7}
.hero-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.hero-stat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.hero-stat div{min-width:0}
.hero-stat b{display:block;font-size:clamp(18px,2.6vw,24px);font-variant-numeric:tabular-nums}
.hero-stat span{font-size:12.5px;color:var(--ink-soft)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid transparent;font-size:14.5px;font-weight:700;cursor:pointer;transition:.16s}
.btn-primary{background:var(--emerald);color:#fff;border-color:var(--emerald)}
:root[data-theme="dark"] .btn-primary{color:#07201A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-primary{color:#07201A}}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--emerald);color:var(--emerald)}
.btn-sm{padding:6px 13px;font-size:13px}
.link-btn{background:none;border:0;padding:0;color:var(--emerald);font-weight:700;font-size:14px;cursor:pointer}

/* ---------- Blocks ---------- */
.block{margin-top:32px}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:13px}
.block-head h2{font-size:19px}
.block-note{font-size:13px;color:var(--ink-soft)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow)}

.ayat-today{padding:22px}
.ayat-today .ay-ar{font-family:var(--font-quran);font-size:clamp(24px,3.6vw,32px);line-height:2.2;text-align:right;direction:rtl}
.ayat-today .ay-id{margin-top:14px;font-family:var(--font-read);font-size:16px;line-height:1.75;color:var(--ink)}
.ayat-today .ay-src{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;color:var(--ink-soft)}
.ayat-today .ay-src b{color:var(--emerald)}

.quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.quick button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:13px 15px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;transition:.16s}
.quick button:hover{border-color:var(--emerald);box-shadow:var(--shadow)}
.quick b{font-size:15px}
.quick span{font-size:12.5px;color:var(--ink-soft)}
.quick i{font-style:normal;font-family:var(--font-arab);font-size:18px;color:var(--gold);margin-bottom:2px}

.tema-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tema-card{padding:16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;transition:.16s;display:flex;flex-direction:column;gap:6px;min-width:0}
.tema-card:hover{border-color:var(--emerald);box-shadow:var(--shadow)}
.tema-card .t-ar{font-family:var(--font-arab);font-size:20px;color:var(--gold);direction:rtl}
.tema-card b{font-size:16px}
.tema-card span{font-size:13px;color:var(--ink-soft)}

.howto{list-style:none;counter-reset:ht;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.howto li{counter-increment:ht;position:relative;padding:16px 16px 16px 48px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);min-width:0}
.howto li::before{content:counter(ht);position:absolute;left:16px;top:15px;width:22px;height:22px;border-radius:7px;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;font-size:12px;font-weight:800}
.howto b{display:block;font-size:15px;margin-bottom:3px}
.howto span{font-size:13.5px;color:var(--ink-soft)}

.resume{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px;padding:16px 18px;border-radius:var(--r-md);background:var(--emerald-soft);border:1px solid color-mix(in srgb, var(--emerald) 28%, transparent)}
.resume b{font-size:15px}
.resume span{font-size:13px;color:var(--ink-soft);display:block}
.resume .btn{margin-left:auto}

/* ---------- Toolbar ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.search{display:flex;align-items:center;gap:9px;flex:1 1 260px;min-width:0;padding:0 14px;height:44px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft)}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:15px;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.16s}
.chip:hover{border-color:var(--emerald);color:var(--emerald)}
.chip.is-on{background:var(--emerald);border-color:var(--emerald);color:#fff}
:root[data-theme="dark"] .chip.is-on{color:#07201A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip.is-on{color:#07201A}}
.select-wrap{position:relative;flex:1 1 220px;min-width:0}
.select-wrap select, .fld select{width:100%;height:44px;padding:0 38px 0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:15px;font-weight:600;appearance:none;cursor:pointer}
.select-wrap::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:translateY(-70%) rotate(45deg);pointer-events:none}

/* ---------- Surah grid ---------- */
.surah-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:10px}
.surah-card{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;transition:.16s;min-width:0}
.surah-card:hover{border-color:var(--emerald);box-shadow:var(--shadow);transform:translateY(-1px)}
.s-num{flex:none;position:relative;width:40px;height:40px;display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.s-num::before{content:"";position:absolute;inset:0;border:1.5px solid var(--gold);opacity:.45;transform:rotate(45deg);border-radius:8px}
.s-main{flex:1;min-width:0}
.s-main b{display:block;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-main span{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.s-ar{flex:none;font-family:var(--font-arab);font-size:22px;color:var(--emerald);direction:rtl}

/* ---------- Reader ---------- */
.reader-bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 61px);z-index:20;display:flex;align-items:center;gap:12px;padding:10px 0;margin-bottom:8px;background:var(--paper);border-bottom:1px solid var(--line)}
.reader-id{flex:1;min-width:0}
.reader-id strong{display:block;font-size:17px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-id span{display:block;font-size:12.5px;color:var(--ink-soft)}
.reader-nav{display:flex;gap:6px}
.reader-body{max-width:740px;margin-inline:auto}

.surah-head{text-align:center;padding:26px 18px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);margin-bottom:18px}
.surah-head .sh-ar{font-family:var(--font-arab);font-size:clamp(28px,5vw,40px);color:var(--emerald)}
.surah-head .sh-lat{font-size:14px;color:var(--ink-soft);margin-top:4px}
.surah-head .sh-bis{font-family:var(--font-quran);font-size:clamp(23px,4vw,30px);line-height:2.1;color:var(--gold);margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.surah-desc{margin-top:14px;font-size:14px;color:var(--ink-soft);font-family:var(--font-read);line-height:1.7;text-align:left}
.surah-desc summary{cursor:pointer;font-family:var(--font-ui);font-weight:700;color:var(--emerald);font-size:13.5px;text-align:center;list-style:none}
.surah-desc summary::-webkit-details-marker{display:none}
.surah-desc p{margin-top:10px}

.player{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);margin-bottom:18px;box-shadow:var(--shadow)}
.player b{font-size:14px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player small{font-size:12px;color:var(--ink-soft)}
.play-btn{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--emerald);color:#fff;display:grid;place-items:center;cursor:pointer}
:root[data-theme="dark"] .play-btn{color:#07201A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .play-btn{color:#07201A}}

.ayat{padding:20px 0;border-bottom:1px solid var(--line)}
.ayat:last-child{border-bottom:0}
.ay-top{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ay-badge{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:var(--gold-soft);color:var(--gold);font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.ay-tools{display:flex;gap:3px;margin-left:auto}
.ay-tool{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;border:0;background:none;color:var(--ink-soft);cursor:pointer;transition:.15s}
.ay-tool:hover{background:var(--surface-2);color:var(--emerald)}
.ay-tool.is-on{color:var(--gold)}
.ay-arab{font-family:var(--font-quran);font-size:var(--arab-size);line-height:2.25;text-align:right;direction:rtl;color:var(--ink)}
.ay-latin{margin-top:12px;font-family:var(--font-read);font-style:italic;font-size:calc(var(--latin-size) - 2px);color:var(--ink-soft);line-height:1.7}
.ay-id{margin-top:10px;font-family:var(--font-read);font-size:var(--latin-size);line-height:1.8}
.ay-tafsir{margin-top:14px;padding:16px;border-radius:var(--r-md);background:var(--emerald-soft);border-left:3px solid var(--emerald);font-family:var(--font-read);font-size:calc(var(--latin-size) - 1px);line-height:1.85}
.ay-tafsir h4{margin:0 0 8px;font-family:var(--font-ui);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--emerald-ink)}
.ay-tafsir p + p{margin-top:10px}
body.tilawah .ay-latin, body.tilawah .ay-id{display:none}

/* ---------- Tafsir view ---------- */
.tafsir-item{padding:20px 0;border-bottom:1px solid var(--line);max-width:740px;margin-inline:auto}
.tafsir-item:last-child{border-bottom:0}
.tafsir-item .t-no{display:inline-block;padding:3px 11px;border-radius:999px;background:var(--emerald-soft);color:var(--emerald-ink);font-size:12px;font-weight:800;margin-bottom:10px}
.tafsir-item .t-ar{font-family:var(--font-quran);font-size:calc(var(--arab-size) - 6px);line-height:2.2;direction:rtl;text-align:right;margin-bottom:12px}
.tafsir-item .t-id{font-family:var(--font-read);font-size:var(--latin-size);line-height:1.85;color:var(--ink)}
.tafsir-item .t-id p + p{margin-top:11px}
mark{background:var(--gold-soft);color:var(--ink);border-radius:3px;padding:0 2px}

/* ---------- Kitab ---------- */
.upload{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:18px;border-radius:var(--r-md);border:1.5px dashed var(--line);background:var(--surface);margin-bottom:16px;transition:.18s}
.upload.is-drag{border-color:var(--emerald);background:var(--emerald-soft)}
.upload-ic{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--emerald-soft);color:var(--emerald)}
.upload-txt{flex:1 1 220px;min-width:0}
.upload-txt strong{display:block;font-size:15px}
.upload-txt span{font-size:13px;color:var(--ink-soft)}
.upload label.btn{cursor:pointer}
.up-row{display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);margin-bottom:8px;font-size:13.5px}
.up-row .bar{flex:1;min-width:0;height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.up-row .bar i{display:block;height:100%;background:var(--emerald);transition:width .25s}

.kitab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.kitab-card{position:relative;display:flex;flex-direction:column;gap:7px;padding:17px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;transition:.16s;min-width:0;overflow:hidden}
.kitab-card:hover{border-color:var(--emerald);box-shadow:var(--shadow);transform:translateY(-1px)}
.kitab-card::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--gold),var(--emerald))}
.kitab-card .k-ar{font-family:var(--font-arab);font-size:21px;color:var(--gold);direction:rtl;line-height:1.7}
.kitab-card b{font-size:15.5px}
.kitab-card .k-by{font-size:12.5px;color:var(--ink-soft)}
.kitab-card .k-desc{font-size:13px;color:var(--ink-soft);font-family:var(--font-read);line-height:1.6}
.k-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.k-tag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft)}
.k-tag.own{background:var(--emerald-soft);color:var(--emerald-ink)}
.k-del{position:absolute;right:8px;top:10px;width:26px;height:26px;border-radius:8px;border:0;background:var(--surface-2);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;opacity:0;transition:.15s}
.kitab-card:hover .k-del{opacity:1}
.k-del:hover{background:#C0392B;color:#fff}

.bab{border-bottom:1px solid var(--line);padding:18px 0}
.bab:last-child{border-bottom:0}
.bab h3{font-size:17px;margin-bottom:4px}
.bab .b-ar{font-family:var(--font-arab);font-size:clamp(20px,3.4vw,26px);line-height:2.1;direction:rtl;text-align:right;color:var(--ink);margin:12px 0}
.bab .b-id{font-family:var(--font-read);font-size:var(--latin-size);line-height:1.85}
.bab .b-id p + p{margin-top:11px}
.bab .b-note{margin-top:12px;padding:13px 15px;border-radius:var(--r-sm);background:var(--surface-2);font-size:14px;font-family:var(--font-read);line-height:1.75;color:var(--ink-soft)}
.bab .b-note b{color:var(--emerald-ink);font-family:var(--font-ui);font-size:12px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:5px}
.bab-head{display:flex;align-items:flex-start;gap:10px}
.bab-head .btn-sm{margin-left:auto;flex:none}

.hit{padding:14px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);margin-bottom:9px}
.hit .h-src{font-size:12px;font-weight:700;color:var(--emerald);margin-bottom:5px}
.hit .h-txt{font-family:var(--font-read);font-size:14.5px;line-height:1.75;color:var(--ink-soft)}
.hit-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 12px}
.hit-head b{font-size:14px}

/* ---------- Rangkuman ---------- */
.seg{display:inline-flex;gap:3px;padding:4px;border-radius:999px;background:var(--surface-2);margin-bottom:20px}
.seg-item{padding:8px 18px;border-radius:999px;border:0;background:none;font-size:14px;font-weight:700;color:var(--ink-soft);cursor:pointer;transition:.16s}
.seg-item.is-on{background:var(--surface);color:var(--emerald);box-shadow:var(--shadow)}

.paket-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.paket-card{position:relative;padding:20px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;transition:.16s;display:flex;flex-direction:column;gap:8px;min-width:0}
.paket-card:hover{border-color:var(--emerald);box-shadow:var(--shadow);transform:translateY(-1px)}
.paket-card .p-ar{font-family:var(--font-arab);font-size:24px;color:var(--gold);direction:rtl}
.paket-card b{font-size:17px}
.paket-card .p-sub{font-size:13.5px;color:var(--ink-soft);font-family:var(--font-read);line-height:1.6}
.paket-card .p-meta{margin-top:4px;font-size:12px;font-weight:700;color:var(--emerald)}

.naskah{max-width:760px;margin-inline:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3.6vw,34px);box-shadow:var(--shadow)}
.naskah-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.naskah-top h2{font-size:21px;flex:1 1 200px;min-width:0}
.nk-sec{margin-top:24px}
.nk-sec > h3{font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--emerald);margin-bottom:10px}
.nk-ar{font-family:var(--font-quran);font-size:calc(var(--arab-size) - 8px);line-height:2.2;direction:rtl;text-align:right;margin-bottom:9px}
.nk-ar.prose{font-family:var(--font-arab);font-size:calc(var(--arab-size) - 12px)}
.nk-id{font-family:var(--font-read);font-size:var(--latin-size);line-height:1.85}
.nk-ref{font-size:12.5px;font-weight:700;color:var(--gold);margin-top:6px}
.nk-item{padding:15px 0;border-bottom:1px dashed var(--line)}
.nk-item:last-child{border-bottom:0}
.nk-points{margin:0;padding-left:20px;font-family:var(--font-read);font-size:var(--latin-size);line-height:1.85}
.nk-points li{margin-bottom:7px}
.nk-khut{padding:16px;border-radius:var(--r-md);background:var(--surface-2);font-family:var(--font-read);line-height:1.8;font-size:15px}
.nk-khut p + p{margin-top:11px}

.susun-form{display:grid;gap:14px;max-width:760px;margin-inline:auto;padding:clamp(18px,3vw,26px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.susun-form label > span{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.susun-form input[type=text], .susun-form textarea{width:100%;padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--paper);font-size:15px;outline:none}
.susun-form input[type=text]:focus, .susun-form textarea:focus{border-color:var(--emerald)}
.susun-form .hintline{font-size:12.5px;color:var(--ink-soft)}

/* ---------- Sheet / toast / misc ---------- */
.sheet-bg{position:fixed;inset:0;z-index:40;background:rgba(10,20,17,.45);backdrop-filter:blur(2px)}
.sheet{position:fixed;z-index:41;right:0;top:0;bottom:0;width:min(380px,100%);background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px);animation:slidein .26s ease}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.sheet-head h3{font-size:17px}
.sheet-body{padding:18px;overflow:auto;display:grid;gap:18px}
.fld{display:block}
.fld > span{display:block;font-size:13px;font-weight:700;margin-bottom:8px}
.fld input[type=range]{width:100%;accent-color:var(--emerald)}
.fld output{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.prev-arab{font-family:var(--font-quran);font-size:var(--arab-size);line-height:2.1;text-align:right;direction:rtl;padding:14px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line)}
.switches{display:grid;gap:10px}
.sw{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.sw input{width:18px;height:18px;accent-color:var(--emerald);flex:none}

.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;padding:11px 20px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);animation:pop .22s ease}
@keyframes pop{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (min-width:900px){.toast{bottom:28px}}

.skeleton{border-radius:var(--r-sm);background:linear-gradient(90deg,var(--surface-2),color-mix(in srgb,var(--surface-2) 55%, var(--surface)),var(--surface-2));background-size:200% 100%;animation:shim 1.3s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.sk-lg{height:96px}
.sk-row{height:62px;margin-bottom:9px}

.state{padding:38px 22px;text-align:center;color:var(--ink-soft);font-size:15px;max-width:520px;margin-inline:auto}
.state b{display:block;color:var(--ink);font-size:17px;margin-bottom:6px}
.state .btn{margin-top:14px}

/* ---------- Tab bar (phones) ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  background:color-mix(in srgb, var(--surface) 94%, transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:max(4px, env(safe-area-inset-left,0px));
  padding-right:max(4px, env(safe-area-inset-right,0px));
}
.tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 8px;color:var(--ink-soft);font-size:10.5px;font-weight:700;position:relative;transition:color .16s}
.tab svg{width:22px;height:22px}
.tab.is-on{color:var(--emerald)}
.tab.is-on::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--emerald)}
body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){ .tabbar{display:none} body{padding-bottom:0} }

/* ---------- Slogan & fitur hero ---------- */
.brand-text{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.brand-slogan{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-soft)}
@media (max-width:420px){.brand-slogan{display:none}}
.hero-title{max-width:22ch}
.hero-feat{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.hero-feat li{display:flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;background:var(--surface-2);font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.hero-feat li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}

/* ---------- Modul Kajian ---------- */
.entry-list{display:grid;gap:10px}
.entry{padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);min-width:0}
.entry-head b{font-size:15.5px;display:block}
.entry-sub{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.entry-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft)}
.badge.gold{background:var(--gold-soft);color:var(--gold)}
.entry-act{display:flex;flex-wrap:wrap;align-items:center;margin-top:12px}
.entry-body{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.entry-body .b-ar{font-family:var(--font-arab);font-size:calc(var(--arab-size) - 12px);line-height:2.1;text-align:right;direction:rtl}
.entry-body .b-note{margin:14px 0 4px;padding:9px 13px}
.entry-body .b-note b{margin-bottom:0}
.pager{display:flex;justify-content:center;margin-top:18px}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.form-cell{padding:12px 14px;border-radius:var(--r-sm);background:var(--surface-2);min-width:0}
.form-cell span{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.form-cell b{display:block;font-family:var(--font-arab);font-size:22px;line-height:1.9;color:var(--gold);word-break:break-word}

.kajian-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:12px}
.kajian-card{display:flex;flex-direction:column;gap:5px;padding:16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;transition:.16s;min-width:0}
.kajian-card:hover{border-color:var(--emerald);box-shadow:var(--shadow);transform:translateY(-1px)}
.kajian-card b{font-size:15.5px}
.kajian-card span{font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.kajian-card i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--gold)}

/* enam tab pada layar sempit */
.tab{font-size:9.5px;white-space:nowrap}
.tab svg{width:21px;height:21px}
@media (min-width:520px){ .tab{font-size:11px} }

/* ---------- Kata demi kata ---------- */
.kata-wrap{margin-top:14px;padding:16px;border-radius:var(--r-md);background:var(--surface-2)}
.kata-grid{display:flex;flex-wrap:wrap;gap:7px}
.kata-chip{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 11px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);min-width:0}
.kata-chip b{font-family:var(--font-quran);font-size:calc(var(--arab-size) * 0.62);line-height:1.9;color:var(--ink)}
.kata-chip i{font-style:normal;direction:ltr;font-size:12px;color:var(--ink-soft);text-align:center;max-width:150px}
.kata-empty{font-size:14px;color:var(--ink-soft)}

/* ---------- Manuskrip & infografis ---------- */
.fig{margin:0}
.fig img{display:block;width:100%;max-width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}
.fig figcaption{margin-top:9px;font-size:13px;color:var(--ink-soft);font-family:var(--font-read)}
.spec{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.spec-row{display:flex;flex-wrap:wrap;gap:4px 14px;padding:11px 14px;background:var(--surface);min-width:0}
.spec-row span{flex:0 0 170px;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.spec-row b{flex:1 1 180px;min-width:0;font-size:14px;font-weight:600;word-break:break-word}
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.info-card{margin:0;cursor:zoom-in;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--surface);transition:.16s}
.info-card:hover{border-color:var(--emerald);box-shadow:var(--shadow);transform:translateY(-1px)}
.info-card img{display:block;width:100%;height:auto}
.info-card figcaption{padding:11px 13px;font-size:13.5px;font-weight:700}
.lightbox{position:fixed;inset:0;z-index:60;display:grid;place-items:center;gap:12px;align-content:center;padding:24px;background:rgba(8,16,13,.88);cursor:zoom-out}
.lightbox img{max-width:min(100%,1100px);max-height:78vh;height:auto;border-radius:var(--r-md)}
.lightbox p{color:#fff;font-size:14px;font-weight:600;text-align:center}

/* ---------- Ibadah ---------- */
.art{display:block;width:100%;max-width:340px;height:auto}
.art-sm{display:block;width:64px;height:auto}
.salat-hero{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:clamp(18px,3vw,26px);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);margin-bottom:18px}
.salat-hero .art{flex:1 1 240px;min-width:0}
.salat-now{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:3px}
.salat-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--emerald)}
.salat-now strong{font-size:clamp(22px,3.6vw,30px);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.salat-now span:not(.salat-eyebrow){font-size:13.5px;color:var(--ink-soft)}
.salat-date{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.salat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px}
.salat-cell{display:flex;flex-direction:column;gap:2px;padding:14px 15px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);min-width:0}
.salat-cell span{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.salat-cell b{font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.salat-cell.is-sub{background:transparent}
.salat-cell.is-sub b{font-size:17px;color:var(--ink-soft)}
.salat-cell.is-next{background:var(--emerald-soft);border-color:var(--emerald)}
.salat-cell.is-next span{color:var(--emerald-ink)}
.salat-note{margin-top:16px;font-size:13px;color:var(--ink-soft);font-family:var(--font-read);line-height:1.7;max-width:62ch}

.doa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.doa-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;transition:.16s;min-width:0}
.doa-card:hover{border-color:var(--emerald);box-shadow:var(--shadow);transform:translateY(-1px)}
.doa-card b{font-size:16px;margin-top:4px}
.doa-card span{font-size:13px;color:var(--ink-soft);line-height:1.55}
.doa-card i{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}

.doa-item{padding:22px 0;border-bottom:1px solid var(--line)}
.doa-item:last-child{border-bottom:0}
.doa-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.doa-head b{font-size:16px}
.doa-ar{font-family:var(--font-quran);font-size:calc(var(--arab-size) - 4px);line-height:2.2;direction:rtl;text-align:right}
.doa-item .b-note{margin-top:12px;padding:13px 15px;border-radius:var(--r-sm);background:var(--surface-2);font-size:14px;font-family:var(--font-read);line-height:1.75;color:var(--ink-soft)}
.doa-item .b-note b{display:block;margin-bottom:4px;font-family:var(--font-ui);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--emerald-ink)}

.tasbih{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:3px 4px 3px 12px;border-radius:999px;background:var(--surface-2)}
.tasbih b{min-width:28px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
.tasbih-btn{width:32px;height:32px;border-radius:50%;border:0;background:var(--emerald);color:#fff;font-size:19px;line-height:1;cursor:pointer}
:root[data-theme="dark"] .tasbih-btn{color:#07201A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tasbih-btn{color:#07201A}}
.tasbih-reset{padding:5px 12px;border-radius:999px;border:0;background:transparent;font-size:12px;font-weight:700;color:var(--ink-soft);cursor:pointer}
.fig-stack{display:grid;gap:16px}

/* tujuh tab: biarkan menggeser di layar sempit */
.tabbar{overflow-x:auto;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tab{flex:1 0 auto;min-width:58px}
@media (min-width:560px){ .tab{flex:1 1 0} }

/* ---------- Banner & merek ---------- */
.brand-mark{overflow:hidden;background:var(--emerald)}
.brand-mark img{width:100%;height:100%;object-fit:cover;display:block}
.hero-banner{display:block;width:100%;max-width:100%;height:auto;border-radius:var(--r-md);margin-bottom:20px;border:1px solid var(--line)}

/* ---------- Permainan ---------- */
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-bottom:10px}
.game-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;transition:.16s;min-width:0}
.game-card:hover{border-color:var(--emerald);box-shadow:var(--shadow);transform:translateY(-2px)}
.game-card b{font-size:16px;margin-top:3px}
.game-card span{font-size:13px;color:var(--ink-soft);line-height:1.55}
.game-card i{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);margin-top:3px}
.game-card i.muted{color:var(--ink-soft);opacity:.75}

.game-shell{max-width:620px;margin-inline:auto}
.game-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.game-score{font-size:13px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.game-bar{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-bottom:24px}
.game-bar i{display:block;height:100%;background:var(--emerald);transition:width .3s}
.game-q{text-align:center;padding:26px 18px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:18px}
.q-label{display:block;font-size:13.5px;font-weight:700;color:var(--ink-soft);margin-bottom:10px}
.q-ar{display:block;font-family:var(--font-arab);font-size:clamp(50px,13vw,76px);line-height:1.5;color:var(--emerald);direction:rtl}
.q-text{display:block;font-size:clamp(22px,5vw,30px);font-weight:800;letter-spacing:-.02em}
.q-sub{display:block;margin-top:6px;font-size:14px;color:var(--ink-soft)}
.game-opt{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.opt{padding:15px 16px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--surface);font-size:15.5px;font-weight:600;cursor:pointer;transition:.14s;min-width:0}
.opt:hover:not(:disabled){border-color:var(--emerald);background:var(--emerald-soft)}
.opt:disabled{cursor:default;opacity:.65}
.opt.is-ok{border-color:var(--emerald);background:var(--emerald-soft);color:var(--emerald-ink);opacity:1}
.opt.is-no{border-color:#C0392B;background:rgba(192,57,43,.12);opacity:1}
.opt-ar{font-family:var(--font-arab);font-size:30px;line-height:1.6;color:var(--emerald)}
.game-fb{min-height:24px;margin-top:14px;text-align:center;font-size:14px;font-weight:600;color:var(--ink-soft)}
.game-fb.is-ok{color:var(--emerald)}
.game-fb.is-no{color:#C0392B}

.game-done{max-width:460px;margin-inline:auto;text-align:center;padding:34px 22px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.game-done h2{font-size:30px;margin:14px 0 6px;font-variant-numeric:tabular-nums}
.game-done p{font-size:15px;color:var(--ink-soft)}
.game-done .best{margin-top:10px;font-size:13px;font-weight:700;color:var(--gold)}
.stars{display:flex;justify-content:center;gap:8px}
.stars svg{width:38px;height:38px;fill:var(--surface-2)}
.stars svg.on{fill:var(--gold)}
.game-act{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}

.memori{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
@media (min-width:560px){ .memori{grid-template-columns:repeat(4,1fr)} }
.kartu{position:relative;aspect-ratio:3/4;border:0;padding:0;border-radius:var(--r-md);background:transparent;cursor:pointer;min-width:0}
.kartu-balik,.kartu-isi{position:absolute;inset:0;display:grid;place-items:center;border-radius:var(--r-md);transition:opacity .22s}
.kartu-balik{background:var(--emerald);opacity:1}
.kartu-balik::after{content:"";width:40%;height:40%;border-radius:50%;border:2px solid var(--gold);opacity:.65}
.kartu-isi{background:var(--surface);border:1.5px solid var(--line);opacity:0;font-size:14px;font-weight:700;padding:4px;text-align:center;word-break:break-word}
.kartu-isi.is-ar{font-family:var(--font-arab);font-size:34px;color:var(--emerald)}
.kartu.is-open .kartu-balik,.kartu.is-done .kartu-balik{opacity:0}
.kartu.is-open .kartu-isi,.kartu.is-done .kartu-isi{opacity:1}
.kartu.is-done .kartu-isi{border-color:var(--emerald);background:var(--emerald-soft)}

.susun-hint{text-align:center;font-family:var(--font-read);font-size:16px;line-height:1.7;margin-bottom:18px;color:var(--ink)}
.susun-slot{min-height:84px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;padding:16px;border-radius:var(--r-md);border:1.5px dashed var(--line);background:var(--surface);margin-bottom:16px}
.susun-kosong{font-size:13.5px;color:var(--ink-soft);direction:ltr}
.susun-bank{display:flex;flex-wrap:wrap;gap:8px}
.kata-btn{padding:10px 15px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--surface);font-family:var(--font-quran);font-size:26px;line-height:1.9;cursor:pointer;transition:.14s;min-width:0}
.kata-btn:hover{border-color:var(--emerald);background:var(--emerald-soft)}
.kata-btn.is-set{border-color:var(--emerald);background:var(--emerald-soft);color:var(--emerald-ink)}

/* ---------- Bahasa ---------- */
.lang-btn{font-size:11.5px;font-weight:800;letter-spacing:.06em}
.lang-note{max-width:740px;margin:0 auto 18px;padding:13px 16px;border-radius:var(--r-md);background:var(--gold-soft);color:var(--ink);font-size:13.5px;line-height:1.7;font-family:var(--font-read);border-left:3px solid var(--gold)}

/* ---------- Warna tajwid ---------- */
:root{
  --tj-ghunnah:#1E7F56; --tj-idgham:#0E7A86; --tj-idghamb:#2F6FA8; --tj-iqlab:#4A5BC2;
  --tj-ikhfa:#7E4FB0;   --tj-mimi:#0E7A86;   --tj-syafawi:#7E4FB0; --tj-izhar:#8A6A1A;
  --tj-qalqalah:#C2621C; --tj-mad2:#B33F2E;  --tj-mad46:#8E1F12;   --tj-lam:#76867C;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --tj-ghunnah:#5FD9A4; --tj-idgham:#4FD3E0; --tj-idghamb:#7CB4EE; --tj-iqlab:#97A2F2;
    --tj-ikhfa:#C49BF0;   --tj-mimi:#4FD3E0;   --tj-syafawi:#C49BF0; --tj-izhar:#E8C877;
    --tj-qalqalah:#F2A05A; --tj-mad2:#F2897A;  --tj-mad46:#E8604C;   --tj-lam:#9FB0A6;
  }
}
:root[data-theme="dark"]{
  --tj-ghunnah:#5FD9A4; --tj-idgham:#4FD3E0; --tj-idghamb:#7CB4EE; --tj-iqlab:#97A2F2;
  --tj-ikhfa:#C49BF0;   --tj-mimi:#4FD3E0;   --tj-syafawi:#C49BF0; --tj-izhar:#E8C877;
  --tj-qalqalah:#F2A05A; --tj-mad2:#F2897A;  --tj-mad46:#E8604C;   --tj-lam:#9FB0A6;
}
.tj-ghunnah{color:var(--tj-ghunnah)}
.tj-idgham{color:var(--tj-idgham)}
.tj-idghamb{color:var(--tj-idghamb)}
.tj-iqlab{color:var(--tj-iqlab)}
.tj-ikhfa{color:var(--tj-ikhfa)}
.tj-mimi{color:var(--tj-mimi)}
.tj-syafawi{color:var(--tj-syafawi)}
.tj-izhar{color:var(--tj-izhar)}
.tj-qalqalah{color:var(--tj-qalqalah)}
.tj-mad2{color:var(--tj-mad2)}
.tj-mad46{color:var(--tj-mad46)}
.tj-lam{color:var(--tj-lam)}

.tj-legend{max-width:740px;margin:0 auto 16px;padding:14px 18px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.tj-legend summary{cursor:pointer;font-size:13.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--emerald);list-style:none}
.tj-legend summary::-webkit-details-marker{display:none}
.tj-legend summary::after{content:" ▾";font-size:11px}
.tj-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.tj-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;background:var(--surface-2);font-size:12.5px;font-weight:700;min-width:0}
.tj-chip i{width:10px;height:10px;border-radius:50%;background:currentColor;flex:none}
.tj-note{margin-top:12px;font-size:12.5px;line-height:1.7;color:var(--ink-soft);font-family:var(--font-read)}

/* ---------- Nama laboratorium ---------- */
.hero-lab{margin:-8px 0 18px;font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--ink-soft)}
.brand-slogan{white-space:nowrap}

/* ---------- Teks Arab lebih jelas ---------- */
.ay-arab, .doa-ar, .hero-bismillah, .sh-bis, .q-ar, .nk-ar, .tafsir-item .t-ar, .prev-arab{
  font-feature-settings:"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.ay-arab{line-height:2.45;letter-spacing:0}
.doa-ar{line-height:2.4}
.nk-ar{line-height:2.4}
.tafsir-item .t-ar{line-height:2.4}
.b-ar, .kata-chip b, .kata-btn{font-feature-settings:"liga" 1,"calt" 1;-webkit-font-smoothing:antialiased}

/* ---------- Paragraf rata kiri-kanan ---------- */
.ay-id, .ay-tafsir, .ay-latin,
.t-id, .b-id, .b-note, .nk-id, .nk-khut, .nk-points,
.surah-desc p, .hero-sub, .k-desc, .h-txt,
.doa-item .ay-id, .entry-body .b-id, .tj-note, .salat-note, .susun-hint{
  text-align:justify;
  text-align-last:left;
  hyphens:auto;
  -webkit-hyphens:auto;
}
[dir="rtl"], .ay-arab, .doa-ar, .nk-ar, .b-ar, .t-ar{text-align:right}

/* ---------- Cetak naskah rangkuman ---------- */
@media print{
  .appbar, .tabbar, .seg, .page-head, .naskah-top .btn, .naskah-top .link-btn, .toast, .sheet, .sheet-bg{display:none!important}
  body{background:#fff;color:#000;padding:0}
  #main{max-width:none;padding:0}
  .view:not(.is-on){display:none}
  .naskah{box-shadow:none;border:0;border-radius:0;padding:0;max-width:none}
  .nk-sec{break-inside:avoid}
  .nk-ar{color:#000}
  .nk-ref{color:#555}
  a[href]:after{content:""}
}

/* ---------- Paragraf rata kiri-kanan ---------- */
.ay-id, .ay-latin, .b-id, .b-id p, .t-id, .t-id p, .nk-id, .nk-khut, .nk-khut p,
.ay-tafsir, .ay-tafsir p, .surah-desc p, .hero-sub, .doa-item .ay-id,
.entry-body .b-id p, .kitab-card .k-desc, .game-card span, .hit .h-txt,
.foot-col p, .tj-note, .salat-note, .b-note{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.ay-arab, .b-ar, .nk-ar, .t-ar, .doa-ar, .sh-bis, .hero-bismillah, .q-ar{ text-align:right; hyphens:none }
.nk-points li{ text-align:justify; text-justify:inter-word }

/* ---------- Merek ---------- */
.brand-slogan{text-transform:uppercase;letter-spacing:.07em;font-size:9.5px}

/* ---------- Footer situs ---------- */
.situs-foot{margin-top:48px;border-top:1px solid var(--line);background:var(--surface)}
.foot-in{
  max-width:1120px;margin-inline:auto;display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  padding-block:34px 26px;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
}
.foot-col{min-width:0}
.foot-col h4{margin:0 0 9px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--emerald)}
.foot-col p{font-size:13.5px;line-height:1.75;color:var(--ink-soft);font-family:var(--font-read)}
.foot-brand strong{display:block;font-size:19px;letter-spacing:-.02em}
.foot-brand span{display:block;font-size:13px;color:var(--ink-soft);margin-top:3px}
.foot-nomor{font-size:17px!important;font-weight:700;color:var(--ink)!important;font-variant-numeric:tabular-nums;font-family:var(--font-ui)!important;margin-bottom:10px;user-select:all}
.foot-col .btn{margin-bottom:8px}
.foot-bawah{
  max-width:1120px;margin-inline:auto;border-top:1px solid var(--line);
  padding-block:16px;font-size:12.5px;color:var(--ink-soft);
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
}
@media (max-width:899px){ .situs-foot{margin-bottom:8px} }

/* ---------- Cetak naskah rangkuman ---------- */
@media print{
  .appbar, .tabbar, .situs-foot, .seg, .page-head, .naskah-top .btn,
  .naskah-top button, .tj-legend, .toast{ display:none!important }
  body{background:#fff;color:#000;padding:0}
  .view{display:none!important}
  .view.is-on{display:block!important}
  .naskah{border:0;box-shadow:none;max-width:none;padding:0}
  .nk-sec>h3{color:#000}
  a[href]:after{content:""}
}

/* ---------- Kejernihan teks Arab ---------- */
.ay-arab, .ay-ar, .doa-ar, .nk-ar, .b-ar, .t-ar, .sh-bis, .hero-bismillah, .q-ar, .kata-chip b{
  text-rendering:optimizeLegibility;
  font-variant-ligatures:common-ligatures contextual;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"calt" 1,"liga" 1,"rlig" 1;
}
.ay-arab{line-height:2.45;word-spacing:.08em;letter-spacing:0}
.doa-ar, .nk-ar{line-height:2.35}
.b-ar, .t-ar{line-height:2.3}

/* ---------- Paragraf rata kiri-kanan ---------- */
.ay-id, .ay-latin, .ay-tafsir, .t-id, .b-id, .nk-id, .nk-khut, .nk-points,
.today-id, .today-lat, .surah-desc p, .hero-sub, .page-head p, .k-desc,
.hit .h-txt, .doa-item .b-note, .bab .b-note, .salat-note, .tj-note,
.entry-body .b-id, .susun-hint, .game-card span, .kajian-card span{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}
.ay-arab, .ay-ar, .doa-ar, .nk-ar, .b-ar, .t-ar{text-align:right}

/* ---------- Ayat hari ini ---------- */
.today-lat{margin-top:12px;font-family:var(--font-read);font-style:italic;font-size:15px;line-height:1.75;color:var(--ink-soft)}
.today-id{margin-top:10px;font-family:var(--font-read);font-size:16px;line-height:1.8;color:var(--ink)}

/* ---------- Hukum tajwid pada menu Kata ---------- */
.kata-chip{align-items:center;gap:3px;max-width:200px}
.kata-chip u{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;text-decoration:none;direction:ltr;margin-top:3px}
.kata-chip u span{font-size:10px;font-weight:800;letter-spacing:.02em;padding:2px 7px;border-radius:999px;background:var(--surface-2);line-height:1.5}
.kata-chip u.kosong{font-size:10px;color:var(--ink-soft);opacity:.6;font-style:italic}
.kata-hukum{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);direction:ltr}
.kata-hukum > b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--emerald);margin-bottom:10px}
.tj-baris{display:grid;grid-template-columns:12px auto;gap:4px 9px;align-items:start;margin-bottom:9px}
.tj-baris i{width:10px;height:10px;border-radius:50%;background:currentColor;margin-top:5px}
.tj-baris b{font-size:13.5px;grid-column:2}
.tj-baris span{grid-column:2;font-size:12.5px;line-height:1.6;color:var(--ink-soft);font-family:var(--font-read);text-align:justify}

/* ---------- Masjid & kiblat ---------- */
.kiblat-card{display:flex;flex-wrap:wrap;align-items:center;gap:22px;padding:clamp(18px,3vw,26px);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);margin-bottom:8px}
.kompas{position:relative;flex:none;width:clamp(130px,34vw,168px);aspect-ratio:1;max-width:100%}
.kompas svg{position:absolute;inset:0;width:100%;height:100%}
.kompas .jarum{transform:rotate(var(--arah,0deg));transform-origin:50% 50%;transition:transform .6s cubic-bezier(.4,1.2,.4,1)}
.kiblat-teks{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:4px}
.kiblat-teks strong{font-size:clamp(28px,5vw,40px);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.kiblat-teks span:not(.salat-eyebrow){font-size:14px;color:var(--ink-soft);line-height:1.65;text-align:justify}
.kiblat-catatan{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:12.5px!important;font-family:var(--font-read)}
.masjid-item .entry-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.masjid-item .entry-head .badge{flex:none;margin-top:2px;font-variant-numeric:tabular-nums}
#mjIsi .state .btn{margin-top:14px}

/* ---------- Dua kolom: pesantren & masjid ---------- */
.dua-kolom{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,28px);align-items:start}
@media (min-width:980px){ .dua-kolom{grid-template-columns:1fr 1fr} }
.dua-kolom .kolom-sisi{margin-top:26px;min-width:0}
@media (min-width:980px){ .dua-kolom .kolom-sisi{margin-top:30px} }
.dua-kolom .block-head{padding-bottom:10px;border-bottom:2px solid var(--emerald-soft)}
.dua-kolom .toolbar{margin-bottom:12px}
.dua-kolom .search{flex:1 1 100%}
.dua-kolom .entry{padding:14px 16px}
.dua-kolom .entry-head b{font-size:15px}
.dua-kolom .entry-sub{font-size:12px}
.dua-kolom .salat-note{font-size:12.5px}


/* ---------- DUA MODE BACA ---------- */
.baca-mode{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:14px 0 18px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.baca-mode .bm-label{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.mushaf{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:clamp(18px,3vw,30px);margin-bottom:18px}
.mushaf-ar{font-family:var(--font-quran);font-size:var(--arab-size);line-height:2.6;
  text-align:justify;text-align-last:center;direction:rtl;color:var(--ink);word-spacing:.08em}
.mushaf-ar .mu-ay{white-space:normal}
.mu-no{display:inline-block;font-family:var(--font-arab);font-size:.62em;line-height:1;
  min-width:1.9em;padding:.28em .3em;margin:0 .18em;border-radius:999px;cursor:pointer;
  border:1px solid var(--gold);background:var(--gold-soft);color:var(--gold);vertical-align:.25em}
.mu-no:hover{background:var(--gold);color:var(--surface)}
.mushaf-latin{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--font-read);font-size:var(--latin-size);line-height:1.95;
  color:var(--ink-soft);font-style:italic;text-align:justify}
.mushaf-id{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--font-read);font-size:calc(var(--latin-size) + 1px);line-height:2;text-align:justify}
.mushaf-id h4{font-family:var(--font-ui);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 10px}
.mushaf-latin sup, .mushaf-id sup{font-family:var(--font-ui);font-size:10.5px;font-style:normal;
  color:var(--emerald);font-weight:700;padding:0 2px}
.mushaf-kaki{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap}
body.tilawah .mushaf-latin, body.tilawah .mushaf-id, body.tilawah .baca-mode{display:none}
@media (max-width:640px){ .mushaf-ar{text-align:right;text-align-last:right;line-height:2.4} }

/* Atribut hidden harus selalu menang atas display dari kelas
   (tanpa ini, panel .sheet yang ber-display:flex tidak mau tertutup) */
[hidden]{display:none!important}

/* ---------- PENCARIAN SELURUH AL-QUR'AN ---------- */
.cari-panel{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:clamp(18px,3vw,28px);margin:0 0 28px}
.cari-panel .cp-head h2{font-size:clamp(18px,2.4vw,22px);letter-spacing:-.02em;margin:0 0 6px}
.cari-panel .cp-head p{font-size:13.5px;color:var(--ink-soft);margin:0 0 20px;max-width:56ch}
.cari-panel #cariCakupan{margin:0 0 18px}
.cp-baris{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cp-baris .search{flex:1 1 320px;min-width:0}
.cp-baris .btn{flex:0 0 auto;min-width:104px;justify-content:center}
.cp-info{font-size:13px;color:var(--ink-soft);margin:16px 0 0;min-height:1em}
.daftar-judul{font-size:clamp(17px,2.2vw,20px);letter-spacing:-.02em;margin:0 0 12px}
@media (max-width:620px){
  .cp-baris .search{flex:1 1 100%}
  .cp-baris .btn{flex:1 1 0;min-width:0}
}
.cari-hasil{display:none;margin-top:14px;max-height:62vh;overflow:auto;
  border-top:1px solid var(--line);padding-top:12px}
.cari-panel.ada-hasil .cari-hasil{display:block}
.hasil-item{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md,12px);
  background:var(--paper);margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s}
.hasil-item:hover{border-color:var(--emerald);background:var(--emerald-soft)}
.hs-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.hs-ref{font-size:12.5px;font-weight:700;color:var(--emerald)}
.hs-tag{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.hs-teks{font-family:var(--font-read);font-size:14.5px;line-height:1.75;margin:0;text-align:left}
.hs-teks.hs-arab{font-family:var(--font-arab);font-size:19px;line-height:2.1;text-align:right}
.hasil-item mark{background:var(--gold-soft);color:var(--gold);padding:0 2px;border-radius:3px;font-weight:700}

/* ---------- SOROTAN HASIL PENCARIAN ---------- */
.ayat-sorot{position:relative;border-radius:var(--r-lg);
  background:linear-gradient(90deg,var(--emerald-soft),transparent 60%);
  box-shadow:inset 3px 0 0 var(--emerald);
  padding-left:14px;margin-left:-14px;
  animation:sorot-masuk .5s ease}
@keyframes sorot-masuk{from{background-color:var(--gold-soft)}to{background-color:transparent}}
mark.sorot{background:var(--gold-soft);color:var(--gold);font-weight:700;
  padding:1px 3px;border-radius:4px;box-shadow:0 0 0 1px var(--gold) inset}
/* Di teks Arab, sorotan bisa terpecah menjadi beberapa potong karena
   pewarnaan tajwid. Tanpa padding dan sudut membulat, potongan-potongan
   itu menyatu jadi satu blok. Warnanya dibiarkan mengikuti warna tajwid. */
.ay-arab mark.sorot, .mushaf-ar mark.sorot{
  background:var(--gold-soft);color:inherit;font-weight:inherit;
  box-shadow:none;padding:3px 0;border-radius:0}
.ay-arab mark.sorot:first-child{border-radius:5px 0 0 5px;padding-left:2px}
.ay-arab mark.sorot:last-child{border-radius:0 5px 5px 0;padding-right:2px}

/* ---------- TANYA JAWAB ---------- */
.tanya-panel{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:clamp(18px,3vw,28px)}
.tp-label{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px}
#tanyaInput{width:100%;box-sizing:border-box;font-family:var(--font-read);font-size:16px;
  line-height:1.7;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md,12px);
  background:var(--paper);color:var(--ink);resize:vertical}
#tanyaInput:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px var(--emerald-soft)}
.tp-baris{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px}
.tp-tip{font-size:12.5px;color:var(--ink-soft)}
.tp-contoh{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line)}
.tp-contoh span{font-size:12.5px;color:var(--ink-soft)}
.tp-contoh button{font:inherit;font-size:13px;padding:6px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-soft)}
.tp-contoh button:hover{border-color:var(--emerald);color:var(--emerald);background:var(--emerald-soft)}
.tanya-hasil{display:none;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.tanya-panel.ada-hasil .tanya-hasil{display:block}
.jw-info{font-size:13px;color:var(--ink-soft);margin:0 0 14px}
.jw-kata{font-size:13px;color:var(--ink-soft);margin:0 0 20px}
.jw-kata span{display:inline-block;background:var(--emerald-soft);color:var(--emerald);
  font-weight:600;padding:2px 9px;border-radius:999px;margin:0 3px}
.jw-catatan{border:1px solid var(--gold);background:var(--gold-soft);color:var(--gold);
  border-radius:var(--r-md,12px);padding:14px 16px;margin:0 0 20px;font-size:14px;line-height:1.7}
.jw-blok{margin:0 0 28px}
.jw-blok h3{font-size:clamp(16px,2vw,19px);letter-spacing:-.01em;margin:0 0 4px}
.jw-ket{font-size:13px;color:var(--ink-soft);margin:0 0 14px}
.jw-ayat,.jw-tafsir,.jw-nuzul{border:1px solid var(--line);border-radius:var(--r-md,12px);
  background:var(--paper);padding:16px 18px;margin-bottom:10px}
.jw-ref{font-size:12.5px;font-weight:700;color:var(--emerald);margin-bottom:8px}
.jw-ar{font-family:var(--font-quran);font-size:26px;line-height:2.2;text-align:right;
  direction:rtl;margin:0 0 10px;color:var(--ink)}
.jw-id,.jw-tafsir p,.jw-nuzul p{font-family:var(--font-read);font-size:15px;line-height:1.85;
  margin:0;text-align:justify}
.jw-tema{font-weight:700;margin-bottom:6px!important}
.jw-ayat .link-btn{margin-top:10px}
.jw-kosong{font-size:14px;color:var(--ink-soft);margin:0}
.jw-kaki{border-top:1px solid var(--line);padding-top:18px;margin-top:4px}
.jw-kaki p{font-size:13px;line-height:1.8;color:var(--ink-soft);margin:0 0 12px}
.jw-nanti{border:1px dashed var(--line);border-radius:var(--r-md,12px);padding:14px 16px;
  font-size:13px;line-height:1.75;color:var(--ink-soft);background:var(--surface-2)}
.jw-kata i{font-size:12px;opacity:.75}
.jw-kata span.utama{background:var(--gold-soft);color:var(--gold)}

/* ---------- PANEL DEPAN (menggantikan banner gambar) ---------- */
.hero-mark{position:relative;overflow:hidden;border-radius:var(--r-md,12px);
  margin-bottom:20px;border:1px solid rgba(201,162,77,.38);
  aspect-ratio:16/5.4;min-height:190px;display:grid;place-items:center;
  box-shadow:inset 0 0 70px rgba(0,0,0,.35)}
.hero-mark .hm-pola{position:absolute;inset:0;width:100%;height:100%}
.hm-isi{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:10px;padding:18px;text-align:center}
.hm-ar{font-family:var(--font-quran);font-size:clamp(30px,5.2vw,54px);line-height:1.6;
  color:#E8C877;text-shadow:0 0 28px rgba(232,200,119,.4)}
.hm-nama{font-family:var(--font-read);font-weight:600;letter-spacing:.015em;
  font-size:clamp(26px,5vw,52px);line-height:1.1;
  background:linear-gradient(180deg,#F6E3AE,#D7B268 62%,#B98E3F);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hm-garis{display:block;width:clamp(90px,18vw,180px);height:1px;
  background:linear-gradient(90deg,transparent,#C9A24D,transparent)}
@media (max-width:640px){ .hero-mark{aspect-ratio:4/2.6;min-height:210px} }

/* ---------- BILAH BAWAH: 5 slot + lembar "Lainnya" ---------- */
.tabbar{overflow:visible}
.tab{flex:1 1 0;min-width:0}
.tab-lain{background:none;border:0;font:inherit;cursor:pointer}
.tab-lain.is-on{color:var(--emerald)}
.lain-sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--surface);
  border-top:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:0 -18px 40px rgba(0,0,0,.18);
  padding:6px 14px calc(16px + env(safe-area-inset-bottom,0px));
  animation:lain-naik .22s ease}
@keyframes lain-naik{from{transform:translateY(100%)}to{transform:none}}
.lain-head{display:flex;align-items:center;justify-content:space-between;
  padding:12px 2px 10px;border-bottom:1px solid var(--line)}
.lain-head b{font-size:15px}
.lain-grid{display:grid;gap:6px;padding-top:10px;max-height:62vh;overflow:auto}
.lain-item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:12px 12px;border:1px solid transparent;border-radius:var(--r-md,12px);
  background:none;font:inherit;color:var(--ink);cursor:pointer}
.lain-item:hover,.lain-item:focus-visible{background:var(--emerald-soft);border-color:var(--emerald)}
.li-ikon{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--surface-2);color:var(--emerald)}
.li-ikon svg{width:22px;height:22px}
.li-teks{display:flex;flex-direction:column;gap:2px;min-width:0}
.li-teks b{font-size:14.5px}
.li-teks small{font-size:12.5px;color:var(--ink-soft);line-height:1.45}
@media (min-width:900px){ .lain-sheet{left:auto;right:16px;bottom:16px;width:380px;border-radius:var(--r-lg)} }

/* ---------- ENSIKLOPEDIA MUFASIR ---------- */
.mf-intro p{font-family:var(--font-read);font-size:15.5px;line-height:1.8;color:var(--ink-soft);
  margin:0 0 20px;max-width:70ch}
.mf-jalan{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:14px}
.mf-era{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  font:inherit;color:var(--ink);transition:border-color .15s,transform .15s}
.mf-era:hover{border-color:var(--emerald);transform:translateY(-2px)}
.mf-era b{font-size:16px}
.mf-era span{font-size:12.5px;font-weight:700;color:var(--gold)}
.mf-era small{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin-top:4px}
.mf-pintu{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.mf-pintu-item{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
  padding:14px 16px;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--paper);
  font:inherit;color:var(--ink)}
.mf-pintu-item:hover{border-color:var(--emerald);border-style:solid;background:var(--emerald-soft)}
.mf-pintu-item b{font-size:14.5px}
.mf-pintu-item span{font-size:12.5px;color:var(--ink-soft)}
.mf-kembali{margin-bottom:14px}
.mf-kepala h3{font-size:clamp(18px,2.4vw,22px);margin:0 0 4px}
.mf-kepala p{font-size:13.5px;color:var(--ink-soft);margin:0 0 14px;max-width:62ch}
.mf-cari{margin:12px 0 16px}
.mf-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.mf-kartu{display:flex;gap:13px;align-items:flex-start;padding:13px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  transition:border-color .15s,transform .15s}
.mf-kartu:hover,.mf-kartu:focus-visible{border-color:var(--emerald);transform:translateY(-2px);outline:none}
.mf-foto{flex:none;width:56px;height:56px;border-radius:14px;overflow:hidden;position:relative;
  display:grid;place-items:center;background:var(--emerald);color:var(--gold-soft);
  font-weight:800;font-size:17px;letter-spacing:.02em}
.mf-foto.besar{width:104px;height:104px;border-radius:20px;font-size:30px}
.mf-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mf-foto.ada span{display:none}
.mf-isi{min-width:0;display:flex;flex-direction:column;gap:2px}
.mf-isi b{font-size:14.5px;line-height:1.3}
.mf-meta{font-size:12px;font-weight:700;color:var(--emerald)}
.mf-wil,.mf-kitab{font-size:12.5px;color:var(--ink-soft);line-height:1.45}
.mf-kitab{font-style:italic;margin-top:3px}
.mf-kosong{font-size:14px;color:var(--ink-soft);margin:0}
.mf-detail-kepala{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px}
.mf-dk-isi{min-width:0;flex:1 1 260px}
.mf-lencana{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gold);background:var(--gold-soft);
  padding:4px 11px;border-radius:999px;margin-bottom:8px}
.mf-dk-isi h3{font-size:clamp(20px,3vw,27px);margin:0 0 4px;letter-spacing:-.02em}
.mf-panggil{font-size:14px;color:var(--ink-soft);margin:0 0 2px}
.mf-fakta{font-size:13.5px;font-weight:600;color:var(--ink-soft);margin:0}
.mf-aksi{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.mf-blok{border-top:1px solid var(--line);padding-top:18px;margin-bottom:22px}
.mf-blok h4{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px}
.mf-blok p{font-family:var(--font-read);font-size:15px;line-height:1.85;text-align:justify;margin:0 0 10px}
.mf-ket{color:var(--ink-soft);font-size:13px!important;margin-bottom:12px!important}
.mf-kitab-kartu{border:1px solid var(--line);border-radius:var(--r-md,12px);background:var(--paper);
  padding:16px 18px;margin-bottom:10px}
.mf-kitab-kartu h5{font-size:16px;margin:0 0 10px;letter-spacing:-.01em}
.mf-ciri{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.mf-ciri li{display:flex;flex-direction:column;gap:1px}
.mf-ciri span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.mf-ciri b{font-size:13.5px}
/* Kutipan Arab di ensiklopedia ikut ukuran teks Arab pilihan pembaca
   (penggeser di Pengaturan baca), dengan batas bawah dan atas. */
.mf-blok p.mf-arab, .mf-kitab-kartu p.mf-arab, .mf-sanad-item p.mf-arab, .mf-arab{font-family:var(--font-arab);
  font-size:clamp(21px, calc(var(--arab-size, 36px) * 0.66), 32px);
  line-height:2.25;text-align:right;direction:rtl;color:var(--emerald);
  margin-top:14px;margin-bottom:4px}
.mf-ref{font-size:12.5px;color:var(--ink-soft);font-style:italic;text-align:left!important}
.mf-sanad{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.mf-sanad-item{border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r-md,12px);background:var(--paper);padding:12px 14px}
.mf-peran{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:3px}
.mf-sanad-item b{font-size:14.5px}
.mf-rujukan p{font-size:13px!important;color:var(--ink-soft);font-style:italic}
.mf-pilih-baris{display:grid;gap:10px;grid-template-columns:1fr;margin-bottom:16px}
@media (min-width:720px){ .mf-pilih-baris{grid-template-columns:1fr 1fr} }
.mf-pilih{width:100%;font:inherit;font-size:14.5px;padding:11px 13px;border-radius:var(--r-md,12px);
  border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.mf-banding{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:720px){ .mf-banding{grid-template-columns:1fr 1fr} }
.mf-kolom{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:16px}
.mf-kolom h4{font-size:16px;margin:12px 0 10px}
.mf-dl{margin:0 0 10px;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:13.5px}
.mf-dl dt{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);padding-top:2px}
.mf-dl dd{margin:0;line-height:1.5}
.mf-kredit{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.mf-kredit h4{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px}
.mf-kredit-baris{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:10px}
.mf-kredit-baris div{display:flex;flex-direction:column;gap:3px}
.mf-kredit-baris span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);font-weight:700}
.mf-kredit-baris b{font-size:14.5px;line-height:1.6}
.mf-kredit p{font-size:12.5px;color:var(--ink-soft);margin:0;font-style:italic}

/* ---------- NAMA LAZIM & DAFTAR KITAB ---------- */
.mf-populer{font-size:13px!important;color:var(--ink-soft);margin:-6px 0 12px!important;
  text-align:left!important}
.mf-populer b{color:var(--gold);font-weight:700}
.mf-kitab-pop{font-size:12px;color:var(--gold);font-weight:600;margin-top:2px}
.mf-tabel-bungkus{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface)}
.mf-tabel{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
.mf-tabel th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line);
  background:var(--surface-2);position:sticky;top:0}
.mf-tabel td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.mf-tabel tbody tr{cursor:pointer;transition:background .13s}
.mf-tabel tbody tr:hover{background:var(--emerald-soft)}
.mf-tabel tbody tr:last-child td{border-bottom:0}
.mf-tabel td:nth-child(2){color:var(--gold);font-weight:600}
.mf-sama{color:var(--ink-soft);font-weight:400;font-style:italic;font-size:12.5px}
.mf-catatan{font-family:var(--font-read);font-size:14.5px!important;line-height:1.8;
  text-align:justify;margin:12px 0 8px!important;padding-left:14px;
  border-left:3px solid var(--emerald-soft);color:var(--ink-soft)}
.mf-ref a{color:var(--emerald);font-style:normal;font-weight:600;word-break:break-word}
.mf-ref a:hover{text-decoration:underline}

/* ---------- BILAH SEGMEN DI LAYAR SEMPIT ----------
   Tujuh pilihan di tab Kajian melebar sampai 741px, jauh melewati lebar
   layar ponsel. Di bawah 760px dibungkus jadi beberapa baris agar semua
   pilihan terlihat tanpa perlu digeser. */
@media (max-width:760px){
  .seg{display:flex;flex-wrap:wrap;gap:6px;border-radius:var(--r-lg);
    padding:6px;width:100%;box-sizing:border-box}
  .seg-item{flex:1 1 auto;padding:9px 14px;font-size:13px;
    border-radius:999px;white-space:nowrap}
  /* Latar hijau pekat, jadi hurufnya putih. Hanya berlaku di layar sempit:
     di layar lebar latarnya terang, dan huruf terang di situ tidak terbaca. */
  .seg-item.is-on{background:var(--emerald);color:#fff;box-shadow:none}
  :root[data-theme="dark"] .seg-item.is-on{color:#07201A}
}
@media (max-width:760px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .seg-item.is-on{color:#07201A}
}
.mf-baca{margin-top:14px}
.mj-ringkas{margin:4px 0 16px;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.mj-ringkas b{color:var(--emerald);font-variant-numeric:tabular-nums}

/* ---------- MATERI & STUDI KASUS DI NASKAH ---------- */
.nk-materi{border-left:3px solid var(--emerald);background:var(--paper);
  border-radius:0 var(--r-md,12px) var(--r-md,12px) 0;padding:14px 18px;margin-bottom:12px}
.nk-materi-ref{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--emerald);margin-bottom:8px}
.nk-materi p{font-family:var(--font-read);font-size:15px;line-height:1.85;
  text-align:justify;margin:0 0 10px}
.nk-materi p:last-child{margin-bottom:0}
.nk-kasus{margin:14px 0;padding-left:22px;display:grid;gap:12px}
.nk-kasus li{font-family:var(--font-read);font-size:15px;line-height:1.8;
  padding-left:6px;text-align:justify}
.nk-kasus li::marker{color:var(--gold);font-weight:800}

/* ---------- CETAK: hanya naskahnya ----------
   Formulir penyusun, panel pencarian, dan daftar lain tidak ikut tercetak.
   Yang keluar di kertas cuma naskah khutbahnya. */
@media print{
  #susunForm, .susun-form, #paketPane, #rangkumanSeg,
  .cari-panel, .tanya-panel, .toolbar, .chips, .search,
  .upload, .hero-mark, .hero-banner, .situs-foot,
  .lain-sheet, .sheet, .sheet-bg, .mf-aksi, .pager,
  .link-btn, .btn{ display:none!important }

  /* Bar judul tetap tercetak, tapi tombol-tombolnya tidak. Induknya tidak
     boleh ikut disembunyikan, sebab judul di dalamnya akan ikut hilang. */
  .naskah-top{ display:block!important; border:0; padding:0; margin:0 0 10pt }
  .naskah-top button, .naskah-top a{ display:none!important }
  .naskah-top h2{ display:block!important; font-size:19pt; margin:0 0 4pt }

  .naskah{ page-break-inside:auto }
  .nk-materi{ break-inside:avoid; border-left:2pt solid #555; background:none }
  .nk-kasus li{ break-inside:avoid }
  .nk-ar{ font-size:16pt; line-height:2 }
  h2, h3{ break-after:avoid }
}


/* ---------- TEKS ARAB DI NASKAH KHUTBAH ---------- */
.nk-ar{font-family:var(--font-naskah)!important;word-spacing:normal!important;
  letter-spacing:0;text-align:right;hyphens:none}
@media print{
  .nk-ar{font-family:var(--font-naskah)!important;font-size:17pt;line-height:2.05;
    word-spacing:normal;text-align:right}
}

/* ajakan penutup studi kasus */
.nk-kasus-ajak{
  margin:14px 0 2px; padding:12px 14px;
  border-left:3px solid var(--hijau,#0E7C66);
  background:color-mix(in srgb, var(--hijau,#0E7C66) 7%, transparent);
  border-radius:0 8px 8px 0;
  font-weight:600; line-height:1.75;
}
@media print{
  .nk-kasus-ajak{background:none;border-left:2px solid #000;font-weight:700}
}

/* ================= HADIS TEMATIK ================= */
.hd-cari{width:100%;margin:4px 0 12px}
.hd-grup{margin-bottom:16px}
.hd-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.hd-kartu{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;
  padding:14px 15px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s,transform .15s}
.hd-kartu:hover,.hd-kartu:focus-visible{border-color:var(--emerald);transform:translateY(-2px);outline:none}
.hd-kartu b{font-size:15px;line-height:1.3}
.hd-kel{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.hd-cuplik{font-family:var(--font-read);font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.hd-jml{margin-top:auto;padding-top:4px;font-size:12px;font-weight:700;color:var(--emerald)}
.hd-kosong{color:var(--ink-soft);font-size:14px}
.hd-sumber{margin-top:22px;font-size:12px;line-height:1.6;color:var(--ink-soft);max-width:78ch}

.hd-label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px}
.hd-ayat{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:4px 0 22px}
.hd-ayat .hd-label{grid-column:1/-1;margin-bottom:0}
.hd-ayat-item{display:flex;flex-direction:column;gap:4px;text-align:left;padding:11px 13px;
  border-radius:var(--r-md);border:1px solid var(--line);background:var(--emerald-soft);
  color:var(--ink);font:inherit;cursor:pointer}
.hd-ayat-item b{font-size:12.5px;color:var(--emerald)}
.hd-ayat-item span{font-family:var(--font-read);font-size:13.5px;line-height:1.55}
.hd-ayat-item:hover{border-color:var(--emerald)}

.hd-hadis{padding:18px 18px 14px;margin-bottom:14px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow)}
.hd-no{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.hd-hadis p.hd-ar{font-family:var(--font-naskah);font-size:clamp(21px,calc(var(--arab-size,36px)*.66),30px);
  line-height:2;text-align:right;color:var(--ink);margin:0 0 12px;word-spacing:normal}
.hd-id{font-family:var(--font-read);font-size:15.5px;line-height:1.75;margin:0}
.hd-id.terlipat{max-height:9.5em;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.hd-lagi{margin-top:4px;padding:0;border:0;background:none;color:var(--emerald);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.hd-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 10px;font-size:12.5px;color:var(--ink-soft)}
.hd-ruj{font-weight:800;color:var(--emerald)}
.hd-drj{font-weight:700;color:var(--emerald-ink)}
.hd-drj.belum{color:var(--gold);font-weight:600}
.hd-alat{display:flex;flex-wrap:wrap;gap:6px}
.hd-alat .chip{padding:6px 12px;font-size:12.5px}
.hd-laci{margin-top:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2)}
.hd-sanad{margin:0;padding-left:20px;font-size:13.5px;line-height:1.8}
.hd-sanad li.nabi{font-weight:700;color:var(--emerald)}
.hd-tk{margin:0;padding-left:18px;font-size:13.5px;line-height:1.8}
.hd-ket{margin:8px 0 0;font-size:12px;color:var(--ink-soft)}
.hd-aksi{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
:root[data-theme="dark"] .hd-drj{color:#7FD3AE}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hd-drj{color:#7FD3AE} }
@media (max-width:560px){
  .hd-hadis{padding:15px 14px 12px}
  .hd-ayat{grid-template-columns:1fr}
}
@media print{
  .hd-alat,.hd-aksi,.hd-lagi,#hdKembali,.hd-cari,.hd-grup{display:none!important}
  .hd-id.terlipat{max-height:none;-webkit-mask-image:none;mask-image:none}
  .hd-hadis{box-shadow:none;break-inside:avoid}
}

/* ================= PUSTAKA PDF ================= */
.pustaka{margin:0 0 26px}
.pk-kepala{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end;justify-content:space-between;margin-bottom:12px}
.pk-kepala h2{font-size:clamp(18px,2.4vw,22px);margin:0 0 4px}
.pk-kepala p{margin:0;font-size:13.5px;color:var(--ink-soft);max-width:60ch}
.pk-cari{min-width:min(100%,280px)}
.pk-kat{margin-bottom:12px}
.pk-daftar{display:grid;gap:10px}
.pk-kartu{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;transition:border-color .15s}
.pk-kartu.terbuka,.pk-kartu:hover{border-color:var(--emerald)}
.pk-atas{display:flex;gap:14px;align-items:flex-start;width:100%;padding:14px 15px;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.pk-sampul{flex:none;width:58px;height:78px;border-radius:8px;display:grid;place-items:center;padding:4px;
  background:linear-gradient(160deg,var(--emerald),var(--emerald-ink));color:var(--gold-soft);
  font-family:var(--font-naskah);font-size:17px;line-height:1.2;text-align:center;box-shadow:inset 0 0 0 2px rgba(245,234,210,.25)}
.pk-isi{display:flex;flex-direction:column;gap:3px;min-width:0}
.pk-baris1{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pk-isi b{font-size:15.5px;line-height:1.3}
.pk-arab{font-family:var(--font-naskah);font-size:19px;line-height:1.6;color:var(--emerald)}
.pk-meta{font-size:12.5px;color:var(--ink-soft);line-height:1.45}
.pk-kunci{font-size:11.5px;font-weight:700;color:var(--gold);background:var(--gold-soft);padding:2px 8px;border-radius:999px}
.pk-bebas{font-size:11.5px;font-weight:700;color:var(--emerald);background:var(--emerald-soft);padding:2px 8px;border-radius:999px}
.pk-laci{padding:0 15px 15px 87px}
.pk-ringkas{margin:0 0 6px;font-family:var(--font-read);font-size:14px;line-height:1.65}
.pk-edisi{margin:0 0 12px;font-size:12.5px;color:var(--ink-soft)}
.pk-jilid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.pk-jl{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink);text-decoration:none}
.pk-jl:hover{border-color:var(--emerald)}
.pk-jl b{font-size:13.5px}
.pk-jl span{font-size:11.5px;color:var(--ink-soft)}
.pk-ket{margin:10px 0 0;font-size:12px;color:var(--ink-soft)}
.pk-catatan{margin:10px 0 0;font-size:12px;color:var(--ink-soft)}
@media (max-width:560px){ .pk-laci{padding:0 14px 14px} .pk-sampul{width:48px;height:64px;font-size:15px} }
.pk-jlist{display:grid;gap:8px}
.pk-jrow{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.pk-jrow[open]{background:var(--surface);border-color:var(--emerald)}
.pk-jrow summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;cursor:pointer;list-style:none}
.pk-jrow summary::-webkit-details-marker{display:none}
.pk-jnama{display:flex;flex-direction:column;gap:2px;min-width:0}
.pk-jnama b{font-size:14px}
.pk-jnama span{font-size:12.5px;color:var(--ink-soft);line-height:1.4}
.pk-jbuka{flex:none;font-size:12px;font-weight:700;color:var(--emerald)}
.pk-jbuka::after{content:" \25BE"}
.pk-jrow[open] .pk-jbuka::after{content:" \25B4"}
.pk-jisi{padding:0 13px 13px}
.pk-jisi p{margin:0 0 8px;font-family:var(--font-read);font-size:14px;line-height:1.65}
.pk-jisi ul{margin:0 0 12px;padding-left:18px;font-size:13.5px;line-height:1.6}
.pk-jisi li{margin-bottom:3px}
.pk-pdf{display:inline-flex;gap:8px;align-items:baseline;text-decoration:none}
.pk-pdf small{font-weight:500;opacity:.85}
.pk-link{border:0;background:none;padding:0;font:inherit;color:var(--emerald);font-weight:700;cursor:pointer;text-decoration:underline}
.pk-kelola{display:block;margin:10px 0 0;font-size:12px;color:var(--ink-soft);font-weight:600}
.pk-adminbar{margin-top:12px;padding:10px 12px;border-radius:var(--r-md);background:var(--gold-soft);color:var(--ink);font-size:12.5px;line-height:1.55}
.pk-saklar{display:flex;align-items:baseline;gap:8px;width:100%;padding:8px 15px;border:0;border-bottom:1px solid var(--line);
  font:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer;user-select:none}
.pk-saklar small{font-weight:500;opacity:.8}
.pk-saklar.kunci{background:var(--gold-soft);color:var(--gold)}
.pk-saklar.buka{background:var(--emerald-soft);color:var(--emerald)}

/* ================= METODE TAHFIDZ ================= */
.th-kepala h3{font-size:clamp(18px,2.4vw,22px);margin:0 0 4px}
.th-kepala p{font-size:13.5px;color:var(--ink-soft);margin:0 0 12px;max-width:62ch}
.th-tab{margin-bottom:16px}
.th-kel{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin:6px 0 8px}
.th-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-bottom:18px}
.th-kartu{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;align-self:start;scroll-margin-top:90px}
.th-kartu.terbuka,.th-kartu:hover{border-color:var(--emerald)}
.th-kartu.terbuka{grid-column:1/-1}
.th-atas{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;width:100%;padding:14px 15px;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.th-no{grid-row:span 2;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--emerald);color:var(--gold-soft);font-weight:800;font-size:14px}
.th-judul{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.th-judul b{font-size:15.5px}
.th-ar{font-family:var(--font-naskah);font-size:19px;color:var(--emerald)}
.th-ringkas{grid-column:2;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.th-laci{padding:0 15px 16px 61px}
.th-laci h5{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:10px 0 6px}
.th-laci ol,.th-laci ul{margin:0;padding-left:20px;font-size:14px;line-height:1.65}
.th-dua{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}
.th-laci ul.plus li::marker{content:"+  ";color:var(--emerald);font-weight:800}
.th-laci ul.min li::marker{content:"\2013  ";color:var(--gold);font-weight:800}
.th-cocok{margin:12px 0 4px;font-size:14px;line-height:1.6}
.th-padu{margin:0 0 10px;font-size:13.5px;color:var(--ink-soft)}
.th-ke{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--emerald);text-decoration:underline;cursor:pointer}
.th-tips{padding:14px 16px;border-radius:var(--r-lg);background:var(--emerald-soft);font-size:14px;line-height:1.6}
.th-tips ul{margin:6px 0 0;padding-left:20px}
.th-pilih{display:grid;gap:14px}
.th-pilih fieldset{border:0;padding:0;margin:0}
.th-pilih legend{font-weight:700;font-size:14.5px;margin-bottom:8px}
.th-hasil{margin-top:20px;padding:16px;border:1px solid var(--emerald);border-radius:var(--r-lg);background:var(--surface)}
.th-hasil h4{margin:0 0 10px;font-size:16px}
.th-hasil h5{margin:14px 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.th-hasil ol{margin:0;padding-left:20px;font-size:14px;line-height:1.7}
.th-hasil p{font-size:14px;line-height:1.6}
.th-rek{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.th-rek-item{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 13px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--emerald-soft);color:var(--ink);font:inherit;cursor:pointer}
.th-rek-item span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.th-rek-item b{font-size:16px;color:var(--emerald)}
.th-rek-item small{font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.th-ket{font-size:12.5px;color:var(--ink-soft);line-height:1.55}
.th-latih{display:grid;gap:12px}
.th-atur{display:grid;gap:10px;grid-template-columns:2fr 1fr 1fr}
.th-atur label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.th-atur select{padding:9px 10px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:14px}
.th-mushaf{padding:18px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);min-height:120px}
.th-ar-teks{font-family:var(--font-quran);font-size:clamp(24px,calc(var(--arab-size,36px)*.85),36px);line-height:2.2;text-align:right;margin:0;color:var(--ink);transition:filter .2s}
.th-nomor{font-size:.8em;color:var(--gold);white-space:nowrap}
.th-mushaf.tertutup .th-ar-teks{filter:blur(9px);user-select:none}
.th-arti{margin:10px 0 0;font-family:var(--font-read);font-size:14px;line-height:1.65;color:var(--ink-soft)}
.th-kendali{display:flex;align-items:center;justify-content:space-between;gap:10px}
.th-tombol{width:118px;height:118px;border-radius:50%;border:0;background:var(--emerald);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font:inherit;cursor:pointer;box-shadow:var(--shadow-lg);-webkit-tap-highlight-color:transparent;transition:transform .08s}
.th-tombol:active{transform:scale(.95)}
.th-tombol span{font-size:40px;font-weight:800;line-height:1}
.th-tombol small{font-size:12px;opacity:.85}
.th-bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.th-bar i{display:block;height:100%;background:var(--emerald);transition:width .15s}
.th-selesai{padding:12px 14px;border-radius:var(--r-md);background:var(--gold-soft);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.th-selesai p{margin:0;font-size:14px;font-weight:600}
@media (max-width:560px){
  .th-laci{padding:0 14px 14px}
  .th-dua{grid-template-columns:1fr}
  .th-atur{grid-template-columns:1fr 1fr}
  .th-atur label:first-child{grid-column:1/-1}
  .th-tombol{width:104px;height:104px}
}

/* ================= MENU SAMPING (layar lebar) =================
   Di layar >= 900px menu utama menjadi sidebar kiri ala dashboard.
   Di HP tetap tab bawah. */
.rail-brand,.rail-grup,.rail-kaki{display:none}
@media (min-width:900px){
  :root{--sidebar:236px}
  body{padding-left:var(--sidebar)}
  /* backdrop-filter membuat elemen fixed di dalam header menempel ke header,
     bukan ke layar; di layar lebar header cukup berlatar padat. */
  .appbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface)}
  .appbar .brand{display:none}
  .appbar-in{max-width:none}
  .rail{position:fixed;top:0;left:0;bottom:0;z-index:40;width:var(--sidebar);
    display:flex;flex-direction:column;gap:2px;margin:0;padding:14px 12px 16px;border-radius:0;
    background:var(--surface);border-right:1px solid var(--line);overflow-y:auto;scrollbar-width:thin}
  .rail-pill{display:none}
  .rail-brand{display:flex;align-items:center;gap:9px;padding:2px 8px 14px;margin-bottom:4px;border-bottom:1px solid var(--line);text-decoration:none}
  .rail-brand .brand-mark{width:38px;height:38px;flex:none;overflow:hidden}
  .rail-brand .brand-mark img{width:100%;height:100%;object-fit:cover}
  .rail-brand .brand-text{display:flex;flex-direction:column;line-height:1.15}
  .rail-grup{display:block;padding:14px 12px 5px;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);opacity:.8}
  .rail-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;font-size:14.5px;font-weight:600;color:var(--ink-soft);text-decoration:none;transition:background .15s,color .15s}
  .rail-item svg{width:20px;height:20px;flex:none}
  .rail-item:hover{background:var(--surface-2);color:var(--ink)}
  .rail-item.is-on{background:var(--emerald);color:var(--surface)}
  .rail-item.is-on:hover{color:var(--surface)}
  .rail-kaki{display:block;margin-top:auto;padding:16px 12px 0;font-size:11px;line-height:1.5;color:var(--ink-soft)}
}
@media (min-width:1400px){ :root{--sidebar:256px} }
@media print{ .rail{display:none!important} body{padding-left:0!important} }