@import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&family=Amiri:ital,wght@0,400;0,700;1,400&family=Mirza:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Scheherazade+New:wght@400;600;700&display=swap');
/* Hallmark · genre: modern-minimal · macrostructure: Type Specimen · design-system: design.md · designed-as-app
 * theme: Rattil shared · paper oklch(98.5% 0.004 248) · accent oklch(56% 0.135 245) brand-blue (cool)
 * display: Space Grotesk · body: Plus Jakarta Sans · mono: Space Mono · quran: KFGQPC HAFS Uthmanic (self-hosted)
 * ref: Tally (grid bg · blue shadow · framed cards) · pre-emit critique: P5 H5 E4 S5 R4 V5 */

@font-face{
  font-family:"KFGQPC HAFS";
  src:url("../fonts/UthmanicHafs1Ver18.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:block;
}

:root {
  --font-body:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:'Space Mono', monospace;
  --font-quran:'KFGQPC HAFS', 'Scheherazade New', 'Amiri', serif;
  --font-arabic:'Scheherazade New', 'Amiri', serif;
  --text-3xs:0.65rem; --text-2xs:0.72rem; --text-xs:0.78rem; --text-sm:0.88rem;
  --text-base:1rem; --text-lg:1.15rem; --text-xl:1.35rem; --text-2xl:1.65rem;
  --text-3xl:2.2rem; --text-4xl:2.8rem;
  --space-3xs:0.25rem; --space-2xs:0.4rem; --space-xs:0.6rem; --space-sm:0.9rem;
  --space-md:1.25rem; --space-lg:1.75rem; --space-xl:2.5rem; --space-2xl:3.5rem;
  --color-paper: oklch(98.5% 0.004 248);
  --color-paper-2: oklch(96.5% 0.006 248);
  --color-paper-3: oklch(94% 0.008 248);
  --color-surface: oklch(100% 0 0);
  --color-rule: oklch(88% 0.012 248);
  --color-rule-soft: oklch(93% 0.008 248);
  --color-neutral: oklch(48% 0.020 250);
  --color-muted: oklch(38% 0.022 250);
  --color-ink: oklch(18% 0.024 250);
  --color-accent: oklch(56% 0.135 245);
  --color-accent-strong: oklch(46% 0.145 245);
  --color-accent-soft: oklch(94% 0.025 245);
  --color-green-soft: oklch(94% 0.03 140);
  --color-glow-blue: oklch(90% 0.04 245);
  --color-accent-ink: oklch(100% 0 0);
  --color-focus: oklch(50% 0.140 245);
  --ease-out:cubic-bezier(0.16,1,0.3,1); --dur-short:200ms; --dur-mid:380ms; --dur-long:800ms;
  --rule-hair:1px; --measure:66ch; --radius-card:16px; --radius-pill:100px; --z-nav:200;
  --grid-line:color-mix(in oklab,var(--color-neutral) 14%,transparent);
  --grid-size:54px;
  --shadow-blue:0 22px 48px -26px oklch(56% 0.135 245/0.42), 0 3px 10px -5px oklch(56% 0.135 245/0.20);
  --shadow-blue-sm:0 10px 24px -16px oklch(56% 0.135 245/0.40), 0 1px 3px -1px oklch(56% 0.135 245/0.14);
}

/* Forced Dark Mode (via button or localStorage) */
html[data-theme="dark"],
:root[data-theme="dark"] {
  --color-paper:oklch(19% 0.020 255); --color-paper-2:oklch(22% 0.022 255); --color-paper-3:oklch(25% 0.024 255);
  --color-surface:oklch(24% 0.024 255); --color-rule:oklch(35% 0.020 255); --color-rule-soft:oklch(30% 0.020 255);
  --color-neutral:oklch(64% 0.020 252); --color-muted:oklch(74% 0.022 250); --color-ink:oklch(94% 0.010 250);
  --color-accent:oklch(68% 0.130 245); --color-accent-strong:oklch(74% 0.130 245); --color-accent-soft:oklch(30% 0.040 248); --color-green-soft:oklch(40% 0.110 140); --color-glow-blue:oklch(42% 0.115 245);
  --color-accent-ink:oklch(16% 0.02 250); --color-focus:oklch(70% 0.130 245);
  --grid-line:color-mix(in oklab,var(--color-neutral) 20%,transparent);
  --shadow-blue:0 24px 50px -26px oklch(0% 0 0/0.55), 0 0 0 1px oklch(68% 0.13 245/0.10);
  --shadow-blue-sm:0 12px 26px -18px oklch(0% 0 0/0.5), 0 0 0 1px oklch(68% 0.13 245/0.08);
}

/* System Dark Mode (when not forced light) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper:oklch(19% 0.020 255); --color-paper-2:oklch(22% 0.022 255); --color-paper-3:oklch(25% 0.024 255);
    --color-surface:oklch(24% 0.024 255); --color-rule:oklch(35% 0.020 255); --color-rule-soft:oklch(30% 0.020 255);
    --color-neutral:oklch(64% 0.020 252); --color-muted:oklch(74% 0.022 250); --color-ink:oklch(94% 0.010 250);
    --color-accent:oklch(68% 0.130 245); --color-accent-strong:oklch(74% 0.130 245); --color-accent-soft:oklch(30% 0.040 248); --color-green-soft:oklch(40% 0.110 140); --color-glow-blue:oklch(42% 0.115 245);
    --color-accent-ink:oklch(16% 0.02 250); --color-focus:oklch(70% 0.130 245);
    --grid-line:color-mix(in oklab,var(--color-neutral) 20%,transparent);
    --shadow-blue:0 24px 50px -26px oklch(0% 0 0/0.55), 0 0 0 1px oklch(68% 0.13 245/0.10);
    --shadow-blue-sm:0 12px 26px -18px oklch(0% 0 0/0.5), 0 0 0 1px oklch(68% 0.13 245/0.08);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
main{overflow-x:clip}
body{
  font-family:var(--font-body); color:var(--color-ink);
  font-size:var(--text-base); line-height:1.6; -webkit-font-smoothing:antialiased;
  background-color:var(--color-paper);
}
/* backdrop dijangkar di atas dokumen: grid kotak + glow biru,
   memudar ke bawah lewat mask — ikut menggulir, jadi perlahan hilang saat scroll */
/* glow tetap (ikut layar): biru kanan-atas + hijau kiri-bawah — selalu tampak, tengah tak kosong.
   Animasi: idle-drift (CSS) + hue mengikuti scroll (var --glow-hue dari JS). Ringan, GPU. */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58% 42% at 95% 0%, var(--color-glow-blue), transparent 62%),
    radial-gradient(54% 42% at 2% 100%, var(--color-green-soft), transparent 62%);
  filter:hue-rotate(var(--glow-hue,0deg));
  animation:glow-drift 15s ease-in-out infinite;
  will-change:transform,opacity,filter;
}
@keyframes glow-drift{
  0%{opacity:.8;transform:translate3d(0,0,0) scale(1)}
  30%{opacity:1;transform:translate3d(-4%,3%,0) scale(1.14)}
  60%{opacity:.9;transform:translate3d(3%,-2.5%,0) scale(1.07)}
  100%{opacity:.8;transform:translate3d(0,0,0) scale(1)}
}
@media (prefers-reduced-motion:reduce){body::before{animation:none;filter:none}}
/* grid kotak di atas, memudar saat scroll (efek layar pertama) */
body::after{content:"";position:absolute;top:0;left:0;right:0;height:160vh;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  background-position:top center;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 22%, transparent 82%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 22%, transparent 82%);
}
::selection{background:var(--color-accent);color:var(--color-accent-ink)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:2px}

.quran{font-family:var(--font-quran);direction:rtl;line-height:2.3;font-weight:400}
.ar{font-family:var(--font-arabic);direction:rtl}
.wrap{max-width:72rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.label{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.08em;text-transform:uppercase;color:var(--color-muted)}
.tnum{font-variant-numeric:tabular-nums lining-nums}

/* ————— Breadcrumb ————— */
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:.4em;
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;
  color:var(--color-muted);margin-bottom:var(--space-md)}
.breadcrumb .sep{color:var(--color-rule)}
.breadcrumb .cur{color:var(--color-ink);font-weight:600}
.breadcrumb .ar{font-family:var(--font-arabic);font-size:1.1em;letter-spacing:0}

/* ————— Masthead (N6) ————— */
.masthead{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);isolation:isolate;
  background:color-mix(in oklab,var(--color-paper) 92%,transparent);backdrop-filter:blur(12px);
  border-bottom:var(--rule-hair) solid var(--color-rule)}
body{padding-top:3.6rem}
html{scroll-padding-top:4rem}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding-block:var(--space-xs)}
.masthead .mark{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-display);font-size:var(--text-md);font-weight:700;letter-spacing:-0.01em;min-width:0;flex:1 1 auto}
.masthead .mark .v{color:var(--color-accent)}
.masthead a.mark{text-decoration:none;display:inline-flex;align-items:center;min-width:0}
.brand-logo{height:clamp(1.6em,4vw,2.3em);width:auto;display:block;flex:0 0 auto}
.brand-name{font-family:var(--font-display);font-size:clamp(0.82rem,3.6vw,var(--text-xl));font-weight:850;font-style:oblique 8deg;letter-spacing:0.02em;color:var(--color-muted);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-accent{
  background:linear-gradient(90deg,oklch(50% 0.18 25) 0%,oklch(65% 0.20 30) 40%,oklch(75% 0.15 20) 55%,oklch(50% 0.18 25) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:850;letter-spacing:0.02em;
  will-change:background-position;
  animation:shimmer 2.4s linear infinite}
@keyframes shimmer{0%{background-position:0% center}100%{background-position:200% center}}
@media (prefers-reduced-motion:reduce){.brand-accent{animation:none;background:none;-webkit-text-fill-color:oklch(50% 0.18 25);color:oklch(50% 0.18 25)}}
@media (prefers-color-scheme:dark){.brand-logo{filter:brightness(1.7) saturate(1.05)}}
.masthead .right{display:flex;gap:var(--space-md);align-items:center}
.masthead a{font-family:var(--font-display);color:var(--color-muted);text-decoration:none;font-size:var(--text-sm);font-weight:500;
  white-space:nowrap;padding-bottom:2px;border-bottom:2px solid transparent;
  transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
.masthead a:hover,.masthead a:focus-visible{color:var(--color-ink);border-color:var(--color-accent)}
@media(max-width:600px){.masthead .right a:not(.menu-btn){display:none}}
.hd-chip{display:inline-flex;align-items:center;gap:.35em;font-family:var(--font-display);font-size:.78rem;font-weight:600;
  color:var(--color-accent-strong);background:var(--color-accent-soft);
  border:1px solid color-mix(in oklab,var(--color-accent) 35%,transparent);border-radius:999px;padding:.35em .85em;
  text-decoration:none;white-space:nowrap;transition:border-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.hd-chip:hover,.hd-chip:focus-visible{border-color:var(--color-accent);transform:translateY(-1px)}

/* ————— Hamburger + Drawer ————— */
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:2.2em;height:2.2em;
  border:var(--rule-hair) solid var(--color-rule);border-radius:8px;background:var(--color-surface);
  cursor:pointer;color:var(--color-ink);flex:none;
  transition:border-color var(--dur-short) var(--ease-out),
             background var(--dur-short) var(--ease-out),
             transform var(--dur-short) var(--ease-out),
             border-radius var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-short) var(--ease-out);
  box-shadow: var(--shadow-blue-sm);
}
.menu-btn:hover{
  border-color:var(--color-accent);
  background:var(--color-accent-soft);
  transform: scale(1.04);
}
.menu-btn[aria-expanded="true"] {
  border-radius: 50%;
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  box-shadow: 0 0 0 3px oklch(from var(--color-accent) l c h / 0.15);
}
.menu-btn svg{width:1.1em;height:1.1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.menu-btn svg line {
  transform-origin: 12px 12px;
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.menu-btn[aria-expanded="true"] svg line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.menu-btn[aria-expanded="true"] svg line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.menu-btn[aria-expanded="true"] svg line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.drawer-overlay{position:fixed;inset:0;z-index:calc(var(--z-nav) + 1);background:oklch(0% 0 0/.2);
  backdrop-filter: blur(0px);-webkit-backdrop-filter: blur(0px);
  opacity:0;pointer-events:none;
  transition:opacity 280ms var(--ease-out), backdrop-filter 280ms var(--ease-out), -webkit-backdrop-filter 280ms var(--ease-out);
}
.drawer-overlay.open{
  opacity:1;
  pointer-events:auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.drawer{position:fixed;top:0;right:0;bottom:0;z-index:calc(var(--z-nav) + 2);
  width:min(22rem,90vw);background:var(--color-paper);
  border-left:var(--rule-hair) solid var(--color-rule);
  box-shadow:-12px 0 48px oklch(0% 0 0/.12);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer.open{transform:translateX(0)}

/* ————— Mode Presentasi: halaman bab materi-microteaching — satu entri per layar,
   fullscreen, biar guru/murid presentasi tanpa distraksi entri lain/chrome situs.
   Dibangun murni via JS (huruf.js), di-guard oleh keberadaan .mt-entri di #mt-content,
   jadi otomatis no-op di semua halaman lain (termasuk hub materi-microteaching.html
   yang tak punya entri sama sekali). Semua selector di-scope ke body.mt-present-on
   supaya tak pernah "bocor" nge-fullscreen-kan sesuatu di luar mode ini. ————— */
body.mt-present-on .masthead,
body.mt-present-on .drawer-overlay,
body.mt-present-on .drawer,
body.mt-present-on footer,
body.mt-present-on .mt-user-bar,
body.mt-present-on .mt-progress,
body.mt-present-on .mt-bab-intro,
body.mt-present-on .mt-babnav,
body.mt-present-on .mt-babnav-all,
body.mt-present-on .mt-entri{display:none}

body.mt-present-on .mt-entri.mt-present-current{
  /* flex column + justify-content:safe center -- entri pendek jadi center vertikal (bukan
     nempel atas dgn ruang kosong besar di bawah), tapi "safe" penting: kalau entrinya lebih
     tinggi drpd layar (dalil panjang + catatan audit), fallback ke start-align spy scroll
     dari atas normal -- tanpa "safe" murni justify-content:center bikin bagian ATAS entri
     panjang malah terpotong tak kebaca (bug klasik flexbox-center + overflow scroll). */
  display:flex;flex-direction:column;justify-content:safe center;align-items:center;
  position:fixed;inset:0;z-index:600;
  margin:0;border:0;border-radius:0;
  background:color-mix(in oklab, var(--bc-soft,var(--color-accent-soft)) 22%, var(--color-paper));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:5rem clamp(1.2rem,5vw,4rem) 6rem;
  animation:mt-present-in var(--dur-mid) var(--ease-out);
}
/* Batasi lebar isi slide ke ukuran baca nyaman (±52rem) supaya baris tak terlalu panjang di
   layar besar/proyektor — prinsip reading measure (45-75 char per baris). align-items:center
   di container + width:100% + max-width di children = center horizontal otomatis. */
body.mt-present-on .mt-entri.mt-present-current > *{
  width:100%;max-width:52rem;margin-inline:auto;
}
@keyframes mt-present-in{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  body.mt-present-on .mt-entri.mt-present-current{animation:none}
}
/* Ukuran font isi entri (h3/.mt-inti/dst) dipatok rem di style per-halaman, bukan em -- jadi
   TAK ikut membesar hanya lewat font-size di container ini, harus di-override eksplisit per
   elemen. Dibuat jauh lebih besar drpd mode baca biasa krn dibaca dari jarak/layar bersama,
   bukan dari dekat. Skala clamp() meniru pola yg sudah ada di huruf.css (.dalil-card .quran,
   .frasa .quran) supaya konsisten dgn cara situs ini membesarkan teks Arab di tempat lain. */
body.mt-present-on .mt-entri.mt-present-current > h3{
  font-size:clamp(1.7rem,1.3rem + 2vw,2.6rem);line-height:1.25;margin-bottom:1.1rem;
  color:var(--bc,var(--color-accent-strong));
}
/* Penanda geometris kecil (bintang 8-titik, motif klasik seni islami) di atas judul --
   warnanya ikut --bc per-bab spt elemen lain (mt-dalil-label dst), jadi tiap bab kerasa
   beda identitasnya saat presentasi. Pakai mask (bukan background-image biasa) supaya
   bentuknya tetap satu file SVG tapi warnanya ikut var(--bc) per halaman, bukan hardcode. */
body.mt-present-on .mt-entri.mt-present-current > h3::before{
  content:'';display:block;width:1.9rem;height:1.9rem;margin-bottom:.7rem;
  background:var(--bc,var(--color-accent-strong));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 13.61,8.12 19.07,4.93 15.88,10.39 22,12 15.88,13.61 19.07,19.07 13.61,15.88 12,22 8.39,15.88 4.93,19.07 8.12,13.61 2,12 8.12,10.39 4.93,4.93 8.39,8.12' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 13.61,8.12 19.07,4.93 15.88,10.39 22,12 15.88,13.61 19.07,19.07 13.61,15.88 12,22 8.39,15.88 4.93,19.07 8.12,13.61 2,12 8.12,10.39 4.93,4.93 8.39,8.12' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.mt-present-on .mt-entri.mt-present-current .mt-inti,
body.mt-present-on .mt-entri.mt-present-current .mt-poin,
body.mt-present-on .mt-entri.mt-present-current .mt-dalil-tr,
body.mt-present-on .mt-entri.mt-present-current .mt-note{
  font-size:clamp(1.2rem,1rem + 1vw,1.6rem);line-height:1.7;
}
body.mt-present-on .mt-entri.mt-present-current .mt-dalil-ar{
  font-size:clamp(1.7rem,1.3rem + 2.2vw,2.5rem);line-height:2;
}
body.mt-present-on .mt-entri.mt-present-current .mt-dalil-label,
body.mt-present-on .mt-entri.mt-present-current .mt-dalil-sub-label,
body.mt-present-on .mt-entri.mt-present-current .mt-sumber,
body.mt-present-on .mt-entri.mt-present-current .mt-dalil-ref{
  font-size:clamp(.85rem,.75rem + .4vw,1.05rem);
}
body.mt-present-on .mt-entri.mt-present-current .mt-dalil{
  padding:1.6rem 1.8rem 1.9rem;margin:1.4rem 0;
}
body.mt-present-on .mt-entri.mt-present-current .mt-poin{
  padding-left:3.2rem;
}
/* Sembunyikan tombol "Salin" saat presentasi — tidak relevan di mode live (audiens tak
   perlu menyalin teks dari proyektor), dan membebani layar yg seharusnya fokus 1 entri. */
body.mt-present-on .mt-dalil-copy{display:none}

.mt-present-bar,.mt-present-prev,.mt-present-next,.mt-present-end{display:none}

body.mt-present-on .mt-present-bar{
  display:flex;align-items:center;gap:var(--space-sm);
  position:fixed;top:0;left:0;right:0;z-index:601;
  padding:.65rem clamp(1rem,4vw,2rem);
  background:color-mix(in oklab,var(--color-paper) 90%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:var(--rule-hair) solid var(--color-rule);
}
/* Judul entri singkat di top bar — supaya audiens/presenter tahu topik slide saat ini.
   Disembunyikan di layar kecil (HP) supaya bar tidak sempit. */
.mt-present-title{flex:1 1 auto;font-family:var(--font-display);font-size:.82rem;font-weight:600;color:var(--color-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media(max-width:600px){.mt-present-title{display:none}}
.mt-present-exit{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:2.2rem;height:2.2rem;border-radius:999px;border:1px solid var(--color-rule);
  background:var(--color-surface);color:var(--color-ink);cursor:pointer;padding:0}
.mt-present-exit svg{width:1.1rem;height:1.1rem;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.mt-present-count{flex:0 0 auto;font-family:var(--font-mono);font-size:.78rem;color:var(--color-neutral);white-space:nowrap;font-variant-numeric:tabular-nums}
.mt-present-track{flex:1 1 auto;height:5px;border-radius:999px;background:color-mix(in oklab,var(--color-neutral) 16%,transparent);overflow:hidden}
.mt-present-fill{height:100%;width:0;border-radius:999px;background:var(--bc,var(--color-accent));transition:width var(--dur-short) var(--ease-out)}

body.mt-present-on .mt-present-prev,
body.mt-present-on .mt-present-next{
  display:flex;align-items:center;justify-content:center;
  position:fixed;bottom:1.4rem;z-index:601;padding:0;
  width:3.2rem;height:3.2rem;border-radius:999px;
  border:1px solid var(--color-rule);
  background:color-mix(in oklab,var(--color-surface) 82%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--color-ink);
  box-shadow:0 8px 24px -8px oklch(0% 0 0/.25);cursor:pointer;
  transition:border-color var(--dur-short) var(--ease-out),background var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out);
}
body.mt-present-on .mt-present-prev:hover,
body.mt-present-on .mt-present-next:hover,
body.mt-present-on .mt-present-prev:focus-visible,
body.mt-present-on .mt-present-next:focus-visible{
  border-color:var(--bc,var(--color-accent));
  color:var(--bc,var(--color-accent-strong));
  background:var(--color-surface);
  transform:scale(1.06);
  box-shadow:0 10px 28px -8px color-mix(in oklab,var(--bc,var(--color-accent)) 40%,oklch(0% 0 0/.3));
}
body.mt-present-on .mt-present-prev{left:1.4rem}
body.mt-present-on .mt-present-next{right:1.4rem}
body.mt-present-on .mt-present-prev[style*="hidden"],
body.mt-present-on .mt-present-next[style*="hidden"]{pointer-events:none}
.mt-present-prev svg,.mt-present-next svg{width:1.3rem;height:1.3rem;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}



/* ————— Komponen Visual Diagrams Microteaching (PPTX Extracted Visuals) ————— */
.mt-visual-card{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:1rem;padding:1.4rem 1.6rem;margin:1.4rem 0;box-shadow:0 2px 12px oklch(0% 0 0/.04)}
.mt-visual-title{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bc,var(--color-accent-strong));margin-bottom:.8rem;font-weight:600;display:flex;align-items:center;gap:.5em}

/* 1. Attention Curve Chart */
.mt-attention-container{display:flex;flex-direction:column;gap:1rem}
.mt-attention-svg{width:100%;height:auto;max-height:180px;overflow:visible}
.mt-attention-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem;font-size:.85rem}
.mt-attention-item{background:var(--color-paper-2);border-radius:.6rem;padding:.6rem .8rem;border-left:3px solid var(--bc,var(--color-accent))}
.mt-attention-item b{display:block;color:var(--color-ink);margin-bottom:.2rem}

/* 2. Teknik 15:60:15 Bar */
.mt-tech-bar-track{display:flex;height:2.2rem;border-radius:.6rem;overflow:hidden;font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:#fff;margin:.8rem 0}
.mt-tech-seg-1{width:15%;background:oklch(62% 0.18 145);display:flex;align-items:center;justify-content:center}
.mt-tech-seg-2{width:70%;background:oklch(55% 0.18 220);display:flex;align-items:center;justify-content:center}
.mt-tech-seg-3{width:15%;background:oklch(62% 0.18 25);display:flex;align-items:center;justify-content:center}
.mt-tech-grid{display:grid;grid-template-columns:1fr 2.5fr 1fr;gap:.8rem;font-size:.85rem;margin-top:.6rem}
@media(max-width:600px){.mt-tech-grid{grid-template-columns:1fr}}

/* 3. 4 Pilar WA Sehat Grid */
.mt-wa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.9rem;margin:1rem 0}
.mt-wa-card{background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:.8rem;padding:1rem;transition:border-color var(--dur-short) var(--ease-out)}
.mt-wa-card h4{margin:0 0 .3rem;font-size:.95rem;color:var(--bc,var(--color-accent-strong));display:flex;align-items:center;gap:.4em}
.mt-wa-card p{margin:0;font-size:.85rem;line-height:1.5;color:var(--color-muted)}

/* 4. Split Card Guru vs Google */
.mt-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:1.2rem 0}
@media(max-width:640px){.mt-compare-grid{grid-template-columns:1fr}}
.mt-compare-col{background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:1rem;padding:1.2rem 1.4rem}
.mt-compare-col.is-teacher{background:color-mix(in oklab,var(--bc-soft,var(--color-accent-soft)) 40%,var(--color-surface));border-color:var(--bc,var(--color-accent))}
.mt-compare-col h4{margin:0 0 .8rem;font-size:1.05rem;display:flex;align-items:center;gap:.5em;color:var(--color-ink)}
.mt-compare-list{list-style:none;padding:0;margin:0;font-size:.92rem;line-height:1.6}
.mt-compare-list li{margin-bottom:.4rem;position:relative;padding-left:1.2rem}
.mt-compare-list li::before{content:•;position:absolute;left:0;color:var(--bc,var(--color-accent-strong))}

/* 5. Timeline 3 Alur Halaqah */
.mt-timeline-steps{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:.9rem;margin:1.2rem 0}
@media(max-width:680px){.mt-timeline-steps{grid-template-columns:1fr}}
.mt-step-card{background:var(--color-surface);border:1px solid var(--color-rule);border-top:4px solid var(--bc,var(--color-accent));border-radius:.8rem;padding:1rem 1.1rem}
.mt-step-num{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bc,var(--color-accent-strong));margin-bottom:.3rem;display:block;font-weight:600}
.mt-step-card h4{margin:0 0 .4rem;font-size:1rem;color:var(--color-ink)}
.mt-step-card ul{margin:0;padding-left:1.1rem;font-size:.88rem;line-height:1.5}


/* 6. Flowchart & Decision Tree (Seni Mengoreksi & Process Flow) */
.mt-flow-container{display:flex;flex-direction:column;gap:.7rem;margin:1rem 0}
.mt-flow-step{display:flex;align-items:flex-start;gap:.9rem;background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:.8rem;padding:.9rem 1.1rem;position:relative}
.mt-flow-step.is-highlight{background:color-mix(in oklab,var(--bc-soft,var(--color-accent-soft)) 45%,var(--color-surface));border-color:var(--bc,var(--color-accent))}
.mt-flow-badge{flex:0 0 auto;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--bc,var(--color-accent));color:var(--color-accent-ink);display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:.85rem}
.mt-flow-body h4{margin:0 0 .2rem;font-size:.98rem;color:var(--color-ink)}
.mt-flow-body p{margin:0;font-size:.86rem;line-height:1.5;color:var(--color-muted)}

/* 7. Piramida / Hierarki 3 Level (Niat & Ruhiyah) */
.mt-pyramid{display:flex;flex-direction:column;gap:.5rem;margin:1.1rem 0}
.mt-pyr-level{border-radius:.7rem;padding:.8rem 1.1rem;color:#fff;text-align:center;font-size:.9rem;transition:transform var(--dur-short) var(--ease-out)}
.mt-pyr-level:hover{transform:scale(1.015)}
.mt-pyr-top{background:oklch(55% 0.18 145);font-weight:700}
.mt-pyr-mid{background:oklch(58% 0.15 220)}
.mt-pyr-base{background:oklch(50% 0.08 270);opacity:.85}

/* 8. 3 Pilar Segitiga Bekal Pengajar (The Teaching Triangle) */
.mt-tri-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1.1rem 0}
.mt-tri-card{background:var(--color-paper-2);border:1px solid var(--color-rule);border-top:3px solid var(--bc,var(--color-accent));border-radius:.8rem;padding:1.1rem}
.mt-tri-card h4{margin:0 0 .4rem;font-size:1rem;color:var(--bc,var(--color-accent-strong));display:flex;align-items:center;gap:.4em}
.mt-tri-card p{margin:0;font-size:.85rem;line-height:1.55;color:var(--color-muted)}

body.mt-present-on .mt-present-end.is-active{
  display:flex;align-items:center;justify-content:center;text-align:center;
  position:fixed;inset:0;z-index:600;
  background:color-mix(in oklab, var(--bc-soft,var(--color-accent-soft)) 22%, var(--color-paper));
  padding:2rem;animation:mt-present-in var(--dur-mid) var(--ease-out);
}
.mt-present-end-inner{max-width:30rem}
.mt-present-end-label{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bc,var(--color-accent-strong));margin:0 0 .5rem}
.mt-present-end-inner h3{font-family:var(--font-display);font-size:1.6rem;margin:0 0 1.6rem;color:var(--color-ink)}
.mt-present-end-actions{display:flex;flex-direction:column;gap:.7rem;align-items:stretch}
.mt-present-end-exit{padding:.75rem 1.3rem;border-radius:10px;border:1px solid var(--color-rule);
  background:var(--color-surface);color:var(--color-ink);font-weight:600;cursor:pointer;font-family:inherit;font-size:1rem}
.mt-present-end-next{padding:.75rem 1.3rem;border-radius:10px;border:0;
  background:var(--bc,var(--color-accent));color:var(--color-accent-ink);font-weight:600;
  text-decoration:none;display:inline-block}

.mt-present-toggle{font-family:inherit;font-size:.82rem;font-weight:600;color:var(--color-accent-strong);
  background:var(--color-accent-soft);border:1px solid transparent;border-radius:999px;
  padding:.4rem .9rem;cursor:pointer;transition:filter var(--dur-short) var(--ease-out)}
.mt-present-toggle:hover,.mt-present-toggle:focus-visible{filter:brightness(1.06)}

@media (max-width:600px){
  body.mt-present-on .mt-entri.mt-present-current{padding:4.5rem 1.1rem 6rem}
  body.mt-present-on .mt-present-prev,body.mt-present-on .mt-present-next{width:2.7rem;height:2.7rem;bottom:1rem}
  body.mt-present-on .mt-present-prev{left:1rem}
  body.mt-present-on .mt-present-next{right:1rem}
}

@media (prefers-reduced-motion:reduce){
  .mt-present-fill{transition:none}
}

.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-sm) var(--space-md);border-bottom:var(--rule-hair) solid var(--color-rule)}
.drawer-head span{font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;color:var(--color-ink)}
.drawer-close{display:inline-flex;align-items:center;justify-content:center;width:2em;height:2em;
  border:none;background:none;cursor:pointer;color:var(--color-muted);border-radius:6px;
  transition:color var(--dur-short) var(--ease-out),
             background var(--dur-short) var(--ease-out),
             transform var(--dur-short) var(--ease-out);
}
.drawer-close:hover{
  color:var(--color-ink);
  background:var(--color-paper-2);
  transform: rotate(90deg);
}
.drawer-close svg{width:1.1em;height:1.1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

.drawer-body{flex:1;overflow-y:auto;padding:var(--space-md)}
.drawer-section{margin-bottom:var(--space-md)}
.drawer-section:last-child{margin-bottom:0}
.drawer-section-title{font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-neutral);margin-bottom:0}
.drawer-nav{list-style:none;display:flex;flex-direction:column;gap:2px}
.drawer-nav a,
.drawer-nav button.drawer-link {
  display:flex;align-items:center;gap:.7em;padding:.55em .75em;border-radius:8px;
  font-family:var(--font-display);font-size:var(--text-sm);font-weight:500;
  color:var(--color-muted);text-decoration:none;
  background:none;border:none;width:100%;text-align:left;cursor:pointer;
  position: relative;
  transition:color var(--dur-short) var(--ease-out),
             background var(--dur-short) var(--ease-out),
             transform var(--dur-short) var(--ease-out),
             padding-left var(--dur-short) var(--ease-out);
}
.drawer-nav a:hover,
.drawer-nav button.drawer-link:hover {
  color:var(--color-ink);
  background:var(--color-paper-2);
  transform: translateX(4px);
}
.drawer-nav a svg,
.drawer-nav button.drawer-link svg {
  width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.65;
  transition:opacity var(--dur-short) var(--ease-out);
}
.drawer-nav a.is-active{
  color:var(--color-accent-strong);
  font-weight:700;
  background:var(--color-accent-soft);
  padding-left: 1.15em;
}
.drawer-nav a.is-active::before {
  content: '';
  position: absolute;
  left: 0.35em;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 12px;
  border-radius: 2px;
  background: var(--color-accent);
  animation: drawer-active-bar 0.3s var(--ease-out);
}
@keyframes drawer-active-bar {
  from { height: 0; opacity: 0; }
  to { height: 12px; opacity: 1; }
}
.drawer-nav a.is-disabled{opacity:.45;pointer-events:none}
.drawer-glyph{font-family:var(--font-quran);font-size:1.2em;margin-inline-start:.3em;opacity:.7}
.drawer-nav a.is-active .drawer-glyph{opacity:1}

/* ————— Accordion: bagian drawer yang bisa dibuka/tutup (hemat ruang) ————— */
.drawer-collapse .drawer-section-title{display:flex;align-items:center;justify-content:space-between;gap:.5em;
  cursor:pointer;user-select:none;-webkit-user-select:none;background:none;border:0;width:100%;text-align:left;
  padding:.2em 0;color:inherit}
.drawer-chevron{width:1.05em;height:1.05em;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  flex:none;transition:transform 200ms var(--ease-out)}
.drawer-collapse.is-closed .drawer-chevron{transform:rotate(-90deg)}
.drawer-collapse-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows 260ms var(--ease-out), visibility 260ms var(--ease-out), margin-top 260ms var(--ease-out);margin-top:var(--space-xs);overflow:hidden}
.drawer-collapse.is-closed .drawer-collapse-body{grid-template-rows:0fr;margin-top:0;visibility:hidden}
.drawer-collapse-body>div{overflow:hidden;min-height:0}
.drawer-subgroup{margin-bottom:var(--space-2xs)}
.drawer-subgroup:last-child{margin-bottom:0}
.drawer-subhead{display:flex;align-items:center;justify-content:space-between;gap:.5em;cursor:pointer;
  user-select:none;-webkit-user-select:none;background:none;border:0;width:100%;text-align:left;
  padding:.5em .75em;border-radius:8px;font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;color:var(--color-ink);
  --mk-c:.13;transition:background var(--dur-short) var(--ease-out)}
.drawer-subhead:hover{background:var(--color-paper-2)}
.drawer-subgroup:not(.is-closed) .drawer-subhead{background:oklch(97% calc(var(--mk-c)*0.3) var(--mk-h,245))}
.drawer-subhead-label{display:flex;align-items:center;gap:.6em;min-width:0}
.mk-dot{width:.55em;height:.55em;border-radius:50%;flex:none;background:oklch(62% var(--mk-c,.13) var(--mk-h,245))}
.drawer-subhead .drawer-chevron{width:.95em;height:.95em;color:var(--color-neutral)}
.drawer-subgroup.is-closed .drawer-chevron{transform:rotate(-90deg)}
.drawer-subgroup .drawer-collapse-body{margin-top:0}
.drawer-subgroup .drawer-nav{padding:.15em .3em .4em}
.drawer-note-soon{font-size:var(--text-sm);color:var(--color-muted);padding:.55em .75em;font-style:italic}

.drawer-setting{display:flex;align-items:center;justify-content:space-between;
  padding:.6em .75em;border-radius:8px;gap:var(--space-sm)}
.drawer-setting:hover{background:var(--color-paper-2)}
.drawer-setting-label{font-family:var(--font-display);font-size:var(--text-sm);font-weight:500;color:var(--color-ink)}
.drawer-setting-desc{font-size:var(--text-xs);color:var(--color-muted);margin-top:1px}
/* toggle switch */
.toggle{position:relative;width:2.6em;height:1.4em;flex:none}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-track{display:block;width:100%;height:100%;background:var(--color-rule);border-radius:var(--radius-pill);
  transition:background var(--dur-short) var(--ease-out);cursor:pointer}
.toggle input:checked + .toggle-track{background:var(--color-accent)}
.toggle-thumb{position:absolute;top:.15em;left:.15em;width:1.1em;height:1.1em;
  background:#fff;border-radius:50%;box-shadow:0 1px 3px oklch(0% 0 0/.2);
  transition:transform var(--dur-short) var(--ease-out);pointer-events:none}
.toggle input:checked ~ .toggle-thumb{transform:translateX(1.2em)}
html[data-theme="dark"] .drawer{background:var(--color-paper)}
html[data-theme="dark"] .toggle-thumb{background:var(--color-ink)}
html[data-theme="dark"] .drawer-subgroup:not(.is-closed) .drawer-subhead{background:oklch(28% calc(var(--mk-c)*0.4) var(--mk-h,245))}
html[data-theme="dark"] .mk-dot{background:oklch(72% var(--mk-c,.13) var(--mk-h,245))}
@media (prefers-color-scheme:dark){
  .drawer{background:var(--color-paper)}
  .toggle-thumb{background:var(--color-ink)}
  .drawer-subgroup:not(.is-closed) .drawer-subhead{background:oklch(28% calc(var(--mk-c)*0.4) var(--mk-h,245))}
  .mk-dot{background:oklch(72% var(--mk-c,.13) var(--mk-h,245))}
}

/* ————— Hero: judul (kiri) + gambar makhraj (kanan) — keduanya di layar pertama ————— */
.hero{padding-block:var(--space-lg)}
.hero-grid{display:grid;grid-template-columns:1.15fr minmax(0,22rem);gap:clamp(1.5rem,5vw,3.5rem);align-items:start}
.hero-lead{text-align:start;min-width:0}
/* chip makhraj — warna beda tiap makhraj (reusable: set kelas .mk-<makhraj>) */
.mk-chip{display:inline-flex;align-items:center;gap:.6em;margin-bottom:var(--space-md);--mk-c:0.13;
  font-family:var(--font-mono);font-size:1rem;font-weight:700;line-height:1;letter-spacing:.03em;text-transform:uppercase;
  padding:.62em 1.1em;border-radius:var(--radius-pill);
  background:oklch(95% calc(var(--mk-c)*0.32) var(--mk-h));
  color:oklch(42% var(--mk-c) var(--mk-h));
  border:1.5px solid oklch(86% calc(var(--mk-c)*0.5) var(--mk-h))}
.mk-chip .dot{width:.6em;height:.6em;border-radius:50%;flex:none;background:oklch(60% var(--mk-c) var(--mk-h))}
.mk-jauf{--mk-h:305}
.mk-halq{--mk-h:200}
.mk-lisan{--mk-h:70;--mk-c:0.15}
.mk-syafatan{--mk-h:25;--mk-c:0.14}
.mk-khaisyum{--mk-h:150}
@media (prefers-color-scheme: dark){
  .mk-chip{background:oklch(32% calc(var(--mk-c)*0.55) var(--mk-h));
    color:oklch(85% calc(var(--mk-c)*0.62) var(--mk-h));
    border-color:oklch(42% calc(var(--mk-c)*0.5) var(--mk-h))}
  .mk-chip .dot{background:oklch(72% calc(var(--mk-c)*0.8) var(--mk-h))}
}
.specimen{font-family:var(--font-quran);direction:rtl;text-align:left;font-size:clamp(6rem,16vw,11rem);line-height:1;color:var(--color-ink);font-weight:400;
  clip-path:inset(0 0 105% 0);animation:unmask var(--dur-long) var(--ease-out) 120ms forwards}
@keyframes unmask{to{clip-path:inset(0 0 -30% 0)}}
.hero-lead .name{font-family:var(--font-display);margin-top:var(--space-2xs);font-size:var(--text-3xl);font-weight:700;letter-spacing:-0.03em}
.hero-lead .name .ar{font-family:var(--font-arabic);font-size:1.05em;margin-inline-start:0.3em;color:var(--color-muted);font-weight:400}
.hero-lead .foundry{max-width:48ch;margin-top:var(--space-sm);color:var(--color-muted);font-size:var(--text-base)}
.hero-lead .foundry b{color:var(--color-ink);font-weight:600}
/* notes: tips pelafalan + kesalahan umum */
.note{margin-top:var(--space-md)}
.rujukan-teaser{display:block;margin-top:var(--space-md);background:var(--color-surface);border:var(--rule-hair) solid var(--color-rule);
  border-radius:var(--radius-card);padding:var(--space-md);text-decoration:none;box-shadow:var(--shadow-blue-sm);
  transition:transform var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
.rujukan-teaser:hover,.rujukan-teaser:focus-visible{transform:translateY(-2px);border-color:var(--color-accent)}
.rujukan-teaser h2{font-family:var(--font-display);font-size:var(--text-md);font-weight:700;color:var(--color-ink);margin:.5em 0 .3em}
.rujukan-teaser p{color:var(--color-muted);font-size:var(--text-base);line-height:1.6;max-width:60ch}
.rujukan-teaser p b{color:var(--color-ink);font-weight:600}
.rujukan-teaser .go{display:inline-block;margin-top:.6em;font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:var(--color-accent-strong)}
.hero-lead > .note-tip{margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:var(--rule-hair) solid var(--color-rule-soft)}
.note-label{display:inline-block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;
  padding:.34em .75em;border-radius:var(--radius-pill);margin-bottom:var(--space-2xs)}
.note-tip .note-label{color:var(--color-accent-strong);background:var(--color-accent-soft)}
.note-warn .note-label{color:oklch(46% .15 25);background:oklch(95% .03 25)}
.note p{color:var(--color-muted);font-size:var(--text-base);line-height:1.6;max-width:54ch}
.note b{color:var(--color-ink);font-weight:600}
.note ul{list-style:none;margin-top:var(--space-2xs);display:flex;flex-direction:column;gap:.4em;max-width:54ch}
.note li{position:relative;padding-inline-start:1.1em;color:var(--color-muted);font-size:var(--text-base);line-height:1.55}
.note-warn li::before{content:"•";position:absolute;inset-inline-start:0;color:oklch(58% .16 25);font-weight:700}
.ex-word{font-size:1.15em;line-height:1.8;color:var(--color-ink);margin-inline:0.2em}
.ex-src{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-neutral);letter-spacing:.04em}
/* kartu beda ه ≠ ح */
.vs-card{margin-top:var(--space-md);background:var(--color-surface);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);box-shadow:var(--shadow-blue-sm);padding:var(--space-md)}
.vs-title{display:block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral);margin-bottom:var(--space-sm)}
.vs-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-sm)}
.vs-col{text-align:center;min-width:0}
.vs-glyph{font-family:var(--font-quran);direction:rtl;font-size:clamp(1.4rem,7vw,2.4rem);line-height:1.2;color:var(--color-ink);overflow-wrap:break-word;word-break:break-word}
.vs-name{font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);margin-top:.15em}
.vs-desc{font-size:var(--text-sm);color:var(--color-muted);line-height:1.5;margin-top:.3em}
.vs-sep{font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);color:var(--color-accent-strong);line-height:1;display:flex;align-items:center;justify-content:center;align-self:center}
@media(max-width:420px){.vs-grid{grid-template-columns:1fr}.vs-sep{transform:rotate(90deg);padding:.3em 0}}
/* kartu sorotan kata — dipakai saat huruf tak punya pasangan makhraj/kekeliruan yang wajar */
.zc-kata{--zc-h:330;--zc-c:0.14}
.kata-card{display:flex;gap:var(--space-md);align-items:center}
.kata-glyph{font-family:var(--font-quran);direction:rtl;font-size:clamp(1.6rem,8vw,2.6rem);line-height:1.2;color:var(--color-ink);flex-shrink:0}
.kata-body{min-width:0}
.kata-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);color:var(--color-ink)}
.kata-desc{font-size:var(--text-sm);color:var(--color-muted);line-height:1.55;margin-top:.3em;max-width:54ch}
.kata-src{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-neutral);letter-spacing:.04em;margin-top:.4em;display:block}
@media(max-width:420px){.kata-card{flex-direction:column;text-align:center}}
@media (prefers-color-scheme:dark){.note-warn .note-label{color:oklch(83% .1 25);background:oklch(32% .06 25)}}

/* ————— Zone chip — pembeda visual tiap zona konten ————— */
/* Reuse pola --mk-h/--mk-c; tiap zona punya hue semantik sendiri */
.zone-chip{display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;line-height:1;
  letter-spacing:.07em;text-transform:uppercase;
  padding:.38em .85em;border-radius:var(--radius-pill);
  background:oklch(94% calc(var(--zc-c,0.12)*0.28) var(--zc-h,245));
  color:oklch(40% var(--zc-c,0.12) var(--zc-h,245));
  border:1.5px solid oklch(85% calc(var(--zc-c,0.12)*0.45) var(--zc-h,245));
  margin-bottom:var(--space-xs)}
.zone-chip svg{width:.9em;height:.9em;flex:none;fill:none;stroke-width:2;
  stroke:oklch(50% var(--zc-c,0.12) var(--zc-h,245));
  stroke-linecap:round;stroke-linejoin:round}
.zc-makhraj{--zc-h:200;--zc-c:0.13}
.zc-sifat  {--zc-h:245;--zc-c:0.13}
.zc-tip    {--zc-h:150;--zc-c:0.13}
.zc-warn   {--zc-h:50; --zc-c:0.15}
.zc-vs     {--zc-h:25; --zc-c:0.14}
.zc-bentuk {--zc-h:245;--zc-c:0.04}
@media (prefers-color-scheme:dark){
  .zone-chip{
    background:oklch(30% calc(var(--zc-c,0.12)*0.5) var(--zc-h,245));
    color:oklch(84% calc(var(--zc-c,0.12)*0.6) var(--zc-h,245));
    border-color:oklch(40% calc(var(--zc-c,0.12)*0.5) var(--zc-h,245))}
  .zone-chip svg{stroke:oklch(72% var(--zc-c,0.12) var(--zc-h,245))}
}

/* ————— Makhraj + Sifat group ————— */
.facts{margin-top:var(--space-md);display:flex;flex-direction:column;gap:var(--space-sm)}
.facts-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
  padding-top:var(--space-sm);border-top:var(--rule-hair) solid var(--color-rule)}
.facts-title{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral)}
.sifat-title{display:block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral);margin-bottom:var(--space-2xs)}
/* ————— Sifat: chip link + mode kuis (sembunyikan/tampilkan) ————— */
.sifat-block{min-width:0}
.sifat-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-bottom:var(--space-sm);flex-wrap:wrap}
.sifat-meta{display:flex;flex-direction:column;gap:2px}
.sifat-label{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral)}
.makhraj-meta{font-size:var(--text-sm);color:var(--color-muted)}
.makhraj-meta b{color:var(--color-ink);font-weight:600}
.sifat-toggle{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;
  color:var(--color-ink);background:var(--color-surface);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-pill);
  padding:.5em .95em;cursor:pointer;transition:border-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
.sifat-toggle:hover{border-color:var(--color-accent);color:var(--color-accent-strong)}
.sifat-toggle svg{width:1.1em;height:1.1em;flex:none}
.sifat-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
.sifat-chip{display:inline-flex;align-items:center;gap:.4em;justify-content:center;min-width:3.2em;
  font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);
  --sf-h:245;--sf-c:0.13;
  color:oklch(38% var(--sf-c) var(--sf-h));
  background:oklch(93% calc(var(--sf-c)*0.25) var(--sf-h));
  border:1.5px solid oklch(83% calc(var(--sf-c)*0.4) var(--sf-h));
  border-radius:var(--radius-pill);
  padding:.52em 1.1em;text-decoration:none;
  transition:border-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out)}
.sifat-chip:hover{border-color:oklch(55% var(--sf-c) var(--sf-h));transform:translateY(-2px);
  box-shadow:0 3px 10px oklch(70% var(--sf-c) var(--sf-h)/.2)}
.sifat-chip::after{content:"↗";font-size:.78em;opacity:.45;margin-inline-start:.1em}
/* warna semantik per sifat */
.sifat-chip[href*="hams"]    {--sf-h:200;--sf-c:0.13} /* teal   — nafas */
.sifat-chip[href*="rakhawah"]{--sf-h:245;--sf-c:0.13} /* biru   — mengalir */
.sifat-chip[href*="jahr"]    {--sf-h:150;--sf-c:0.13} /* hijau  — kuat */
.sifat-chip[href*="syiddah"] {--sf-h:25; --sf-c:0.14} /* rose   — tertahan */
.sifat-chip[href*="tawassuth"]{--sf-h:280;--sf-c:0.11}/* ungu   — tengah */
.sifat-chip[href*="istila"]  {--sf-h:50; --sf-c:0.15} /* amber  — tebal */
.sifat-chip[href*="istifal"] {--sf-h:200;--sf-c:0.11} /* teal redup */
.sifat-chip[href*="ithbaq"]  {--sf-h:30; --sf-c:0.14} /* oranye */
.sifat-chip[href*="infitah"] {--sf-h:150;--sf-c:0.12} /* hijau  — terbuka */
.sifat-chip[href*="idzlaq"]  {--sf-h:170;--sf-c:0.12} /* hijau-teal */
.sifat-chip[href*="ishmat"]  {--sf-h:280;--sf-c:0.12} /* ungu   — berat */
@media (prefers-color-scheme:dark){
  .sifat-chip{
    color:oklch(84% calc(var(--sf-c)*0.65) var(--sf-h));
    background:oklch(28% calc(var(--sf-c)*0.45) var(--sf-h));
    border-color:oklch(38% calc(var(--sf-c)*0.5) var(--sf-h))}
  .sifat-chip:hover{box-shadow:0 3px 10px oklch(50% var(--sf-c) var(--sf-h)/.3)}
}
.sifat-block[data-hidden="true"] .sifat-chip{pointer-events:none;background:var(--color-paper-2);border-color:var(--color-rule);position:relative}
.sifat-block[data-hidden="true"] .sifat-chip .lbl,.sifat-block[data-hidden="true"] .sifat-chip::after{opacity:0}
.sifat-block[data-hidden="true"] .sifat-chip::before{content:"؟";position:absolute;inset:0;display:grid;place-items:center;color:var(--color-neutral);font-weight:700}
.sifat-hint{display:none;font-size:var(--text-xs);color:var(--color-muted);font-style:italic;margin-top:var(--space-sm)}
.sifat-block[data-hidden="true"] .sifat-hint{display:block}

.hero-side{min-width:0;display:flex;flex-direction:column;gap:var(--space-md);
  position:sticky;top:calc(var(--space-xl) + 3rem);align-self:start}
/* peta makhraj + huruf se-makhraj (mengisi ruang kanan, tahap "kenali huruf") */
.mkmap{background:var(--color-surface);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);box-shadow:var(--shadow-blue-sm);padding:var(--space-md)}
.mkmap-title,.samemk-title{display:block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral)}
.lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xs);margin-top:var(--space-sm)}
.lf{text-align:center;padding:.7em .4em;border:var(--rule-hair) solid var(--color-rule);border-radius:12px;background:var(--color-paper);cursor:pointer;
  transition:border-color var(--dur-short) var(--ease-out),background var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.lf:hover,.lf:focus-visible,.lf.is-active{border-color:var(--color-accent);background:var(--color-accent-soft);transform:translateY(-1px);outline:none}
.lf-glyph{font-family:var(--font-quran);direction:rtl;font-size:2.3rem;line-height:1.35;color:var(--color-ink)}
.lf-label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.03em;text-transform:uppercase;color:var(--color-neutral);margin-top:.25em}
.lf-preview{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-top:var(--space-2xs);
  padding:.5em .8em;border-radius:10px;background:var(--color-paper-2);min-height:2.6em}
.lf-preview .p{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--color-neutral)}
.lf-preview .w{font-family:var(--font-quran);direction:rtl;font-size:1.7rem;color:var(--color-ink);line-height:1}
.samemk{margin-top:var(--space-md);padding-top:var(--space-sm);border-top:var(--rule-hair) solid var(--color-rule)}
.samemk-chips{display:flex;flex-wrap:wrap;gap:.4em;margin-top:var(--space-2xs)}
.hchip{font-family:var(--font-quran);font-size:1.55rem;line-height:1;min-width:1.9em;height:1.9em;display:inline-flex;align-items:center;justify-content:center;
  border:var(--rule-hair) solid var(--color-rule);border-radius:10px;color:var(--color-neutral);background:var(--color-paper);text-decoration:none;transition:border-color var(--dur-short) var(--ease-out)}
.hchip.is-active{border-color:var(--color-accent);color:var(--color-ink);background:var(--color-accent-soft)}
.dalil-card{background:var(--color-surface);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);
  box-shadow:var(--shadow-blue-sm);padding:var(--space-md);text-align:start;transition:all var(--dur-short) var(--ease-out)}
.dalil-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-xs);margin-bottom:var(--space-sm)}
.dalil-chip{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-strong);background:var(--color-accent-soft);
  border-radius:var(--radius-pill);padding:.42em .8em;margin-bottom:0}
.dalil-chip .dot{width:.5em;height:.5em;border-radius:50%;background:var(--color-accent);flex:none}
.dalil-audio-btn{display:inline-flex;align-items:center;gap:.4em;background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);
  color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-xs);font-weight:700;padding:.35em .8em;border-radius:var(--radius-pill);
  cursor:pointer;transition:all .18s var(--ease-out);user-select:none}
.dalil-audio-btn svg{width:14px;height:14px;fill:currentColor;flex:none;transition:transform .18s var(--ease-out)}
.dalil-audio-btn:hover{background:var(--color-surface);border-color:var(--color-accent);color:var(--color-accent-strong);box-shadow:var(--shadow-blue-sm);transform:translateY(-1px)}
.dalil-audio-btn.is-playing{background:#fee2e2;border-color:#ef4444;color:#b91c1c;box-shadow:0 2px 8px rgba(239,68,68,0.25);animation:dalilPulse 1.5s infinite alternate}
[data-theme="dark"] .dalil-audio-btn.is-playing,
.dark-theme .dalil-audio-btn.is-playing{background:rgba(239,68,68,0.2);border-color:#ef4444;color:#fca5a5}
@keyframes dalilPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,0.4)}100%{box-shadow:0 0 0 6px rgba(239,68,68,0)}}

.dalil-card .quran{font-size:clamp(1.5rem,3.4vw,2rem);color:var(--color-ink);line-height:2;transition:filter var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);cursor:pointer;border-radius:8px;padding:.1em .3em}
.dalil-card .quran:hover{background:rgba(0,0,0,0.02);color:var(--color-accent-strong)}
[data-theme="dark"] .dalil-card .quran:hover,
.dark-theme .dalil-card .quran:hover{background:rgba(255,255,255,0.04)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .dalil-audio-btn.is-playing{background:rgba(239,68,68,0.2);border-color:#ef4444;color:#fca5a5}
  :root:not([data-theme="light"]) .dalil-card .quran:hover{background:rgba(255,255,255,0.04)}
}
.dalil-card.is-playing .quran{color:var(--color-accent-strong);background:var(--color-accent-soft);box-shadow:0 0 0 2px var(--color-accent)}
.dalil-card figcaption{margin-top:var(--space-2xs);font-size:var(--text-sm);color:var(--color-muted)}
.dalil-card[data-hidden="true"] .quran{filter:blur(9px);opacity:.5;user-select:none;pointer-events:none}
.dalil-card[data-hidden="true"] .dalil-audio-btn{display:none}
.dalil-card[data-hidden="true"] figcaption{visibility:hidden}

/* makhraj figure — Tally-framed */
.makhraj{margin:0;width:100%}
.makhraj-frame{position:relative;background:var(--color-surface);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);
  box-shadow:var(--shadow-blue);padding:var(--space-xs);overflow:hidden}
/* object-fit:contain (bukan cover) -- WAJIB, jangan diganti balik ke cover. Alasan: gambar
   makhraj (mis. makhraj-jim.jpg) punya label huruf Arab dicetak di pojok bawah gambarnya
   sendiri. Dengan cover + max-height, pada rentang lebar tertentu (kira2 520-859px, saat
   container jadi lebih landscape drpd rasio asli gambar ~0.93) bagian bawah gambar ikut
   ter-crop krn object-position:top mempertahankan atas & membuang kelebihan di bawah --
   persis di mana label itu berada. contain menjamin seluruh gambar (termasuk label) SELALU
   utuh terlihat, hanya menyisakan sedikit ruang kosong di sisi yg berlebih, bukan memotong
   konten. Berlaku utk semua huruf-*.html yg pakai .makhraj-frame, bukan cuma jim. */
.makhraj-frame img{display:block;width:100%;height:auto;max-height:480px;object-fit:contain;object-position:center top;border-radius:calc(var(--radius-card) - 4px)}
/* Al-Jauf: dua gambar berdampingan di bawah Alif */
.jauf-makhraj-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-top:var(--space-sm)}
.jauf-makhraj-row .makhraj{margin:0}
/* Al-Jauf: catatan di samping kartu bentuk huruf */
.jauf-mkmap-row{display:flex;gap:var(--space-md);align-items:start}
.jauf-mkmap-row .note{flex:1;min-width:0}
.jauf-mkmap-row .mkmap{flex:1;min-width:0}
@media (prefers-reduced-motion:reduce){.mk-point{animation:none}}
.makhraj figcaption{margin-top:var(--space-sm);font-size:var(--text-sm);color:var(--color-muted);line-height:1.55;text-align:center}
.makhraj figcaption b{color:var(--color-ink);font-weight:600}
.makhraj figcaption .ar{font-size:1.05em;color:var(--color-ink)}
.makhraj .cite{display:block;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-neutral);margin-top:var(--space-2xs)}

/* ————— Section caption ————— */
.movement{padding-block:var(--space-xl)}
.mv-head{text-align:center;margin-bottom:var(--space-lg)}
.mv-head h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;letter-spacing:-0.02em;margin-top:0}
.mv-head p{color:var(--color-muted);font-size:var(--text-base);max-width:56ch;margin:var(--space-xs) auto 0}

/* ————— Rujukan: daftar Tadrib/Soal Tanya Jawab bernomor (kartu + lencana bulat) —
   dipakai di halaman referensi (pengantar-tahsin, itmamul-harakat, dst.) supaya
   daftar polos <ol><li> tampil setara kualitasnya dgn hamzah-wasal/shad-sin. ————— */
.rj-quiz{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.rj-quiz li{display:flex;gap:.85rem;align-items:flex-start;background:var(--color-surface);border:var(--rule-hair) solid var(--color-rule);border-radius:.9rem;padding:.85rem 1.05rem;transition:border-color var(--dur-short) var(--ease-out)}
.rj-quiz li:hover{border-color:color-mix(in oklab,var(--color-accent) 42%,var(--color-rule))}
.rj-quiz .no{flex:0 0 auto;width:1.65rem;height:1.65rem;border-radius:50%;display:grid;place-items:center;background:var(--color-accent-soft);color:var(--color-accent-strong);font-family:var(--font-mono);font-weight:700;font-size:.78rem;margin-top:.05rem}
.rj-quiz .txt{flex:1;min-width:0;line-height:1.56;font-size:.95rem;color:var(--color-ink)}
.rj-quiz .txt details{margin-top:.5em}
.rj-quiz .txt summary{cursor:pointer;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.03em;color:var(--color-accent-strong);font-weight:600;user-select:none}
.rj-quiz .txt summary:hover,.rj-quiz .txt summary:focus-visible{text-decoration:underline}
.rj-quiz .txt details[open] summary{margin-bottom:.4em}
.rj-quiz .txt details p{background:var(--color-paper-2);border-radius:10px;padding:.7em .9em;font-size:.92rem;color:var(--color-ink);margin:0}

/* ————— Pager antar-huruf (dipasang via JS, lihat huruf.js) ————— */
.rq-pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-sm);margin:var(--space-xl) auto 0;max-width:46rem;padding:var(--space-md) clamp(1.25rem,4vw,3rem) 0;border-top:var(--rule-hair) solid var(--color-rule)}
/* dir (label+panah) & name (huruf) sejajar satu baris -- bukan tumpuk atas-bawah --
   supaya label "Sebelumnya/Selanjutnya" terasa jadi satu kesatuan dgn huruf tujuannya,
   bukan dua info terpisah. */
.rq-pager-link{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5em .7em;flex:1 1 12rem;max-width:22rem;padding:var(--space-xs) var(--space-sm);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-surface);text-decoration:none;transition:border-color var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.rq-pager-link:hover,.rq-pager-link:focus-visible{border-color:var(--color-accent);box-shadow:var(--shadow-blue);transform:translateY(-3px);outline:none}
.rq-pager-link:active{transform:translateY(-1px);transition-duration:80ms}
/* row-reverse: urutan DOM tetap dir lalu name, tapi tampil huruf dulu baru label,
   supaya panah "selanjutnya" tetap ada di ujung terluar (kanan), simetris dgn
   panah "sebelumnya" di ujung kiri. */
.rq-pager-next{flex-direction:row-reverse;justify-content:flex-start} /* flex-start di row-reverse = nempel kanan */
.rq-pager-next:only-child{margin-inline-start:auto} /* huruf pertama: cuma ada next, tetap nempel kanan */
.rq-pager-dir{display:inline-flex;align-items:center;gap:.3em;flex-shrink:0;white-space:nowrap;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);text-transform:uppercase;letter-spacing:.04em}
/* Panah maju/mundur -- SVG (bukan cuma karakter panah teks) biar tajam & bisa
   diperbesar bebas, dipisah jadi elemen sendiri (lihat huruf.js) supaya bisa idle
   "menghela" pelan terus-menerus + "mengintip" lebih jauh ke arah tujuan saat hover. */
.rq-pager-arrow{width:1.4em;height:1.4em;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  animation-duration:1.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
  transition:transform var(--dur-short) var(--ease-out)}
.rq-pager-prev .rq-pager-arrow{animation-name:rq-pager-arrow-hint-prev}
.rq-pager-next .rq-pager-arrow{animation-name:rq-pager-arrow-hint-next}
/* animation:none (bukan cuma animation-play-state:paused) -- kalau cuma di-pause,
   animasi tetap "menguasai" properti transform di titik terakhirnya dan menang atas
   aturan :hover transform di bawah ini; animation:none melepas properti transform
   sepenuhnya supaya transition & :hover bisa ambil alih. */
.rq-pager-link:hover .rq-pager-arrow,.rq-pager-link:focus-visible .rq-pager-arrow{animation:none}
.rq-pager-prev:hover .rq-pager-arrow,.rq-pager-prev:focus-visible .rq-pager-arrow{transform:translateX(-5px)}
.rq-pager-next:hover .rq-pager-arrow,.rq-pager-next:focus-visible .rq-pager-arrow{transform:translateX(5px)}
@keyframes rq-pager-arrow-hint-prev{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
@keyframes rq-pager-arrow-hint-next{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.rq-pager-arrow{animation:none}}
/* display:flex + align-items:center supaya nama Latin & glyph Arab (beda metrik
   font sepenuhnya) sejajar rapi di tengah baris -- bukan mengandalkan baseline
   bawaan yang bikin glyph Arab terlihat "mengambang" naik/turun dari teks Latin. */
.rq-pager-name{display:flex;align-items:center;gap:.4em;font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--color-ink)}
.rq-pager-name .ar{font-family:var(--font-quran);font-size:1.7em;line-height:1}

/* Sebelumnya = hijau, Selanjutnya = biru (aksen situs, --color-accent hue 245) --
   isi penuh gaya glass (hue sama dgn mk-khaisyum/mk-syafatan yg sudah ada), bukan
   cuma garis. backdrop-filter pattern sama dgn .masthead (huruf.css:103). Dulu
   "selanjutnya" pakai merah -- diganti krn merah berkonotasi stop/error, bukan maju. */
.rq-pager-prev{
  background:oklch(86% 0.13 150 / 0.55); border-color:oklch(58% 0.15 150);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.rq-pager-prev .rq-pager-dir{color:oklch(26% 0.09 150)}
.rq-pager-prev .rq-pager-name{color:oklch(20% 0.07 150)}
.rq-pager-prev .rq-pager-name .ar{color:oklch(32% 0.09 150)}
.rq-pager-prev:hover,.rq-pager-prev:focus-visible{background:oklch(80% 0.16 150 / 0.65);border-color:oklch(48% 0.16 150);box-shadow:0 8px 24px -12px oklch(50% 0.16 150/0.40)}

.rq-pager-next{
  background:oklch(86% 0.09 245 / 0.55); border-color:oklch(58% 0.13 245);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.rq-pager-next .rq-pager-dir{color:oklch(32% 0.10 245)}
.rq-pager-next .rq-pager-name{color:oklch(26% 0.09 245)}
.rq-pager-next .rq-pager-name .ar{color:oklch(38% 0.11 245)}
.rq-pager-next:hover,.rq-pager-next:focus-visible{background:oklch(80% 0.12 245 / 0.65);border-color:oklch(48% 0.14 245);box-shadow:0 8px 24px -12px oklch(50% 0.14 245/0.40)}

@media (prefers-color-scheme: dark){
  .rq-pager-prev{background:oklch(34% 0.10 150 / 0.55);border-color:oklch(52% 0.14 150)}
  .rq-pager-prev .rq-pager-dir{color:oklch(88% 0.11 150)}
  .rq-pager-prev .rq-pager-name{color:oklch(93% 0.07 150)}
  .rq-pager-prev .rq-pager-name .ar{color:oklch(82% 0.09 150)}
  .rq-pager-prev:hover,.rq-pager-prev:focus-visible{background:oklch(40% 0.13 150 / 0.68);border-color:oklch(66% 0.15 150)}

  .rq-pager-next{background:oklch(36% 0.09 245 / 0.55);border-color:oklch(54% 0.13 245)}
  .rq-pager-next .rq-pager-dir{color:oklch(88% 0.09 245)}
  .rq-pager-next .rq-pager-name{color:oklch(93% 0.06 245)}
  .rq-pager-next .rq-pager-name .ar{color:oklch(83% 0.08 245)}
  .rq-pager-next:hover,.rq-pager-next:focus-visible{background:oklch(42% 0.11 245 / 0.68);border-color:oklch(68% 0.14 245)}
}

.between{display:flex;align-items:center;gap:var(--space-sm);margin:var(--space-lg) 0 var(--space-md)}
.between::before,.between::after{content:"";flex:1;height:0;border-top:1px dashed var(--color-rule);align-self:center}
.between span,.between .zone-chip{flex-shrink:0}

/* ————— Tadrīb A · specimen GRID (seperti tabel PDF) ————— */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);direction:rtl;min-width:0}
.cell{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2xs);
  padding:var(--space-sm);min-width:0;
  background:var(--color-surface);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);
  transition:transform var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
.cell:hover,.cell:focus-within{transform:translateY(-3px);box-shadow:var(--shadow-blue);border-color:color-mix(in oklab,var(--color-accent) 40%,var(--color-rule))}
.cell.is-active{border-color:var(--color-accent);background:var(--color-accent-soft);box-shadow:var(--shadow-blue);transform:translateY(-2px)}
/* baris atas: tag (kiri/kanan tergantung dir) + form berdampingan */
.cell-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);direction:rtl;min-width:0;flex-wrap:wrap}
.cell .tag{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--color-neutral);background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);
  border-radius:var(--radius-pill);padding:.28em .65em;direction:ltr;white-space:nowrap}
.cell .form{
  font-family:var(--font-quran);
  direction:rtl;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.95rem;
  height:2.95rem;
  padding:0 0.65rem;
  border-radius:999px;
  background:oklch(50% 0.18 25 / 0.12);
  border:1px solid oklch(50% 0.18 25 / 0.35);
  color:oklch(32% 0.22 25);
  font-size:1.7rem;
  line-height:1;
  box-shadow:0 1px 3px oklch(50% 0.18 25 / 0.1);
  transition:transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.cell:hover .form, .cell:focus-within .form {
  transform:scale(1.04);
  border-color:oklch(50% 0.18 25 / 0.65);
}

/* Forced Dark Mode Toggle & System Dark Mode */
html[data-theme="dark"] .cell .form,
:root[data-theme="dark"] .cell .form {
  background:oklch(50% 0.18 25 / 0.28);
  border-color:oklch(60% 0.18 25 / 0.55);
  color:oklch(88% 0.14 25);
  box-shadow:none;
}

@media (prefers-color-scheme:dark){
  .cell .tag{background:var(--color-paper-3);border-color:var(--color-rule)}
  :root:not([data-theme="light"]) .cell .form {
    background:oklch(50% 0.18 25 / 0.28);
    border-color:oklch(60% 0.18 25 / 0.55);
    color:oklch(88% 0.14 25);
    box-shadow:none;
  }
}
.cell .word{font-family:var(--font-quran);direction:rtl;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.5;color:var(--color-ink);min-width:0;text-align:center;overflow-wrap:break-word}
.cell .ref{font-family:var(--font-mono);font-size:0.72rem;color:var(--color-muted);margin-top:var(--space-3xs);font-variant-numeric:tabular-nums;direction:ltr;text-align:center}
.cell .word .hl{color:oklch(50% 0.18 25)} /* huruf target — merah */
@media (prefers-color-scheme:dark){
  .cell .tag{background:var(--color-paper-3);border-color:var(--color-rule)}
}

/* ————— Tadrīb A · grup background ————— */
.tgrid-a{border-radius:var(--radius-card);padding:var(--space-sm) var(--space-xs);margin-inline:calc(-1*var(--space-xs))}
.tgrid-b{border-radius:var(--radius-card);padding:var(--space-sm) var(--space-xs);margin-inline:calc(-1*var(--space-xs))}

/* ————— Cell entrance animation ————— */
.cell{opacity:0;transform:translateY(10px)}
.cell.visible{opacity:1;transform:none;transition:opacity 380ms var(--ease-out),transform 380ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){.cell,.cell.visible{opacity:1;transform:none;transition:none}}

/* ————— Tadrīb B ————— */
.reading{
  background:var(--color-surface);
  border:var(--rule-hair) solid var(--color-rule);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-blue-sm);
  padding-inline:clamp(1.25rem,4vw,2.5rem);
  padding-block:0 var(--space-xs);
  margin-top:var(--space-lg)}
/* ————— Tadrīb B · reading-sm (frasa 2-3 kata) ————— */
.reading-sm{
  background:var(--color-surface);
  border:var(--rule-hair) solid var(--color-rule);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-blue-sm);
  padding-inline:clamp(1.25rem,4vw,2.5rem);
  padding-block:0 var(--space-xs);
  margin-top:var(--space-lg)}
/* frasa grid: 2 kolom, 3 baris */
.frasa-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  direction:rtl}
@media(max-width:600px){.frasa-grid{grid-template-columns:1fr}}
/* frasa: font sama dengan .ayah */
.frasa{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--space-md);
  align-items:center;
  padding-block:var(--space-md);
  border-bottom:var(--rule-hair) solid var(--color-rule);
  padding-inline:var(--space-md);
  opacity:0;transform:translateX(-6px);
  transition:background 160ms var(--ease-out)}
.frasa-grid .frasa:nth-child(odd){border-left:var(--rule-hair) solid var(--color-rule)}
@media(max-width:600px){.frasa-grid .frasa:nth-child(odd){border-left:none}}
.frasa-grid .frasa:nth-last-child(-n+2){border-bottom:none}
@media(max-width:600px){.frasa-grid .frasa:last-child{border-bottom:none}}
.frasa.visible{opacity:1;transform:none;transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out),background 160ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){.frasa,.frasa.visible{opacity:1;transform:none;transition:none}}
.frasa:last-child{border-bottom:none}
.frasa:hover,.frasa:focus-visible{background:var(--color-accent-soft);outline:none}
.frasa .n{
  display:flex;align-items:center;justify-content:center;
  width:1.75rem;height:1.75rem;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--color-neutral);
  background:var(--color-paper-2);
  border:var(--rule-hair) solid var(--color-rule);
  border-radius:var(--radius-card);
  flex-shrink:0;
  cursor:pointer;
  position:relative;
  transition:background 150ms,border-color 150ms}
.frasa .n:hover{background:oklch(88% 0.12 145);border-color:oklch(72% 0.14 145)}
.frasa .n::before{
  content:"Tandai selesai";
  position:absolute;
  left:50%;transform:translateX(-50%);
  bottom:calc(100% + .4rem);
  background:var(--color-ink);color:#fff;
  font-family:var(--font-body);font-size:.65rem;font-weight:400;
  white-space:nowrap;padding:.25em .55em;border-radius:6px;
  opacity:0;pointer-events:none;
  transition:opacity 150ms}
.frasa .n:hover::before{opacity:.85}
.frasa .body .quran{font-size:clamp(1.9rem,5.5vw,2.6rem);color:var(--color-ink);line-height:2.5}
.frasa .body .quran .hl{color:oklch(50% 0.18 25)}
.frasa .body .src{
  display:inline-flex;align-items:center;gap:.35em;
  font-family:var(--font-mono);
  margin-top:var(--space-xs);
  color:var(--color-neutral);
  font-size:var(--text-xs);
  letter-spacing:.04em}
.frasa .body .src::before{
  content:"";display:inline-block;
  width:.3em;height:.3em;border-radius:50%;
  background:var(--color-accent);opacity:.45;flex-shrink:0}
/* is-active / is-done untuk .frasa */
.frasa.is-active{background:var(--color-accent-soft);border-radius:6px;outline:2px solid var(--color-accent);outline-offset:-2px}
.frasa.is-done .n{font-size:0;background:oklch(88% 0.12 145);border-color:oklch(72% 0.14 145)}
.frasa.is-done .n::after{content:"✓";font-size:.85rem;color:oklch(32% 0.12 145)}
.frasa.is-active.is-done{background:oklch(95% 0.04 145);outline-color:oklch(62% 0.14 145)}
.ayah{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--space-lg);
  align-items:start;
  padding-block:var(--space-xl);
  border-bottom:var(--rule-hair) solid var(--color-rule);
  border-radius:6px;
  margin-inline:calc(-1*clamp(1.25rem,4vw,2.5rem));
  padding-inline:clamp(1.25rem,4vw,2.5rem);
  opacity:0;transform:translateX(-6px);
  transition:background 160ms var(--ease-out)}
.ayah.visible{opacity:1;transform:none;transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out),background 160ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){.ayah,.ayah.visible{opacity:1;transform:none;transition:none}}
.ayah:last-child{border-bottom:none}
.ayah:hover,.ayah:focus-visible{background:var(--color-accent-soft);outline:none}
/* nomor urut: angka Latin kecil, subtle */
.ayah .n{
  display:flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--color-neutral);
  background:var(--color-paper-2);
  border:var(--rule-hair) solid var(--color-rule);
  border-radius:var(--radius-card);
  flex-shrink:0;
  cursor:pointer;
  position:relative;
  transition:background 150ms,border-color 150ms;
  margin-top:.6rem}
.ayah .n:hover{background:oklch(88% 0.12 145);border-color:oklch(72% 0.14 145)}
/* hint tooltip */
.ayah .n::before{
  content:"Tandai selesai";
  position:absolute;
  left:50%;transform:translateX(-50%);
  bottom:calc(100% + .4rem);
  background:var(--color-ink);color:#fff;
  font-family:var(--font-body);font-size:.65rem;font-weight:400;
  white-space:nowrap;padding:.25em .55em;border-radius:6px;
  opacity:0;pointer-events:none;
  transition:opacity 150ms}
.ayah .n:hover::before{opacity:.85}
.ayah .body .quran{font-size:clamp(1.9rem,5.5vw,2.6rem);color:var(--color-ink);line-height:2.5}
.ayah .body .quran .hl{color:oklch(50% 0.18 25)} /* huruf target — merah, sama dengan cell */
/* Sīn kecil DI BAWAH ص (U+06E3) tak dirender benar oleh KFGQPC HAFS maupun font
   cadangannya -- muncul sbg simbol tak terkait (lihat huruf-shad.html & penjelasan-
   shad-sin.html). Dibangun manual: pembungkus HARUS display:inline (bukan inline-
   block/inline-grid, yg memutus shaping kursif ke huruf sebelum/sesudahnya). top
   dalam em TETAP (bukan %, yg ambigu/beda antar browser thd containing-block inline)
   dikalibrasi via getBoundingClientRect thd glyph ص sesungguhnya; ukuran diperkecil
   lewat transform:scale() (diterapkan setelah top dihitung, tak memengaruhi resolusi
   top/left) supaya proporsional & konsisten di semua ukuran font. */
.sin-below{position:relative;display:inline;font-family:var(--font-quran)}
.sin-below .mini{position:absolute;left:50%;top:1.2em;transform:translateX(-50%) scale(.4);
  transform-origin:top center;line-height:1;color:inherit;pointer-events:none;user-select:none}
.ayah .body .src{
  display:inline-flex;align-items:center;gap:.35em;
  font-family:var(--font-mono);
  margin-top:var(--space-sm);
  color:var(--color-neutral);
  font-size:var(--text-xs);
  letter-spacing:.04em}
.ayah .body .src::before{
  content:"";display:inline-block;
  width:.3em;height:.3em;border-radius:50%;
  background:var(--color-accent);opacity:.45;flex-shrink:0}




/* ————— Tadrīb B · active + done state ————— */
.ayah.is-active{
  background:var(--color-accent-soft);
  border-radius:6px;
  outline:2px solid var(--color-accent);
  outline-offset:-2px}
.ayah.is-done .n{
  font-size:0;
  background:oklch(88% 0.12 145);
  border-color:oklch(72% 0.14 145)}
.ayah.is-done .n::after{
  content:"✓";font-size:.9rem;
  color:oklch(32% 0.12 145)}
.ayah.is-active.is-done{
  background:oklch(95% 0.04 145);
  outline-color:oklch(62% 0.14 145)}

/* ————— Progress bar Tadrīb B ————— */
.reading-progress{
  display:flex;align-items:center;gap:var(--space-sm);
  padding:var(--space-sm) 0;
  margin-bottom:var(--space-xs)}
.reading-progress .rp-bar{
  flex:1;height:5px;background:var(--color-rule);
  border-radius:var(--radius-pill);overflow:hidden}
.reading-progress .rp-fill{
  height:100%;width:0%;
  background:oklch(62% 0.14 145);
  border-radius:var(--radius-pill);
  transition:width 300ms var(--ease-out)}
.reading-progress .rp-label{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-neutral);white-space:nowrap;letter-spacing:.04em;
  min-width:4.5rem;text-align:right}
.reading-progress .rp-reset{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-neutral);background:none;
  border:var(--rule-hair) solid var(--color-rule);
  cursor:pointer;padding:.25em .6em;border-radius:var(--radius-pill);
  opacity:.55;transition:opacity 150ms,border-color 150ms}
.reading-progress .rp-reset:hover{opacity:1;border-color:var(--color-accent)}

.aside{margin:var(--space-md) 0 var(--space-lg);
  padding:var(--space-sm) clamp(1.25rem,4vw,2.5rem);background:var(--color-accent-soft);border-radius:var(--radius-card);
  color:var(--color-muted);font-size:var(--text-base)}
.aside b{color:var(--color-accent-strong);font-weight:600}

/* ————— Colophon (Ft4) ————— */
.colophon{margin-top:var(--space-2xl);border-top:var(--rule-hair) solid var(--color-ink);padding-block:var(--space-lg) var(--space-2xl)}
.colophon .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--space-md) var(--space-xl)}
.colophon dt{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.06em;text-transform:uppercase;color:var(--color-neutral);margin-bottom:2px}
.colophon dd{font-size:var(--text-base);color:var(--color-ink)}
.colophon .end{grid-column:1/-1;margin-top:var(--space-sm);color:var(--color-muted);font-size:var(--text-sm)}
.colophon .end .ar{font-size:1.15em;color:var(--color-ink)}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:var(--space-lg)}
  .hero-lead{text-align:center}
  .hero-lead .specimen{text-align:center}
  .hero-lead{text-align:left}
  .hero-side{max-width:none;margin-inline:auto;width:100%}
  .hero-side .makhraj{position:static;max-width:32rem;margin-inline:auto}
}
@media (max-width:520px){
  .tgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .cell .tag{font-size:0.58rem;padding:.22em .5em;white-space:normal;text-align:center}
}
@media (max-width:360px){
  .tgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){.specimen{animation:none;clip-path:none} *{transition-duration:1ms !important}}
@media print{.masthead{position:static;backdrop-filter:none} body{background:#fff} body::before,body::after{display:none} .cell,.ayah,.makhraj-frame{break-inside:avoid;box-shadow:none} .specimen{animation:none;clip-path:none}}

/* ————— Modal Saran & Masukan (Tally Modern Minimal) ————— */
.rq-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: color-mix(in oklab, var(--color-ink) 45%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease-out), visibility var(--dur-mid) var(--ease-out);
}

.rq-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.rq-modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: 16px;
  box-shadow: 0 24px 48px -12px oklch(0% 0 0 / 0.25);
  padding: 1.75rem 1.75rem 1.5rem;
  transform: translateY(12px) scale(0.97);
  transition: transform var(--dur-mid) var(--ease-out);
  max-height: 90vh;
  overflow-y: auto;
}

.rq-modal-overlay.open .rq-modal-card {
  transform: translateY(0) scale(1);
}

.rq-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.rq-modal-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.25;
}

.rq-modal-sub {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 0.25rem;
}

.rq-modal-close {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--color-rule-soft);
  background: var(--color-paper-2);
  color: var(--color-neutral);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  transition: color var(--dur-short) var(--ease-out),
              background var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}

.rq-modal-close:hover {
  color: var(--color-ink);
  background: var(--color-rule-soft);
  transform: rotate(90deg);
}

.rq-modal-close svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ————— Trigger icon "Cari Materi" di masthead (sama gaya .menu-btn) ————— */
.rq-search-trigger{display:inline-flex;align-items:center;justify-content:center;width:2.2em;height:2.2em;
  border:var(--rule-hair) solid var(--color-rule);border-radius:8px;background:var(--color-surface);
  cursor:pointer;color:var(--color-ink);flex:none;
  transition:border-color var(--dur-short) var(--ease-out),background var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);
}
.rq-search-trigger:hover{border-color:var(--color-accent);background:var(--color-accent-soft);transform:scale(1.04)}
.rq-search-trigger:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.rq-search-trigger svg{width:1.1em;height:1.1em}

/* ————— Overlay "Cari & Jelajahi Materi" — reuse .rq-modal-overlay/.rq-modal-card,
   modifier lebih lebar + top-aligned (bukan center) supaya nyaman untuk daftar hasil. ————— */
/* padding-top/max-height dideklarasikan 2x -- vh dulu (fallback), dvh belakangan (menang
   di browser yg dukung). dvh ikut menyusut saat keyboard HP muncul, vh statis tidak --
   tanpa ini, hasil pencarian bisa ketutup keyboard di iOS Safari (position:fixed lama
   dikenal tak konsisten dgn viewport yg berubah gara2 keyboard). */
.rq-modal-overlay.rq-search-overlay{align-items:flex-start;padding-top:min(12vh,5rem);padding-top:min(12dvh,5rem)}
.rq-modal-card.rq-search-card{max-width:560px;padding:0;overflow:hidden;display:flex;flex-direction:column;max-height:min(78vh,640px);max-height:min(78dvh,640px)}
.rq-search-inputwrap{display:flex;align-items:center;gap:.7rem;padding:1rem 1.25rem;border-bottom:1px solid var(--color-rule-soft);flex:none}
.rq-search-inputwrap>svg{width:1.2rem;height:1.2rem;stroke:var(--color-neutral);flex:none}
.rq-search-input{flex:1 1 auto;min-width:0;border:0;background:none;font-family:var(--font-body);font-size:1.05rem;color:var(--color-ink);outline:none}
.rq-search-input::placeholder{color:var(--color-muted)}
.rq-search-inputwrap .rq-modal-close{width:1.8rem;height:1.8rem;flex:none}
.rq-search-results{flex:1 1 auto;min-height:0;overflow-y:auto;padding:.5rem}
.rq-search-group{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--color-neutral);padding:.7rem .6rem .3rem}
.rq-search-result{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;padding:.65rem .7rem;border-radius:10px;cursor:pointer;transition:background var(--dur-short) var(--ease-out)}
.rq-search-result:hover,.rq-search-result.is-active{background:var(--color-paper-2)}
.rq-search-result-chip{flex:none;font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.2rem .5rem;border-radius:999px;color:var(--color-accent-strong);background:var(--color-accent-soft)}
.rq-search-chip-rujukan{color:oklch(38% 0.14 165);background:oklch(94% 0.035 165)}
.rq-search-chip-level{color:oklch(40% 0.10 195);background:oklch(94% 0.03 195)}
.rq-search-chip-microteaching{color:oklch(45% 0.16 300);background:oklch(94% 0.035 300)}
.rq-search-result-title{font-family:var(--font-body);font-weight:600;color:var(--color-ink)}
.rq-search-result-ar{font-family:var(--font-quran);font-size:1.15rem;color:var(--color-muted)}
.rq-search-result-sub{flex:1 1 100%;font-family:var(--font-body);font-size:.78rem;color:var(--color-muted)}
.rq-search-empty{padding:2rem 1rem;text-align:center;font-family:var(--font-body);font-size:.9rem;color:var(--color-muted)}
.rq-search-result mark{background:none;color:var(--color-accent-strong);font-weight:800}

.rq-form-group {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.rq-form-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  text-transform: uppercase;
}

.rq-form-input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: 10px;
  outline: none;
  transition: border-color var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}

.rq-form-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px oklch(56% 0.135 245 / 0.15);
  background: var(--color-surface);
}

.rq-form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-muted);
  cursor: pointer;
  user-select: none;
  margin-top: 0.25rem;
}

.rq-form-check input[type="checkbox"] {
  accent-color: var(--color-accent);
  width: 1.05rem;
  height: 1.05rem;
}

.rq-form-submit {
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.8rem 1.2rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-accent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
  box-shadow: 0 4px 14px -4px oklch(56% 0.135 245 / 0.45);
}

.rq-form-submit:hover {
  background: var(--color-accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px oklch(56% 0.135 245 / 0.55);
}

.rq-form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.rq-toast-msg {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
  display: none;
}
.rq-toast-msg.success {
  display: block;
  background: oklch(94% 0.04 145);
  color: oklch(35% 0.16 145);
  border: 1px solid oklch(85% 0.08 145);
}
.rq-toast-msg.error {
  display: block;
  background: oklch(94% 0.04 25);
  color: oklch(40% 0.18 25);
  border: 1px solid oklch(85% 0.08 25);
}
.mt-dalil-ar .quran{font-family:var(--font-arabic)}

/* 9. YouTube Unlisted Embed Video Player Component */
.mt-video-card{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:1rem;padding:1.4rem 1.6rem;margin:1.4rem 0;box-shadow:0 4px 20px color-mix(in oklab,var(--bc,var(--color-accent)) 12%,transparent)}
.mt-video-header{margin-bottom:1rem}
.mt-video-badge{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bc,var(--color-accent-strong));background:color-mix(in oklab,var(--bc-soft,var(--color-accent-soft)) 60%,var(--color-surface));border:1px solid color-mix(in oklab,var(--bc,var(--color-accent)) 25%,transparent);border-radius:999px;padding:.25rem .75rem;margin-bottom:.5rem;font-weight:600}
.mt-video-header h4{margin:0;font-size:1.1rem;font-weight:700;color:var(--color-ink)}
.mt-video-wrapper{position:relative;width:100%;padding-bottom:56.25%;height:0;border-radius:.8rem;overflow:hidden;background:#000;border:1px solid var(--color-rule)}
.mt-video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.mt-video-caption{margin-top:1rem;background:var(--color-paper-2);border-radius:.7rem;padding:.8rem 1rem;font-size:.88rem;line-height:1.55;color:var(--color-muted);border-left:3px solid var(--bc,var(--color-accent))}
.mt-video-caption b{color:var(--color-ink)}

/* 10. Studio Audio Peragaan Lisan Component */
.mt-audio-studio{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:1rem;padding:1.3rem 1.5rem;margin:1.4rem 0;box-shadow:0 3px 15px color-mix(in oklab,var(--bc,var(--color-accent)) 10%,transparent)}
.mt-audio-header{margin-bottom:1rem}
.mt-audio-badge{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bc,var(--color-accent-strong));background:color-mix(in oklab,var(--bc-soft,var(--color-accent-soft)) 60%,var(--color-surface));border:1px solid color-mix(in oklab,var(--bc,var(--color-accent)) 25%,transparent);border-radius:999px;padding:.25rem .75rem;margin-bottom:.4rem;font-weight:600}
.mt-audio-header h4{margin:0;font-size:1.05rem;font-weight:700;color:var(--color-ink)}
.mt-audio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem}
.mt-audio-card{background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:.8rem;padding:1rem;display:flex;flex-direction:column;justify-content:space-between;gap:.8rem;transition:border-color var(--dur-short) var(--ease-out)}
.mt-audio-card.is-wrong{border-left:4px solid oklch(62% 0.18 25)}
.mt-audio-card.is-correct{border-left:4px solid oklch(62% 0.18 145)}
.mt-audio-info p{margin:.2rem 0 0;font-size:.86rem;color:var(--color-ink);line-height:1.45}
.mt-audio-tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.mt-audio-card.is-wrong .mt-audio-tag{color:oklch(45% 0.18 25)}
.mt-audio-card.is-correct .mt-audio-tag{color:oklch(45% 0.18 145)}
.mt-audio-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.5rem .9rem;border-radius:.6rem;border:1px solid var(--color-rule);background:var(--color-surface);font-family:inherit;font-size:.84rem;font-weight:600;color:var(--color-ink);cursor:pointer;transition:background var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
.mt-audio-btn:hover{background:var(--bc-soft,var(--color-accent-soft));border-color:var(--bc,var(--color-accent));color:var(--bc,var(--color-accent-strong))}
.mt-audio-btn.is-playing{background:var(--bc,var(--color-accent));color:var(--color-accent-ink);border-color:var(--bc,var(--color-accent))}

/* 11. Widget Simulasi Studi Kasus / Skenario Interaktif */
.mt-scenario-card{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:1rem;padding:1.4rem 1.6rem;margin:1.4rem 0;box-shadow:0 4px 18px oklch(0% 0 0/.04)}
.mt-scenario-badge{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:oklch(50% 0.15 300);background:oklch(95% 0.02 300);border:1px solid oklch(85% 0.05 300);border-radius:999px;padding:.25rem .75rem;margin-bottom:.6rem;font-weight:600}
.mt-scenario-title{margin:0 0 .5rem;font-size:1.1rem;font-weight:700;color:var(--color-ink)}
.mt-scenario-desc{font-size:.95rem;line-height:1.6;color:var(--color-muted);margin:0 0 1.1rem}
.mt-scenario-options{display:flex;flex-direction:column;gap:.6rem}
.mt-scenario-opt{display:flex;align-items:flex-start;gap:.8rem;padding:.8rem 1rem;border-radius:.8rem;border:1px solid var(--color-rule);background:var(--color-paper-2);font-family:inherit;font-size:.92rem;line-height:1.5;color:var(--color-ink);text-align:left;cursor:pointer;transition:border-color var(--dur-short) var(--ease-out),background var(--dur-short) var(--ease-out)}
.mt-scenario-opt:hover{border-color:var(--color-accent);background:var(--color-surface)}
.mt-scenario-opt .opt-letter{flex:0 0 auto;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--color-surface);border:1px solid var(--color-rule);display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:.8rem;color:var(--color-muted)}
.mt-scenario-opt.is-correct{background:oklch(95% 0.04 145);border-color:oklch(62% 0.18 145);color:oklch(25% 0.10 145)}
.mt-scenario-opt.is-correct .opt-letter{background:oklch(62% 0.18 145);color:#fff;border-color:oklch(62% 0.18 145)}
.mt-scenario-opt.is-wrong{background:oklch(95% 0.04 25);border-color:oklch(62% 0.18 25);color:oklch(35% 0.12 25)}
.mt-scenario-opt.is-wrong .opt-letter{background:oklch(62% 0.18 25);color:#fff;border-color:oklch(62% 0.18 25)}
.mt-scenario-feedback{margin-top:1rem;padding:.9rem 1.1rem;border-radius:.8rem;font-size:.9rem;line-height:1.6;display:none}
.mt-scenario-feedback.show-correct{display:block;background:oklch(95% 0.04 145);border:1px solid oklch(75% 0.12 145);color:oklch(25% 0.10 145)}
.mt-scenario-feedback.show-wrong{display:block;background:oklch(95% 0.04 25);border:1px solid oklch(75% 0.12 25);color:oklch(35% 0.12 25)}


body.mt-present-on .mt-entri.mt-present-current .mt-video-card,
body.mt-present-on .mt-entri.mt-present-current .mt-audio-studio,
body.mt-present-on .mt-entri.mt-present-current .mt-scenario-card,
body.mt-present-on .mt-entri.mt-present-current .mt-visual-card{
  display:block;margin:1.4rem 0;width:100%;
}


/* Styling komprehensif seluruh elemen materi saat Mode Presentasi aktif */
body.mt-present-on .mt-entri.mt-present-current .mt-inti-list{
  font-size:clamp(1.15rem,0.95rem + 0.9vw,1.55rem);line-height:1.75;margin:1rem 0 1.2rem;padding-left:1.4rem;
}
body.mt-present-on .mt-entri.mt-present-current .mt-note{
  font-size:clamp(1.1rem,0.9rem + 0.8vw,1.5rem);line-height:1.65;padding:1.2rem 1.4rem;margin:1.2rem 0;
}
body.mt-present-on .mt-entri.mt-present-current .mt-note-tag{
  font-size:clamp(0.78rem,0.7rem + 0.3vw,0.95rem);
}
body.mt-present-on .mt-entri.mt-present-current .mt-visual-card,
body.mt-present-on .mt-entri.mt-present-current .mt-video-card,
body.mt-present-on .mt-entri.mt-present-current .mt-audio-studio,
body.mt-present-on .mt-entri.mt-present-current .mt-scenario-card{
  display:block !important;
  width:100%;
  max-width:52rem;
  margin:1.4rem auto;
  box-sizing:border-box;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Mode Presentasi — elemen khas Materi At-Tibyan (.mt-matan / .mt-syarah /
   .mt-faedah). Kelas-kelas ini TIDAK dipakai materi-microteaching, jadi
   seluruh blok ini nol-dampak di sana. .mt-inti / .mt-inti-list / .mt-note /
   .mt-dalil-* sudah dibesarkan di blok presentasi di atas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pill "Matan / Matan & Syarah" tak relevan saat presentasi -- kontrolnya kini
   tombol "Fokus Matan" di bar presentasi. */
body.mt-present-on .mt-view-toggle{display:none}

/* Dalam presentasi, matan + syarah SELALU tampil utuh -- abaikan state toggle
   halaman (body.syarah-on). Fokus Matan yang menyembunyikan syarah. Override
   border-radius perlu !important utk mengalahkan body:not(.syarah-on) .mt-matan. */
body.mt-present-on .mt-entri.mt-present-current .mt-syarah{display:block}
/* .mt-matan punya overflow:hidden -> sebagai flex item di slide (flex column),
   min-height auto-nya jadi 0 dan kartu dikempiskan flex algorithm sampai teks
   Arab-nya keluar kotak. overflow:visible + flex-shrink:0 = kartu setinggi isi,
   slide yang scroll. */
body.mt-present-on .mt-entri.mt-present-current .mt-matan,
body.mt-present-on .mt-entri.mt-present-current .mt-syarah{
  overflow:visible;flex-shrink:0;
}
body.mt-present-on .mt-entri.mt-present-current .mt-matan{
  border-radius:1.1rem 1.1rem 0 0 !important;
  padding:1.8rem clamp(1.4rem,4vw,2.4rem) 1.6rem;
}
body.mt-present-on .mt-entri.mt-present-current .mt-syarah{
  padding:1.5rem clamp(1.4rem,4vw,2.4rem) 1.7rem;
}
body.mt-present-on .mt-entri.mt-present-current .mt-matan-ar{
  font-size:clamp(1.9rem,1.4rem + 2.4vw,2.9rem);line-height:2.15;margin:.4rem 0 .9rem;
}
body.mt-present-on .mt-entri.mt-present-current .mt-matan-tr{
  font-size:clamp(1.1rem,0.9rem + 0.9vw,1.45rem);line-height:1.7;
}
body.mt-present-on .mt-entri.mt-present-current .mt-matan-badge,
body.mt-present-on .mt-entri.mt-present-current .mt-syarah-badge{
  font-size:clamp(.72rem,.66rem + .28vw,.9rem);margin-bottom:1rem;
}
body.mt-present-on .mt-entri.mt-present-current .mt-matan-ref{
  font-size:clamp(.8rem,.72rem + .35vw,1rem);margin-top:.9rem;
}
body.mt-present-on .mt-entri.mt-present-current .mt-faedah-title{
  font-size:clamp(.95rem,.85rem + .5vw,1.2rem);margin:1.7rem 0 .7rem;
}
/* padding-left WAJIB ikut dipertahankan: di at-tibyan.css badge nomornya
   position:absolute di gutter kiri, jadi menulis `padding:… 0` di sini bikin
   teks presentasi menindih badge. Badge tetap 40px (min-width 1.5rem
   content-box + padding), jadi gutter 3.25rem sama dengan mode baca. */
body.mt-present-on .mt-entri.mt-present-current .mt-faedah li{
  font-size:clamp(1.1rem,0.92rem + 0.85vw,1.45rem);line-height:1.7;padding:.5rem .7rem .5rem 3.25rem;
}
body.mt-present-on .mt-entri.mt-present-current .mt-faedah li::before{
  font-size:clamp(.75rem,.68rem + .3vw,.9rem);top:.8rem;
}

/* ─── Fokus Matan (tombol 📜 / tekan M): sembunyikan syarah, matan besar ─── */
body.mt-present-on.mt-present-matan-only .mt-entri.mt-present-current .mt-syarah{display:none}
body.mt-present-on.mt-present-matan-only .mt-entri.mt-present-current .mt-matan{
  border-radius:1.3rem !important;padding:2.4rem clamp(1.6rem,5vw,3rem);
}
body.mt-present-on.mt-present-matan-only .mt-entri.mt-present-current .mt-matan-ar{
  font-size:clamp(2.4rem,1.6rem + 3.6vw,4rem);line-height:2.1;
}
body.mt-present-on.mt-present-matan-only .mt-entri.mt-present-current .mt-matan-tr{
  font-size:clamp(1.15rem,0.95rem + 1vw,1.6rem);
}

/* Tombol "Fokus Matan" di bar presentasi (disisipkan JS sesudah tombol Exit;
   hanya di halaman ber-.mt-matan). Pola visual mengikuti .mt-present-exit. */
.mt-present-matan-toggle{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;padding:0;border-radius:8px;border:1px solid var(--color-rule);
  background:var(--color-surface);color:var(--color-ink);cursor:pointer;
  font-size:.95rem;line-height:1;
  transition:background var(--dur-short),border-color var(--dur-short);
}
.mt-present-matan-toggle:hover,.mt-present-matan-toggle:focus-visible{border-color:var(--bc,var(--color-accent))}
.mt-present-matan-toggle.is-active{background:var(--bc,var(--color-accent));border-color:var(--bc,var(--color-accent))}


/* 12. Widget Daftar Isi Lengkap Interaktif (Full Global TOC) */
.mt-full-toc{
  margin-top: 3.5rem;
  padding: 2rem 2.2rem;
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: 1.2rem;
  box-shadow: 0 4px 20px oklch(0% 0 0 / 0.03);
}
.mt-toc-head{
  margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--color-rule-soft);
  padding-bottom: 1.2rem;
}
.mt-toc-badge{
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  border: 1px solid color-mix(in oklab, var(--color-accent) 30%, transparent);
  border-radius: 999px;
  padding: .25rem .75rem;
  margin-bottom: .6rem;
  font-weight: 600;
}
.mt-toc-head h2{
  margin: 0 0 .4rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-ink);
}
.mt-toc-head p{
  margin: 0;
  font-size: .92rem;
  color: var(--color-muted);
}
.mt-toc-tree{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mt-toc-chapter-block{
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: .9rem;
  overflow: hidden;
  transition: border-color var(--dur-short) var(--ease-out);
}
.mt-toc-chapter-block[open]{
  border-color: color-mix(in oklab, var(--ch-color, var(--color-accent)) 40%, var(--color-rule));
}
.mt-toc-chapter-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.3rem;
  background: color-mix(in oklab, var(--ch-color, var(--color-accent)) 7%, var(--color-surface));
  cursor: pointer;
  font-weight: 600;
  user-select: none;
}
.mt-toc-chapter-header:hover{
  background: color-mix(in oklab, var(--ch-color, var(--color-accent)) 14%, var(--color-surface));
}
.mt-toc-chapter-title{
  font-size: 1.05rem;
  color: var(--color-ink);
}
.mt-toc-chapter-count{
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--color-muted);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  padding: .2rem .65rem;
  flex: 0 0 auto;
}
.mt-toc-chapter-list{
  list-style: none;
  margin: 0;
  padding: .6rem 0;
}
.mt-toc-chapter-list li{
  border-top: 1px solid var(--color-rule-soft);
}
.mt-toc-chapter-list li:first-child{
  border-top: 0;
}
.mt-toc-chapter-list a{
  display: flex;
  align-items: center;
  padding: .65rem 1.4rem;
  color: var(--color-ink);
  text-decoration: none;
  font-size: .95rem;
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.mt-toc-chapter-list a:hover,
.mt-toc-chapter-list a:focus-visible{
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  padding-left: 1.7rem;
}
.mt-toc-art-title{
  line-height: 1.4;
}


/* 13. Drawer Microteaching & Lock Badges */
.mt-drawer-topic-icon{
  flex: 0 0 auto;
  font-size: .85rem;
  margin-right: .4rem;
}
.mt-drawer-topic-title{
  font-size: .88rem;
  line-height: 1.35;
}
.drawer-mt-topic-link{
  padding: .5rem .8rem !important;
}
.drawer-mt-ch-link{
  color: var(--color-accent-strong) !important;
  font-size: .9rem !important;
  padding: .6rem .8rem !important;
  background: var(--color-paper-2);
  border-radius: .5rem;
  margin-bottom: .3rem;
}


/* 14. Drawer Header Profile Card */
.drawer-user-card {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1rem;
  background: var(--color-paper-2, #f3f5f8);
  border: 1px solid var(--color-rule-soft, #e5eaf0);
  border-radius: .9rem;
  margin-bottom: 1.2rem;
}
.drawer-user-avatar {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--bc-bab1, #7c3aed);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex: 0 0 auto;
}
.drawer-user-avatar.guest {
  background: var(--color-neutral, #64748b);
}
.drawer-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.drawer-user-name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--color-ink, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-user-role {
  font-size: .75rem;
  color: var(--color-muted, #64748b);
}
.drawer-user-login-btn {
  flex: 0 0 auto;
  padding: .35rem .75rem;
  font-size: .78rem;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  background: var(--color-accent, #0284c7);
  color: #fff;
  cursor: pointer;
  transition: transform .15s ease;
}
.drawer-user-login-btn:hover {
  transform: scale(1.05);
}


/* ————— Brand Header & Theme Switcher di Menu Drawer ————— */
.drawer-brand-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  background: var(--color-paper-2, #f1f5f9);
  border: 1px solid var(--color-rule-soft, #e2e8f0);
  border-radius: 1rem;
  margin-bottom: 1.25rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.drawer-brand-logo-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.drawer-brand-logo {
  height: 38px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
}

/* Light / Dark Mode logo visibility switch */
html[data-theme="dark"] .drawer-brand-logo.logo-light,
:root:not([data-theme="dark"]) .drawer-brand-logo.logo-dark {
  display: none !important;
}
html[data-theme="dark"] .drawer-brand-logo.logo-dark,
:root:not([data-theme="dark"]) .drawer-brand-logo.logo-light {
  display: block !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .drawer-brand-logo.logo-light {
    display: none !important;
  }
  :root:not([data-theme="light"]) .drawer-brand-logo.logo-dark {
    display: block !important;
  }
}

.drawer-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-rule, #cbd5e1);
  background: var(--color-surface, #ffffff);
  color: var(--color-ink, #0f172a);
  cursor: pointer;
  flex: 0 0 auto;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.08);
}
.drawer-theme-toggle:hover {
  transform: scale(1.08);
  border-color: var(--color-accent, #0284c7);
  color: var(--color-accent, #0284c7);
}
.drawer-theme-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sun & Moon icon toggle */
html[data-theme="dark"] .drawer-theme-toggle .icon-sun,
:root:not([data-theme="dark"]) .drawer-theme-toggle .icon-moon {
  display: block !important;
}
html[data-theme="dark"] .drawer-theme-toggle .icon-moon,
:root:not([data-theme="dark"]) .drawer-theme-toggle .icon-sun {
  display: none !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .drawer-theme-toggle .icon-sun {
    display: block !important;
  }
  :root:not([data-theme="light"]) .drawer-theme-toggle .icon-moon {
    display: none !important;
  }
}

/* Clean Drawer Icons Styling */
.drawer-nav a svg {
  width: 1.15em;
  height: 1.15em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  opacity: 0.75;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.drawer-nav a:hover svg,
.drawer-nav a.is-active svg {
  opacity: 1;
  transform: scale(1.05);
}


/* ————— Modal Panduan PWA (Diadopsi dari Portal Rattil & Disesuaikan untuk Modul Web) ————— */
.pwa-guide-modal-card {
  max-width: 560px !important;
  padding: 1.5rem !important;
}
.pwa-benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
}
.pwa-benefit-card {
  background: var(--color-paper-2, #f8fafc);
  border: 1px solid var(--color-rule-soft, #e2e8f0);
  border-radius: 0.85rem;
  padding: 0.8rem 0.95rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.pwa-benefit-icon {
  font-size: 1.35rem;
  flex: 0 0 auto;
  line-height: 1;
}
.pwa-benefit-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-ink);
  margin-bottom: 2px;
}
.pwa-benefit-desc {
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.45;
}
.pwa-os-tabs {
  display: flex;
  gap: 0.4rem;
  background: var(--color-paper-2, #f1f5f9);
  border: 1px solid var(--color-rule-soft, #e2e8f0);
  padding: 4px;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
}
.pwa-os-tab {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pwa-os-tab.active {
  background: var(--color-surface, #ffffff);
  color: var(--color-accent, #0284c7);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.pwa-step-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.pwa-step-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.pwa-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent, #0284c7);
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  line-height: 1;
}
.pwa-step-text {
  font-size: 0.83rem;
  color: var(--color-ink);
  line-height: 1.5;
}
.pwa-step-text strong {
  font-weight: 700;
}
.pwa-step-text code {
  background: var(--color-paper-2, #f1f5f9);
  border: 1px solid var(--color-rule-soft, #cbd5e1);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}


/* Drawer PWA Banner Button */
.drawer-pwa-banner {
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:.65em .85em;border-radius:10px;margin-bottom:.6em;
  background:var(--color-accent-soft);border:1px solid var(--color-accent);
  color:var(--color-accent-strong);font-family:var(--font-display);
  font-size:var(--text-sm);font-weight:600;cursor:pointer;
  transition:transform var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out);
}
.drawer-pwa-banner:hover {
  transform:translateY(-1px);
  box-shadow:var(--shadow-blue-sm);
}
.drawer-pwa-banner-left {
  display:flex;align-items:center;gap:.65em;
}
.drawer-pwa-banner svg {
  width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;
}
.drawer-pwa-badge {
  font-family:var(--font-display);font-size:0.7rem;font-weight:700;
  background:var(--color-accent);color:#fff;padding:0.15rem 0.55rem;border-radius:99px;
}