/* halaman.css — hanya untuk halaman /kalkulator/<id>.
 *
 * Dimuat SESUDAH app.css dan bersandar sepenuhnya pada peubah warnanya, jadi
 * tema terang/gelap ikut tanpa satu warna pun ditulis ulang di sini. Yang
 * ditambahkan cuma tata letak baca: satu lajur sempit, sebab halaman ini
 * dibaca, bukan dioperasikan seperti panel.
 */

.hal-body { }

.hal-utama {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

.hal-remah {
  font-size: .85rem;
  opacity: .75;
  margin-bottom: 1rem;
}
.hal-remah a { color: inherit; }

.hal-judul {
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 .75rem;
}

.hal-pembuka {
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 1.5rem;
}

.hal-bagian {
  margin: 0 0 2rem;
  padding-top: .5rem;
}
.hal-bagian > h2 {
  font-size: 1.15rem;
  margin: 0 0 .75rem;
}

/* ---------------------------------------------------------------- rumus */

.hal-rumus-baris {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .7rem .85rem;
  margin-bottom: .5rem;
  border: 1px solid var(--garis, rgba(128,128,128,.35));
  border-radius: .5rem;
  background: var(--kartu, rgba(128,128,128,.06));
}
.hal-rumus-tulis {
  font-size: 1.05rem;
  font-weight: 600;
  /* Rumus harus bisa digeser sendiri di layar sempit, bukan memaksa seluruh
     halaman menggulir mendatar. */
  overflow-x: auto;
  white-space: nowrap;
}
.hal-rumus-arti { font-size: .9rem; opacity: .8; line-height: 1.5; }

/* --------------------------------------------------------------- contoh */

.hal-cerita { line-height: 1.6; margin: 0 0 .85rem; }

.hal-hasil {
  border: 1px solid var(--garis, rgba(128,128,128,.35));
  border-radius: .5rem;
  overflow: hidden;
}
.hal-hasil-baris {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--garis, rgba(128,128,128,.2));
}
.hal-hasil-baris:last-child { border-bottom: 0; }
.hal-hasil-baris.is-utama { font-weight: 700; }
.hal-hasil-label { opacity: .85; }
.hal-hasil-nilai { font-variant-numeric: tabular-nums; white-space: nowrap; }

.hal-nota { margin: .6rem 0 0; opacity: .7; line-height: 1.5; }

/* ------------------------------------------------------- alat & terkunci */

.hal-kalk-tanpa-js { opacity: .8; line-height: 1.55; }

.hal-terkunci {
  border: 1px solid var(--garis, rgba(128,128,128,.35));
  border-radius: .5rem;
  padding: 1rem;
}
.hal-lebih { margin: 0 0 .9rem; padding-left: 1.15rem; line-height: 1.6; }
.hal-lebih li { margin-bottom: .35rem; }
.hal-terkunci-nota { margin: 0 0 1rem; line-height: 1.55; }

/* Tombol ajakan memakai bentuk yang sama dengan "Lihat harga" di pita, BUKAN
   hijau tombol START — hijau sudah punya arti di panel dan meminjamnya untuk
   ajakan membeli merusak arti itu. Alasan yang sama ditulis di ui.js. */
.hal-tombol {
  display: inline-block;
  padding: .6rem 1.1rem;
  border-radius: .4rem;
  text-decoration: none;
  font-weight: 600;
  /* Tinggi sentuh 44px di HP, aturan yang sama dengan butir menu kalkulator. */
  min-height: 44px;
  line-height: 1.9;
  box-sizing: border-box;
  border: 1px solid currentColor;
}

/* ------------------------------------------------------- hitungan lain */

.hal-lain ul { list-style: none; margin: 0; padding: 0; }
.hal-lain li { border-bottom: 1px solid var(--garis, rgba(128,128,128,.2)); }
.hal-lain li:last-child { border-bottom: 0; }
.hal-lain a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
  /* Tinggi sentuh 44px, aturan yang sama dengan daftar hitungan di aplikasi. */
  min-height: 44px;
  line-height: 1.6;
  padding: .7rem .25rem;
  color: inherit;
}
.hal-lencana {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .7;
  border: 1px solid currentColor;
  border-radius: .25rem;
  padding: 0 .3rem;
  white-space: nowrap;
}

.hal-balik { margin: 2rem 0 0; }

/* --------------------------------------------------------------- tanya */

.hal-tanya-butir { margin-bottom: 1.1rem; }
.hal-tanya-t { font-size: 1rem; margin: 0 0 .3rem; }
.hal-tanya-j { margin: 0; line-height: 1.6; opacity: .9; }

/* ------------------------------------------------- halaman /rangkaian/<id>
   Diagramnya sendiri TIDAK berbaju di sini: ia memakai `.panel`,
   `.panel-judul`, dan `.panel-gulir` dari app.css — pembungkus yang sama
   persis dengan yang dipakai aplikasi. Itu bukan penghematan baris, melainkan
   yang membuat gambar di halaman dan gambar di alat tidak bisa berbeda
   diam-diam. Yang ditambah di bawah cuma baju untuk teks yang memang hanya
   ada di halaman. */

.hal-langkah-daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: langkah;
}

.hal-langkah { margin-bottom: 1.15rem; }
.hal-langkah:last-child { margin-bottom: 0; }

.hal-langkah-t {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  font-size: 1rem;
  margin: 0 0 .3rem;
}

/* Nomor langkah, bukan bulatan hias: urutannya urutan WAKTU, dan pembaca yang
   melompat ke langkah 3 harus tahu ia melompat. */
.hal-langkah-n {
  flex: none;
  min-width: 1.55rem;
  height: 1.55rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pelat, rgba(128,128,128,.14));
  border: 1px solid var(--garis, rgba(128,128,128,.28));
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

.hal-langkah-j { margin: 0; line-height: 1.6; opacity: .9; }

.hal-salah-butir {
  margin-bottom: 1.05rem;
  padding-left: .85rem;
  border-left: 3px solid var(--awas, #b23a10);
}
.hal-salah-butir:last-child { margin-bottom: 0; }
.hal-salah-t { font-size: 1rem; margin: 0 0 .3rem; }
.hal-salah-j { margin: 0; line-height: 1.6; opacity: .9; }

/* Kode modul (3.1, 3.8b) di daftar rangkaian lain. Lebarnya dipatok supaya
   nama rangkaiannya rata, bukan bergeser mengikuti panjang kodenya. */
.hal-kode {
  display: inline-block;
  min-width: 2.6rem;
  font-variant-numeric: tabular-nums;
  opacity: .7;
}