/* ===== The Quran Lens — Design System (sesuai Web Brief)
   Dark-first, emas, serif elegan. "Seperti membuka mushaf kuno yang mahal." ===== */
:root {
  --bg: #080808;
  --bg-alt: #0a0805;
  --bg-warm: #0c0a07;
  --gold: #f2d060;          /* teks Arab, judul utama */
  --gold-label: #c9a84c;    /* label, navigasi, ornamen */
  --body: #ddd5c2;          /* teks utama */
  --sub: #c8bfaa;           /* teks sekunder */
  --reading: #ded6c4;       /* teks bacaan panjang (tafsir/asbabun) — nyaman & terang */
  --card-shadow: 0 10px 34px rgba(0, 0, 0, .30);   /* kedalaman kartu */
  --faded: rgba(201, 168, 76, .32);
  --card-bg: rgba(201, 168, 76, .06);
  --card-line: rgba(201, 168, 76, .40);
  --line: rgba(201, 168, 76, .16);
  --gold-soft: rgba(242, 208, 96, .10);
  --ok: #5fb98a;            /* status "selesai dipelajari" */
  --ok-soft: rgba(95, 185, 138, .14);
  --glow: 0 0 26px rgba(242, 208, 96, .28);
  --shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --radius: 14px;
  --font: 'Lora', Georgia, 'Times New Roman', serif;
  --display: 'Cormorant Garamond', Georgia, serif;
  --label: 'Cinzel', 'Cormorant Garamond', serif;
  --arab: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 112.5%; }
body {
  font-family: var(--font); color: var(--body);
  background:
    radial-gradient(1100px 640px at 50% -80px, #14110a 0%, rgba(20, 17, 10, 0) 60%),
    var(--bg);
  background-attachment: fixed;
  line-height: 1.65; -webkit-font-smoothing: antialiased; min-height: 100vh;
}

/* Ornamen: bingkai sudut */
.framed { position: relative; }
.framed::before, .framed::after {
  content: ''; position: absolute; width: 30px; height: 30px; pointer-events: none;
}
.framed::before { top: 12px; left: 12px; border-top: 1.5px solid var(--card-line); border-left: 1.5px solid var(--card-line); }
.framed::after  { bottom: 12px; right: 12px; border-bottom: 1.5px solid var(--card-line); border-right: 1.5px solid var(--card-line); }

/* Divider */
.hr-grad { height: 1px; max-width: 760px; margin: 40px auto; background: linear-gradient(90deg, transparent, var(--card-line), transparent); }
.divider-short { width: 60px; height: 2px; background: var(--gold); margin: 34px auto 8px; border-radius: 2px; box-shadow: var(--glow); }

/* ===== Header ===== */
.topbar {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 14px;
  justify-content: space-between; padding: 12px 20px;
  background: rgba(8, 8, 8, .82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 600; font-size: 1.4rem; color: var(--body); flex: none; }
.brand .logo {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, #211b0f, #0c0a07); color: var(--gold); font-size: 1.2rem;
  box-shadow: inset 0 0 0 1.4px var(--card-line), var(--glow);
}
.brand small { display: block; font-family: var(--label); font-weight: 500; font-size: .5rem; color: var(--gold-label); letter-spacing: .22em; text-transform: uppercase; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.theme-toggle {
  width: 36px; height: 36px; border-radius: 50%; flex: none; border: 1px solid var(--card-line);
  background: var(--bg-warm); color: var(--gold); cursor: pointer; font-size: 1rem; display: grid; place-items: center; transition: .18s;
}
.theme-toggle:hover { box-shadow: var(--glow); }
.badge-pro {
  font-family: var(--label); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(135deg, #f6dd88, var(--gold)); color: #2a1f05; padding: 7px 13px; border-radius: 999px; cursor: pointer; border: none; white-space: nowrap;
}
.badge-pro.is-pro { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px var(--card-line); }

/* ===== Tabs (nav utama) ===== */
.tabs { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; flex: 1; }
.tab {
  font-family: var(--label); border: none; background: transparent; color: var(--sub);
  padding: 8px 14px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; cursor: pointer; transition: .18s;
}
.tab:hover { color: var(--gold); }
.tab.active { color: var(--gold); box-shadow: inset 0 0 0 1px var(--card-line); }

/* ===== Panel ===== */
.panel { display: none; animation: fade .3s ease; }
.panel.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* ===== Hero ===== */
.hero { text-align: center; padding: 64px 28px 30px; max-width: 760px; margin: 22px auto 0; }
.hero .kicker { font-family: var(--label); display: inline-block; font-size: .64rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-label); margin-bottom: 22px; padding-bottom: 10px; border-bottom: 1px solid var(--card-line); }
.hero h1 { font-family: var(--display); font-weight: 700; font-size: 3.4rem; line-height: 1.1; color: var(--body); margin-bottom: 22px; }
.hero h1 .hl { color: var(--gold); font-style: italic; }
.hero-arab { font-family: var(--arab); font-size: 2.6rem; color: var(--gold); direction: rtl; margin: 8px 0 22px; text-shadow: 0 0 30px rgba(242, 208, 96, .4), 0 0 70px rgba(242, 208, 96, .18); }
.hero p { font-family: var(--display); font-style: italic; color: var(--sub); font-size: 1.42rem; line-height: 1.5; margin: 0 auto 26px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.streak-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 26px; background: var(--card-bg); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: .82rem; color: var(--gold-label); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer;
  font-family: var(--label); font-weight: 600; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 13px 26px; border-radius: 11px; transition: .18s;
  background: linear-gradient(135deg, #f6dd88, var(--gold)); color: #2a1f05; box-shadow: var(--glow);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 32px rgba(242, 208, 96, .5); }
.btn.gold { background: linear-gradient(135deg, #f6dd88, var(--gold)); color: #2a1f05; }
.btn.ghost { background: transparent; border: 1px solid var(--card-line); color: var(--gold); box-shadow: none; }
.btn.ghost:hover { background: var(--gold-soft); box-shadow: none; }
.btn-mark { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--card-line); background: var(--bg-warm); color: var(--gold); cursor: pointer; font-size: 1.05rem; z-index: 3; }
.btn-mark.on { background: var(--gold-soft); box-shadow: var(--glow); }

/* ===== Section heading ===== */
.section-title { font-family: var(--display); font-weight: 700; text-align: center; font-size: 2rem; color: var(--gold); margin: 8px 0 6px; }
.section-sub { font-family: var(--display); font-style: italic; text-align: center; color: var(--sub); margin-bottom: 22px; font-size: 1.12rem; }

/* ===== Beranda: preview gratis ===== */
#berandaPreview { display: grid; gap: 14px; grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 620px) { #berandaPreview { grid-template-columns: 1fr 1fr; } }
.preview-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px; text-align: center; cursor: pointer; transition: .18s; }
.preview-card:hover { border-color: var(--card-line); box-shadow: var(--shadow); transform: translateY(-2px); }
.pc-arab { font-family: var(--arab); font-size: 1.9rem; color: var(--gold); direction: rtl; text-shadow: 0 0 22px rgba(242, 208, 96, .32); margin-bottom: 12px; }
.pc-kicker { font-family: var(--label); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-label); }
.pc-title { font-family: var(--display); font-size: 1.3rem; color: var(--body); margin: 4px 0 10px; }
.pc-cta { font-family: var(--label); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }

/* ===== Pricing ===== */
.price-grid { display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 620px) { .price-grid { grid-template-columns: 1fr 1fr; } .price-tagline { grid-column: 1 / -1; } }
.price-card { position: relative; text-align: center; border: 1px solid var(--line); border-radius: 16px; padding: 30px 20px; background: var(--card-bg); }
.price-card.hl { border-color: var(--card-line); box-shadow: 0 0 50px rgba(242, 208, 96, .14); }
.pc-ribbon { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-family: var(--label); font-size: .56rem; letter-spacing: .12em; background: var(--gold); color: #2a1f05; padding: 4px 12px; border-radius: 999px; }
.price-card .pc-name { font-family: var(--label); font-weight: 600; color: var(--gold-label); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; }
.price-card .pc-amt { font-family: var(--display); font-size: 2.4rem; font-weight: 700; color: var(--gold); margin: 10px 0; }
.price-card .pc-amt small { font-size: .8rem; color: var(--sub); font-weight: 600; font-family: var(--font); }
.price-card ul { list-style: none; text-align: left; margin: 18px 0; font-size: .95rem; color: var(--body); }
.price-card li { padding: 6px 0 6px 26px; position: relative; }
.price-card li::before { content: '✦'; position: absolute; left: 0; color: var(--gold); }
.price-tagline { font-family: var(--display); font-style: italic; text-align: center; color: var(--sub); font-size: 1.25rem; padding: 8px 10px; }

/* ===== FAQ ===== */
.faq { margin-top: 6px; }
.faq-item { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq-item summary { cursor: pointer; font-family: var(--display); font-size: 1.3rem; color: var(--body); padding: 14px 4px; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: '＋'; color: var(--gold); margin-right: 10px; }
.faq-item[open] summary::before { content: '－'; }
.faq-a { color: var(--sub); padding: 0 4px 16px 30px; font-size: .98rem; }

/* ===== Reader (Kajian) ===== */
.drawer-btn { font-family: var(--label); display: block; margin: 12px auto 0; background: var(--card-bg); border: 1px solid var(--card-line); color: var(--gold); padding: 10px 18px; border-radius: 999px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.reader { padding: 16px 16px 90px; }
.episode { max-width: 820px; margin: 0 auto; }

/* Navigator — drawer di mobile */
.nav-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .62); opacity: 0; pointer-events: none; transition: .28s; z-index: 110; }
.panel.drawer-open .nav-scrim { opacity: 1; pointer-events: auto; }
.navigator {
  position: fixed; top: 0; left: 0; height: 100%; width: 286px; z-index: 120; overflow-y: auto;
  background: var(--bg-warm); border-right: 1px solid var(--card-line); padding: 22px 18px;
  transform: translateX(-101%); transition: transform .28s ease;
}
.panel.drawer-open .navigator { transform: none; }
.nav-musim { margin-bottom: 22px; }
.nav-musim-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 6px 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.nm-label { font-family: var(--label); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-label); }
.nm-surah { font-family: var(--display); font-style: italic; color: var(--sub); font-size: .95rem; }
.nav-eps { display: flex; flex-direction: column; gap: 2px; }
.nav-ep { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 10px; padding: 10px 10px; cursor: pointer; color: var(--body); transition: .15s; }
.nav-ep:hover { background: var(--gold-soft); }
.nav-ep.active { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--card-line); }
.ne-no { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--gold-label); font-family: var(--label); font-size: .7rem; }
.ne-title { flex: 1; font-family: var(--display); font-size: 1.08rem; color: var(--body); }
.ne-title small { display: block; font-family: var(--font); font-size: .72rem; color: var(--sub); font-style: normal; }
.ne-status { flex: none; color: var(--gold); font-size: .85rem; }
.nav-ep.saved { background: var(--card-bg); margin-bottom: 8px; box-shadow: inset 0 0 0 1px var(--line); }

/* ===== Episode head ===== */
.ep-head { position: relative; text-align: center; padding: 8px 0 18px; }
.ep-kicker { font-family: var(--label); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-label); }
.ep-title { font-family: var(--display); font-weight: 700; font-size: 2rem; color: var(--gold); margin: 6px 0 12px; }
.ep-tema { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.ep-tema span { font-family: var(--label); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-label); background: var(--card-bg); padding: 4px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }

/* ===== Ayah Display ===== */
.ayah-display { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 24px 18px; margin-bottom: 22px; text-align: center; }
.ayah-arab { font-family: var(--arab); font-size: 2.7rem; line-height: 2.05; direction: rtl; }
.ayah-arab .aw { color: var(--gold); transition: color .4s, text-shadow .4s; }
.ayah-arab .aw.on { color: var(--gold); text-shadow: 0 0 26px rgba(242, 208, 96, .55), 0 0 64px rgba(242, 208, 96, .22); }
.ayah-arab .aw.off { color: var(--faded); text-shadow: none; }
.ayah-arab .aw-mark { color: var(--faded); font-size: .62em; }
.ayah-more { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.ayah-more summary { cursor: pointer; font-family: var(--label); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-label); list-style: none; }
.ayah-more summary::-webkit-details-marker { display: none; }
.ayah-latin { font-family: var(--display); font-style: italic; color: var(--gold-label); font-size: 1.1rem; margin-top: 12px; }
.ayah-arti { font-family: var(--display); font-style: italic; color: var(--body); font-size: 1.22rem; margin-top: 8px; }

/* ===== Kartu kajian ===== */
.kajian { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; margin-bottom: 16px; position: relative; box-shadow: var(--card-shadow); }
.kajian-label { font-family: var(--label); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-label); display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.kj-ico { font-size: 1rem; }
.kajian p { color: var(--reading); font-size: 1.18rem; line-height: 1.78; max-width: 64ch; }
.premium-tag { margin-left: auto; font-family: var(--label); font-size: .54rem; letter-spacing: .12em; color: var(--gold); border: 1px solid var(--card-line); padding: 2px 8px; border-radius: 999px; }
.kajian.locked .kajian-teaser { color: var(--sub); filter: blur(4px); user-select: none; opacity: .7; }
.kajian.locked { background: linear-gradient(180deg, var(--card-bg), transparent); }

/* Hikmah sebagai renungan (poin) */
.kajian.hikmah { box-shadow: inset 2px 0 0 var(--gold); }
.kajian.hikmah .poin { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.kajian.hikmah .poin li { font-family: var(--display); font-style: italic; font-size: 1.36rem; line-height: 1.5; color: var(--body); padding-left: 24px; position: relative; }
.kajian.hikmah .poin li::before { content: '✦'; position: absolute; left: 0; top: .12em; color: var(--gold); font-size: .8em; font-style: normal; }

/* ===== Premium CTA ===== */
.premium-cta { border: 1px solid var(--card-line); background: radial-gradient(130% 150% at 50% 0, var(--gold-soft), transparent 70%), var(--bg-warm); border-radius: var(--radius); padding: 34px 22px; text-align: center; margin: 8px 0 14px; }
.premium-cta .lk { font-size: 1.8rem; filter: drop-shadow(0 0 12px rgba(242, 208, 96, .5)); }
.premium-cta h4 { font-family: var(--display); font-weight: 700; font-size: 1.7rem; color: var(--gold); margin: 8px 0 6px; }
.premium-cta p { color: var(--sub); font-size: .98rem; margin-bottom: 18px; }

/* ===== Rujukan ulama ===== */
.scholar { border-left: 3px solid var(--gold); background: var(--card-bg); border-radius: 0 12px 12px 0; padding: 16px 18px; margin: 6px 0 14px; }
.scholar-label { font-family: var(--label); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-label); margin-bottom: 8px; }
.scholar-list { display: flex; flex-wrap: wrap; gap: 7px; }
.scholar-list span { font-family: var(--display); font-style: italic; color: var(--body); font-size: .96rem; }
.scholar-list span:not(:last-child)::after { content: '·'; color: var(--gold-label); margin-left: 7px; }

/* ===== Kajian kata demi kata ===== */
.kajian-label.section { font-size: .7rem; justify-content: center; margin: 26px 0 12px; }
.kata-card { background: linear-gradient(180deg, var(--bg-warm), var(--bg-alt)); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; margin-bottom: 16px; text-align: center; position: relative; box-shadow: var(--card-shadow); }
.kata-arab { font-family: var(--arab); font-size: 2.75rem; color: var(--gold); direction: rtl; text-shadow: 0 0 24px rgba(242, 208, 96, .42); }
.kata-gloss { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 10px 0 18px; }
.kg-latin { font-family: var(--label); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-label); }
.kg-arti { font-family: var(--display); font-style: italic; color: var(--sub); font-size: 1.18rem; }
.kata-gloss .premium-tag { margin: 0; }
.kata-card .poin { list-style: none; display: flex; flex-direction: column; gap: 11px; text-align: left; max-width: 560px; margin: 0 auto; }
.kata-card .poin li { font-family: var(--display); font-style: italic; font-size: 1.32rem; line-height: 1.6; color: var(--body); padding-left: 24px; position: relative; }
.kata-card .poin li::before { content: '✦'; position: absolute; left: 0; top: .12em; color: var(--gold); font-size: .8em; font-style: normal; }
.kata-card .viz, .kata-card .scholar { text-align: left; margin-top: 16px; }
.kata-card.locked .kajian-teaser { filter: blur(4px); color: var(--sub); user-select: none; opacity: .7; max-width: 540px; margin: 0 auto; }
/* Hikmah tiap kata — "punchline" reflektif (gaya postingan IG) */
.kata-hikmah { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.kh-label { display: block; font-family: var(--label); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-label); margin-bottom: 8px; }
.kata-hikmah p { font-family: var(--display); font-style: italic; font-size: 1.36rem; line-height: 1.5; color: var(--gold); max-width: 560px; margin: 0 auto; }

/* ===== Episode prev/next ===== */
.epnav { display: flex; gap: 12px; margin-top: 24px; }
.epnav-btn { flex: 1; background: var(--card-bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: .18s; }
.epnav-btn:hover { border-color: var(--card-line); }
.epnav-btn.next { text-align: right; }
.en-arah { display: block; font-family: var(--label); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-label); }
.en-title { font-family: var(--display); font-size: 1.12rem; color: var(--gold); }

/* ===== Grafik linguistik ===== */
.viz { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
@keyframes vizUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.viz-akar { text-align: center; padding: 8px 0 4px; }
.vk-huruf { font-family: var(--arab); font-size: 2.7rem; color: var(--gold); display: flex; justify-content: center; align-items: center; gap: 16px; direction: rtl; text-shadow: 0 0 24px rgba(242, 208, 96, .42); }
.vk-huruf i { color: var(--gold-label); font-style: normal; font-size: 1.1rem; opacity: .7; }
.vk-teks { font-family: var(--display); font-style: italic; color: var(--sub); font-size: 1.14rem; margin-top: 8px; }

.viz-banding { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 12px; }
@media (max-width: 480px) { .viz-banding { grid-template-columns: 1fr; } }
.vb-card { background: radial-gradient(130% 150% at 50% 0, var(--gold-soft), transparent 70%), var(--bg-warm); border: 1px solid var(--line); border-radius: 14px; padding: 18px 14px; text-align: center; animation: vizUp .55s ease backwards; animation-delay: calc(var(--d, 0) * .12s); }
.vb-card.chosen { border-color: var(--card-line); box-shadow: var(--glow); }
.vb-card.alt { opacity: .55; filter: grayscale(.55); }
.vb-card.alt .vb-arab { color: var(--sub); text-shadow: none; }
.vb-tag { font-family: var(--label); font-size: .52rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sub); margin-bottom: 8px; }
.vb-tag.chosen { color: var(--gold-label); }
.vb-arab { font-family: var(--arab); font-size: 2rem; color: var(--gold); direction: rtl; text-shadow: 0 0 20px rgba(242, 208, 96, .38); }
.vb-latin { font-family: var(--label); color: var(--gold-label); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
.vb-sifat { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.vb-sifat span { font-family: var(--display); font-style: italic; color: var(--sub); font-size: 1.02rem; line-height: 1.3; }

.viz-hitung { display: flex; flex-direction: column; gap: 10px; }
.vh-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--bg-warm); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; animation: vizUp .55s ease backwards; animation-delay: calc(var(--d, 0) * .14s); }
.vh-label { font-family: var(--display); font-size: 1.12rem; color: var(--body); }
.vh-nuansa { font-size: .8rem; color: var(--sub); margin-top: 2px; }
.vh-dots { display: flex; gap: 7px; flex: none; }
.vh-dots i { width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(135deg, #f6dd88, var(--gold)); box-shadow: var(--glow); }

.viz-taqdim { display: flex; flex-direction: column; gap: 6px; }
.vt-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vt-lbl { font-family: var(--label); font-size: .56rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-label); min-width: 72px; }
.vt-words { display: flex; gap: 8px; flex-wrap: wrap; }
.vt-words span { font-family: var(--arab); font-size: 1.35rem; padding: 5px 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--body); }
.vt-row.hl .vt-words span { border-color: var(--card-line); color: var(--gold); background: var(--gold-soft); text-shadow: 0 0 14px rgba(242, 208, 96, .35); }
.vt-arrow { color: var(--gold); font-size: 1.1rem; padding: 2px 0 2px 80px; }
.viz-note { font-family: var(--display); font-style: italic; color: var(--sub); font-size: 1.02rem; text-align: center; padding-top: 4px; }

/* ===== Modal ===== */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .74); backdrop-filter: blur(5px); display: none; align-items: center; justify-content: center; z-index: 200; padding: 18px; }
.modal.show { display: flex; animation: fade .22s; }
.modal-box { background: linear-gradient(180deg, var(--bg-warm), var(--bg-alt)); border: 1px solid var(--card-line); border-radius: 18px; max-width: 440px; width: 100%; padding: 30px 26px; box-shadow: 0 30px 90px rgba(0, 0, 0, .75); max-height: 90vh; overflow: auto; }
.modal-box h3 { font-family: var(--display); font-weight: 700; font-size: 1.8rem; color: var(--gold); text-align: center; margin-bottom: 4px; }
.modal-box .sub { font-family: var(--display); font-style: italic; text-align: center; color: var(--sub); font-size: 1.05rem; margin-bottom: 20px; }
.plan { border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; margin-bottom: 11px; cursor: pointer; transition: .18s; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card-bg); }
.plan:hover { border-color: var(--card-line); }
.plan.best { border-color: var(--gold); background: var(--gold-soft); }
.plan .p-name { font-family: var(--label); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--body); }
.plan .p-note { font-size: .8rem; color: var(--sub); margin-top: 3px; }
.plan .p-price { font-family: var(--display); font-weight: 700; color: var(--gold); font-size: 1.4rem; white-space: nowrap; }
.plan .p-badge { font-family: var(--label); font-size: .5rem; letter-spacing: .06em; color: #2a1f05; background: var(--gold); padding: 2px 7px; border-radius: 999px; }
.manual { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.manual summary { cursor: pointer; font-family: var(--label); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.field { display: flex; gap: 8px; margin-top: 12px; }
.field select, .field input { flex: 1; padding: 11px 12px; border: 1px solid var(--card-line); border-radius: 10px; font-size: .9rem; font-family: var(--font); background: var(--bg); color: var(--body); }
.field input::placeholder { color: var(--sub); opacity: .6; }

/* ===== Toast ===== */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--bg-warm); color: var(--body); padding: 14px 22px; border-radius: 12px; font-size: .9rem; border: 1px solid var(--card-line); box-shadow: 0 14px 44px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transition: .3s; z-index: 300; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Empty / footer ===== */
.kosong { text-align: center; color: var(--sub); font-family: var(--display); font-style: italic; font-size: 1.15rem; padding: 40px 20px; border: 1px dashed var(--line); border-radius: var(--radius); }
footer { text-align: center; padding: 10px 20px 40px; color: var(--sub); font-size: .82rem; margin-top: 20px; }
footer .note { font-size: .74rem; opacity: .8; margin-top: 8px; max-width: 640px; margin-left: auto; margin-right: auto; }

/* ===== Desktop: navigator jadi sidebar tetap ===== */
@media (min-width: 861px) {
  .drawer-btn { display: none; }
  .nav-scrim { display: none; }
  .reader { display: grid; grid-template-columns: 196px 1fr; gap: 34px; max-width: 1220px; margin: 0 auto; align-items: start; }
  .navigator { position: sticky; top: 76px; height: auto; max-height: calc(100vh - 96px); width: auto; transform: none; background: transparent; border-right: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 10px; }
  .episode { margin: 0; max-width: 920px; }

  /* Navigator dikompakkan agar area kajian lebih lega */
  .navigator .nav-musim { margin-bottom: 16px; }
  .navigator .nm-label { font-size: .56rem; letter-spacing: .14em; }
  .navigator .nm-surah { font-size: .8rem; }
  .navigator .nav-progress { margin-bottom: 8px; }
  .navigator .nav-ep { gap: 8px; padding: 6px 7px; border-radius: 8px; }
  .navigator .ne-no { width: 21px; height: 21px; font-size: .58rem; border-radius: 6px; }
  .navigator .ne-title { font-size: .82rem; line-height: 1.25; }
  .navigator .ne-status { font-size: .72rem; }
}

/* ===== Responsif kecil ===== */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; }
  .tabs { order: 3; flex-basis: 100%; }
  .hero { padding: 44px 20px 22px; }
  .hero h1 { font-size: 2.5rem; }
  .hero p { font-size: 1.2rem; }
  .hero-arab { font-size: 2.1rem; }
  .ayah-arab { font-size: 2.1rem; line-height: 1.95; }
}

/* ============================================================
   MODE TERANG (opsional) — tema sama, latar terang & nyaman dibaca
   ============================================================ */
:root[data-theme="light"] {
  --bg: #f4eede; --bg-alt: #fbf6ea; --bg-warm: #fffdf7;
  --gold: #a87f17; --gold-label: #8a6d12;
  --body: #2b2418; --sub: #5a4f3a; --faded: rgba(120, 95, 30, .3);
  --reading: #332b1d;       /* bacaan panjang di tema terang */
  --card-shadow: 0 8px 26px rgba(120, 95, 30, .10);
  --card-bg: rgba(168, 127, 23, .07); --card-line: rgba(120, 95, 30, .34); --line: rgba(120, 95, 30, .16);
  --gold-soft: rgba(168, 127, 23, .1); --glow: 0 0 16px rgba(168, 127, 23, .22);
  --shadow: 0 14px 40px rgba(120, 95, 30, .12);
}
:root[data-theme="light"] body { background: radial-gradient(1100px 640px at 50% -80px, #fdf8ec 0%, rgba(253, 248, 236, 0) 60%), var(--bg); }
:root[data-theme="light"] .topbar { background: rgba(244, 238, 222, .85); }
:root[data-theme="light"] .badge-pro, :root[data-theme="light"] .btn, :root[data-theme="light"] .btn.gold, :root[data-theme="light"] .vh-dots i { background: linear-gradient(135deg, #d8b452, #a87f17); color: #2a1f05; }
:root[data-theme="light"] .pc-ribbon, :root[data-theme="light"] .plan .p-badge { background: #a87f17; color: #fff; }
:root[data-theme="light"] .hero-arab, :root[data-theme="light"] .ayah-arab .aw.on, :root[data-theme="light"] .vk-huruf, :root[data-theme="light"] .vb-arab, :root[data-theme="light"] .pc-arab { text-shadow: none; }
:root[data-theme="light"] .navigator { background: var(--bg-warm); }
@media (min-width: 861px) { :root[data-theme="light"] .navigator { background: var(--card-bg); } }

/* ===== Quick wins: breadcrumb, ukuran teks, tandai-selesai, progress ===== */

/* Breadcrumb */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-family: var(--label); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-label); margin: 2px 2px 14px; }
.crumbs button { background: none; border: none; color: var(--gold-label); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 2px 0; }
.crumbs button:hover { color: var(--gold); }
.crumbs i { color: var(--faded); font-style: normal; }
.crumbs span[aria-current] { color: var(--gold); }

/* Kontrol ukuran teks (A− / A+) */
.font-ctl { display: inline-flex; align-items: center; gap: 4px; }
.font-ctl button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-warm); color: var(--gold); cursor: pointer; font-family: var(--label); font-size: .82rem; transition: .18s; }
.font-ctl button:hover:not(:disabled) { box-shadow: var(--glow); }
.font-ctl button:disabled { opacity: .35; cursor: default; }

/* Tombol "Tandai selesai" */
.btn-selesai { display: block; width: 100%; margin: 22px 0 4px; padding: 13px 18px; border-radius: 12px; border: 1px solid var(--card-line); background: var(--card-bg); color: var(--gold); font-family: var(--label); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: .18s; }
.btn-selesai:hover { box-shadow: var(--glow); }
.btn-selesai.done { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }

/* Progress per musim di navigator */
.nav-progress { display: flex; align-items: center; gap: 8px; padding: 0 6px; margin-bottom: 10px; }
.np-bar { flex: 1; height: 5px; border-radius: 999px; background: var(--gold-soft); overflow: hidden; }
.np-bar i { display: block; height: 100%; border-radius: 999px; background: var(--ok); transition: width .35s ease; }
.np-num { flex: none; font-family: var(--label); font-size: .58rem; letter-spacing: .08em; color: var(--gold-label); }

/* Episode yang sudah selesai */
.nav-ep.done .ne-no { background: var(--ok-soft); box-shadow: inset 0 0 0 1px var(--ok); color: var(--ok); }
.nav-ep.done .ne-title { color: var(--sub); }

/* Lapisan "Asal-Usul Kata" (etimologi klasik + gambaran konkret) */
.asal { margin: 14px 0 4px; padding: 16px 16px 14px; border: 1px solid var(--line); border-left: 3px solid var(--gold-label); border-radius: 12px; background: linear-gradient(180deg, var(--gold-soft), transparent 90%); }
.asal-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 9px; }
.asal-label { font-family: var(--label); font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-label); }
.as-akar { font-family: var(--arab); font-size: 1.15rem; color: var(--gold); }
.as-akar i { color: var(--faded); font-style: normal; margin: 0 3px; }
.as-makna { font-family: var(--display); font-style: italic; font-size: 1rem; color: var(--sub); }
.asal-gambar { font-family: var(--font); font-size: 1.08rem; line-height: 1.8; color: var(--reading); }

/* Petunjuk kecil di form aktivasi Order ID */
.manual-hint { font-size: .82rem; color: var(--sub); line-height: 1.55; margin-top: 10px; }
.manual-hint b { color: var(--gold-label); font-weight: 600; }

/* ===== Panduan visual: penekanan kata yang konsisten & lembut di mata =====
   <b> di dalam teks bacaan → emas lembut + tebal, BUKAN putih menyolok.
   Dipakai seragam di poin, asal-usul, dan prosa kajian. */
.kata-card .poin li b,
.kajian.hikmah .poin li b,
.asal-gambar b,
.kajian p b,
.kata-hikmah p b { color: var(--gold-label); font-weight: 600; font-style: normal; }