/* ============================================================
   VERSI B — TAMPILAN BACA
   Dimuat SETELAH app.css, jadi menimpa aturan versi A.

   Masalah versi A: hampir tiap potong isi punya kotak sendiri —
   62 kotak berwarna + 116 kartu tabel. Di layar HP itu terbaca
   sebagai tumpukan bingkai, bukan sebagai bacaan.

   Prinsip versi B:
   - Bingkai dihapus, diganti garis rambut dan JARAK.
   - Warna cuma dipakai pada garis tepi, bukan sebagai latar penuh.
   - Huruf lebih besar dan lebih lega; jarak antar bagian diperbesar.
   - SEMUA rata di satu tepi halaman 20px: teks, garis pemisah, dan
     foto. Kalau tepinya beda-beda, hasilnya terbaca berantakan.
   ============================================================ */

/* ---------- badan bacaan ---------- */
.baca-gulir { padding-bottom: 128px; }

.baca-judul { padding: 26px 20px 20px; border-bottom: 0; }
.baca-judul h1 { font-size: 29px; letter-spacing: -.03em; line-height: 1.08; margin-top: 8px; }
.baca-pembuka { margin-top: 13px; font-size: 17px; line-height: 1.6; color: var(--kabut); }

.baca-isi { padding: 0 20px; font-size: 17px; line-height: 1.7; }
.baca-isi p { margin: 0 0 15px; }
.baca-isi ul, .baca-isi ol { margin: 14px 0 0; padding-left: 22px; }
.baca-isi li { margin-bottom: 11px; }
.baca-isi li::marker { color: var(--mangga); font-weight: 800; }

/* ---------- akordeon ----------
   Tab itu TOMBOL, jadi harus kelihatan bisa ditekan dan jelas batasnya.
   Yang dibikin rata cuma ISI bacaannya. Versi sebelumnya dua-duanya
   dibikin rata, akibatnya antar tab jadi nggak kelihatan bedanya. */
.akor-bungkus { padding: 14px 0 0; }
.akor-hitung { padding: 0 20px; margin-bottom: 4px; font-size: 12.5px; letter-spacing: .04em; }
.akor {
  border: 1.5px solid #C7D8E2; border-radius: 14px;
  background: var(--kaca); margin: 0 20px 10px;
  box-shadow: 0 1px 2px rgba(15, 61, 86, .06);
  overflow: hidden;
}
.akor:last-child { border-bottom: 1px solid var(--garis); }
.akor.buka {
  border-color: var(--beku);
  box-shadow: 0 3px 14px rgba(15, 61, 86, .13);
}
.akor-kepala { padding: 16px 15px; gap: 12px; align-items: flex-start; }
.akor-kepala:active { background: var(--es); }
.akor.buka .akor-kepala { background: var(--es); border-bottom: 1.5px solid #C7D8E2; }
.akor-no {
  width: 26px; height: 26px; border-radius: 8px; font-size: 12.5px;
  background: var(--es); color: var(--beku); border: 1.5px solid #C7D8E2;
  margin-top: 1px; font-weight: 800;
}
.akor.buka .akor-no { background: var(--mangga); border-color: var(--mangga); color: var(--beku); }
.akor-judul { font-size: 17.5px; line-height: 1.3; letter-spacing: -.025em; }
.akor-tanda { margin-top: 3px; }
.akor-isi.baca-isi { padding: 16px 15px 22px; }

/* ---------- kotak sorotan: garis tepi saja, tanpa latar penuh ---------- */
.baca-isi .kk {
  margin-top: 18px; padding: 2px 0 2px 15px; border-radius: 0;
  border-left: 3px solid var(--garis-tua); background: none;
  font-size: 16.5px; line-height: 1.62;
}
.baca-isi .kk.kuning { border-left-color: var(--mangga); background: none; }
.baca-isi .kk.hijau  { border-left-color: var(--daun); background: none; }
.baca-isi .kk.merah  { border-left-color: var(--merah); background: none; }
.baca-isi .kk.abu    { border-left-color: var(--garis-tua); background: none; }
.baca-isi .kk b { color: var(--beku); }
.baca-isi .kk.merah b { color: #A5382A; }

/* kalimat kunci — satu-satunya yang masih boleh mencolok */
.baca-isi .kutip {
  margin: 22px 0; padding: 0 0 0 16px; border: 0; border-left: 4px solid var(--mangga);
  border-radius: 0; background: none; font-size: 20px; line-height: 1.32;
  letter-spacing: -.03em;
}

/* ---------- tabel: baris rata, tanpa kartu ---------- */
.baca-isi .tb { margin-top: 16px; gap: 0; }
.baca-isi .tb-k {
  padding: 13px 0; border: 0; border-top: 1px solid var(--garis);
  border-radius: 0; background: none;
}
.baca-isi .tb-k:first-child { border-top: 1.5px solid var(--garis-tua); }
.baca-isi .tb-k:last-child { border-bottom: 1px solid var(--garis); }
.baca-isi .tb-s { font-size: 16.5px; line-height: 1.55; }
.baca-isi .tb-s + .tb-s { margin-top: 6px; padding-top: 0; border-top: 0; }
.baca-isi .tb-s.tb-u { font-weight: 800; font-size: 17px; }
.baca-isi .tb-l {
  font-size: 10.5px; letter-spacing: .12em; color: var(--kabut);
  margin-bottom: 2px; font-weight: 800;
}
.baca-isi .tb-s.tb-u .tb-l { display: none; }

/* ---------- tabel harga: tanpa kotak pembungkus ---------- */
.baca-isi .hrg { margin-top: 16px; padding: 0; border: 0; border-radius: 0; background: none; }
.baca-isi .hrg-b { padding: 10px 0; border-bottom: 1px solid var(--garis); font-size: 16.5px; }
.baca-isi .hrg-b:first-child { border-top: 1.5px solid var(--garis-tua); }
.baca-isi .hrg-jml { border-top: 1.5px solid var(--beku); }

/* ---------- panel hasil hitungan ---------- */
.baca-isi .hasilHit { margin-top: 18px; padding: 16px 18px; border-radius: 16px; }
.baca-isi .hasilHit .ang { font-size: 22px; }

/* ---------- naskah & catatan ---------- */
.baca-isi .naskah {
  margin-top: 14px; padding: 13px 16px; border-radius: 14px;
  border: 0; background: var(--es); color: #7A5A16;
}
.baca-isi .disc {
  margin-top: 16px; padding: 0 0 0 15px; border: 0;
  border-left: 3px solid var(--garis-tua); border-radius: 0;
  background: none; font-size: 14.5px; line-height: 1.55;
}
.baca-isi .sumber {
  margin-top: 26px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--garis);
  border-radius: 0; font-size: 13.5px; line-height: 1.6;
}

/* ---------- kotak langkah: satu-satunya blok berlatar ---------- */
.baca-isi .aksi {
  margin-top: 30px; padding: 20px 22px; border-radius: 18px;
  border: 0; background: var(--beku);
}
.baca-isi .aksi h4 { color: var(--mangga); font-size: 11.5px; margin-bottom: 12px; }
.baca-isi .aksi ol { padding-left: 20px; }
.baca-isi .aksi li { color: #E6EFF4; font-size: 16.5px; font-weight: 600; margin-bottom: 10px; }
.baca-isi .aksi li::marker { color: var(--mangga); }

/* ---------- foto: sejajar teks, sudut dilembutkan ---------- */
.baca-isi .fto, .baca-isi .gbr { margin: 20px 0; }
.baca-isi .fto img { border-radius: 14px; }
.baca-isi .fto figcaption { padding: 0 2px; margin-top: 9px; font-size: 14px; }
.baca-isi .gbr svg { padding: 0; }
.baca-isi .fto.berlabel { margin-left: 0; margin-right: 0; }
.baca-isi .fto.tegak { margin: 20px 0; }
.baca-isi .fto.tegak img { border-radius: 16px; }
.baca-isi .ftoDua { margin: 20px 0; gap: 8px; }
.baca-isi .ftoDua .fto { margin: 0; }
.baca-isi .ftoDua .fto img { border-radius: 12px; }
.baca-isi .ftoDua .fto figcaption { padding: 0; }
.baca-isi .ftoKet { font-size: 14px; }

/* ---------- percakapan & layar story ---------- */
.baca-isi .wa { margin-top: 18px; border-radius: 18px; border: 0; }
.baca-isi .stBaris { margin-top: 18px; gap: 8px; }

/* ---------- daftar bacaan di beranda ---------- */
.baris-baca {
  border: 1.5px solid #C7D8E2; border-radius: 14px;
  background: var(--kaca); padding: 15px 14px; margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(15, 61, 86, .06);
}
.baris-baca.beres { background: #F4FAF7; border-color: #BFE0CF; }
.baris-no {
  background: var(--es); border: 1.5px solid #C7D8E2; color: var(--beku);
  border-radius: 8px; font-size: 13px; font-weight: 800;
}
.baris-baca.beres .baris-no { background: var(--daun); border-color: var(--daun); color: #fff; }
.baris-judul { font-size: 17px; letter-spacing: -.02em; }
.grup-baca { margin-top: 28px; }
.grup-judul { font-size: 20px; }

/* ---------- sambutan beranda: ikut tergulir, bukan dipatok ---------- */
.kepala-gulir { padding: 18px 0 4px; }
.kepala-gulir .maju { margin-top: 14px; }

/* ---------- bar bawah: dikecilkan ----------
   Owner: "ini terlalu gede ganggu tampilan hp". 76px itu hampir sepersepuluh
   layar HP cuma buat 4 tombol yang jarang ditekan. Turun ke 58px, ikon 24->21,
   label 12->10.5. Masih di atas 44px, jadi tetap gampang dipencet. */
.nav { height: calc(58px + env(safe-area-inset-bottom, 0px)); }
.nav button { gap: 3px; padding: 5px 0 6px; }
.nav button svg { width: 21px; height: 21px; stroke-width: 2.5; }
.nav button span { font-size: 10.5px; letter-spacing: .01em; }

/* ---------- huruf turun satu tingkat ----------
   Semua ukuran di atas diturunkan ~1 tingkat biar satu layar HP muat lebih
   banyak. Badan bacaan berhenti di 16px — di bawah itu ibu-ibu susah baca. */
.baca-judul { padding: 22px 20px 16px; }
.baca-judul h1 { font-size: 26px; }
.baca-pembuka { font-size: 15.5px; margin-top: 11px; }
.baca-isi { font-size: 16px; line-height: 1.68; }
.baca-isi p { margin: 0 0 14px; }
.baca-isi li { margin-bottom: 10px; }
.akor-judul { font-size: 16.5px; }
.akor-kepala { padding: 14px 14px; }
.akor-no { width: 24px; height: 24px; font-size: 12px; border-radius: 7px; }
.akor-isi.baca-isi { padding: 15px 14px 20px; }
.baca-isi .kk { font-size: 15.5px; line-height: 1.6; }
.baca-isi .kutip { font-size: 18.5px; margin: 20px 0; }
.baca-isi .tb-s { font-size: 15.5px; }
.baca-isi .tb-s.tb-u { font-size: 16px; }
.baca-isi .hrg-b { font-size: 15.5px; }
.baca-isi .aksi li { font-size: 15.5px; }
.baca-isi .hasilHit .ang { font-size: 20px; }
.baca-isi .disc { font-size: 13.5px; }
.baca-isi .fto figcaption, .baca-isi .ftoKet { font-size: 13px; }
.baris-judul { font-size: 16px; }
.baris-baca { padding: 13px 13px; margin-bottom: 9px; }
.baris-no { width: 24px; height: 24px; font-size: 12px; }
.grup-judul { font-size: 18.5px; }
.grup-baca { margin-top: 24px; }
.baca-gulir { padding-bottom: 104px; }
.toast { bottom: 76px; }

/* ---------- REL WAKTU (gaya 35, dipilih owner 22 Agt 2026) ----------
   Nomor jadi bulat dan disambung garis tegak, jadi daftar bacaan kebaca
   sebagai satu perjalanan berurutan.

   Cara nariknya: garis rel digambar ::before di TIAP kartu, dipanjangin
   lewat atas dan bawah kartu (top/bottom minus) supaya nyambung
   menyeberangi jarak antar kartu. Kartu pertama mulai dari titiknya,
   kartu terakhir berhenti di titiknya.

   WAJIB DIINGAT: .akor di atas ini overflow:hidden, yang MOTONG rel.
   Di bawah dibikin visible, makanya sudut .akor-kepala harus dibulatkan
   sendiri — kalau tidak, latar kepala nyembul keluar dari sudut kartu. */
.baris-baca { position: relative; }
.baris-baca::before {
  content: ''; position: absolute; left: 24px; top: -9px; bottom: -9px;
  width: 2px; background: var(--garis-tua); z-index: 0;
}
/* kartu pertama: rel mulai dari titiknya, bukan dari atas kartu */
.grup-kepala + .baris-baca::before { top: 25px; }
/* kartu terakhir: rel berhenti di titiknya */
.baris-baca:last-child::before { top: -9px; bottom: auto; height: 34px; }
/* satu-satunya kartu di grup (Pembuka cuma 1 bacaan): rel disembunyikan */
.grup-kepala + .baris-baca:last-child::before { display: none; }

.baris-no {
  position: relative; z-index: 1; border-radius: 99px;
  background: var(--kaca); border: 2px solid var(--garis-tua); color: var(--beku);
}
.baris-baca.beres .baris-no { background: var(--daun); border-color: var(--daun); }

/* ---------- bagian di dalam materi ---------- */
.akor { position: relative; overflow: visible; }
.akor::before {
  content: ''; position: absolute; left: 25px; top: -10px; bottom: -10px;
  width: 2px; background: var(--garis-tua); z-index: 0;
}
.akor-hitung + .akor::before { top: 26px; }
.akor:last-child::before { top: -10px; bottom: auto; height: 36px; }

.akor-no {
  position: relative; z-index: 1; border-radius: 99px;
  background: var(--kaca); border: 2px solid var(--garis-tua);
}
.akor.buka .akor-no { background: var(--mangga); border-color: var(--mangga); }

/* Sudut dibulatkan sendiri karena overflow kartunya dibuka buat rel. */
.akor-kepala { border-radius: 12.5px; position: relative; z-index: 1; }
.akor.buka .akor-kepala { border-radius: 12.5px 12.5px 0 0; }
.akor-isi.baca-isi { position: relative; z-index: 1; background: var(--kaca);
                     border-radius: 0 0 12.5px 12.5px; }