@font-face{font-family:"Amiri Quran";src:url("/fonts/AmiriQuran.woff2") format("woff2");font-display:swap}
*{box-sizing:border-box}
:root{--hutan:#0d3b2e;--zamrud:#12604a;--emas:#c9a24a;--emas-muda:#f3e6c4;--krem:#fbf7ee;--tinta:#16241f;--pudar:#5b6b64;--garis:#e6dcc4}
html{height:100%;background:#f3ecdc}
body{margin:0;min-height:100%;color:var(--tinta);font-family:'Segoe UI',ui-sans-serif,system-ui,sans-serif;
  background:linear-gradient(180deg,#fbf7ee 0%,#f3ecdc 100%) fixed;display:flex;justify-content:center;padding:0 24px 24px}
.langit{position:absolute;inset:0 0 auto 0;height:var(--tinggi-langit,330px);pointer-events:none;overflow:hidden;
  background:radial-gradient(900px 260px at 50% 0,#1b5a45 0%,#0d3b2e 70%);border-radius:0 0 50% 50%/0 0 44px 44px}
.langit::before{content:"";position:absolute;right:max(24px,calc(50% - 330px));top:34px;width:64px;height:64px;border-radius:50%;
  box-shadow:-16px 8px 0 0 #f3e6c4;opacity:.9}
.bintang,.bintang::before,.bintang::after{position:absolute;width:3px;height:3px;border-radius:50%;background:#f3e6c4;opacity:.7}
.bintang{left:22%;top:60px}.bintang::before{content:"";left:180px;top:70px}.bintang::after{content:"";left:420px;top:20px}
main{position:relative;width:100%;max-width:720px;text-align:center;margin:0;padding-top:26px}
.crumb{font-size:.8rem;margin:0 0 14px}.crumb a{color:var(--emas-muda);font-weight:700;text-decoration:none}
.pill{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--emas-muda);color:#6b4f12;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
h1{font:800 clamp(1.9rem,6.5vw,2.9rem)/1.1 'Iowan Old Style',Palatino,Georgia,serif;letter-spacing:-.02em;margin:14px 0 8px;color:#fff}
.sub{margin:0 auto 30px;color:#d7e7df;line-height:1.6;font-size:1rem;max-width:44ch}
.kartu{background:var(--krem);border:1px solid var(--garis);border-radius:26px;padding:22px 22px 18px;text-align:left;
  box-shadow:0 24px 50px #0d3b2e30;position:relative;overflow:hidden}
.kartu::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--zamrud),var(--emas),var(--zamrud))}
.kepala{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px dashed var(--garis);padding-bottom:12px;margin-bottom:6px}
.tanggal{margin:0;font-size:.78rem;color:var(--pudar);font-weight:700;letter-spacing:.04em}
.tema{margin:4px 0 0;font:800 1.25rem/1.2 'Iowan Old Style',Palatino,Georgia,serif;color:var(--hutan)}
.rujukan{margin:2px 0 0;font-size:.82rem;font-weight:800;color:#6b4f12;background:var(--emas-muda);padding:5px 10px;border-radius:999px;white-space:nowrap}
.ayat{list-style:none;margin:0;padding:0}
.ayat li{padding:16px 10px;border-radius:16px;transition:background .25s ease}
.ayat li+li{border-top:1px solid #efe7d4}
.ayat li.aktif{background:#e6f2ec;box-shadow:inset 3px 0 0 var(--zamrud)}
.arab{font-family:"Amiri Quran",serif;font-size:clamp(1.6rem,6vw,2.1rem);line-height:2.25;direction:rtl;text-align:right;margin:0;color:#0f1f1a}
.no{display:inline-grid;place-items:center;min-width:1.9em;height:1.9em;margin-right:.3em;border-radius:50%;border:1.5px solid var(--emas);
  font:700 .5em/1 'Segoe UI',system-ui,sans-serif;color:#6b4f12;vertical-align:middle}
.arti{margin:8px 0 0;color:#34443e;line-height:1.65;font-size:.98rem}
.arti b{color:var(--zamrud);font-weight:800;margin-right:4px}
.keterangan{margin:10px 4px 0;font-size:.84rem;color:var(--pudar);line-height:1.55;background:#f4eedf;border-radius:12px;padding:10px 12px}
.aksi{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
button{font:700 .92rem/1 'Segoe UI',system-ui,sans-serif;border-radius:999px;padding:12px 16px;border:1px solid var(--garis);background:#fff;color:var(--hutan);cursor:pointer}
button.utama{background:var(--zamrud);border-color:var(--zamrud);color:#fff}
button:disabled{opacity:.45;cursor:default}
button:focus-visible{outline:3px solid var(--emas);outline-offset:2px}
.galat{margin:12px 0 0;color:#9f1239;font-size:.9rem}
.geser{display:flex;justify-content:center;gap:8px;margin:16px 0 0}
.geser button{background:transparent;border-color:#cfc3a3;color:#5a4a22;padding:9px 14px;font-size:.85rem}
.tentang{margin:30px auto 0;max-width:60ch;text-align:left;color:var(--pudar);line-height:1.6;font-size:.9rem}
.tentang h2{font:800 1.05rem/1.2 'Iowan Old Style',Palatino,Georgia,serif;color:var(--hutan);margin:0 0 6px}
.tentang p{margin:0 0 8px}.sumber{color:#4d5c55;font-weight:600}.kecil{font-size:.8rem}
.tentang a{color:var(--zamrud);font-weight:700}
a.back{display:inline-block;margin-top:20px;color:var(--zamrud);font-weight:800;text-decoration:none}
footer{margin:22px 0 8px;color:var(--pudar);font-size:.78rem}
@media(max-width:640px){body{padding:0 14px 22px}:root{--tinggi-langit:370px}.langit::before{width:46px;height:46px;top:22px;right:18px}.kartu{padding:18px 14px 14px}.kepala{flex-direction:column}.ayat li{padding:14px 6px}}
@media(prefers-reduced-motion:reduce){.ayat li{transition:none}}