/**
 * BATCH 7 (2026-09-23) — Alat terbuka untuk tamu.
 *
 * Sistem desain repo: Manrope, putih, #20231F, #60665F, oranye identitas
 * #F48C14 (teks di atas oranye = #20231F), latar #F7F6F2, garis #E6E4DC.
 * NOL warna biru, NOL emoji.
 *
 * Wajib responsif: di ponsel tidak boleh ada gulir mendatar, kelompok
 * komparator bisa dilipat, dan grafik ditumpuk di ATAS angka.
 */

:root {
  --al-bg: #F7F6F2;
  --al-surface: #FFFFFF;
  --al-text: #20231F;
  --al-muted: #60665F;
  --al-line: #E6E4DC;
  --al-orange: #F48C14;
  --al-orange-soft: #FDF2E5;
  --al-orange-dark: #AE6108;
  --al-ok-bg: #E6F3E9;   --al-ok-fg: #1F6B3A;
  --al-warn-bg: #FFF4DB; --al-warn-fg: #7A5608;
  --al-bad-bg: #FBEDEB;  --al-bad-fg: #96291F;
}

* { box-sizing: border-box; }

body.sr-alat-page {
  margin: 0;
  background: var(--al-bg);
  color: var(--al-text);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;
}

/* ------------------------------------------------------------------ atas */

.al-atas {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--al-line);
  backdrop-filter: blur(10px);
}
.al-atas-isi {
  max-width: 1120px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.al-logo img { display: block; height: 30px; width: auto; }
.al-nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
.al-nav a {
  padding: 7px 11px; border-radius: 9px; text-decoration: none;
  color: var(--al-text); font-size: 14px; font-weight: 700; white-space: nowrap;
}
.al-nav a:hover { background: var(--al-orange-soft); }
.al-nav a.is-aktif { background: var(--al-orange); color: var(--al-text); }
.al-atas-kanan { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.al-jatah {
  padding: 5px 11px; border-radius: 999px;
  background: var(--al-orange-soft); color: var(--al-orange-dark);
  font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
.al-jatah.is-habis { background: var(--al-bad-bg); color: var(--al-bad-fg); }

/* ----------------------------------------------------------------- umum */

.al-utama { max-width: 1120px; margin: 0 auto; padding: 22px 16px 56px; }

.al-pesan { max-width: 1120px; margin: 14px auto 0; padding: 12px 16px; border-radius: 10px; font-size: 14px; }
.al-pesan.is-info { background: var(--al-orange-soft); color: var(--al-orange-dark); }
.al-pesan.is-galat { background: var(--al-bad-bg); color: var(--al-bad-fg); }
/* PAKET NAVBAR-ALAT (2026-09-28): sisa jatah hitungan gratis pindah dari
   bar atas lama (.al-jatah) ke pesan di bawah navbar utama. */
.al-pesan.is-jatah-habis { background: var(--al-bad-bg); color: var(--al-bad-fg); }
.al-pesan a { color: inherit; font-weight: 800; }

.al-judul { margin: 0 0 18px; }
.al-judul h1 { margin: 0 0 6px; font-size: 27px; letter-spacing: -.02em; }
.al-judul p { margin: 0; color: var(--al-muted); max-width: 680px; }

.al-panel {
  margin: 0 0 18px; border: 1px solid var(--al-line); border-radius: 14px;
  background: var(--al-surface); overflow: hidden;
}
.al-panel > h2 {
  margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--al-line);
  font-size: 16px;
}
.al-panel > h2 small { display: block; margin-top: 3px; color: var(--al-muted); font-size: 12.5px; font-weight: 600; }
.al-panel-isi { padding: 18px; }
.al-panel-isi > :first-child { margin-top: 0; }
.al-panel-isi > :last-child { margin-bottom: 0; }

.al-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 10px 18px; border: 1px solid transparent;
  border-radius: 10px; background: var(--al-orange); color: var(--al-text);
  font: inherit; font-size: 14.5px; font-weight: 800; text-decoration: none; cursor: pointer;
}
.al-btn:hover { background: #E07F0B; }
.al-btn.is-kedua { background: var(--al-surface); border-color: var(--al-line); font-weight: 700; }
.al-btn.is-kedua:hover { border-color: var(--al-orange); background: var(--al-surface); }
.al-btn.is-kecil { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.al-btn:disabled { opacity: .5; cursor: not-allowed; }

.al-kolom { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.al-kolom .al-penuh { grid-column: 1 / -1; }

.al-isian label { display: block; margin: 0 0 6px; font-size: 13.5px; font-weight: 700; }
.al-isian small { display: block; margin-top: 5px; color: var(--al-muted); font-size: 12.5px; }
.al-isian input, .al-isian select {
  width: 100%; min-height: 46px; padding: 11px 13px;
  border: 1px solid var(--al-line); border-radius: 10px;
  background: var(--al-surface); color: var(--al-text); font: inherit; font-size: 15px;
}
.al-isian input:focus, .al-isian select:focus {
  outline: none; border-color: var(--al-orange); box-shadow: 0 0 0 3px rgba(244,140,20,.18);
}

.al-angka { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 12px; }
.al-angka > div { padding: 14px 16px; border: 1px solid var(--al-line); border-radius: 12px; background: var(--al-bg); }
.al-angka strong { display: block; font-size: 22px; letter-spacing: -.02em; }
.al-angka span { display: block; margin-top: 4px; color: var(--al-muted); font-size: 12.5px; font-weight: 600; }

.al-catatan { padding: 13px 15px; border-radius: 10px; background: var(--al-orange-soft); color: #7A4A05; font-size: 13.5px; }
.al-kosong { padding: 22px; text-align: center; color: var(--al-muted); }

/* ---------------------------------------------------------------- tabel */

.al-tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.al-tabel { width: 100%; border-collapse: collapse; min-width: 560px; }
.al-tabel th, .al-tabel td {
  padding: 11px 14px; border-bottom: 1px solid var(--al-line);
  text-align: left; vertical-align: top; font-size: 13.5px;
}
.al-tabel th { background: var(--al-bg); color: var(--al-muted); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.al-tabel tr:last-child td { border-bottom: 0; }
.al-angka-kanan { text-align: right; font-variant-numeric: tabular-nums; }
.al-belum { color: var(--al-muted); font-style: normal; }

/* batang penilaian */
.al-batang { display: block; height: 6px; margin-top: 5px; border-radius: 99px; background: var(--al-line); overflow: hidden; }
.al-batang i { display: block; height: 100%; background: var(--al-orange); }
.al-unggul { color: var(--al-ok-fg); font-weight: 800; }

.al-lencana { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.al-lencana.is-ok { background: var(--al-ok-bg); color: var(--al-ok-fg); }
.al-lencana.is-warn { background: var(--al-warn-bg); color: var(--al-warn-fg); }
.al-lencana.is-bad { background: var(--al-bad-bg); color: var(--al-bad-fg); }

/* ------------------------------------------------------- kelompok lipat */

.al-lipat { border: 1px solid var(--al-line); border-radius: 12px; margin: 0 0 12px; background: var(--al-surface); overflow: hidden; }
.al-lipat > summary {
  list-style: none; cursor: pointer; padding: 13px 16px; font-weight: 800; font-size: 14.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.al-lipat > summary::-webkit-details-marker { display: none; }
.al-lipat > summary::after { content: "+"; color: var(--al-orange-dark); font-size: 17px; }
.al-lipat[open] > summary::after { content: "\2212"; }
.al-lipat > summary small { color: var(--al-muted); font-size: 12px; font-weight: 600; }
.al-lipat-isi { border-top: 1px solid var(--al-line); }

/* ---------------------------------------------------------------- denah */

.al-denah { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 14px; }
.al-denah figure { margin: 0; padding: 14px; border: 1px solid var(--al-line); border-radius: 12px; background: var(--al-bg); }
.al-denah figcaption { margin-bottom: 9px; font-size: 13.5px; font-weight: 800; }
.al-denah svg { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------- grafik */

.al-grafik { margin: 0 0 14px; }
.al-grafik svg { display: block; width: 100%; height: auto; }
.al-grafik figcaption { margin-top: 8px; color: var(--al-muted); font-size: 12.5px; }

/* -------------------------------------------------------- panel daftar */

.al-tutup { position: relative; }
.al-tutup .al-buram { filter: blur(5px); opacity: .45; pointer-events: none; user-select: none; }
.al-daftar {
  margin: 0 0 18px; padding: 22px; border: 1px solid var(--al-orange);
  border-radius: 14px; background: var(--al-orange-soft);
}
.al-daftar h2 { margin: 0 0 6px; font-size: 20px; }
.al-daftar p { margin: 0 0 16px; color: #7A4A05; max-width: 560px; }
.al-daftar form { display: grid; gap: 12px; max-width: 420px; }
.al-daftar .al-isian input { background: var(--al-surface); }
.al-daftar-masuk { margin-top: 14px; font-size: 13.5px; }
.al-daftar-masuk a { color: var(--al-orange-dark); font-weight: 800; }

/* -------------------------------------------------------------- cetak */

@media print {
  .al-atas, .sr-navbar, .al-bawah, .al-daftar, .al-cetak-sembunyi { display: none !important; }
  body.sr-alat-page { background: #fff; font-size: 12px; }
  .al-utama { max-width: none; padding: 0; }
  .al-panel { break-inside: avoid; border-color: #999; }
  .al-lipat[open] > summary::after, .al-lipat > summary::after { content: ""; }
  .al-lipat > .al-lipat-isi { display: block !important; }
  a[href]::after { content: ""; }
}

/* ------------------------------------------------------------ bawah */

.al-bawah { max-width: 1120px; margin: 0 auto; padding: 22px 16px 40px; color: var(--al-muted); font-size: 13px; }
.al-bawah p { margin: 0 0 8px; max-width: 680px; }
.al-bawah-tautan { display: flex; gap: 14px; flex-wrap: wrap; }
.al-bawah-tautan a { color: var(--al-muted); }

/* ----------------------------------------------------------- responsif */

@media (max-width: 860px) {
  .al-kolom { grid-template-columns: 1fr; }
  .al-utama { padding: 16px 12px 48px; }
  .al-atas-isi { padding: 10px 12px; gap: 10px; }
  .al-nav { order: 3; width: 100%; overflow-x: auto; }
  .al-judul h1 { font-size: 22px; }
  /* Grafik di ATAS angka, bertumpuk — tidak berdampingan. */
  .al-tumpuk { display: block; }
  .al-tumpuk > * + * { margin-top: 14px; }
  /* Tidak boleh ada gulir mendatar di halaman; tabel yang menggulir sendiri. */
  .al-tabel { min-width: 0; }
  .al-tabel th, .al-tabel td { padding: 9px 10px; font-size: 13px; }
}

@media (min-width: 861px) {
  .al-tumpuk { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
}

/* ===================================================================
   TAHAP 2 / ITEM 2 (2026-09-24) — membandingkan 2 sampai 4 produk.

   Tiga hal yang diperbaiki:
   1. Di HP, tabel digeser ke samping tetapi kolom "Parameter" TETAP
      terlihat, supaya pembaca tidak kehilangan konteks barisnya.
   2. Sorotan menandai PERBEDAAN, bukan pemenang. Alat ini membandingkan,
      bukan memilihkan.
   3. Saklar "hanya perbedaan" bekerja TANPA JavaScript sama sekali —
      halaman /alat wajib nol skrip di dalam HTML supaya tetap lolos
      Content-Security-Policy ketat.
   =================================================================== */

/* --- kolom parameter tetap terlihat saat digeser --------------------- */

.al-tabel-bungkus {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.al-tabel-banding th[scope="row"],
.al-tabel-banding thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  font-weight: var(--sr-font-weight-semibold);
  background: var(--sr-color-bg);
  /* Garis pemisah supaya batas kolom tetap jelas saat isinya lewat di
     belakangnya. */
  box-shadow: 1px 0 0 var(--sr-color-border);
}

.al-tabel-banding thead th:first-child {
  z-index: 2;
  background: var(--sr-color-bg-secondary);
}

.al-tabel-banding td,
.al-tabel-banding th {
  white-space: nowrap;
}

/* Kolom produk dibagi rata, jadi 2, 3, dan 4 produk sama rapinya. */
.al-tabel-banding {
  width: 100%;
  table-layout: auto;
}

/* --- sorotan perbedaan ---------------------------------------------- */

.al-tabel-banding tr.is-beda th[scope="row"] {
  border-left: 3px solid var(--sr-color-orange);
  padding-left: calc(var(--sr-space-3) - 3px);
}

.al-tabel-banding tr[data-sama="1"] th[scope="row"] {
  color: var(--sr-color-text-secondary);
}

.al-satuan {
  color: var(--sr-color-text-secondary);
  font-weight: var(--sr-font-weight-regular);
}

.al-satuan.is-blok {
  display: block;
}

/* --- saklar "hanya perbedaan", murni CSS ---------------------------- */

.al-beda-kendali {
  display: flex;
  align-items: center;
  gap: var(--sr-space-2);
  margin: 0 0 var(--sr-space-4);
  font-size: var(--sr-text-sm);
  font-weight: var(--sr-font-weight-semibold);
}

.al-beda-kendali input {
  width: 20px;
  height: 20px;
  accent-color: var(--sr-color-orange);
}

.al-beda-kendali small {
  display: block;
  font-weight: var(--sr-font-weight-regular);
  color: var(--sr-color-text-secondary);
}

/* Saat saklar dinyalakan, baris yang nilainya sama di semua produk
   disembunyikan di SELURUH kelompok sekaligus. */
.al-hasil:has(.al-beda-saklar:checked) .al-tabel-banding tr[data-sama="1"] {
  display: none;
}

/* Kalau semua barisnya sama, kelompok itu jadi kosong. Beri keterangan
   supaya tidak terlihat seperti tabel yang rusak. */
.al-hasil:has(.al-beda-saklar:checked) .al-tabel-banding tbody:after {
  content: "";
}

@media (max-width: 560px) {
  .al-tabel-banding th[scope="row"] {
    max-width: 11rem;
    white-space: normal;
  }
}

.al-kelengkapan { margin-top: var(--sr-space-2); }

/* TAHAP 2 / ITEM 3 (2026-09-24) — jejak asal data teknis. */
.al-jejak { list-style: none; margin: 0 0 var(--sr-space-4); padding: 0; display: grid; gap: var(--sr-space-3); }
.al-jejak > li { padding: var(--sr-space-3); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); }
.al-jejak > li > strong { display: block; margin-bottom: var(--sr-space-1); }
.al-jejak-status { display: inline-block; padding: 2px 10px; border-radius: var(--sr-radius-pill); font-size: var(--sr-text-xs); font-weight: 700; }
.al-jejak-status.is-belum { background: var(--sr-color-warning-tint); color: var(--sr-color-warning); }
.al-jejak-status.is-diperiksa { background: var(--sr-color-success-tint); color: var(--sr-color-success); }
.al-jejak-status.is-konflik { background: var(--sr-color-error-tint); color: var(--sr-color-error); }
.al-jejak-rinci { display: block; margin-top: var(--sr-space-2); font-size: var(--sr-text-sm); color: var(--sr-color-text-secondary); }
.al-jejak-konflik { margin: var(--sr-space-2) 0 0; padding-left: var(--sr-space-5); font-size: var(--sr-text-sm); color: var(--sr-color-text-secondary); }
.al-galat-referensi { margin: 0; padding: var(--sr-space-3) var(--sr-space-4); border-radius: var(--sr-radius-md); background: var(--sr-color-error-tint); color: var(--sr-color-error); line-height: var(--sr-line-height-body); }