/* 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:#765710;
  --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', 'Amiri', 'Noto Naskh Arabic', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-read:'Lora', 'Amiri', 'Noto Naskh Arabic', 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:11.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:11.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:.06em;font-size:11px}

/* ---------- 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, #rangkumanSeg, .ts-alat, .ts-kel, #tsGrid, .ts-bentuk-atas, .paket-grid,
  .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)}
/* edisi Arab / terjemah dalam satu judul */
.pk-ed{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.pk-ed.bebas{color:var(--emerald);background:var(--emerald-soft)}
.pk-ed.kunci{color:var(--gold);background:var(--gold-soft)}
.pk-edisi-blok{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.pk-edisi-blok:first-of-type{border-top:0;padding-top:0}
.pk-edisi-kepala{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.pk-edisi-kepala h3{margin:0;font-size:14px;flex:1 1 auto}
.pk-edisi-kepala h3 small{font-weight:500;color:var(--ink-soft)}
.pk-edisi-kepala .pk-saklar{width:auto;border:0;border-radius:999px;padding:6px 12px;font-size:12.5px}
.pk-laci .pk-jilid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.pk-jl b{overflow-wrap:anywhere}
.pk-jl-baris{flex-direction:row;justify-content:space-between;align-items:baseline;margin-top:6px}
.pk-kat .chip small{opacity:.65;font-weight:500;margin-left:2px}
.pk-kat{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;padding-bottom:4px}
.pk-kat .chip{white-space:nowrap;flex:0 0 auto}
@media (min-width:900px){.pk-kat{flex-wrap:wrap}}

/* ================= 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:11.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} }

/* ===== Atlas Hadis Tematik ===== */
.ha-mode{display:inline-flex;gap:4px;padding:4px;margin:4px 0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.ha-mode button{border:0;background:none;padding:7px 14px;border-radius:999px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer}
.ha-mode button.is-on{background:var(--emerald);color:var(--surface)}
.ha-nav{position:sticky;top:64px;z-index:5;display:flex;gap:6px;overflow-x:auto;padding:8px 0;margin-bottom:12px;background:var(--paper);scrollbar-width:none}
.ha-navb{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.ha-navb span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--emerald-soft);color:var(--emerald);font-size:12px}
.ha-navb.is-on{background:var(--emerald);color:var(--surface);border-color:var(--emerald)}
.ha-navb.is-on span{background:var(--surface);color:var(--emerald)}
.ha-lead{color:var(--ink-soft);margin:0 0 14px;max-width:62ch}
.ha-angka{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:0 0 18px}
.ha-angka div{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.ha-angka b{display:block;font-size:24px;line-height:1.1;color:var(--emerald);font-variant-numeric:tabular-nums}
.ha-angka span{font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
.ha-pohon-alat{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.ha-pohon-alat .hd-label{margin:0;flex:1}
.ha-pohon,.ha-anak{list-style:none;margin:0;padding:0}
.ha-anak{margin-left:18px;padding-left:12px;border-left:1px dashed var(--line)}
.ha-l1{margin-bottom:8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.ha-l1>.ha-anak{margin:0 10px 10px 22px}
.ha-baris{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.ha-tanda{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:6px;border:1px solid var(--line);background:var(--surface);font:inherit;font-weight:700;color:var(--emerald);cursor:pointer;padding:0}
.ha-judul{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.ha-judul small,.ha-hadis small{font-size:12px;color:var(--ink-soft)}
.ha-meter{position:relative;flex:0 0 90px;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.ha-meter i{position:absolute;inset:0 auto 0 0;background:var(--gold);border-radius:inherit}
.ha-l2{padding:6px 0}
.ha-baris2{display:flex;align-items:center;gap:10px}
.ha-tema b{font-size:14.5px}
.ha-tema:hover b,.ha-hadis:hover span{color:var(--emerald)}
.ha-bintang{flex:0 0 auto;color:var(--gold);letter-spacing:1px;font-size:13px}
.ha-bintang i{font-style:normal;color:var(--line)}
.ha-l3{padding:4px 0}
.ha-hadis{display:flex;flex-direction:column;gap:2px;border:0;background:none;padding:4px 0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.ha-hadis span{font-size:13.5px}
.ha-kosong{padding:22px;border:1px dashed var(--line);border-radius:var(--r-md);text-align:center}
.ha-kosong p{color:var(--ink-soft);max-width:52ch;margin:6px auto 14px}
.ha-batang{display:grid;gap:8px;margin:4px 0 18px}
.ha-batang div{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,180px) 44px;gap:10px;align-items:center;font-size:13.5px}
.ha-batang .ha-meter{flex:none;width:100%}
.ha-batang b{text-align:right;font-variant-numeric:tabular-nums}
.ha-pilih{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.ha-opsi-l{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font:inherit;color:inherit;text-align:left;cursor:pointer}
.ha-opsi-l:hover{border-color:var(--emerald)}
.ha-opsi-l small{color:var(--ink-soft);font-size:12px}
.ha-soal-kepala{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft);margin-bottom:6px}
.ha-progbar{height:4px;border-radius:999px;background:var(--line);overflow:hidden;margin-bottom:14px}
.ha-progbar i{display:block;height:100%;background:var(--emerald)}
.ha-soal{padding:18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);margin-bottom:10px}
.ha-tanya{font-size:16px;line-height:1.6;margin:6px 0 14px}
.ha-tanya-tema{font-weight:700}
.ha-opsi{display:grid;gap:8px}
.ha-op{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font:inherit;font-size:14px;color:inherit;text-align:left;cursor:pointer;line-height:1.5}
.ha-op span{flex:0 0 24px;height:24px;display:grid;place-items:center;border-radius:6px;background:var(--emerald-soft);color:var(--emerald);font-weight:700;font-size:12px}
.ha-op:hover:not(:disabled){border-color:var(--emerald)}
.ha-op:disabled{cursor:default}
.ha-op.benar{border-color:var(--emerald);background:var(--emerald-soft)}
.ha-op.salah{border-color:#c2410c;background:rgba(194,65,12,.08)}
.ha-op.salah span{background:#c2410c;color:#fff}
.ha-umpan{margin:14px 0 10px;padding:10px 12px;border-radius:var(--r-md);font-size:13.5px;line-height:1.6}
.ha-umpan.ok{background:var(--emerald-soft)}
.ha-umpan.no{background:var(--gold-soft)}
.ha-umpan a{color:var(--emerald);font-weight:600}
.ha-hasil{padding:22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);text-align:center}
.ha-hasil .chips{justify-content:center}
.ha-skor{display:block;font-size:44px;color:var(--emerald);font-variant-numeric:tabular-nums}
.ha-kartu-t{margin-bottom:10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:0 14px}
.ha-kartu-t summary{display:flex;flex-direction:column;gap:2px;padding:12px 0;cursor:pointer;list-style:none}
.ha-kartu-t summary::-webkit-details-marker{display:none}
.ha-kartu-t summary small{color:var(--ink-soft);font-size:12.5px}
.ha-kartu-t[open] summary{border-bottom:1px solid var(--line);margin-bottom:12px}
.ha-tabel-w{overflow-x:auto;margin-bottom:14px}
.ha-tabel{border-collapse:collapse;font-size:13px;min-width:100%}
.ha-tabel th,.ha-tabel td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
.ha-tabel tbody th{text-align:left;font-weight:600}
.ha-tabel td.isi{background:color-mix(in srgb,var(--emerald) calc(var(--a)*45%),transparent);font-weight:600}
@media (max-width:560px){.ha-meter{flex-basis:56px}.ha-batang div{grid-template-columns:minmax(0,1fr) 70px 40px}}

/* ===== Telaah per hadis (butir, kosakata, kepahaman) ===== */
.hd-tjudul{color:var(--ink);text-transform:none;letter-spacing:0}
.hd-draf{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--gold-soft);color:var(--gold);font-size:11px;font-weight:700;text-transform:none;letter-spacing:0}
.hd-butir{list-style:none;counter-reset:b;margin:0;padding:0;display:grid;gap:10px}
.hd-butir li{counter-increment:b;position:relative;padding:10px 12px 10px 40px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.hd-butir li::before{content:counter(b);position:absolute;left:12px;top:12px;width:20px;height:20px;border-radius:50%;background:var(--emerald-soft);color:var(--emerald);font-size:11px;font-weight:700;display:grid;place-items:center}
.hd-butir .hd-ar{margin:0 0 8px;font-family:var(--font-naskah);font-size:clamp(20px,calc(var(--arab-size,36px)*.6),27px);line-height:1.9;text-align:right;color:var(--ink)}
.hd-butir p{margin:0}
.hd-butir span{color:var(--ink-soft)}
.hd-makna{margin-top:14px}
.hd-makna p{margin:4px 0 12px;line-height:1.7}
.hd-makna ul{margin:4px 0 8px;padding-left:20px}
.hd-kosa{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;margin:6px 0 14px}
.hd-kosa>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.hd-kosa .hd-ar{margin:0;font-family:var(--font-naskah);font-size:clamp(20px,calc(var(--arab-size,36px)*.6),26px);line-height:1.8;color:var(--ink)}
.hd-kosa small{font-family:var(--font-naskah);font-size:16px;letter-spacing:2px}
.hd-kosa>div>span:last-child{display:flex;flex-direction:column;font-size:13.5px}
.hd-kosa small{color:var(--ink-soft)}
.hd-istilah{margin:6px 0 0}
.hd-istilah dt{font-weight:700;margin-top:6px}
.hd-istilah dd{margin:2px 0 0;color:var(--ink-soft)}
.hd-paham{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md)}
.hd-paham>span:first-child{display:flex;flex-direction:column}
.hd-paham small{color:var(--ink-soft);font-size:12.5px}
.hd-bintang5 button{border:0;background:none;font-size:22px;line-height:1;color:var(--line);cursor:pointer;padding:2px}
.hd-bintang5 button.on{color:var(--gold)}

/* ===== Menu Hadis: Kitab 9 Imam ===== */
.hm-lead{color:var(--ink-soft);max-width:66ch;margin:4px 0 16px}
.hm-kitab{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:26px}
.hm-kartu{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font:inherit;color:inherit;text-align:left;cursor:pointer;transition:border-color .15s,transform .15s}
.hm-kartu:hover{border-color:var(--emerald);transform:translateY(-1px)}
.hm-kartu b{font-size:17px}
.hm-imam{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold)}
.hm-jml{font-size:13px;color:var(--ink-soft)}
.hm-sub h3{margin:0 0 4px}
.hm-sub p{margin:0 0 10px;color:var(--ink-soft);font-size:14px}
.hm-sub+.search{width:100%;max-width:520px}
.hm-perawi{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 18px}
.hm-pr{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:inherit;font-size:13.5px;color:inherit;cursor:pointer}
.hm-pr span{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.hm-pr:hover{border-color:var(--emerald)}
.hm-ket{font-size:13px;color:var(--ink-soft);margin:6px 0 12px}
.hm-judul{margin:6px 0 14px}
.hm-judul h3{margin:2px 0}
.hm-judul p{margin:0;color:var(--ink-soft);font-size:14px}
.hm-alat{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.hm-alat .search{flex:1 1 260px;margin:0}
.hm-lompat{display:flex;gap:6px}
.hm-lompat input{width:90px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-md);font:inherit;background:var(--surface);color:var(--ink)}
.hm-tata{display:grid;grid-template-columns:1fr;gap:16px}
.hm-daftar{display:none}
@media (min-width:1100px){
  .hm-tata{grid-template-columns:170px minmax(0,1fr)}
  .hm-daftar{display:block;position:sticky;top:80px;align-self:start;max-height:calc(100vh - 100px);overflow-y:auto;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
  .hm-daftar div{display:grid;gap:2px}
  .hm-daftar button{border:0;background:none;text-align:left;padding:5px 8px;border-radius:8px;font:inherit;font-size:12.5px;color:var(--ink-soft);cursor:pointer;font-variant-numeric:tabular-nums}
  .hm-daftar button:hover{color:var(--emerald)}
  .hm-daftar button.is-on{background:var(--emerald);color:var(--surface)}
}
.hm-hadis{padding:18px;margin-bottom:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);scroll-margin-top:90px}
.hm-hadis.fokus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.hm-kepala{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.hm-no{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--emerald)}
.hm-rawi{border:1px solid var(--line);background:var(--emerald-soft);color:var(--emerald);border-radius:999px;padding:3px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.hm-ar{font-family:var(--font-naskah);font-size:clamp(21px,calc(var(--arab-size,36px)*.66),30px);line-height:2.05;text-align:right;margin:0 0 10px;color:var(--ink)}
.hm-sanad,.hm-ekor{font-family:var(--font-naskah);font-size:17px;line-height:1.9;text-align:right;color:var(--ink-soft);margin:0 0 8px}
.hm-id{font-family:var(--font-read);font-size:16px;line-height:1.75;margin:0 0 8px;text-align:left}
.hm-hadis{text-align:left}
.hm-idx{font-size:14px;line-height:1.7;color:var(--ink-soft);margin:0 0 8px;padding:10px 12px;border-radius:var(--r-md);background:var(--paper)}
.hm-idx .hd-label{display:block}
.hm-hadis .hd-alat{align-items:center}
.hm-paham{margin-left:auto;display:inline-flex}
.hm-paham button{border:0;background:none;padding:2px;font-size:19px;line-height:1;color:var(--line);cursor:pointer}
.hm-paham button.on{color:var(--gold)}
.hm-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 14px;font-size:13px;color:var(--ink-soft)}
.hm-nav .btn[disabled]{opacity:.4;pointer-events:none}
.hm-hasil{display:grid;gap:6px}
.hm-hasil button{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font:inherit;color:inherit;text-align:left;cursor:pointer}
.hm-hasil button:hover{border-color:var(--emerald)}
.hm-hasil b{font-size:12.5px;color:var(--emerald)}
.hm-hasil span{font-size:14px;line-height:1.55}
.hm-hasil mark{background:var(--gold-soft);color:inherit;border-radius:3px}
.hm-pk{margin-bottom:12px}
.hm-pk small{opacity:.65}
@media (max-width:560px){.hm-nav span{text-align:center;flex:1}.hm-nav .btn{padding:8px 10px;font-size:13px}}

/* ===== Arba'in Nawawi ===== */
.ar-judul{font-family:var(--font-naskah);font-weight:400;font-size:.95em;color:var(--emerald);margin-left:6px}
.hm-judul .ha-progbar{max-width:420px;margin-top:8px}
.ab-daftar button{display:flex;flex-direction:column;gap:1px;white-space:normal}
.ab-daftar button b{font-weight:600;font-size:12.5px;line-height:1.35}
.ab-daftar button small{font-size:11px;opacity:.75}
@media (min-width:1100px){.ab-tata{grid-template-columns:230px minmax(0,1fr)}.ab-pilih{display:none}}
.ab-pilih{width:100%;padding:10px 12px;margin-bottom:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:inherit}
.ab-babjudul{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding-bottom:10px;border-bottom:2px solid var(--emerald)}
.ab-babjudul>span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--emerald);color:var(--surface);font-weight:700}
.ab-babjudul div{display:flex;flex-direction:column}
.ab-babjudul small{color:var(--ink-soft);font-size:12.5px}
.ab-no{padding:2px 10px;border-radius:999px;background:var(--emerald);color:var(--surface);font-size:12px;font-weight:700}
.ab-hjudul{font-size:15px}
.ab-sumber{font-size:13px;font-weight:600;color:var(--emerald);margin:0 0 8px}
.ab-pel{margin:6px 0 0;border:1px solid var(--line);border-radius:var(--r-md);padding:0 12px}
.ab-pel summary{cursor:pointer;padding:10px 0;font-weight:600}
.ab-pel ul{margin:0 0 12px;padding-left:20px}

/* ===== Pohon materi (syajarah) ===== */
.sj-kepala h4{margin:2px 0 4px;font-size:17px}
.sj-kepala p{margin:0 0 10px;color:var(--ink-soft);font-size:13.5px;max-width:70ch}
.sj-alat{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px}
.sj-alat .hd-label{margin:0 4px 0 0}
.sj-hit{margin-left:auto;font-size:12.5px;color:var(--ink-soft)}
.sj{overflow:auto;max-height:75vh;padding:18px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.sj-kanvas{position:relative;display:inline-block;min-width:100%}
.sj-garis{position:absolute;inset:0;pointer-events:none;overflow:visible}
.sj-garis path{fill:none;stroke-width:2.2;opacity:.75}
.sj-cab{display:flex;align-items:center;position:relative;z-index:1}
.sj-anak{display:flex;flex-direction:column;gap:10px;margin-left:64px;padding:4px 0}
.sj-simpul{position:relative;flex:0 0 auto}
.sj-badan{display:flex;flex-direction:column;gap:4px;width:250px;padding:11px 14px 12px;border:1.5px solid color-mix(in srgb,var(--w) 55%,var(--line));border-left:5px solid var(--w);border-radius:12px;background:var(--surface);font:inherit;color:var(--ink);text-align:left;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.sj-badan:hover{background:color-mix(in srgb,var(--w) 7%,var(--surface))}
.sj-badan b{font-size:14px;line-height:1.35}
.sj-bawah{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sj-bawah small{font-size:12px;color:var(--ink-soft);white-space:nowrap}
.sj-bawah i{font-style:normal;font-family:var(--font-naskah);font-size:17px;color:var(--ink);line-height:1.5}
.sj-nilai{display:block;height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:2px}
.sj-nilai span{display:block;height:100%;background:var(--gold)}
.sj-d0 .sj-badan{width:230px;background:var(--emerald);border-color:var(--emerald);color:var(--surface)}
.sj-d0 .sj-badan b{font-size:16px}
.sj-d0 .sj-bawah small{color:color-mix(in srgb,var(--surface) 80%,transparent)}
.sj-d0 .sj-bawah i{color:var(--surface);font-size:20px}
.sj-d3 .sj-badan{width:300px}
.sj-d3 .sj-badan b{font-weight:500;font-size:13px}
.sj-tg{position:absolute;right:-15px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:2px solid var(--w);background:var(--surface);color:var(--w);font:inherit;font-weight:800;font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;z-index:2}
.sj-d0 .sj-tg{--w:var(--emerald)}
.sj-tg sup{position:absolute;top:-12px;right:-4px;font-size:10px;font-weight:700;color:var(--w)}
@media (max-width:560px){.sj-badan{width:200px}.sj-d3 .sj-badan{width:230px}.sj-anak{margin-left:44px}}
.ab-pohon{margin:0 0 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:0 14px}
.ab-pohon summary{cursor:pointer;padding:12px 0;font-weight:700}
.ab-pohon summary small{font-weight:500;color:var(--ink-soft);margin-left:6px}
.ab-pohon[open]{padding-bottom:14px}
.ab-pohon .sj{border:0;padding:12px 4px}

/* ===== Menu Tafsir ===== */
.tf-sumber{margin:0 0 12px}
.tf-daftar .tf-saring{width:100%;margin:4px 0 8px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;background:var(--surface);color:var(--ink)}
.tf-surah{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 14px;padding:14px 16px;border-radius:var(--r-md);background:var(--emerald);color:var(--surface)}
.tf-surah div{display:flex;flex-direction:column}
.tf-surah small{opacity:.85;font-size:13px}
.tf-surah .tf-ar{font-family:var(--font-quran);font-size:30px;line-height:1.4;order:2}
.tf-ar-ayat{font-family:var(--font-quran)}
.tf-terj{font-family:var(--font-read);font-size:15.5px;line-height:1.7;font-weight:500;margin:0 0 10px}
.tf-teks{padding:12px 14px;border-radius:var(--r-md);background:var(--paper);font-size:15px;line-height:1.75}
.tf-teks p{margin:0 0 8px}
.tf-teks .hd-label{display:block;margin-bottom:4px}
.tf-teks.terlipat{max-height:260px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.tf-banding{margin-top:10px;padding:12px 14px;border:1px dashed var(--line);border-radius:var(--r-md)}
.tf-banding .tf-tab{margin-bottom:10px}
.tf-tabisi{font-size:15px;line-height:1.75}
.tf-tabisi .hd-label{display:block;margin-bottom:4px}
.mfx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.mfx-kartu{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font:inherit;color:inherit;text-align:left;cursor:pointer}
.mfx-kartu:hover{border-color:var(--emerald)}
.mfx-kartu img{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:0 0 54px;background:var(--paper)}
.mfx-kartu span{display:flex;flex-direction:column;gap:2px}
.mfx-kartu small{font-size:12.5px;color:var(--ink-soft)}
.mfx-kartu i{font-style:normal;font-size:12px;color:var(--gold)}
.mfx-kartu em{font-style:normal;color:var(--emerald);font-weight:600}
.mfx-kepala{display:flex;gap:16px;align-items:center;margin:8px 0 12px}
.mfx-kepala img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.mfx-kepala h3{margin:2px 0}
.mfx-bio{font-family:var(--font-read);font-size:16px;line-height:1.75;max-width:70ch}
.mfx-karya{display:grid;gap:10px;margin:6px 0 16px}
.mfx-karya article{display:flex;gap:14px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.mfx-karya img{width:72px;height:100px;object-fit:cover;border-radius:6px;flex:0 0 72px}
.mfx-karya b{display:block;font-size:15.5px}
.mfx-karya small{color:var(--ink-soft);font-size:12.5px}
.mfx-karya p{margin:6px 0 0;font-size:14px;line-height:1.6}
.mfx-arab{font-family:var(--font-naskah);font-size:17px;line-height:1.9;text-align:right}
.mfx-sanad{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:12px}
.mfx-sanad ul{margin:4px 0 0;padding-left:18px}
.am-telaah{padding:16px;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.am-ringkas{font-family:var(--font-read);font-size:16px;line-height:1.75;margin:0 0 12px}
.am-dua{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:10px}
.am-dua ol,.am-dua ul{margin:4px 0 0;padding-left:20px;font-size:14.5px;line-height:1.6}
.hm-isi{text-align:left;min-width:0}
.hm-isi .tf-surah,.hm-isi .am-telaah{width:100%;box-sizing:border-box}
.hm-isi .hd-label{text-align:left}
.am-telaah .hd-kosa small{font-family:var(--font-ui);letter-spacing:0;font-size:12px}

/* ===== Rujukan dan penyusun ===== */
.rj{margin:22px 0 8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:0 16px}
.rj summary{display:flex;align-items:baseline;gap:10px;padding:13px 0;cursor:pointer}
.rj summary small{color:var(--ink-soft);font-size:12.5px}
.rj-isi{display:grid;grid-template-columns:minmax(0,2fr) minmax(200px,1fr);gap:18px;padding-bottom:16px}
.rj-isi ol{margin:6px 0 0;padding-left:20px;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.rj-isi a{color:var(--emerald)}
.rj-orang>div{margin-bottom:10px}
.rj-orang b{display:block;font-size:14px;margin-top:2px}
.rj-orang p{font-size:12.5px;color:var(--ink-soft);margin:4px 0 0}
.rj-status{color:var(--gold)!important;font-weight:600}
@media (max-width:700px){.rj-isi{grid-template-columns:1fr}}
/* ---- penghitung pengunjung ---- */
#footPengunjung .pg-baris{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;padding:2px 0;border-bottom:1px dashed color-mix(in srgb,currentColor 18%,transparent)}
#footPengunjung .pg-baris b{font-variant-numeric:tabular-nums}
#footPengunjung .pg-grafik{display:flex;align-items:flex-end;gap:2px;height:42px;margin:10px 0 4px}
#footPengunjung .pg-grafik i{flex:1;background:var(--emerald);border-radius:2px 2px 0 0;opacity:.8;min-width:2px}
#footPengunjung small{display:block;opacity:.7;font-size:.72rem;margin:4px 0 6px}
/* ---- nahwu ---- */
.nw-ar,.nw-arkecil,.nw-arbesar,.nw-grid b,.nw-peran b,.nw-ar-tabel td[lang],.nw-kata b,.nw-detail b,.nw-khamsah b,.nw-blok h5 span{font-family:var(--font-naskah);}
.nw-arkecil{display:block;font-size:1rem;opacity:.75}
.nw-arbesar{font-size:1.6rem;color:var(--emerald);white-space:nowrap}
.nw-sorot{outline:2px solid var(--emerald);outline-offset:4px;transition:outline .3s}
.nw-lompat{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.nw-lompat a{padding:6px 12px;border-radius:999px;border:1px solid var(--line,#ddd);text-decoration:none;color:inherit;font-size:.85rem}
.nw-angka{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:12px 0 18px}
.nw-angka div{border:1px solid var(--line,#ddd);border-radius:12px;padding:12px;background:var(--surface)}
.nw-angka b{display:block;font-size:1.5rem;line-height:1.1}
.nw-angka small{opacity:.7;font-size:.78rem}
.nw-angka-kecil b{font-size:1.2rem}
.nw-kartu{border:1px solid var(--line,#ddd);border-radius:16px;padding:16px;margin:14px 0;background:var(--surface);text-align:left}
.nw-kepala{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.nw-kepala b{display:block;font-size:1.1rem}
.nw-kepala small{display:block;opacity:.75;margin-top:2px}
.nw-dseg{margin-bottom:10px}
.nw-blok{margin:18px 0}
.nw-blok h5,.nw-sub{margin:0 0 4px;font-size:1rem}
.nw-blok h5 span{float:right;font-weight:400;color:var(--emerald);font-size:1.15rem}
.nw-blok p{margin:0 0 8px;opacity:.8;font-size:.9rem}
.nw-sub{margin-top:16px}
.nw-tabel{width:100%;border-collapse:collapse;font-size:.9rem}
.nw-tabel th,.nw-tabel td{padding:7px 8px;border-bottom:1px solid var(--line,#e3e3e3);text-align:left;vertical-align:top}
.nw-tabel th{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;opacity:.75}
.nw-ar-tabel td[lang]{font-size:1.25rem;text-align:center}
.nw-titik{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.nw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.nw-grid div{border:1px solid var(--line,#e3e3e3);border-radius:10px;padding:8px 10px;text-align:center}
.nw-grid b{display:block;font-size:1.3rem;font-weight:400;line-height:1.7}
.nw-grid i{display:block;font-style:normal;font-weight:600;font-size:.85rem}
.nw-grid small{display:block;opacity:.75;font-size:.78rem}
.nw-u{color:var(--emerald);text-decoration:none;border-bottom:1px dotted currentColor}
.nw-telaah{border:1px solid var(--line,#ddd);border-radius:14px;margin:10px 0;background:var(--surface)}
.nw-telaah summary{cursor:pointer;padding:14px 44px 14px 16px;position:relative;list-style:none}
.nw-telaah summary::-webkit-details-marker{display:none}
.nw-telaah summary::after{content:"⌄";position:absolute;right:16px;top:14px;font-size:1.2rem;transition:transform .2s}
.nw-telaah[open] summary::after{transform:rotate(180deg)}
.nw-telaah summary b{display:block}
.nw-telaah summary small{display:block;opacity:.75}
.nw-telaah summary .nw-arkecil{position:absolute;right:44px;top:12px;font-size:1.1rem}
.nw-tisi{padding:0 16px 16px;text-align:left}
.nw-alat{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.nw-alat select,.nw-alat input[type=number]{padding:6px 8px;border-radius:8px;border:1px solid var(--line,#ccc);background:var(--surface);color:inherit;max-width:100%}
.nw-alat input[type=number]{width:70px}
.nw-saklar{display:flex;gap:6px;align-items:center;font-size:.88rem}
.nw-gulir{overflow-x:auto}
.nw-matriks td.nw-ganti{background:color-mix(in srgb,var(--emerald) 9%,transparent)}
.nw-matriks td.nw-tutup span{visibility:hidden}
.nw-matriks td.nw-tutup{cursor:pointer;background:repeating-linear-gradient(45deg,transparent 0 6px,color-mix(in srgb,currentColor 7%,transparent) 6px 12px)}
.nw-tidak{opacity:.35}
.nw-khamsah{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nw-khamsah p{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:4px 0;border-bottom:1px dashed var(--line,#ddd)}
.nw-khamsah b{font-size:1.35rem;font-weight:400}
.nw-khamsah small{opacity:.7;font-size:.78rem;text-align:left}
.nw-peran{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.nw-peran div{border:1px solid var(--line,#e3e3e3);border-radius:10px;padding:10px}
.nw-peran b{display:block;font-size:1.3rem;font-weight:400;text-align:right}
.nw-peran i{display:block;font-style:normal;font-weight:600;font-size:.88rem}
.nw-peran p{font-size:.85rem;margin:6px 0}
.nw-peran small{display:block;opacity:.75;font-size:.78rem;margin-top:4px}
.nw-kep .nw-jejak{margin:0 0 8px;padding-left:18px;font-size:.85rem;opacity:.75}
.nw-tanya{font-weight:600;font-size:1.05rem;margin:8px 0}
.nw-pilih,.nw-opsi{display:flex;flex-wrap:wrap;gap:8px}
.nw-opsi{flex-direction:column}
.nw-opsi .btn{justify-content:flex-start;text-align:left;white-space:normal}
.nw-hasil{border-left:4px solid var(--emerald);padding:10px 12px;margin:10px 0;background:color-mix(in srgb,var(--emerald) 7%,transparent);border-radius:0 10px 10px 0}
.nw-hasil b{display:block}
.nw-kalimat{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.nw-kata{border:1px solid var(--line,#ddd);border-top:4px solid var(--w);border-radius:10px;padding:6px 10px;background:var(--surface);color:inherit;cursor:pointer;text-align:center;min-width:72px}
.nw-kata b{display:block;font-size:1.4rem;font-weight:400;line-height:1.8}
.nw-kata i{display:block;font-style:normal;font-size:.75rem;opacity:.75;direction:ltr}
.nw-kata u{display:block;text-decoration:none;font-size:.72rem;color:var(--w);font-weight:600;direction:ltr}
.nw-kata.is-on{box-shadow:0 0 0 2px var(--w)}
.nw-tebak{border-top-color:var(--line,#ccc)}
.nw-tebak u{color:inherit}
.nw-benar{border-color:#2f8a4a!important;background:color-mix(in srgb,#2f8a4a 10%,transparent)!important}
.nw-salah{border-color:#b33!important;background:color-mix(in srgb,#b33 10%,transparent)!important}
.nw-detail{border:1px solid var(--line,#ddd);border-left:4px solid var(--w);border-radius:10px;padding:12px;margin:10px 0;text-align:left;background:var(--surface)}
.nw-detail>b{font-size:1.6rem;font-weight:400;display:block;text-align:right}
.nw-detail>span{display:block;text-align:right;opacity:.75;font-size:.85rem}
.nw-detail dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:8px 0 0;font-size:.9rem}
.nw-detail dt{opacity:.7}
.nw-detail dd{margin:0}
.nw-detail dd [lang=ar]{font-family:var(--font-naskah);font-size:1.1rem}
.nw-perkiraan{opacity:.6;font-size:.72rem;border:1px solid currentColor;border-radius:6px;padding:0 4px}
.nw-bar{display:grid;grid-template-columns:minmax(120px,38%) 1fr 56px;gap:8px;align-items:center;font-size:.85rem;margin:4px 0}
.nw-bar i{height:10px;border-radius:6px;background:color-mix(in srgb,currentColor 10%,transparent);overflow:hidden}
.nw-bar i b{display:block;height:100%;background:var(--emerald);border-radius:6px}
.nw-bar small{text-align:right;opacity:.75;font-variant-numeric:tabular-nums}
.nw-tumpuk{display:flex;height:16px;border-radius:8px;overflow:hidden;margin:6px 0}
.nw-legenda{display:flex;flex-wrap:wrap;gap:10px;font-size:.8rem;margin:4px 0 10px}
.nw-legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.nw-kosong{border:1px dashed var(--line,#ccc);border-radius:12px;padding:16px;text-align:center}
.nw-soalkepala{display:flex;justify-content:space-between;font-size:.85rem;opacity:.75;margin-bottom:6px}
.nw-umpan p{margin:10px 0}
.nw-akhir{text-align:center}
.nw-akhir>b{font-size:2.4rem;display:block}
.nw-akhir .nw-pilih{justify-content:center}
.kata-irab{display:block;font-style:normal;font-size:.7rem;font-weight:600;color:var(--w);border-top:2px solid var(--w);margin-top:4px;padding-top:2px;direction:ltr}
.kata-irab-ket{font-size:.8rem;opacity:.75;margin:6px 0}
@media (max-width:600px){.nw-khamsah{grid-template-columns:1fr}.nw-bar{grid-template-columns:1fr 1fr 44px}.nw-kepala .nw-arbesar{display:none}.nw-telaah summary .nw-arkecil{display:none}}
/* ---- jurusan IAT ---- */
.jr-pane{text-align:left}
.jr-ik{width:20px;height:20px;flex:0 0 auto;vertical-align:-4px}
.jr-ik-besar{width:30px;height:30px}
#jurusanSeg .seg-item{display:inline-flex;align-items:center;gap:7px}
#jurusanSeg .seg-item .jr-ik{width:17px;height:17px}
.jr-h4{display:flex;align-items:center;gap:8px;font-size:1.02rem;margin:26px 0 10px;color:var(--ink)}
.jr-h4 .jr-ik{color:var(--emerald)}
.jr-sumber{color:var(--ink-soft);font-size:.82rem;margin:14px 0}
.jr-sumber a{color:var(--emerald)}
.jr-blok{margin-top:6px}

/* sampul: satu-satunya bagian yang "bersuara" */
.jr-sampul{position:relative;overflow:hidden;border-radius:var(--r-lg,20px);padding:30px 30px 26px;color:#f3efe2;
  background:
    radial-gradient(circle at 100% 0,rgba(232,200,119,.22),transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e8c877' stroke-opacity='.13'%3E%3Cpath d='M32 4l8 20 20 8-20 8-8 20-8-20-20-8 20-8z'/%3E%3Ccircle cx='32' cy='32' r='9'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg,#04382a,#0a5a3f 60%,#0d6b4b);
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;box-shadow:var(--shadow-lg)}
.jr-lembaga{margin:0;font-size:.85rem;color:#cfe3d8}
.jr-sampul h3{margin:4px 0 2px;font-size:clamp(1.45rem,3.2vw,2.05rem);line-height:1.15;letter-spacing:-.01em;color:#fff}
.jr-ar{margin:0 0 16px;font-family:var(--font-naskah);font-size:clamp(1.6rem,4vw,2.4rem);color:#e8c877;line-height:1.5}
.jr-segel{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:999px;text-decoration:none;color:#3a2a06;
  background:linear-gradient(135deg,#f3dc95,#d9ad48);box-shadow:0 6px 18px -8px rgba(0,0,0,.5);transition:transform .2s}
.jr-segel:hover{transform:translateY(-1px)}
.jr-segel .jr-ik{width:22px;height:22px;fill:#fff7dc;stroke:#8a6512}
.jr-segel b{display:block;line-height:1.1}
.jr-segel small{font-size:.75rem;opacity:.8}
.jr-angka{display:flex;flex-direction:column;gap:12px;margin:0;min-width:190px}
.jr-angka div{border-left:2px solid rgba(232,200,119,.5);padding-left:12px}
.jr-angka dt{font-size:.78rem;color:#cfe3d8}
.jr-angka dd{margin:0;font-size:1.6rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1.2}
.jr-masuk .jr-sampul-teks>*{animation:jrNaik .6s cubic-bezier(.2,.7,.2,1) both}
.jr-masuk .jr-sampul-teks>*:nth-child(2){animation-delay:.06s}.jr-masuk .jr-sampul-teks>*:nth-child(3){animation-delay:.14s}.jr-masuk .jr-sampul-teks>*:nth-child(4){animation-delay:.24s}
@keyframes jrNaik{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.jr-dua-kol{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-top:16px}
.jr-visi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;position:relative}
.jr-visi>.jr-ik{color:var(--gold)}
.jr-visi h4{margin:8px 0 6px;font-size:1rem}
.jr-visi p{margin:0;font-family:var(--font-read);font-size:1.12rem;line-height:1.7;max-width:62ch}
.jr-sisi .jr-h4{margin-top:0}
.jr-kontak{display:flex;flex-direction:column;gap:10px}
.jr-kontak-baris{flex-direction:row;flex-wrap:wrap}
.jr-kontak-baris .jr-kbtn{flex:1 1 240px}
.jr-kbtn{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-md);text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);transition:border-color .15s,transform .15s}
.jr-kbtn:hover{transform:translateY(-1px)}
.jr-kbtn .jr-ik{width:36px;height:36px;padding:8px;border-radius:12px;color:#fff;flex:0 0 36px}
.jr-wa .jr-ik{background:#1fa855}.jr-wa:hover{border-color:#1fa855}
.jr-ig .jr-ik{background:linear-gradient(45deg,#f9a03f,#d6247f 55%,#7b3fe4)}.jr-ig:hover{border-color:#d6247f}
.jr-kbtn span{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.jr-kbtn small{color:var(--ink-soft);font-size:.8rem}
.jr-misi{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;counter-reset:m}
.jr-misi li{counter-increment:m;position:relative;padding:14px 14px 14px 52px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.jr-misi li::before{content:counter(m);position:absolute;left:14px;top:13px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:.85rem;background:var(--emerald-soft);color:var(--emerald)}
.jr-misi p{margin:0;font-size:.93rem;line-height:1.55}
.jr-lulusan{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.jr-lulusan article{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.jr-lulusan .jr-ik{color:var(--gold);width:26px;height:26px}
.jr-lulusan b{display:block;margin:8px 0 4px}
.jr-lulusan p{margin:0;font-size:.88rem;color:var(--ink-soft);line-height:1.55}
.jr-pintu{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.jr-pintu button,.jr-tautan a,.jr-salam-besar{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;font:inherit;transition:border-color .15s,box-shadow .15s}
.jr-pintu button:hover,.jr-tautan a:hover,.jr-salam-besar:hover{border-color:var(--emerald);box-shadow:var(--shadow)}
.jr-pintu button:focus-visible,.jr-tautan a:focus-visible,.jr-katgrid button:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.jr-pintu-ik{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--emerald-soft);color:var(--emerald);flex:0 0 44px}
.jr-pintu-ik .jr-ik{width:22px;height:22px}
.jr-pintu span:nth-child(2),.jr-tautan a>span:nth-child(2),.jr-salam-besar>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.jr-pintu small,.jr-tautan small,.jr-salam-besar small{color:var(--ink-soft);font-size:.82rem;line-height:1.4}
.jr-panah{color:var(--ink-soft);transition:transform .15s}
.jr-pintu button:hover .jr-panah,.jr-tautan a:hover .jr-panah{transform:translateX(3px);color:var(--emerald)}

/* tombol dan bidang isian */
.jr-tombol{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,transform .1s}
.jr-tombol:active{transform:scale(.98)}
.jr-tombol:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.jr-utama{background:var(--emerald);border-color:var(--emerald);color:var(--surface)}
.jr-utama:hover{filter:brightness(1.07)}
.jr-halus{padding:7px 12px;font-size:.85rem;font-weight:600}
.jr-halus:hover{border-color:var(--emerald);color:var(--emerald)}
.jr-besar{padding:14px 26px;font-size:1rem}
.jr-tombol.is-sibuk .jr-ik{animation:jrPutar .8s linear infinite}
.jr-tombol:disabled{opacity:.7;cursor:progress}
@keyframes jrPutar{to{transform:rotate(360deg)}}
.jr-bidang{display:flex;align-items:flex-start;gap:10px;padding:0 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.jr-bidang:focus-within{border-color:var(--emerald);box-shadow:0 0 0 4px color-mix(in srgb,var(--emerald) 16%,transparent)}
.jr-bidang>.jr-ik{color:var(--ink-soft);margin-top:12px;width:18px;height:18px}
.jr-bidang:focus-within>.jr-ik{color:var(--emerald)}
.jr-bidang input,.jr-bidang textarea{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;padding:11px 0;resize:vertical}
.jr-bidang-besar textarea{font-size:1.05rem;min-height:58px}
.jr-bidang-cari{flex:1;min-width:220px}

/* cek judul */
.jr-periksa{margin-top:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,20px);padding:20px;box-shadow:var(--shadow)}
.jr-periksa-kepala{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.jr-periksa-kepala>.jr-ik,.jr-aduan-kepala>.jr-ik,.jr-salam>.jr-ik,.jr-tiket-kepala>.jr-ik{color:var(--emerald);background:var(--emerald-soft);border-radius:14px;padding:10px;width:48px;height:48px;flex:0 0 48px}
.jr-periksa h4,.jr-aduan-kepala h4,.jr-salam h4,.jr-tiket-kepala h4{margin:2px 0 4px;font-size:1.12rem}
.jr-periksa p,.jr-aduan-kepala p,.jr-salam p,.jr-tiket-kepala p{margin:0;color:var(--ink-soft);font-size:.9rem;line-height:1.5}
.jr-periksa-isi{display:flex;gap:10px;align-items:stretch}
.jr-periksa-isi .jr-bidang{flex:1}
.jr-vonis{display:flex;gap:18px;align-items:center;margin-top:16px;padding:16px;border-radius:var(--r-md);border:1.5px solid var(--line)}
.jr-vonis.jr-t2{border-color:#c0392b;background:color-mix(in srgb,#c0392b 9%,var(--surface))}
.jr-vonis.jr-t1{border-color:#c9a227;background:color-mix(in srgb,#c9a227 11%,var(--surface))}
.jr-vonis.jr-t0{border-color:#2f8a4a;background:color-mix(in srgb,#2f8a4a 9%,var(--surface))}
.jr-vonis b{display:block;font-size:1.05rem}
.jr-vonis p{margin:4px 0 8px;color:var(--ink-soft);font-size:.9rem}
.jr-cincin-wadah{position:relative;width:72px;height:72px;flex:0 0 72px}
.jr-cincin{width:72px;height:72px;transform:rotate(-90deg)}
.jr-cincin circle{fill:none;stroke-width:7}
.jr-cincin-latar{stroke:color-mix(in srgb,var(--ink) 10%,transparent)}
.jr-cincin-isi{stroke-linecap:round;transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1);stroke:#2f8a4a}
.jr-cincin.jr-t1 .jr-cincin-isi{stroke:#c9a227}.jr-cincin.jr-t2 .jr-cincin-isi{stroke:#c0392b}
.jr-cincin-angka{position:absolute;inset:0;display:grid;place-items:center;font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums}
.jr-cincin-angka small{font-size:.65rem}
.jr-temuan{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.jr-repo{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;font-size:.85rem;color:var(--ink-soft)}
.jr-repo span{margin-right:4px}
.jr-repo a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600}
.jr-repo a:hover{border-color:var(--emerald);color:var(--emerald)}
.jr-repo .jr-ik{width:14px;height:14px}

/* kategori */
.jr-katgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.jr-katgrid button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;transition:border-color .15s,background .15s}
.jr-katgrid button:hover{border-color:var(--w)}
.jr-katgrid button.is-on{border-color:var(--w);background:color-mix(in srgb,var(--w) 10%,var(--surface))}
.jr-kat-ik{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:var(--w);background:color-mix(in srgb,var(--w) 14%,transparent)}
.jr-katgrid button.is-on .jr-kat-ik{background:var(--w);color:#fff}
.jr-katgrid b{font-size:.9rem;line-height:1.25}
.jr-kat-n{font-size:.78rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:6px}
.jr-kat-n em{font-style:normal;color:#c0392b;font-weight:700}
.jr-kat-bar{display:block;width:100%;height:4px;border-radius:4px;background:color-mix(in srgb,var(--ink) 8%,transparent);margin-top:4px;overflow:hidden}
.jr-kat-bar i{display:block;height:100%;background:var(--w);border-radius:4px}
.jr-alat{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:16px 0 8px}
.jr-saklar{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:.9rem;font-weight:600;user-select:none}
.jr-saklar input{position:absolute;opacity:0;width:1px;height:1px}
.jr-saklar-jalur{width:42px;height:24px;border-radius:999px;background:color-mix(in srgb,var(--ink) 18%,transparent);position:relative;flex:0 0 42px;transition:background .2s}
.jr-saklar-jalur i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.jr-saklar input:checked+.jr-saklar-jalur{background:var(--emerald)}
.jr-saklar input:checked+.jr-saklar-jalur i{transform:translateX(18px)}
.jr-saklar input:focus-visible+.jr-saklar-jalur{outline:2px solid var(--emerald);outline-offset:2px}
.jr-legenda{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8rem;color:var(--ink-soft);margin:4px 0 10px}
.jr-legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.jr-m{background:#c0392b}.jr-k{background:#c9a227}
.jr-jumlah{font-size:.85rem;color:var(--ink-soft);margin:6px 0}
.jr-sk{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;margin:8px 0;background:var(--surface);position:relative}
.jr-sk::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--w)}
.jr-sk.jr-t2{border-color:color-mix(in srgb,#c0392b 55%,var(--line));background:color-mix(in srgb,#c0392b 5%,var(--surface))}
.jr-sk.jr-t2::before{background:#c0392b;width:5px}
.jr-sk.jr-t1{border-color:color-mix(in srgb,#c9a227 55%,var(--line))}
.jr-sk.jr-t1::before{background:#c9a227;width:5px}
.jr-sk-kepala{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.jr-katlabel{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--w)}
.jr-katlabel .jr-ik{width:15px;height:15px}
.jr-tanda{font-size:.74rem;font-weight:700;color:#fff;background:#c0392b;border-radius:999px;padding:2px 10px}
.jr-t1 .jr-tanda{background:#a8831a}
.jr-judul{margin:6px 0;font-size:1rem;line-height:1.45;font-weight:700}
.jr-sk.jr-t2 .jr-judul{color:#a5281c}
.jr-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.8rem;color:var(--ink-soft)}
.jr-meta span{display:inline-flex;align-items:center;gap:5px}
.jr-meta .jr-ik{width:14px;height:14px}
.jr-chip{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.jr-chip span{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;border-radius:999px;padding:3px 10px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.jr-chip .jr-obj{background:color-mix(in srgb,#3f6fb5 14%,transparent)}
.jr-chip .jr-ik{width:13px;height:13px}
.jr-pas{margin-top:10px}
.jr-pas summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:.85rem;font-weight:700;color:var(--emerald);list-style:none}
.jr-pas summary::-webkit-details-marker{display:none}
.jr-buka{width:16px;height:16px;transition:transform .2s}
.jr-pas[open] .jr-buka{transform:rotate(90deg)}
.jr-pas>div{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.jr-pasang{padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--ink) 4%,transparent);border-left:3px solid #c9a227}
.jr-pasang.jr-t2{border-left-color:#c0392b}.jr-pasang.jr-t0{border-left-color:var(--line)}
.jr-pasang-atas{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.jr-pasang b{font-size:.9rem;font-weight:600;line-height:1.4}
.jr-pasang small{display:block;color:var(--ink-soft);font-size:.78rem;margin-top:2px}
.jr-skor{display:inline-block;width:64px;height:6px;border-radius:6px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden;margin-top:7px;flex:0 0 64px}
.jr-skor i{display:block;height:100%;background:#2f8a4a}
.jr-skor.jr-t1 i{background:#c9a227}.jr-skor.jr-t2 i{background:#c0392b}
.jr-skor-angka{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;margin-top:1px!important;color:var(--ink)!important}
.jr-alasan{margin:6px 0 0;padding-left:18px;font-size:.78rem;color:var(--ink-soft)}
.jr-halaman{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0}
.jr-halaman button{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.jr-halaman button:hover:not(:disabled){border-color:var(--emerald);color:var(--emerald)}
.jr-halaman button:disabled{opacity:.4;cursor:default}
.jr-kosong{text-align:center;padding:26px 16px;border:1.5px dashed var(--line);border-radius:var(--r-md);color:var(--ink-soft)}
.jr-kosong .jr-ik{color:var(--emerald)}
.jr-kosong b{display:block;color:var(--ink);margin:6px 0 4px}
.jr-kosong p{margin:4px auto 0;max-width:46ch}
.jr-galat{display:flex;gap:8px;align-items:flex-start;color:#c0392b;font-size:.9rem;margin:10px 0}

/* syarat ujian */
.jr-salam{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,20px);padding:18px 20px}
.jr-salam>div{flex:1;min-width:220px}
.jr-tahap{list-style:none;padding:0;margin:14px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;counter-reset:none}
.jr-tahap a{display:flex;flex-direction:column;gap:2px;height:100%;padding:14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;position:relative}
.jr-tahap a:hover{border-color:var(--emerald)}
.jr-tahap-no{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-weight:800;font-size:.9rem;background:var(--emerald-soft);color:var(--emerald);margin-bottom:6px;flex:0 0 30px}
.jr-tahap-no .jr-ik{width:16px;height:16px}
.jr-tahap li.is-siap .jr-tahap-no,.jr-syarat.is-siap header .jr-tahap-no{background:var(--emerald);color:var(--surface)}
.jr-tahap small{color:var(--ink-soft);font-size:.8rem}
.jr-tahap-bar{display:block;height:4px;border-radius:4px;background:color-mix(in srgb,var(--ink) 8%,transparent);margin-top:8px;overflow:hidden}
.jr-tahap-bar i{display:block;height:100%;background:var(--emerald);transition:width .3s}
.jr-syarat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;margin:12px 0;scroll-margin-top:80px}
.jr-syarat header{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.jr-syarat header>div{flex:1;min-width:180px}
.jr-syarat h4{margin:0;font-size:1.05rem}
.jr-syarat header p{margin:2px 0 0;color:var(--ink-soft);font-size:.85rem}
.jr-berkas{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.jr-berkas label,.jr-setuju{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);cursor:pointer;font-size:.92rem;transition:border-color .15s,background .15s}
.jr-berkas label:hover{border-color:var(--emerald)}
.jr-berkas input,.jr-setuju input{position:absolute;opacity:0;width:1px;height:1px}
.jr-kotak{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;border:2px solid color-mix(in srgb,var(--ink) 30%,transparent);flex:0 0 22px;transition:background .15s,border-color .15s}
.jr-kotak .jr-ik{width:14px;height:14px;stroke-width:3;color:var(--surface);opacity:0;transform:scale(.5);transition:opacity .15s,transform .15s}
input:checked+.jr-kotak{background:var(--emerald);border-color:var(--emerald)}
input:checked+.jr-kotak .jr-ik{opacity:1;transform:none}
input:focus-visible+.jr-kotak{outline:2px solid var(--emerald);outline-offset:2px}
.jr-berkas label:has(input:checked){border-color:var(--emerald);background:color-mix(in srgb,var(--emerald) 8%,transparent)}
.jr-berkas label:has(input:checked) span:last-child{color:var(--ink-soft)}
.jr-selesai{display:none;align-items:center;gap:8px;margin:12px 0 0;padding:10px 12px;border-radius:12px;font-weight:700;color:var(--emerald);background:var(--emerald-soft)}
.jr-syarat.is-siap .jr-selesai{display:flex}

/* aduan */
.jr-aduan-kepala,.jr-tiket-kepala{display:flex;gap:14px;align-items:flex-start}
.jr-alur{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.jr-alur li{position:relative;padding:0 10px 0 0;display:flex;flex-direction:column;gap:2px}
.jr-alur li::after{content:"";position:absolute;top:19px;left:44px;right:8px;height:2px;background:var(--line)}
.jr-alur li:last-child::after{display:none}
.jr-alur .jr-ik{width:38px;height:38px;padding:9px;border-radius:50%;background:var(--emerald-soft);color:var(--emerald);margin-bottom:6px;position:relative;z-index:1}
.jr-alur b{font-size:.9rem}
.jr-alur small{color:var(--ink-soft);font-size:.8rem;line-height:1.4}
.jr-darurat{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,#c0392b 9%,var(--surface));border:1px solid color-mix(in srgb,#c0392b 35%,var(--line));font-size:.9rem;margin:0 0 14px}
.jr-darurat .jr-ik{color:#c0392b}
.jr-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,20px);padding:20px;box-shadow:var(--shadow)}
.jr-form fieldset{border:0;padding:0;margin:0 0 20px}
.jr-form legend{font-weight:800;font-size:1rem;margin-bottom:10px;padding:0}
.jr-pilihan{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.jr-pilihan label{cursor:pointer;position:relative}
.jr-pilihan input{position:absolute;opacity:0}
.jr-pilihan label>span{display:flex;flex-direction:column;gap:3px;height:100%;padding:12px;border-radius:12px;border:1.5px solid var(--line);transition:border-color .15s,background .15s}
.jr-pilihan label:hover>span{border-color:var(--emerald)}
.jr-pilihan .jr-ik{color:var(--emerald);width:22px;height:22px;margin-bottom:4px}
.jr-pilihan b{font-size:.88rem;line-height:1.3}
.jr-pilihan small{font-size:.76rem;color:var(--ink-soft);line-height:1.35}
.jr-pilihan input:checked+span{border-color:var(--emerald);background:color-mix(in srgb,var(--emerald) 10%,var(--surface));box-shadow:inset 0 0 0 1px var(--emerald)}
.jr-pilihan input:focus-visible+span{outline:2px solid var(--emerald);outline-offset:2px}
.jr-pilihan input[value="Kekerasan seksual"]+span .jr-ik{color:#8a4fa3}
.jr-satgas{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,#8a4fa3 12%,var(--surface));border:1px solid color-mix(in srgb,#8a4fa3 40%,var(--line));font-size:.88rem;margin:-8px 0 18px}
.jr-satgas .jr-ik{color:#8a4fa3}
.jr-isian{display:block;margin-bottom:12px}
.jr-isian>span:first-child{display:block;font-weight:700;font-size:.86rem;margin-bottom:6px}
.jr-isian em{font-style:normal;font-weight:600;font-size:.72rem;color:var(--emerald);margin-left:6px}
.jr-bidang-teks textarea{min-height:120px}
.jr-hitung{display:block;text-align:right;font-size:.75rem;color:var(--ink-soft);margin-top:4px;font-variant-numeric:tabular-nums}
.jr-hitung.is-kurang{color:#c0392b}
.jr-dua{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.jr-segmen{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.jr-segmen label{cursor:pointer}
.jr-segmen input{position:absolute;opacity:0}
.jr-segmen span{display:inline-block;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);font-size:.86rem;font-weight:600;transition:all .15s}
.jr-segmen input:checked+span{background:var(--emerald);border-color:var(--emerald);color:var(--surface)}
.jr-segmen input:focus-visible+span{outline:2px solid var(--emerald);outline-offset:2px}
.jr-saklar-besar{display:flex;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);margin-bottom:12px}
.jr-saklar-besar .jr-saklar-jalur{margin-top:2px}
.jr-saklar-besar>span:last-child{display:grid;grid-template-columns:auto 1fr;gap:0 8px;font-weight:400}
.jr-saklar-besar>span:last-child .jr-ik{grid-row:span 2;color:var(--emerald)}
.jr-saklar-besar small{color:var(--ink-soft);font-size:.8rem}
.jr-setuju{border:0;padding:4px 0;margin-bottom:16px;align-items:flex-start;line-height:1.4}
.jr-kirim-baris{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.jr-galat-form{color:#c0392b;font-size:.88rem;font-weight:600}
.jr-jebak{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.jr-terkirim{display:flex;gap:14px;align-items:flex-start;margin-top:16px;padding:16px;border-radius:var(--r-md);background:var(--emerald-soft);border:1px solid var(--emerald)}
.jr-terkirim>.jr-ik{color:var(--surface);background:var(--emerald);border-radius:50%;padding:6px;stroke-width:3}
.jr-terkirim b{font-size:1.05rem}
.jr-terkirim p{margin:2px 0 10px;font-size:.88rem;color:var(--ink-soft)}
.jr-kode-baris{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.jr-kode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;font-size:1.15rem;letter-spacing:.06em;padding:6px 12px;border-radius:10px;background:var(--surface);border:1.5px dashed var(--emerald)}
.jr-tiket-cek{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,20px);padding:20px}
.jr-tiket-cek #jrTiket{text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em}
.jr-status{margin-top:12px;padding:16px;border-radius:var(--r-md);border:1px solid var(--line)}
.jr-status-kepala{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px;color:var(--ink-soft);font-size:.88rem}
.jr-jejak{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr)}
.jr-jejak li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;font-size:.78rem;color:var(--ink-soft)}
.jr-jejak li::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:3px;background:var(--line);z-index:0}
.jr-jejak li:first-child::before{display:none}
.jr-jejak li.is-lewat::before,.jr-jejak li.is-kini::before{background:var(--emerald)}
.jr-jejak li>span{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:3px solid var(--line)}
.jr-jejak li.is-lewat>span,.jr-jejak li.is-kini>span{background:var(--emerald);border-color:var(--emerald);color:var(--surface)}
.jr-jejak li.is-kini>span{box-shadow:0 0 0 5px color-mix(in srgb,var(--emerald) 22%,transparent)}
.jr-jejak li.is-kini b{color:var(--ink)}
.jr-jejak .jr-ik{width:14px;height:14px;stroke-width:3}
.jr-tanggapan{display:flex;gap:10px;margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--emerald-soft)}
.jr-tanggapan .jr-ik{color:var(--emerald)}
.jr-tanggapan p{margin:0}

/* tautan */
.jr-salam-besar{padding:20px;border-color:var(--emerald);background:color-mix(in srgb,var(--emerald) 7%,var(--surface))}
.jr-salam-besar b{font-size:1.2rem}
.jr-salam-besar .jr-pintu-ik{width:52px;height:52px;flex-basis:52px;background:var(--emerald);color:var(--surface)}
.jr-tautan{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin-top:10px}

:root[data-theme="dark"] .jr-sk.jr-t2 .jr-judul,:root[data-theme="dark"] .jr-kat-n em{color:#ff8f80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .jr-sk.jr-t2 .jr-judul,:root:not([data-theme="light"]) .jr-kat-n em{color:#ff8f80}}
@media (max-width:760px){
  .jr-sampul{grid-template-columns:1fr;padding:22px 18px}
  .jr-angka{flex-direction:row;flex-wrap:wrap;min-width:0}
  .jr-angka div{flex:1 1 120px}
  .jr-dua-kol{grid-template-columns:1fr}
  .jr-periksa-isi{flex-direction:column}
  .jr-tahap{grid-template-columns:1fr}
  .jr-alur{grid-template-columns:1fr 1fr;gap:14px}
  .jr-alur li::after{display:none}
  .jr-dua{grid-template-columns:1fr}
  .jr-jejak{grid-template-columns:1fr;gap:10px}
  .jr-jejak li{flex-direction:row;text-align:left}
  .jr-jejak li::before{display:none}
  .jr-pasang-atas{flex-direction:column;gap:4px}
  #jurusanSeg{overflow-x:auto;flex-wrap:nowrap}
  #jurusanSeg .seg-item{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.jr-ik,.jr-cincin-isi,.jr-tahap-bar i,.jr-saklar-jalur i{transition:none!important;animation:none!important}}
.jr-logo{display:block;width:72px;height:72px;object-fit:contain;border-radius:18px;background:#fff;padding:6px;margin-bottom:12px;box-shadow:0 6px 18px -8px rgba(0,0,0,.45)}
.jr-logo[hidden]{display:none}
.jr-vonis .jr-cincin-angka{display:grid;font-size:1.05rem}
.jr-pasang-atas b{flex:1;min-width:0}
.jr-skorwadah{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.jr-skorwadah .jr-skor{margin:0}
.jr-skor-angka{font-size:.8rem;font-weight:800;font-variant-numeric:tabular-nums;min-width:36px;text-align:right}
.jr-vonis .jr-cincin-angka{display:flex;align-items:center;justify-content:center;gap:1px}
@media (max-width:760px){.jr-vonis{flex-direction:column;align-items:flex-start}}

/* ---- keterbacaan huruf Arab: ukuran minimum di semua menu, HP dan tablet ---- */
.ar-sisip{font-family:var(--font-naskah);font-size:1.3em;line-height:1.5;font-weight:400;unicode-bidi:isolate}
.nw-ar,.nw-arkecil,.ab-babjudul small.nw-ar,.ab-daftar small.nw-arkecil{font-size:1.3rem!important;line-height:1.6;opacity:1;color:var(--emerald)}
.ab-daftar button.is-on small.nw-arkecil{color:inherit}
.nw-detail dd [lang=ar]{font-size:1.35rem}
.nw-detail>b{font-size:2rem}
.nw-kata b{font-size:1.6rem}
.nw-grid b,.nw-peran b{font-size:1.5rem}
.nw-khamsah b{font-size:1.55rem}
.nw-blok h5 span{font-size:1.35rem}
.nw-telaah summary .nw-arkecil{font-size:1.3rem!important}
.ha-ar{font-family:var(--font-naskah);font-size:1.8rem;line-height:1.5}
.ar-judul{font-size:1.15em}
.sj-bawah i{font-size:20px}
.quick i{font-size:21px}
.tema-card .t-ar{font-size:23px}
.s-ar{font-size:24px}
.kitab-card .k-ar{font-size:23px}
.pk-arab{font-size:22px}
.th-ar{font-size:22px}
.hd-kosa small{font-size:19px;letter-spacing:0}
.hm-sanad,.hm-ekor{font-size:19px}
.mfx-arab{font-size:20px}
.hs-teks.hs-arab{font-size:22px}
.kata-chip b{font-size:max(24px,calc(var(--arab-size) * 0.66))}
.ar-sisip,.nw-ar,.nw-arkecil,.hm-ar,.hd-ar,.ay-arab,.jr-ar{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* tablet */
@media (min-width:600px) and (max-width:1100px){
  .hm-ar{font-size:clamp(26px,3.6vw,34px)}
  .hd-hadis p.hd-ar{font-size:clamp(25px,3.4vw,32px)}
  .hd-butir .hd-ar,.hd-kosa .hd-ar{font-size:clamp(24px,3.2vw,30px)}
  .nw-kata b{font-size:1.75rem}
  .sj-bawah i{font-size:21px}
}
/* HP */
@media (max-width:599px){
  .hm-ar{font-size:max(24px,calc(var(--arab-size,36px)*.7));line-height:2}
  .hd-hadis p.hd-ar{font-size:max(23px,calc(var(--arab-size,36px)*.68))}
  .hd-butir .hd-ar,.hd-kosa .hd-ar{font-size:23px}
  .ar-sisip{font-size:1.25em}
  .nw-kata{min-width:64px}
}
.nw-detail dd[lang=ar]{font-family:var(--font-naskah);font-size:1.4rem;letter-spacing:0}
small .ar-sisip,.ha-ket .ar-sisip{font-size:1.45em}
.pk-sampul{font-size:18px!important}
/* ---- jurusan: aplikasi & video ---- */
.jr-media-sampul{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:22px 24px;border-radius:var(--r-lg,20px);color:#fff;
  background:radial-gradient(circle at 90% 10%,rgba(255,255,255,.18),transparent 40%),linear-gradient(135deg,#0f7a55,#1aa36f 55%,#34c48a);box-shadow:var(--shadow-lg)}
.jr-media-teks{display:flex;gap:14px;align-items:flex-start;flex:1;min-width:240px}
.jr-media-teks>.jr-ik{width:52px;height:52px;padding:11px;border-radius:16px;background:rgba(255,255,255,.18);flex:0 0 52px}
.jr-media-sampul .jr-lembaga{color:#d6f5e6;margin:0 0 2px}
.jr-media-sampul h4{margin:0 0 4px;font-size:1.3rem;color:#fff}
.jr-media-sampul p{margin:0;color:#e3f7ee;font-size:.92rem;max-width:52ch}
.jr-play{background:#fff;color:#0f7a55;border-color:#fff}
.jr-play:hover{background:#eafaf2}
.jr-app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:14px 0 22px}
.jr-app{display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;transition:transform .16s,box-shadow .16s,border-color .16s;animation:jrNaik .5s both;animation-delay:calc(var(--i,0)*40ms)}
.jr-app:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--emerald)}
.jr-app img,.jr-app-ini{width:60px;height:60px;border-radius:16px;flex:0 0 60px;object-fit:cover;box-shadow:0 4px 12px -6px rgba(0,0,0,.4)}
.jr-app-ini{display:grid;place-items:center;font-weight:800;font-size:1.1rem;color:#fff;background:linear-gradient(135deg,#0f7a55,#34c48a)}
.jr-app-isi{flex:1;min-width:0;display:flex;flex-direction:column}
.jr-app-isi b{font-size:.95rem;line-height:1.3}
.jr-app-isi small{color:var(--ink-soft);font-size:.8rem;line-height:1.4}
.jr-app-badge{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:700;color:var(--emerald);background:var(--emerald-soft);border-radius:999px;padding:5px 10px;white-space:nowrap}
.jr-app-badge .jr-ik{width:14px;height:14px}
.jr-yt{border:1px solid var(--line);border-radius:var(--r-lg,20px);background:var(--surface);padding:18px 20px}
.jr-yt-kepala{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:14px}
.jr-yt-kepala>div{flex:1;min-width:200px}
.jr-yt-kepala h4{margin:0;font-size:1.1rem}
.jr-yt-kepala p{margin:2px 0 0;color:var(--ink-soft);font-size:.9rem}
.jr-yt-ik{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#ff0033;color:#fff;flex:0 0 48px}
.jr-yt-ik .jr-ik{width:24px;height:24px}
.jr-ytbtn{background:#ff0033;border-color:#ff0033;color:#fff}
.jr-ytbtn:hover{filter:brightness(1.08)}
.jr-yt-embed{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.jr-yt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.jr-yt-utama b{display:block;margin:10px 0 2px;font-size:1rem}
.jr-yt-utama small{color:var(--ink-soft)}
.jr-yt-daftar{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:14px}
.jr-yt-item{display:flex;flex-direction:column;gap:6px;text-align:left;padding:0 0 8px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;position:relative;transition:transform .16s,box-shadow .16s}
.jr-yt-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.jr-yt-item img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.jr-yt-play{position:absolute;top:calc(28% - 18px);left:calc(50% - 18px);width:36px;height:36px;border-radius:50%;background:rgba(255,0,51,.92);color:#fff;display:grid;place-items:center}
.jr-yt-play .jr-ik{width:16px;height:16px;fill:#fff}
.jr-yt-item>span:last-child{display:flex;flex-direction:column;padding:0 10px}
.jr-yt-item b{font-size:.88rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jr-yt-item small{color:var(--ink-soft);font-size:.76rem}
@media (max-width:600px){.jr-media-sampul{padding:18px}.jr-app-grid{grid-template-columns:1fr}}
/* ---- pohon: geser kiri-kanan ---- */
.sj-bingkai{position:relative}
.sj{cursor:grab;scrollbar-width:thin;scrollbar-color:var(--emerald) transparent;overscroll-behavior-x:contain}
.sj.menyeret{cursor:grabbing;user-select:none;scroll-behavior:auto}
.sj::-webkit-scrollbar{height:10px;width:10px}
.sj::-webkit-scrollbar-thumb{background:var(--emerald);border-radius:6px;border:2px solid var(--surface)}
.sj::-webkit-scrollbar-track{background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:6px}
.sj-geser{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--emerald);font-size:26px;line-height:1;cursor:pointer;box-shadow:var(--shadow-lg);display:none;place-items:center;z-index:2;transition:opacity .15s}
.sj-kiri{left:6px}.sj-kanan{right:6px}
.sj-bingkai.bisa-geser .sj-geser{display:grid}
.sj-bingkai.di-kiri .sj-kiri,.sj-bingkai.di-kanan .sj-kanan{opacity:.25;pointer-events:none}
.sj-bingkai.bisa-geser::after{content:"";position:absolute;top:0;bottom:12px;right:0;width:48px;border-radius:0 var(--r-md) var(--r-md) 0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 85%,transparent));pointer-events:none}
.sj-bingkai.di-kanan::after{display:none}
.sj-petunjuk{display:none;font-size:.78rem;color:var(--ink-soft);margin-top:6px}
.sj-bingkai.bisa-geser .sj-petunjuk{display:block}
@media (max-width:760px){.sj-petunjuk{display:none!important}.sj-geser{width:34px;height:34px;font-size:22px}}
/* ---- tombol melayang kembali ke pohon ---- */
.tq-kembali-pohon{position:fixed;right:18px;bottom:22px;z-index:60;display:inline-flex;align-items:center;gap:8px;padding:12px 18px 12px 12px;border-radius:999px;border:0;background:var(--emerald);color:var(--surface);font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 12px 30px -10px rgba(5,89,59,.7);animation:jrNaik .3s both;max-width:calc(100vw - 36px)}
.tq-kembali-pohon b{font-weight:800}
.tq-kembali-pohon span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tq-kembali-pohon:hover{filter:brightness(1.08)}
.tq-kembali-pohon:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:760px){.tq-kembali-pohon{bottom:78px;right:12px;font-size:13px;padding:10px 14px 10px 10px}}
@media print{.tq-kembali-pohon{display:none!important}}
/* tombol kembali di pembaca tafsir/hadis tetap terlihat saat menggulir */
.mf-kembali{position:sticky;top:64px;z-index:5;box-shadow:var(--shadow)}
@media (max-width:760px){.mf-kembali{top:58px}}
/* ---- teks tafsir: rata kiri-kanan, paragraf lega, sub-judul dan kutipan ---- */
.ay-tafsir p,.tf-teks p,.tf-tabisi p,.nk-materi p,.mfx-isi p{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;line-height:1.85;margin:0 0 .95em;font-size:1.02rem;letter-spacing:.005em;color:var(--ink)}
.ay-tafsir p:last-child,.tf-teks p:last-child,.tf-tabisi p:last-child{margin-bottom:0}
.ay-tafsir p.tf-sub,.tf-teks p.tf-sub,.tf-tabisi p.tf-sub,.nk-materi p.tf-sub{text-align:left;font-weight:700;color:var(--emerald);margin:1.2em 0 .45em;font-size:.98rem;letter-spacing:0}
.ay-tafsir p.tf-sub:first-child,.tf-teks p.tf-sub:first-child,.tf-tabisi .hd-label + p.tf-sub{margin-top:.4em}
.ay-tafsir p.tf-kutip,.tf-teks p.tf-kutip,.tf-tabisi p.tf-kutip,.nk-materi p.tf-kutip{text-align:left;font-family:var(--font-read);font-style:italic;font-size:1.05rem;padding:8px 14px;margin:.4em 0 1em;border-left:3px solid var(--gold);background:color-mix(in srgb,var(--gold) 8%,transparent);border-radius:0 10px 10px 0}
.ay-tafsir p.tf-kutip i,.tf-teks p.tf-kutip i{font-style:italic}
.ay-tafsir p b,.tf-teks p b,.tf-tabisi p b{color:var(--emerald)}
@media (max-width:600px){.ay-tafsir p,.tf-teks p,.tf-tabisi p,.nk-materi p{text-align:left;line-height:1.8;font-size:1rem}}

/* ===== Penanda akhir ayat berhias (rosette emas) ===== */
.tq-no{display:inline-grid;place-items:center;box-sizing:border-box;width:1.85em;height:1.85em;min-width:0;padding:0;margin:0 .14em;
  font-family:var(--font-arab);font-size:.66em;font-weight:700;line-height:1;color:#a8832a;letter-spacing:0;padding-top:.08em;
  border:0;border-radius:0;background:transparent no-repeat center/contain;vertical-align:.08em;white-space:nowrap;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M32 2l4.6 8.6 8.6-4.6-1.1 9.7 9.7-1.1-4.6 8.6L58 32l-8.8 4.8 4.6 8.6-9.7-1.1 1.1 9.7-8.6-4.6L32 62l-4.6-8.6-8.6 4.6 1.1-9.7-9.7 1.1 4.6-8.6L6 32l8.8-4.8-4.6-8.6 9.7 1.1-1.1-9.7 8.6 4.6z'/%3E%3Ccircle cx='32' cy='32' r='19'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='16.5' fill='%23c9a24a' fill-opacity='.14'/%3E%3Cg fill='%23c9a24a'%3E%3Ccircle cx='32' cy='9' r='1.6'/%3E%3Ccircle cx='32' cy='55' r='1.6'/%3E%3Ccircle cx='9' cy='32' r='1.6'/%3E%3Ccircle cx='55' cy='32' r='1.6'/%3E%3C/g%3E%3C/svg%3E")}
button.tq-no{cursor:pointer;transition:transform .15s}
button.tq-no:hover{background-color:transparent;color:#7a5c15;transform:scale(1.12)}
.th-nomor.tq-no{font-size:.62em;color:#a8832a}
.mushaf-ar .tq-no{font-size:.62em;vertical-align:.14em}
.ay-arab .tq-no, .ay-ar .tq-no, .hm-ar .tq-no, .nk-ar .tq-no, .b-ar .tq-no{font-size:.64em;vertical-align:.12em}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tq-no{color:#e8c76a;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e3bf5e' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M32 2l4.6 8.6 8.6-4.6-1.1 9.7 9.7-1.1-4.6 8.6L58 32l-8.8 4.8 4.6 8.6-9.7-1.1 1.1 9.7-8.6-4.6L32 62l-4.6-8.6-8.6 4.6 1.1-9.7-9.7 1.1 4.6-8.6L6 32l8.8-4.8-4.6-8.6 9.7 1.1-1.1-9.7 8.6 4.6z'/%3E%3Ccircle cx='32' cy='32' r='19'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='16.5' fill='%23e3bf5e' fill-opacity='.16'/%3E%3Cg fill='%23e3bf5e'%3E%3Ccircle cx='32' cy='9' r='1.6'/%3E%3Ccircle cx='32' cy='55' r='1.6'/%3E%3Ccircle cx='9' cy='32' r='1.6'/%3E%3Ccircle cx='55' cy='32' r='1.6'/%3E%3C/g%3E%3C/svg%3E")} }
:root[data-theme="dark"] .tq-no{color:#e8c76a;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e3bf5e' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M32 2l4.6 8.6 8.6-4.6-1.1 9.7 9.7-1.1-4.6 8.6L58 32l-8.8 4.8 4.6 8.6-9.7-1.1 1.1 9.7-8.6-4.6L32 62l-4.6-8.6-8.6 4.6 1.1-9.7-9.7 1.1 4.6-8.6L6 32l8.8-4.8-4.6-8.6 9.7 1.1-1.1-9.7 8.6 4.6z'/%3E%3Ccircle cx='32' cy='32' r='19'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='16.5' fill='%23e3bf5e' fill-opacity='.16'/%3E%3Cg fill='%23e3bf5e'%3E%3Ccircle cx='32' cy='9' r='1.6'/%3E%3Ccircle cx='32' cy='55' r='1.6'/%3E%3Ccircle cx='9' cy='32' r='1.6'/%3E%3Ccircle cx='55' cy='32' r='1.6'/%3E%3C/g%3E%3C/svg%3E")}

/* ===== SEMANTIK (sm-*) ===== */
.sm-ik{width:17px;height:17px;flex:0 0 auto}
.sm-kepala{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:center;padding:18px 20px;margin-bottom:14px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(181,138,27,.14),rgba(15,122,85,.10));border:1px solid var(--line)}
.sm-kepala h3{margin:4px 0 6px;font-size:21px}
.sm-kepala p{margin:0;color:var(--ink-soft);font-size:14px;max-width:62ch}
.sm-tahap-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:6px}
.sm-tahap-mini span{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink)}
.sm-tahap-mini b{flex:0 0 22px;height:22px;display:grid;place-items:center;border-radius:7px;color:#fff;font-size:12px;
  background:hsl(calc(150 + var(--i) * 32) 48% 42%)}
.sm-alat{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 10px}
.sm-cari{flex:1 1 260px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-soft)}
.sm-cari input{flex:1;border:0;background:transparent;padding:11px 0;font:inherit;color:var(--ink);outline:none;min-width:0}
.sm-metode{display:flex;gap:6px}
.sm-chip{padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.sm-chip.is-on{background:var(--emerald);border-color:var(--emerald);color:#fff}
.sm-tema-bar{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:2px 0 12px}
.sm-tema{display:flex;flex-direction:column;align-items:stretch;gap:2px;text-align:left;padding:9px 12px 10px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;font-weight:700;line-height:1.25;cursor:pointer;border-left:4px solid var(--w);min-width:0}
.sm-tema i{order:-1;font-style:normal;font-family:var(--font-arab);font-size:17px;line-height:1.5;color:var(--w);direction:rtl;text-align:right;opacity:.9;margin-bottom:2px}
.sm-tema span{display:block}
.sm-tema small{font-weight:500;color:var(--ink-soft);font-size:11.5px}
.sm-tema.is-on{background:color-mix(in srgb,var(--w) 14%,var(--surface));border-color:var(--w)}
@media (max-width:480px){.sm-tema-bar{grid-template-columns:repeat(2,1fr)}.sm-tema{font-size:12.5px;padding:8px 10px}.sm-tema i{font-size:15px}}
.sm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.sm-kartu{position:relative;display:grid;gap:4px;text-align:left;padding:16px 16px 14px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s;overflow:hidden}
.sm-kartu::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--w)}
.sm-kartu:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.sm-kartu-ar{font-family:var(--font-arab);font-size:30px;line-height:1.5;color:var(--w);text-align:right}
.sm-kartu b{font-size:17px}
.sm-kartu-akar{font-family:var(--font-arab);font-size:16px;color:var(--ink-soft);text-align:left;direction:rtl;display:inline-block;letter-spacing:.2em}
.sm-kartu-desc{font-size:13px;color:var(--ink-soft);line-height:1.5}
.sm-kartu-tag{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;font-size:11.5px}
.sm-kartu-tag em{font-style:normal;font-weight:700;color:color-mix(in srgb,var(--w) 70%,#000)}
:root[data-theme="dark"] .sm-kartu-tag em{color:color-mix(in srgb,var(--w) 60%,#fff)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sm-kartu-tag em{color:color-mix(in srgb,var(--w) 60%,#fff)}}
.sm-kartu-tag i{font-style:normal;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft)}
/* detail */
.sm-detail{--w:var(--emerald)}
.sm-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.sm-badge,.sm-badge-tema{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--surface-2);color:var(--ink-soft)}
.sm-badge-tema{background:color-mix(in srgb,var(--w) 16%,transparent);color:var(--w)}
.sm-judul{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px;padding:18px 20px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--w) 16%,var(--surface)),var(--surface));margin-bottom:14px}
.sm-judul h2{margin:0;font-size:28px}
.sm-judul-ar{display:block;font-family:var(--font-arab);font-size:44px;line-height:1.4;color:var(--w)}
.sm-akar{margin:4px 0 0;color:var(--ink-soft);font-size:13.5px}
.sm-akar b{font-family:var(--font-arab);font-size:19px;letter-spacing:.2em;color:var(--ink)}
.sm-aksi{display:flex;flex-wrap:wrap;gap:8px}
.sm-aksi .btn{display:inline-flex;align-items:center;gap:7px}
.sm-stepper{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:8px 0 12px}
.sm-step{display:grid;gap:4px;justify-items:center;padding:10px 6px 8px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:12px;font-weight:600;cursor:pointer;text-align:center;line-height:1.25;position:relative}
.sm-step b{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);color:var(--ink-soft);font-size:13px}
.sm-step.is-on{border-color:var(--w);background:color-mix(in srgb,var(--w) 12%,var(--surface))}
.sm-step.is-on b{background:var(--w);color:#fff}
.sm-step.is-kosong{opacity:.55}
.sm-step:not(:last-child)::after{content:"";position:absolute;right:-7px;top:22px;width:8px;height:2px;background:var(--line)}
.sm-tahap-isi{padding:18px 20px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);margin-bottom:22px}
.sm-tahap-kepala{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.sm-tahap-kepala b{flex:0 0 36px;height:36px;display:grid;place-items:center;border-radius:11px;background:var(--w);color:#fff;font-size:16px}
.sm-tahap-kepala h4{margin:0 0 2px;font-size:18px}
.sm-tahap-kepala p{margin:0;color:var(--ink-soft);font-size:13.5px}
.sm-teks p{margin:0 0 10px;font-family:var(--font-read);font-size:16px;line-height:1.8;text-align:justify;hyphens:auto}
.sm-teks p:last-child{margin-bottom:0}
.sm-tahap-isi .hd-label{margin:14px 0 6px}
.sm-tema-kartu{padding:16px 18px;border-radius:var(--r-md);border-left:5px solid var(--w);background:color-mix(in srgb,var(--w) 8%,var(--surface-2))}
.sm-tema-kartu h3{margin:0 0 6px;font-size:20px}
.sm-tema-ar{float:right;font-family:var(--font-arab);font-size:26px;color:var(--w)}
.sm-sesama,.sm-relasi-kata,.sm-ayat-kunci{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sm-relasi-kata .hd-label,.sm-ayat-kunci .hd-label{flex:1 0 100%;margin:0}
.sm-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.sm-pill i{font-style:normal;font-family:var(--font-arab);font-size:17px;color:var(--gold)}
.sm-pill[dir="rtl"]{font-family:var(--font-arab);font-size:18px}
.sm-pill.is-diam{cursor:default;background:var(--surface-2)}
.sm-pill:not(.is-diam):hover{border-color:var(--w);color:var(--w)}
.sm-bentuk{margin-top:14px}
.sm-pra{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.sm-pra-kolom{padding:14px 16px;border-radius:var(--r-md);background:var(--surface-2)}
.sm-diwan{margin:6px 0 0;padding-left:18px;font-size:14.5px;line-height:1.7}
.sm-syair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sm-syair-ar p{margin:0 0 10px;font-family:var(--font-arab);font-size:clamp(22px,2.4vw,27px);line-height:2.1;color:var(--ink);text-align:right}
.sm-syair-id p{margin:0 0 10px;font-family:var(--font-read);font-style:italic;font-size:15.5px;line-height:1.75;color:var(--ink)}
.sm-syair-sumber{font-style:normal!important;font-weight:700;color:var(--w)!important;font-size:13px!important;text-transform:uppercase;letter-spacing:.05em}
.sm-konsep{margin-top:14px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2)}
.sm-konsep summary{cursor:pointer;font-weight:700}
.sm-konsep .sm-teks{margin-top:10px}
.sm-surah{margin-bottom:14px}
.sm-surah-bar{display:flex;gap:8px;align-items:flex-end;overflow-x:auto;padding:8px 2px 4px}
.sm-surah-bar span{flex:0 0 58px;display:grid;justify-items:center;gap:3px;font-size:11px;color:var(--ink-soft);text-align:center}
.sm-surah-bar i{display:block;width:26px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--w),color-mix(in srgb,var(--w) 55%,transparent))}
.sm-surah-bar b{color:var(--ink);font-size:12px}
.sm-surah-bar small{max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-ayat{padding:16px 0;border-bottom:1px dashed var(--line)}
.sm-ayat:last-child{border-bottom:0}
.sm-ayat-ar{margin:0 0 6px}
.sm-ayat-id{margin:4px 0;font-family:var(--font-read);font-size:15.5px;line-height:1.75}
.sm-ayat-makna{margin:6px 0 0;padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--w) 9%,var(--surface-2));font-size:14px;line-height:1.6}
.sm-ayat-kaki{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.sm-ayat-ref{font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-right:auto}
.sm-mini{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.sm-mini:hover{border-color:var(--w);color:var(--w)}
.sm-hal{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--ink-soft)}
/* garis waktu */
.sm-era{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;margin-bottom:22px}
.sm-era::before{content:"";position:absolute;left:8%;right:8%;top:14px;height:3px;background:linear-gradient(90deg,#d08b2c,var(--w),#4f7cc4);border-radius:3px}
.sm-era-kartu{display:grid;gap:4px;justify-items:center;text-align:center;padding:0 10px 14px;background:transparent;border:0;color:var(--ink);font:inherit;cursor:pointer}
.sm-era-titik{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface);border:3px solid var(--w);margin-bottom:8px;position:relative;z-index:1}
.sm-era-kartu:first-child .sm-era-titik{border-color:#d08b2c}
.sm-era-kartu:last-child .sm-era-titik{border-color:#4f7cc4}
.sm-era-titik i{width:10px;height:10px;border-radius:50%;background:var(--w)}
.sm-era-kartu:first-child .sm-era-titik i{background:#d08b2c}
.sm-era-kartu:last-child .sm-era-titik i{background:#4f7cc4}
.sm-era-kartu small{color:var(--ink-soft);font-size:12px}
.sm-era-kartu p{margin:6px 0 2px;font-size:13.5px;line-height:1.55;font-family:var(--font-read)}
.sm-era-kartu em{font-style:normal;font-size:12px;color:var(--w);font-weight:600}
.sm-era-kartu:hover p{text-decoration:underline}
/* medan */
.sm-medan-gulir{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--w,var(--emerald)) 9%,var(--surface)),var(--surface) 70%)}
.sm-medan-svg{display:block;width:100%;min-width:560px;max-height:640px}
.sm-medan-svg .orbit{fill:none;stroke:var(--line);stroke-dasharray:4 6}
.sm-node line{stroke:var(--w);stroke-opacity:.35;stroke-width:1.4}
.sm-node circle{fill:var(--surface);stroke:var(--w);stroke-width:2}
.sm-node.r2 circle{stroke-dasharray:3 3}
.sm-node.r3 circle{fill:color-mix(in srgb,var(--w) 14%,var(--surface))}
.sm-node text{font:600 12.5px var(--font-ui,system-ui);fill:var(--ink)}
.sm-node text.ar{font-family:var(--font-arab);font-size:17px}
.sm-node text.ket{font-size:10.5px;font-weight:600;fill:var(--ink-soft);text-transform:capitalize}
.sm-node.is-klik{cursor:pointer}
.sm-node.is-klik:hover circle{stroke-width:3}
.sm-pusat circle{fill:var(--w);stroke:#fff;stroke-width:3}
.sm-pusat text{fill:#fff;font:700 13px var(--font-ui,system-ui)}
.sm-pusat text.ar{font-family:var(--font-arab);font-size:22px}
.sm-legenda{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 22px;font-size:12.5px;color:var(--ink-soft)}
.sm-legenda span{display:inline-flex;align-items:center;gap:6px}
.sm-legenda i{width:14px;height:14px;border-radius:50%;border:2px solid var(--w,var(--emerald));background:var(--surface)}
.sm-legenda i.r2{border-style:dashed}.sm-legenda i.r3{background:color-mix(in srgb,var(--w,var(--emerald)) 20%,var(--surface))}
/* kaitan */
.sm-kait{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-bottom:22px}
.sm-kait-kartu{display:grid;gap:4px;text-align:left;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.sm-kait-kartu .sm-ik{width:22px;height:22px;color:var(--w)}
.sm-kait-kartu b{font-size:15px}
.sm-kait-kartu p{margin:0;font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.sm-kait-kartu:hover:not(:disabled){border-color:var(--w)}
.sm-kait-kartu:disabled{opacity:.55;cursor:default}
.sm-relasi{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-bottom:22px}
.sm-rel{display:grid;gap:3px;text-align:left;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line);border-left:5px solid var(--w);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.sm-rel-jenis{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--w)}
.sm-rel b{font-size:15px}
.sm-rel b i{font-style:normal;font-family:var(--font-arab);font-size:18px;color:var(--gold)}
.sm-rel p{margin:0;font-size:13px;color:var(--ink-soft);line-height:1.5}
.sm-sumber{padding:14px 16px;border-radius:var(--r-md);background:var(--surface-2);font-size:14px}
.sm-sumber p{margin:4px 0;color:var(--ink-soft)}
.sm-ref{font-size:12.5px;color:var(--ink-soft)}
/* rangkuman */
.sm-ringkas{padding:20px 22px;border-radius:var(--r-lg);border:1px solid var(--w);background:linear-gradient(160deg,color-mix(in srgb,var(--w) 10%,var(--surface)),var(--surface) 60%);margin-bottom:16px}
.sm-ringkas-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.sm-ringkas-aksi{display:flex;flex-wrap:wrap;gap:6px}
.sm-ringkas h3{margin:8px 0 4px;font-size:24px}
.sm-ringkas h3 span{font-family:var(--font-arab);font-size:30px;color:var(--w);margin-right:6px}
.sm-inti{margin:0 0 12px;font-family:var(--font-read);font-style:italic;font-size:17px;line-height:1.6;border-left:4px solid var(--w);padding-left:12px}
.sm-ringkas-seg{margin:0 0 10px}
.sm-ringkas-isi p{margin:0;font-family:var(--font-read);font-size:16px;line-height:1.85;text-align:justify}
.sm-poin{margin-top:14px}
.sm-poin ul{margin:6px 0 0;padding-left:20px;line-height:1.7;font-size:15px}
.sm-poin li::marker{color:var(--w)}
.sm-ayat-kunci{margin-top:14px}
.sm-catatan{margin:12px 0 0;padding:8px 12px;border-radius:10px;background:var(--surface-2);font-size:12.5px;color:var(--ink-soft)}
.sm-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:middle}
@media (max-width:760px){
  .sm-kepala{grid-template-columns:1fr}
  .sm-tahap-mini{grid-template-columns:repeat(2,1fr)}
  .sm-stepper{grid-template-columns:repeat(4,1fr)}
  .sm-step:not(:last-child)::after{display:none}
  .sm-step span{font-size:11px}
  .sm-pra,.sm-syair{grid-template-columns:1fr}
  .sm-era{grid-template-columns:1fr;gap:10px}
  .sm-era::before{left:14px;right:auto;top:10px;bottom:10px;width:3px;height:auto;background:linear-gradient(180deg,#d08b2c,var(--w),#4f7cc4)}
  .sm-era-kartu{grid-template-columns:30px 1fr;justify-items:start;text-align:left;column-gap:12px;padding:0 0 6px}
  .sm-era-kartu .sm-era-titik{grid-row:1/6;margin:0}
  .sm-judul h2{font-size:24px}.sm-judul-ar{font-size:38px}
}
.sm-pusat text.nama{fill:#fff;font-weight:700;font-family:var(--font-ui,system-ui)}
.sm-legenda{display:grid;gap:6px}
.sm-legenda-tema{flex-wrap:wrap;gap:8px}
.sm-legenda-tema em{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-weight:600;color:var(--ink)}

/* ===== Pemutar murottal & tombol suara ===== */
.tq-player{position:fixed;left:0;right:0;margin:0 auto;bottom:14px;z-index:70;width:min(760px,calc(100vw - 24px));box-sizing:border-box;padding:10px 12px;border-radius:18px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:0 18px 40px -16px rgba(0,0,0,.45);animation:jrNaik .25s both}
.tq-player-baris{display:flex;align-items:center;gap:8px}
.tq-pbtn,.tq-pchip{display:inline-grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.tq-pbtn svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tq-pbtn[data-x="prev"] svg,.tq-pbtn[data-x="next"] svg,.tq-pbtn[data-x="tutup"] svg{fill:none}
.tq-pmain{width:44px;height:44px;background:var(--emerald);border-color:var(--emerald);color:#fff}
.tq-pmain .ik-pause{display:none}
.tq-player.is-putar .tq-pmain .ik-pause{display:block}.tq-player.is-putar .tq-pmain .ik-play{display:none}
.tq-pinfo{flex:1;min-width:0;display:grid;gap:2px}
.tq-pinfo b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tq-pinfo small{font-size:11.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tq-pprog{height:4px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin-top:3px}
.tq-pprog i{display:block;height:100%;width:0;background:var(--emerald);transition:width .25s linear}
.tq-psel{max-width:150px;padding:7px 8px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:12px}
.tq-pchip{width:auto;min-width:40px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}
.tq-pchip:hover,.tq-pbtn:hover{border-color:var(--emerald)}
@media (max-width:760px){
  .tq-player{bottom:calc(66px + env(safe-area-inset-bottom,0px));padding:8px 10px;border-radius:16px}
  .tq-psel{display:none}
  .tq-pbtn[data-x="prev"],.tq-pbtn[data-x="next"]{width:32px;height:32px}
}
.tq-player + .tq-kembali-pohon, body:has(.tq-player:not([hidden])) .tq-kembali-pohon{bottom:88px}
@media (max-width:760px){ body:has(.tq-player:not([hidden])) .tq-kembali-pohon{bottom:146px} }
.ayat.is-putar-ayat{padding-left:14px;padding-right:10px;border-left:4px solid var(--gold);border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--gold) 7%,transparent);transition:background .2s}
.mu-ay.is-putar-ayat{background:color-mix(in srgb,var(--gold) 16%,transparent);border-radius:8px}
.tq-dengar{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;margin:2px 6px 6px 0;padding:5px 9px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font:inherit;font-size:12px;font-weight:600;cursor:pointer;line-height:1}
.tq-dengar svg{width:15px;height:15px;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tq-dengar:hover,.tq-dengar.is-putar{border-color:var(--emerald);color:var(--emerald);background:var(--emerald-soft)}
.tq-dengar.is-putar svg{animation:tqDenyut 1s infinite}
@keyframes tqDenyut{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.tq-dengar-ar{direction:ltr}
[dir="rtl"] + .tq-dengar-ar{float:left}
.tq-dengar-ayat{color:var(--emerald)}
.ay-ar .tq-dengar-ayat,.today-ar .tq-dengar-ayat{float:left;margin-top:8px}
.tf-dengar{margin:4px 0 8px}
.th-audio{display:inline-flex;align-items:center;gap:6px}
@media print{.tq-player,.tq-dengar{display:none!important}}
.tq-dengar.is-muat{border-color:var(--emerald);color:var(--emerald)}
.tq-dengar.is-muat svg{animation:tqPutarMuat .9s linear infinite;transform-origin:50% 50%}
@keyframes tqPutarMuat{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ===== Tema siap pakai (100 tema) ===== */
.ts-alat{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 12px}
.ts-cari{flex:1 1 280px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-soft)}
.ts-cari input{flex:1;min-width:0;border:0;background:transparent;padding:11px 0;font:inherit;color:var(--ink);outline:none}
.ts-bentuk{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ts-bentuk>span{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-right:2px}
.ts-bentuk-atas{margin-bottom:14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.ts-kel{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:14px}
.ts-kel-btn{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:9px 12px;border-radius:12px;border:1px solid var(--line);border-left:4px solid var(--w);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer;line-height:1.25}
.ts-kel-btn small{flex:0 0 auto;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft);font-size:11.5px;font-weight:700}
.ts-kel-btn.is-on{background:color-mix(in srgb,var(--w) 14%,var(--surface));border-color:var(--w)}
.paket-card{position:relative;border-top:4px solid var(--w,var(--emerald))}
.paket-card .p-kel{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--w,var(--emerald))}
.paket-card .p-kel i{font-style:normal;padding:2px 7px;border-radius:999px;background:#d9486e;color:#fff;letter-spacing:.02em;text-transform:none}
.paket-card .p-kasus{display:block;margin-top:6px;padding:7px 10px;border-radius:10px;background:var(--surface-2);font-size:12.5px;line-height:1.45;color:var(--ink)}
@media (max-width:480px){.ts-kel{grid-template-columns:repeat(2,1fr)}.ts-kel-btn{font-size:12px;padding:8px 10px}}

/* Cetak/PDF selalu berwarna terang, juga saat mode gelap aktif */
@media print{
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"]{
    --paper:#fff; --surface:#fff; --surface-2:#f3f3f3; --ink:#111; --ink-soft:#555; --line:#ddd;
    --emerald:#0b5e43; --emerald-ink:#0b5e43; --emerald-soft:#eaf5ef; --gold:#7a5a12; --gold-soft:#f6efdc;
    --shadow:none; --shadow-lg:none; color-scheme:light;
  }
  html, body, #main, .view{background:#fff!important;color:#111!important}
  .nk-khut{background:none!important}
}

/* ===================== ILMU SHARAF (sf-*) ===================== */
:root{--sf-r1:#d6452f;--sf-r2:#2f6fd0;--sf-r3:#16935f;--sf-r4:#9246c4;--sf-zd:#b07c10;--sf-aksen:#c0563a}
:root[data-theme="dark"]{--sf-r1:#ff8a73;--sf-r2:#7fb0ff;--sf-r3:#5fe0a6;--sf-r4:#d39bff;--sf-zd:#f1c45a;--sf-aksen:#ff9a7a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sf-r1:#ff8a73;--sf-r2:#7fb0ff;--sf-r3:#5fe0a6;--sf-r4:#d39bff;--sf-zd:#f1c45a;--sf-aksen:#ff9a7a}}
.sf-ik{width:17px;height:17px;flex:0 0 auto}
.sf-ar,.sf-ar-sub,.sf-ar-contoh,.sf-ar-kecil,.sf-ar-judul,.sf-dhamir,.sf-pil{font-family:var(--font-naskah);direction:rtl;unicode-bidi:isolate}
.sf-ar-judul{font-size:1.15em;color:var(--sf-aksen);margin-inline-start:8px}
.sf-ar-sub{display:block;font-size:20px;line-height:1.7;color:var(--sf-aksen)}
.sf-ar-contoh{font-size:24px;line-height:1.8;color:var(--ink)}
.sf-ar-kecil{font-size:20px;line-height:1.6}
.sf-kepala{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-end;padding:18px 20px;margin-bottom:14px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(135deg,color-mix(in srgb,var(--sf-aksen) 14%,var(--surface)),color-mix(in srgb,var(--sf-r2) 8%,var(--surface)))}
.sf-kepala h3{margin:4px 0 6px;font-size:21px}
.sf-kepala p{margin:0;color:var(--ink-soft);font-size:14px;max-width:70ch;text-align:justify}
.sf-kepala .ha-progbar{margin:10px 0 0;max-width:420px}
.sf-kepala-aksi{display:flex;gap:8px;flex-wrap:wrap}
.sf-kepala-aksi .btn{display:inline-flex;align-items:center;gap:7px}
/* materi */
.sf-unit{padding:18px 20px;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);scroll-margin-top:90px;transition:box-shadow .2s}
.sf-unit:hover{box-shadow:0 10px 26px -18px rgba(0,0,0,.35)}
.sf-unit-kepala{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.sf-no{flex:0 0 36px;height:36px;display:grid;place-items:center;border-radius:11px;background:var(--sf-aksen);color:#fff;font-weight:800}
.sf-unit-kepala h4{margin:2px 0 0;font-size:18px}
.sf-teks p{margin:0 0 12px;font-family:var(--font-read);font-size:16.5px;line-height:1.9;text-align:justify;text-justify:inter-word;hyphens:auto}
.sf-teks .ar-sisip,.sf-poin .ar-sisip,.sf-faidah .ar-sisip,.sf-catatan .ar-sisip,.sf-peringatan .ar-sisip,.sf-ilal .ar-sisip,.ha-op .ar-sisip,.ha-umpan .ar-sisip,.sf-jenis .ar-sisip,.sf-wz .ar-sisip{font-family:var(--font-naskah);font-size:1.32em;line-height:1.4}
.sf-contoh{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:6px 0 12px}
.sf-contoh-item{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:var(--surface-2);text-align:center}
.sf-contoh-item small{color:var(--ink-soft);font-size:12.5px}
.sf-poin{padding:12px 14px;border-radius:12px;border-left:4px solid var(--sf-aksen);background:color-mix(in srgb,var(--sf-aksen) 7%,var(--surface))}
.sf-poin ul{margin:6px 0 0;padding-left:20px;line-height:1.75;font-size:15px}
.sf-unit-kaki{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.sf-ruj{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft)}
.sf-chip-ruj{padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.sf-chip-ruj:hover{border-color:var(--sf-aksen);color:var(--sf-aksen)}
.sf-bintang{display:flex;align-items:center;gap:2px}
.sf-bintang button{border:0;background:none;font-size:20px;color:var(--line);cursor:pointer;padding:0 1px;line-height:1}
.sf-bintang button.on{color:#f0b429}
.sf-bintang small{margin-left:6px;font-size:12px;color:var(--ink-soft)}
/* lab */
.sf-lab-alat{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-bottom:14px}
.sf-lab-blok{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.sf-wazan-pilih{display:grid;gap:8px;margin-top:6px}
.sf-wp-grup small{display:block;font-size:11.5px;font-weight:700;color:var(--ink-soft);margin-bottom:4px}
.sf-wp-grup>div{display:flex;flex-wrap:wrap;gap:6px;direction:rtl}
.sf-wp{padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:var(--font-naskah);font-size:19px;line-height:1.5;cursor:pointer;transition:all .15s}
.sf-wp:hover{border-color:var(--sf-aksen);transform:translateY(-1px)}
.sf-wp.is-on{background:var(--sf-aksen);border-color:var(--sf-aksen);color:#fff;box-shadow:0 6px 16px -8px var(--sf-aksen)}
.sf-akar{display:flex;gap:10px;justify-content:flex-start;margin:8px 0 12px}
.sf-akar label{display:grid;justify-items:center;gap:3px}
.sf-akar input{width:62px;height:66px;border-radius:16px;border:2px solid currentColor;background:color-mix(in srgb,currentColor 8%,var(--surface));text-align:center;font-family:var(--font-naskah);font-size:34px;color:inherit;outline:none}
.sf-akar input:focus{box-shadow:0 0 0 4px color-mix(in srgb,currentColor 22%,transparent)}
.sf-akar input:disabled{opacity:.6}
.sf-akar small{font-size:11.5px;font-weight:700;direction:ltr}
.sf-akar .r1{color:var(--sf-r1)}.sf-akar .r2{color:var(--sf-r2)}.sf-akar .r3{color:var(--sf-r3)}.sf-akar .r4{color:var(--sf-r4)}
.sf-lab-saklar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sf-saklar{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;cursor:pointer}
.sf-saklar input{position:absolute;opacity:0;pointer-events:none}
.sf-saklar span{width:36px;height:20px;border-radius:999px;background:var(--line);position:relative;transition:background .2s}
.sf-saklar span::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sf-saklar input:checked + span{background:var(--sf-aksen)}
.sf-saklar input:checked + span::after{transform:translateX(16px)}
.sf-timbang{display:grid;justify-items:center;gap:2px;padding:20px;margin-bottom:12px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--sf-aksen) 12%,var(--surface)),var(--surface) 70%)}
.sf-timbang-kata{font-family:var(--font-naskah);font-size:clamp(44px,7vw,64px);line-height:1.5}
.sf-timbang-tanda{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.sf-timbang-tanda::before,.sf-timbang-tanda::after{content:"";display:inline-block;width:40px;height:1px;background:var(--line);vertical-align:middle;margin:0 8px}
.sf-timbang-wazan{font-family:var(--font-naskah);font-size:clamp(30px,4.6vw,40px);line-height:1.5;opacity:.9}
.sf-timbang-ket{font-size:13px;color:var(--ink-soft);text-align:center}
.r1{color:var(--sf-r1)}.r2{color:var(--sf-r2)}.r3{color:var(--sf-r3)}.r4{color:var(--sf-r4)}
b.r1,b.r2,b.r3,b.r4{font-weight:inherit}
i.zd{font-style:normal;color:var(--sf-zd)}
.sf-legenda-akar{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px;font-size:12px;color:var(--ink-soft)}
.sf-legenda-akar span{display:inline-flex;align-items:center;gap:5px}
.sf-legenda-akar i{width:12px;height:12px;border-radius:4px;background:currentColor}
.sf-legenda-akar i.r1{color:var(--sf-r1)}.sf-legenda-akar i.r2{color:var(--sf-r2)}.sf-legenda-akar i.r3{color:var(--sf-r3)}.sf-legenda-akar i.r4{color:var(--sf-r4)}.sf-legenda-akar i.zd{color:var(--sf-zd)}
.sf-peringatan{padding:10px 14px;margin-bottom:12px;border-radius:12px;border-left:4px solid #e39b1c;background:color-mix(in srgb,#e39b1c 10%,var(--surface))}
.sf-peringatan p{margin:4px 0;font-size:14px;line-height:1.65;text-align:justify}
.sf-kartu{padding:16px 18px;margin-bottom:12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.sf-kartu-kepala{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.sf-kartu-kepala h4{margin:2px 0 0;font-size:17px}
.sf-dengar{display:inline-flex;align-items:center;gap:6px}
.sf-dengar.is-putar,.sf-dengar.is-muat{border-color:var(--sf-aksen);color:var(--sf-aksen)}
.sf-rangkai{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:var(--surface-2);font-family:var(--font-naskah);font-size:24px;line-height:2.1;text-align:justify;text-align-last:right}
.sf-tabel{width:100%;border-collapse:separate;border-spacing:0}
.sf-tabel th{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);text-align:left;padding:8px 10px;border-bottom:2px solid var(--line)}
.sf-tabel td{padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:14px}
.sf-tabel tr:hover td{background:color-mix(in srgb,var(--sf-aksen) 5%,transparent)}
.sf-th-ar{text-align:right!important}
.sf-td-ar{font-family:var(--font-naskah);font-size:28px;line-height:1.8;text-align:right;white-space:nowrap}
.sf-td-wz{font-family:var(--font-naskah);font-size:20px;line-height:1.7;text-align:right;color:var(--ink-soft);white-space:nowrap}
.sf-lug-seg{margin:4px 0 12px}
.sf-lug-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;direction:rtl}
.sf-lug-sel{direction:ltr;display:grid;justify-items:center;gap:1px;padding:10px 8px;border-radius:14px;border:1px solid var(--line);background:var(--surface);transition:transform .15s,border-color .15s}
.sf-lug-sel:hover{transform:translateY(-2px);border-color:var(--sf-aksen)}
.sf-dhamir{font-size:17px;color:var(--sf-aksen);line-height:1.4}
.sf-lug-sel small{font-size:11.5px;color:var(--ink-soft);text-align:center}
.sf-lug-kata{font-family:var(--font-naskah);font-size:27px;line-height:1.7}
.sf-faidah{margin:6px 0 0;padding-left:20px;line-height:1.8;font-size:15px}
.sf-catatan{margin:8px 0 0;padding:8px 12px;border-radius:10px;background:var(--surface-2);font-size:13px;line-height:1.65;color:var(--ink-soft);text-align:justify}
/* wazan */
.sf-kel{margin-bottom:18px}
.sf-kel-kepala{margin-bottom:10px}
.sf-kel-kepala h4{margin:0;font-size:18px}
.sf-kel-kepala p{margin:2px 0 0;font-size:13.5px;color:var(--ink-soft);text-align:justify}
.sf-wz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.sf-wz{display:grid;gap:4px;text-align:left;padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--line);border-top:4px solid var(--sf-aksen);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s}
.sf-wz:hover{transform:translateY(-2px);box-shadow:0 12px 26px -18px rgba(0,0,0,.4)}
.sf-wz-nama{font-family:var(--font-naskah);font-size:26px;line-height:1.6;color:var(--sf-aksen);text-align:right}
.sf-wz-contoh{font-family:var(--font-naskah);font-size:21px;line-height:1.7;text-align:right}
.sf-wz small{color:var(--ink-soft)}
.sf-wz ul{margin:4px 0 0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--ink-soft)}
.sf-wz em{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:12.5px;font-weight:700;color:var(--sf-aksen);margin-top:4px}
.sf-jenis-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.sf-jenis{padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);border-left:4px solid var(--sf-r3)}
.sf-jenis-mutal{border-left-color:var(--sf-r1)}
.sf-jenis p{margin:4px 0 8px;font-size:13.5px;line-height:1.6;text-align:justify}
.sf-jenis>div{display:flex;flex-wrap:wrap;gap:6px;direction:rtl}
.sf-pil{padding:2px 10px;border-radius:999px;background:var(--surface-2);font-size:19px;line-height:1.6}
.sf-mutal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.sf-mutal{padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface)}
.sf-mutal-kepala{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px}
.sf-mutal-kepala span{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.sf-mutal .sf-rangkai{font-size:21px}
.sf-mutal-tabel{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.sf-mutal-tabel div{display:grid;gap:0;padding:6px 8px;border-radius:10px;background:var(--surface-2);text-align:right}
.sf-mutal-tabel small{font-size:11px;color:var(--ink-soft);text-align:left}
.sf-mutal-ilal{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.sf-mutal-ilal .hd-label{flex:1 0 100%;margin:0}
.sf-chip-ilal{padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.sf-chip-ilal:hover{border-color:var(--sf-r1);color:var(--sf-r1)}
/* i'lal */
.sf-ilal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.sf-ilal{padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);scroll-margin-top:90px;transition:box-shadow .3s,border-color .3s}
.is-sorot{border-color:var(--sf-aksen)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--sf-aksen) 22%,transparent)!important}
.sf-ilal-kepala{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sf-ilal-macam{padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--sf-r1) 14%,var(--surface));color:var(--sf-r1);font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.sf-ilal-judul{font-family:var(--font-naskah);font-size:28px;line-height:1.5}
.sf-ilal-kepala small{margin-inline-start:auto;font-size:12.5px;color:var(--ink-soft)}
.sf-ilal-panggung{margin:10px 0;padding:14px;border-radius:14px;background:linear-gradient(160deg,color-mix(in srgb,var(--sf-r2) 8%,var(--surface)),var(--surface-2));text-align:center}
.sf-ilal-kata{font-family:var(--font-naskah);font-size:48px;line-height:1.5;animation:sfMuncul .45s ease both}
@keyframes sfMuncul{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.sf-ilal-panggung p{margin:6px 0 0;font-size:14px;line-height:1.65;text-align:justify}
.sf-ilal-jejak{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;direction:rtl}
.sf-ilal-jejak button{padding:2px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-family:var(--font-naskah);font-size:19px;line-height:1.6;cursor:pointer}
.sf-ilal-jejak button.is-lewat{color:var(--ink)}
.sf-ilal-jejak button.is-on{background:var(--sf-aksen);border-color:var(--sf-aksen);color:#fff}
.sf-ilal-jejak span{color:var(--ink-soft);transform:scaleX(-1)}
.sf-ilal-kendali{display:flex;align-items:center;gap:8px;margin:10px 0}
.sf-ilal-kendali span{font-size:12.5px;color:var(--ink-soft);margin-left:4px}
.sf-bulat{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:18px;cursor:pointer;display:grid;place-items:center}
.sf-bulat:disabled{opacity:.4;cursor:default}
.sf-putar{background:var(--sf-aksen);border-color:var(--sf-aksen);color:#fff;font-size:14px}
.sf-ilal-kaidah p{margin:4px 0;font-size:14px;line-height:1.65;text-align:justify}
.sf-kaidah-ar{font-family:var(--font-naskah);font-size:21px!important;line-height:1.9!important;text-align:right!important;color:var(--sf-aksen)}
/* latihan & rujukan */
.sf-soal-ar{font-family:var(--font-naskah);font-size:40px;line-height:1.6;text-align:center;margin:8px 0 12px}
.sf-rujukan{margin-top:22px;padding:16px 18px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface-2)}
.sf-rujukan .sf-kel-kepala p{text-align:justify}
.sf-ruj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.sf-ruj-item{display:grid;gap:3px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);transition:box-shadow .3s,border-color .3s}
.sf-ruj-item small{font-size:12.5px;color:var(--ink-soft)}
.sf-ruj-item p{margin:2px 0;font-size:13px;line-height:1.55;text-align:justify}
.sf-ruj-item a{font-size:12.5px;font-weight:700;color:var(--sf-aksen)}
@media (max-width:760px){
  .sf-lab-alat{grid-template-columns:1fr}
  .sf-akar input{width:54px;height:58px;font-size:30px}
  .sf-td-ar{font-size:24px}.sf-td-wz{font-size:18px}
  .sf-lug-grid{grid-template-columns:repeat(2,1fr)}
  .sf-teks p{font-size:16px;text-align:left}
  .sf-rangkai{font-size:21px}
  .sf-ilal-kata{font-size:40px}
}
@media print{.sf-lab-alat,.sf-ilal-kendali,.sf-bintang,.sf-dengar{display:none!important}}
.sf-ilal-panggung .sf-ilal-kata{text-align:center!important}
.ar-sisip{unicode-bidi:isolate}
.sf-timbang-kata,.sf-timbang-wazan{text-align:center!important}
@media (max-width:760px){.sf-lab-alat .sf-lab-blok:nth-child(2){order:-1}}
/* perbaikan ukuran huruf Arab yang tertimpa aturan umum */
.sf-tabel td.sf-td-ar{font-size:28px;line-height:1.8}
.sf-tabel td.sf-td-wz{font-size:20px;line-height:1.7}
.sf-mutal-kepala span.sf-ar-contoh{font-size:24px;font-weight:400;color:var(--ink)}
.hd-label .ar-sisip{font-size:18px;letter-spacing:0;text-transform:none}
@media (max-width:760px){.sf-tabel td.sf-td-ar{font-size:24px}.sf-tabel td.sf-td-wz{font-size:18px}}
.sm-kartu-desc .ar-sisip{font-family:var(--font-naskah);font-size:17px;line-height:1.4}
@media (max-width:480px){.sm-tema i{font-size:17px}}

/* ===== Judul Arab: baris sendiri, rata tengah, lega, dan lebih besar dari isi ===== */
/* judul halaman (Matan al-Ajurrumiyyah, Arba'in, Juz 'Amma, Ilmu Sharaf) */
.hm-judul .ar-judul,.sf-kepala .sf-ar-judul{display:block;margin:14px 0 10px;text-align:center;font-family:var(--font-naskah);font-size:40px!important;line-height:1.9;font-weight:400;color:var(--emerald)}
.sf-kepala .sf-ar-judul{color:var(--sf-aksen)}
.sf-kepala>div:first-child{flex:1 1 100%}
/* judul bab */
.ab-babjudul{flex-direction:column;align-items:center;text-align:center;gap:6px;margin:6px 0 20px;padding:16px 0 18px}
.ab-babjudul div{align-items:center}
.ab-babjudul b{font-size:20px;line-height:1.35}
.ab-babjudul small.nw-ar{display:block;margin:10px 0 2px;font-size:34px!important;line-height:1.9!important}
/* judul unit dan judul bagian */
.tq-judul-ar{margin:12px 0 18px;text-align:center;font-family:var(--font-naskah);font-size:30px;line-height:1.9;color:var(--sf-aksen,var(--emerald))}
.sf-unit-kepala{align-items:center;margin-bottom:0}
.sf-unit-kepala h4{font-size:20px;margin:0}
.sf-kel-kepala{text-align:center}
.sf-kel-kepala h4{font-size:20px}
.sf-kel-kepala .sf-ar-sub{margin:8px 0 6px;font-size:30px;line-height:1.9;text-align:center}
.sf-kel-kepala p{max-width:72ch;margin-left:auto;margin-right:auto}
.sf-jenis .sf-ar-sub,.sf-ruj-item .sf-ar-sub{margin:6px 0 4px;font-size:26px;line-height:1.8;text-align:center}
.sf-jenis>b,.sf-ruj-item>b{text-align:center}
/* semantik */
.sm-judul{flex-direction:column;align-items:center;text-align:center}
.sm-judul>div:first-child{display:grid;justify-items:center}
.sm-judul-ar{margin:6px 0 8px;font-size:52px!important;line-height:1.7}
.sm-akar{text-align:center}
.sm-aksi{justify-content:center}
.sm-tema-ar{float:none!important;display:block;margin:4px 0 10px;text-align:center;font-size:30px!important;line-height:1.8}
.sm-tema-kartu h3{text-align:center}
.sm-ringkas h3{text-align:center;margin-top:12px}
.sm-ringkas h3 span{display:block;margin:0 0 6px;font-size:40px!important;line-height:1.8}
@media (max-width:760px){
  .hm-judul .ar-judul,.sf-kepala .sf-ar-judul{font-size:32px!important;margin:12px 0 8px}
  .ab-babjudul small.nw-ar{font-size:28px!important}
  .tq-judul-ar,.sf-kel-kepala .sf-ar-sub{font-size:26px}
  .sm-judul-ar{font-size:44px!important}
}
.sf-ilal-panggung{position:relative}
.sf-dengar-kata{position:absolute;top:10px;left:10px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--sf-aksen);display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.sf-dengar-kata:hover{transform:scale(1.08);border-color:var(--sf-aksen)}
.sf-dengar-kata.is-putar,.sf-dengar-kata.is-muat,.sf-dengar-kecil.is-putar,.sf-dengar-kecil.is-muat{background:var(--sf-aksen);color:#fff;border-color:var(--sf-aksen)}
.sf-dengar-kata.is-muat svg,.sf-dengar-kecil.is-muat svg,.sf-bisa-dengar.is-muat{animation:tqDenyut 1s infinite}
.sf-dengar-kecil{display:inline-grid;place-items:center;width:26px;height:26px;margin-left:6px;vertical-align:middle;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--sf-aksen);cursor:pointer}
.sf-dengar-kecil svg{width:14px;height:14px}
.sf-bisa-dengar{cursor:pointer}
.sf-bisa-dengar.is-putar,.sf-bisa-dengar.is-muat{background:color-mix(in srgb,var(--sf-aksen) 12%,var(--surface))!important;border-color:var(--sf-aksen)}
/* pemutar murottal di HP: dua baris, pilihan qari tetap tersedia */
@media (max-width:760px){
  .tq-player-baris{flex-wrap:wrap;row-gap:8px}
  .tq-pbtn[data-x="prev"]{order:1}.tq-pmain{order:2}.tq-pbtn[data-x="next"]{order:3}
  .tq-pinfo{order:4;flex:1 1 0;min-width:0}
  .tq-pbtn[data-x="tutup"]{order:5}
  .tq-psel{display:block!important;order:6;flex:1 1 auto;max-width:none;min-width:0;height:40px;font-size:14px;padding:0 10px}
  .tq-pchip[data-x="ulang"]{order:7}.tq-pchip[data-x="laju"]{order:8}
  .tq-pchip{height:40px;min-width:48px}
  .tq-pbtn[data-x="prev"],.tq-pbtn[data-x="next"],.tq-pbtn[data-x="tutup"]{width:38px;height:38px}
  body:has(.tq-player:not([hidden])) .tq-kembali-pohon{bottom:196px}
}
@media (max-width:760px){ .tq-psel{flex:1 1 calc(100% - 124px)!important;width:auto} .tq-pchip[data-x="ulang"],.tq-pchip[data-x="laju"]{flex:0 0 52px;min-width:52px;padding:0} }

/* ===== Simpul pohon: teks tidak keluar kotak ===== */
.sj-badan{overflow:hidden;padding-right:22px;text-align:left}
.sj-bawah{flex-direction:column;align-items:stretch;gap:3px;min-width:0}
.sj-bawah i{order:-1;display:block;text-align:right;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.sj-bawah small{white-space:normal!important;overflow-wrap:anywhere;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sj-bawah small:empty{display:none}
.sj-badan b{overflow-wrap:anywhere}

/* ===== Sharaf: alat jamak taksir, daftar fi'il per bab, tautan nahwu ===== */
.sf-contoh-item.sf-bisa-dengar:hover{outline:1.5px solid var(--sf-aksen);outline-offset:-1.5px}
.sf-alat{margin:14px 0}
.sf-kartu-kepala{gap:10px;flex-wrap:wrap}
.sf-saklar{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);cursor:pointer}
.sf-tk-seg{margin:6px 0 10px;flex-wrap:wrap}
.sf-tk-tabel td.sf-td-wz{font-size:22px;color:var(--sf-aksen);text-align:center;border-right:1px solid var(--line)}
.sf-tk-tabel tr.sf-tk-awal td{border-top:2px solid var(--line)}
.sf-tk-jenis{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--surface-2)}
.sf-tk-qillah{color:#2f7d6d}.sf-tk-katsrah{color:#4a6fa5}.sf-tk-muntaha{color:#a23b48}
.sf-tk-tutup{cursor:pointer;text-align:center!important}
.sf-tk-tutup span{display:inline-block;min-width:70px;padding:0 10px;border-radius:10px;border:1.5px dashed var(--sf-aksen);color:var(--sf-aksen);font-family:var(--font-read);font-size:18px}
.sf-tk-catatan{margin-top:10px;display:grid;gap:4px}
.sf-tk-catatan p{margin:0;font-size:13px;line-height:1.7;color:var(--ink-soft);text-align:justify}
.sf-tk-catatan b{font-size:20px;color:var(--ink);margin-left:6px}
.sf-babtsm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:12px}
.sf-babtsm-kartu{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;background:var(--surface-2)}
.sf-babtsm-kepala{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.sf-babtsm-kepala .sf-no{flex:0 0 30px;height:30px;font-size:14px}
.sf-babtsm-kepala b{flex:1;font-family:var(--font-naskah);font-size:24px;font-weight:400;text-align:center}
.sf-kunci{padding:3px 9px;border-radius:999px;background:var(--sf-aksen);color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
.sf-babtsm-kartu ul{list-style:none;margin:0;padding:0}
.sf-babtsm-kartu li{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px dashed var(--line)}
.sf-babtsm-kartu li .sf-bisa-dengar{font-family:var(--font-naskah);font-size:22px;line-height:1.7;white-space:nowrap}
.sf-babtsm-kartu li small{flex:1;font-size:12.5px;color:var(--ink-soft);text-align:right}
.sf-lab-mini{flex:0 0 auto;padding:3px 9px;border-radius:8px;border:1px solid var(--sf-aksen);background:transparent;color:var(--sf-aksen);font-size:12px;font-weight:700;cursor:pointer}
.sf-lab-mini:hover{background:var(--sf-aksen);color:#fff}
.sf-ke-nahwu{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 4px;padding:10px 12px;border-radius:12px;border:1px dashed var(--sf-aksen);background:var(--surface-2)}
.sf-ke-nahwu>span{flex:1 1 220px;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-soft)}
@media (max-width:560px){.sf-babtsm-kartu li .sf-bisa-dengar{font-size:20px}.sf-tk-tabel td.sf-td-wz{font-size:19px}}
.sf-tk-ket{min-width:170px;max-width:260px;vertical-align:middle}
.sf-tk-ket small{display:block;margin-top:6px;font-size:12px;line-height:1.6;color:var(--ink-soft);white-space:normal}
.sf-tk-ket .ar-sisip{font-size:17px}
.hm-isi>*{min-width:0;max-width:100%}
.sf-tk-mob{display:none}
@media (max-width:620px){
  .sf-tk-tabel th:nth-child(2),.sf-tk-tabel td.sf-tk-ket{display:none}
  .sf-tk-tabel td.sf-td-wz{white-space:normal;max-width:120px;padding:8px 6px}
  .sf-tk-mob{display:block;margin-top:4px;font-family:var(--font-read);font-size:11.5px;line-height:1.55;color:var(--ink-soft);text-align:center}
  .sf-tk-mob .sf-tk-jenis{display:block;margin:0 auto 4px;width:max-content;font-size:11px}
  .sf-tk-mob .ar-sisip{font-size:15px}
  .sf-tk-tabel td{padding:6px 6px}
  .sf-tk-tutup span{min-width:56px}
}
/* jamak taksir sebagai kartu */
.sf-tk-kartu .sf-babtsm-kepala b{font-size:28px;color:var(--sf-aksen);cursor:pointer}
.sf-tk-not{margin:0 0 6px;font-size:12.5px;line-height:1.65;color:var(--ink-soft);text-align:justify}
.sf-tk-not .ar-sisip{font-size:16px}
.sf-tk-kartu li{gap:6px}
.sf-tk-kartu li .sf-tk-kata{font-family:var(--font-naskah);font-size:23px;line-height:1.7;white-space:nowrap;cursor:pointer}
.sf-tk-kartu li .sf-tk-jamak{color:var(--sf-aksen)}
.sf-tk-panah{font-style:normal;color:var(--ink-soft);font-size:13px;transform:scaleX(-1)}
.sf-tk-kartu li small{flex:1;min-width:60px}
button.sf-tk-tutup{min-width:64px;height:34px;border-radius:10px;border:1.5px dashed var(--sf-aksen);background:transparent;color:var(--sf-aksen);font-size:17px;font-weight:700;cursor:pointer}
.sf-tk-kartu ul{direction:rtl}
.sf-tk-kartu li small{direction:ltr;text-align:left}
/* Pilihan latihan: kotak huruf A–D hanya untuk span pertama; teks Arab di dalam opsi tampil normal */
.ha-op .ar-sisip{flex:none;width:auto;height:auto;display:inline;place-items:normal;border-radius:0;background:none;color:inherit;font-weight:400;font-size:24px;line-height:1.7;white-space:nowrap}
.ha-op{align-items:center}
.ha-op>span:first-child{flex:0 0 24px}
.ha-op.salah .ar-sisip,.ha-op.benar .ar-sisip{background:none!important;color:inherit!important}

/* ===================== MENU BALAGHAH ===================== */
.bl-unit .sf-no{background:var(--w,#2a7f9e)}
.bl-nazham{margin:14px 0 16px;padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,var(--surface-2),var(--surface));position:relative}
.bl-nazham::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;border-radius:4px 0 0 4px;background:var(--w,#2a7f9e)}
.bl-nazham-kepala{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.bl-bait{padding:10px 0;border-top:1px dashed var(--line)}
.bl-bait:first-of-type{border-top:0}
.bl-bait-ar{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:6px 14px;font-family:var(--font-naskah);font-size:25px;line-height:2;color:var(--ink)}
.bl-bait-ar i{font-style:normal;color:var(--w,#2a7f9e);font-size:14px}
.bl-syatr{text-align:center}
.bl-bait-dengar{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--w,#2a7f9e);display:grid;place-items:center;cursor:pointer}
.bl-bait-dengar:hover{background:var(--w,#2a7f9e);color:#fff}
.bl-bait-dengar svg{width:16px;height:16px}
.bl-bait-id{margin:4px 0 0;font-size:14px;line-height:1.7;color:var(--ink-soft);text-align:justify;font-style:italic}
.bl-contoh{display:grid;gap:12px;margin:14px 0}
.bl-ayat{border:1px solid var(--line);border-left:5px solid var(--w,#2a7f9e);border-radius:var(--r-md);padding:12px 16px;background:var(--surface)}
.bl-ayat-kepala{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.bl-gaya{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--w,#2a7f9e);color:#fff;font-size:12.5px;font-weight:700}
.bl-ref{font-size:13px;font-weight:600;color:var(--ink-soft)}
.bl-ayat-ar{margin:10px 0 6px;font-family:var(--font-quran,var(--font-naskah));font-size:28px;line-height:2.1;text-align:right;color:var(--ink)}
mark.bl-sorot{background:color-mix(in srgb,var(--w,#2a7f9e) 18%,transparent);color:inherit;border-bottom:2.5px solid var(--w,#2a7f9e);border-radius:6px;padding:0 3px}
.bl-ayat-id{margin:0 0 6px;font-size:14px;line-height:1.7;color:var(--ink-soft);text-align:justify}
.bl-ayat-ket{margin:0;font-size:14px;line-height:1.75;text-align:justify}
.bl-ayat-ket .ar-sisip{font-size:1.35em}
.bl-ayat-aksi{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.bl-murottal .tq-dengar{display:inline-flex}
.bl-lab{margin:12px 0}
.bl-lab .bl-ayat-ar{font-size:30px}
.bl-soal-ar{font-family:var(--font-quran,var(--font-naskah));font-size:28px;line-height:2.1;text-align:right;margin:8px 0 4px}
.bl-soal-ar .bl-bintik{font-style:normal;font-size:14px;margin:0 8px;color:var(--ink-soft)}
.bl-soal-id{font-size:13.5px;line-height:1.7;color:var(--ink-soft);margin:0 0 10px;text-align:justify}
.bl-cari{width:100%;margin:6px 0 12px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:15px}
.bl-ist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.bl-ist{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;background:var(--surface)}
.bl-ist b{display:block;font-family:var(--font-naskah);font-size:26px;font-weight:400;line-height:1.8;text-align:center;color:#2a7f9e;cursor:pointer}
.bl-ist h5{margin:2px 0 4px;font-size:15px;text-align:center}
.bl-ist p{margin:0;font-size:13.5px;line-height:1.65;color:var(--ink-soft);text-align:center}
@media (max-width:620px){
  .bl-nazham{padding:12px 12px 12px 16px}
  .bl-bait-ar{grid-template-columns:1fr auto;font-size:22px;gap:0 8px}
  .bl-bait-ar .bl-syatr{grid-column:1;text-align:right}
  .bl-bait-ar .bl-syatr+i+.bl-syatr{text-align:left}
  .bl-bait-ar i{display:none}
  .bl-bait-dengar{grid-column:2;grid-row:1 / span 2}
  .bl-ayat{padding:10px 12px}
  .bl-ayat-ar,.bl-lab .bl-ayat-ar,.bl-soal-ar{font-size:24px}
}
.bl-bait-ar{font-size:23px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto}
mark.bl-sorot{padding:2px 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone;line-height:2.3}
.bl-dengar-semua{display:inline-flex;align-items:center;gap:6px}
@media (max-width:620px){.bl-bait-ar{font-size:22px;grid-template-columns:minmax(0,1fr) auto}}
.bl-lengkap{border:0;background:none;padding:0;margin:0 0 6px;color:var(--w,#2a7f9e);font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (max-width:620px){.bl-ayat-id,.bl-ayat-ket,.bl-bait-id,.bl-soal-id{text-align:left}}

/* ===================== JALUR BELAJAR ===================== */
.rail-langkah{margin-left:auto;min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:inline-grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;background:color-mix(in srgb,var(--w,#0f7a55) 16%,transparent);color:var(--w,#0f7a55)}
.rail-item.is-active .rail-langkah,.rail-item[aria-current] .rail-langkah{background:rgba(255,255,255,.25);color:#fff}
.lain-grup{display:block;padding:10px 4px 2px;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.li-langkah{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:7px;border-radius:999px;font-style:normal;font-size:11px;font-weight:800;background:var(--w,#0f7a55);color:#fff;vertical-align:1px}
.jl-jalur{margin:28px 0 8px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.jl-kepala{display:grid;gap:2px;margin-bottom:12px}
.jl-kepala b{font-size:16px}
.jl-kepala small{font-size:13px;color:var(--ink-soft)}
.jl-langkah{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;list-style:none;margin:0 0 14px;padding:0;counter-reset:none}
.jl-langkah a{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;color:var(--ink-soft);font-size:12px;font-weight:600;text-align:center;line-height:1.3}
.jl-langkah i{font-style:normal;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;border:2px solid var(--line);background:var(--surface);position:relative}
.jl-langkah li{position:relative}
.jl-langkah li+li::before{content:"";position:absolute;top:15px;right:calc(50% + 17px);width:calc(100% - 28px);height:2px;background:var(--line)}
.jl-langkah li.lewat i{border-color:#0f7a55;background:#0f7a55;color:#fff}
.jl-langkah li.lewat+li::before,.jl-langkah li.kini::before{background:#0f7a55}
.jl-langkah li.kini i{border-color:#0f7a55;color:#0f7a55;box-shadow:0 0 0 4px color-mix(in srgb,#0f7a55 18%,transparent)}
.jl-langkah li.kini a{color:var(--ink)}
.jl-aksi{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
@media (max-width:620px){
  .jl-jalur{padding:14px 12px}
  .jl-langkah{gap:2px}
  .jl-langkah span{display:none}
  .jl-langkah li.kini span{display:block;position:absolute;top:36px;white-space:nowrap;font-size:11px}
  .jl-langkah{margin-bottom:28px}
  .jl-aksi .btn{flex:1 1 100%;justify-content:center}
}

/* ===================== MENU ULUMUL QUR'AN ===================== */
.ul-kutip{margin:14px 0;padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--line);border-right:5px solid var(--w,#7a5c1e);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.ul-kutip-kepala{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ul-kutip-ar{margin:8px 0;font-family:var(--font-naskah);font-size:24px;line-height:2;text-align:right;color:var(--ink)}
.ul-kutip-id{margin:0 0 6px;font-size:14.5px;line-height:1.75;text-align:justify;color:var(--ink)}
.ul-kutip cite{display:block;font-style:normal;font-size:12.5px;font-weight:700;color:var(--w,#7a5c1e)}
.ul-waktu{list-style:none;margin:16px 0;padding:0;position:relative}
.ul-waktu::before{content:"";position:absolute;left:118px;top:6px;bottom:6px;width:2px;background:var(--line)}
.ul-waktu li{display:grid;grid-template-columns:104px 1fr;gap:28px;padding:0 0 18px;position:relative}
.ul-waktu li::before{content:"";position:absolute;left:112px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--w);box-shadow:0 0 0 4px var(--bg,var(--surface))}
.ul-waktu-tgl{text-align:right}
.ul-waktu-tgl b{display:block;font-size:14px;line-height:1.35}
.ul-waktu-tgl small{font-size:12px;color:var(--ink-soft)}
.ul-waktu-isi{padding:10px 14px;border:1px solid var(--line);border-left:4px solid var(--w);border-radius:var(--r-md);background:var(--surface)}
.ul-waktu-kat{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--w)}
.ul-waktu-isi h5{margin:3px 0 4px;font-size:15.5px}
.ul-waktu-isi p{margin:0 0 6px;font-size:14px;line-height:1.7;text-align:justify;color:var(--ink-soft)}
.ul-bagi{display:flex;margin-top:12px;border-radius:999px;overflow:hidden;font-size:12.5px;font-weight:700;color:#fff;max-width:520px}
.ul-bagi span{padding:7px 12px;white-space:nowrap}
.ul-bagi span:first-child{background:#4a6fa5}.ul-bagi span:last-child{background:#b5642a;text-align:right}
.ul-surah-kepala{display:flex;align-items:center;gap:12px}
.ul-surah-no{flex:0 0 38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:800;background:var(--w);color:#fff}
.ul-surah-kepala b{display:block;font-size:17px}
.ul-surah-kepala small{font-size:13px;color:var(--ink-soft)}
.ul-surah-ar{margin-left:auto;font-family:var(--font-quran,var(--font-naskah));font-size:28px;line-height:1.6}
.ul-ciri{margin:4px 0 8px;padding-left:20px;font-size:14px;line-height:1.8}
.ul-dua{grid-template-columns:1fr 1fr}
@media (max-width:620px){
  .ul-waktu::before{left:7px}
  .ul-waktu li{grid-template-columns:1fr;gap:6px;padding-left:28px}
  .ul-waktu li::before{left:1px}
  .ul-waktu-tgl{text-align:left}
  .ul-waktu-tgl b,.ul-waktu-tgl small{display:inline;margin-right:8px}
  .ul-kutip-ar{font-size:21px}
  .ul-surah-ar{font-size:24px}
  .ul-dua{grid-template-columns:1fr}
}
.rail-item.is-on .rail-langkah,.rail-item.is-active .rail-langkah{background:#fff;color:#0b5c40}

/* ===================== MENU MU'JAM ===================== */
.mj-cari{display:flex;gap:8px;margin:6px 0 10px}
.mj-cari input{flex:1;min-width:0;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:18px}
.mj-cari input:focus{outline:none;border-color:#1f6f8b;box-shadow:0 0 0 3px color-mix(in srgb,#1f6f8b 18%,transparent)}
.mj-papan{margin:0 0 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.mj-papan summary{padding:10px 14px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.mj-papan-isi{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px;padding:0 12px 12px}
.mj-papan-isi button{height:44px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-family:var(--font-naskah);font-size:22px;cursor:pointer}
.mj-papan-isi button:active{transform:scale(.95)}
.mj-papan-isi .mj-hapus{font-family:var(--font-ui,inherit);font-size:15px;font-weight:700}
.mj-populer{margin:16px 0}
.mj-populer>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.mj-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.mj-chip b{font-family:var(--font-naskah);font-size:20px;font-weight:400}
.mj-chip small{font-size:12px;color:var(--ink-soft)}
.mj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:8px}
.mj-kartu-akar{display:grid;gap:3px;padding:12px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);text-align:center;cursor:pointer;color:var(--ink)}
.mj-kartu-akar b{font-family:var(--font-naskah);font-size:28px;font-weight:400;color:#1f6f8b}
.mj-kartu-akar span{font-size:14px}.mj-kartu-akar small{font-size:12px;color:var(--ink-soft)}
.mj-akar{margin:10px 0;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.mj-akar-kepala{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.mj-akar-huruf{display:flex;gap:8px}
.mj-akar-huruf span{width:62px;height:62px;border-radius:16px;display:grid;place-items:center;font-family:var(--font-naskah);font-size:36px;line-height:1;background:#1f6f8b;color:#fff;padding-bottom:6px}
.mj-akar-info{flex:1;min-width:220px}
.mj-akar-info h3{margin:2px 0 8px;font-size:19px}
.mj-angka{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.mj-angka span{font-size:13px;color:var(--ink-soft)}.mj-angka b{display:block;font-size:22px;color:var(--ink)}
.mj-bagi{max-width:100%}
.mj-sebaran{margin:14px 0;display:grid;gap:5px}
.mj-bar{display:grid;grid-template-columns:130px 1fr 40px;align-items:center;gap:8px;border:0;background:none;padding:2px 0;color:var(--ink);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.mj-bar i{height:12px;border-radius:6px;background:#1f6f8b;opacity:.75}
.mj-bar b{text-align:right}
.mj-grup{margin:16px 0}
.mj-grup h4{margin:0 0 8px;font-size:16px;color:var(--w)}
.mj-grup h4 small{font-size:12.5px;font-weight:500;color:var(--ink-soft)}
.mj-lemma-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.mj-lemma{padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line);border-top:4px solid var(--w);background:var(--surface)}
.mj-lemma.is-on{box-shadow:0 0 0 2px var(--w)}
.mj-lemma-kepala{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mj-lemma-kepala b{font-family:var(--font-naskah);font-size:30px;font-weight:400;line-height:1.7;cursor:pointer}
.mj-n{padding:2px 9px;border-radius:999px;background:var(--w);color:#fff;font-size:12.5px;font-weight:700}
.mj-jenis{margin:0;font-size:12.5px;color:var(--ink-soft)}
.mj-wazan{margin:4px 0 0;font-size:13px;font-weight:600;color:var(--w)}
.mj-wazan .ar-sisip{font-size:1.4em}
.mj-arti{margin:4px 0 0;font-size:13.5px;line-height:1.5}
.mj-bentuk{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.mj-bentuk span{padding:1px 9px;border-radius:8px;background:var(--surface-2);font-family:var(--font-naskah);font-size:20px;line-height:1.8}
.mj-aksi{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mj-cat{font-size:11.5px;color:var(--ink-soft)}
.mj-ayat-wrap{margin-top:16px;display:grid;gap:12px}
.mj-ayat-kepala h4{margin:2px 0;font-size:16px}.mj-ayat-kepala small{color:var(--ink-soft)}
.mj-ayat{--w:#1f6f8b}
.mj-arti-kata{margin:0 0 6px;font-size:13.5px;line-height:1.7;color:var(--w)}
.mj-arti-kata .ar-sisip{font-size:1.4em}
.mj-tt{background:var(--surface-2)!important;color:var(--ink-soft)!important}
.mj-bawah{margin-top:14px}
.mj-huruf-besar{font-family:var(--font-naskah);font-size:34px;color:#1f6f8b}
.mj-huruf-pilih{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;margin:8px 0 12px}
.mj-huruf-pilih button{height:46px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:var(--font-naskah);font-size:24px;cursor:pointer}
.mj-huruf-pilih button.is-on{background:#1f6f8b;color:#fff;border-color:#1f6f8b}
.mj-daftar-kepala{display:flex;align-items:center;gap:10px;margin:10px 0;flex-wrap:wrap}
.mj-daftar-kepala .btn{margin-left:auto}
.mj-tabel tbody tr{cursor:pointer}
.mj-tabel tbody tr:hover{background:var(--surface-2)}
.mj-td-ar{font-family:var(--font-naskah);font-size:22px;white-space:nowrap}
.mj-sem-tanda{padding:1px 7px;border-radius:999px;background:#1f6f8b;color:#fff;font-size:11px}
.mj-ringkas{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 14px}
.mj-ringkas span{flex:1 1 140px;padding:12px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);font-size:13px;color:var(--ink-soft)}
.mj-ringkas b{display:block;font-size:24px;color:var(--ink)}
.mj-top{display:grid;gap:6px}
.mj-top-bar{display:grid;grid-template-columns:26px 80px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:10px;border:0;background:none;padding:2px 0;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.mj-top-no{grid-row:1 / span 2;font-size:12px;color:var(--ink-soft);text-align:right}
.mj-top-bar b{grid-row:1 / span 2;font-family:var(--font-naskah);font-size:22px;font-weight:400;text-align:center}
.mj-top-bar i{height:10px;border-radius:5px;background:#1f6f8b}
.mj-top-bar small{font-size:12px;color:var(--ink-soft)}
.mj-kelas{display:grid;gap:8px}
.mj-kelas div{display:grid;grid-template-columns:110px 1fr 80px;gap:10px;align-items:center;font-size:13px}
.mj-kelas i{height:14px;border-radius:7px;background:#1f6f8b;opacity:.8}
.mj-kelas b{text-align:right}
@media (max-width:620px){
  .mj-akar{padding:12px}
  .mj-akar-huruf span{width:52px;height:52px;font-size:30px}
  .mj-bar{grid-template-columns:96px 1fr 34px}
  .mj-lemma-grid{grid-template-columns:1fr}
  .mj-cari input{font-size:16px}
  .mj-top-bar{grid-template-columns:22px 64px 1fr}
  .mj-kelas div{grid-template-columns:84px 1fr 64px}
}
.mj-nowrap{white-space:nowrap;display:inline-block}
/* Mu'jam: entri Maqayis al-Lughah */
.mj-asl-catatan{font-size:12.5px;color:var(--ink-soft,#5a675f);margin:4px 0 0}
.mj-asl-aksi{margin-top:8px}
.mj-asl-teks{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line,#d6dbd1)}
.mj-asl-teks p[lang=ar]{font-family:var(--f-ar,"Amiri",serif);font-size:19px;line-height:1.9;margin:0 0 8px;text-align:right}
.mj-asl-sumber{font-size:12px;color:var(--ink-soft,#5a675f);margin:6px 0 0}
.mj-asl-kosong{margin:8px 0}
/* ===== TQ_GRAF: graf konsep ===== */
:root{--g-simpul:#2a6f97;--g-tokoh:#b5642a;--g-sifat:#7a4f9e;--g-aksi:#0f7a55;--g-tempat:#5a7d2a;--g-pusat:#b23a3a;--g-garis:#9aa79f;--g-teks:#15211b;--g-bg:#fbfcf9}
:root[data-theme="dark"]{--g-simpul:#4d94c2;--g-tokoh:#c97f45;--g-sifat:#9b76c4;--g-aksi:#2e9c70;--g-tempat:#7fa348;--g-pusat:#d46a6a;--g-garis:#4f6157;--g-teks:#e7ece8;--g-bg:#131e19}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--g-simpul:#4d94c2;--g-tokoh:#c97f45;--g-sifat:#9b76c4;--g-aksi:#2e9c70;--g-tempat:#7fa348;--g-pusat:#d46a6a;--g-garis:#4f6157;--g-teks:#e7ece8;--g-bg:#131e19} }
.tq-graf{position:relative;border:1px solid var(--line,#d6dbd1);border-radius:16px;background:var(--g-bg);overflow:hidden;touch-action:none}
.tq-graf-svg{display:block;cursor:grab;user-select:none;-webkit-user-select:none}
.tq-graf-svg .g-link line{stroke:var(--g-garis);stroke-opacity:.75;transition:stroke-opacity .15s}
.tq-graf-svg .g-link .g-hit{stroke:transparent;stroke-width:14px;cursor:pointer}
.tq-graf-svg .g-link.is-on line{stroke:var(--g-pusat);stroke-opacity:1}
.tq-graf-svg .g-link.is-redup line{stroke-opacity:.15}
.tq-graf-svg .g-link.is-redup .g-label{opacity:.2}
.tq-graf-svg .g-label-sembunyi{display:none}
.tq-graf-svg .g-link.is-on .g-label-sembunyi{display:block}
.tq-graf-svg .g-label{font:600 10.5px var(--f-ar,"Amiri",serif);fill:var(--g-teks);opacity:.8;pointer-events:none;paint-order:stroke;stroke:var(--g-bg);stroke-width:3px;stroke-linejoin:round}
.tq-graf-svg .g-node{cursor:pointer;transition:opacity .15s}
.tq-graf-svg .g-node circle{stroke:var(--g-bg);stroke-width:2px;transition:r .15s}
.tq-graf-svg .g-node.is-on circle{stroke:var(--g-pusat);stroke-width:3px}
.tq-graf-svg .g-node.is-pusat circle{fill:var(--g-pusat)}
.tq-graf-svg .g-node.is-redup{opacity:.3}
.tq-graf-svg .g-ar{font:700 13px var(--f-ar,"Amiri",serif);fill:#fff;pointer-events:none}
.tq-graf-svg .is-pusat .g-ar{font-size:17px}
.tq-graf-svg .g-idn-dalam{font:600 9.5px var(--f-ui,sans-serif);fill:#fff;pointer-events:none}
.tq-graf-svg .g-idn{font:600 11px var(--f-ui,sans-serif);fill:var(--g-teks);pointer-events:none;paint-order:stroke;stroke:var(--g-bg);stroke-width:3px;stroke-linejoin:round}
.tq-graf-svg .g-sub{font:500 9.5px var(--f-ui,sans-serif);fill:var(--ink-soft,#5a675f);pointer-events:none;paint-order:stroke;stroke:var(--g-bg);stroke-width:3px}
.tq-graf-kontrol{position:absolute;top:8px;right:8px;display:grid;gap:4px}
.tq-graf-kontrol button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line,#d6dbd1);background:var(--surface,#fff);color:var(--ink,#15211b);font-size:18px;line-height:1;cursor:pointer}
.tq-graf-legenda{font-size:12.5px;color:var(--ink-soft,#5a675f);margin:8px 0 0}
.kp-graf{margin-top:8px}
.kp-rinci{margin-top:10px}
.kp-kartu{padding:12px 14px;border-radius:14px;border:1px solid var(--line,#d6dbd1);background:var(--surface,#fff);display:grid;gap:8px}
.kp-kepala{display:flex;align-items:center;gap:12px}
.kp-ar{font-family:var(--f-ar,"Amiri",serif);font-size:26px;line-height:1.3;background:var(--surface-2,#eef0e9);padding:2px 12px;border-radius:10px}
.kp-idn{font-weight:700;font-size:15px}
.kp-kepala small{color:var(--ink-soft,#5a675f);font-size:12.5px}
.kp-aksi{display:flex;flex-wrap:wrap;gap:6px}
.kp-rel{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kp-verb{font-family:var(--f-ar,"Amiri",serif);font-size:20px;padding:0 10px;border-radius:8px;background:var(--surface-2,#eef0e9)}
.kp-ket{margin:0;font-size:14px;color:var(--ink-soft,#5a675f)}
.kp-ayat-wrap{display:flex;flex-wrap:wrap;gap:6px}
.kp-ayat{padding:4px 10px;border-radius:999px;border:1px solid var(--line,#d6dbd1);background:var(--surface,#fff);color:inherit;font:inherit;font-size:13px;cursor:pointer}
.kp-ayat:hover{border-color:var(--g-aksi)}
.surah-konsep{margin:12px 0}
.surah-konsep>button{width:100%;justify-content:space-between}
.mj-jaringan{margin-top:14px}
/* ===== Menu ITQAN ===== */
.it-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:10px 0 18px}
.it-grid-3{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.it-kartu{position:relative;padding:14px 14px 12px 50px;border-radius:14px;border:1px solid var(--line,#d6dbd1);border-left:4px solid var(--w,#1f6f8b);background:var(--surface,#fff)}
.it-kartu b{display:block;font-size:15px}.it-kartu small{display:block;color:var(--ink-soft,#5a675f);font-size:12px;margin-bottom:4px}.it-kartu p{margin:0;font-size:13.5px;line-height:1.5}
.it-kartu .it-contoh{margin-top:6px;color:var(--ink-soft,#5a675f);font-size:12.5px}
.it-no{position:absolute;left:14px;top:13px;width:26px;height:26px;border-radius:50%;background:var(--w,#1f6f8b);color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center}
.it-langkah{list-style:none;margin:10px 0 18px;padding:0;display:grid;gap:8px}
.it-langkah li{padding:12px 14px;border-radius:14px;border:1px solid var(--line,#d6dbd1);border-left:4px solid var(--w);background:var(--surface,#fff)}
.it-langkah b{display:block;font-size:15px;margin:2px 0}.it-langkah p{margin:0 0 4px;font-size:13.5px}.it-langkah small{display:flex;gap:6px;align-items:flex-start;color:var(--ink-soft,#5a675f);font-size:12.5px}
.it-fase{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--w,#1f6f8b)}
.it-kontrol-ringkas{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:10px 0 18px}
.it-kontrol-ringkas>div{position:relative;padding:10px 10px 10px 46px;border-radius:12px;background:var(--surface-2,#eef0e9);font-size:13px}
.it-kontrol-ringkas b{display:block;font-size:12px;letter-spacing:.05em}.it-kontrol-ringkas small{color:var(--ink-soft,#5a675f);font-size:11.5px}
.it-stepper{list-style:none;margin:16px 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.it-stepper button{width:100%;padding:8px 4px;border:0;border-radius:10px;background:var(--surface-2,#eef0e9);color:var(--ink-soft,#5a675f);font:inherit;font-size:11.5px;cursor:pointer;display:grid;gap:4px;justify-items:center}
.it-stepper i{font-style:normal;width:24px;height:24px;border-radius:50%;background:var(--surface,#fff);display:grid;place-items:center;font-weight:800}
.it-stepper .lewat button{color:var(--ink,#15211b)}.it-stepper .lewat i{background:#0f7a55;color:#fff}
.it-stepper .kini button{background:#1f6f8b;color:#fff}.it-stepper .kini i{background:#fff;color:#1f6f8b}
.it-stepper span{line-height:1.2;text-align:center}
@media (max-width:720px){.it-stepper{grid-template-columns:repeat(4,1fr)}.it-stepper span{display:none}.it-stepper .kini span{display:block}}
.it-langkah-isi{padding:16px;border-radius:16px;border:1px solid var(--line,#d6dbd1);background:var(--surface,#fff)}
.it-langkah-kepala h4{margin:4px 0 6px;font-size:19px}.it-langkah-kepala p{margin:0 0 14px;color:var(--ink-soft,#5a675f)}
.it-label{display:block;font-weight:700;font-size:13.5px;margin:14px 0 6px}
.it-teks,.it-input{width:100%;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line,#d6dbd1);background:var(--surface,#fff);color:inherit;font:inherit;font-size:15px}
.it-input[lang=ar]{font-family:var(--f-ar,"Amiri",serif);font-size:22px}
.it-cari-baris{display:flex;gap:8px;align-items:stretch}.it-cari-baris .it-input{flex:1;min-width:0}.it-cari-baris select{padding:0 10px;border-radius:10px;border:1.5px solid var(--line,#d6dbd1);background:var(--surface,#fff);color:inherit;font:inherit}
.it-peringatan{font-size:13px;margin:6px 0 0;min-height:1.2em}.it-peringatan.is-salah{color:#b23a3a}.it-peringatan.is-ok{color:#0f7a55}
.it-lemma-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:8px 0}
.it-lemma{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line,#d6dbd1);cursor:pointer}
.it-lemma.is-on{border-color:#1f6f8b;background:color-mix(in srgb,#1f6f8b 8%,var(--surface,#fff))}
.it-lemma b{font-family:var(--f-ar,"Amiri",serif);font-size:22px;line-height:1.2}.it-lemma span{font-size:12.5px;color:var(--ink-soft,#5a675f)}
.it-angka{margin:6px 0 10px}
.it-ayat{padding:12px 14px;border-radius:14px;border:1px solid var(--line,#d6dbd1);background:var(--surface,#fff);margin-bottom:8px}
.it-ayat-kepala{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;margin-bottom:6px}
.it-ayat-ar{font-family:var(--f-ar,"Amiri",serif);font-size:24px;line-height:2;margin:0;text-align:right}
.it-ayat-ar mark{background:#fff0b3;color:inherit;border-radius:4px;padding:0 3px}
:root[data-theme="dark"] .it-ayat-ar mark{background:#5a4a12}
.it-ayat-id{margin:4px 0 0;font-size:13.5px;color:var(--ink-soft,#5a675f)}
.it-seg .seg-item{font-size:12px;padding:5px 9px}
.it-tanda-ringkas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.it-tanda-ringkas>span{padding:8px 12px;border-radius:12px;background:var(--surface-2,#eef0e9);font-size:13px;display:grid}.it-tanda-ringkas b{font-size:18px}.it-tanda-ringkas small{color:var(--ink-soft,#5a675f);font-size:11.5px}
.it-kol{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.it-kol>span{padding:5px 10px;border-radius:999px;background:var(--surface-2,#eef0e9);font-size:13px;display:inline-flex;gap:6px;align-items:center}.it-kol b{font-family:var(--f-ar,"Amiri",serif);font-size:18px}.it-kol i{font-style:normal;color:var(--ink-soft,#5a675f);font-size:12px}
.it-uji{display:grid;gap:4px;padding:10px 12px;border-radius:12px;border:1px solid var(--line,#d6dbd1);margin-top:8px;border-left:4px solid #0f7a55}
.it-uji.is-nol{border-left-color:#b23a3a}.it-uji b{font-family:var(--f-ar,"Amiri",serif);font-size:20px}.it-uji i{font-style:normal;font-size:13px;color:var(--ink-soft,#5a675f)}.it-uji.is-nol i{color:#b23a3a;font-weight:700}
.it-klaim-daftar{display:grid;gap:8px;margin:8px 0}
.it-klaim{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid var(--line,#d6dbd1);border-left:4px solid var(--w)}
.it-klaim select{padding:6px 8px;border-radius:8px;border:1px solid var(--line,#d6dbd1);background:var(--surface,#fff);color:inherit;font:inherit;font-size:12.5px;max-width:180px}
.it-klaim p{margin:0;font-size:14px}
@media (max-width:600px){.it-klaim{grid-template-columns:1fr auto}.it-klaim select{grid-column:1;grid-row:1;max-width:none}.it-klaim button{grid-column:2;grid-row:1;justify-self:end}.it-klaim p{grid-column:1/-1;grid-row:2}}
.it-cek{display:grid;gap:6px;margin:16px 0}
.it-cek-baris{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;border:1px solid var(--line,#d6dbd1);cursor:pointer;font-size:14px}
.it-cek-baris.is-on{border-color:#0f7a55;background:color-mix(in srgb,#0f7a55 7%,var(--surface,#fff))}.it-cek-baris input{margin-top:3px}
.it-lembar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.it-lembar{text-align:left;padding:14px;border-radius:14px;border:1px solid var(--line,#d6dbd1);background:var(--surface,#fff);color:inherit;font:inherit;cursor:pointer;display:grid;gap:4px}
.it-lembar b{font-family:var(--f-ar,"Amiri",serif);font-size:24px}.it-lembar span{font-size:13.5px}.it-lembar small{color:var(--ink-soft,#5a675f);font-size:12px}
.it-lembar-isi{display:grid;gap:12px}
.it-bag{padding:14px 16px;border-radius:14px;border:1px solid var(--line,#d6dbd1);background:var(--surface,#fff)}
.it-bag p{margin:6px 0;font-size:14px;line-height:1.6}.it-bag ul{margin:6px 0;padding-left:18px;font-size:14px}
.it-klaim-list{margin:6px 0;padding-left:0;list-style:none;display:grid;gap:6px}.it-klaim-list li{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.it-tk{flex:none;padding:1px 8px;border-radius:999px;background:var(--w);color:#fff;font-size:12px;font-weight:800}
.it-tabel{overflow-x:auto;margin-top:8px}.it-tabel table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:480px}.it-tabel th,.it-tabel td{padding:8px 10px;border-bottom:1px solid var(--line,#d6dbd1);text-align:left;vertical-align:top}.it-tabel th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft,#5a675f)}
.it-tabel .is-ok{color:#0f7a55;font-weight:700}.it-tabel .is-beda{color:#b23a3a;font-weight:700}
.it-kasus-seg{margin:0 0 14px;flex-wrap:wrap}.it-kasus-seg span{font-family:var(--f-ar,"Amiri",serif);font-size:18px}
.it-kontrol{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.it-kontrol-kartu{padding:14px;border-radius:14px;border:1px solid var(--line,#d6dbd1);background:var(--surface,#fff)}
.it-kontrol-kartu.is-on{border-color:#0f7a55}
.it-kontrol-kepala{position:relative;padding-left:38px;margin-bottom:6px}.it-kontrol-kepala .it-no{left:0;top:0}
.it-kontrol-kepala b{display:block;font-size:13px;letter-spacing:.05em}.it-kontrol-kepala small{color:var(--ink-soft,#5a675f);font-size:12.5px}
.it-kontrol-kartu p{margin:4px 0;font-size:13.5px}.it-bahaya{color:var(--ink-soft,#5a675f)}

/* kitab himpunan hadis */
.hm-kitab-himpunan .hm-kartu small.hm-ket-kitab{display:block;font-size:12px;color:var(--ink-soft,#5a675f);margin:2px 0 4px;line-height:1.4}
.hm-asal{margin:4px 0 0;font-size:12.5px;color:var(--ink-soft,#5a675f)}
.hm-id-kosong{font-style:italic;color:var(--ink-soft,#5a675f)}
.hm-takhrij{font-family:var(--f-ar,"Amiri",serif);font-size:16px;line-height:1.9;color:var(--ink-soft,#5a675f);margin:6px 0 0;text-align:right}
.hm-takhrij .hd-label{display:block;text-align:left;direction:ltr}
.kp-mode{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}.kp-mode .sf-catatan{margin:0}
.mj-saran{margin-top:10px}.mj-saran-daftar{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.mj-saran .mj-chip span{font-size:12px;color:var(--ink-soft,#5a675f);margin:0 6px}
.mj-padanan{padding:10px 14px;border-radius:12px;background:var(--surface-2,#eef0e9);font-size:13.5px;margin:0 0 10px}
/* Judul Arab matan sejajar dengan judul bab (kolom isi), bukan di tengah halaman */
@media (min-width:1100px){
  .hm-judul:has(+ .hm-tata) .ar-judul{padding-left:186px}
  .hm-judul:has(+ .ab-tata) .ar-judul{padding-left:246px}
}

/* Syair semantik: dua kolom cermin per diwan, tanpa tombol suara */
.sm-syair-wadah{display:flex;flex-direction:column;gap:22px}
.sm-syair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 28px;align-items:start;padding-top:16px;border-top:1px solid var(--line)}
.sm-syair:first-child{border-top:0;padding-top:0}
.sm-syair .sm-syair-sumber{grid-column:1 / -1;margin:0}
.sm-syair-id p{margin:0;font-style:normal;line-height:1.85}
.sm-bait{margin:0 0 14px!important;display:flex;flex-direction:column}
.sm-bait span{display:block}
.sm-syair-ar .tq-dengar,.sm-syair-ar .dengar{display:none}
@media (max-width:760px){
  .sm-syair{grid-template-columns:1fr}
  .sm-syair .sm-syair-ar{order:-1}
  .sm-syair .sm-syair-sumber{order:-2}
}
/* Semantik: tujuh tahap sebagai pintu masuk */
.sm-tahap-mini .sm-tm{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;transition:border-color .16s,background-color .16s}
.sm-tahap-mini .sm-tm:hover{border-color:var(--w)}
.sm-tahap-mini .sm-tm.is-on{border-color:var(--w);background:color-mix(in srgb,var(--w) 12%,var(--surface))}
.sm-tahap-mini .sm-tm b{flex:0 0 22px;height:22px;display:grid;place-items:center;border-radius:7px;color:#fff;font-size:12px;background:var(--w)}
.sm-7{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:none}
.sm-7-item{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.sm-7-item.is-on{border-color:color-mix(in srgb,var(--w) 55%,var(--line))}
.sm-7-item > button{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:0;background:none;font:inherit;color:var(--ink);cursor:pointer;text-align:left}
.sm-7-item > button:hover{background:color-mix(in srgb,var(--w) 7%,transparent)}
.sm-7-no{flex:0 0 38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--w);color:#fff;font-size:17px;font-weight:800}
.sm-7-teks{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sm-7-teks strong{font-size:16px}
.sm-7-teks small{font-size:13px;color:var(--ink-soft);line-height:1.45}
.sm-7-item em{flex:none;font-style:normal;font-size:12.5px;font-weight:700;color:var(--w);white-space:nowrap}
.sm-7-isi{padding:4px 16px 16px;border-top:1px solid var(--line)}
.sm-7-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin-top:12px}
.sm-7-kata{display:grid;grid-template-columns:1fr auto;grid-template-areas:"b i" "s s";gap:2px 10px;align-items:baseline;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--paper);font:inherit;color:var(--ink);cursor:pointer;text-align:left;transition:border-color .16s}
.sm-7-kata:hover{border-color:var(--w)}
.sm-7-kata b{grid-area:b;font-size:14.5px}
.sm-7-kata i{grid-area:i;font-style:normal;font-family:var(--font-naskah);font-size:20px;color:var(--w)}
.sm-7-kata small{grid-area:s;font-size:12.5px;line-height:1.45;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sm-7-tema{margin-top:14px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--w) 7%,transparent)}
.sm-7-tema .sm-7-grid{margin-top:6px}
.sm-7-tema h5{margin:0 0 8px;font-size:14.5px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sm-7-tema h5 span{font-family:var(--font-naskah);font-weight:400;font-size:18px;color:var(--w)}
.sm-7-tema h5 small{font-weight:600;color:var(--ink-soft)}
.sm-7-pil{display:flex;flex-wrap:wrap;gap:6px}
.sm-7-catatan{margin:12px 0 0;font-size:13px;color:var(--ink-soft)}
@media (max-width:600px){ .sm-7-item > button{gap:10px;padding:12px} .sm-7-no{flex-basis:32px;height:32px;font-size:15px} .sm-7-isi{padding:2px 12px 12px} .sm-7-grid{grid-template-columns:1fr} }
.sm-peta-urut{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 10px}
.sm-peta-urut span{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:12.5px;font-weight:600;color:var(--ink)}
.sm-peta-urut b{display:grid;place-items:center;width:20px;height:20px;border-radius:999px;background:var(--w);color:#fff;font-size:11px}
.sj-simpul.sj-sorot .sj-badan{outline:3px solid var(--w,var(--emerald));outline-offset:3px;transition:outline-color .3s}
/* Semantik: rangkuman dua bahasa */
.sm-rk-kepala{margin:14px 0 12px}
.sm-rk-kepala p{margin:0 0 10px;max-width:75ch;color:var(--ink-soft);font-size:14.5px;line-height:1.65}
.sm-rk-alat{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sm-rk-alat select{font:inherit;font-size:14px;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.sm-rk-daftar{display:flex;flex-direction:column;gap:14px}
.sm-rk{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:16px 18px}
.sm-rk header{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sm-rk header > div{flex:1;min-width:160px}
.sm-rk h4{margin:0;font-size:18px}
.sm-rk header small{color:var(--ink-soft);font-size:12.5px}
.sm-rk-ar{font-family:var(--font-naskah);font-size:32px;line-height:1.4;color:var(--w)}
.sm-rk-inti{margin:10px 0 12px;font-weight:600;font-size:15.5px;line-height:1.55;color:var(--ink)}
.sm-rk-isi{display:grid;gap:12px 22px}
.sm-rk-isi.sm-rk-dua{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sm-rk-isi section{padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--w) 6%,var(--paper))}
.sm-rk-isi h5{margin:0 0 6px;font-size:13px;color:var(--w)}
.sm-rk-isi p{margin:0;font-family:var(--font-read);font-size:15px;line-height:1.75;color:var(--ink)}
.sm-rk-isi ul{margin:10px 0 0;padding-left:18px;font-size:14px;line-height:1.6}
.sm-rk-ayat{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--ink-soft)}
.sm-rk-sumber{margin:8px 0 0;font-size:12px;color:var(--ink-soft)}
@media (max-width:760px){ .sm-rk-isi.sm-rk-dua{grid-template-columns:1fr} .sm-rk{padding:14px} }
/* Medan semantik: jaring laba-laba berfisika */
.mj-kepala{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 10px}
.mj-kepala p{flex-basis:100%;margin:4px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-soft);max-width:80ch}
.mj-pilih{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-soft)}
.mj-pilih select{font:inherit;font-weight:600;font-size:14.5px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);max-width:70vw}
.mj-alat{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.mj-petunjuk{font-size:12.5px;color:var(--ink-soft);margin-left:4px}
.mj-wadah{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.mj-svg{display:block;width:100%;height:auto;max-height:82vh;touch-action:pan-y pinch-zoom;cursor:grab;user-select:none;-webkit-user-select:none}
.mj-svg.is-geser{cursor:grabbing}
.mj-benang line{stroke:var(--ink-soft);stroke-linecap:round}
.mj-benang .mj-lingkar{stroke-width:1.1;opacity:.45}
.mj-benang .mj-jari{stroke-width:1.6;opacity:.6}
.mj-benang .mj-halus{stroke-width:.8;opacity:.3;stroke-dasharray:3 4}
.mj-n{cursor:pointer;touch-action:none}
.mj-n rect{fill:var(--surface);stroke:var(--line);stroke-width:1.2}
.mj-n text{font-family:var(--font-ui);font-size:13px;font-weight:600;fill:var(--ink)}
.mj-n text.ar{font-family:var(--font-naskah);font-size:17px;font-weight:400}
.mj-n text.ket{font-size:10.5px;font-weight:600;fill:var(--ink-soft)}
.mj-makna rect{fill:color-mix(in srgb,var(--w) 14%,var(--surface));stroke:var(--w);stroke-width:1.6}
.mj-makna text{font-size:13.5px;font-weight:700}
.mj-pasangan rect{stroke:color-mix(in srgb,var(--w) 60%,var(--line))}
.mj-ayat rect{fill:var(--paper)}
.mj-ayat text{font-size:12px;fill:var(--ink-soft)}
.mj-ayat.is-klik text{fill:var(--ink)}
.mj-n.is-klik:hover rect,.mj-n:focus-visible rect{stroke:var(--w);stroke-width:2.4}
.mj-n:focus{outline:none}
.mj-pusat circle{fill:var(--w);stroke:color-mix(in srgb,var(--w) 60%,#fff);stroke-width:4}
.mj-pusat text{fill:#fff}
.mj-pusat text.ar{font-family:var(--font-naskah);font-size:42px}
.mj-pusat text.nama{font-size:14px;font-weight:800}
@media (max-width:640px){ .mj-wadah{margin-inline:-6px;border-radius:var(--r-md)} .mj-petunjuk{flex-basis:100%;margin:2px 0 0} }
.mj-benang .mj-jari-par{stroke:var(--gold);stroke-width:1.6;opacity:.75}
.mj-para rect{fill:color-mix(in srgb,var(--gold) 14%,var(--surface));stroke:var(--gold);stroke-width:1.6}
.mj-para text.ket{fill:var(--gold)}
.mj-pasangan text.ar{font-size:20px}
.mj-para text.ar{font-size:19px}
.mj-legenda{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px 18px;margin:12px 0 6px;font-size:13px;color:var(--ink-soft);line-height:1.5}
.mj-legenda span{display:flex;gap:8px;align-items:flex-start}
.mj-legenda b{color:var(--ink)}
.mj-legenda i{flex:none;width:14px;height:14px;margin-top:3px;border-radius:4px;border:1.6px solid}
.mj-legenda .l1{border-color:var(--w,var(--emerald));background:color-mix(in srgb,var(--w,var(--emerald)) 20%,transparent)}
.mj-legenda .l2{border-color:var(--line);background:var(--surface)}
.mj-legenda .l3{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 20%,transparent)}
.mj-legenda .l4{border-color:var(--line);background:var(--paper);border-radius:999px}
.mj-sumber{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-soft);max-width:90ch}
.mj-kelompok{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:4px 0 8px;font-size:13px;color:var(--ink-soft)}
.mj-kelompok b{color:var(--ink)}
.mj-kelompok span{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.mj-kelompok span i{width:12px;height:12px;border-radius:3px;background:var(--w)}
.mj-kelompok small{flex-basis:100%;font-size:12px}
.mj-n.is-fokus rect{fill:color-mix(in srgb,var(--w) 22%,var(--surface));stroke:var(--w);stroke-width:2}
.mj-n.is-fokus text{fill:var(--ink)}
.mj-n.is-fokus text.ket{fill:var(--w);font-weight:700}
.sm-syair-ref{font-style:normal!important;font-size:12px!important;color:var(--ink-soft)!important;margin-top:4px!important}

/* ================= PETA KONSEP (ontologi) ================= */
.on-kepala{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:18px 28px;align-items:end;margin:0 0 14px}
.on-kepala h3{margin:4px 0 8px;font-size:22px;letter-spacing:-.01em}
.on-kepala p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.6;max-width:68ch}
.on-cari{display:grid;gap:6px}
.on-cari input{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:15px}
.on-cari input:focus{outline:2px solid var(--emerald);outline-offset:1px}
.on-sumber{margin:18px 0 0;font-size:12.5px;color:var(--ink-soft);line-height:1.55;border-top:1px dashed var(--line);padding-top:10px}
.on-daftar{display:grid;gap:14px}
.on-kat{border:1px solid var(--line);border-left:4px solid var(--w);border-radius:14px;padding:12px 14px;background:var(--surface)}
.on-kat h4{margin:0 0 10px;font-size:15px}
.on-kat-judul{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.on-kat-judul i{width:10px;height:10px;border-radius:50%;background:var(--w)}
.on-kat-judul small{font-weight:500;color:var(--ink-soft)}
.on-chips{display:flex;flex-wrap:wrap;gap:8px}
.on-chip{display:inline-flex;align-items:baseline;gap:7px;padding:6px 10px 6px 12px;border-color:color-mix(in srgb,var(--w, var(--emerald)) 35%, var(--line))}
.on-chip i{font-family:"Amiri","Scheherazade New",serif;font-style:normal;font-size:16px;line-height:1;color:var(--w, var(--emerald))}
.on-chip small{font-size:11px;color:var(--ink-soft);background:var(--paper);border-radius:999px;padding:1px 6px}
.on-chip:hover{background:color-mix(in srgb,var(--w, var(--emerald)) 10%, var(--surface))}
.on-detail{--w:var(--emerald)}
.on-jalur{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13px;color:var(--ink-soft)}
.on-jalur button{border:0;background:none;padding:2px 4px;font:inherit;color:var(--emerald);cursor:pointer;border-radius:6px}
.on-jalur button:hover{background:var(--paper)}
.on-jalur b{color:var(--ink)}
.on-jalur i{opacity:.5;font-style:normal}
.on-ket{font-size:16px;line-height:1.65;margin:4px 0 18px;max-width:72ch}
.on-anak{margin-bottom:6px}
.on-ayat{display:grid;gap:8px}
.on-surah{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:8px 14px;align-items:start;padding:8px 0;border-bottom:1px dashed var(--line)}
.on-surah b{font-size:14px}
.on-surah b i{font-family:"Amiri","Scheherazade New",serif;font-style:normal;font-weight:400;color:var(--ink-soft);margin-left:4px}
.on-surah b small{color:var(--ink-soft);font-weight:500}
.on-surah span{display:flex;flex-wrap:wrap;gap:6px}
.on-no{min-width:38px;padding:4px 8px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-variant-numeric:tabular-nums;cursor:pointer}
.on-no:hover{border-color:var(--w);color:var(--w);background:color-mix(in srgb,var(--w) 8%, var(--surface))}
@media (max-width:720px){
  .on-kepala{grid-template-columns:1fr}
  .on-surah{grid-template-columns:1fr}
}

/* ===== Semantik: pilihan pendekatan (Izutsu / Ensiklopedia) ===== */
.sm-pendekatan{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 8px}
.sm-pd{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.sm-pd b{font-size:16px}
.sm-pd small{color:var(--ink-soft);font-size:13px}
.sm-pd:hover{border-color:var(--emerald)}
.sm-pd.is-on{border-color:var(--emerald);background:color-mix(in srgb,var(--emerald) 9%,var(--surface))}
.sm-pd.is-on b{color:var(--emerald)}
.sm-pd:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.sm-pd-ket{margin:0 0 18px;color:var(--ink-soft);font-size:14px;line-height:1.6}
.sm-ke-ensi{margin-left:auto}

/* ===== Ensiklopedia Semantik ===== */
.ens-alat{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:12px}
.ens-cari{flex:1 1 320px}
.ens-saring{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--ink-soft);cursor:pointer}
.ens-huruf{display:flex;flex-wrap:wrap;gap:6px;direction:rtl;margin-bottom:10px}
.ens-h{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:var(--font-naskah);font-size:20px;cursor:pointer}
.ens-h:hover:not(:disabled){border-color:var(--emerald)}
.ens-h.is-on{background:var(--emerald);border-color:var(--emerald);color:#fff}
.ens-h:disabled{opacity:.35;cursor:default}
.ens-info{margin:4px 0 10px;color:var(--ink-soft);font-size:14px}
.ens-daftar{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.ens-baris{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.ens-baris:hover{border-color:var(--emerald)}
.ens-baris.ada-iz{background:color-mix(in srgb,var(--emerald) 5%,var(--surface))}
.ens-akar{font-family:var(--font-naskah);font-size:22px;min-width:74px;text-align:center;color:var(--emerald)}
.ens-teks{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ens-teks b{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ens-teks small{color:var(--ink-soft);font-size:12.5px}
.ens-tanda{flex:none;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:99px;background:color-mix(in srgb,var(--emerald) 14%,transparent);color:var(--emerald)}
.ens-kosong{color:var(--ink-soft)}
.ens-entri{max-width:820px}
.ens-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ens-kepala{display:flex;gap:20px;align-items:center;padding:18px 20px;border-radius:16px;background:color-mix(in srgb,var(--emerald) 7%,var(--surface));border:1px solid var(--line);margin-bottom:18px}
.ens-akar-besar{font-family:var(--font-naskah);font-size:44px;line-height:1.2;color:var(--emerald);flex:none}
.ens-kepala h2{margin:0 0 4px;font-size:22px}
.ens-kepala p{margin:0;color:var(--ink-soft)}
.ens-kepala .ens-meta{margin-top:6px;font-size:13px}
.ens-bagian{margin:0 0 22px}
.ens-bagian h3{font-size:16px;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.ens-p{margin:0 0 10px;line-height:1.7}
.ens-p [lang=ar],.ens-chip [lang=ar],.ens-ayat-ref [lang=ar]{font-family:var(--font-naskah);font-size:1.2em}
.ens-inti{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:var(--emerald-soft)}
.ens-kutip{margin:0 0 10px;padding:12px 16px;border:1px solid var(--line);background:var(--surface);border-radius:10px}
.ens-kutip p{margin:0 0 6px;font-family:var(--font-naskah);font-size:19px;line-height:1.9}
.ens-kutip cite{font-size:12.5px;color:var(--ink-soft);font-style:normal}
.ens-catatan{font-size:13px;color:var(--ink-soft);margin:4px 0 8px}
.ens-tabel-bungkus{overflow-x:auto}
.ens-tabel{width:100%;border-collapse:collapse;font-size:14px}
.ens-tabel th,.ens-tabel td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ens-tabel th{font-size:12.5px;color:var(--ink-soft);font-weight:600}
.ens-tabel td[lang=ar]{font-family:var(--font-naskah);font-size:19px;text-align:right;white-space:nowrap}
.ens-tabel td:last-child{white-space:nowrap}
.ens-chips{display:flex;flex-wrap:wrap;gap:8px}
.ens-chip{display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.ens-chip small{font-size:11.5px;color:var(--ink-soft)}
.ens-chip:hover{border-color:var(--emerald)}
.ens-chip.ada-iz{border-color:color-mix(in srgb,var(--emerald) 50%,var(--line))}
.ens-ayat{padding:12px 0;border-bottom:1px dashed var(--line)}
.ens-ayat-ar{margin:0 0 6px;font-family:var(--font-naskah);font-size:22px;line-height:2}
.ens-ayat-id{margin:0 0 4px;line-height:1.6}
.ens-ayat-ref{margin:0;font-size:13px;color:var(--ink-soft)}
.ens-ref{border:0;background:none;color:var(--emerald);font-weight:600;cursor:pointer;padding:0;font-size:13px}
.ens-aksi{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 12px}
.ens-sumber{font-size:12.5px;color:var(--ink-soft)}
@media (max-width:600px){
  .sm-pendekatan{grid-template-columns:1fr 1fr;gap:8px}
  .sm-pd{padding:10px 12px}.sm-pd b{font-size:14.5px}.sm-pd small{font-size:12px}
  .ens-daftar{grid-template-columns:1fr}
  .ens-h{width:36px;height:36px;font-size:18px}
  .ens-kepala{flex-direction:column;align-items:flex-start;gap:8px;padding:14px}
  .ens-akar-besar{font-size:36px}
  .sm-ke-ensi{margin-left:0}
  .sm-top{flex-wrap:wrap}
}

/* ===== Konsep surah ===== */
.on-surah-pilih{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;justify-content:space-between;margin:4px 0 14px}
.on-surah-pilih label{display:flex;flex-direction:column;gap:4px;flex:1 1 280px;max-width:440px}
.on-surah-pilih select{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit}
.on-surah-nav{display:flex;gap:8px}
.on-surah-ringkas{display:flex;gap:16px;align-items:center;padding:14px 18px;border-radius:14px;background:var(--emerald-soft);margin-bottom:16px}
.on-surah-ar{font-family:var(--font-naskah);font-size:32px;color:var(--emerald);flex:none}
.on-surah-ringkas h4{margin:0 0 2px;font-size:18px}
.on-surah-ringkas h4 small{color:var(--ink-soft);font-weight:500}
.on-surah-ringkas p{margin:0;color:var(--ink-soft);font-size:14px}
.on-surah-konsep{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}
.on-sk{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.on-sk-nama{display:flex;justify-content:space-between;gap:8px;align-items:baseline;border:0;background:none;padding:0;color:var(--ink);font:inherit;font-weight:600;text-align:left;cursor:pointer}
.on-sk-nama:hover span{color:var(--emerald);text-decoration:underline}
.on-sk-nama i{font-style:normal;font-family:var(--font-naskah);font-size:18px;font-weight:400;color:var(--w,var(--emerald))}
.on-sk-ayat{display:flex;flex-wrap:wrap;gap:4px}
@media (max-width:600px){ .on-surah-konsep{grid-template-columns:1fr} .on-surah-ar{font-size:26px} .on-surah-ringkas{padding:12px 14px} }

/* ===================== Konteks Wahyu: Asbabun Nuzul & Asbabul Wurud ===================== */
.ab-kepala{max-width:740px;margin:0 0 14px}
.ab-kepala h3{margin:0 0 6px;font-size:clamp(19px,2.2vw,22px);font-weight:800;letter-spacing:-.015em}
.ab-kepala p{margin:0;color:var(--ink-soft);line-height:1.6;font-size:15px}
.ab-kaidah{max-width:740px;margin:0 0 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.ab-kaidah summary{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;font-weight:700;font-size:14.5px;color:var(--emerald-ink);list-style:none;min-height:44px}
.ab-kaidah summary::-webkit-details-marker{display:none}
.ab-kaidah summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.ab-kaidah[open] summary::after{transform:rotate(-135deg)}
.ab-kaidah summary:focus-visible{outline:3px solid var(--emerald);outline-offset:2px;border-radius:var(--r-md)}
.ab-kaidah dl{margin:0;padding:2px 16px 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 22px}
.ab-kaidah dt{font-weight:700;font-size:14px;margin-bottom:3px}
.ab-kaidah dd{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.6}
.ab-alat{display:flex;gap:10px;margin:0 0 12px;max-width:740px}
.ab-cari{flex:1}
.ab-seg{margin-bottom:16px}
.ab-ket{color:var(--ink-soft);font-size:14px;margin:0 0 12px;max-width:740px}
.ab-sumber{margin:22px 0 0;font-size:12.5px;color:var(--ink-soft);line-height:1.6;max-width:740px}
.ab-saring{margin:0 0 14px;display:flex;flex-wrap:wrap;gap:8px}

/* grid 114 surah */
.ab-surah-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.ab-su{position:relative;width:100%;height:100%;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"no ar" "nama nama" "ket ket";align-items:center;gap:2px 8px;text-align:left;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s}
.ab-su-no{grid-area:no;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;min-width:28px;height:24px;display:inline-grid;place-items:center;border-radius:7px;padding:0 6px}
.ab-su.is-mk .ab-su-no{background:var(--gold-soft);color:var(--gold)}
.ab-su.is-md .ab-su-no{background:var(--emerald-soft);color:var(--emerald-ink)}
.ab-su-ar{grid-area:ar;justify-self:end;font-family:var(--font-arab);font-size:20px;line-height:1.4;color:var(--ink-soft)}
.ab-su b{grid-area:nama;font-size:14.5px;font-weight:700;margin-top:4px}
.ab-su small{grid-area:ket;font-size:12px;color:var(--ink-soft)}
.ab-su:not(:disabled):hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--emerald) 45%,var(--line))}
.ab-su:focus-visible{outline:3px solid var(--emerald);outline-offset:2px}
.ab-su.is-kosong{background:transparent;cursor:default;opacity:.5}

/* tema & kisah */
.ab-tema-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ab-tema{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.ab-tema b{font-size:15.5px}
.ab-tema span{font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ab-tema:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ab-tema:focus-visible,.ab-kisah button:focus-visible,.ab-baris:focus-visible{outline:3px solid var(--emerald);outline-offset:2px}
.ab-sub-kepala{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.ab-sub-kepala h4{margin:0;font-size:17px}
.ab-sub-kepala h4 small,.wd-bab h4 small{font-weight:600;color:var(--ink-soft);font-size:13px}
.ab-kisah{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;counter-reset:kisah}
.ab-kisah button{width:100%;height:100%;display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.ab-kisah button:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ab-kisah b{font-size:15.5px}
.ab-kisah span{font-family:var(--font-read);font-size:15px;line-height:1.55;color:var(--ink)}
.ab-kisah small{margin-top:auto;padding-top:4px;font-size:12.5px;font-weight:700;color:var(--emerald)}
.ab-daftar{display:flex;flex-direction:column;gap:8px;max-width:820px}
.ab-baris{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.ab-baris:hover{border-color:color-mix(in srgb,var(--emerald) 45%,var(--line))}
.ab-baris-ref{font-size:13px;font-weight:800;color:var(--emerald)}
.ab-baris-teks{font-family:var(--font-read);font-size:15px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ab-baris-meta{font-size:12.5px;color:var(--ink-soft)}

/* halaman surah */
.ab-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.ab-nav .btn,.ab-sub-kepala .btn,.ab-baca{display:inline-flex;align-items:center;gap:6px}
.ab-nav-geser{display:flex;gap:8px;flex-wrap:wrap}
.ab-surah-kepala{display:flex;align-items:center;gap:20px;padding:18px 20px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);margin:0 0 22px;max-width:980px}
.ab-surah-ar{font-family:var(--font-quran);font-size:42px;line-height:1.3;color:var(--emerald);flex:none}
.ab-surah-kepala h3{margin:0 0 3px;font-size:22px;font-weight:800;letter-spacing:-.015em}
.ab-surah-kepala h3 small{font-size:15px;color:var(--ink-soft);font-weight:600}
.ab-surah-kepala p{margin:0;color:var(--ink-soft);font-size:14px}
.ab-surah-kepala .ab-surah-hitung{margin-top:4px;color:var(--ink)}
.ab-blok{margin:0 0 34px;max-width:980px;scroll-margin-top:110px}
.ab-ayat{padding:16px 20px;border-radius:var(--r-md);background:var(--emerald-soft);margin:0 0 12px}
.ab-blok.is-tuju .ab-ayat{box-shadow:0 0 0 2px var(--emerald)}
.ab-ayat-kepala{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ab-ayat-kepala h4{margin:0;font-size:16px;font-weight:800;color:var(--emerald-ink)}
.ab-baca{margin-left:auto}
.ab-taaddud{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--surface);color:var(--emerald-ink);cursor:help}
.ab-ayat-ar{margin:12px 0 8px;font-family:var(--font-quran);font-size:clamp(24px,3.4vw,30px);line-height:2.1;text-align:right;color:var(--ink)}
.ab-ayat-id{margin:0;font-family:var(--font-read);font-size:15.5px;line-height:1.65;color:var(--ink)}
.ab-dua{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.ab-kolom{display:flex;flex-direction:column;gap:10px;min-width:0}
.ab-kolom h5{margin:0;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.ab-satu{display:flex;flex-direction:column;gap:10px;max-width:740px}
.ab-riwayat{padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);min-width:0}
.ab-riwayat-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.ab-label,.ab-src{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft)}
.ab-label[title]{cursor:help}
.ab-red-s{background:var(--emerald-soft);color:var(--emerald-ink)}
.ab-red-m{background:var(--gold-soft);color:var(--gold)}
.ab-src{background:transparent;border:1px solid var(--line);color:var(--ink)}
.ab-info{margin:0 0 4px;font-size:13.5px;color:var(--ink-soft)}
.ab-info b{color:var(--ink);font-weight:700}
.ab-tema-kecil{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--ink)}
.ab-riwayat-id{font-family:var(--font-read);font-size:15.5px;line-height:1.7;color:var(--ink);max-width:70ch}
.ab-riwayat-id p{margin:0 0 .7em}
.ab-riwayat:not(.is-pendek):not(.is-buka) .ab-riwayat-id{max-height:11.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
.ab-riwayat-aksi{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-top:8px}
.ab-arab{flex:1 1 100%;order:3}
.ab-arab summary{display:inline-flex;align-items:center;min-height:36px;font-size:13.5px;font-weight:700;color:var(--emerald);cursor:pointer}
.ab-arab p{margin:6px 0 0;font-family:var(--font-arab);font-size:clamp(19px,2.6vw,22px);line-height:1.95;text-align:right;color:var(--ink)}

/* Asbabul Wurud */
.ab-bab{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin:0 0 10px;scrollbar-width:thin}
.ab-bab .chip{flex:none;white-space:nowrap}
.ab-bab .chip small{font-weight:700;opacity:.75;font-variant-numeric:tabular-nums}
.wd-bab{margin:0 0 26px;max-width:860px}
.wd-bab h4{margin:0 0 10px;font-size:17px;font-weight:800}
.wd-kartu{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);margin:0 0 8px;overflow:hidden}
.wd-buka{width:100%;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"no judul panah" "no tanda panah";gap:6px 14px;align-items:start;text-align:left;padding:14px 16px;border:0;background:none;color:var(--ink);cursor:pointer;font:inherit}
.wd-buka:hover{background:color-mix(in srgb,var(--emerald) 4%,transparent)}
.wd-buka:focus-visible{outline:3px solid var(--emerald);outline-offset:-3px;border-radius:var(--r-md)}
.wd-no{grid-area:no;min-width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--surface-2);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.wd-judul{grid-area:judul;display:flex;flex-direction:column;gap:3px;min-width:0}
.wd-judul b{font-size:16px;font-weight:700}
.wd-judul span{font-family:var(--font-read);font-size:15px;line-height:1.55;color:var(--ink-soft)}
.wd-tanda{grid-area:tanda;display:flex;flex-wrap:wrap;gap:6px}
.wd-derajat,.wd-macam,.wd-cek{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft)}
.wd-derajat.is-shahih{background:var(--emerald-soft);color:var(--emerald-ink)}
.wd-derajat.is-hasan{background:var(--gold-soft);color:var(--gold)}
.wd-derajat.is-lemah{background:color-mix(in srgb,#b3403a 12%,var(--surface));color:#9a352f}
.wd-cek{background:transparent;border:1px dashed var(--line)}
.wd-panah{grid-area:panah;color:var(--ink-soft);transition:transform .25s cubic-bezier(.16,1,.3,1);margin-top:6px}
.wd-kartu.is-buka .wd-panah{transform:rotate(180deg)}
.wd-isi{display:none;padding:0 16px 16px 64px}
.wd-kartu.is-buka .wd-isi{display:block}
.wd-alur{list-style:none;margin:0 0 12px;padding:0;counter-reset:alur}
.wd-alur li{position:relative;padding:0 0 16px 30px;counter-increment:alur}
.wd-alur li::before{content:counter(alur);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--emerald-soft);color:var(--emerald-ink)}
.wd-alur li:not(:last-child)::after{content:"";position:absolute;left:10.5px;top:28px;bottom:4px;width:1px;background:var(--line)}
.wd-alur h5{margin:0 0 6px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.wd-teks{font-family:var(--font-read);font-size:15.5px;line-height:1.7;max-width:70ch}
.wd-teks p{margin:0 0 .6em}
.wd-ar{margin:0 0 8px;font-family:var(--font-arab);font-size:clamp(20px,2.8vw,24px);line-height:1.95;text-align:right}
.wd-pelajaran{margin:0;font-size:16px;font-weight:600;line-height:1.6;max-width:70ch}
.wd-catatan{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:13.5px;color:var(--ink)}
.wd-kaki{margin:0 0 10px;font-size:12.5px;color:var(--ink-soft);line-height:1.6}
:root[data-theme="dark"] .wd-derajat.is-lemah{background:color-mix(in srgb,#e07a73 16%,var(--surface));color:#f0a29b}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .wd-derajat.is-lemah{background:color-mix(in srgb,#e07a73 16%,var(--surface));color:#f0a29b} }
@media (max-width:760px){
  .ab-dua{grid-template-columns:1fr}
  .ab-surah-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-surah-kepala{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px}
  .ab-surah-ar{font-size:34px}
  .ab-ayat{padding:14px}
  .ab-baca{margin-left:0}
  .wd-isi{padding:0 14px 14px 14px}
  .wd-buka{gap:6px 10px;padding:12px 14px}
  .ab-kisah{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){ .ab-su,.ab-tema,.ab-kisah button,.wd-panah,.ab-kaidah summary::after{transition:none} }
.ab-sanad{margin:0 0 8px}
.ab-sanad summary{display:inline-flex;align-items:center;min-height:32px;font-size:13px;font-weight:700;color:var(--ink-soft);cursor:pointer}
.ab-sanad summary:hover{color:var(--emerald)}
.ab-sanad p{margin:4px 0 0;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.ab-riwayat .ab-tema-kecil{margin:6px 0 0;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.ab-dua .ab-riwayat:not(.is-pendek):not(.is-buka) .ab-riwayat-id{max-height:13em}
/* kartu riwayat: tinggi kolom seimbang, aksi di dasar kartu */
.ab-dua{align-items:stretch}
.ab-kolom .ab-riwayat:only-of-type{flex:1}
.ab-riwayat{display:flex;flex-direction:column}
.ab-riwayat-aksi{margin-top:auto;padding-top:10px;align-items:center}
.ab-riwayat .ab-arab{flex:0 1 auto;order:0}
.ab-riwayat .ab-arab[open]{flex-basis:100%}
.ab-riwayat .ab-arab summary{padding:0 6px}
.ab-ayat-id sup{font-size:.7em;font-weight:700;color:var(--emerald-ink);margin:0 2px 0 4px;font-family:var(--font-ui)}
/* audit 2 Nov: teks berwarna tahap/tema memakai versi gelap (terang) dari warnanya agar ≥4,5:1 */
.sm-7-item em{color:color-mix(in srgb,var(--w) 70%,#000)}
:root[data-theme="dark"] .sm-7-item em{color:color-mix(in srgb,var(--w) 60%,#fff)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sm-7-item em{color:color-mix(in srgb,var(--w) 60%,#fff)}}

/* ===================== Pembaca Al-Qur'an: perbaikan kritik 2 Nov (25/40) ===================== */
#readerBody{min-height:100vh}                                   /* footer tidak terdorong dua kali saat memuat */
/* kepala surah satu suara: nama surah memakai huruf mushaf */
.surah-head .sh-ar{font-family:var(--font-quran);line-height:1.5}
.surah-head .surah-konsep{margin:14px 0 0}
.surah-head .surah-konsep>button{width:auto;margin-inline:auto;min-height:36px;font-size:13.5px;gap:8px}
/* strip pemutar: teks boleh berlipat, mode baca masuk ke strip yang sama */
.player{flex-wrap:wrap;border-radius:var(--r-lg);row-gap:10px}
.player-teks{flex:1 1 180px;min-width:0}
.player b{white-space:normal;overflow:visible}
.player .baca-mode{margin:0;padding:0;border:0;background:none;flex:0 0 auto}
.player .baca-mode .bm-label{display:none}
.player .baca-mode .seg{margin:0}
/* ritme ayat: jarak antarayat lebih lebar dari jarak baris Arab */
.ayat{padding:28px 0}
.ay-latin{margin-top:6px}
.ay-latin,.ay-id{max-width:68ch}
.ay-tafsir p{font-size:calc(var(--latin-size) - 1px);max-width:70ch}
.ay-tafsir p.tf-ar{font-family:var(--font-naskah);font-size:calc(var(--latin-size) + 5px);line-height:2;text-align:right;max-width:none}
/* baris alat: tidak meluap, target jempol, status buka-tutup terlihat */
.ay-tools{flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
.ay-tools .btn{white-space:nowrap}
.ay-tools .btn.is-on{background:var(--emerald-soft);border-color:var(--emerald);color:var(--emerald-ink)}
.ay-tools .btn[aria-busy="true"]{opacity:.6;cursor:progress}
@media (pointer:coarse){ .ay-tool{width:44px;height:44px} .ay-tools .btn{min-height:40px} }
/* roset nomor ayat & label tajwid terbaca */
:root:not([data-theme="dark"]) .tq-no{color:var(--gold)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tq-no{color:#e8c76a} }
.kata-chip u span{font-size:11.5px}
.kata-chip u.kosong{font-size:11.5px;opacity:1}
/* mode mushaf: ukuran sama dengan mode per ayat; sorotan tidak jadi pil hijau */
.mushaf-latin{font-size:calc(var(--latin-size) - 2px)}
.mushaf-id{font-size:var(--latin-size)}
.mu-ay.ayat-sorot{background:var(--gold-soft);box-shadow:none;margin:0;padding:0 2px;border-radius:4px;animation:none}
@media (prefers-reduced-motion:reduce){ .ayat-sorot{animation:none} }
/* penutup surah */
.surah-tutup{margin:28px 0 8px;padding:24px 18px;text-align:center;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.surah-tutup .st-ar{margin:0;font-family:var(--font-quran);font-size:clamp(22px,3.6vw,28px);line-height:1.8;color:var(--gold)}
.surah-tutup .st-teks{margin:4px 0 14px;color:var(--ink-soft);font-size:14.5px}
.surah-tutup .st-teks b{color:var(--ink)}
@media (max-width:600px){
  .surah-head{padding:16px 14px;margin-bottom:12px}
  .surah-head .sh-bis{margin-top:10px;padding-top:10px}
  .player{padding:10px 12px;margin-bottom:12px}
  #view-surah .ay-id, #view-surah .ay-latin, #view-surah .mushaf-id, #view-surah .mushaf-latin, #view-surah .ay-tafsir p:not(.tf-ar){text-align:left;hyphens:manual}
  .ay-id{line-height:1.7}
  .ayat{padding:22px 0}
}
@media (max-width:640px){ .mushaf-ar{font-size:calc(var(--arab-size) * .8)} }
.kata-irab{font-size:11.5px;color:color-mix(in srgb,var(--w) 70%,#000)}
:root[data-theme="dark"] .kata-irab{color:color-mix(in srgb,var(--w) 60%,#fff)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kata-irab{color:color-mix(in srgb,var(--w) 60%,#fff)}}
.kata-irab-ket{opacity:1;color:var(--ink-soft)}
:root[data-theme="dark"] .kata-chip u span.tj{color:color-mix(in srgb,currentColor 65%,#fff)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kata-chip u span.tj{color:color-mix(in srgb,currentColor 65%,#fff)}}
.surah-head .sh-ar,.surah-head .sh-bis{text-align:center}

/* ===== Graf & pohon: audit 2 Nov (sentuhan, sasaran, mode Atur letak) ===== */
/* Jaringan akar: bawaannya halaman tetap bisa digulir di atas grafik; mode Atur letak mengunci gestur untuk seret */
.tq-graf{touch-action:pan-y pinch-zoom}
.tq-graf.is-atur{touch-action:none}
.tq-graf.is-atur .tq-graf-svg{cursor:grab}
.tq-graf-kontrol button{width:40px;height:40px}
.tq-graf-atur{position:absolute;left:8px;top:8px;min-height:36px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.tq-graf.is-atur .tq-graf-atur{background:var(--emerald);border-color:var(--emerald);color:#fff}
.tq-graf-atur:focus-visible,.tq-graf-kontrol button:focus-visible{outline:3px solid var(--emerald);outline-offset:2px}
/* Medan semantik: tombol Atur letak menyala saat aktif */
.mj-atur.is-on{background:var(--emerald);border-color:var(--emerald);color:#fff}
.mj-svg.is-atur{cursor:grab}
/* Pohon materi: area sentuh tombol cabang 40px tanpa membesarkan lingkarannya */
.sj-tg::after{content:"";position:absolute;inset:-6px}
.sm-medan-gulir:focus-visible{outline:3px solid var(--emerald);outline-offset:2px;border-radius:var(--r-md)}
/* Mufasir: tombol dengar di baris judul bagian, bukan di dalam kartu */
.mf-blok-kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.mf-blok-kepala h4{margin:0}
.mf-blok-kepala .tq-dengar{margin:0;flex:none}

/* ===== Slot iklan (js/iklan.js). Tidak tampil sama sekali selama data/iklan.json "aktif": false ===== */
.iklan{display:block;margin:28px auto 8px;max-width:970px;text-align:center}
.iklan[hidden],.iklan.iklan-sembunyi{display:none!important}
.iklan-label{display:block;margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.iklan-adsense{min-height:120px}
.iklan-adsense:has(ins[data-ad-status="unfilled"]){display:none}
.iklan-sponsor{display:block;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.iklan-sponsor img{display:block;width:100%;height:auto}
.iklan-sponsor:focus-visible{outline:3px solid var(--emerald);outline-offset:3px}
.iklan-foot{padding:0 16px 20px;margin-top:0}
@media print{.iklan{display:none!important}}
.foot-bawah a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.iklan.iklan-tunggu{height:1px;margin:0;overflow:hidden;visibility:hidden}