/* ============================================================
   CUAN BEKU — TEMA
   Dunia visual "beku + cuan" (docs/PRD.md §12): dingin & bersih kayak
   bagian dalam freezer, satu titik hangat (--mangga) CUMA buat aksi & uang.
   ============================================================ */

:root {
  --es: #EFF4F7;        /* latar — putih beku */
  --kaca: #FFFFFF;      /* permukaan kartu */
  --beku: #0F3D56;      /* teks utama, navy dingin */
  --kabut: #6E8697;     /* teks sekunder */
  --mangga: #FFB627;    /* aksi & uang. bukan dekorasi */
  --mangga-terang: #FFC959;
  --mangga-gelap: #EDA411;
  --mangga-tua: #8A6407;
  --daun: #1E9E6A;      /* selesai / centang */
  --daun-tua: #147C52;
  --garis: #DCE6EC;
  --garis-tua: #B9CFDC;
  --merah: #C0392B;
  --luar: #DBE5EB;      /* latar di luar container 430px */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--luar);
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--beku);
}
button, input { font-family: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--mangga); outline-offset: 2px; }
::selection { background: #FFE6A8; }
a { color: var(--beku); text-decoration: underline; text-decoration-color: var(--mangga); text-underline-offset: 3px; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gulir::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- cangkang mobile-only 430px (PRD §11) ---------- */
#app {
  max-width: 430px; margin: 0 auto;
  height: 100vh; height: 100dvh;
  background: var(--es); position: relative;
  display: flex; flex-direction: column; overflow: hidden;
}
.layar { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------- teks ---------- */
.judul-layar { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; line-height: 1.15; text-wrap: pretty; }
.label { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kabut); }
.ket { font-size: 13px; color: var(--kabut); }
.angka, .tnum { font-variant-numeric: tabular-nums; }
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------- kepala layar ---------- */
.kepala { padding: 18px 20px 16px; background: var(--kaca); border-bottom: 1px solid var(--garis); flex: none; }
.kepala-balik {
  display: flex; align-items: center; gap: 4px; min-height: 44px;
  padding: 0; margin: 0 0 2px -4px; border: 0; background: none;
  color: var(--kabut); font-size: 15px; font-weight: 600;
}
.kepala-balik:hover { color: var(--beku); }

/* ---------- isi yang digulir ---------- */
.isi { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 20px 108px; }
.isi-kolom { display: flex; flex-direction: column; gap: 24px; }
/* anak area gulir jangan ikut menyusut — konten harus meluber & digulir */
.isi > *, .lesson-panel > * { flex-shrink: 0; }

/* ---------- kartu ---------- */
.kartu { border-radius: 20px; background: var(--kaca); border: 1px solid var(--garis); box-shadow: 0 1px 2px rgba(15,61,86,.06); }
.kartu-isi { padding: 16px; }
.kartu-tua { border-radius: 20px; background: var(--beku); color: #FFFFFF; box-shadow: 0 6px 20px rgba(15,61,86,.18); }
.kartu-klik { cursor: pointer; }
.kartu-klik:hover { border-color: var(--garis-tua); }

/* ---------- tombol ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 999px; font-weight: 700; }
.btn-mangga { background: var(--mangga); color: var(--beku); min-height: 52px; font-size: 17px; width: 100%; }
.btn-mangga:hover { background: var(--mangga-terang); }
.btn-mangga:active { background: var(--mangga-gelap); }
.btn-putih { background: var(--kaca); color: var(--beku); border: 1px solid var(--garis-tua); min-height: 52px; font-size: 16px; width: 100%; }
.btn-putih:hover { background: #E7F0F5; }
.btn-merah { background: var(--kaca); color: var(--merah); border: 1px solid #F0D2CD; min-height: 52px; font-size: 16px; width: 100%; }
.btn-merah:hover { background: #FBEEEC; }

/* ---------- input pil ---------- */
.pil-input { display: flex; align-items: center; gap: 8px; padding: 0 16px; min-height: 52px; border-radius: 999px; border: 1px solid var(--garis); background: var(--es); }
.pil-input input { flex: 1; min-width: 0; border: 0; background: none; font-size: 18px; font-weight: 700; color: var(--beku); font-variant-numeric: tabular-nums; outline: none; }
.input-teks { width: 100%; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--garis); background: var(--es); font-size: 16px; font-weight: 600; color: var(--beku); outline: none; }

/* ---------- chip / filter ---------- */
/* Chip MEMBUNGKUS ke bawah, bukan digulir ke samping. Waktu digulir,
   pilihan yang di luar layar nggak keliatan sama sekali — pengguna nggak
   tahu ada pilihan lain di sebelah kanan. Hurufnya dikecilkan supaya
   semuanya muat tanpa perlu digulir. */
.baris-chip { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 20px 12px; }
.chip { flex: none; min-height: 36px; padding: 0 13px; border-radius: 999px; font-size: 13.5px; font-weight: 700; white-space: nowrap; border: 1px solid var(--garis); background: var(--kaca); color: var(--beku); }
.chip.aktif { background: var(--beku); color: #FFFFFF; border-color: var(--beku); }

/* Dua tingkat saringan harus KELIHATAN beda, kalau tidak orang nggak tahu
   yang mana yang "pilih satu" dan yang mana yang "bisa nyala barengan".
   - .chip biasa  = pilih SATU kategori, aktifnya navy penuh
   - .chip.saring = saringan tambahan, lebih kecil, garis putus-putus,
     aktifnya kuning bertanda centang — jelas beda bentuknya */
.chip.saring {
  min-height: 32px; padding: 0 11px; font-size: 12.5px; font-weight: 700;
  border-style: dashed; border-color: var(--garis-tua); color: var(--kabut);
  background: none;
}
.chip.saring.aktif {
  background: #FFF3D6; border-style: solid; border-color: var(--mangga-gelap);
  color: #7A5A16;
}
.saring-judul {
  padding: 0 20px 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--kabut);
}

/* ---------- meter beku (beranda) ---------- */
.meter { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(180deg, #FFFFFF, #E3EDF3); border: 1px solid var(--garis); overflow: hidden; }
.meter-isi { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #FFC959, #FFB627); transition: width 600ms cubic-bezier(.3,.7,.2,1); }

/* ---------- pita beku: penanda progres di kartu modul ----------
   Dulu lapisan frost nutupin SELURUH kartu dan bikin judulnya pudar
   sampai susah dibaca. Sekarang cuma pita tipis di dasar kartu yang
   "mencair" (keisi mangga) sesuai progres — teks tetap bening penuh. */
.pita-beku {
  position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: linear-gradient(90deg, #E3EDF3, #F2F7FA);
  pointer-events: none;
}
.pita-cair {
  height: 100%;
  background: linear-gradient(90deg, #FFC959, var(--mangga));
  transition: width 600ms cubic-bezier(.3,.7,.2,1);
}
.kartu-klik:has(.pita-cair[style*="width:100%"]) .pita-beku { background: #D6F0E3; }
.nomor-beres { background: #E4F5EC !important; color: var(--daun-tua) !important; }
@media (prefers-reduced-motion: reduce) {
  .pita-cair, .meter-isi { transition: none !important; }
}

/* ---------- badge status ---------- */
.badge-selesai { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 7px; border-radius: 999px; background: #E4F5EC; font-size: 12px; font-weight: 700; color: var(--daun-tua); }
.dot-pelajaran { flex: none; width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--es); color: var(--kabut); }
.dot-pelajaran.beres { background: #E4F5EC; color: var(--daun-tua); }

/* ---------- bottom nav ---------- */
.nav {
  flex: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: calc(76px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; align-items: stretch; background: var(--kaca);
  border-top: 1px solid var(--garis); box-shadow: 0 -2px 12px rgba(15,61,86,.06);
}
.nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: none; padding: 6px 0 10px; color: #9BB0BD; }
.nav button.aktif { color: var(--beku); }
.nav button span { font-size: 12px; font-weight: 700; }

/* ---------- toast ---------- */
@keyframes toastMuncul { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast {
  position: absolute; left: 50%; bottom: 96px; z-index: 9; transform: translateX(-50%);
  max-width: 320px; padding: 13px 20px; border-radius: 999px;
  background: var(--beku); color: #FFFFFF; font-size: 15px; font-weight: 600;
  text-align: center; box-shadow: 0 8px 24px rgba(15,61,86,.28);
  animation: toastMuncul 220ms ease-out;
}

/* ---------- layar pelajaran: SATU gulungan panjang ----------
   Isi pelajaran ada di dalam gambar; panel aksi nyambung di bawahnya
   dalam aliran gulir yang sama — jadi kerasa satu halaman utuh. */
.lesson { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: var(--es); }
.lesson-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 16px 4px 12px; background: var(--kaca); border-bottom: 1px solid var(--garis);
}
.lesson-gulir { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; background: var(--es); }
/* Gulungan dikirim per keping biar cepat kebuka. `display:block` +
   `vertical-align` mastiin gak ada celah putih di sambungannya, jadi
   dari mata user tetap satu gambar panjang.
   aspect-ratio bikin browser mesen ruangnya duluan — halaman gak
   lompat-lompat pas keping berikutnya nyusul. */
.gulungan {
  display: block; width: 100%; height: auto;
  vertical-align: top; margin: 0;
  aspect-ratio: 880 / 1500; background: var(--es);
}
.gulungan:last-of-type { aspect-ratio: auto; }
.gulungan-plh { padding: 46px 24px 30px; text-align: center; background: var(--kaca); border-bottom: 1px solid var(--garis); }
.lesson-kaki { padding: 20px 20px 40px; }
.aksi-nomor { flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 999px; background: #FFF3D6; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--mangga-tua); font-variant-numeric: tabular-nums; }
.pil-selesai { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: 999px; background: #E4F5EC; color: var(--daun-tua); font-size: 18px; font-weight: 700; }

/* ---------- checklist ---------- */
.hari-kartu { border-radius: 20px; background: var(--kaca); border: 1px solid var(--garis); overflow: hidden; }
.hari-kartu.beres { border-color: #BFE6D2; }
.hari-kepala { display: flex; align-items: center; gap: 11px; padding: 15px 16px; }
.hari-kartu.beres .hari-kepala { background: #F1FAF5; }
.hari-nomor { flex: none; width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--es); color: var(--beku); font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.hari-kartu.beres .hari-nomor { background: var(--daun); color: #FFFFFF; }
.centang-baris { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; min-height: 48px; cursor: pointer; }
.centang-kotak { flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 9px; display: flex; align-items: center; justify-content: center; border: 2px solid #C7D8E2; background: #FFFFFF; }
.centang-baris.on .centang-kotak { border-color: var(--daun); background: var(--daun); }
.centang-teks { flex: 1; font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.centang-baris.on .centang-teks { color: var(--kabut); text-decoration: line-through; }

/* ---------- onboarding & masuk ---------- */
.penuh-tengah { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 32px 24px; gap: 14px; }
.ob-ikon { width: 92px; height: 92px; border-radius: 28px; background: var(--kaca); border: 1px solid var(--garis); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.ob-titik { display: flex; gap: 7px; }
.ob-titik i { width: 8px; height: 8px; border-radius: 999px; background: var(--garis-tua); }
.ob-titik i.on { background: var(--beku); width: 22px; }
.sembunyi { display: none !important; }

/* ---------- login: pesan salah, kotak OTP, tautan teks ---------- */
.pesan-salah {
  font-size: 15px; line-height: 1.45; color: #A5382A; text-align: left;
  background: #FDF1EF; border: 1px solid #F0D2CD; border-radius: 14px;
  padding: 12px 14px;
}
.input-otp {
  width: 100%; box-sizing: border-box; min-height: 64px; text-align: center;
  border-radius: 18px; border: 1px solid var(--garis); background: var(--kaca);
  font-family: var(--font-display); font-size: 34px; font-weight: 800;
  letter-spacing: 0.42em; text-indent: 0.42em; color: var(--beku); outline: none;
  font-variant-numeric: tabular-nums;
}
.input-otp:focus { border-color: var(--mangga); }
.tautan {
  border: 0; background: none; padding: 8px 4px; min-height: 44px;
  font-size: 16px; font-weight: 700; color: var(--beku);
  text-decoration: underline; text-decoration-color: var(--mangga);
  text-underline-offset: 4px;
}
.tautan:hover { color: var(--mangga-tua); }

/* ============================================================
   LAYAR BELAJAR VERSI GULIR
   Beranda = 13 bacaan dalam satu daftar. Buka satu -> digulir
   sampai habis. Tidak ada tombol "next" di tengah bacaan.
   ============================================================ */

/* ---------- kartu kemajuan di beranda ---------- */
.maju { margin-top: 14px; padding: 15px 16px 16px; border-radius: 18px; }
.maju-atas { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 15px; color: #CFE2EC; }
.maju-ang { font-size: 16px; font-weight: 800; color: var(--mangga); }
.maju-rel { margin-top: 9px; height: 7px; border-radius: 99px; background: #16506E; overflow: hidden; }
.maju-isi { height: 100%; border-radius: 99px; background: var(--mangga);
  transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.maju-btn { margin-top: 14px; min-height: 52px; }
.maju-next { margin-top: 10px; font-size: 14px; line-height: 1.4; color: #A8C0CE;
  text-align: center; text-wrap: pretty; }

/* ---------- daftar bacaan ---------- */
.grup-baca { margin-top: 22px; }
.grup-kepala { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 0 2px 9px; }
.grup-judul { font-family: var(--font-display); font-size: 19px; font-weight: 800;
  letter-spacing: -.02em; }
.grup-ket { font-size: 13px; color: var(--kabut); }

.baris-baca { width: 100%; display: flex; align-items: center; gap: 13px;
  padding: 14px 15px; margin-bottom: 9px; border-radius: 16px;
  background: var(--kaca); border: 1px solid var(--garis); text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease; }
.baris-baca:active { transform: scale(.985); }
.baris-baca.beres { background: #F4FAF7; border-color: #C6E7D8; }
.baris-no { flex: none; width: 30px; height: 30px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--es); color: var(--beku); font-weight: 800; font-size: 15px;
  font-variant-numeric: tabular-nums; }
.baris-baca.beres .baris-no { background: var(--daun); color: #fff; }
.baris-teks { flex: 1; min-width: 0; display: block; }
.baris-judul { display: block; font-size: 16.5px; font-weight: 700; line-height: 1.3;
  text-wrap: pretty; }
.baris-ket { display: block; margin-top: 3px; font-size: 13.5px; color: var(--kabut); }
.baris-panah { flex: none; color: var(--kabut); display: flex; }
.tutup-daftar { margin-top: 22px; text-align: center; font-size: 13.5px; color: var(--kabut); }

/* ---------- layar baca ---------- */
.baca-bar { flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 16px 10px 12px; background: var(--kaca);
  border-bottom: 1px solid var(--garis); padding-top: calc(10px + env(safe-area-inset-top)); }
.baca-gulir { padding: 0 0 120px; }

.baca-judul { padding: 22px 20px 18px; border-bottom: 3px solid var(--beku); }
.baca-judul h1 { font-family: var(--font-display); font-size: 27px; font-weight: 800;
  letter-spacing: -.025em; line-height: 1.12; margin: 6px 0 0; text-wrap: pretty; }
.baca-pembuka { margin: 11px 0 0; font-size: 16px; line-height: 1.55; color: var(--kabut);
  text-wrap: pretty; }

.baca-isi { display: block; padding: 0 20px; font-size: 16.5px; line-height: 1.62; }
.baca-isi p { margin: 0 0 11px; text-wrap: pretty; }
.baca-isi p:last-child { margin-bottom: 0; }
.baca-isi b { font-weight: 700; }
.baca-isi i { font-style: italic; }

/* bagian bernomor */
.baca-isi .bag { margin-top: 26px; }
.baca-isi .bag:first-child { margin-top: 20px; }
.baca-isi .bag h3 { display: flex; gap: 10px; align-items: flex-start;
  font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.2; margin: 0 0 10px; text-wrap: pretty; }
.baca-isi .bag h3 .no { flex: none; width: 25px; height: 25px; border-radius: 99px;
  background: var(--mangga); color: var(--beku); font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.baca-isi h4 { font-family: var(--font-display); font-size: 17px; font-weight: 800;
  letter-spacing: -.01em; margin: 18px 0 8px; }

.baca-isi ul, .baca-isi ol { margin: 10px 0 0; padding-left: 21px; }
.baca-isi li { margin-bottom: 8px; text-wrap: pretty; }
.baca-isi li:last-child { margin-bottom: 0; }

/* kotak sorotan */
.baca-isi .kk { margin-top: 14px; padding: 13px 15px; border-radius: 14px; font-size: 15.5px;
  line-height: 1.55; text-wrap: pretty; }
.baca-isi .kk.kuning { background: #FFF8E8; border-left: 4px solid var(--mangga); border-radius: 0 14px 14px 0; }
.baca-isi .kk.kuning b { color: #A8710A; }
.baca-isi .kk.hijau { background: #EAF7F1; border-left: 4px solid var(--daun); border-radius: 0 14px 14px 0; }
.baca-isi .kk.hijau b { color: #14624A; }
.baca-isi .kk.merah { background: #FDECEA; border-left: 4px solid var(--merah); border-radius: 0 14px 14px 0; }
.baca-isi .kk.merah b { color: #A5382A; }
.baca-isi .kk.abu { background: var(--es); }

/* kalimat kunci */
.baca-isi .kutip { margin: 16px 0 0; padding: 15px 17px; border-left: 5px solid var(--mangga);
  background: var(--kaca); border-top: 1px solid var(--garis); border-right: 1px solid var(--garis);
  border-bottom: 1px solid var(--garis); border-radius: 0 14px 14px 0;
  font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1.28;
  letter-spacing: -.02em; text-wrap: pretty; }

/* contoh chat / story */
.baca-isi .naskah { margin-top: 11px; padding: 13px 15px; border-radius: 14px;
  background: var(--kaca); border: 1px dashed #D9C48F; font-size: 15.5px; line-height: 1.55;
  color: #8A6415; font-style: italic; text-wrap: pretty; }
.baca-isi .naskah b { color: var(--beku); font-style: normal; }

/* catatan kecil */
.baca-isi .disc { margin-top: 12px; padding: 11px 14px; border-radius: 12px;
  background: #FFF8E8; border: 1px dashed #E0B95F; font-size: 14px; line-height: 1.5;
  color: #7A5A16; text-wrap: pretty; }
.baca-isi .disc b { color: #A8710A; }
.baca-isi .sumber { margin-top: 20px; padding: 14px 16px; border-radius: 14px;
  border: 1px dashed var(--garis); font-size: 13px; line-height: 1.55; color: var(--kabut); }
.baca-isi .sumber b { display: block; margin-bottom: 5px; font-size: 14px; color: var(--beku); }
.baca-isi .sumber span { display: block; margin-bottom: 3px; }

/* ---------- tabel: dipecah jadi kartu biar kebaca di HP ---------- */
.baca-isi .tb { margin-top: 13px; display: flex; flex-direction: column; gap: 9px; }
.baca-isi .tb-k { padding: 13px 15px; border-radius: 14px; background: var(--kaca);
  border: 1px solid var(--garis); }
.baca-isi .tb-s { font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
.baca-isi .tb-s + .tb-s { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--garis); }
.baca-isi .tb-s.tb-u { font-weight: 700; }
.baca-isi .tb-l { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--kabut); margin-bottom: 3px; }
.baca-isi .tb-s .kata, .baca-isi .kata { color: #A8710A; font-style: italic; }

/* ---------- tabel harga: label kiri, angka kanan ---------- */
.baca-isi .hrg { margin-top: 13px; padding: 13px 15px; border-radius: 14px;
  background: var(--kaca); border: 1px solid var(--garis); }
.baca-isi .hrg-b { display: flex; gap: 12px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid #EDF3F6; font-size: 15.5px; line-height: 1.45; }
.baca-isi .hrg-b:last-child { border-bottom: 0; }
.baca-isi .hrg-k { flex: 1; min-width: 0; text-wrap: pretty; }
.baca-isi .hrg-n { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap;
  font-weight: 600; }
.baca-isi .hrg-gs { border-top: 1px dashed var(--garis); margin-top: 3px; padding-top: 10px; }
.baca-isi .hrg-jml { border-top: 2px solid var(--beku); border-bottom: 0; margin-top: 3px;
  padding-top: 10px; font-weight: 800; }
.baca-isi .hrg-jml .hrg-n { font-weight: 800; }

/* ---------- panel hasil hitungan ---------- */
.baca-isi .hasilHit { margin-top: 14px; padding: 14px 16px; border-radius: 14px;
  background: var(--beku); color: #fff; display: flex; flex-wrap: wrap; gap: 6px 12px;
  align-items: baseline; justify-content: space-between; font-size: 15px; line-height: 1.45; }
.baca-isi .hasilHit .lbl { flex: 1; min-width: 150px; color: #B9D2DF; text-wrap: pretty; }
.baca-isi .hasilHit .lbl b { color: #fff; }
.baca-isi .hasilHit .ang { flex: none; font-family: var(--font-display); font-weight: 800;
  font-size: 20px; color: var(--mangga); white-space: nowrap; }

/* ---------- kotak "Langkah Hari Ini" ---------- */
.baca-isi .aksi { margin-top: 26px; padding: 16px 18px; border-radius: 16px;
  background: #FFF8E8; border: 1.5px solid #F0D493; }
.baca-isi .aksi h4 { font-family: var(--font-body); font-size: 12px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: #A8710A;
  margin: 0 0 9px; }
.baca-isi .aksi ol { margin: 0; padding-left: 20px; }
.baca-isi .aksi li { font-size: 16px; font-weight: 600; line-height: 1.5; margin-bottom: 7px; }
.baca-isi .aksi li:last-child { margin-bottom: 0; }

/* ---------- kaki layar baca ---------- */
.baca-kaki { padding: 26px 20px 0; }
.baca-next { margin-top: 14px; padding: 16px; border-radius: 16px; }
.baca-next-lbl { font-size: 13px; color: #A8C0CE; }
.baca-next-jdl { margin-top: 3px; font-size: 17px; font-weight: 700; line-height: 1.35;
  text-wrap: pretty; }

/* ---------- akordeon bagian ----------
   Judul semua bagian tetap kelihatan; tekan satu buat mekar.
   Yang mekar cuma satu, seperti tab di komputer. */
.akor-bungkus { padding: 16px 20px 0; }
.akor-hitung { font-size: 13px; color: var(--kabut); margin-bottom: 10px; text-align: right; }
.akor { border: 1px solid var(--garis); border-radius: 16px; background: var(--kaca);
  margin-bottom: 9px; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.akor.buka { border-color: var(--garis-tua); box-shadow: 0 2px 12px rgba(15, 61, 86, .08); }
.akor-kepala { width: 100%; display: flex; gap: 11px; align-items: center;
  padding: 14px 15px; background: none; border: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer; }
.akor-kepala:active { background: var(--es); }
.akor-no { flex: none; width: 27px; height: 27px; border-radius: 99px; background: var(--es);
  color: var(--beku); font-size: 13px; font-weight: 800; display: flex;
  align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
  transition: background .15s ease; }
.akor.buka .akor-no { background: var(--mangga); }
.akor-judul { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 17px;
  font-weight: 800; letter-spacing: -.02em; line-height: 1.25; text-wrap: pretty; }
.akor-tanda { flex: none; color: var(--kabut); display: flex;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.akor.buka .akor-tanda { transform: rotate(90deg); color: var(--mangga); }
.akor-isi { padding: 0 15px 18px; }
.akor-isi > *:first-child { margin-top: 0; }
.baca-ekor { margin-top: 6px; }


/* ---------- foto di dalam bacaan ---------- */
.baca-isi .fto, .baca-isi .gbr { margin: 14px 0 4px; padding: 0; }
.baca-isi .fto img { display: block; width: 100%; height: auto; border-radius: 14px;
  background: var(--garis); }
.baca-isi .fto figcaption { margin-top: 7px; font-size: 14px; line-height: 1.45;
  color: var(--kabut); text-wrap: pretty; }
.baca-isi .gbr svg { display: block; width: 100%; height: auto; }
.baca-isi .ftoDua { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.baca-isi .ftoDua .fto { flex: 1; min-width: 140px; margin: 0; }
.baca-isi .ftoDua .fto figcaption { font-weight: 800; color: var(--beku); font-size: 13.5px; }
.baca-isi .ftoKet { flex-basis: 100%; font-size: 14px; line-height: 1.45; color: var(--kabut); }

/* ---------- percakapan WA, layar story tegak, label foto ---------- */

  /* --- percakapan WhatsApp --- */
  .wa{margin-top:14px;border-radius:16px;overflow:hidden;border:1px solid var(--garis);background:#E9E1D8}
  .wa-kepala{display:flex;align-items:center;gap:9px;padding:9px 13px;background:var(--beku)}
  .wa-foto{flex:none;width:22px;height:22px;border-radius:99px;background:#4E7A91}
  .wa-nama{font-size:14px;font-weight:700;color:#fff}
  .wa-badan{padding:11px 13px;display:flex;flex-direction:column;gap:7px}
  .wa-b{max-width:84%;padding:8px 11px;border-radius:11px;font-size:15px;line-height:1.42;
        box-shadow:0 1px 2px rgba(0,0,0,.08)}
  .wa-kirim{align-self:flex-end;background:#DCF8C6;border-bottom-right-radius:3px}
  .wa-terima{align-self:flex-start;background:#fff;border-bottom-left-radius:3px}
  .wa-t{display:block;color:#111}
  .wa-j{display:block;text-align:right;margin-top:3px;font-size:11px;color:#7A8A93}
  .wa-c{margin-left:4px;color:#34B7F1;font-weight:700}

  /* --- layar story tegak --- */
  .stBaris{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
  .st{flex:1;min-width:120px}
  .st-hp{border:4px solid var(--beku);border-radius:18px;padding:3px;background:var(--beku)}
  .st-layar{position:relative;border-radius:13px;overflow:hidden;background:#000;
            aspect-ratio:9/16;display:flex;flex-direction:column}
  .st-bar{padding:6px 7px 0}
  .st-bar i{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.85)}
  .st-gbr{flex:1;min-height:0;position:relative}
  .st-gbr svg{position:absolute;inset:0;width:100%;height:100%}
  .st-teks{padding:7px 8px 10px;font-size:11.5px;font-weight:700;line-height:1.35;color:#fff;
           background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72) 38%);margin-top:-30px;position:relative}
  .st-cap{margin-top:6px;font-size:12.5px;font-weight:700;text-align:center;color:var(--kabut)}

  /* --- tulisan di atas label kosong pada foto --- */
  .fto.berlabel{position:relative;container-type:inline-size}
  .lbl{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;
       text-align:center;line-height:1.12;color:#123B52;transform:rotate(var(--r,0deg));
       overflow:hidden;padding:0 .4cqw}
  .lbl s{text-decoration:none;font-family:'Bricolage Grotesque',system-ui,sans-serif;
       font-weight:800;font-size:2.7cqw;letter-spacing:-.02em}
  .lbl u{text-decoration:none;font-size:1.75cqw;font-weight:600;opacity:.78}
  .lbl em{font-style:normal;font-size:1.9cqw;font-weight:800;color:#A8710A}
  .lbl.kecil s{font-size:2.1cqw}
  .lbl.kecil em{font-size:1.5cqw}


.baca-isi .fto.tegak { display: flex; flex-direction: column; align-items: center; }
.baca-isi .fto.tegak img { width: auto; max-height: 420px; }
.baca-isi .fto.tegak figcaption { text-align: center; }
.baca-isi .ftoDua .fto.tegak img { width: 100%; max-height: none; }

.baca-isi .st-gbr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.baca-isi .st-habis{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,61,86,.62);color:#fff;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:15px;letter-spacing:.08em}