:root {
  --bg: #f7f5ef;
  --card: #ffffff;
  --ink: #1d2a24;
  --muted: #6b7a72;
  --line: #e6e2d8;
  --accent: #0f766e;
  --accent-soft: #e3f1ee;
  --gold: #b7892f;
  --rec: #dc2626;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.05);
  --arab: "Amiri Quran", "Amiri", "Scheherazade New", "Traditional Arabic", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111715; --card: #19211e; --ink: #e8eee9; --muted: #93a39a;
    --line: #2a3530; --accent: #2dd4bf; --accent-soft: #163330; --gold: #d8b061;
    --shadow: none;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 16px/1.6 var(--ui);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }

/* Header */
.top { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.brand { font-weight: 700; letter-spacing: -.01em; }
.brand b { color: var(--accent); }
.back { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--card); }
.top .title { flex: 1; min-width: 0; }
.top .title h1 { font-size: 17px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .title small { color: var(--muted); font-size: 13px; }

/* Daftar surah */
.hero { padding: 28px 0 8px; }
.hero h2 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.02em; }
.hero p { margin: 0 0 16px; color: var(--muted); }
.search { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font-size: 16px; }
.search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; padding: 16px 0 40px; }
.s-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.s-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.s-no { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 14px; }
.s-info { flex: 1; min-width: 0; }
.s-info b { display: block; }
.s-info small { color: var(--muted); font-size: 13px; }
.s-ar { font-family: var(--arab); font-size: 22px; color: var(--accent); }

/* Detail surah */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 14px; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.basmalah { text-align: center; font-family: var(--arab); font-size: 30px; padding: 18px 0 6px; color: var(--accent); }

.ayat { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); transition: border-color .2s; }
.ayat.playing { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.a-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.a-no { min-width: 34px; height: 34px; padding: 0 8px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--gold); color: var(--gold); font-weight: 700; font-size: 13px; margin-right: auto; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 14px; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.rec { color: var(--rec); }
.btn.rec.active { background: var(--rec); border-color: var(--rec); color: #fff; }

.arab { direction: rtl; text-align: right; font-family: var(--arab); font-size: 30px; line-height: 2.1; }
.words { direction: rtl; display: flex; flex-wrap: wrap; gap: 6px 4px; }
.w { display: inline-flex; flex-direction: column; align-items: center; padding: 4px 6px; border-radius: 8px; }
.w:hover { background: var(--accent-soft); }
.w .ar { font-family: var(--arab); font-size: 30px; line-height: 1.9; }
.w .tr { direction: ltr; font-size: 12px; line-height: 1.3; color: var(--muted); text-align: center; max-width: 130px; }
.no-wbw .w .tr { display: none; }
.end { font-family: var(--arab); font-size: 26px; color: var(--gold); align-self: center; padding: 0 4px; }
.terjemah { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--ink); }
.no-tr .terjemah { display: none; }

/* Panel rekam */
.recbox { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--accent-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.recbox audio { width: 100%; height: 40px; }
.timer { font-variant-numeric: tabular-nums; font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rec); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.note { font-size: 13px; color: var(--muted); }

.nav { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0 48px; }
.state { text-align: center; color: var(--muted); padding: 60px 0; }

@media (max-width: 520px) {
  .arab, .w .ar { font-size: 26px; }
  .btn span.lbl { display: none; }
}

/* V0.2 — hasil evaluasi AI */
.hasil { width: 100%; }
.hasil:empty { display: none; }
.hasil-ok { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.hasil-ok .skor { flex: none; font-size: 30px; font-weight: 700; line-height: 1; }
.hasil-ok .skor small { font-size: 13px; color: var(--muted); font-weight: 600; }
.hasil-ok p { margin: 4px 0 0; }
.hasil-ok.baik { border-color: var(--accent); }
.hasil-ok.baik .skor, .hasil-ok.baik b { color: var(--accent); }
.hasil-ok.ulang { border-color: var(--gold); }
.hasil-ok.ulang .skor, .hasil-ok.ulang b { color: var(--gold); }
.hasil-err { padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--rec); color: var(--rec); font-size: 14px; }
.btn:disabled { opacity: .6; cursor: wait; }

/* V0.4 — audio per kata, sorot kata salah, bandingkan */
.w[data-audio] { cursor: pointer; }
.w.sounding { background: var(--accent-soft); box-shadow: inset 0 -3px 0 var(--accent); }
.w.salah { background: rgba(220, 38, 38, .10); box-shadow: inset 0 -3px 0 var(--rec); }
.w.salah .ar { color: var(--rec); }
.banding-st:empty { display: none; }

/* V0.4.1 — tombol ucapkan terjemah */
.chip.na { opacity: .5; text-decoration: line-through; }

/* V0.5 — menu Adzan */
[hidden] { display: none !important; }
.w[data-tts] { cursor: pointer; }
.latin { margin-top: 8px; font-style: italic; color: var(--muted); }
select.chip { appearance: auto; max-width: 100%; }
.menu-adzan { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 14px;
  background: var(--accent-soft); border: 1px solid var(--line); }
.menu-adzan b { display: block; }
.menu-adzan small { color: var(--muted); }
.menu-adzan .ikon { font-size: 26px; }

/* V0.6 — putar semua, pengulangan, sorot kata mengikuti audio */
.toolbar { position: sticky; top: 61px; z-index: 5; background: var(--bg); align-items: center; }
.chip.putar { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
#statusPutar { font-variant-numeric: tabular-nums; }
#statusPutar:empty { display: none; }
.w.baca { background: var(--accent-soft); box-shadow: inset 0 -3px 0 var(--accent); }
.w.baca .ar, .w.baca .tr { color: var(--accent); }
.w.baca .tr { font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .w { transition: background-color .12s, color .12s; } }
@media (max-width: 560px) {
  .toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 10px; margin-inline: -16px; padding-inline: 16px; }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar > * { flex: none; }
}

/* V0.7 — mode hafalan, kecepatan, footer */
.hafalan .ayat:not(.terbuka) .w:not(.intip) .ar,
.hafalan .ayat:not(.terbuka) .arab { filter: blur(9px); opacity: .55; user-select: none; }
.hafalan .ayat:not(.terbuka) .latin { visibility: hidden; }
.hafalan .ayat:not(.terbuka) .w { cursor: pointer; }
.w .ar { transition: filter .2s, opacity .2s; }
#tHafalan.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.kaki { padding: 8px 0 40px; text-align: center; color: var(--muted); font-size: 13px; }
.kaki a { color: var(--accent); }

/* V0.8 — akun, login, riwayat, panel ustadz & admin */
.akun { position: relative; margin-left: auto; flex: none; }
.akun summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.akun summary::-webkit-details-marker { display: none; }
.akun .ava { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; }
.akun .nm { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.akun-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.12); padding: 6px; z-index: 20; }
.akun-menu a, .akun-menu button { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; border: 0; background: none; color: var(--ink); font-size: 14px; }
.akun-menu a:hover, .akun-menu button:hover { background: var(--accent-soft); }
.akun-info { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.akun-info b { display: block; }
.akun-info small { color: var(--muted); text-transform: capitalize; }
@media (max-width: 560px) { .akun .nm { display: none; } .akun summary { padding: 3px; } }

.kotak { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); margin-bottom: 14px; }
.kotak h2 { font-size: 18px; margin: 0 0 12px; }
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.form label small { font-weight: 400; color: var(--muted); }
.inp { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; }
.inp:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
textarea.inp { min-height: 80px; resize: vertical; }
.tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.tabs button { flex: 1; padding: 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-weight: 600; }
.tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pesan { padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.pesan:empty { display: none; }
.pesan.err { border: 1px solid var(--rec); color: var(--rec); }
.pesan.ok { border: 1px solid var(--accent); color: var(--accent); background: var(--accent-soft); }
.login-wrap { max-width: 420px; margin: 0 auto; padding: 32px 16px 48px; }
.login-wrap .brand { font-size: 24px; text-align: center; margin-bottom: 4px; }
.login-wrap .sub { text-align: center; color: var(--muted); margin: 0 0 20px; }

.statistik { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.stat b { display: block; font-size: 26px; line-height: 1.2; color: var(--accent); }
.stat small { color: var(--muted); font-size: 13px; }
.prog { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.prog:last-child { border-bottom: 0; }
.prog .baris { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.prog .baris small { color: var(--muted); }
.bar { height: 8px; border-radius: 99px; background: var(--accent-soft); overflow: hidden; position: relative; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--gold); border-radius: 99px; opacity: .5; }
.bar i + i { background: var(--accent); opacity: 1; }
.daftar { display: grid; gap: 0; }
.item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.item:last-child { border-bottom: 0; }
.item .isi { flex: 1; min-width: 0; }
.item .isi small { display: block; color: var(--muted); font-size: 12px; }
.lencana { flex: none; min-width: 42px; text-align: center; padding: 3px 8px; border-radius: 99px; font-weight: 700; font-size: 13px; }
.lencana.baik { background: var(--accent-soft); color: var(--accent); }
.lencana.ulang { background: rgba(183,137,47,.15); color: var(--gold); }
.lencana.tunggu { background: var(--bg); color: var(--muted); border: 1px solid var(--line); font-weight: 600; }
.rek { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 10px; background: var(--card); }
.rek-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.rek-head b { margin-right: auto; }
.rek audio { width: 100%; height: 40px; margin: 6px 0; }
.rek .catatan { white-space: pre-wrap; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 14px; margin-top: 8px; }
.rek .catatan.santri { background: var(--bg); }
.rek .form { margin-top: 10px; grid-template-columns: 110px 1fr; align-items: start; }
.rek .form .aksi { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
@media (max-width: 520px) { .rek .form { grid-template-columns: 1fr; } }
.tabel-wrap { overflow-x: auto; }
table.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th, .tabel td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabel th { color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; }
.tabel td small { display: block; color: var(--muted); font-size: 12px; }
.tabel select.inp { padding: 6px 8px; width: auto; }
.st-menunggu { color: var(--gold); font-weight: 600; }
.st-nonaktif, .st-ditolak { color: var(--rec); font-weight: 600; }
.kirim-ustadz { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kirim-ustadz .inp { flex: 1; min-width: 180px; }
.kosong { color: var(--muted); font-size: 14px; padding: 8px 0; }
.form .inp { font-weight: 400; }
.tabs button { font-size: 14px; line-height: 1.3; }

/* V0.9 — Belajar Dasar & warna tajwid */
:root {
  --tj-abu: #9a9a9a; --tj-mad2: #3b6fe0; --tj-madj: #4050ff; --tj-madw: #1f3fb0; --tj-madl: #0a1890;
  --tj-ghunnah: #e8710a; --tj-ikhfa: #9400a8; --tj-ikhfas: #c4009e; --tj-idg: #13866a; --tj-idgw: #3f8f00;
  --tj-idgs: #4f9e00; --tj-iqlab: #0b9fd8; --tj-qalqalah: #d4000b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tj-abu: #7d8580; --tj-mad2: #7aa2ff; --tj-madj: #8f97ff; --tj-madw: #6f8cff; --tj-madl: #a5b0ff;
    --tj-ghunnah: #ff9a45; --tj-ikhfa: #d77be6; --tj-ikhfas: #f07ad8; --tj-idg: #3fd2a8; --tj-idgw: #8fd14f;
    --tj-idgs: #9ade5a; --tj-iqlab: #4cc8f5; --tj-qalqalah: #ff5a5f;
  }
}
.tj-ham_wasl, .tj-slnt, .tj-laam_shamsiyah, .tj-idgham_mutajanisayn, .tj-idgham_mutaqaribayn { color: var(--tj-abu); }
.tj-madda_normal { color: var(--tj-mad2); }
.tj-madda_permissible { color: var(--tj-madj); }
.tj-madda_obligatory { color: var(--tj-madw); }
.tj-madda_necessary { color: var(--tj-madl); }
.tj-ghunnah { color: var(--tj-ghunnah); }
.tj-ikhafa { color: var(--tj-ikhfa); }
.tj-ikhafa_shafawi { color: var(--tj-ikhfas); }
.tj-idgham_ghunnah { color: var(--tj-idg); }
.tj-idgham_wo_ghunnah { color: var(--tj-idgw); }
.tj-idgham_shafawi { color: var(--tj-idgs); }
.tj-iqlab { color: var(--tj-iqlab); }
.tj-qalaqah { color: var(--tj-qalqalah); }
.titik { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 13px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.legenda a { color: var(--accent); font-weight: 600; }
#tTajwid.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.menu-belajar { margin-top: 10px; }
.belajar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 16px 0 40px; }
.belajar-kartu { display: grid; gap: 6px; padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.belajar-kartu:hover { border-color: var(--accent); transform: translateY(-1px); }
.belajar-kartu .ar-besar { font-family: var(--arab); font-size: 34px; line-height: 1.4; color: var(--accent); direction: rtl; }
.belajar-kartu b { font-size: 17px; }
.belajar-kartu small { color: var(--muted); }

.huruf-grid { direction: rtl; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.huruf { display: grid; justify-items: center; gap: 0; padding: 8px 4px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.huruf:hover, .huruf:focus-visible { border-color: var(--accent); }
.huruf .ar { font-family: var(--arab); font-size: 38px; line-height: 1.5; }
.huruf small { direction: ltr; font-size: 12px; color: var(--muted); }
.huruf.redup { opacity: .45; }
.ar-tombol { font-family: var(--arab); font-size: 30px; line-height: 1.6; padding: 4px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); display: inline-grid; justify-items: center; cursor: pointer; }
.ar-tombol small { font-family: var(--ui); font-size: 12px; color: var(--muted); line-height: 1.2; }
.ar-tombol[disabled] { cursor: default; }
.ar-tombol.main, .huruf.main, .item-iqra.main { border-color: var(--accent); background: var(--accent-soft); }
.baris-ar { direction: rtl; display: flex; flex-wrap: wrap; gap: 8px; }
.bentuk { direction: rtl; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.bentuk div { padding: 6px; border: 1px solid var(--line); border-radius: 12px; }
.bentuk .ar { font-family: var(--arab); font-size: 36px; line-height: 1.6; display: block; }
.bentuk small { color: var(--muted); font-size: 12px; }
.lencana-sifat { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; margin: 0 6px 6px 0; }

dialog.lembar { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); }
dialog.lembar::backdrop { background: rgba(0,0,0,.45); }
.lembar-isi { padding: 18px; display: grid; gap: 14px; }
.lembar-kepala { display: flex; align-items: center; gap: 14px; }
.lembar-kepala .ar { font-family: var(--arab); font-size: 64px; line-height: 1.3; color: var(--accent); }
.lembar-kepala b { font-size: 20px; display: block; }
.lembar-kepala .tutup { margin-left: auto; align-self: flex-start; }
.lembar h3 { margin: 0 0 6px; font-size: 14px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.contoh { padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); display: grid; gap: 4px; }
.contoh .ayat-mini { direction: rtl; font-family: var(--arab); font-size: 24px; line-height: 2; }
.contoh .ayat-mini .sorot { background: var(--accent-soft); border-radius: 6px; padding: 0 3px; color: var(--accent); }
.contoh .ayat-mini .sorot[class*="tj-"] { background: color-mix(in srgb, currentColor 14%, transparent); }
.contoh .ket-contoh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.contoh .ket-contoh a { color: var(--accent); }

.makhraj-svg { width: 100%; max-width: 420px; display: block; margin: 0 auto; }
.makhraj-svg .garis { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.makhraj-svg .lidah { fill: color-mix(in srgb, var(--rec) 22%, transparent); stroke: var(--rec); stroke-width: 1.5; }
.makhraj-svg .gigi { fill: var(--card); stroke: var(--muted); stroke-width: 1.5; }
.makhraj-svg .zona { cursor: pointer; }
.makhraj-svg .zona circle { stroke: var(--card); stroke-width: 3; }
.makhraj-svg .zona text { fill: #fff; font: 700 14px var(--ui); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.zona-1 { fill: #0f766e; } .zona-2 { fill: #b7892f; } .zona-3 { fill: #dc2626; } .zona-4 { fill: #7c3aed; } .zona-5 { fill: #0284c7; }
.nomor-zona { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13px; flex: none; }
.rinci { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: start; padding: 12px 0; border-top: 1px dashed var(--line); }
.rinci .baris-ar { min-width: 60px; }
.rinci .baris-ar .ar-tombol { font-size: 34px; }

.tahap-pilih { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.iqra-grid { direction: rtl; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.item-iqra { display: grid; justify-items: center; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.item-iqra .ar { font-family: var(--arab); font-size: 32px; line-height: 1.7; }
.item-iqra small { direction: ltr; color: var(--muted); font-size: 12px; }
.item-iqra.tanpa-audio { cursor: default; }
.bagian-kepala { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; }
.bagian-kepala h3 { margin: 0; font-size: 16px; margin-right: auto; }

.hukum { padding: 14px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.hukum:first-of-type { border-top: 0; padding-top: 0; }
.hukum h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.hukum p { margin: 0; }

.kuis { text-align: center; display: grid; gap: 14px; justify-items: center; }
.kuis .soal { font-family: var(--arab); font-size: 96px; line-height: 1.3; color: var(--accent); }
.kuis .pilihan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 380px; }
.kuis .pilihan button { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 600; }
.kuis .pilihan button.benar { background: var(--accent); border-color: var(--accent); color: #fff; }
.kuis .pilihan button.salah { background: var(--rec); border-color: var(--rec); color: #fff; }
.nz-1 { background: #0f766e; } .nz-2 { background: #b7892f; } .nz-3 { background: #dc2626; } .nz-4 { background: #7c3aed; } .nz-5 { background: #0284c7; }
.baris-ar.tiga { display: grid; grid-template-columns: repeat(3, 1fr); }
.legenda-zona { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 10px; font-size: 14px; }
.legenda-zona a { display: inline-flex; align-items: center; gap: 6px; }
.legenda-zona small { color: var(--muted); }
.legenda-zona .nomor-zona { width: 22px; height: 22px; font-size: 12px; }
#legendaTajwid { display: block; padding: 8px 12px; }
#legendaTajwid[hidden] { display: none; }
#legendaTajwid summary { cursor: pointer; font-weight: 600; }
.legenda-isi { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 8px; }

/* V0.10 — Mushaf 15 baris & murajaah */
.mushaf-bar { flex-wrap: wrap; }
.mushaf-bar label.chip input { width: 64px; border: 0; background: transparent; color: var(--ink); font: inherit; }
#mBaca.on, #mMurajaah.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.mushaf-wrap { position: relative; display: flex; align-items: stretch; gap: 6px; }
.mushaf { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  padding: 14px 12px; font-family: var(--arab); font-size: 20px; line-height: 2.05; position: relative;
  outline: 3px double color-mix(in srgb, var(--gold) 55%, transparent); outline-offset: -8px; }
.mushaf .state { font-family: var(--ui); font-size: 15px; direction: ltr; }
.m-baris { display: flex; justify-content: space-between; align-items: baseline; white-space: nowrap; min-height: 2.05em; gap: .12em; }
.mushaf.tengah .m-baris { justify-content: center; gap: .25em; }
.mushaf.ukur .m-baris { width: max-content; justify-content: flex-start; gap: .25em; }
.m-baris.kosong { min-height: 2.05em; }
.mk { border-radius: 4px; cursor: pointer; transition: color .15s, background-color .15s; }
.mk.bunyi { background: var(--accent-soft); color: var(--accent); }
.ma { color: var(--gold); font-size: .85em; flex: none; }
.m-judul { display: grid; justify-items: center; min-height: 2.05em; align-content: center; }
.m-judul span { padding: 0 1.4em; border: 2px solid color-mix(in srgb, var(--gold) 70%, transparent); border-radius: 999px; color: var(--accent); line-height: 1.6; font-size: .95em; background: var(--accent-soft); }
.m-judul small { font-family: var(--ui); font-size: 11px; color: var(--muted); line-height: 1.2; }
.m-basmalah { text-align: center; color: var(--accent); min-height: 2.05em; }
.hal-nav { flex: none; width: 34px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 26px; }
.hal-nav:disabled { opacity: .3; cursor: default; }
.hal-kaki { text-align: center; font-family: var(--arab); color: var(--muted); padding: 6px 0 40px; font-size: 18px; }
@media (max-width: 560px) {
  .hal-nav { display: none; }
  .mushaf { padding: 12px 8px; border-radius: 10px; }
  .hal-mushaf .wrap { padding: 0 8px; }
}

.murajaah-bar { position: sticky; top: 61px; z-index: 6; background: var(--bg); padding: 8px 0 10px; display: grid; gap: 8px; }
.m-stat { display: flex; gap: 16px; font-size: 14px; color: var(--muted); }
.m-stat b { color: var(--rec); font-size: 16px; }
.m-stat span:nth-child(2) b { color: var(--gold); }
.m-stat span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; }
.m-tombol { display: flex; flex-wrap: wrap; gap: 6px; }
.m-tombol .btn { padding: 6px 10px; }
#mMic.rekam { background: var(--rec); border-color: var(--rec); }
#mInfo:empty { display: none; }
.murajaah .mk.tutup { color: transparent; background: color-mix(in srgb, var(--muted) 9%, transparent); }
.murajaah .mk.tutup::selection { background: transparent; }
.murajaah .mk.benar { color: var(--ink); }
.murajaah .mk.intip { color: var(--gold); }
.murajaah .mk.salah { color: var(--rec); }
.murajaah .mk.lewat { color: var(--muted); opacity: .6; }
.murajaah .mk.baru { color: var(--accent); }
.murajaah .mk.salah.baru { color: var(--rec); }
.murajaah .mk.kedip { animation: kedip .9s 2; }
@keyframes kedip { 50% { background: rgba(220, 38, 38, .35); } }
.mushaf-bar { position: static; }

/* V0.11 — Cari ayat */
.cari-form { display: flex; gap: 8px; }
.cari-form .search { flex: 1; }
.cari-form .search[dir="rtl"] { font-family: var(--arab); font-size: 22px; padding-block: 6px; }
.cari-opsi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; }
.cari-opsi select.chip { max-width: 260px; }
#tKeyboard.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.keyboard-ar { direction: rtl; display: grid; gap: 6px; padding: 10px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.keyboard-ar div { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.keyboard-ar button { min-width: 38px; height: 42px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-family: var(--arab); font-size: 22px; line-height: 1; }
.keyboard-ar button:active { background: var(--accent-soft); }
.keyboard-ar .lebar { min-width: 160px; font-family: var(--ui); font-size: 14px; }
.keyboard-ar .cari, .keyboard-ar [data-hapus] { font-family: var(--ui); font-size: 15px; min-width: 70px; }
.keyboard-ar .cari { background: var(--accent); border-color: var(--accent); color: #fff; }
.hasil-cari .arab { font-size: 26px; }
.hasil-cari .a-head a.a-no { text-decoration: none; }
mark { background: color-mix(in srgb, var(--gold) 30%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; }
.arab mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.cari-isi { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--accent); color: var(--accent); background: var(--card); }
.cari-isi:empty { display: none; }

/* V0.12 — Murajaah Planner */
.sapa { display: grid; gap: 12px; }
.ringkas-angka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ringkas-angka div { background: var(--bg); border-radius: 12px; padding: 8px 10px; }
.ringkas-angka b { display: block; font-size: 22px; color: var(--accent); line-height: 1.2; }
.ringkas-angka small { color: var(--muted); font-size: 12px; }
.minggu { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.hari-titik { display: grid; justify-items: center; padding: 6px 0; border-radius: 10px; background: var(--bg); border: 1px solid transparent; }
.hari-titik small { font-size: 11px; color: var(--muted); }
.hari-titik span { font-weight: 700; font-size: 14px; }
.hari-titik.sebagian { background: color-mix(in srgb, var(--gold) 18%, transparent); }
.hari-titik.penuh { background: var(--accent); }
.hari-titik.penuh small, .hari-titik.penuh span { color: #fff; }
.hari-titik.ini { border-color: var(--accent); }
.tugas { --w: var(--accent); background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--w); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow); display: grid; gap: 6px; }
.tugas.ungu { --w: #7c3aed; } .tugas.biru { --w: #2563eb; } .tugas.hijau { --w: #059669; } .tugas.oranye { --w: #ea580c; }
.tugas.selesai { opacity: .72; }
.tugas.selesai .tugas-isi { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--w) 60%, transparent); }
.tugas-kepala { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tugas-isi { font-weight: 600; }
.tugas-aksi { display: flex; flex-wrap: wrap; gap: 6px; }
.cek { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--w); background: transparent; color: #fff; font-weight: 700; font-size: 18px; display: grid; place-items: center; flex: none; }
.cek[aria-pressed="true"], .cek.on { background: var(--w); }
.tag-hijau { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; }
.judul-kecil { font-size: 15px; margin: 16px 0 8px; }
.juz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.juz { position: relative; display: grid; justify-items: center; padding: 8px 2px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); }
.juz b { font-size: 17px; color: var(--ink); }
.juz small { font-size: 11px; }
.juz.kuat { background: color-mix(in srgb, var(--accent) 16%, var(--card)); border-color: var(--accent); }
.juz.sedang { background: color-mix(in srgb, var(--gold) 18%, var(--card)); border-color: var(--gold); }
.juz.lemah { background: color-mix(in srgb, var(--rec) 12%, var(--card)); border-color: var(--rec); }
.juz.aktif { box-shadow: 0 0 0 3px color-mix(in srgb, #2563eb 45%, transparent); }
.juz i { position: absolute; top: 2px; right: 5px; font-style: normal; font-size: 12px; color: var(--accent); font-weight: 700; }
.juz em { position: absolute; bottom: -7px; font-style: normal; font-size: 9px; background: #2563eb; color: #fff; border-radius: 99px; padding: 0 5px; }
.juz:disabled { cursor: default; }
.juz-chip { display: inline-block; min-width: 24px; text-align: center; border-radius: 6px; padding: 0 5px; font-weight: 700; font-size: 12px; background: var(--bg); border: 1px solid var(--line); }
.juz-chip.kuat { border-color: var(--accent); color: var(--accent); } .juz-chip.sedang { border-color: var(--gold); color: var(--gold); } .juz-chip.lemah { border-color: var(--rec); color: var(--rec); }
.pilih-kekuatan { display: grid; gap: 8px; }
.pilih-kekuatan button { text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); display: grid; }
.pilih-kekuatan button small { color: var(--muted); }
.pilih-kekuatan .kuat.on { border-color: var(--accent); background: var(--accent-soft); }
.pilih-kekuatan .sedang.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 15%, transparent); }
.pilih-kekuatan .lemah.on { border-color: var(--rec); background: color-mix(in srgb, var(--rec) 10%, transparent); }
.pilih-kekuatan button.on:not(.kuat):not(.sedang):not(.lemah) { border-color: var(--ink); }
.siklus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 10px; }
.siklus-hari { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 6px; align-content: start; }
.siklus-hari.ini { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.siklus-kepala { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.siklus-kepala small { color: var(--muted); font-size: 12px; }
.seg { display: block; padding: 6px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; background: var(--bg); border-left: 4px solid var(--line); }
.seg.kuat { border-left-color: var(--accent); } .seg.sedang { border-left-color: var(--gold); } .seg.lemah { border-left-color: var(--rec); }
.panduan summary { cursor: pointer; }
.panduan ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.statistik.kecil { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.statistik.kecil .stat { padding: 8px 6px; text-align: center; }
.statistik.kecil .stat b { font-size: 20px; }
.statistik.kecil .stat small { font-size: 11px; }
.mk.target { background: color-mix(in srgb, var(--gold) 24%, transparent); box-shadow: inset 0 -2px 0 var(--gold); }
.murajaah .mk.target.tutup { background: color-mix(in srgb, var(--gold) 14%, transparent); }

/* V0.12.2 — huruf Arab tunggal tidak menimpa label (Amiri Quran punya ekor & kasrah yang dalam) */
.huruf .ar { line-height: 2.3; display: block; }
.huruf small { margin-top: -4px; }
.ar-tombol { line-height: 2.3; padding: 0 14px 6px; }
.ar-tombol .ar { display: block; line-height: 2; padding-bottom: .3em; }
.bentuk .ar { line-height: 2.3; }
.item-iqra .ar { display: block; line-height: 2; padding-bottom: .3em; }
.kuis .soal { line-height: 1.6; padding-bottom: .25em; }
.lembar-kepala .ar-tombol { line-height: 1.9 !important; padding: 0 22px 8px !important; }
.keyboard-ar button { height: 48px; line-height: 1.7; padding: 0; overflow: hidden; }
.rinci .baris-ar .ar-tombol { line-height: 2.2; padding-bottom: 4px; }
.w .ar { line-height: 1.8; padding-bottom: .3em; }

/* V0.13 — Waktu shalat & kalender Hijriah */
.waktu-hero { display: grid; gap: 12px; background: linear-gradient(135deg, var(--accent-soft), var(--card)); }
.tanggal-dua { display: grid; }
.tanggal-dua b { font-size: 17px; }
.tanggal-dua span { color: var(--accent); font-weight: 600; }
.berikut { display: grid; }
.berikut small { color: var(--muted); font-size: 13px; }
.berikut b { font-size: 32px; line-height: 1.2; letter-spacing: -.02em; }
.berikut span { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.lokasi-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.lokasi-baris > span { margin-right: auto; }
.lokasi-baris select.chip { max-width: 170px; }
.jadwal-hari { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.jw { display: grid; justify-items: center; padding: 10px 4px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.jw small { color: var(--muted); font-size: 12px; }
.jw b { font-size: 19px; font-variant-numeric: tabular-nums; }
.jw:not(.wajib) b { color: var(--muted); font-weight: 600; font-size: 16px; }
.jw.kini { background: var(--accent-soft); border-color: var(--accent); }
.jw.kini small::after { content: ' · sekarang'; }
.jw.berikut { border: 2px solid var(--gold); }
.jw.berikut small::after { content: ' · berikutnya'; color: var(--gold); }
.kal-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; text-align: center; }
.kal-kepala b { display: block; font-size: 17px; }
.kal-kepala small { color: var(--accent); font-weight: 600; font-size: 13px; }
.kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal-hari { text-align: center; font-size: 12px; color: var(--muted); font-weight: 600; padding: 4px 0; }
.kal-tgl { position: relative; display: grid; justify-items: center; padding: 6px 2px; min-height: 52px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.kal-tgl b { font-size: 15px; }
.kal-tgl small { font-size: 10px; color: var(--accent); white-space: nowrap; }
.kal-tgl i { position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.kal-tgl.jumat b { color: var(--accent); }
.kal-tgl.besar { background: color-mix(in srgb, var(--gold) 16%, var(--card)); }
.kal-tgl.ini { border: 2px solid var(--accent); }
.kal-tgl.pilih { background: var(--accent); }
.kal-tgl.pilih b, .kal-tgl.pilih small { color: #fff; }
.kal-detail { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--bg); font-size: 14px; }
.kal-catatan { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.kal-catatan span { padding: 2px 10px; border-radius: 99px; background: color-mix(in srgb, var(--gold) 20%, transparent); font-size: 12px; font-weight: 600; }
.jadwal-mini { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-variant-numeric: tabular-nums; font-weight: 600; }
.jadwal-mini small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
.kal-opsi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.kal-opsi label { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.jadwal-bulan td, .jadwal-bulan th { text-align: center; font-variant-numeric: tabular-nums; padding: 6px 5px; }
.jadwal-bulan tr.jumat td { background: var(--accent-soft); }
.waktu-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 14px; }
.waktu-mini:empty { display: none; }
.waktu-mini .wm-tgl { flex: 1 1 220px; }
.waktu-mini .wm-tgl b { display: block; }
.waktu-mini .wm-tgl span { color: var(--accent); font-weight: 600; }
.waktu-mini .wm-shalat { text-align: right; }
.waktu-mini .wm-shalat b { display: block; font-size: 18px; }
.waktu-mini .wm-shalat span { color: var(--gold); font-size: 13px; font-weight: 600; }
@media (max-width: 420px) { .jadwal-hari { grid-template-columns: repeat(4, 1fr); gap: 5px; } .jw b { font-size: 16px; } .waktu-mini .wm-shalat { text-align: left; } }
@media print { .top, .waktu-hero, .kal-grid, .kal-detail, .kal-opsi, .kal-kepala button, .akun { display: none !important; } }

/* =====================================================================
   V0.14 — Tampilan baru: porselen + zamrud, aksen emas daun (ornamen mushaf),
   huruf Plus Jakarta Sans, bintang delapan (rub' al-hizb) sebagai ciri khas.
   ===================================================================== */
:root {
  --bg: #f2f5f4; --card: #ffffff; --ink: #13221e; --muted: #5d6e68; --line: #dce4e1;
  --accent: #0b6b5b; --accent-soft: #e2f0ec; --gold: #b8892c; --rec: #d23a3a;
  --pita: #0a2f29; --pita-ink: #e9f3ef; --pita-muted: #9fc1b6;
  --shadow: 0 1px 2px rgba(19, 34, 30, .05);
  --radius: 14px;
  --ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1513; --card: #13201d; --ink: #e6efeb; --muted: #8fa59d; --line: #24332f;
    --accent: #3fc6a8; --accent-soft: #15322c; --gold: #d6aa52; --rec: #ff6b6b;
    --pita: #08221d; --pita-ink: #e6efeb; --pita-muted: #8fb5a8; --shadow: none;
  }
}
body { font-family: var(--ui); font-size: 15.5px; letter-spacing: -.003em; }
h1, h2, h3, b, strong { letter-spacing: -.012em; }
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
a { transition: color .15s; }

/* Header */
.top { background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.top .wrap { min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.brand::before { content: ''; width: 22px; height: 22px; flex: none; background: var(--accent);
  clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%); }
.brand b { color: var(--accent); font-weight: 800; }
.back { border-radius: 12px; transition: border-color .15s, background-color .15s; }
.back:hover { border-color: var(--accent); background: var(--accent-soft); }
.top .title h1 { font-size: 16.5px; font-weight: 700; }
.akun summary { transition: border-color .15s; }
.akun summary:hover { border-color: var(--accent); }
.akun-menu { border-radius: var(--radius); box-shadow: 0 18px 50px rgba(10, 47, 41, .18); padding: 8px; }
.akun-menu a, .akun-menu button { border-radius: 10px; }

/* Kontrol */
.btn, .chip { font-weight: 600; transition: border-color .15s, background-color .15s, color .15s; }
.btn:hover, .chip:hover { border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.chip { padding: 7px 13px; }
.inp, .search { transition: border-color .15s, box-shadow .15s; }
.inp:focus, .search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.tabs { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 4px; gap: 4px; }
.tabs button { border: 0; background: transparent; color: var(--muted); border-radius: 10px; }
.tabs button.on { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.kotak, .ayat, .rek, .stat, .tugas, .siklus-hari { border-radius: var(--radius); }
.kotak h2 { font-size: 17px; font-weight: 700; }
.state { font-size: 15px; }
.kaki { font-size: 13px; }

/* ---------- Beranda ---------- */
.beranda-pita { background: var(--pita); color: var(--pita-ink); position: relative; overflow: hidden; }
.beranda-pita::after { /* ornamen bintang besar, samar */
  content: ''; position: absolute; width: 360px; height: 360px; right: -90px; top: -110px; opacity: .07; background: var(--pita-ink);
  clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%); pointer-events: none; }
.beranda-pita .wrap { position: relative; z-index: 1; padding-top: 22px; padding-bottom: 26px; }
.salam { font-size: 14px; color: var(--pita-muted); margin: 0 0 14px; }
.salam b { color: var(--pita-ink); }
.waktu-mini { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 20px; margin: 0 0 18px; padding: 0; background: none; border: 0; box-shadow: none; color: inherit; }
.waktu-mini .wm-tgl b { font-size: 15px; font-weight: 600; color: var(--pita-ink); }
.waktu-mini .wm-tgl span { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #fff; margin-top: 2px; }
.waktu-mini .wm-tgl small { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 99px; background: color-mix(in srgb, var(--gold) 30%, transparent); color: #f3dfb1; font-size: 12px; font-weight: 600; }
.waktu-mini .wm-shalat { text-align: right; }
.waktu-mini .wm-shalat small { display: block; color: var(--pita-muted); font-size: 12.5px; }
.waktu-mini .wm-shalat b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1.15; font-variant-numeric: tabular-nums; }
.waktu-mini .wm-shalat span { color: #f0d79f; font-size: 13px; font-weight: 600; }
.waktu-mini:hover .wm-shalat b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, #fff 40%, transparent); }
.beranda-pita .search { border: 0; padding: 14px 16px 14px 44px; font-size: 16px; border-radius: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235d6e68' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center; }
.beranda-pita .cari-isi { margin-top: 10px; border: 1px solid color-mix(in srgb, #fff 25%, transparent); background: color-mix(in srgb, #fff 8%, transparent); color: #fff; border-style: solid; }
@media (max-width: 560px) {
  .waktu-mini { grid-template-columns: 1fr; }
  .waktu-mini .wm-shalat { text-align: left; }
  .waktu-mini .wm-shalat b { font-size: 26px; }
}

.bagian-judul { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 12px; }
.bagian-judul h2 { margin: 0; font-size: 19px; font-weight: 800; }
.bagian-judul span { color: var(--muted); font-size: 13.5px; }

.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.menu { display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; align-items: center; padding: 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); transition: border-color .15s, background-color .15s; }
.menu:hover { border-color: var(--accent); }
.menu .ikon { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--t, var(--accent-soft)); }
.menu b { font-size: 15px; font-weight: 700; }
.menu small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.menu.utama { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
@media (max-width: 760px) { .menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) {
  .menu { grid-template-columns: 1fr; padding: 12px; }
  .menu .ikon { grid-row: auto; width: 38px; height: 38px; font-size: 19px; margin-bottom: 4px; }
}

/* Daftar surah: satu panel, baris bergaris tipis, nomor dalam bintang delapan */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; margin-bottom: 30px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.grid > .state { grid-column: 1 / -1; }
.s-card { border: 0; border-radius: 0; box-shadow: none; padding: 12px 16px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); transition: background-color .15s; }
.s-card:hover { transform: none; background: var(--accent-soft); }
.s-no { position: relative; width: 40px; height: 40px; background: none; color: var(--ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.s-no::before, .s-no::after { content: ''; position: absolute; inset: 7px; border: 1.5px solid var(--gold); border-radius: 3px; z-index: -1; background: var(--card); }
.s-no::after { transform: rotate(45deg); }
.s-no { isolation: isolate; }
.s-card:hover .s-no::before, .s-card:hover .s-no::after { background: var(--accent-soft); }
.s-info b { font-size: 15px; font-weight: 700; }
.s-info small { font-size: 12.5px; }
.s-ar { font-size: 24px; color: var(--accent); }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } .s-card { border-right: 0; } }

/* Halaman isi: nomor ayat juga bintang delapan */
.a-no { position: relative; isolation: isolate; border: 0; border-radius: 0; color: var(--ink); width: 36px; height: 36px; min-width: 36px; padding: 0; }
.a-no::before, .a-no::after { content: ''; position: absolute; inset: 6px; border: 1.5px solid var(--gold); border-radius: 3px; background: var(--card); z-index: -1; }
.a-no::after { transform: rotate(45deg); }
.ayat.playing { box-shadow: 0 0 0 3px var(--accent-soft); }
.toolbar { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Login */
.login-wrap { padding-top: 48px; }
.login-wrap .brand { display: flex; justify-content: center; font-size: 26px; }
.login-wrap .brand::before { width: 28px; height: 28px; }
.s-info { min-width: 0; }
.s-info b, .s-info small { overflow: hidden; text-overflow: ellipsis; }
.s-info b { white-space: nowrap; }
.s-ar { flex: none; }
@media (min-width: 901px) { .s-card:nth-child(3n) { border-right: 0; } }
@media (min-width: 561px) and (max-width: 900px) { .s-card:nth-child(2n) { border-right: 0; } }
.brand { gap: 0; }
.brand::before { margin-right: 10px; }
.brand b { margin: 0 .25em; }
.bagian-judul { flex-wrap: wrap; }
.bagian-judul h2 { white-space: nowrap; }
@media (max-width: 400px) { .menu { align-content: start; } .bagian-judul span { flex-basis: 100%; } }
@media (prefers-color-scheme: dark) { .menu .ikon { background: color-mix(in srgb, var(--t, var(--accent)) 16%, var(--card)); } }
.hasil-cari .a-head .a-no { margin-right: 0; }
.hasil-cari .a-head > a:nth-child(2) { margin-right: auto; }

/* V0.15 — Kosakata Al-Qur'an */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 50;
  background: var(--pita); color: #fff; padding: 10px 18px; border-radius: 99px; font-weight: 700; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: opacity .2s, transform .2s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.bar-tipis { display: block; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, transparent); overflow: hidden; }
.bar-tipis i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .4s; }
.bar-tipis.emas i { background: var(--gold); }

.kosa-hero { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 22px; border-radius: 18px; background: var(--pita); color: var(--pita-ink); margin-bottom: 14px; position: relative; overflow: hidden; }
.kosa-hero .bar-tipis { background: color-mix(in srgb, #fff 16%, transparent); }
.kosa-hero .bar-tipis i { background: #5fe0c0; }
.kosa-hero .bar-tipis.emas i { background: #f0c66a; }
.cincin { position: relative; width: 150px; height: 150px; }
.cincin svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cincin circle { fill: none; stroke-width: 10; }
.cincin .jalur { stroke: color-mix(in srgb, #fff 14%, transparent); }
.cincin .isi { stroke: #f0c66a; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.cincin > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.cincin b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1.1; }
.cincin small { font-size: 11.5px; color: var(--pita-muted); line-height: 1.3; }
.kosa-hero-teks { display: grid; gap: 8px; min-width: 0; }
.kosa-hero-teks p { margin: 0; }
.kh-level { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.kh-level b { font-size: 26px; font-weight: 800; color: #fff; }
.kh-level span { color: var(--pita-muted); font-size: 12.5px; }
.kh-info { font-size: 13.5px; color: var(--pita-muted); }
.kh-angka { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; }
.kh-angka b { color: #fff; font-size: 16px; }
.kh-target { font-size: 13px; color: var(--pita-muted); margin-top: 4px !important; }
.kh-target b { color: #f0d79f; }
@media (max-width: 560px) { .kosa-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; } .kosa-hero-teks { width: 100%; } .kh-level, .kh-angka { justify-content: center; } }

.kosa-aksi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.kosa-aksi.dua { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aksi-besar { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; gap: 0 10px; align-items: center; padding: 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); transition: border-color .15s; }
.aksi-besar:hover { border-color: var(--accent); }
.aksi-besar span { grid-row: span 2; font-size: 22px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); }
.aksi-besar b { font-size: 14.5px; }
.aksi-besar small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aksi-besar.penting { background: var(--accent); border-color: var(--accent); color: #fff; }
.aksi-besar.penting span { background: color-mix(in srgb, #fff 18%, transparent); }
.aksi-besar.penting small { color: color-mix(in srgb, #fff 80%, transparent); }
@media (max-width: 640px) { .kosa-aksi { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .kosa-aksi.dua { grid-template-columns: 1fr; } }

.kotak-kepala { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.kotak-kepala h2 { margin: 0; }
.kotak-kepala a { color: var(--accent); font-weight: 600; font-size: 14px; }
.grafik-xp { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; height: 120px; align-items: end; }
.grafik-xp div { display: grid; grid-template-rows: 1fr auto; height: 100%; justify-items: center; gap: 4px; }
.grafik-xp i { align-self: end; width: 100%; max-width: 34px; border-radius: 8px 8px 3px 3px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 60%, transparent)); }
.grafik-xp small { font-size: 11.5px; color: var(--muted); }
.tanda-ringkas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.lb { padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; }
.lb.hafal, .lb-pilih.hafal { background: var(--accent-soft); color: var(--accent); }
.lb.ragu, .lb-pilih.ragu { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.lb.lupa, .lb-pilih.lupa { background: color-mix(in srgb, var(--rec) 12%, transparent); color: var(--rec); }

.bab-daftar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 30px; }
.bab { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); transition: border-color .15s; }
.bab:hover { border-color: var(--accent); }
.bab-ikon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); font-size: 21px; }
.bab-teks { display: grid; gap: 3px; min-width: 0; }
.bab-teks b { font-size: 15px; }
.bab-teks small { color: var(--muted); font-size: 12.5px; }
.bab-prog { display: grid; gap: 4px; margin-top: 6px; }
.bab-prog em { font-style: normal; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .bab-daftar { grid-template-columns: 1fr; } }

.kata-daftar { display: grid; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 30px; }
.kata-baris { display: grid; grid-template-columns: minmax(84px, auto) 1fr auto; gap: 14px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.kata-baris:last-child { border-bottom: 0; }
.kata-ar { font-family: var(--arab); font-size: 30px; line-height: 2; padding: 0 12px .25em; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); direction: rtl; }
.kata-ar:hover { border-color: var(--accent); color: var(--accent); }
.kata-teks { min-width: 0; display: grid; }
.kata-teks b { font-size: 15px; }
.kata-teks small { color: var(--muted); font-size: 12.5px; }
.kata-teks a { color: var(--accent); }
.lb-pilih { border: 1px solid var(--line); border-radius: 99px; padding: 5px 8px; font: inherit; font-size: 12.5px; font-weight: 700; background: var(--card); color: var(--muted); }
@media (max-width: 480px) { .kata-baris { grid-template-columns: auto 1fr; } .lb-pilih { grid-column: 1 / -1; justify-self: start; } }

.kartu-prog { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin-bottom: 14px; }
.kartu-prog small { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.kartu-flip { position: relative; height: 300px; perspective: 1200px; cursor: pointer; margin: 0 auto; max-width: 520px; }
.kartu-muka { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 20px;
  border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(10,47,41,.10); backface-visibility: hidden; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.kartu-muka.depan::before { content: ''; position: absolute; inset: 10px; border: 1.5px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 16px; pointer-events: none; }
.kartu-muka.belakang { transform: rotateY(180deg); background: var(--pita); color: #fff; border-color: var(--pita); }
.kartu-flip.dibalik .depan { transform: rotateY(-180deg); }
.kartu-flip.dibalik .belakang { transform: rotateY(0); }
.kartu-ar { font-family: var(--arab); font-size: 64px; line-height: 1.9; direction: rtl; padding-bottom: .15em; }
.kartu-ar.kecil { font-size: 34px; line-height: 1.8; color: #f0d79f; }
.kartu-muka small { color: var(--muted); font-size: 13px; }
.kartu-muka.belakang small { color: var(--pita-muted); }
.kartu-muka.belakang b { font-size: 24px; font-weight: 800; }
.kartu-tombol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 520px; margin: 14px auto 0; }
.kartu-tombol button { padding: 14px 8px; border-radius: 14px; border: 0; font: inherit; font-weight: 800; font-size: 15px; color: #fff; }
.kartu-tombol .lupa { background: var(--rec); } .kartu-tombol .ragu { background: var(--gold); } .kartu-tombol .hafal { background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .kartu-muka { transition: none; } }

.kuis-soal { display: grid; justify-items: center; padding: 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); max-width: 520px; margin: 0 auto; }
.kuis-soal small { color: var(--muted); }
.kuis-pilihan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; margin: 14px auto 0; }
.kuis-pilihan button { padding: 14px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; }
.kuis-pilihan button:hover:not(:disabled) { border-color: var(--accent); }
.kuis-pilihan .benar { background: var(--accent); border-color: var(--accent); color: #fff; }
.kuis-pilihan .salah { background: var(--rec); border-color: var(--rec); color: #fff; }

.latihan-ayat { padding: 18px 12px; }
.latihan-kata { direction: rtl; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 8px; }
.lk { display: grid; justify-items: center; gap: 4px; }
.lk-ar { font-family: var(--arab); font-size: 30px; line-height: 2; padding: 0 6px .25em; border: 0; background: none; color: var(--ink); border-radius: 10px; }
.lk-ar:hover { color: var(--accent); }
.lk-ar.dikuasai { box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--accent) 40%, transparent); }
.lk-kotak { direction: ltr; min-width: 92px; max-width: 150px; min-height: 40px; padding: 6px 8px; border-radius: 12px; border: 2px dashed var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.25; }
.lk-kotak.terisi { border-style: solid; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--card); }
.lk-kotak.aktif { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.lk-kotak.benar { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.lk-kotak.salah { border-color: var(--rec); background: color-mix(in srgb, var(--rec) 10%, transparent); color: var(--rec); text-decoration: line-through; }
.lk-benar { direction: ltr; color: var(--accent); font-weight: 700; font-size: 12.5px; max-width: 150px; text-align: center; }
.latihan-tr { margin: 16px 4px 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 14.5px; }
.chip-arti { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0; min-height: 44px; }
.chip-arti button { padding: 9px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.chip-arti button:hover { border-color: var(--accent); }
.chip-arti button.aktif { background: var(--accent); border-color: var(--accent); color: #fff; }
.latihan-tombol { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-bottom: 30px; }
.latihan-tombol .btn { padding: 10px 16px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.kosong-besar { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 40px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; }
.kosong-besar > span { font-size: 54px; }
.kosong-besar b { font-size: 20px; }
.kosong-besar p { color: var(--muted); max-width: 420px; margin: 0 0 8px; }
.surah-prog .s-info { display: grid; gap: 4px; }
.surah-prog .bar-tipis { margin-top: 2px; }
/* V0.15.1 — kemunculan kata, Asmaul Husna, pemilih ayat */
.kata-teks a.muncul { color: var(--accent); font-weight: 700; }
.husna-no { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; margin-right: 6px; border-radius: 99px; background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); font-size: 12px; font-weight: 800; }
.kata-teks { display: block; }
.kata-teks b { font-size: 15px; }
.kata-teks small { display: block; margin-top: 2px; }
.kartu-latin { font-style: normal; color: #f0d79f; font-weight: 600; }
.pilih-ayat { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto auto; gap: 8px; margin-bottom: 12px; }
.pilih-ayat .inp { background: var(--card); }
@media (max-width: 520px) { .pilih-ayat { grid-template-columns: 1fr 1fr; } }
.muncul-kepala { display: flex; align-items: center; gap: 14px; padding: 14px; margin-bottom: 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.muncul-kepala b { font-size: 16px; }
.muncul-kepala small { display: block; color: var(--muted); margin-top: 2px; }
.muncul-ayat .a-head { flex-wrap: wrap; }
.muncul-ayat .a-head .a-no { margin-right: 0; }
.muncul-ayat .arab mark { background: color-mix(in srgb, var(--gold) 28%, transparent); color: inherit; border-radius: 6px; padding: 0 4px; }
.muncul-ayat .terjemah .lb { display: inline-block; margin: 0 4px 4px 0; }

/* =====================================================================
   V0.16 — Bacaan & khatam, penanda ayat, PWA/offline, pengingat, cadangan & log
   ===================================================================== */
.akun-menu [hidden], .lanjut-kartu[hidden], .khatam-bar[hidden], .label-status[hidden] { display: none !important; }
.tombol-baris { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.label-status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.label-status.ok { background: var(--accent-soft); color: var(--accent); }
.label-status.telat { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }
.peringatan-kotak { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5;
  background: color-mix(in srgb, var(--gold) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); }
small.peringatan { color: var(--rec) !important; }

/* Penanda & catatan per ayat (halaman surah) */
.btn.tanda { padding: 7px 10px; filter: grayscale(1); opacity: .65; }
.btn.tanda:hover { opacity: 1; }
.btn.tanda.on { filter: none; opacity: 1; background: color-mix(in srgb, var(--gold) 14%, var(--card)); border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.tanda-form { display: grid; gap: 8px; margin: 4px 0 12px; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px dashed color-mix(in srgb, var(--gold) 45%, var(--line)); }
.tanda-form textarea { resize: vertical; min-height: 70px; background: var(--card); }
.tanda-tombol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.catatan-ayat { margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.55;
  background: color-mix(in srgb, var(--gold) 9%, var(--card)); border-left: 3px solid var(--gold); white-space: normal; overflow-wrap: anywhere; }
.catatan-ayat b { display: block; font-size: 12.5px; color: var(--gold); margin-bottom: 2px; }

/* Bilah khatam di mushaf */
.khatam-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; max-width: 640px; margin: 10px auto 30px; padding: 12px 14px;
  border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.khatam-bar .kb-info { flex: 1 1 220px; display: grid; gap: 4px; min-width: 0; }
.khatam-bar .kb-info b { font-size: 14.5px; }
.khatam-bar .kb-info small { color: var(--muted); font-size: 12.5px; }
.khatam-bar .btn { padding: 10px 14px; }
.khatam-bar .btn.sudah { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-soft); }
.khatam-bar .kb-atur { flex: 1; text-align: center; color: var(--accent); font-weight: 700; font-size: 14px; }

/* Halaman Bacaan & khatam */
.lanjut-isi { display: flex; align-items: center; gap: 14px; }
.lanjut-isi b { display: block; font-size: 17px; }
.lanjut-isi small { color: var(--muted); font-size: 13px; }
.bintang-no { position: relative; isolation: isolate; flex: none; width: 48px; height: 48px; display: grid; place-items: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.bintang-no::before, .bintang-no::after { content: ''; position: absolute; inset: 8px; border: 1.5px solid var(--gold); border-radius: 3px; background: var(--accent-soft); z-index: -1; }
.bintang-no::after { transform: rotate(45deg); }
.chip-hari { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.khatam-isian { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .khatam-isian { grid-template-columns: 1fr; } }
.khatam-pratinjau { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 14px; }
.khatam-pratinjau b { color: var(--accent); }
.khatam-ring { display: flex; align-items: center; gap: 18px; }
.khatam-cincin { --p: 0; flex: none; width: 112px; height: 112px; border-radius: 50%; display: grid; place-content: center; text-align: center; position: relative;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--accent) 12%, transparent) 0); }
.khatam-cincin::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--card); }
.khatam-cincin > * { position: relative; }
.khatam-cincin b { font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.khatam-cincin small { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.khatam-teks { display: grid; gap: 5px; min-width: 0; flex: 1; }
.khatam-teks b { font-size: 16.5px; }
.khatam-teks small { color: var(--muted); font-size: 13px; }
@media (max-width: 420px) { .khatam-ring { flex-direction: column; align-items: stretch; text-align: center; } .khatam-cincin { margin: 0 auto; } }
#penanda .inp[type=search] { margin-bottom: 12px; }
.penanda-item { padding: 14px 0; border-top: 1px solid var(--line); }
.penanda-item:first-child { border-top: 0; padding-top: 4px; }
.pi-kepala { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pi-kepala small { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.pi-arab { font-family: var(--arab); font-size: 24px; line-height: 2.1; margin: 6px 0 2px; padding-bottom: .2em; color: var(--ink); }
.pi-tr { color: var(--muted); font-size: 14px; }
.penanda-item .tombol-baris { margin-top: 10px; }
.penanda-item .btn { padding: 6px 11px; font-size: 13.5px; }

/* Beranda: lanjutkan bacaan */
.lanjut-kartu { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; margin-top: 18px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.lanjut-kartu > a { display: flex; align-items: center; gap: 12px; padding: 13px 16px; min-width: 0; transition: background-color .15s; }
.lanjut-kartu > a:hover { background: var(--accent-soft); }
.lanjut-kartu > a + a { border-left: 1px solid var(--line); }
.lanjut-kartu small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lanjut-kartu b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lanjut-kartu > a > span:last-child { min-width: 0; flex: 1; }
.lanjut-kartu .bar-tipis { margin-top: 5px; height: 5px; }
.lj-ikon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 14px; }
.lj-semua { justify-content: center; flex-direction: column; gap: 0 !important; font-size: 20px; padding: 10px 18px !important; }
.lj-semua small { font-size: 11px; text-align: center; }
@media (max-width: 640px) {
  .lanjut-kartu { grid-template-columns: minmax(0, 1fr) auto; }
  .lj-khatam { grid-column: 1 / -1; grid-row: 2; border-left: 0 !important; border-top: 1px solid var(--line); }
}

/* PWA: offline */
.rq-offline { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 60; padding: 7px 14px; border-radius: 99px;
  background: #3a3f3d; color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25); white-space: nowrap; }

/* Pengingat di HP */
.pg-baris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.pg-baris:first-of-type { border-top: 0; padding-top: 0; }
.pg-cek { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 240px; cursor: pointer; }
.pg-cek input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.pg-cek b { display: block; font-size: 15px; }
.pg-cek small { display: block; color: var(--muted); font-size: 12.5px; }
.pg-baris input[type=time].chip { font: inherit; font-weight: 600; }

/* Admin: cadangan, cron, log */
.cadangan-pilih { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cadangan-pilih > p { grid-column: 1 / -1; }
@media (max-width: 600px) { .cadangan-pilih { grid-template-columns: 1fr; } }
.cd-opsi { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); transition: border-color .15s; }
.cd-opsi:hover { border-color: var(--accent); }
.cd-opsi.utama { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.cd-opsi .ikon { font-size: 24px; line-height: 1; }
.cd-opsi b { display: block; }
.cd-opsi small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.cd-tabel { margin-top: 12px; }
.cd-tabel summary { cursor: pointer; }
.langkah-cron { margin: 6px 0 10px; padding-left: 20px; font-size: 14px; }
.kode-salin { display: flex; gap: 8px; align-items: center; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--pita); color: #e9f3ef; }
.kode-salin code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 12.5px; }
.log-tabel td { font-size: 13.5px; }
.log-waspada td { background: color-mix(in srgb, var(--rec) 6%, transparent); }
.log-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.kotak-kepala { flex-wrap: wrap; }
.kotak-kepala h2 { margin-bottom: 0; }
@media (max-width: 560px) { .toolbar.mushaf-bar { margin-inline: 0; padding-inline: 0; } }   /* toolbar mushaf membungkus: jangan melebar keluar layar */
.log-nav .btn { white-space: nowrap; padding: 7px 10px; }

/* =====================================================================
   V0.18 — Mushaf bergaya cetakan Madinah: bingkai ornamen, kepala halaman (surah & juz),
   huruf KFGQPC per halaman, ketuk kata → sorot ayat + terjemah
   ===================================================================== */
:root { --kertas: #fffcf3; --kertas-garis: color-mix(in srgb, var(--gold) 65%, transparent); }
@media (prefers-color-scheme: dark) { :root { --kertas: #121b18; } }
#halKaki { display: none; }
.mushaf { background: var(--kertas); border: 13px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Crect width='90' height='90' fill='%231f5f3a'/%3E%3Crect x='2' y='2' width='86' height='86' fill='none' stroke='%23d6aa52' stroke-width='1.6'/%3E%3Crect x='28' y='28' width='34' height='34' fill='none' stroke='%23d6aa52' stroke-width='1.6'/%3E%3Cg fill='%23d6aa52'%3E%3Cpolygon points='45.0,6.5 46.6,11.1 51.0,9.0 48.9,13.4 53.5,15.0 48.9,16.6 51.0,21.0 46.6,18.9 45.0,23.5 43.4,18.9 39.0,21.0 41.1,16.6 36.5,15.0 41.1,13.4 39.0,9.0 43.4,11.1'/%3E%3Cpolygon points='15.0,36.5 16.6,41.1 21.0,39.0 18.9,43.4 23.5,45.0 18.9,46.6 21.0,51.0 16.6,48.9 15.0,53.5 13.4,48.9 9.0,51.0 11.1,46.6 6.5,45.0 11.1,43.4 9.0,39.0 13.4,41.1'/%3E%3Cpolygon points='75.0,36.5 76.6,41.1 81.0,39.0 78.9,43.4 83.5,45.0 78.9,46.6 81.0,51.0 76.6,48.9 75.0,53.5 73.4,48.9 69.0,51.0 71.1,46.6 66.5,45.0 71.1,43.4 69.0,39.0 73.4,41.1'/%3E%3Cpolygon points='45.0,66.5 46.6,71.1 51.0,69.0 48.9,73.4 53.5,75.0 48.9,76.6 51.0,81.0 46.6,78.9 45.0,83.5 43.4,78.9 39.0,81.0 41.1,76.6 36.5,75.0 41.1,73.4 39.0,69.0 43.4,71.1'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='10' fill='none' stroke='%23d6aa52' stroke-width='1.4'/%3E%3Cg fill='%23d6aa52'%3E%3Cpolygon points='15.0,7.5 16.4,11.7 20.3,9.7 18.3,13.6 22.5,15.0 18.3,16.4 20.3,20.3 16.4,18.3 15.0,22.5 13.6,18.3 9.7,20.3 11.7,16.4 7.5,15.0 11.7,13.6 9.7,9.7 13.6,11.7'/%3E%3C/g%3E%3Ccircle cx='75' cy='15' r='10' fill='none' stroke='%23d6aa52' stroke-width='1.4'/%3E%3Cg fill='%23d6aa52'%3E%3Cpolygon points='75.0,7.5 76.4,11.7 80.3,9.7 78.3,13.6 82.5,15.0 78.3,16.4 80.3,20.3 76.4,18.3 75.0,22.5 73.6,18.3 69.7,20.3 71.7,16.4 67.5,15.0 71.7,13.6 69.7,9.7 73.6,11.7'/%3E%3C/g%3E%3Ccircle cx='15' cy='75' r='10' fill='none' stroke='%23d6aa52' stroke-width='1.4'/%3E%3Cg fill='%23d6aa52'%3E%3Cpolygon points='15.0,67.5 16.4,71.7 20.3,69.7 18.3,73.6 22.5,75.0 18.3,76.4 20.3,80.3 16.4,78.3 15.0,82.5 13.6,78.3 9.7,80.3 11.7,76.4 7.5,75.0 11.7,73.6 9.7,69.7 13.6,71.7'/%3E%3C/g%3E%3Ccircle cx='75' cy='75' r='10' fill='none' stroke='%23d6aa52' stroke-width='1.4'/%3E%3Cg fill='%23d6aa52'%3E%3Cpolygon points='75.0,67.5 76.4,71.7 80.3,69.7 78.3,73.6 82.5,75.0 78.3,76.4 80.3,80.3 76.4,78.3 75.0,82.5 73.6,78.3 69.7,80.3 71.7,76.4 67.5,75.0 71.7,73.6 69.7,69.7 73.6,71.7'/%3E%3C/g%3E%3C/svg%3E") 30 round;
  border-radius: 0; outline: 0; box-shadow: 0 6px 22px rgba(10, 47, 41, .12); padding: 6px 10px 4px; line-height: 2.05; }
.mushaf::after { content: ''; position: absolute; inset: 3px; border: 1px solid var(--kertas-garis); pointer-events: none; }
.m-kepala { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; font-size: .6em; line-height: 1.9;
  color: var(--accent); border-bottom: 1px solid var(--kertas-garis); margin: 0 .2em .25em; padding: 0 .3em; white-space: nowrap; }
.m-isi { padding: 0 2px; }
.m-kaki { display: flex; justify-content: center; border-top: 1px solid var(--kertas-garis); margin: .2em .2em 0; padding: .25em 0 .1em; font-size: .6em; line-height: 1.5; }
.m-kaki span { position: relative; isolation: isolate; display: inline-grid; place-items: center; min-width: 2.4em; height: 2.4em; color: var(--accent); font-weight: 700; }
.m-kaki span::before, .m-kaki span::after { content: ''; position: absolute; inset: .35em; border: 1px solid var(--gold); background: var(--kertas); z-index: -1; }
.m-kaki span::after { transform: rotate(45deg); }
.mushaf .m-judul { padding: .08em 0; }
.mushaf .m-judul span { display: block; width: 100%; text-align: center; border-radius: 6px; font-size: .92em; line-height: 1.75;
  background: linear-gradient(90deg, #1f5f3a, #2d7a47 50%, #1f5f3a); color: #f6e7bb; border: 2px solid var(--gold);
  box-shadow: inset 0 0 0 2px #1f5f3a, inset 0 0 0 3px color-mix(in srgb, var(--gold) 80%, transparent); }
.mushaf .m-judul small { display: none; }
.mushaf .m-basmalah { color: var(--ink); }
.mk.pilih, .ma.pilih { background: color-mix(in srgb, #3b82c4 16%, transparent); border-radius: 0; }
.mk.bunyi { background: var(--accent-soft); color: var(--accent); }
/* huruf Madinah (QCF V2) */
.mushaf.qcf { line-height: 1.95; }
.mushaf.qcf [data-q] { font-family: var(--qcf), var(--arab); }
.mushaf.qcf .ma[data-q] { font-size: 1em; color: inherit; }
.mushaf.qcf .m-baris { gap: 0; }
@media (max-width: 560px) { .mushaf { border-width: 10px; padding: 4px 6px 2px; border-radius: 0; } }

/* pengaturan tampilan */
.atur-mushaf { position: relative; }
.atur-mushaf > summary { list-style: none; cursor: pointer; }
.atur-mushaf > summary::-webkit-details-marker { display: none; }
.atur-isi { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 250px; display: grid; gap: 10px; padding: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 40px rgba(10, 47, 41, .18); }
.atur-isi label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
@media (max-width: 560px) { .atur-isi { right: auto; left: 0; } }

/* lembar terjemah ayat */
.lembar-ayat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-width: 860px; margin: 0 auto; padding: 12px 16px 16px;
  background: color-mix(in srgb, #3b82c4 9%, var(--card)); border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 30px rgba(10, 47, 41, .16); max-height: 45vh; overflow-y: auto; }
.lembar-ayat[hidden] { display: none; }
.la-kepala { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.la-kepala b { font-size: 14px; color: var(--accent); }
.la-x { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.la-teks { margin: 6px 0 10px; font-size: 16px; line-height: 1.6; }
.la-teks b { color: var(--accent); }
.la-tombol { display: flex; flex-wrap: wrap; gap: 6px; }
.la-tombol .btn { padding: 6px 10px; font-size: 13.5px; }
body.lembar-buka main { padding-bottom: 200px; }
/* halaman mushaf di layar lebar: proporsi seperti mushaf cetak (tidak melebar) */
.mushaf-wrap { justify-content: center; }
.mushaf { flex: 0 1 600px; }
/* V0.19 — cadangan otomatis */
.cd-otomatis { grid-column: 1 / -1; padding: 12px 14px; border-radius: var(--radius); border: 1px dashed var(--line); }
.cd-otomatis small { color: var(--muted); font-weight: 400; }
.cd-otomatis ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.cd-otomatis li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
.cd-otomatis .btn { padding: 4px 10px; font-size: 13px; }
.form label.pg-cek { display: flex; }

/* =====================================================================
   V0.20 — Identitas baru (logo Ruang Quran): hijau daun + hijau tua + emas,
   beranda ringkas, Daftar Surah tersendiri, navigasi bawah, gerak halus
   ===================================================================== */
:root {
  --bg: #f4f6f1; --card: #ffffff; --ink: #11261a; --muted: #5a6b5f; --line: #dde5d8;
  --accent: #1f5f3a; --accent-soft: #e5efdc; --daun: #7da449; --gold: #b98b2f; --rec: #d23a3a;
  --pita: #0f3d2a; --pita-ink: #eef5ea; --pita-muted: #a8c79a;
  --shadow: 0 1px 2px rgba(17, 38, 26, .05), 0 6px 20px rgba(17, 38, 26, .05);
  --radius: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1510; --card: #121f18; --ink: #e7efe6; --muted: #93a796; --line: #22362a;
    --accent: #8cc46a; --accent-soft: #183424; --daun: #9ccc72; --gold: #d8b161; --rec: #ff6b6b;
    --pita: #0a2418; --pita-ink: #e7efe6; --pita-muted: #93b88a; --shadow: none;
  }
}
.btn.primary { color: #fff; }
@media (prefers-color-scheme: dark) { .btn.primary, .chip.on, .tabs button.on, .segmen .on { color: #0b1510 !important; } }

/* Merek */
.brand { gap: 0; font-size: 18px; }
.brand::before { width: 38px; height: 25px; margin-right: 8px; clip-path: none; background: url("../ikon/logo-tanda.png") center / contain no-repeat; }
.brand span { color: var(--pita); }
.brand b { color: var(--daun); margin: 0 0 0 .22em; }
@media (prefers-color-scheme: dark) { .brand span { color: var(--ink); } }
.logo-login { display: block; width: 200px; height: auto; margin: 0 auto 6px; filter: drop-shadow(0 8px 24px rgba(15, 61, 42, .15)); }
.login-wrap { padding-top: 28px; }

/* Beranda */
.beranda-pita { background: radial-gradient(120% 140% at 100% 0%, #2d7a47 0%, var(--pita) 55%, #0a2c1e 100%); }
.beranda-pita::after { width: 300px; height: 200px; right: -40px; top: -20px; opacity: .1; clip-path: none; background: url("../ikon/logo-tanda.png") center / contain no-repeat; filter: brightness(0) invert(1); }
.waktu-mini .wm-tgl span, .waktu-mini .wm-shalat b { color: #fff; }
.beranda-pita { overflow-x: clip; overflow-y: visible; z-index: 5; }
.cari-wrap { position: relative; }
.saran { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; background: var(--card); color: var(--ink); border-radius: 16px; box-shadow: 0 18px 50px rgba(10, 40, 25, .25); padding: 6px; max-height: 60vh; overflow-y: auto; }
.saran a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; }
.saran a:hover, .saran a.aktif { background: var(--accent-soft); }
.saran b { display: block; font-size: 15px; }
.saran small { display: block; color: var(--muted); font-size: 12.5px; }
.saran a > span:nth-child(2) { flex: 1; min-width: 0; }
.sr-no, .sr-ikon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 13px; }
.sr-ar { font-family: var(--arab); font-size: 22px; color: var(--accent); line-height: 1.6; }
.beranda .bagian-judul h2 { font-size: 18px; }
.menu-grid { gap: 12px; }
.menu { border-radius: 18px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .15s; }
.menu:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(17, 38, 26, .1); }
.menu:active { transform: scale(.98); }
.menu.utama { background: linear-gradient(160deg, var(--accent-soft), var(--card) 75%); border-color: color-mix(in srgb, var(--daun) 40%, var(--line)); }
.menu.lebar { background: linear-gradient(120deg, #1f5f3a, #2d7a47 60%, #4f8a3a); border: 0; color: #fff; }
.menu.lebar small { color: #d9ebcf; }
.menu.lebar .ikon { background: rgba(255, 255, 255, .16); }
@media (max-width: 760px) { .menu.lebar { grid-column: 1 / -1; } }
@media (prefers-color-scheme: dark) { .menu .ikon { background: color-mix(in srgb, var(--t, var(--accent)) 14%, var(--card)); } .menu.lebar .ikon { background: rgba(255,255,255,.14); } }
.beranda .kaki { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 26px 0 30px; }
.kaki img { opacity: .9; }
.kaki a { color: var(--accent); }

/* Daftar Surah */
.ds { padding-top: 14px; }
.ds-saring { display: grid; gap: 10px; margin-bottom: 12px; }
.ds-saring .search { background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6b5f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center; padding-left: 42px; border-radius: 14px; }
.ds-baris { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.segmen { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.segmen button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.segmen button.on { background: var(--accent); color: #fff; }
.ds-lompat { display: grid; grid-template-columns: auto minmax(0, 1fr) 110px auto auto; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.ds-lompat b { font-size: 13.5px; color: var(--accent); }
.ds-lompat .inp { padding: 8px 10px; background: var(--bg); }
@media (max-width: 620px) { .ds-lompat { grid-template-columns: 1fr 1fr; } .ds-lompat b { grid-column: 1 / -1; } .ds-lompat select { grid-column: 1 / -1; } }
.ds-info { font-size: 13.5px; color: var(--muted); margin: 0 2px 8px; min-height: 20px; }
.ds-info a { color: var(--accent); font-weight: 600; }
.ds-ref { display: inline-block; padding: 8px 14px; border-radius: 12px; background: var(--accent); color: #fff !important; }
.s-juz { color: var(--daun) !important; font-weight: 600; }
.s-no::before, .s-no::after, .a-no::before, .a-no::after { border-color: var(--daun); }

/* Navigasi bawah (HP & tablet) */
.nav-bawah { display: none; }
@media (max-width: 860px) {
  .nav-bawah { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .nav-bawah a { display: grid; justify-items: center; gap: 2px; padding: 4px 0; color: var(--muted); font-size: 11px; font-weight: 700; border-radius: 12px; }
  .nav-bawah svg { width: 24px; height: 24px; padding: 2px 10px; box-sizing: content-box; border-radius: 99px; transition: background-color .2s, color .2s; }
  .nav-bawah a.aktif { color: var(--accent); }
  .nav-bawah a.aktif svg { background: var(--accent-soft); }
  body.ada-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.ada-nav .toast { bottom: 84px; }
  body.ada-nav .rq-offline { bottom: 78px; }
  body.ada-nav.lembar-buka .nav-bawah { display: none; }
}

/* Gerak halus (hormati pengaturan kurangi animasi) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes naik { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .menu-grid .menu { animation: naik .45s ease both; }
  .menu-grid .menu:nth-child(2) { animation-delay: .04s; } .menu-grid .menu:nth-child(3) { animation-delay: .08s; }
  .menu-grid .menu:nth-child(4) { animation-delay: .12s; } .menu-grid .menu:nth-child(5) { animation-delay: .16s; }
  .menu-grid .menu:nth-child(6) { animation-delay: .2s; } .menu-grid .menu:nth-child(7) { animation-delay: .24s; }
  .menu-grid .menu:nth-child(8) { animation-delay: .28s; } .menu-grid .menu:nth-child(9) { animation-delay: .32s; }
  .lanjut-kartu, .kotak { animation: naik .4s ease both; }
}

/* =====================================================================
   V0.21 — Belajar Dasar: tampilan HP lebih rapi & modern (khusus body.bl)
   ===================================================================== */
.bl main.wrap { padding-bottom: 24px; }
/* Beranda belajar */
.bl .bl-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 20px;
  background: radial-gradient(120% 140% at 0% 0%, #2a7a4b 0%, var(--accent) 45%, var(--pita) 100%); color: #fff; margin-bottom: 14px; }
.bl .bl-hero b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.2px; }
.bl .bl-hero span { font-size: 13.5px; line-height: 1.5; opacity: .9; }
.bl .bl-hero-ar { font-family: var(--arab); font-size: 48px !important; line-height: 1.2; color: #e8c76a; opacity: .9 !important; flex: none; }
.bl .bl-menu { display: grid; gap: 10px; }
@media (min-width: 760px) { .bl .bl-menu { grid-template-columns: 1fr 1fr; } }
.bl .bl-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 14px; border-radius: 18px; background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); transition: transform .15s, border-color .15s; }
.bl .bl-item:active { transform: scale(.985); }
.bl .bl-item:hover { border-color: var(--daun); }
.bl .bl-no { position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; z-index: 1; }
.bl .bl-ikon { flex: none; width: 66px; height: 66px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
  font-family: var(--arab); font-size: 21px; line-height: 1; direction: rtl; white-space: nowrap; overflow: hidden; }
.bl .bl-teks { min-width: 0; display: grid; gap: 3px; }
.bl .bl-teks b { font-size: 16px; }
.bl .bl-teks small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.bl .bl-tag { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.bl .bl-tag i { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.bl .bl-panah { margin-left: auto; font-size: 26px; color: var(--muted); flex: none; }

/* Tab segmen */
.bl .tabs { position: sticky; top: 64px; z-index: 5; padding: 4px; gap: 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.bl .tabs button { border: 0; background: transparent; border-radius: 10px; padding: 9px 4px; color: var(--muted); }
.bl .tabs button.on { background: var(--accent); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }

/* Grid huruf */
.bl .huruf-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.bl .huruf { border-radius: 14px; padding: 6px 2px 8px; box-shadow: var(--shadow); transition: transform .12s, border-color .12s; }
.bl .huruf:active { transform: scale(.94); }
.bl .huruf .ar { font-size: 30px; line-height: 1.25; padding: 2px 0 18px; color: var(--pita); }
@media (prefers-color-scheme: dark) { .bl .huruf .ar { color: var(--ink); } }
.bl .huruf small { font-weight: 600; font-size: 11.5px; line-height: 1.2; position: relative; z-index: 1; }
/* Huruf mirip */
.bl .mirip-bentuk { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.bl .mirip-grup:has(> :nth-child(3)) { grid-column: span 2; }
.bl .mirip-grup { direction: rtl; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 8px; border-radius: 14px; background: var(--bg); border: 1px dashed var(--line); }
.bl .mirip-grup .huruf { box-shadow: none; }
.bl .mirip-grup .huruf .ar { font-size: 27px; }
.bl .mirip-bunyi { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.bl .mb-item { padding: 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); display: grid; gap: 8px; }
.bl .mb-ar { direction: rtl; display: flex; gap: 8px; }
.bl .mb-ar span { font-family: var(--arab); font-size: 28px; line-height: 1.5; min-width: 48px; text-align: center; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--accent); }
.bl .mb-item p { margin: 0; font-size: 14px; line-height: 1.55; }

/* Lembar detail huruf: bottom sheet di HP */
.bl .huruf-besar { font-size: 60px !important; line-height: 1.35 !important; padding: 0 18px !important; color: var(--accent); background: var(--accent-soft); border-color: transparent; }
@media (max-width: 600px) {
  .bl dialog.lembar { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 88dvh; border-radius: 22px 22px 0 0; border-bottom: 0; }
  .bl dialog.lembar[open] { animation: bl-naik .22s ease-out; }
}
@keyframes bl-naik { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.bl .lembar-isi { gap: 16px; }
.bl .bentuk { gap: 6px; }
.bl .bentuk div { background: var(--bg); }
.bl .bentuk .ar { font-size: 32px; }
.bl .baris-ar.tiga { display: grid; grid-template-columns: repeat(3, 1fr); }
.bl .baris-ar.tiga .ar-tombol { width: 100%; }

/* Kartu contoh ayat */
.bl .contoh-daftar { display: grid; gap: 8px; }
@media (min-width: 900px) { .bl .contoh-daftar { grid-template-columns: 1fr 1fr; } }
.bl .contoh { padding: 10px 12px 10px; border-radius: 14px; background: var(--bg); gap: 6px; }
.bl .contoh .ayat-mini { font-size: 22px; line-height: 2.05; color: var(--ink); }
.bl .contoh .ket-contoh { flex-wrap: nowrap; gap: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.bl .putar-contoh { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-size: 13px; display: grid; place-items: center; cursor: pointer; }
@media (prefers-color-scheme: dark) { .bl .putar-contoh { color: #0b1510; } }
.bl .putar-contoh.main { background: var(--gold); animation: bl-denyut 1s ease-in-out infinite; }
@keyframes bl-denyut { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 25%, transparent); } }
.bl .ket-teks { min-width: 0; flex: 1; display: grid; }
.bl .ket-teks b { font-family: var(--arab); font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--accent); direction: rtl; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl .ket-teks small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl .ref-ayat { flex: none; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 99px; background: var(--accent-soft); color: var(--accent) !important; white-space: nowrap; }

/* Makhraj */
.bl .grup-ket { margin: 0 0 6px; font-size: 14.5px; line-height: 1.6; }
.bl .rinci { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px 0 4px; }
.bl .rinci-kepala { display: grid; gap: 8px; }
.bl .rinci-kepala p { margin: 0; font-size: 14px; line-height: 1.5; flex: 1; }
.bl .rinci .baris-ar { min-width: 0; gap: 6px; justify-content: flex-start; }
.bl .rinci .baris-ar .ar-tombol { font-size: 28px; line-height: 1.5; padding: 2px 10px; cursor: default; background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.bl .legenda-zona { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.bl .legenda-zona a { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: var(--bg); font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.bl .legenda-zona a small { display: none; }

/* Iqra bertahap */
.bl .tahap-pilih { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 8px; padding: 2px 16px 6px; scroll-snap-type: x proximity; }
.bl .tahap-pilih::-webkit-scrollbar { display: none; }
.bl .tahap-pilih .chip { flex: none; scroll-snap-align: center; white-space: nowrap; gap: 7px; padding: 7px 13px 7px 7px; font-weight: 600; font-size: 13px; }
.bl .tahap-pilih .chip b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 12px; }
.bl .tahap-pilih .chip.on b { background: rgba(255,255,255,.22); color: inherit; }
.bl .tahap-pilih .chip.lewat b { background: var(--daun); color: #fff; }
.bl .tahap-maju { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin-bottom: 14px; }
.bl .tahap-maju span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--daun), var(--accent)); transition: width .3s; }
.bl .tahap-label { font-size: 12px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .05em; }
.bl .kotak h2 { margin-top: 2px; }
.bl .tahap-ket { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 14px; line-height: 1.55; }
.bl .bagian-kepala { margin: 18px 0 8px; flex-wrap: wrap; }
.bl .bagian-kepala h3 { font-size: 15px; }
.bl .bagian-kepala .btn { padding: 6px 12px; font-size: 13px; border-radius: 99px; }
.bl .iqra-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.bl .item-iqra { padding: 4px 2px 6px; border-radius: 12px; transition: transform .12s; }
.bl .item-iqra:active { transform: scale(.94); }
.bl .item-iqra .ar { font-size: 26px; line-height: 1.75; }
.bl .item-iqra small { font-size: 11px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.bl .nav { padding: 4px 0 16px; }

/* Tajwid */
.bl .bab-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 10px; padding: 2px 16px 6px; }
.bl .bab-nav::-webkit-scrollbar { display: none; }
.bl .bab-nav .chip { flex: none; white-space: nowrap; font-size: 13px; font-weight: 600; }
.bl .legenda-tj { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 0 14px; }
.bl .legenda-tj summary { padding: 12px 0; font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.bl .legenda-tj summary::after { content: '▾'; margin-left: 6px; color: var(--muted); }
.bl .legenda-tj[open] summary::after { content: '▴'; }
.bl .legenda-tj summary small { margin-left: auto; font-weight: 600; color: var(--muted); font-size: 12px; }
.bl .legenda-isi { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 12.5px; }
.bl .legenda-isi span { display: flex; align-items: center; gap: 6px; line-height: 1.3; }
.bl .legenda-tj[open] { padding-bottom: 12px; }
.bl .bab-tj { scroll-margin-top: 76px; }
.bl .hukum { padding: 14px 12px; margin-top: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); gap: 8px; }
.bl .hukum:first-of-type { padding-top: 14px; border-top: 1px solid var(--line); }
.bl .hukum h3 { font-size: 15.5px; }
.bl .hukum h3 small { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.bl .hukum .titik { width: 12px; height: 12px; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
.bl .titik-netral { color: var(--muted); }
.bl .hukum > p { font-size: 14px; line-height: 1.6; }
.bl .bab-tj .hukum .contoh { background: var(--card); }
.bl .kaki { margin-top: 8px; }

/* =====================================================================
   V0.22 — Verifikasi email pendaftaran
   ===================================================================== */
.verif-kotak { display: grid; gap: 12px; text-align: center; justify-items: center; padding: 6px 2px; }
.verif-kotak h2 { margin: 0; font-size: 21px; }
.verif-kotak p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.verif-ikon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; background: var(--accent-soft); animation: verif-goyang 2.4s ease-in-out infinite; }
@keyframes verif-goyang { 0%, 100% { transform: none; } 8% { transform: rotate(-8deg); } 16% { transform: rotate(6deg); } 24% { transform: none; } }
.verif-langkah { text-align: left; margin: 0; padding: 12px 14px 12px 32px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); font-size: 14px; line-height: 1.6; width: 100%; box-sizing: border-box; }
.verif-langkah small { color: var(--muted); }
.verif-kotak .btn { width: 100%; justify-content: center; text-align: center; }
.verif-kotak .pesan { width: 100%; box-sizing: border-box; text-align: left; }
.tautan { background: none; border: 0; padding: 4px 0; color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: underline; cursor: pointer; justify-self: center; }
.tautan:disabled { opacity: .6; text-decoration: none; }
.rq-sambut { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 99; width: max-content; max-width: calc(100vw - 32px); padding: 11px 18px; border-radius: 14px; text-align: center; line-height: 1.4;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.18); animation: rq-sambut 4.5s ease forwards; }
@keyframes rq-sambut { 0% { opacity: 0; transform: translate(-50%, -12px); } 8%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -12px); visibility: hidden; } }
@media (prefers-color-scheme: dark) { .rq-sambut { color: #0b1510; } }
.lencana-verif { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: #fff4dc; color: #8a5a00; }
@media (prefers-color-scheme: dark) { .lencana-verif { background: #3a2c0c; color: #f1c66b; } }

/* =====================================================================
   V0.23 — Menu akun ringkas (kisi ikon), tidak terpotong di HP
   ===================================================================== */
.akun-menu { width: min(340px, calc(100vw - 20px)); min-width: 0; max-height: calc(100dvh - 86px); overflow-y: auto; overscroll-behavior: contain; padding: 10px; }
.akun-info { display: flex; align-items: center; gap: 10px; padding: 4px 4px 12px; margin-bottom: 8px; }
.akun-info .ava { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; }
@media (prefers-color-scheme: dark) { .akun-info .ava { color: #0b1510; } }
.akun-info b { font-size: 15px; }
.am-kisi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.akun-menu .am-ubin { display: grid; justify-items: center; gap: 2px; padding: 8px 2px 7px; border-radius: 12px; text-align: center; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.am-ubin span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); font-size: 19px; margin-bottom: 2px; }
.akun-menu .am-ubin:hover span { background: var(--accent); }
.am-baris { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.akun-menu .am-baris a, .akun-menu .am-baris button { padding: 9px 10px; font-size: 13px; font-weight: 600; background: var(--bg); text-align: left; }
.akun-menu .am-baris [data-pasang], .akun-menu .am-baris a:only-child { grid-column: 1 / -1; }
.akun-menu .am-baris [data-keluar] { color: var(--rec); }
/* V0.23 — gambar makhraj */
.makhraj-gambar { position: relative; margin: 0 auto; max-width: 520px; border-radius: 16px; overflow: hidden; background: #fff; }
.makhraj-gambar img { display: block; width: 100%; height: auto; }
.makhraj-gambar .titik-zona { position: absolute; width: 10%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 0; background: transparent; cursor: pointer; }
.makhraj-gambar .titik-zona:hover, .makhraj-gambar .titik-zona:focus-visible { box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 0 7px var(--gold); outline: none; }

/* =====================================================================
   V0.24 — Running text, bagikan ayat, lupa password
   ===================================================================== */
.rt { margin: 14px 0 0; }
.rt[hidden] { display: none !important; }
.rt-isi { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 12px; border-radius: 14px; background: linear-gradient(90deg, #fff6df, #fdf1d2);
  border: 1px solid #f0dca6; color: #5c4300; font-size: 14px; font-weight: 600; overflow: hidden; text-decoration: none; }
@media (prefers-color-scheme: dark) { .rt-isi { background: #2a2311; border-color: #4a3d16; color: #f1d58e; } }
.rt-ikon { flex: none; font-size: 17px; }
.rt-jalur { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.rt-gerak { display: inline-flex; white-space: nowrap; animation: rt-jalan linear infinite; will-change: transform; }
.rt-gerak > span { padding-right: 56px; }
.rt-pisah { font-style: normal; margin: 0 16px; color: var(--gold); }
.rt-isi:hover .rt-gerak, .rt-isi:focus .rt-gerak { animation-play-state: paused; }
@keyframes rt-jalan { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rt-gerak { animation-duration: 0s !important; white-space: normal; } .rt-gerak > span[aria-hidden] { display: none; } }

.ayat .a-head .btn.bagi { font-weight: 800; }
dialog.bagi-lembar { width: min(460px, calc(100vw - 24px)); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--card); color: var(--ink); }
dialog.bagi-lembar::backdrop { background: rgba(0,0,0,.45); }
@media (max-width: 600px) { dialog.bagi-lembar { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 22px 22px 0 0; border-bottom: 0; } }
.bagi-isi { padding: 16px; display: grid; gap: 12px; }
.bagi-kepala { display: flex; align-items: center; gap: 10px; }
.bagi-kepala b { flex: 1; font-size: 16px; }
.bagi-pratinjau { padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); max-height: 34dvh; overflow: auto; }
.bagi-pratinjau .ar { font-family: var(--arab); direction: rtl; font-size: 22px; line-height: 1.9; }
.bagi-pratinjau p { margin: 6px 0; font-size: 14px; line-height: 1.55; }
.bagi-pratinjau small { color: var(--muted); }
.bagi-wa { display: flex !important; align-items: center; justify-content: center; gap: 8px; background: #25d366 !important; border-color: #25d366 !important; color: #fff !important; font-weight: 800; padding: 12px; border-radius: 999px; text-decoration: none; }
.bagi-lain { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.bagi-lain .btn { justify-content: center; }
.bagi-st:empty { display: none; }
.rt-atur { display: grid; grid-template-columns: 160px 1fr; gap: 10px; }
@media (max-width: 520px) { .rt-atur { grid-template-columns: 1fr; } }
.rt-pratinjau:empty { display: none; }
.pg-menit { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.pg-menit input { width: 72px; text-align: center; }
#fLupa .btn, #fReset .btn { justify-content: center; text-align: center; }