/* Belajar Listrik — tampilan.
   Bahasa rupanya diambil dari pintu panel industri: enamel abu kehijauan,
   pelat yang sedikit lebih terang dari latar, huruf DIN pada label, dan warna
   fasa PUIL yang dikunci sebagai warna semantik — tidak boleh dipakai hiasan. */

/* ------------------------------------------------------------------ token */

:root {
  --dasar: #dee0d6;
  --pelat: #f2f3ec;
  --pelat-2: #e7e9de;
  --tinta: #191d18;
  --tinta-lembut: #565c52;
  /* Khusus teks CONTOH di dalam isian (placeholder). Lebih pucat daripada
     --tinta-lembut dengan sengaja: ia petunjuk, bukan isi. */
  --tinta-samar: #9aa094;
  --garis: #c3c6b6;
  --aksen: #14525f;
  --aksen-2: #1d6f80;
  --aksen-teks: #ffffff;

  --fasa-L1: #c6291e;
  --fasa-L2: #ab7a04;
  --fasa-L3: #23262b;
  --fasa-N: #2c5fa8;
  --kabel-mati: #a9ad9e;

  --awas: #b23a10;
  /* Cincin tombol di gambar. Hijau yang sama dengan .tombol-start, tapi
     punya token sendiri sebab cincin setipis itu perlu dicerahkan di tema
     gelap sementara tombol konsolnya tidak. */
  --tombol-hidup: #2f7d33;
  --awas-lembut: #f3ddd0;

  /* Kepala paku keling — motif tanda tangan: tiap pelat panel dibaut di
     empat sudutnya, sama seperti pintu panel sungguhan. Terang di atas,
     gelap di bawah, supaya kelihatan timbul, bukan cuma titik datar. */
  --paku-terang: rgba(255, 255, 255, .55);
  --paku-gelap: rgba(0, 0, 0, .22);

  --huruf-judul: Bahnschrift, "DIN Alternate", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --huruf-badan: "Segoe UI", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --huruf-angka: "Cascadia Mono", Consolas, "Roboto Mono", "SF Mono", Menlo, monospace;

  --sudut: 3px;
  --bayang: 0 1px 0 rgba(0, 0, 0, .06), 0 2px 10px rgba(0, 0, 0, .05);
  --bayang-tekan: inset 0 1px 2px rgba(0, 0, 0, .16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --dasar: #14171a;
    --pelat: #1c2126;
    --pelat-2: #23282e;
    --tinta: #e4e7df;
    --tinta-lembut: #98a094;
    --tinta-samar: #656d63;
    --garis: #333a40;
    --aksen: #4fb3c4;
    --aksen-2: #6fcbda;
    --aksen-teks: #0d1114;

    /* T (L3) berwarna hitam menurut PUIL. Di latar gelap hitam tidak terbaca,
       jadi ditampilkan terang — pembalikan yang disengaja, bukan kelalaian. */
    --fasa-L1: #f2564a;
    --fasa-L2: #e8b93a;
    --fasa-L3: #c6cbd2;
    --fasa-N: #6c9fe8;
    --kabel-mati: #4a5158;

    --awas: #ff7a4d;
    --tombol-hidup: #52b356;
    --awas-lembut: #3a2118;

    --bayang: 0 1px 0 rgba(0, 0, 0, .4), 0 2px 12px rgba(0, 0, 0, .35);
  }
}

/* Tombol tema harus menang di dua arah, jadi token ditulis ulang di sini. */
:root[data-theme="light"] {
  --dasar: #dee0d6; --pelat: #f2f3ec; --pelat-2: #e7e9de;
  --tinta: #191d18; --tinta-lembut: #565c52; --tinta-samar: #9aa094; --garis: #c3c6b6;
  --aksen: #14525f; --aksen-2: #1d6f80; --aksen-teks: #ffffff;
  --fasa-L1: #c6291e; --fasa-L2: #ab7a04; --fasa-L3: #23262b; --fasa-N: #2c5fa8;
  --kabel-mati: #a9ad9e;
  --awas: #b23a10; --awas-lembut: #f3ddd0;
  --tombol-hidup: #2f7d33;
  --bayang: 0 1px 0 rgba(0, 0, 0, .06), 0 2px 10px rgba(0, 0, 0, .05);
}

:root[data-theme="dark"] {
  --dasar: #14171a; --pelat: #1c2126; --pelat-2: #23282e;
  --tinta: #e4e7df; --tinta-lembut: #98a094; --tinta-samar: #656d63; --garis: #333a40;
  --aksen: #4fb3c4; --aksen-2: #6fcbda; --aksen-teks: #0d1114;
  --fasa-L1: #f2564a; --fasa-L2: #e8b93a; --fasa-L3: #c6cbd2; --fasa-N: #6c9fe8;
  --kabel-mati: #4a5158;
  --awas: #ff7a4d; --awas-lembut: #3a2118;
  --tombol-hidup: #52b356;
  --bayang: 0 1px 0 rgba(0, 0, 0, .4), 0 2px 12px rgba(0, 0, 0, .35);
}

/* ------------------------------------------------------------------- dasar */

* { box-sizing: border-box; }

/* Aturan display apa pun di berkas ini menang atas [hidden] bawaan peramban,
   jadi elemen yang disembunyikan lewat atribut tetap tergambar. Gerbang bayar
   bergantung pada atribut itu — pengecualiannya ditulis sekali di sini. */
[hidden] { display: none !important; }

html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--dasar);
  color: var(--tinta);
  font-family: var(--huruf-badan);
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;
}

h1, h2 {
  font-family: var(--huruf-judul);
  font-weight: 600;
  letter-spacing: .01em;
  text-wrap: balance;
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--aksen);
  outline-offset: 2px;
}

main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* -------------------------------------------------------------------- kop */

.kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--pelat);
  border-bottom: 1px solid var(--garis);
  margin-bottom: 18px;
}

.merek { display: flex; flex-direction: column; }

.merek-nama {
  font-family: var(--huruf-judul);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.merek-sub {
  font-size: 12px;
  color: var(--tinta-lembut);
  letter-spacing: .02em;
}

.tema {
  font-family: var(--huruf-judul);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 14px;
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  cursor: pointer;
}

.tema:hover { border-color: var(--aksen); color: var(--aksen); }

.tema:active { box-shadow: var(--bayang-tekan); transform: translateY(1px); }

/* ------------------------------------------------------------------- pita */

.simulator {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pita {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 14px;
  background: var(--pelat);
  border: 1px solid var(--garis);
  border-left: 3px solid var(--aksen);
  border-radius: var(--sudut);
}

.pita.is-segera { border-left-color: var(--awas); background: var(--awas-lembut); }

/* Kabar keberhasilan. Bentuknya pita, warnanya aksen penuh supaya ia terbaca
   sebagai kabar baik dan bukan peringatan — dan supaya tidak tertukar dengan
   pita masa coba yang justru menghitung mundur. */
.kabar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--aksen);
  color: var(--aksen-teks);
  border-radius: var(--sudut);
}

.kabar-teks {
  font-family: var(--huruf-judul);
  font-size: 13px;
  letter-spacing: .04em;
}

.kabar .pita-tombol {
  color: var(--aksen-teks);
  border-color: var(--aksen-teks);
  background: transparent;
}

.kabar .pita-tombol:hover { color: var(--aksen-teks); border-color: var(--aksen-teks); opacity: .8; }

.pita-teks {
  font-family: var(--huruf-judul);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pita-tombol {
  font-family: var(--huruf-judul);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  cursor: pointer;
}

.pita-tombol:hover { border-color: var(--aksen); color: var(--aksen); }

.pita-tombol:active { box-shadow: var(--bayang-tekan); transform: translateY(1px); }

/* ---------------------------------------------------------------- gerbang */

.gerbang {
  background: var(--pelat);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  box-shadow: var(--bayang);
  padding: 18px;
}

.gerbang-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.gerbang-judul { font-size: clamp(20px, 2.4vw, 27px); letter-spacing: .02em; }

.gerbang-ringkas { margin: 0 0 16px; max-width: 68ch; color: var(--tinta-lembut); }

.harga {
  max-width: 420px;
  margin-bottom: 12px;
  background: var(--pelat-2);
  border: 1px solid var(--garis);
  border-left: 3px solid var(--aksen);
  border-radius: var(--sudut);
  padding: 14px;
}

.gerbang-siapa { margin: 0 0 14px; max-width: 68ch; color: var(--tinta-lembut); }

.harga-nama {
  font-family: var(--huruf-judul);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-lembut);
  margin: 0;
}

.harga-angka {
  font-family: var(--huruf-judul);
  font-size: 28px;
  letter-spacing: .02em;
  margin: 4px 0 0;
}

.harga-cara { margin: 0 0 10px; font-size: 13px; color: var(--tinta-lembut); }

.harga-isi { margin: 0; padding-left: 18px; font-size: 13px; }

.harga-isi li { margin-bottom: 3px; }

.gerbang-bayar { margin: 0 0 6px; max-width: 72ch; }

.gerbang-qris { margin: 0 0 12px; max-width: 360px; }

.gerbang-qris img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: #fff;   /* QRIS harus berlatar putih walau temanya gelap */
}

.gerbang-qris figcaption {
  margin-top: 6px;
  color: var(--tinta-lembut);
  font-size: 13px;
  line-height: 1.45;
}

.gerbang-kontak {
  display: inline-block;
  font-family: var(--huruf-judul);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 14px;
  margin-bottom: 14px;
  background: var(--aksen);
  color: var(--aksen-teks);
  border-radius: var(--sudut);
  text-decoration: none;
}

/* ------------------------------------------------------- bayar otomatis */

.bayar-otomatis {
  max-width: 360px;
  margin: 0 0 16px;
  padding: 14px;
  background: var(--pelat-2);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
}

.bayar-otomatis-teks { margin: 0 0 12px; font-size: 13px; color: var(--tinta-lembut); }

.bayar-otomatis-qr {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: #fff;   /* QRIS harus berlatar putih walau temanya gelap */
}

/* ------------------------------------------------------------ klaim bayar */

.klaim {
  max-width: 520px;
  margin: 0 0 16px;
  background: var(--pelat-2);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  padding: 10px 14px;
}

.klaim-judul {
  font-family: var(--huruf-judul);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
}

.klaim[open] .klaim-judul { margin-bottom: 10px; }

.klaim-ringkas { margin: 0 0 12px; font-size: 13px; color: var(--tinta-lembut); }

.klaim-form { display: grid; gap: 10px; }

.klaim-isian { display: flex; flex-direction: column; gap: 4px; }

.klaim-isian > span {
  font-family: var(--huruf-judul);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-lembut);
}

.klaim-isian em { font-style: normal; text-transform: none; letter-spacing: 0; }

.klaim-isian input {
  font: inherit;
  /* Di iOS, input yang hurufnya di bawah 16px membuat halaman ikut diperbesar
     saat disentuh — dan halaman ini dibuka dari HP. */
  font-size: 16px;
  padding: 9px 10px;
  background: var(--pelat);
  color: var(--tinta);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  /* Tanpa ini, input dalam grid melebar melewati kotaknya di layar sempit. */
  min-width: 0;
}

.klaim-form .tombol { justify-self: start; }

.klaim-catatan { margin: 10px 0 0; color: var(--tinta-lembut); }

.klaim-tunggu {
  margin-top: 12px;
  padding: 12px;
  background: var(--pelat);
  border: 1px solid var(--garis);
  border-left: 3px solid var(--aksen);
  border-radius: var(--sudut);
}

.klaim-tunggu-teks { margin: 0; font-size: 13px; color: var(--tinta-lembut); }

.klaim-nomor {
  font-family: var(--huruf-angka);
  font-size: 22px;
  letter-spacing: .18em;
  /* Nomor klaim disalin dengan mata dari layar HP ke buku catatan; membiarkannya
     patah di tengah membuat karakternya salah dibaca. */
  white-space: nowrap;
  overflow-x: auto;
  margin: 6px 0 12px;
}

/* Kode akses milik pembeli. Diberi bingkai aksen supaya terbaca sebagai milik
   sendiri, bukan sebagai tawaran — ia berdiri tepat di atas kartu harga, dan
   dua hal yang berlawanan arti tidak boleh tampak sama. */
.gerbang-milik {
  margin: 0 0 18px;
  padding: 14px 16px;
  max-width: 68ch;
  background: var(--pelat-2);
  border: 1px solid var(--garis);
  border-left: 3px solid var(--aksen);
  border-radius: var(--sudut);
}

.gerbang-milik-judul { margin: 0 0 8px; font-size: 15px; letter-spacing: .02em; }

.gerbang-milik-baris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}

/* Enam karakter, dibaca sekali lalu disalin tangan ke buku. Jarak hurufnya
   untuk itu — 0 dan O, 1 dan I dibedakan lebih mudah kalau tidak berdempetan.
   Melar (`flex` dengan min-width) supaya tidak pernah terpotong di 390px,
   pelajaran yang sama dengan kotak isian di bawahnya. */
.gerbang-milik-kode {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--huruf-angka);
  font-size: 24px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta);
  word-break: break-all;
}

.gerbang-milik-catatan { margin: 0; color: var(--tinta-lembut); }

.gerbang-kode { display: flex; flex-direction: column; gap: 6px; }

.gerbang-baris { display: flex; flex-wrap: wrap; gap: 8px; }

.gerbang-kode input {
  font-family: var(--huruf-angka);
  font-size: 17px;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* Diukur di produksi pada lebar 390px: `width: 11ch` yang lama ternyata cuma
     menyisakan 68px ruang teks, sebab box-sizing border-box membuat padding 24px
     dan garis 2px ikut dihitung ke dalamnya. Enam karakter berjarak .22em butuh
     73,45px — jadi kode yang diketik pun ikut terpotong, bukan cuma petunjuknya.
     Barisnya punya sisa ruang 128px yang menganggur, maka biarkan melar. */
  flex: 1 1 auto;
  width: auto;
  min-width: 12ch;
  max-width: 22ch;
  padding: 12px;
  background: var(--pelat-2);
  color: var(--tinta);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
}

/* Jarak huruf itu untuk kode yang DIBACA, bukan untuk teks petunjuknya. Petunjuk
   "6 karakter" ikut dikapitalkan jadi "6 KARAKTER"; berjarak ia 122,41px, tanpa
   jarak 85px — selisih itu yang menjaganya tetap utuh kalau HP memakai huruf
   cadangan yang lebih lebar daripada yang terukur di sini. */
.gerbang-kode input::placeholder { letter-spacing: normal; }

.gerbang-kode .tombol { flex: 0 0 auto; padding-left: 22px; padding-right: 22px; }

.gerbang-pesan { margin: 8px 0 0; min-height: 1.5em; font-size: 13px; color: var(--tinta-lembut); }

.gerbang-pesan.is-salah { color: var(--awas); }

.gerbang-catatan { margin: 14px 0 0; color: var(--tinta-lembut); }

.galat {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--awas);
  border-radius: var(--sudut);
  background: var(--awas-lembut);
  color: var(--awas);
  font-size: 13px;
}

/* --------------------------------------------------------------- pemilih */

.pemilih {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pilih {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 14px;
  background: var(--pelat);
  color: var(--tinta);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}

.pilih:hover { border-color: var(--aksen); }

.pilih:disabled { cursor: default; opacity: .6; }

.pilih:disabled:hover { border-color: var(--garis); }

.pilih.is-aktif {
  background: var(--aksen);
  border-color: var(--aksen);
  color: var(--aksen-teks);
}

.pilih-kode {
  font-family: var(--huruf-angka);
  font-size: 11px;
  opacity: .7;
}

.pilih-nama { font-family: var(--huruf-judul); letter-spacing: .02em; }

.lencana {
  font-family: var(--huruf-judul);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: .75;
}

/* ---------------------------------------------------------------- kepala */

.kepala h1 {
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: .02em;
}

.ringkas {
  margin: 6px 0 0;
  max-width: 68ch;
  color: var(--tinta-lembut);
}

.petunjuk-gulir {
  margin: 0;
  font-size: 12px;
  color: var(--tinta-lembut);
}

@media (min-width: 720px) { .petunjuk-gulir { display: none; } }

/* --------------------------------------------------------------- diagram */

.diagram-baris {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

/* Rangkaian Kendali dinaikkan ke ATAS Rangkaian Daya selagi panelnya menumpuk.
   Diukur di HP 390px sebelum diubah: Daya sendiri setinggi 872px — lebih tinggi
   daripada layarnya — sehingga Kendali baru mulai di 1981px, lebih dari dua
   layar ke bawah. Yang dipelajari orang di rangkaian bermotor ada di Kendali;
   Daya bisa dilihat sesudahnya.

   Dilakukan dengan `order`, jadi urutan DOM tetap Daya lalu Kendali. Itu
   disengaja: di layar lebar keduanya berdampingan, "di atas" tidak lagi punya
   arti, dan urutan baca yang diajarkan di kelas (daya dulu, baru kendali) tidak
   ikut dibalik. Urutan bacaan pembaca layar juga tetap urutan itu. */
.diagram-baris > .panel-kendali { order: -1; }

@media (min-width: 1080px) {
  .diagram-baris { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* Berdampingan: tidak ada yang "di atas", jadi urutannya dikembalikan. */
  .diagram-baris > .panel-kendali { order: 0; }

  /* Pintu panel melintang penuh: lampunya berderet mendatar, jadi ia butuh
     lebar, bukan tinggi — dan harus terbaca sekilas tanpa digulir. */
  .panel-penuh { grid-column: 1 / -1; }
}

.panel {
  background: var(--pelat);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  box-shadow: var(--bayang);
  overflow: hidden;
}

.panel-judul {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-lembut);
  padding: 9px 14px;
  border-bottom: 1px solid var(--garis);
  background: var(--pelat-2);
}

.panel-gulir { overflow-x: auto; padding: 10px; }

/* Tanda tangan rupa: pelat utama dibaut di dua sudut atasnya, seperti label
   sablon yang sungguh dikeling ke pintu panel. Sengaja dibatasi pada dua
   bingkai struktural (kop, gerbang bayar) — bukan tiap `.panel-judul` yang
   berulang puluhan kali per rangkaian, supaya tetap terasa sebagai
   perangkat keras dan bukan hiasan yang ramai. */
.kop, .gerbang { position: relative; }

.kop::before, .kop::after,
.gerbang::before, .gerbang::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--paku-terang), var(--paku-gelap) 75%);
  pointer-events: none;
}

.gerbang::before, .gerbang::after { top: 16px; margin-top: 0; }

.kop::before, .gerbang::before { left: 8px; }
.kop::after, .gerbang::after { right: 8px; }

.diagram {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
}

/* ---------------------------------------------------------------- konsol */

.konsol {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .konsol { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
}

.konsol-kotak {
  background: var(--pelat);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  padding: 14px;
  box-shadow: var(--bayang);
}

.konsol-judul {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-lembut);
  margin-bottom: 12px;
}

.kendali { display: flex; flex-direction: column; gap: 14px; }

.tombol-baris { display: flex; flex-wrap: wrap; gap: 8px; }

.tombol {
  flex: 1 1 96px;
  font-family: var(--huruf-judul);
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 14px 10px;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--pelat-2);
  color: var(--tinta);
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.tombol-start { border-color: #2f7d33; color: #2f7d33; }
.tombol-stop { border-color: var(--awas); color: var(--awas); }

.tombol.is-tekan {
  transform: translateY(1px);
  background: var(--aksen);
  border-color: var(--aksen);
  color: var(--aksen-teks);
}

.opsi { display: flex; flex-direction: column; gap: 10px; }

.sekunder {
  align-self: flex-start;
  font-family: var(--huruf-judul);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}

.sekunder:hover { border-color: var(--aksen); color: var(--aksen); }

.sekunder.is-aktif {
  background: var(--awas);
  border-color: var(--awas);
  color: var(--aksen-teks);
}

.geser { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }

.geser-nama {
  font-family: var(--huruf-judul);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-lembut);
}

.geser-nilai { font-family: var(--huruf-angka); font-size: 12px; font-variant-numeric: tabular-nums; }

.geser input[type="range"] { width: 100%; accent-color: var(--aksen); }

.sakelar { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

.sakelar input { accent-color: var(--awas); }

.sakelar.bahaya span { color: var(--awas); }

.laju { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.laju-pilih {
  font-family: var(--huruf-angka);
  font-size: 12px;
  padding: 5px 9px;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}

.laju-pilih.is-aktif { background: var(--aksen); border-color: var(--aksen); color: var(--aksen-teks); }

/* --------------------------------------------------------------- keadaan */

.tahap-baris { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }

.tahap-kini {
  font-family: var(--huruf-judul);
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  background: var(--aksen);
  color: var(--aksen-teks);
  border-radius: var(--sudut);
}

.tahap-kini.is-bahaya { background: var(--awas); }

.urutan { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.tahap {
  font-family: var(--huruf-judul);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-lembut);
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 2px;
}

.tahap + .tahap::before {
  content: "›";
  margin-right: 8px;
  margin-left: -4px;
  color: var(--garis);
}

.tahap.is-aktif { color: var(--tinta); border-color: var(--aksen); }

.narasi {
  margin: 0 0 14px;
  min-height: 4.6em;
  max-width: 72ch;
  border-left: 2px solid var(--aksen);
  padding-left: 12px;
}

/* Satu blok per motor. Dengan satu motor tidak ada bingkai apa pun — tampilannya
   harus sama persis seperti sebelum ada dukungan dua motor. Bingkai baru muncul
   begitu ada blok kedua, karena di situlah "meter ini milik motor yang mana"
   jadi pertanyaan. */
.motor-blok + .motor-blok {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--garis);
}

.motor-nama {
  font-family: var(--huruf-judul);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-lembut);
  margin: 0 0 8px;
}

.meter-baris { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.meter { display: grid; grid-template-columns: 84px minmax(0, 1fr) 76px; align-items: center; gap: 10px; }

.meter-nama {
  font-family: var(--huruf-judul);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-lembut);
}

.meter-jalur {
  display: block;
  height: 10px;
  background: var(--pelat-2);
  border: 1px solid var(--garis);
  border-radius: 2px;
  overflow: hidden;
}

.meter-isi {
  display: block;
  height: 100%;
  width: 0;
  background: var(--aksen);
  transition: width .08s linear;
}

.meter-isi.is-tinggi { background: var(--awas); }

.meter-isi-putar { background: var(--aksen-2); }

.meter-nilai {
  font-family: var(--huruf-angka);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fakta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 12px; }

.fakta div { display: flex; flex-direction: column; }

.fakta dt {
  font-family: var(--huruf-judul);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-lembut);
}

.fakta dd { margin: 0; font-family: var(--huruf-judul); font-size: 16px; letter-spacing: .03em; }

.piranti { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--garis);
  border-radius: 2px;
  font-size: 12px;
  color: var(--tinta-lembut);
}

.chip b { font-family: var(--huruf-angka); color: var(--tinta); }

.chip.is-aktif { border-color: var(--aksen); background: var(--aksen); color: var(--aksen-teks); }

.chip.is-aktif b { color: var(--aksen-teks); }

/* --------------------------------------------------------- legenda & batas */

.legenda, .batas {
  background: var(--pelat);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  padding: 14px;
}

.legenda-daftar {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 13px;
}

.legenda-daftar li { display: flex; align-items: center; gap: 8px; }

.legenda-daftar em { color: var(--tinta-lembut); font-style: normal; font-size: 12px; }

.contoh { display: inline-block; width: 26px; height: 4px; border-radius: 2px; }

.contoh-L1 { background: var(--fasa-L1); }
.contoh-L2 { background: var(--fasa-L2); }
.contoh-L3 { background: var(--fasa-L3); }
.contoh-N { background: var(--fasa-N); }
.contoh-mati { background: var(--kabel-mati); }
.contoh-titik { width: 9px; height: 9px; border-radius: 50%; background: var(--tinta); }

.legenda-catatan, .batas p { margin: 0 0 8px; max-width: 76ch; color: var(--tinta-lembut); }

.batas p:last-child { margin-bottom: 0; }

.kecil { font-size: 13px; }

/* Hak cipta didorong ke ujung kanan kalau muat, dan turun sendiri di layar
   sempit karena kakinya membungkus. */
.kaki-hak { margin-left: auto; }

.kaki {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 16px 20px;
  border-top: 1px solid var(--garis);
  background: var(--pelat);
  color: var(--tinta-lembut);
  font-size: 12px;
}

/* ------------------------------------------------------------------- SVG */

.rel { stroke: var(--kabel-mati); stroke-width: 3.4; fill: none; stroke-linecap: round; }

.kabel {
  stroke: var(--kabel-mati);
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kabel[data-fasa="L1"], .rel[data-fasa="L1"] { stroke: var(--fasa-L1); }
.kabel[data-fasa="L2"] { stroke: var(--fasa-L2); }
.kabel[data-fasa="L3"] { stroke: var(--fasa-L3); }
.kabel[data-fasa="N"], .rel[data-fasa="N"] { stroke: var(--fasa-N); }

/* Titik arus: dasharray 0.1 + linecap bulat menghasilkan bulatan, bukan garis
   putus. Jumlahnya (18,1) harus sama dengan PERIODE di schematic.js. */
.arus {
  fill: none;
  stroke: transparent;
  stroke-width: 5.4;
  stroke-linecap: round;
  stroke-dasharray: 0.1 18;
  pointer-events: none;
}

.arus.is-live[data-fasa="L1"] { stroke: var(--fasa-L1); }
.arus.is-live[data-fasa="L2"] { stroke: var(--fasa-L2); }
.arus.is-live[data-fasa="L3"] { stroke: var(--fasa-L3); }
.arus.is-live[data-fasa="N"] { stroke: var(--fasa-N); }

.sambung { fill: var(--tinta); }

.terminal-sumber[data-fasa="L1"] { fill: var(--fasa-L1); }
.terminal-sumber[data-fasa="L2"] { fill: var(--fasa-L2); }
.terminal-sumber[data-fasa="L3"] { fill: var(--fasa-L3); }

.sumber-teks {
  font-family: var(--huruf-judul);
  font-size: 13px;
  letter-spacing: .06em;
}

.sumber-teks[data-fasa="L1"] { fill: var(--fasa-L1); }
.sumber-teks[data-fasa="L2"] { fill: var(--fasa-L2); }
.sumber-teks[data-fasa="L3"] { fill: var(--fasa-L3); }

.rel-teks {
  font-family: var(--huruf-judul);
  font-size: 11px;
  letter-spacing: .08em;
  fill: var(--tinta-lembut);
}

.catatan { font-family: var(--huruf-badan); font-size: 11px; fill: var(--tinta-lembut); }

.sym-line, .sym-blade, .sym-winding {
  stroke: var(--tinta);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
}

.sym-blade { transition: none; }

.sym-dash { stroke-dasharray: 3 3; stroke-width: 1.6; }

.sym-cap { stroke-width: 3.4; }

.sym-cap-dot { fill: var(--tinta); }

.sym-nc-bar { stroke-width: 2.2; }

.sym-heater, .sym-box { fill: none; stroke: var(--tinta); stroke-width: 1.8; }

.sym-timed { fill: none; }

.sym-coil-box { fill: var(--pelat-2); stroke: var(--tinta); stroke-width: 2.2; }

.sym-coil.is-energized .sym-coil-box { fill: var(--aksen); stroke: var(--aksen); }

.sym-coil.is-timing .sym-coil-box { fill: var(--aksen-2); stroke: var(--aksen-2); }

.sym-coil-mark { fill: var(--tinta); opacity: .16; }

/* Lampu tanda.
   HIJAU = motor berputar, MERAH = motor berhenti. Sempat dipasang terbalik
   mengikuti bacaan tentang panel kapal, lalu dikoreksi dari lapangan.
   Lihat KONSEP.md bagian 6.
   Padam digambar sebagai kaca kosong, bukan warna redup — supaya bedanya
   terbaca di proyektor kelas yang kontrasnya jelek. */
/* Blok terminal. Sekrupnya digambar berisi warna pelat, bukan warna tinta:
   bulatan pejal sudah dipakai untuk titik sambung kabel, dan dua arti pada satu
   bentuk membuat gambar berbohong. */
.sym-blok-sekrup { fill: var(--pelat); stroke: var(--tinta); stroke-width: 1.8; }

.sym-blok-sisir { stroke-width: 2.6; }

.sym-lampu-kaca { fill: var(--pelat-2); stroke: var(--tinta); stroke-width: 2.2; }

.sym-lampu-silang { stroke-width: 1.6; opacity: .55; }

.sym-lampu.is-nyala .sym-lampu-kaca { stroke-width: 2.4; }

.sym-lampu.is-nyala .sym-lampu-silang { stroke: var(--pelat); opacity: .8; }

.sym-lampu[data-warna="merah"].is-nyala .sym-lampu-kaca { fill: #d5341f; stroke: #8c1f10; }
.sym-lampu[data-warna="hijau"].is-nyala .sym-lampu-kaca { fill: #1f8a4c; stroke: #115730; }
.sym-lampu[data-warna="kuning"].is-nyala .sym-lampu-kaca { fill: #e0a007; stroke: #8a6104; }
/* Putih menyala berlatar terang nyaris tak terbeda dari padam — sudah kena
   sekali. Jadi lampu putih tidak dibedakan lewat warna kacanya saja: kacanya
   dikuningkan sedikit DAN diberi cincin kilau di luar lingkarannya. */
.sym-lampu[data-warna="putih"].is-nyala .sym-lampu-kaca {
  fill: #fff3c4;
  stroke: #a8791a;
  filter: drop-shadow(0 0 5px rgba(224, 176, 40, .95));
}
.sym-lampu[data-warna="biru"].is-nyala .sym-lampu-kaca { fill: #2c5fa8; stroke: #1a3b69; }

/* Lampu putih menyala berlatar terang nyaris tak terlihat bedanya, jadi
   silangnya dibalik jadi gelap lagi supaya tetap terbaca sebagai "menyala". */
.sym-lampu[data-warna="putih"].is-nyala .sym-lampu-silang { stroke: var(--tinta); opacity: .5; }

.sym-label {
  font-family: var(--huruf-judul);
  font-size: 13px;
  letter-spacing: .04em;
  fill: var(--tinta);
}

.sym-label-lg { font-size: 15px; }

.sym-term {
  font-family: var(--huruf-angka);
  font-size: 9.5px;
  fill: var(--tinta-lembut);
}

.sym-motor-body { fill: var(--pelat-2); stroke: var(--tinta); stroke-width: 2.2; }

.sym-rotor-ring { fill: none; stroke: var(--garis); stroke-width: 1.8; }

.sym-rotor-line { stroke: var(--tinta-lembut); stroke-width: 2.2; stroke-linecap: round; }

.sym-actuator.is-pressed .sym-line, .sym-actuator.is-pressed .sym-cap { stroke: var(--aksen); }

.percik { opacity: 0; pointer-events: none; }

.percik.is-on { opacity: 1; animation: percik .16s steps(2, end) infinite; }

.percik-inti { fill: var(--awas); }

.percik-sinar { stroke: var(--awas); stroke-width: 2.6; stroke-linecap: round; }

@keyframes percik {
  from { opacity: 1; }
  to { opacity: .35; }
}

/* Gerak dikurangi: titik arus berhenti bergerak tapi tetap terlihat, dan
   simulasinya tetap berjalan penuh. */
@media (prefers-reduced-motion: reduce) {
  .meter-isi { transition: none; }
  .percik.is-on { animation: none; }
}

/* ------------------------------------------------------------------ mode */

.mode {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

@media (min-width: 720px) {
  /* Sebanyak modenya, bukan angka tetap. Dulu `repeat(3, 1fr)`, dan begitu
     Cari Kesalahan dicabut dari menu kolom ketiganya tinggal menganga kosong
     di sebelah Rakit — cacat yang lolos seluruh asersi dan cuma kelihatan dari
     tangkapan layar. `minmax(0, …)` supaya nama mode yang panjang tidak
     memaksa kolomnya melebar melewati wadahnya. */
  .mode { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}

.mode-pilih {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  text-align: left;
  background: var(--pelat);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  /* Sedikit cembung saat lepas — seperti sakelar rocker yang belum ditekan. */
  box-shadow: inset 0 1px 0 var(--paku-terang), inset 0 -1px 0 var(--paku-gelap);
  color: var(--tinta);
  cursor: pointer;
  font: inherit;
}

.mode-pilih:hover { border-color: var(--aksen); }

.mode-pilih:disabled { cursor: default; opacity: .6; }

.mode-pilih:disabled:hover { border-color: var(--garis); }

.mode-pilih.is-aktif {
  border-color: var(--aksen);
  /* Terbalik dari keadaan lepas: sekarang cekung, seperti sakelar tertekan. */
  box-shadow: inset 3px 0 0 var(--aksen), var(--bayang-tekan);
}

.mode-nama {
  font-family: var(--huruf-judul);
  font-size: 16px;
  letter-spacing: .04em;
}

.mode-sub { font-size: 12px; color: var(--tinta-lembut); }

/* ------------------------------------------------------------- mode rakit */

.rakit-rak {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

@media (min-width: 900px) { .rakit-rak { grid-template-columns: 1fr 1fr; } }

.rakit-rak-grup {
  background: var(--pelat);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  padding: 10px 12px;
}

.rakit-rak-judul {
  font-family: var(--huruf-judul);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-lembut);
  margin: 0 0 8px;
}

.rakit-rak-baris { display: flex; flex-wrap: wrap; gap: 6px; }

.rakit-ambil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  /* Sasaran sentuh 44 px, janji yang sama dengan terminal di papan (16.4). */
  min-height: 44px;
  padding: 7px 10px;
  background: var(--pelat-2);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  color: var(--tinta);
  font: inherit;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
}

/* Lambang di tombol rak: bentuk yang persis sama dengan yang nanti muncul di
   papan, digambar buildSymbol() yang sama. Nomor terminal disembunyikan —
   pada ikon sebesar ini angkanya cuma jadi bintik. */
.rakit-ambil-lambang {
  display: block;
  height: 38px;
  width: auto;
  max-width: 100%;
  overflow: visible;
}

.rakit-ambil-lambang .sym-term,
.rakit-ambil-lambang .sym-label { display: none; }

/* Tiga lampu tanda cuma berbeda pada warna kacanya. Di papan bedanya baru
   terlihat saat menyala, dan itu benar — tapi di rak orang sedang MEMILIH
   lampu mana yang diambil, jadi kacanya diberi warnanya di sini. Angkanya
   sama persis dengan keadaan menyala di atas, supaya yang dipilih di rak dan
   yang menyala di papan adalah warna yang sama. */
.rakit-ambil-lambang .sym-lampu[data-warna="merah"] .sym-lampu-kaca { fill: #d5341f; stroke: #8c1f10; }
.rakit-ambil-lambang .sym-lampu[data-warna="hijau"] .sym-lampu-kaca { fill: #1f8a4c; stroke: #115730; }
.rakit-ambil-lambang .sym-lampu[data-warna="putih"] .sym-lampu-kaca { fill: #fff3c4; stroke: #a8791a; }

/* "Cukup segini" bukan komponen — ia jalan keluar dari baki bagian. */
.rakit-cukup { align-self: center; font-size: 12px; }

.rakit-ambil:hover { border-color: var(--aksen); color: var(--aksen); }

.rakit-ambil:active { box-shadow: var(--bayang-tekan); transform: translateY(1px); }

.rakit-alat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }

.rakit-isian { display: flex; align-items: center; gap: 8px; font-size: 13px; }

.rakit-isian > span {
  font-family: var(--huruf-judul);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-lembut);
}

.rakit-isian input, .rakit-pilihan, .rakit-tautan-teks {
  padding: 7px 9px;
  background: var(--pelat-2);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  color: var(--tinta);
  font: inherit;
  font-size: 13px;
}

.rakit-tautan-teks { width: 100%; margin-bottom: 8px; font-family: var(--huruf-angka); font-size: 12px; }

.rakit-berkas-label { display: inline-flex; align-items: center; cursor: pointer; }

.rakit-petunjuk {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--aksen);
  background: var(--pelat);
  font-size: 13px;
  /* Ruang dua baris disediakan di muka: pesan yang panjangnya berubah-ubah
     membuat papan di bawahnya melompat naik-turun tiap sentuhan. */
  min-height: 2.6em;
}

.rakit-kotak { margin-top: 16px; }

/* Bagian yang dilipat memakai <details> bawaan peramban, pola yang sama dengan
   kotak klaim pembayaran: tidak ada JS, tidak ada keadaan yang perlu diingat,
   dan pembaca layar mendapat tombol yang benar tanpa dibuatkan. */
.rakit-lipat { margin-bottom: 12px; }

.rakit-lipat-judul { cursor: pointer; padding: 4px 0; }

.rakit-lipat > .rakit-lipat-judul + * { margin-top: 10px; }

.rakit-lipat[open] > .rakit-lipat-judul { margin-bottom: 10px; }

.rakit-daftar { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }

.rakit-simpanan { display: flex; align-items: stretch; }

.rakit-simpanan .sekunder { border-radius: var(--sudut) 0 0 var(--sudut); }

.rakit-buang {
  padding: 0 9px;
  background: var(--pelat-2);
  border: 1px solid var(--garis);
  border-left: 0;
  border-radius: 0 var(--sudut) var(--sudut) 0;
  color: var(--tinta-lembut);
  font: inherit;
  cursor: pointer;
}

.rakit-buang:hover { border-color: var(--awas); color: var(--awas); }

.rakit-hasil { margin-top: 10px; }

.rakit-vonis {
  margin: 0 0 6px;
  font-family: var(--huruf-judul);
  font-size: 17px;
  letter-spacing: .03em;
}

/* Tiga vonis, dan yang tengah sengaja TIDAK merah: beda dari acuan tapi bekerja
   tetap benar. Menandainya merah berarti mengajarkan yang keliru. */
.rakit-vonis[data-vonis="sama"] { color: #2f7d33; }
.rakit-vonis[data-vonis="beda"] { color: var(--aksen); }
.rakit-vonis[data-vonis="belum"] { color: var(--tinta); }

.rakit-petunjuk-daftar { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }

.rakit-petunjuk-daftar li { margin-bottom: 4px; }

/* --------------------------------------------------------- papan rakit (SVG) */

.rakit-rel { fill: var(--pelat-2); stroke: var(--garis); stroke-width: 1.4; }

.rakit-batas { stroke: var(--garis); stroke-width: 1.4; stroke-dasharray: 6 5; }

.rakit-badan { fill: var(--pelat); stroke: var(--tinta); stroke-width: 1.8; }

.rakit-badan-tetap { fill: var(--pelat-2); stroke: var(--tinta-lembut); }

.rakit-modul.is-pilih .rakit-badan { stroke: var(--aksen); stroke-width: 3; }

.rakit-pelat { fill: var(--pelat); stroke: none; pointer-events: none; }

.rakit-pelat-tetap { fill: var(--pelat-2); }

.rakit-nama {
  font-family: var(--huruf-judul);
  font-size: 15px;
  letter-spacing: .06em;
  fill: var(--tinta);
  pointer-events: none;
}

.rakit-term {
  font-family: var(--huruf-angka);
  font-size: 10px;
  fill: var(--tinta-lembut);
  pointer-events: none;
}

.rakit-pad { fill: var(--pelat-2); stroke: var(--tinta-lembut); stroke-width: 1.4; }

.rakit-pad.is-terpakai { fill: var(--tinta-lembut); }

.rakit-pad.is-pilih { fill: var(--aksen); stroke: var(--aksen); }

/* Sisi di dalam badan komponen. Kontak yang membuka digambar samar dan
   putus-putus; yang menutup tegas — itulah satu-satunya cara melihat kontaktor
   menarik pada papan yang tidak memakai lambang skema. */
.rakit-dalam { fill: none; stroke: var(--tinta-lembut); stroke-width: 1.8; stroke-linejoin: round; }

.rakit-dalam-switch { stroke-dasharray: 4 5; opacity: .5; }

.rakit-dalam-switch.is-tutup { stroke-dasharray: none; opacity: 1; stroke: var(--tinta); }

.rakit-dalam-load { stroke-width: 3.4; stroke: var(--tinta); }

.rakit-kabel { stroke-width: 2.6; }

.rakit-kabel.is-pilih { stroke: var(--aksen); stroke-width: 4.5; }

.rakit-tuju { fill: none; stroke: var(--aksen); stroke-width: 1.6; opacity: .55; pointer-events: none; }

/* Petak tujuan pemindahan. Bergaris putus supaya terbaca sebagai "tempat yang
   bisa ditempati", bukan sebagai komponen yang sudah ada di situ. Isinya tetap
   diberi warna tipis: garis saja terlalu mudah luput di layar HP yang kecil. */
.rakit-petak {
  fill: var(--aksen); fill-opacity: .10;
  stroke: var(--aksen); stroke-width: 1.6; stroke-dasharray: 5 4;
  cursor: pointer;
}

.rakit-petak:hover { fill-opacity: .22; }

/* Bingkai panel di papan rakit. Sengaja tipis dan tanpa isian: yang harus
   menonjol adalah lambang dan kabelnya, bukan kotak yang menampungnya. */
.rakit-bingkai {
  fill: none;
  stroke: var(--garis);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
}

.rakit-judul-panel {
  font-family: var(--huruf-judul);
  font-size: 13px;
  letter-spacing: .14em;
  fill: var(--tinta-lembut);
}

/* Bagian yang sedang dipilih. Menebalkan lambangnya sendiri, bukan menggambar
   kotak di sekelilingnya — kotak tambahan di diagram terbaca sebagai komponen. */
.rakit-lambang { cursor: pointer; }

.rakit-lambang.is-pilih .sym-line,
.rakit-lambang.is-pilih .sym-blade,
.rakit-lambang.is-pilih .sym-winding {
  stroke: var(--aksen);
  stroke-width: 3;
}

.rakit-lambang.is-pilih text { fill: var(--aksen); }

/* Daftar bagian yang belum ditaruh. */
.rakit-bagian {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
}

.rakit-bagian-judul {
  font-family: var(--huruf-judul);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-lembut);
}

.rakit-sasar { fill: transparent; cursor: pointer; }

.rakit-sasar-kabel { fill: none; stroke: transparent; stroke-width: 16; cursor: pointer; }

.rakit-lensa { fill: var(--pelat-2); stroke: var(--tinta); stroke-width: 1.6; pointer-events: none; }

.rakit-lensa.is-nyala { stroke-width: 2.2; }

/* Nilainya sama persis dengan lambang lampu di mode Pelajari. Dua mode yang
   menggambarkan benda yang sama tidak boleh punya dua bahasa warna. */
.rakit-lensa[data-warna="hijau"].is-nyala { fill: #1f8a4c; stroke: #115730; }
.rakit-lensa[data-warna="merah"].is-nyala { fill: #d5341f; stroke: #8c1f10; }

/* Putih menyala berlatar terang nyaris tak terbeda dari padam — pelajaran yang
   sudah dibayar sekali di lambang lampu, lalu terulang di papan rakit. Jadi
   lampu putih tidak dibedakan lewat warna kacanya saja: kacanya dikuningkan
   sedikit DAN diberi cincin kilau di luar lingkarannya. Jarak kanal warnanya
   naik dari 28 ke 60; ada asersinya di uji/rakit.mjs. */
.rakit-lensa[data-warna="putih"].is-nyala {
  fill: #fff3c4;
  stroke: #a8791a;
  filter: drop-shadow(0 0 5px rgba(224, 176, 40, .95));
}

/* Di layar sempit papan digambar seukuran aslinya lalu digeser ke samping di
   dalam .panel-gulir. Diperkecil sampai muat membuat sasaran sentuh terminal
   jadi ±11 px di 360 px, dan KONSEP 16.4 menjanjikan ≥44 px — jadi ini bukan
   selera tata letak. Lebar alaminya dikirim papan.js lewat --papan-lebar. */
.papan { min-width: var(--papan-lebar, 0); }

@media (min-width: 720px) { .papan { min-width: 0; } }

/* ------------------------------------------------------------- alat ukur */

/* Titik ukur hanya muncul setelah multimeternya diambil. Diagram yang bertabur
   bulatan sepanjang waktu menambah satu lapisan yang harus diabaikan mata bagi
   orang yang cuma mau menonton arusnya. */
.lapis-ukur { display: none; }
.diagram.is-ukur .lapis-ukur { display: block; }

.ukur-titik {
  fill: var(--pelat);
  stroke: var(--aksen);
  stroke-width: 1.6;
  pointer-events: none;
}

/* Jari-jarinya diubah lewat atribut, bukan lewat CSS: `r` sebagai properti CSS
   itu SVG2 dan belum ada di semua peramban yang masih dipakai orang. */
.ukur-titik.is-pilih {
  fill: var(--awas);
  stroke: var(--awas);
}

/* Sasaran sentuh jauh lebih besar daripada titik yang tergambar: halaman ini
   dibuka dari HP, dan jari bukan penunjuk tetikus. */
.ukur-sasar { fill: transparent; cursor: crosshair; }

/* Kotak alat ukur melintang penuh: catatan pengukuran perlu lebar untuk bisa
   dibaca mundur, dan di kolom setengah ia berdiri sendirian dengan setengah
   baris kosong di sebelahnya. */
.konsol-alat { grid-column: 1 / -1; }

.alat { display: flex; flex-direction: column; gap: 12px; }
/* Lebarnya dibatasi walau kotaknya melintang penuh: hasil pengukuran rata
   kanan, dan di baris selebar layar mata harus menyeberangi ruang kosong dari
   nama titik ke angkanya. */
.alat-kiri, .alat-kanan { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.alat-kanan { max-width: 620px; }

@media (min-width: 900px) {
  .alat {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
}

.alat-saklar { display: flex; gap: 8px; }

.alat-layar {
  background: var(--pelat-2);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  padding: 12px;
}

.alat-bacaan {
  font-family: var(--huruf-angka);
  font-size: 30px;
  line-height: 1.1;
  color: var(--tinta);
}

.alat-titik {
  font-size: 13px;
  color: var(--tinta-lembut);
  margin-top: 4px;
}

.alat-pesan {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--garis);
  color: var(--tinta-lembut);
}

/* Penolakan mengukur Ohm di panel hidup harus terbaca sebagai peringatan kerja,
   bukan sebagai galat aplikasi — ia menyebut sebab DAN jalan keluarnya. */
.alat-pesan.is-tolak {
  border-left-color: var(--awas);
  background: var(--awas-lembut);
  color: var(--tinta);
}

.alat-catatan {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
}

.alat-catatan li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--garis);
  font-size: 13px;
}

.alat-catatan-titik { min-width: 0; overflow-wrap: anywhere; }
.alat-catatan-mode { font-family: var(--huruf-angka); color: var(--tinta-lembut); }
.alat-catatan-hasil { font-family: var(--huruf-angka); }
.alat-catatan li.is-tolak .alat-catatan-hasil { color: var(--awas); }

.alat-kaki { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.alat-jumlah {
  font-family: var(--huruf-angka);
  font-size: 12px;
  color: var(--tinta-lembut);
}

/* -------------------------------------------------------- cari kesalahan */

.konsol-cari { grid-column: 1 / -1; }

.cari { display: flex; flex-direction: column; gap: 10px; }

.cari-tombol { display: flex; flex-wrap: wrap; gap: 8px; }

.cari-status { font-size: 13px; line-height: 1.55; color: var(--tinta-lembut); }

.cari-vonis {
  font-size: 14px;
  line-height: 1.55;
  padding: 9px 11px;
  border-left: 3px solid var(--aksen);
  background: var(--pelat-2);
}

/* "Sisi itu sehat" bukan kesalahan yang harus dihukum warnanya — ia satu
   pengukuran yang menyingkirkan satu kemungkinan, dan itu justru pekerjaannya. */
.cari-vonis.is-sehat { border-left-color: var(--garis); color: var(--tinta-lembut); }

.cari-sehat { font-family: var(--huruf-angka); font-size: 12px; color: var(--tinta-lembut); }

/* Sasaran menunjuk: jalur tebal tak terlihat di atas kabelnya sendiri.
   Lapisannya SELALU tergambar — yang dimatikan cuma kemampuannya dikenai
   sentuhan. Dulu lapisan ini disembunyikan di luar mode menunjuk, dan
   akibatnya tanda kerusakan yang sudah ketemu tidak pernah terlihat sama
   sekali: kelasnya menempel, pikselnya tidak ada. Asersinya pun ikut hijau,
   sebab yang dihitungnya kelas. */
.tunjuk-sasar {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  stroke-linecap: round;
  pointer-events: none;
}

.diagram.is-tunjuk .tunjuk-sasar { pointer-events: stroke; cursor: crosshair; }
.diagram.is-tunjuk .sym { cursor: crosshair; }
.diagram.is-tunjuk .tunjuk-sasar:hover { stroke: rgba(178, 58, 16, .22); }
.diagram.is-tunjuk .sym[data-tunjuk]:hover { opacity: .65; }

/* Sisi yang sudah ditunjuk dan ternyata sehat: dicoret tipis supaya tidak
   ditunjuk dua kali. Catatan kerja, bukan nilai. */
.tunjuk-sasar.is-sehat {
  stroke: var(--kabel-mati);
  stroke-width: 2;
  stroke-dasharray: 3 6;
}

.sym.is-sehat { opacity: .45; }

/* Sisi yang rusak, sesudah ketemu atau sesudah diserahkan. */
.tunjuk-sasar.is-rusak {
  stroke: var(--awas);
  stroke-width: 4;
  stroke-dasharray: 7 5;
}

.sym.is-rusak { outline: 2px dashed var(--awas); outline-offset: 3px; }

.cari-tautan-teks {
  width: 100%;
  margin-top: 10px;
  padding: 7px 9px;
  font-family: var(--huruf-angka);
  font-size: 12px;
  background: var(--pelat-2);
  color: var(--tinta);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
}

/* ------------------------------------------------- tandon dan relai level */

.sym-tandon-dinding { fill: none; stroke: var(--tinta); stroke-width: 2.4; }

/* Air digambar sebagai bidang penuh, bukan garis permukaan: yang harus
   terbaca sekilas "seberapa penuh", bukan "di mana permukaannya". */
.sym-air { fill: var(--fasa-N); opacity: .30; }

.sym-batas { stroke: var(--tinta-lembut); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .7; }

.sym-elektroda { stroke: var(--tinta-lembut); stroke-width: 2.2; stroke-linecap: round; }

/* Elektroda yang tercelup jadi tegas — inilah yang menerangkan kenapa relainya
   berpindah, dan kenapa kabel elektroda yang putus berakibat fatal. */
.sym-elektroda.is-terendam { stroke: var(--aksen); stroke-width: 3; }

.sym-pilih-poros { fill: var(--tinta); }

/* Belitan Dahlander: kotak IEC yang diputar mengikuti arah sisinya. Diberi isi
   supaya garis segitiganya tidak menembusnya. */
.sym-belitan { fill: var(--pelat); stroke: var(--tinta); stroke-width: 2; }

/* ------------------------------------------------------------ mode ebook */

.ebook-tata {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .ebook-tata { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
}

.ebook-daftar { display: flex; flex-direction: column; gap: 6px; }

.ebook-tingkat-judul {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-lembut);
  margin: 14px 0 4px;
}

/* Hanya di tata letak DUA LAJUR. Di layar sempit daftarnya menumpuk tepat di
   bawah paragraf pembuka, dan `margin-top: 0` membuat label pertamanya menempel
   — diukur 0px, sementara label kedua dapat 20px. Di >=900px daftarnya jadi
   lajur samping yang mulai dari puncak kolomnya sendiri, dan di situ 0 memang
   yang benar. */
@media (min-width: 900px) {
  .ebook-tingkat-judul:first-child { margin-top: 0; }
}

/* Daftar ini MENU, dan dulu ia tidak terbaca begitu di HP. Diukur di 390px:
   butir yang tidak aktif berbeda dari paragraf di sekitarnya hanya pada SATU
   sifat — warna tintanya. Latar sama-sama transparan, garis sama-sama tidak
   ada, ukuran huruf sama-sama 15px. Satu-satunya penandanya `:hover`, dan di
   layar sentuh `:hover` tidak pernah terjadi.

   Tingginya juga 35,3px — 7 dari 8 butir di bawah anjuran sasaran sentuh 44px.

   Jadi yang ditambahkan di sini BUKAN warna (warna sudah dipakai untuk
   membedakan aktif dari tidak aktif, dan menumpuk arti di satu sifat itu yang
   membuatnya gagal sejak awal), melainkan tiga sifat lain: permukaan, garis
   tepi, dan tinggi. Lihat KONSEP.md 31. */
.ebook-bab-tautan {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--sudut);
  color: var(--tinta);
  text-align: left;
  background: var(--pelat-2);
  border: 1px solid var(--garis);
  font: inherit;
  cursor: pointer;
}

/* Tanda "ini membuka sesuatu", di ujung kanan. Lewat ::after supaya tidak ada
   simpul baru yang harus diurus JS — dan supaya lencana "terkunci" yang memang
   simpul sungguhan tetap duduk di sebelah tulisannya, bukan di ujung. */
.ebook-bab-tautan::after {
  content: '\203A';
  margin-left: auto;
  padding-left: 4px;
  font-size: 19px;
  line-height: 1;
  color: var(--tinta-samar);
}

.ebook-bab-tautan:hover { border-color: var(--aksen); }

.ebook-bab-tautan:focus-visible {
  outline: 2px solid var(--aksen);
  outline-offset: 1px;
}

.ebook-bab-tautan.is-aktif {
  background: var(--aksen);
  color: var(--aksen-teks);
  border-color: var(--aksen);
}

.ebook-bab-tautan.is-aktif::after { color: var(--aksen-teks); }

.ebook-bab { padding: 16px 18px; }

.ebook-bab h2 { font-size: 20px; margin: 0 0 10px; }

.ebook-bab p { max-width: 68ch; margin: 0 0 12px; }

.ebook-bab p:last-child { margin-bottom: 0; }

.ebook-diagram { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }

/* Ebook — ilustrasi konsep (bab tanpa rangkaian nyata) */
.ilus-garis { fill: none; stroke: var(--tinta); stroke-width: 1.8; }
.ilus-garis-putus { stroke-dasharray: 5 4; }
.ilus-sumbu { stroke: var(--garis); stroke-width: 1.4; }
.ilus-label { font-family: var(--huruf-judul); font-size: 13px; letter-spacing: .04em; fill: var(--tinta); }
.ilus-term { font-family: var(--huruf-angka); font-size: 9.5px; fill: var(--tinta-lembut); }
.ilus-kurva { fill: none; stroke: var(--aksen); stroke-width: 2.4; }
.ilus-area { fill: var(--pelat-2); opacity: .5; }
.ilus-batang { fill: var(--aksen); }
.ilus-batang-alt { fill: var(--aksen-2); }
.ilus-langkah { fill: none; stroke: var(--tinta); stroke-width: 2; }
.ilus-tunda { fill: var(--aksen); opacity: .18; }
.ilus-jangkar { fill: none; stroke: var(--tinta-lembut); stroke-width: 1.6; stroke-dasharray: 4 3; }
.ilus-vektor { fill: none; stroke-width: 2.6; }
.ilus-vektor[data-fasa="L1"] { stroke: var(--fasa-L1); }
.ilus-vektor[data-fasa="L2"] { stroke: var(--fasa-L2); }
.ilus-vektor[data-fasa="L3"] { stroke: var(--fasa-L3); }
.ilus-plat { fill: var(--pelat-2); stroke: var(--tinta); stroke-width: 1.8; }
.ilus-ok { fill: #1f8a4c; }
.ilus-buruk { fill: var(--awas); }
.ilus-cek { fill: none; stroke: #1f8a4c; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ilus-silang { stroke: var(--awas); stroke-width: 3; stroke-linecap: round; }

/* ------------------------------------------------------------- kalkulator */
/*
   Mode Kalkulator memakai ulang tata letak dua lajur milik Ebook
   (.ebook-tata / .ebook-daftar / .ebook-bab) — bukan salinannya, tapi kelas
   yang sama persis. Yang ditambahkan di sini cuma isi kartunya: formulir,
   baris hasil, dan kartu terkunci.
*/

.kalk-ringkas {
  color: var(--tinta-lembut);
  max-width: 68ch;
  margin: 0 0 16px;
}

.kalk-form {
  display: grid;
  gap: 10px;
  /* Satu lajur di HP. Di layar lebar kolomnya berdampingan, tapi tetap
     minmax(0, …) supaya isian panjang tidak memaksa halaman menggulir
     mendatar — lajur `1fr` polos punya lebar minimum sebesar isinya. */
  grid-template-columns: 1fr;
  margin-bottom: 14px;
}

@media (min-width: 620px) {
  .kalk-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kalk-medan {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.kalk-label {
  font-size: 13px;
  color: var(--tinta-lembut);
}

.kalk-isian {
  width: 100%;
  padding: 8px 10px;
  background: var(--pelat-2);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  color: var(--tinta);
  font: inherit;
  font-family: var(--huruf-angka);
  /* 16 px: di bawah itu Safari iOS memperbesar halaman sendiri begitu isian
     disentuh, dan tata letaknya melompat di tengah pengisian. */
  font-size: 16px;
}

.kalk-isian:focus-visible { outline: 2px solid var(--aksen); outline-offset: 1px; }

/* Angka CONTOH di dalam isian yang masih kosong.
   Diukur 31 Agustus 2026 sesudah dilaporkan membingungkan: tanpa aturan ini
   peramban memberi rgb(117,117,117) dengan huruf, berat, dan ukuran yang SAMA
   PERSIS dengan nilai sungguhan — pada isian bertuliskan angka mono, "30" yang
   cuma contoh terbaca sebagai angka yang sudah diisi. Dua pembeda dipasang
   sekaligus, sebab warna saja sudah terbukti tidak cukup: lebih pucat DAN
   miring. Miring yang paling menolong di sini — huruf isian ini mono, dan mono
   miring langsung terbaca sebagai "bukan ketikan saya". */
.kalk-isian::placeholder {
  color: var(--tinta-samar);
  font-style: italic;
  opacity: 1;   /* Firefox menurunkan opasitas placeholder dari sananya */
}

/* Tombol Hitung. Perhitungan TIDAK lagi berjalan sendiri tiap ketikan
   (KONSEP.md 27.5), jadi tombol ini satu-satunya jalan melihat hasilnya —
   ia harus terlihat dan cukup besar untuk jempol. */
.kalk-hitung {
  /* Tombolnya anak grid .kalk-form, jadi tanpa ini ia menempati satu sel dan
     berdiri sejajar dengan sebuah kolom isian — seolah bagian dari kolom itu.
     Ia melintasi seluruh lajur, lalu ditarik ke kiri. */
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 44px;
  padding: 11px 22px;
  margin-bottom: 14px;
  font-family: var(--huruf-judul);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--aksen);
  color: var(--aksen-teks);
  border: 1px solid var(--aksen);
  border-radius: var(--sudut);
  cursor: pointer;
}

.kalk-hitung:hover { opacity: .9; }
.kalk-hitung:active { box-shadow: var(--bayang-tekan); transform: translateY(1px); }
.kalk-hitung:focus-visible { outline: 2px solid var(--aksen-2); outline-offset: 2px; }

.kalk-hasil {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 14px;
}

.kalk-baris {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 7px 10px;
  background: var(--pelat-2);
  border-left: 3px solid transparent;
}

.kalk-baris-label { color: var(--tinta-lembut); font-size: 14px; }

.kalk-baris-nilai {
  font-family: var(--huruf-angka);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Yang dicari orang, bukan yang ia ketikkan sendiri. */
.kalk-baris.is-utama {
  border-left-color: var(--aksen);
  background: var(--pelat);
}

.kalk-baris.is-utama .kalk-baris-nilai { font-size: 18px; }

.kalk-baris.is-buruk { border-left-color: var(--awas); }
.kalk-baris.is-buruk .kalk-baris-nilai { color: var(--awas); }

.kalk-galat {
  color: var(--awas);
  margin: 0 0 12px;
  font-size: 14px;
}

.kalk-catatan { display: flex; flex-direction: column; gap: 8px; }

.kalk-nota {
  margin: 0;
  max-width: 68ch;
  font-size: 14px;
  color: var(--tinta-lembut);
}

.kalk-rujukan {
  margin: 16px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--garis);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-lembut);
}

.kalk-terkunci { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.kalk-terkunci h2 { margin: 0; font-size: 20px; }

.kalk-terkunci .kalk-ringkas { margin: 0; }

/* Daftar isi: hitungan berbayar yang belum terbuka. Tetap bisa diklik —
   kartunya yang menerangkan dan mengantar ke harga, bukan tombol mati. */
.ebook-bab-tautan.is-terkunci { color: var(--tinta-lembut); }

.ebook-bab-tautan.is-terkunci .lencana { margin-left: 6px; font-size: 9px; }

.ebook-bab-tautan.is-terkunci.is-aktif { color: var(--aksen-teks); }

/* Tombol mode berbayar yang sedang terkunci. Sengaja BUKAN :disabled — klik
   itulah satu-satunya jalan menuju halaman harga dari sini (lihat pasangMode()
   di app.js), jadi ia harus tetap terlihat bisa ditekan. */
.mode-pilih.is-terkunci { opacity: .72; }

.mode-pilih.is-terkunci .mode-sub::after {
  content: ' • perlu kode akses';
  color: var(--aksen);
}

.mode-pilih.is-terkunci:hover { opacity: 1; border-color: var(--aksen); }

/* Apa yang tetap gratis, di bawah daftar isi paket berbayar. */
.harga-gratis {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--garis);
  font-size: 14px;
  color: var(--tinta-lembut);
}

/* Ajakan membeli di kartu hitungan terkunci. Bentuknya sama dengan tombol
   "Lihat harga" di pita — tindakannya memang sama — tapi di sini ia terisi
   penuh: pita cuma pemberitahuan, kartu ini titik keputusannya. */
.kalk-terkunci .pita-tombol {
  padding: 9px 18px;
  font-size: 12px;
  background: var(--aksen);
  border-color: var(--aksen);
  color: var(--aksen-teks);
}

.kalk-terkunci .pita-tombol:hover { opacity: .9; color: var(--aksen-teks); }

/* ------------------------------------------- tombol yang ditekan di gambar */

/* Lapisan tombol duduk di atas segalanya, tapi HANYA sasarannya yang menangkap
   sentuhan — kalau seluruh lapisan menangkap, ia menutupi titik ukur dan
   sasaran menunjuk kerusakan yang ada di bawahnya. */
.lapis-tombol { pointer-events: none; }

.tombol-papan { pointer-events: auto; cursor: pointer; }

/* Sasaran sentuh: tak terlihat, dan jauh lebih besar daripada kenopnya. Diuji
   di uji/ukur-tombol.mjs supaya tidak pernah bertindihan dengan tetangganya. */
.tombol-sasar { fill: transparent; }

/* Cincin, bukan tutup: lambang kenop di bawahnya harus tetap terbaca utuh,
   termasuk titik pembeda tombol NC. */
.tombol-cincin {
  fill: none;
  stroke: var(--tinta-samar);
  stroke-width: 1.5;
  stroke-dasharray: 3 2.5;
  transition: stroke .12s, fill .12s, stroke-width .12s;
}

.tombol-papan-start .tombol-cincin { stroke: var(--tombol-hidup); }
.tombol-papan-stop .tombol-cincin { stroke: var(--awas); }

.tombol-papan:hover .tombol-cincin { stroke-dasharray: none; }

.tombol-papan:focus-visible { outline: none; }
.tombol-papan:focus-visible .tombol-cincin {
  stroke-dasharray: none;
  stroke-width: 2.5;
}

/* Ditekan: cincinnya terisi. Kenopnya sendiri TIDAK digeser — yang bergerak
   bilah kontaknya, digerakkan solver, dan itulah yang harus dilihat orang. */
.tombol-papan.is-tekan .tombol-cincin {
  stroke-dasharray: none;
  stroke-width: 2.5;
  fill: color-mix(in srgb, var(--tinta-samar) 22%, transparent);
}

.tombol-papan-start.is-tekan .tombol-cincin {
  fill: color-mix(in srgb, var(--tombol-hidup) 26%, transparent);
}

.tombol-papan-stop.is-tekan .tombol-cincin {
  fill: color-mix(in srgb, var(--awas) 26%, transparent);
}

/* Memegang multimeter atau menunjuk kerusakan: satu sentuhan di gambar sudah
   punya arti lain, jadi tombolnya menyingkir. Kotak konsol di bawah tetap jadi
   jalan menekannya. */
.diagram.is-ukur .lapis-tombol,
.diagram.is-tunjuk .lapis-tombol {
  pointer-events: none;
  opacity: .2;
}

.diagram.is-ukur .tombol-papan,
.diagram.is-tunjuk .tombol-papan { pointer-events: none; }

/* Pengganti baris START/STOP saat tombolnya sedang hidup di gambar. Ia menempati
   tempat yang sama supaya konsolnya tidak berkedut tiap kali multimeter diambil
   dan disimpan. */
.tombol-di-gambar {
  margin: 0 0 10px;
  color: var(--tinta-lembut);
}

/* Daftar tautan halaman hitungan di kaki. Ada di HTML supaya bisa dirayapi
   (lihat komentar di index.html); di layar ia dijaga tetap ringkas supaya
   tidak menyaingi isi halaman. */
.kaki-hitungan {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  align-items: baseline;
  margin-bottom: .35rem;
}
.kaki-hitungan-judul { opacity: .7; }
.kaki-hitungan a { color: inherit; }

/* Ajakan menyeberang ke mode berbayar, di dalam mode Pelajari (KONSEP 42).
   Sengaja tenang: ia menyebut keberadaan sesuatu, bukan menawar. Yang berteriak
   di halaman yang sedang dipakai belajar justru membuat orang berhenti membaca
   diagramnya. */
.pelajari-lanjut {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .75rem;
  margin: 0 0 .75rem;
  padding: .6rem .75rem;
  border-left: 3px solid var(--aksen, #14525f);
  background: var(--pelat);
  font-size: .92rem;
  line-height: 1.5;
}

#pelajari-lanjut-teks { flex: 1 1 14rem; opacity: .9; }

/* Tombol yang menyamar jadi tautan: ia berpindah mode, bukan mengirim apa pun,
   dan tombol penuh di sini akan menyaingi START/STOP yang justru pekerjaannya. */
.tautan-mode {
  flex: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--aksen, #14525f);
  text-decoration: underline;
  cursor: pointer;
  /* Sasaran sentuh di HP: 44 px seperti butir menu lain (KONSEP 31). */
  min-height: 44px;
}

.tautan-mode:hover { opacity: .8; }

/* ------------------------------------------ lembar kerja praktik (KONSEP 44)

   Di layar ia tidak pernah terlihat: wadahnya `hidden` sampai detik dicetak,
   dan disembunyikan lagi sesudahnya. Seluruh baju di bawah ini karena itu
   ditulis untuk KERTAS — satuannya mm, warnanya hitam di atas putih, dan tidak
   satu pun peubah tema dipakai. Lembar yang mewarisi tema gelap akan keluar
   dari printer sebagai halaman hitam pekat. */

.lembar-cetak {
  background: #fff;
  color: #000;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 10.5pt;
  line-height: 1.45;
  padding: 12mm;
}

.lk-kop { border-bottom: 2px solid #000; padding-bottom: 3mm; margin-bottom: 5mm; }
.lk-kop-mata { margin: 0; font-size: 8.5pt; letter-spacing: .08em; text-transform: uppercase; }
.lk-nama { margin: 1mm 0 1mm; font-size: 15pt; }
.lk-ringkas { margin: 0 0 3mm; font-size: 9.5pt; }

.lk-identitas { display: flex; flex-wrap: wrap; gap: 2mm 6mm; }
.lk-identitas-butir { display: flex; align-items: flex-end; gap: 2mm; flex: 1 1 40mm; }
.lk-identitas-label { font-size: 9pt; white-space: nowrap; }
/* Garis yang benar-benar ditulisi tangan, bukan kotak isian. */
.lk-identitas-isi { flex: 1 1 auto; border-bottom: 1px solid #000; height: 5mm; }

.lk-bagian { margin-bottom: 5mm; }
/* Judul bagian tidak boleh tertinggal sendirian di kaki halaman. */
.lk-judul { font-size: 11pt; margin: 0 0 2mm; break-after: avoid; page-break-after: avoid; }
.lk-daftar { margin: 0; padding-left: 6mm; }
.lk-daftar li { margin-bottom: 1.5mm; }
.lk-petunjuk { margin: 0 0 2mm; font-size: 9pt; font-style: italic; }

.lk-tabel-bungkus { overflow-x: auto; }
.lk-tabel { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.lk-tabel th, .lk-tabel td { border: 1px solid #000; padding: 1.5mm 2mm; text-align: center; }
.lk-tabel th { background: #eee; }
.lk-aksi { text-align: left; }
/* Tinggi sel yang cukup untuk ditulisi pulpen, bukan sekadar dicentang. */
.lk-isi { height: 8mm; min-width: 14mm; }

.lk-tanya { margin: 0 0 1mm; font-weight: 600; }
.lk-garis { margin: 0 0 3mm; }
.lk-garis-baris { display: block; border-bottom: 1px solid #999; height: 7mm; }

.lk-kaki {
  display: flex;
  justify-content: space-between;
  gap: 4mm;
  border-top: 1px solid #000;
  padding-top: 2mm;
  font-size: 8pt;
}

@media print {
  /* Sembunyikan SELURUH isi body, lalu tampilkan wadah cetaknya saja. Ditulis
     begini — bukan dengan menyembunyikan simpul per simpul — supaya bagian
     aplikasi yang ditambahkan kelak tidak diam-diam ikut tercetak. */
  body > *:not(#lembar-cetak) { display: none !important; }
  body { background: #fff; margin: 0; }
  .lembar-cetak { padding: 0; }
  .lk-bagian { break-inside: avoid; page-break-inside: avoid; }
  @page { margin: 12mm; }
}

/* ------------------------------------------------------ mode Uji (KONSEP 45)
   Memakai kerangka yang sama dengan Ebook dan Kalkulator (.ebook-tata,
   .ebook-daftar, .ebook-bab-tautan) — yang ditambah di bawah cuma butir
   pertanyaannya. */

.kuis-butir {
  border-top: 1px solid var(--garis);
  padding-top: 1rem;
  margin-top: 1rem;
}
.kuis-butir:first-of-type { border-top: 0; margin-top: .5rem; padding-top: 0; }

.kuis-nomor { margin: 0 0 .2rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.kuis-tanya { margin: 0 0 .7rem; font-size: 1.02rem; line-height: 1.45; }

.kuis-pilihan { display: grid; gap: .45rem; }

.kuis-pilih {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  width: 100%;
  /* Sasaran sentuh 44 px, aturan yang sama dengan butir menu (KONSEP 31). */
  min-height: 44px;
  padding: .6rem .7rem;
  text-align: left;
  font: inherit;
  line-height: 1.4;
  color: inherit;
  background: var(--pelat);
  border: 1px solid var(--garis);
  border-radius: 6px;
  cursor: pointer;
}
.kuis-pilih:hover:not(:disabled) { background: var(--pelat-2); }
.kuis-pilih:disabled { cursor: default; opacity: 1; }

.kuis-huruf {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--garis);
  font-size: .8rem;
  font-weight: 700;
}

/* Yang berlaku ditandai; yang dipilih pembaca ditandai BERBEDA, bukan dicap.
   Pembedanya lebih dari satu sifat — garis, tebal huruf, dan warna — supaya
   tetap terbaca oleh yang tidak membedakan warna (KONSEP 23, 31.1). */
.kuis-pilih.is-benar {
  border-color: var(--tombol-hidup, #2f7d33);
  border-width: 2px;
  font-weight: 600;
}
.kuis-pilih.is-benar .kuis-huruf { border-color: var(--tombol-hidup, #2f7d33); border-width: 2px; }
.kuis-pilih.is-terpilih { border-style: dashed; opacity: .75; }

.kuis-alasan {
  margin-top: .6rem;
  padding: .6rem .75rem;
  border-left: 3px solid var(--aksen, #14525f);
  background: var(--pelat);
  line-height: 1.55;
}
.kuis-alasan p { margin: 0; }
.kuis-alasan-judul { font-weight: 600; margin-bottom: .25rem !important; }

.kuis-tutup {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--garis);
}
.kuis-hasil { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 700; }
.kuis-nota { margin: 0 0 .8rem; line-height: 1.55; opacity: .9; }

/* Sakelar pilih di konsol mode Rakit. Tiga tombol yang saling menggantikan —
   keadaannya menetap, jadi yang sedang dipakai harus terlihat tanpa ditekan.
   Pembedanya lebih dari satu sifat (warna, tebal huruf, garis) supaya tetap
   terbaca oleh yang tidak membedakan warna — aturan yang sama dengan 23/31.1. */
.pilih-posisi { display: grid; gap: .3rem; }
.pilih-posisi-baris { display: flex; gap: .35rem; flex-wrap: wrap; }
.pilih-posisi-baris .sekunder { min-height: 44px; flex: 1 1 auto; }
.pilih-posisi-baris .sekunder.is-aktif {
  border-color: var(--aksen);
  border-width: 2px;
  font-weight: 700;
  background: var(--pelat-2);
}