:root {
  --bg: #f4f7f9;
  --bg-panel: #ffffff;
  --bg-kartu: #ffffff;
  --teks: #142433;
  --teks-redup: #4c6070;
  --garis: #d6e0e6;
  --aksen: #1c7ea6;
  --aksen-redup: #e5f1f6;
  --bahaya: #c9432f;

  --fase-gas-panas: #e0552f;
  --fase-cair: #f0a531;
  --fase-campuran: #6fc3e0;
  --fase-uap-dingin: #2f6fa8;
  --logam: #8fa3ad;
  --logam-gelap: #5d7079;

  color-scheme: light;
}

:root[data-tema="gelap"] {
  --bg: #0f1a22;
  --bg-panel: #16232c;
  --bg-kartu: #1b2b35;
  --teks: #e7eef2;
  --teks-redup: #9db0bb;
  --garis: #2a3c47;
  --aksen: #4bb3dc;
  --aksen-redup: #17313c;
  --bahaya: #e2695a;

  --logam: #5d7079;
  --logam-gelap: #3a4a52;

  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--teks);
  line-height: 1.55;
}

h1, h2, h3 { line-height: 1.25; }

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--garis);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.1rem;
  margin-right: auto;
}
.brand-ikon { color: var(--aksen); font-size: 1.3rem; }

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

.tab-btn {
  border: 1px solid var(--garis);
  background: transparent;
  color: var(--teks-redup);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
}
.tab-btn.is-aktif {
  background: var(--aksen);
  border-color: var(--aksen);
  color: #fff;
}

.tema-toggle {
  border: 1px solid var(--garis);
  background: var(--bg-kartu);
  color: var(--teks);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 1rem;
}

/* Di bawah 1280px isi topbar tidak lagi muat satu baris, dan karena tombol
   tema ditulis paling akhir ia ikut terdorong ke baris terbawah — di HP
   berakhir sendirian di kolong menu, jauh dari brand. Ambangnya diukur, bukan
   ditebak: pada 1280px semuanya masih sebaris, pada 1180px tombol tema sudah
   lepas dari baris brand. Menu diberi baris sendiri (order + basis penuh)
   supaya tombol tema tetap di pojok kanan atas berapa pun jumlah baris menu. */
@media (max-width: 1279px) {
  /* Topbar di sini selalu dua baris (brand, lalu menu). Jarak 16px yang enak
     antar-elemen sebaris jadi terlalu lega sebagai jarak antar-baris di
     header yang sticky. */
  .topbar { row-gap: 8px; }

  .tab-nav {
    order: 1;
    flex-basis: 100%;
    min-width: 0;

    /* Menumpuk jadi 5 baris di 360px membuat topbar setinggi 267px — dan ia
       sticky, jadi tinggi itu hilang dari layar terus-menerus, bukan cuma
       sekali di atas. Satu baris yang digeser menyusutkannya jadi ~50px. */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* Cincin :focus-visible (Tahap 8) tebal; tanpa ruang ini ia terpotong
       tepi kotak gulir. */
    padding: 3px 0;
  }
  .tab-nav::-webkit-scrollbar { display: none; }

  .tab-btn {
    flex: none;
    white-space: nowrap;
  }

  /* Tanpa petunjuk, modul D–F yang berada di luar layar tidak pernah
     ditemukan orang. Kelasnya dipasang app.js hanya kalau memang masih ada
     yang bisa digeser ke arah itu — jadi tidak ada bayangan palsu di ujung. */
  .tab-nav.bisa-geser-kanan {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
  .tab-nav.bisa-geser-kiri {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
  }
  .tab-nav.bisa-geser-kiri.bisa-geser-kanan {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  }
}

main { max-width: 1080px; margin: 0 auto; padding: 24px 20px 60px; }

.is-tersembunyi { display: none; }

.modul-intro h1 { margin: 0 0 8px; font-size: 1.6rem; }
.modul-intro p { color: var(--teks-redup); max-width: 68ch; }

.panel-siklus, .panel-ph, .panel-materi {
  background: var(--bg-panel);
  border: 1px solid var(--garis);
  border-radius: 14px;
  padding: 20px;
  margin-top: 20px;
}

.siklus-svg-bungkus { width: 100%; overflow-x: auto; }
#svgSiklus, #svgPh { width: 100%; height: auto; display: block; }

.siklus-kontrol {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.tombol {
  border: 1px solid var(--garis);
  background: var(--bg-kartu);
  color: var(--teks);
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
}
.tombol:hover { border-color: var(--aksen); }
.tombol-aksen { background: var(--aksen); border-color: var(--aksen); color: #fff; }
.tombol-kecil { padding: 6px 12px; font-size: 0.82rem; }
.tombol-stop { color: var(--bahaya); border-color: var(--bahaya); }

.legenda-fase {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--teks-redup);
}
.legenda-item { display: flex; align-items: center; gap: 6px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.swatch-gas-panas { background: var(--fase-gas-panas); }
.swatch-cair { background: var(--fase-cair); }
.swatch-campuran { background: var(--fase-campuran); }
.swatch-uap-dingin { background: var(--fase-uap-dingin); }

.grid-skema {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.kartu-skema {
  background: var(--bg-kartu);
  border: 1px solid var(--garis);
  border-radius: 14px;
  padding: 16px;
}
.kartu-skema h3 { margin: 0 0 6px; font-size: 1.02rem; }
.kartu-skema p { margin: 0 0 10px; color: var(--teks-redup); font-size: 0.88rem; }
.svg-skema { width: 100%; height: auto; display: block; background: var(--aksen-redup); border-radius: 8px; }

.skema-aksi { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.accordion { display: flex; flex-direction: column; gap: 8px; }
.accordion-item {
  border: 1px solid var(--garis);
  border-radius: 10px;
  overflow: hidden;
}
.accordion-head {
  width: 100%;
  text-align: left;
  background: var(--bg-kartu);
  border: none;
  color: var(--teks);
  padding: 12px 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
}
.accordion-head::after { content: "+"; color: var(--aksen); font-size: 1.2rem; }
.accordion-item.is-buka .accordion-head::after { content: "\2212"; }
.accordion-body {
  padding: 0 16px;
  max-height: 0;
  overflow: hidden;
  color: var(--teks-redup);
  font-size: 0.92rem;
  transition: max-height 0.25s ease, padding 0.25s ease;
}
.accordion-item.is-buka .accordion-body {
  padding: 0 16px 16px;
  max-height: 600px;
}
.accordion-body p { margin: 0 0 10px; }
.accordion-body ul { margin: 0 0 10px; padding-left: 20px; }
.accordion-body table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 0.88rem; }
.accordion-body th, .accordion-body td { border: 1px solid var(--garis); padding: 6px 10px; text-align: left; }

.footer {
  text-align: center;
  color: var(--teks-redup);
  font-size: 0.82rem;
  padding: 20px;
}
/* Dua baris footer (keterangan lalu hak cipta) — jarak paragraf bawaan 1em
   terlalu renggang untuk dua kalimat yang saling berkaitan. */
.footer p { margin: 4px 0; }

/* --- elemen SVG bersama --- */
.lbl { font-size: 13px; fill: var(--teks); font-family: inherit; }
.lbl-kecil { font-size: 11px; fill: var(--teks-redup); font-family: inherit; }
.pipa { fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.komponen-kotak { fill: var(--bg-kartu); stroke: var(--logam-gelap); stroke-width: 2; }
.titik-alir { r: 5; }

.kabel { fill: none; stroke: var(--logam-gelap); stroke-width: 2.5; }
.kabel-hidup { stroke: var(--fase-gas-panas); }
.kontak-terbuka, .kontak-tertutup { stroke: var(--logam-gelap); stroke-width: 2.5; }
.kontak-tertutup { stroke: var(--aksen); }
.node { fill: var(--logam-gelap); }

/* --- siklus refrigerasi: warna pipa = fase, titik bergerak = arah aliran --- */
.pipa-gas-panas { stroke: var(--fase-gas-panas); }
.pipa-cair { stroke: var(--fase-cair); }
.pipa-campuran { stroke: var(--fase-campuran); }
.pipa-uap-dingin { stroke: var(--fase-uap-dingin); }

.titik-alir {
  fill: #fff;
  stroke: rgba(0,0,0,0.3);
  stroke-width: 1;
  animation: alirTitik linear infinite;
}
@keyframes alirTitik {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

.komponen-fan { transform-box: fill-box; transform-origin: center; animation: putarFan 1.4s linear infinite; }
@keyframes putarFan { to { transform: rotate(360deg); } }

.kotak-ambien { fill: none; stroke: var(--garis); stroke-width: 1.5; stroke-dasharray: 5 4; }

.heater-defrost { fill: var(--bahaya); opacity: 0; transition: opacity 0.4s ease; }
.svg-siklus.is-defrost .heater-defrost { opacity: 1; }
.svg-siklus.is-defrost .titik-alir { animation-play-state: paused; opacity: 0.2; transition: opacity 0.4s; }
.svg-siklus.is-defrost .komponen-fan { animation-play-state: paused; }
.svg-siklus .titik-alir, .svg-siklus .komponen-fan { transition: opacity 0.4s; }
.svg-siklus .komponen-kompresor { transition: opacity 0.4s; }
.svg-siklus.is-defrost .komponen-kompresor { opacity: 0.4; }

/* --- Modul C: efek visual gangguan, mesin yang sama dengan Modul A --- */
.komponen-fan.is-mati { animation-play-state: paused; opacity: 0.3; }
.komponen-kompresor.is-mati { opacity: 0.35; }
.komponen-kompresor.is-short-cycle { animation: kedipKompresor 1.1s steps(2, jump-none) infinite; }
@keyframes kedipKompresor { 50% { opacity: 0.3; } }

.grup-titik.alir-lambat .titik-alir { animation-duration: 5.5s !important; opacity: 0.6; }
.grup-titik.alir-cepat .titik-alir { animation-duration: 0.8s !important; }
.grup-titik.alir-henti .titik-alir { animation-play-state: paused; opacity: 0.25; }

.efek-kondensor-kotor { fill: #3a2a18; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.efek-kondensor-kotor.is-aktif { opacity: 0.4; }

.efek-cairan-menumpuk { fill: var(--fase-cair); opacity: 0; transition: opacity 0.4s ease; }
.efek-cairan-menumpuk.is-aktif { opacity: 0.55; }

.efek-es-sebagian, .efek-es-penuh { opacity: 0; transition: opacity 0.4s ease; }
.efek-es-sebagian.is-aktif { opacity: 0.95; }
.efek-es-penuh.is-aktif { opacity: 1; }

/* --- panel gauge & kuis diagnosa --- */
.panel-gauge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.gauge {
  background: var(--bg-kartu);
  border: 1px solid var(--garis);
  border-radius: 10px;
  padding: 10px 14px;
}
.gauge-label { font-size: 0.78rem; color: var(--teks-redup); margin-bottom: 4px; }
.gauge-nilai { font-size: 1.15rem; font-weight: 700; }
.gauge-bar { height: 6px; border-radius: 3px; background: var(--garis); margin-top: 8px; overflow: hidden; }
.gauge-bar-isi { height: 100%; border-radius: 3px; transition: width 0.3s ease, background 0.3s ease; }
.gauge-bar-isi.zona-rendah { background: var(--fase-uap-dingin); }
.gauge-bar-isi.zona-normal { background: var(--aksen); }
.gauge-bar-isi.zona-tinggi { background: var(--bahaya); }

.layar-kontroler {
  font-family: "Consolas", "Courier New", monospace;
  background: #0b1a12;
  color: #7CFFB2;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 14px;
  font-size: 0.92rem;
  white-space: pre-wrap;
  min-height: 1.4em;
}
.layar-kontroler.ada-alarm { color: #ff9d7c; }

.mode-toggle { display: flex; gap: 6px; margin: 4px 0 14px; flex-wrap: wrap; }
.mode-btn, .submode-btn {
  border: 1px solid var(--garis);
  background: var(--bg-kartu);
  color: var(--teks-redup);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
.mode-btn.is-aktif, .submode-btn.is-aktif { background: var(--aksen); border-color: var(--aksen); color: #fff; }

.pemilih-gangguan { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gangguan-btn {
  border: 1px solid var(--garis);
  background: var(--bg-kartu);
  color: var(--teks);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  text-align: left;
}
.gangguan-btn.is-aktif { border-color: var(--aksen); background: var(--aksen-redup); font-weight: 600; }

.penjelasan-gangguan {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--aksen-redup);
  border-radius: 10px;
  font-size: 0.92rem;
  border-left: 4px solid var(--aksen);
}

.kuis-box { margin-top: 16px; }
.kuis-pilihan { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.kuis-opsi {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--garis);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.88rem;
}
.kuis-opsi:hover { border-color: var(--aksen); }
.kuis-opsi.terpilih { border-color: var(--aksen); background: var(--aksen-redup); }
.kuis-opsi.jawaban-benar { border-color: #2f9e5f; background: rgba(47,158,95,0.12); }
.kuis-opsi.jawaban-salah { border-color: var(--bahaya); background: rgba(201,67,47,0.12); }
.kuis-umpan {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.9rem;
}
.kuis-umpan.benar { background: rgba(47,158,95,0.12); border-left: 4px solid #2f9e5f; }
.kuis-umpan.salah { background: rgba(201,67,47,0.12); border-left: 4px solid var(--bahaya); }
.skor-kuis { font-size: 0.82rem; color: var(--teks-redup); margin-top: 8px; }

/* --- skematik kelistrikan kontrol (Modul B) --- */
.kontak-terbuka { stroke-dasharray: none; }
.kontak-tertutup.dot { stroke: var(--aksen); }
.lampu {
  fill: var(--logam);
  stroke: var(--logam-gelap);
  stroke-width: 1.5;
  transition: fill 0.3s ease;
}
.lampu.is-nyala { fill: var(--fase-cair); }
.lampu.is-nyala.merah { fill: var(--bahaya); }
.kontaktor-batang {
  stroke: var(--logam-gelap);
  stroke-width: 3;
  transition: transform 0.3s ease;
  transform-box: fill-box;
  transform-origin: left center;
}
.kontaktor-batang.is-tutup { transform: rotate(0deg); stroke: var(--aksen); }
.kontaktor-batang.is-buka { transform: rotate(-22deg); }
.motor-putar {
  transition: opacity 0.3s ease;
  animation: putarFan 0.9s linear infinite;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.motor-putar.is-jalan { opacity: 1; }

.jembatan-kontak { stroke: var(--logam-gelap); stroke-width: 3; opacity: 0; transition: opacity 0.25s ease, stroke 0.25s ease; }
.jembatan-kontak.is-tutup { opacity: 1; stroke: var(--aksen); }
.jembatan-kontak.is-trip { opacity: 1; stroke: var(--bahaya); }
.node-kontak { r: 3; fill: var(--logam-gelap); }

.koil { fill: var(--bg-kartu); stroke: var(--logam-gelap); stroke-width: 2; transition: fill 0.3s ease; }
.koil.is-energi { fill: var(--aksen); stroke: var(--aksen); }

.status-teks { font-size: 13px; font-weight: 700; fill: var(--teks); text-anchor: middle; }
.status-teks.status-trip { fill: var(--bahaya); }
.status-teks.status-jalan { fill: var(--aksen); }

.heater-kecil { opacity: 0.15; transition: opacity 0.3s ease; }
.heater-kecil.is-nyala { opacity: 1; }

/* --- Modul D: checklist PTI & log suhu --- */
.teks-status-ok { color: var(--aksen); font-weight: 700; }
.teks-status-perhatian { color: var(--bahaya); font-weight: 700; }
.teks-redup-kecil { color: var(--teks-redup); font-size: 0.85rem; }

.form-pti-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.form-pti-header label, .form-suhu label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--teks-redup);
  font-weight: 600;
}
.form-pti-header input, .form-suhu input {
  border: 1px solid var(--garis);
  background: var(--bg-kartu);
  color: var(--teks);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.92rem;
  font-family: inherit;
}

.pti-kategori {
  margin: 18px 0 8px;
  font-size: 0.95rem;
  color: var(--aksen);
  border-bottom: 1px solid var(--garis);
  padding-bottom: 6px;
}
.pti-baris {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--garis);
}
.pti-teks { font-size: 0.92rem; grid-column: 1; }
.pti-toggle { display: flex; gap: 6px; grid-column: 2; }
.pti-ok, .pti-tidak {
  border: 1px solid var(--garis);
  background: var(--bg-kartu);
  color: var(--teks-redup);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
}
.pti-ok.is-aktif { background: var(--aksen); border-color: var(--aksen); color: #fff; }
.pti-tidak.is-aktif { background: var(--bahaya); border-color: var(--bahaya); color: #fff; }
.pti-catatan {
  grid-column: 1 / -1;
  border: 1px solid var(--garis);
  background: var(--bg-kartu);
  color: var(--teks);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-family: inherit;
}

.ringkasan-pti {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--aksen-redup);
  border-radius: 10px;
  font-size: 0.95rem;
}
.pesan-form { font-size: 0.85rem; margin-top: 8px; min-height: 1.2em; }
.pesan-form-error { color: var(--bahaya); }
.pesan-form-ok { color: var(--aksen); }

.riwayat-pti-item {
  border: 1px solid var(--garis);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
  background: var(--bg-kartu);
}
.riwayat-pti-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.riwayat-pti-aksi { display: flex; gap: 8px; margin-top: 10px; }
.riwayat-pti-detail { margin-top: 12px; font-size: 0.85rem; }
.riwayat-pti-detail h4 { margin: 10px 0 4px; color: var(--aksen); font-size: 0.85rem; }
.riwayat-item-baris { padding: 3px 0; color: var(--teks-redup); }

.form-suhu {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: 16px;
}
.tabel-bungkus { overflow-x: auto; max-width: 100%; }
.tabel-suhu { border-collapse: collapse; width: 100%; font-size: 0.88rem; min-width: 480px; }
.tabel-suhu th, .tabel-suhu td { border: 1px solid var(--garis); padding: 8px 10px; text-align: left; white-space: nowrap; }
.tabel-suhu th { background: var(--aksen-redup); }

/* --- Modul E: referensi cepat --- */
.input-cari {
  width: 100%;
  border: 1px solid var(--garis);
  background: var(--bg-kartu);
  color: var(--teks);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-family: inherit;
  margin-bottom: 14px;
  box-sizing: border-box;
}
.daftar-istilah { display: flex; flex-direction: column; gap: 4px; }
.istilah-item { padding: 10px 0; border-bottom: 1px solid var(--garis); }
.istilah-kata { font-weight: 700; font-size: 0.92rem; margin-bottom: 2px; }
.istilah-arti { font-size: 0.88rem; color: var(--teks-redup); }

.tabel-referensi { border-collapse: collapse; width: 100%; font-size: 0.88rem; min-width: 520px; }
.tabel-referensi th, .tabel-referensi td { border: 1px solid var(--garis); padding: 8px 10px; text-align: left; }
.tabel-referensi th { background: var(--aksen-redup); white-space: nowrap; }

/* --- Modul E: kode alarm per merk & buku kode --- */
.peringatan-manual {
  border: 1px solid var(--bahaya);
  border-left-width: 4px;
  border-radius: 10px;
  background: rgba(201, 67, 47, 0.07);
  padding: 12px 16px;
  margin: 14px 0 18px;
  font-size: 0.88rem;
  line-height: 1.6;
}

.merk-tab { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.merk-btn {
  border: 1px solid var(--garis);
  background: var(--bg-kartu);
  color: var(--teks);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
}
.merk-btn:hover { border-color: var(--aksen); }
.merk-btn.is-aktif { border-color: var(--aksen); background: var(--aksen-redup); font-weight: 600; }

.merk-dl { margin: 0; font-size: 0.88rem; }
.merk-dl dt {
  font-weight: 700;
  color: var(--aksen);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 12px;
}
.merk-dl dt:first-child { margin-top: 0; }
.merk-dl dd { margin: 3px 0 0; color: var(--teks-redup); }
.merk-dl code {
  background: var(--aksen-redup);
  color: var(--teks);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
}
.merk-tingkat { margin: 0; padding-left: 20px; }
.merk-tingkat li { margin-bottom: 2px; }
.merk-catatan {
  margin: 14px 0 0;
  padding: 10px 14px;
  background: var(--aksen-redup);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--teks-redup);
}

.sub-judul {
  margin: 26px 0 6px;
  font-size: 1.02rem;
  border-top: 1px solid var(--garis);
  padding-top: 18px;
}

.form-buku {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  align-items: end;
  margin: 14px 0 18px;
}
.form-buku label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--teks-redup);
  font-weight: 600;
  min-width: 0;
}
.form-buku input, .form-buku select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--garis);
  background: var(--bg-kartu);
  color: var(--teks);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.92rem;
  font-family: inherit;
}
.form-buku button { white-space: nowrap; }
.lbl-opsional { font-weight: 400; opacity: 0.75; }

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

/* label yang menyamar jadi tombol (pemicu input berkas tersembunyi) */
label.tombol { display: inline-flex; align-items: center; }

/* --- Modul F: atmosfer terkendali (CA) --- */

/* Peringatan O2 rendah. Sengaja paling mencolok di seluruh aplikasi: ini
   satu-satunya bagian yang salah pahamnya bisa membunuh pembacanya. */
.peringatan-maut {
  border: 2px solid var(--bahaya);
  border-radius: 12px;
  background: rgba(201, 67, 47, 0.1);
  padding: 14px 18px;
  margin: 18px 0;
  font-size: 0.92rem;
  line-height: 1.65;
}
.peringatan-maut b { color: var(--bahaya); }

.form-ca {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 14px 0;
}
.form-ca label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--teks-redup);
  font-weight: 600;
  min-width: 0;
}
.form-ca select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--garis);
  background: var(--bg-kartu);
  color: var(--teks);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.92rem;
  font-family: inherit;
}
.form-ca input[type="range"] { width: 100%; min-width: 0; accent-color: var(--aksen); }
.nilai-geser { color: var(--aksen); font-weight: 700; }

.kontrol-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--teks-redup);
  font-weight: 600;
}
.kontrol-label select {
  border: 1px solid var(--garis);
  background: var(--bg-kartu);
  color: var(--teks);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-family: inherit;
}

.gauge-satuan { font-size: 0.78rem; font-weight: 400; color: var(--teks-redup); }
.gauge-target { font-size: 0.72rem; color: var(--teks-redup); margin-top: 6px; }

.perangkat-ca {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--aksen-redup);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--teks-redup);
}
.perangkat-ca b { color: var(--teks); }

.gejala-baris { margin: 10px 0 0; }

.daftar-batas { margin: 0; padding-left: 20px; font-size: 0.9rem; }
.daftar-batas li { margin-bottom: 8px; color: var(--teks-redup); }
.daftar-batas b { color: var(--teks); }

/* Tabel target CA seluruhnya angka pendek — biarkan satu baris per komoditas
   supaya tetap terbaca sambil digulir mendatar di HP. */
#tabelCa td { white-space: nowrap; }

/* --- gerbang bayar & masa coba --- */
.pita:not(.is-tersembunyi) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--aksen-redup);
  color: var(--teks);
  padding: 10px 16px;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--garis);
}

.gerbang {
  max-width: 640px;
  margin: 24px auto 60px;
  padding: 0 20px;
}
.gerbang-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.gerbang-kepala h1 { font-size: 1.4rem; margin: 0; }
.gerbang-ringkas { color: var(--teks-redup); margin-bottom: 20px; }

.kartu-harga {
  background: var(--bg-panel);
  border: 1px solid var(--garis);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 16px;
  text-align: center;
}
.kartu-harga h2 { margin: 0 0 6px; font-size: 1.1rem; }
.harga-angka { font-size: 2.2rem; font-weight: 800; color: var(--aksen); margin: 4px 0; }
.harga-isi { text-align: left; margin: 14px 0 0; padding-left: 20px; color: var(--teks-redup); font-size: 0.9rem; }
.harga-isi li { margin-bottom: 4px; }

.gerbang-siapa, .gerbang-bayar { font-size: 0.92rem; color: var(--teks-redup); }

.gerbang-qris {
  margin: 16px 0;
  text-align: center;
}
.gerbang-qris img { max-width: 260px; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--garis); }
.gerbang-qris figcaption { font-size: 0.8rem; color: var(--teks-redup); margin-top: 8px; }

.klaim {
  background: var(--bg-panel);
  border: 1px solid var(--garis);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 16px 0;
}
.klaim-judul { cursor: pointer; font-weight: 700; }
.form-klaim { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.form-klaim label, .form-kode label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--teks-redup);
  font-weight: 600;
}
.form-klaim input, .form-kode input {
  border: 1px solid var(--garis);
  background: var(--bg-kartu);
  color: var(--teks);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.95rem;
  font-family: inherit;
}
.klaim-tunggu { margin-top: 14px; text-align: center; }
.klaim-nomor { font-size: 1.3rem; font-weight: 800; letter-spacing: 0.08em; color: var(--aksen); }

.form-kode { margin: 20px 0 4px; }
.form-kode .skema-aksi { align-items: stretch; }
.form-kode input { flex: 1; min-width: 0; }

/* --- Tahap 7: panel sinkron antar perangkat --- */
.sinkron-kotak {
  border: 1px solid var(--garis);
  border-radius: 12px;
  background: var(--bg-panel);
  padding: 14px 18px;
  margin-top: 16px;
}
.sinkron-kotak.is-nyala { border-color: var(--aksen); background: var(--aksen-redup); }

.sinkron-kepala {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sinkron-judul { font-weight: 700; font-size: 0.95rem; }

.sinkron-saklar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--teks-redup);
  cursor: pointer;
}
.sinkron-saklar input { width: 16px; height: 16px; accent-color: var(--aksen); cursor: pointer; }

.sinkron-kotak p { margin: 8px 0 0; }
.sinkron-aksi {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.sinkron-pesan { min-height: 0; }
.sinkron-pesan:empty { display: none; }

/* --- Tahap 8: fokus keyboard --- */
/*
   Sebelumnya aplikasi ini tidak punya gaya fokus sama sekali, jadi yang
   tampak cuma garis tipis bawaan peramban — nyaris tak terlihat di atas tab
   biru yang sedang aktif. Orang yang memakai keyboard (dan siapa pun yang
   memakai aplikasi ini di komputer kapal dengan mouse yang rusak) kehilangan
   jejak posisinya. :focus-visible dipakai supaya cincin ini hanya muncul
   untuk keyboard, bukan menempel di tiap tombol yang baru diklik.
*/
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--aksen);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Tab yang sedang aktif berlatar aksen, jadi cincin sewarna aksen hilang di
   atasnya — di sana cincinnya dibalik jadi terang. */
.tab-btn.is-aktif:focus-visible,
.mode-btn.is-aktif:focus-visible,
.submode-btn.is-aktif:focus-visible,
.tombol-aksen:focus-visible {
  outline-color: var(--teks);
}

/* Panel modul bisa difokus (role="tabpanel"), tapi ia bukan kontrol — cincin
   penuh di sekelilingnya cuma bising. */
[role="tabpanel"]:focus-visible {
  outline: 2px dashed var(--aksen);
  outline-offset: 4px;
}