/* style.css — Kamar Mesin.
 *
 * Nama kelas di berkas ini WAJIB mengikuti markup di index.html dan simpul
 * yang dibuat assets/js/*.js — bukan sebaliknya. Pernah terbalik sekali
 * (2 Sep 2026): berkas ini ditulis ulang dengan kosakata sendiri, 42 kelas
 * jadi tanpa aturan, dan keempat modul tampil bertumpuk karena
 * `.is-tersembunyi` tidak ada. Jalankan `node alat/cek-kelas.mjs` sesudah
 * menyunting berkas ini.
 *
 * Warnanya dibawa dari kamar mesin sungguhan: pelat baja kelabu, gas panas
 * jingga, udara bilas biru dingin, minyak lumas kuning tua.
 */

/* ------------------------------------------------------------- warna */
:root {
  color-scheme: light;
  --latar: #f3f5f7;
  --latar-2: #ffffff;
  --latar-3: #e9edf1;
  --garis: #d7dee5;
  --garis-kuat: #a9b5c1;
  --teks: #141a20;
  --teks-redup: #59697a;
  --aksen: #b25f13;          /* gas panas */
  --aksen-lembut: #fbe8d7;
  --udara: #1259b8;          /* udara bilas */
  --udara-lembut: #dae8fb;
  --kuning: #8a6410;         /* minyak lumas */
  --merah: #c02f28;
  --hijau: #1d7433;
  --lebar: 1180px;
  --sudut: 10px;
}

/* Baku mengikuti sistem; pilihan pengguna (data-tema) selalu menang. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) { color-scheme: dark; }
}
:root[data-tema="gelap"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    --latar: #10151a;
    --latar-2: #171d24;
    --latar-3: #1f272f;
    --garis: #2c3742;
    --garis-kuat: #4a5a69;
    --teks: #e6edf3;
    --teks-redup: #94a4b4;
    --aksen: #f0883e;
    --aksen-lembut: #46280f;
    --udara: #58a6ff;
    --udara-lembut: #14304f;
    --kuning: #d9a441;
    --merah: #f85149;
    --hijau: #3fb950;
  }
}
:root[data-tema="gelap"] {
  --latar: #10151a;
  --latar-2: #171d24;
  --latar-3: #1f272f;
  --garis: #2c3742;
  --garis-kuat: #4a5a69;
  --teks: #e6edf3;
  --teks-redup: #94a4b4;
  --aksen: #f0883e;
  --aksen-lembut: #46280f;
  --udara: #58a6ff;
  --udara-lembut: #14304f;
  --kuning: #d9a441;
  --merah: #f85149;
  --hijau: #3fb950;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 650; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .8em; }
a  { color: var(--udara); }
em { font-style: italic; }

/* Satu-satunya cara menyembunyikan sesuatu di aplikasi ini. Pakai !important
   karena beberapa wadah yang disembunyikan punya display sendiri (grid/flex)
   yang kalau tidak dikalahkan akan tetap tampil. */
.is-tersembunyi { display: none !important; }

.kecil { font-size: .86rem; }
.petunjuk { color: var(--teks-redup); }
.petunjuk b, .petunjuk strong { color: var(--teks); }

/* --------------------------------------------------------------- kepala */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 14px;
  background: var(--latar-2);
  border-bottom: 1px solid var(--garis);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.brand-ikon {
  width: 27px; height: 27px; flex: 0 0 27px;
  display: grid; place-items: center;
  border-radius: 7px; background: var(--aksen); color: #fff;
  font-size: 16px; line-height: 1;
}
.brand-teks { letter-spacing: .2px; }

.tab-nav { display: flex; gap: 4px; overflow-x: auto; flex: 1 1 300px; scrollbar-width: thin; }
.tab-btn {
  flex: 0 0 auto; white-space: nowrap;
  background: transparent; color: var(--teks-redup);
  border: 1px solid transparent; border-radius: 999px;
  padding: 6px 13px; font: inherit; font-size: .9rem; cursor: pointer;
}
.tab-btn:hover { color: var(--teks); background: var(--latar-3); }
.tab-btn.is-aktif { color: var(--latar-2); background: var(--aksen); font-weight: 620; }

.tema-toggle {
  flex: 0 0 auto;
  background: var(--latar-3); color: var(--teks);
  border: 1px solid var(--garis); border-radius: 8px;
  width: 34px; height: 32px; cursor: pointer;
  display: grid; place-items: center;
}
.tema-toggle:hover { border-color: var(--aksen); }

/* ---------------------------------------------------------------- badan */
main { max-width: var(--lebar); margin: 0 auto; padding: 18px 14px 56px; }
.modul:focus { outline: none; }
.modul:focus-visible { outline: 2px solid var(--aksen); outline-offset: 4px; border-radius: 4px; }
.modul-intro { margin-bottom: 18px; }
.modul-intro p { color: var(--teks-redup); max-width: 68ch; }

.kartu {
  background: var(--latar-2);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  padding: 15px;
  margin-bottom: 16px;
}
.kartu > h2:first-child, .kartu > h3:first-child { margin-top: 0; }

/* Panggung: dua kolom di layar lebar, satu kolom di HP. Varian -rata membagi
   rata, -sempit memberi kolom kiri lebar tetap. */
.panggung {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  margin-bottom: 16px;
}
.panggung-rata { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.panggung-sempit { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
@media (max-width: 860px) {
  .panggung, .panggung-rata, .panggung-sempit { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------- kendali */
.kendali {
  display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end;
  background: var(--latar-2); border: 1px solid var(--garis);
  border-radius: var(--sudut); padding: 13px 15px; margin-bottom: 16px;
}
.kendali-blok {
  flex: 1 1 220px; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px;
}
/* Label mengambil satu baris penuh, sisanya berjajar di bawahnya. Satu aturan
   ini melayani ketiga blok: yang berisi penggeser + angka, maupun yang berisi
   tombol + pilihan kecepatan. */
.kendali-blok label {
  flex: 1 0 100%; font-size: .8rem; color: var(--teks-redup);
  text-transform: uppercase; letter-spacing: .04em;
}
.kendali-blok output {
  font-variant-numeric: tabular-nums; font-weight: 700; min-width: 3.4em;
}
.kendali-blok select { width: auto; flex: 0 1 auto; }

input[type="range"] { flex: 1 1 130px; width: 100%; accent-color: var(--aksen); margin: 0; }
select, input[type="text"], input[type="number"] {
  background: var(--latar-3); color: var(--teks);
  border: 1px solid var(--garis-kuat); border-radius: 7px;
  padding: 7px 9px; font: inherit; width: 100%;
}
.input-cari { margin-bottom: 8px; }

.tombol {
  background: var(--latar-3); color: var(--teks);
  border: 1px solid var(--garis-kuat); border-radius: 8px;
  padding: 8px 14px; font: inherit; cursor: pointer; white-space: nowrap;
}
.tombol:hover { border-color: var(--aksen); }
.tombol-aksen { background: var(--aksen); color: #fff; border-color: var(--aksen); font-weight: 620; }
.tombol-aksen:hover { filter: brightness(1.08); }
.tombol-kecil { padding: 5px 11px; font-size: .87rem; }

/* --------------------------------------------------------------- gambar */
.svg-bungkus { width: 100%; overflow-x: auto; }
.svg-bungkus > svg { width: 100%; height: auto; display: block; }

/* Di layar sempit, penampang mesin yang diperkecil sampai selebar HP membuat
   tulisannya tak terbaca. Lebih baik ia tetap besar dan digulir MENDATAR DI
   DALAM KOTAKNYA sendiri — badan halaman tetap tidak ikut bergeser. */
@media (max-width: 620px) {
  #svgMesin, #svgBagian { min-width: 470px; }
}

.svg-teks { fill: var(--teks-redup); font-size: 12px; }
.svg-teks-kuat { fill: var(--teks); font-size: 13px; font-weight: 640; }
.svg-nilai { fill: var(--teks); font-size: 12px; font-variant-numeric: tabular-nums; }
.svg-garis { stroke: var(--garis-kuat); stroke-width: 1; fill: none; }
/* Dua tingkat kelabu logam: badan besar memakai svg-logam, bagian yang
   bergerak dan bagian kecil memakai svg-logam-2 supaya bentuknya masih
   terbaca saat bertumpuk di atas badan mesin. */
.svg-logam { fill: var(--latar-3); stroke: var(--garis-kuat); stroke-width: 1.5; }
.svg-logam-2 { fill: var(--garis); stroke: var(--garis-kuat); stroke-width: 1; }

.legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 9px; }
.legenda-item { color: var(--teks-redup); font-size: .84rem; display: inline-flex; align-items: center; gap: 5px; }
.contreng { display: inline-block; width: 11px; height: 11px; border-radius: 3px; flex: 0 0 11px; }

/* ------------------------------------------------------------- parameter */
.panel-angka {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.angka {
  background: var(--latar-3); border: 1px solid var(--garis);
  border-radius: 8px; padding: 8px 10px;
}
.angka-label { font-size: .73rem; color: var(--teks-redup); text-transform: uppercase; letter-spacing: .04em; }
.angka-nilai { font-variant-numeric: tabular-nums; font-weight: 680; font-size: 1.1rem; margin-top: 2px; }
.angka-satuan { font-size: .76rem; color: var(--teks-redup); font-weight: 400; margin-left: 3px; }
.angka-beda { font-size: .72rem; margin-top: 3px; font-variant-numeric: tabular-nums; }

/* Merah = lebih tinggi dari mesin sehat, biru = lebih rendah. Dipakai modul
   diagnosa; arahnya lebih penting daripada besarnya. */
.angka.is-naik  { border-color: var(--merah); background: var(--latar-2); }
.angka.is-turun { border-color: var(--udara); background: var(--latar-2); }
.angka.is-naik  .angka-beda { color: var(--merah); }
.angka.is-turun .angka-beda { color: var(--udara); }

.angka-sel { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------- batang tiap silinder */
.batang-silinder { display: grid; gap: 5px; }
.batang-baris { display: grid; grid-template-columns: 44px 1fr 62px; gap: 8px; align-items: center; }
.batang-nama { font-size: .82rem; color: var(--teks-redup); }
.batang-alur {
  position: relative; height: 17px; border-radius: 4px;
  background: var(--latar-3); border: 1px solid var(--garis); overflow: hidden;
}
.batang-isi { height: 100%; background: var(--aksen); opacity: .78; }
/* Garis rata-rata: patokan pembanding, digambar di atas batangnya. */
.batang-rata { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--teks); opacity: .6; }
.batang-nilai { font-size: .84rem; font-variant-numeric: tabular-nums; text-align: right; }
.batang-baris.is-menyimpang .batang-isi { background: var(--merah); opacity: .85; }
.batang-baris.is-menyimpang .batang-nama,
.batang-baris.is-menyimpang .batang-nilai { color: var(--merah); font-weight: 650; }

/* ---------------------------------------------------------------- alarm */
.daftar-alarm { display: grid; gap: 6px; margin-top: 12px; }
.alarm {
  display: flex; gap: 9px; align-items: baseline;
  padding: 7px 10px; border-radius: 7px; font-size: .89rem;
  border-left: 3px solid var(--garis-kuat); background: var(--latar-3);
}
.alarm-ikon {
  flex: 0 0 17px; width: 17px; height: 17px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: .78rem; font-weight: 700; color: var(--latar-2);
  background: var(--garis-kuat); align-self: center;
}
.alarm-bahaya { border-left-color: var(--merah); }
.alarm-bahaya .alarm-ikon { background: var(--merah); }
.alarm-ingat { border-left-color: var(--kuning); }
.alarm-ingat .alarm-ikon { background: var(--kuning); }
.alarm-aman { border-left-color: var(--hijau); color: var(--teks-redup); }
.alarm-aman .alarm-ikon { background: var(--hijau); }

/* ---------------------------------------------------------------- tabel */
.tabel-bungkus { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--garis); }
thead th {
  color: var(--teks-redup); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
td.angka-sel { text-align: right; white-space: nowrap; }

/* -------------------------------------------------------------- akordeon */
.akordeon { display: grid; gap: 7px; }
.akordeon details {
  border: 1px solid var(--garis); border-radius: 8px; background: var(--latar-3);
}
.akordeon summary { cursor: pointer; padding: 10px 13px; font-weight: 600; list-style: none; }
.akordeon summary::-webkit-details-marker { display: none; }
.akordeon summary::before { content: "▸ "; color: var(--aksen); }
.akordeon details[open] summary::before { content: "▾ "; }
.akordeon-isi { padding: 0 13px 12px; }
.akordeon-isi > *:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- kotak peringatan */
.catatan {
  border-left: 3px solid var(--udara); background: var(--udara-lembut);
  padding: 10px 13px; border-radius: 0 7px 7px 0; margin: 0 0 16px; font-size: .91rem;
}
.awas {
  border-left: 3px solid var(--merah);
  background: color-mix(in srgb, var(--merah) 11%, transparent);
  padding: 10px 13px; border-radius: 0 7px 7px 0; margin: 0 0 16px; font-size: .91rem;
}
.awas > p:last-child, .catatan > p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- modul B & pilih */
.pilih-komponen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pilih-komponen .tombol.is-terpilih {
  border-color: var(--aksen); background: var(--aksen-lembut); font-weight: 620;
}
.kartu-komponen dt { font-weight: 650; margin-top: 10px; }
.kartu-komponen dt:first-child { margin-top: 0; }
.kartu-komponen dd { margin: 3px 0 0; color: var(--teks-redup); }

/* Penampang modul B: setiap bagiannya bisa diketuk, jadi kotak sorot biru
   bawaan peramban saat disentuh justru mengganggu, dan teksnya tidak boleh
   ikut terblok saat jari menggeser. */
.bagian-svg { -webkit-tap-highlight-color: transparent; user-select: none; }

/* Bagian yang bisa diketuk di penampang (modul B). Sasaran sentuhnya sebuah
   persegi bening yang lebih besar dari gambarnya, jadi jari tetap mengenai
   di HP tanpa perlu memperbesar gambar mesinnya. */
.titik-klik { cursor: pointer; }
.titik-klik:focus { outline: none; }
.sorot { fill: transparent; stroke: transparent; stroke-width: 2.5; transition: fill .12s, stroke .12s; }
.titik-klik:hover .sorot { fill: color-mix(in srgb, var(--aksen) 16%, transparent); stroke: var(--aksen); }
.titik-klik:focus-visible .sorot { fill: color-mix(in srgb, var(--udara) 18%, transparent); stroke: var(--udara); }
.titik-klik.is-terpilih .sorot { fill: color-mix(in srgb, var(--aksen) 24%, transparent); stroke: var(--aksen); }

/* -------------------------------------------------------------- modul C */
.mode-pilih {
  display: inline-flex; gap: 3px; margin-bottom: 14px;
  background: var(--latar-3); border: 1px solid var(--garis);
  border-radius: 999px; padding: 3px;
}
.mode-pilih .tombol { border: 0; background: transparent; color: var(--teks-redup); border-radius: 999px; }
.mode-pilih .tombol[aria-pressed="true"] { background: var(--aksen); color: #fff; font-weight: 620; }

.pilihan-jawab { display: grid; gap: 7px; margin: 10px 0 12px; }
.jawab {
  text-align: left; width: 100%;
  background: var(--latar-3); color: var(--teks);
  border: 1px solid var(--garis); border-radius: 8px;
  padding: 9px 12px; font: inherit; cursor: pointer;
}
.jawab:hover { border-color: var(--aksen); }
.jawab.is-benar { border-color: var(--hijau); background: color-mix(in srgb, var(--hijau) 16%, transparent); }
.jawab.is-salah { border-color: var(--merah); background: color-mix(in srgb, var(--merah) 16%, transparent); }

.umpan {
  margin-top: 12px; padding: 11px 13px; border-radius: 8px;
  border-left: 3px solid var(--garis-kuat); background: var(--latar-3); font-size: .92rem;
}
.umpan.is-benar { border-left-color: var(--hijau); }
.umpan.is-salah { border-left-color: var(--merah); }
.umpan > *:last-child { margin-bottom: 0; }

.skor { margin-top: 10px; font-size: .88rem; color: var(--teks-redup); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- modul D */
#daftarIstilah { display: grid; gap: 7px; margin: 0; }
.istilah { background: var(--latar-3); border: 1px solid var(--garis); border-radius: 8px; padding: 9px 12px; }
.istilah dt { font-weight: 650; }
.istilah dd { margin: 3px 0 0; color: var(--teks-redup); font-size: .9rem; }
.istilah-asing { color: var(--teks-redup); font-weight: 400; font-size: .85rem; font-style: italic; }

/* ----------------------------------------------------------------- kaki */
.footer {
  max-width: var(--lebar); margin: 0 auto;
  padding: 18px 14px 40px; border-top: 1px solid var(--garis);
  color: var(--teks-redup); font-size: .84rem;
}
.footer p { margin-bottom: .4em; }