/* ==========================================================================
   SOLARAKYAT — ds-komponen.css
   Tahap 2: lapisan komponen. Butuh ds-token.css lebih dulu.

   Patokan visual: solarakyat-konsol.html, solarakyat-halaman.html,
   solarakyat-halaman2.html, solarakyat-customer.html, solarakyat-alat.html.

   Aturan berkas ini:
   - Awalan kelas SELALU `ds-`. Kelas `sr-*` lama punya arti berbeda dan
     tidak boleh ditimpa.
   - Semua warna/jarak/radius lewat var(--ds-*). Tidak ada hex harfiah.
   - Target sentuh minimum 44px untuk apa pun yang bisa diklik.
   - Tanpa skrip: keadaan dinyatakan lewat atribut ARIA/HTML
     ([aria-pressed], [aria-current], [disabled], [aria-invalid]), bukan JS.
   - Bekerja di 360, 390, 768, 1280, 1440 px.
   ========================================================================== */

/* ---------- Dasar ---------- */
.ds-scope {
  font-family: var(--ds-font);
  color: var(--ds-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.ds-scope *,
.ds-scope *::before,
.ds-scope *::after { box-sizing: border-box; }

/* Lebar baca halaman */
.ds-wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: max(var(--ds-sp-4), env(safe-area-inset-left, 0px));
}
.ds-inner { max-width: 1152px; margin-inline: auto; }

/* ==========================================================================
   LABEL KECIL BERJARAK HURUF (eyebrow)
   ========================================================================== */
.ds-label {
  font-size: var(--ds-t-12);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: var(--ds-w-head);
  color: var(--ds-sun-deep);
}
.ds-label-netral {
  font-size: var(--ds-t-11);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: var(--ds-w-head);
  color: var(--ds-ink-3);
}

/* ==========================================================================
   JUDUL HALAMAN + ANAK JUDUL
   ========================================================================== */
.ds-judul { margin-block: var(--ds-sp-2) 0; }
.ds-judul h1,
.ds-judul .ds-h1 {
  margin: 0;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: var(--ds-w-head);
  letter-spacing: -.03em;
  line-height: 1.12;
  text-wrap: balance;
}
.ds-judul .ds-anak {
  margin: var(--ds-sp-3) 0 0;
  color: var(--ds-ink-2);
  font-size: var(--ds-t-15);
  max-width: 68ch;
}

/* Judul besar untuk bagian bercerita */
.ds-h2 {
  margin: 0;
  font-size: var(--ds-t-46);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-tightest);
  line-height: 1.04;
  text-wrap: balance;
}
.ds-h3 {
  margin: 0;
  font-size: var(--ds-t-30);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-tighter);
  line-height: 1.12;
}

/* ==========================================================================
   KEPALA BAGIAN BERGARIS ATAS
   ========================================================================== */
.ds-kepala {
  border-top: 1px solid var(--ds-line);
  padding-top: var(--ds-sp-6);
  margin-top: var(--ds-sp-7);
}
.ds-kepala > h2,
.ds-kepala > .ds-kepala-judul {
  margin: var(--ds-sp-2) 0 0;
  font-size: var(--ds-t-24);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-tight);
}
.ds-kepala > p {
  margin: var(--ds-sp-2) 0 0;
  color: var(--ds-ink-2);
  font-size: var(--ds-t-14);
  max-width: 62ch;
}

/* ==========================================================================
   REMAH NAVIGASI
   ========================================================================== */
.ds-remah {
  font-size: var(--ds-t-13);
  color: var(--ds-ink-3);
  padding-block: var(--ds-sp-6) 0;
  margin: 0;
}
.ds-remah a { color: inherit; text-decoration: none; }
.ds-remah a:hover { text-decoration: underline; }
.ds-remah b,
.ds-remah [aria-current="page"] { color: var(--ds-ink); font-weight: var(--ds-w-med); }
.ds-remah-pisah { padding-inline: var(--ds-sp-1); }

/* ==========================================================================
   TOMBOL
   Dipakai di <a>, <button>, dan <span> (untuk contoh non-interaktif).
   ========================================================================== */
.ds-tombol {
  /* Target sentuh 44px dijamin lewat min-height, bukan padding saja. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sp-2);
  min-height: var(--ds-touch);
  padding: var(--ds-sp-3) var(--ds-sp-6);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: var(--ds-paper);
  color: var(--ds-ink);
  font-family: inherit;
  font-size: var(--ds-t-15);
  font-weight: var(--ds-w-head);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.ds-tombol:hover { background: var(--ds-ground); }
.ds-tombol:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }

/* Utama — satu per layar. Teks gelap di atas oranye (kontras AA). */
.ds-tombol-utama {
  background: var(--ds-sun);
  border-color: var(--ds-sun);
  color: var(--ds-ink);
}
/* Teks TETAP --ds-ink saat hover. Putih di atas --ds-sun-deep hanya
   3,68:1 (gagal AA 4,5:1); --ds-ink di atas --ds-sun-deep 5,01:1. */
.ds-tombol-utama:hover { background: var(--ds-sun-deep); border-color: var(--ds-sun-deep); color: var(--ds-ink); }

/* Sekunder = gaya dasar; kelas ini ada supaya maksudnya tersurat. */
.ds-tombol-sekunder { background: var(--ds-paper); }

/* Kecil — tetap 44px tinggi sentuh, hanya teks dan padding mengecil. */
.ds-tombol-kecil {
  font-size: var(--ds-t-13);
  padding: var(--ds-sp-2) var(--ds-sp-4);
}

/* Penuh selebar induk */
.ds-tombol-penuh { display: flex; width: 100%; }

.ds-tombol[disabled],
.ds-tombol[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  background: var(--ds-ground);
  border-color: var(--ds-line);
  color: var(--ds-ink-3);
}

/* ==========================================================================
   PIL FILTER / CHIP
   ========================================================================== */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-2);
  min-height: var(--ds-touch);
  padding: var(--ds-sp-2) var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: var(--ds-paper);
  color: var(--ds-ink-2);
  font-size: var(--ds-t-13);
  font-weight: var(--ds-w-med);
  text-decoration: none;
  cursor: pointer;
}
.ds-chip:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }
.ds-chip[aria-pressed="true"],
.ds-chip[aria-current="true"],
.ds-chip[aria-current="page"] {
  background: var(--ds-sun-soft);
  border-color: var(--ds-sun-line);
  color: var(--ds-sun-deep);
  font-weight: var(--ds-w-head);
}

/* ==========================================================================
   KARTU
   ========================================================================== */
.ds-kartu {
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-4);
  padding: var(--ds-sp-5);
}
.ds-kartu-rapat { padding: var(--ds-sp-4); border-radius: var(--ds-r-3); }
.ds-kartu-sorot {
  background: var(--ds-sun-soft);
  border-color: var(--ds-sun-line);
  border-radius: var(--ds-r-5);
  padding: var(--ds-sp-6);
}
.ds-kartu-gelap {
  background: var(--ds-night);
  border-color: var(--ds-night);
  color: var(--ds-night-fg);
}
.ds-kartu-gelap .ds-label-netral { color: var(--ds-night-fg-2); }
.ds-kartu-angkat { box-shadow: var(--ds-shadow-1); }

.ds-kartu-judul {
  margin: 0;
  font-size: var(--ds-t-17);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-snug);
}
.ds-kartu-teks {
  margin: var(--ds-sp-2) 0 0;
  color: var(--ds-ink-2);
  font-size: var(--ds-t-14);
}

/* Angka besar di dalam kartu (KPI) */
.ds-angka {
  font-size: var(--ds-t-34);
  font-weight: var(--ds-w-head);
  letter-spacing: -.04em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  margin-top: var(--ds-sp-2);
}
.ds-angka-aksen { color: var(--ds-sun-deep); }

/* ==========================================================================
   LENCANA STATUS
   ========================================================================== */
.ds-lencana {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-1);
  padding: 2px var(--ds-sp-2);
  border-radius: var(--ds-r-pill);
  font-size: var(--ds-t-11);
  font-weight: var(--ds-w-head);
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--ds-ground);
  color: var(--ds-ink-2);
}
.ds-lencana-ok   { background: var(--ds-ok-bg);   color: var(--ds-ok); }
.ds-lencana-warn { background: var(--ds-warn-bg); color: var(--ds-warn); }
.ds-lencana-bad  { background: var(--ds-bad-bg);  color: var(--ds-bad); }
.ds-lencana-netral { background: var(--ds-ground); color: var(--ds-ink-2); }
/* "perlu akun" pada daftar alat terkunci */
.ds-lencana-kunci { background: var(--ds-sun-soft); color: var(--ds-sun-deep); }

/* ==========================================================================
   ISIAN FORMULIR
   ========================================================================== */
.ds-isian { display: block; margin-bottom: var(--ds-sp-5); }
.ds-isian-label {
  display: block;
  font-size: var(--ds-t-13);
  font-weight: var(--ds-w-head);
  color: var(--ds-ink);
  margin-bottom: var(--ds-sp-2);
}
.ds-isian-wajib { color: var(--ds-bad); }

.ds-isian input,
.ds-isian select,
.ds-isian textarea,
.ds-input {
  display: block;
  width: 100%;
  min-height: var(--ds-touch);
  padding: var(--ds-sp-3) var(--ds-sp-4);
  border: 1px solid var(--ds-ink-3);
  border-radius: var(--ds-r-2);
  background: var(--ds-paper);
  color: var(--ds-ink);
  font-family: inherit;
  font-size: var(--ds-t-15);
  line-height: 1.4;
}
.ds-isian textarea, textarea.ds-input { min-height: 96px; resize: vertical; }
.ds-isian input:focus-visible,
.ds-isian select:focus-visible,
.ds-isian textarea:focus-visible,
.ds-input:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 1px; border-color: var(--ds-sun-deep); }

/* Angka selalu tabular */
.ds-isian input[type="number"],
.ds-input[type="number"] { font-variant-numeric: tabular-nums; }

.ds-isian-bantuan {
  display: block;
  margin-top: var(--ds-sp-2);
  font-size: var(--ds-t-13);
  color: var(--ds-ink-2);
}

/* Keadaan galat — ditandai aria-invalid, bukan kelas saja, supaya
   pembaca layar dan tampilan selalu sepakat. */
.ds-isian input[aria-invalid="true"],
.ds-isian select[aria-invalid="true"],
.ds-isian textarea[aria-invalid="true"],
.ds-input[aria-invalid="true"] {
  border-color: var(--ds-bad);
  background: var(--ds-bad-bg);
}
.ds-isian-galat {
  display: block;
  margin-top: var(--ds-sp-2);
  font-size: var(--ds-t-13);
  font-weight: var(--ds-w-med);
  color: var(--ds-bad);
}

/* ==========================================================================
   SEGMENTED CONTROL
   ========================================================================== */
/* TAHAP 3A (T1): padding wadah DINOLKAN. Sebelumnya wadah diberi padding
   4px dan tombolnya dikecilkan jadi 44-8=36px supaya wadahnya pas 44px.
   Akibatnya yang 44px adalah WADAHNYA, sedangkan yang benar-benar disentuh
   pengguna -- tombolnya -- hanya 36px. Sekarang tombolnya yang 44px penuh. */
.ds-segmen {
  display: inline-grid;
  grid-auto-flow: column;
  gap: var(--ds-sp-1);
  padding: 0;
  background: var(--ds-ground);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
}
.ds-segmen > button,
.ds-segmen > a {
  min-height: var(--ds-touch);
  padding: var(--ds-sp-2) var(--ds-sp-4);
  border: 0;
  border-radius: var(--ds-r-1);
  background: transparent;
  color: var(--ds-ink-2);
  font-family: inherit;
  font-size: var(--ds-t-13);
  font-weight: var(--ds-w-head);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.ds-segmen > button[aria-pressed="true"],
.ds-segmen > a[aria-current="true"],
.ds-segmen > a[aria-current="page"] {
  background: var(--ds-sun);
  color: var(--ds-ink);
}
.ds-segmen > button:focus-visible,
.ds-segmen > a:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }

/* ==========================================================================
   TABEL DATA
   ========================================================================== */
.ds-tabel-gulir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ds-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-t-14);
  font-variant-numeric: tabular-nums;
}
.ds-tabel th {
  text-align: left;
  font-size: var(--ds-t-11);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: var(--ds-w-head);
  color: var(--ds-ink-3);
  padding: var(--ds-sp-3) var(--ds-sp-3);
  border-bottom: 1px solid var(--ds-line);
  white-space: nowrap;
}
.ds-tabel td {
  padding: var(--ds-sp-3) var(--ds-sp-3);
  border-bottom: 1px solid var(--ds-line);
  color: var(--ds-ink);
  vertical-align: top;
}
.ds-tabel tbody tr:hover { background: var(--ds-ground); }
/* Kolom angka dirapatkan ke kanan */
.ds-tabel .ds-kanan, .ds-tabel th.ds-kanan { text-align: right; }
.ds-tabel caption {
  caption-side: top;
  text-align: left;
  font-size: var(--ds-t-13);
  color: var(--ds-ink-2);
  padding-bottom: var(--ds-sp-3);
}

/* ==========================================================================
   BARIS DAFTAR
   ========================================================================== */
.ds-daftar { border-top: 1px solid var(--ds-line); }
.ds-baris {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-4);
  min-height: var(--ds-touch);
  padding-block: var(--ds-sp-3);
  border-bottom: 1px solid var(--ds-line);
  text-decoration: none;
  color: inherit;
}
.ds-baris-isi { min-width: 0; flex: 1; }
.ds-baris-judul {
  font-size: var(--ds-t-15);
  font-weight: var(--ds-w-med);
  line-height: 1.35;
}
.ds-baris-meta {
  font-size: var(--ds-t-13);
  color: var(--ds-ink-2);
  margin-top: 2px;
}
.ds-baris-kanan { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }
a.ds-baris:hover { background: var(--ds-ground); }

/* ==========================================================================
   PANEL ASUMSI
   ========================================================================== */
.ds-asumsi {
  margin-top: var(--ds-sp-5);
  padding-top: var(--ds-sp-4);
  border-top: 1px solid var(--ds-line);
  font-size: var(--ds-t-12);
  line-height: 1.6;
  color: var(--ds-ink-2);
}
.ds-asumsi b { color: var(--ds-ink); font-weight: var(--ds-w-head); }
.ds-asumsi-daftar { margin: var(--ds-sp-2) 0 0; padding-left: var(--ds-sp-4); }
.ds-kartu-gelap .ds-asumsi { border-top-color: var(--ds-night-fg-2); color: var(--ds-night-fg-2); }
.ds-kartu-gelap .ds-asumsi b { color: var(--ds-night-fg); }

/* ==========================================================================
   KOTAK PERINGATAN
   ========================================================================== */
.ds-peringatan {
  display: flex;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-3) var(--ds-sp-4);
  border: 1px solid var(--ds-sun-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-sun-soft);
  color: var(--ds-ink);
  font-size: var(--ds-t-14);
  line-height: 1.5;
}
.ds-peringatan-judul {
  display: block;
  font-weight: var(--ds-w-head);
  margin-bottom: 2px;
}
.ds-peringatan-ok   { background: var(--ds-ok-bg);   border-color: var(--ds-ok);   }
.ds-peringatan-warn { background: var(--ds-warn-bg); border-color: var(--ds-warn); }
.ds-peringatan-bad  { background: var(--ds-bad-bg);  border-color: var(--ds-bad);  }
.ds-peringatan-ok .ds-peringatan-judul   { color: var(--ds-ok); }
.ds-peringatan-warn .ds-peringatan-judul { color: var(--ds-warn); }
.ds-peringatan-bad .ds-peringatan-judul  { color: var(--ds-bad); }

/* ==========================================================================
   KEADAAN KOSONG
   ========================================================================== */
.ds-kosong {
  text-align: center;
  padding: var(--ds-sp-9) var(--ds-sp-5);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-4);
  background: var(--ds-ground);
}
.ds-kosong-judul {
  margin: 0;
  font-size: var(--ds-t-19);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-tight);
}
.ds-kosong-teks {
  margin: var(--ds-sp-3) auto 0;
  max-width: 48ch;
  color: var(--ds-ink-2);
  font-size: var(--ds-t-14);
}
.ds-kosong-aksi { margin-top: var(--ds-sp-5); }

/* ==========================================================================
   HEADER PIL MENGAMBANG
   ========================================================================== */
.ds-header-bungkus {
  position: sticky;
  top: var(--ds-sp-3);
  z-index: 30;
  padding-inline: var(--ds-sp-4);
  margin-top: var(--ds-sp-3);
}
.ds-header {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-6);
  max-width: 1152px;
  margin-inline: auto;
  padding: var(--ds-sp-2) var(--ds-sp-3) var(--ds-sp-2) var(--ds-sp-5);
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  box-shadow: var(--ds-shadow-1);
}
.ds-header-merek { margin-right: auto; display: inline-flex; align-items: center; }
.ds-header nav { display: flex; align-items: center; gap: var(--ds-sp-5); }
.ds-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-touch);
  font-size: var(--ds-t-14);
  font-weight: var(--ds-w-med);
  color: var(--ds-ink-2);
  text-decoration: none;
}
.ds-header nav a:hover { color: var(--ds-ink); }
.ds-header nav a[aria-current="page"] { color: var(--ds-ink); font-weight: var(--ds-w-head); }

/* ==========================================================================
   REL NAVIGASI KIRI
   ========================================================================== */
.ds-rel {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-1);
}
.ds-rel-kelompok {
  margin-top: var(--ds-sp-5);
  padding-bottom: var(--ds-sp-2);
  font-size: var(--ds-t-11);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: var(--ds-w-head);
  color: var(--ds-ink-3);
}
.ds-rel a {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-3);
  min-height: var(--ds-touch);
  padding: var(--ds-sp-2) var(--ds-sp-3);
  border-radius: var(--ds-r-2);
  font-size: var(--ds-t-14);
  font-weight: var(--ds-w-med);
  color: var(--ds-ink-2);
  text-decoration: none;
}
.ds-rel a:hover { background: var(--ds-ground); color: var(--ds-ink); }
.ds-rel a[aria-current="page"] {
  background: var(--ds-sun-soft);
  color: var(--ds-sun-deep);
  font-weight: var(--ds-w-head);
}
.ds-rel a:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ds-footer {
  margin-top: var(--ds-sp-10);
  border-top: 1px solid var(--ds-line);
  padding-block: var(--ds-sp-7) var(--ds-sp-9);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ds-sp-5);
  font-size: var(--ds-t-13);
  color: var(--ds-ink-3);
}
.ds-footer a { color: var(--ds-ink-2); text-decoration: none; }
.ds-footer a:hover { text-decoration: underline; }
.ds-footer nav { display: flex; flex-wrap: wrap; gap: var(--ds-sp-5); }

/* ==========================================================================
   LOGO
   ========================================================================== */
.ds-logo { display: inline-block; }
.ds-logo img { display: block; height: auto; width: auto; }
/* Varian latar gelap: logo gelap dibalik warnanya sampai berkas terang ada. */
.ds-logo-terang img { filter: brightness(0) invert(1); }

/* ==========================================================================
   SUSUNAN BANTU
   ========================================================================== */
.ds-grid { display: grid; gap: var(--ds-sp-4); }
.ds-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-bagian { padding-block: var(--ds-sp-9) 0; }

/* Hanya untuk pembaca layar */
.ds-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   LAYAR SEMPIT
   768px: tiga/empat kolom menjadi dua. 620px: semuanya satu kolom.
   Diperiksa pada 360, 390, 768, 1280, 1440.
   ========================================================================== */
@media (max-width: 768px) {
  .ds-grid-3, .ds-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-h2 { font-size: var(--ds-t-34); letter-spacing: var(--ds-ls-tighter); }
  .ds-h3 { font-size: var(--ds-t-24); }
}

@media (max-width: 620px) {
  .ds-grid-2, .ds-grid-3, .ds-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .ds-bagian { padding-block: var(--ds-sp-7) 0; }
  .ds-footer { flex-direction: column; gap: var(--ds-sp-4); padding-block: var(--ds-sp-6) var(--ds-sp-7); }

  /* Header pil: merek tetap, menu turun dan boleh digulir mendatar. */
  .ds-header {
    flex-wrap: wrap;
    gap: var(--ds-sp-3);
    border-radius: var(--ds-r-5);
    padding: var(--ds-sp-3) var(--ds-sp-4);
  }
  .ds-header nav {
    order: 3;
    width: 100%;
    gap: var(--ds-sp-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Segmen jadi selebar induk supaya mudah disentuh. */
  .ds-segmen { display: grid; grid-auto-flow: row; width: 100%; }

  /* Baris daftar: nilai pindah ke bawah, tidak berdesakan. */
  .ds-baris { align-items: flex-start; flex-wrap: wrap; gap: var(--ds-sp-2); }
  .ds-baris-kanan { margin-left: 0; width: 100%; }

  .ds-kartu-sorot { padding: var(--ds-sp-5); }
  .ds-kosong { padding: var(--ds-sp-7) var(--ds-sp-4); }
}

/* Hormati permintaan kurangi gerak. */
@media (prefers-reduced-motion: reduce) {
  .ds-tombol { transition: none; }
}

/* ==========================================================================
   KONSOL HITUNG (Tahap 3A)
   Panel gelap berisi kendali di kiri dan keluaran hidup di kanan.
   Dipakai di beranda; polanya sama untuk alat lain yang butuh konsol.
   ========================================================================== */
.ds-konsol {
  position: relative;
  overflow: hidden;
  background: var(--ds-night);
  color: var(--ds-night-fg);
  border-radius: var(--ds-r-5);
  padding: var(--ds-sp-7) var(--ds-sp-7) var(--ds-sp-6);
  margin-top: var(--ds-sp-6);
}
.ds-konsol > * { position: relative; }

.ds-konsol-atas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-sp-7);
  flex-wrap: wrap;
}
.ds-konsol-judul {
  margin: 0;
  font-size: var(--ds-t-46);
  line-height: 1.04;
  letter-spacing: var(--ds-ls-tightest);
  font-weight: var(--ds-w-head);
  max-width: 16ch;
  text-wrap: balance;
}
.ds-konsol-judul em { font-style: normal; color: var(--ds-sun); }
.ds-konsol-lead {
  margin: 0;
  color: var(--ds-night-fg-2);
  font-size: var(--ds-t-15);
  max-width: 44ch;
}

.ds-konsol-grid {
  display: grid;
  grid-template-columns: 398px minmax(0, 1fr);
  gap: var(--ds-sp-7);
  margin-top: var(--ds-sp-6);
  align-items: start;
}

/* Panel kendali: kaca tipis di atas latar gelap. */
.ds-konsol-panel {
  background: rgba(var(--ds-paper-rgb), .055);
  border: 1px solid rgba(var(--ds-paper-rgb), .12);
  border-radius: var(--ds-r-4);
  padding: var(--ds-sp-5);
}
.ds-konsol-keluaran { display: grid; gap: var(--ds-sp-4); }

/* ---------- satu kendali ---------- */
.ds-kendali + .ds-kendali { margin-top: var(--ds-sp-5); }
.ds-kendali-atas {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ds-sp-2);
}
.ds-kendali label,
.ds-kendali-label {
  font-size: var(--ds-t-12);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ds-night-fg-2);
  font-weight: var(--ds-w-head);
}
.ds-kendali-nilai {
  font-size: var(--ds-t-19);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-snug);
}
.ds-kendali-opsional {
  margin-left: var(--ds-sp-2);
  padding: 1px var(--ds-sp-2);
  border-radius: var(--ds-r-pill);
  background: rgba(var(--ds-paper-rgb), .12);
  color: var(--ds-night-fg);
  font-size: var(--ds-t-11);
  letter-spacing: .04em;
  text-transform: none;
}
.ds-kendali .ds-isian-bantuan { color: var(--ds-night-fg-2); }
.ds-kendali .ds-isian-label { color: var(--ds-night-fg-2); font-size: var(--ds-t-12); }

.ds-kendali-pasangan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-sp-3);
  margin-top: var(--ds-sp-3);
}

/* Isian di dalam panel gelap */
.ds-konsol-panel .ds-input {
  background: rgba(var(--ds-paper-rgb), .06);
  border-color: rgba(var(--ds-paper-rgb), .22);
  color: var(--ds-night-fg);
}
.ds-konsol-panel .ds-input::placeholder { color: var(--ds-night-fg-2); }
.ds-konsol-panel .ds-input:focus-visible {
  outline: 2px solid var(--ds-sun);
  border-color: var(--ds-sun);
}

/* ---------- slider: target sentuh 44px lewat padding transparan ---------- */
.ds-kendali input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--ds-touch);
  margin-top: var(--ds-sp-2);
  background: transparent;
  cursor: pointer;
}
.ds-kendali input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 3px;
  background: rgba(var(--ds-paper-rgb), .18);
}
.ds-kendali input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 3px;
  background: rgba(var(--ds-paper-rgb), .18);
}
.ds-kendali input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--ds-sun);
  border: 3px solid var(--ds-night);
  box-shadow: 0 0 0 1px var(--ds-sun);
}
.ds-kendali input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ds-sun);
  border: 3px solid var(--ds-night);
}
.ds-kendali input[type="range"]:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 4px; }

/* ---------- segmented control di atas latar gelap ---------- */
.ds-konsol .ds-segmen {
  margin-top: var(--ds-sp-3);
  background: rgba(var(--ds-paper-rgb), .07);
  border-color: rgba(var(--ds-paper-rgb), .12);
}
.ds-konsol .ds-segmen > button { color: var(--ds-night-fg-2); }
.ds-konsol .ds-segmen > button[aria-pressed="true"] {
  background: var(--ds-sun);
  color: var(--ds-ink);
}
.ds-segmen-penuh { display: grid; grid-auto-flow: column; width: 100%; }
.ds-segmen-kuadran {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

/* ---------- kotak denah ---------- */
.ds-denah-kotak {
  background: rgba(var(--ds-paper-rgb), .055);
  border: 1px solid rgba(var(--ds-paper-rgb), .12);
  border-radius: var(--ds-r-4);
  padding: var(--ds-sp-4) var(--ds-sp-5) var(--ds-sp-3);
}
.ds-denah-kepala {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ds-sp-3);
  flex-wrap: wrap;
}
.ds-denah-kotak .ds-label-netral { color: var(--ds-night-fg-2); }
.ds-denah-ringkas {
  font-size: var(--ds-t-13);
  color: var(--ds-night-fg-2);
  display: inline-flex;
  gap: var(--ds-sp-2);
  flex-wrap: wrap;
}
.ds-denah-ringkas b { color: var(--ds-sun); font-weight: var(--ds-w-head); }
.ds-denah-kotak svg { display: block; width: 100%; height: auto; margin-top: var(--ds-sp-2); }

.ds-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-3);
  margin-top: var(--ds-sp-3);
}
.ds-legenda span {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-2);
  font-size: var(--ds-t-12);
  color: var(--ds-night-fg-2);
}
.ds-legenda i { width: 13px; height: 9px; border-radius: 2px; display: block; flex: none; }

/* Peringatan di dalam panel gelap tetap terbaca. */
.ds-konsol .ds-peringatan {
  margin-top: var(--ds-sp-3);
  background: rgba(var(--ds-sun-rgb), .12);
  border-color: rgba(var(--ds-sun-rgb), .32);
  color: var(--ds-night-fg);
  display: block;
}
.ds-konsol .ds-peringatan-judul { color: var(--ds-sun); }
/* Galat di panel gelap: pakai latar galat terang + teks gelap supaya
   kontrasnya tinggi, tanpa perlu kanal rgb baru di luar tujuh yang ada. */
.ds-konsol .ds-peringatan-bad {
  background: var(--ds-bad-bg);
  border-color: var(--ds-bad);
  color: var(--ds-ink);
}
.ds-konsol .ds-peringatan-bad .ds-peringatan-judul { color: var(--ds-bad); }

/* Catatan kecil di kartu gelap */
.ds-kartu-catatan {
  display: block;
  margin-top: var(--ds-sp-1);
  font-size: var(--ds-t-12);
  color: var(--ds-night-fg-2);
}

/* ---------- baris bawah ---------- */
.ds-konsol-bawah {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-3);
  flex-wrap: wrap;
  margin-top: var(--ds-sp-6);
}
.ds-konsol-catatan {
  font-size: var(--ds-t-13);
  color: var(--ds-night-fg-2);
  max-width: 52ch;
}

/* ---------- layar sempit ---------- */
@media (max-width: 980px) {
  .ds-konsol-grid { grid-template-columns: minmax(0, 1fr); }
  .ds-konsol-judul { font-size: var(--ds-t-34); letter-spacing: var(--ds-ls-tighter); max-width: none; }
}
@media (max-width: 620px) {
  .ds-konsol { padding: var(--ds-sp-5) var(--ds-sp-4); border-radius: var(--ds-r-4); }
  .ds-konsol-judul { font-size: var(--ds-t-30); }
  .ds-konsol-panel { padding: var(--ds-sp-4); }
  .ds-segmen-penuh { grid-auto-flow: row; }
  .ds-kendali-pasangan { grid-template-columns: 1fr; }
  .ds-denah-kotak { padding: var(--ds-sp-3); }
}

/* ==========================================================================
   DAFTAR ALAT (Tahap 3A)
   Kartu alat menyebut apa yang didapat pengguna, dan menampilkan label
   aksesnya SEBELUM diklik.
   ========================================================================== */
.ds-saring {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-2);
}

.ds-alat-daftar {
  list-style: none;
  margin: var(--ds-sp-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-sp-3);
}

.ds-alat-kartu {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-2);
  height: 100%;
  min-height: var(--ds-touch);
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-paper);
  color: inherit;
  text-decoration: none;
}
a.ds-alat-kartu:hover { background: var(--ds-sun-soft); border-color: var(--ds-sun-line); }
a.ds-alat-kartu:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }

/* Terkunci: bukan tautan, jadi tampilannya pun tidak mengundang klik. */
.ds-alat-kartu-terkunci { background: var(--ds-ground); }

.ds-alat-nama {
  font-size: var(--ds-t-15);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-snug);
  line-height: 1.3;
}
.ds-alat-ket {
  font-size: var(--ds-t-13);
  color: var(--ds-ink-2);
  line-height: 1.45;
}
.ds-alat-tanda { margin-top: auto; padding-top: var(--ds-sp-2); }

/* --------------------------------------------------------------------------
   TAHAP 4A (2026-10-22): kartu alat disederhanakan.

   Yang TAMPIL PERMANEN di semua lebar: ikon, judul, dan label akses
   ("Perlu akun" / "Bisa tanpa akun"). Label itu yang mencegah pengunjung
   mengklik alat yang akan menolaknya, jadi ia tidak pernah disembunyikan.

   DESKRIPSI ($k['ket']) disembunyikan HANYA di layar lebar YANG PUNYA HOVER,
   dan muncul saat kartu disorot atau difokus keyboard. Di luar kondisi itu
   -- yaitu di ponsel, tablet, dan laptop layar sentuh -- deskripsi TETAP
   TAMPIL apa adanya.

   Alasan memilih "tetap tampil" di layar sempit, bukan "muncul saat disentuh":
   kartu alat ITU SENDIRI adalah tautan. Mengubah sentuhan pertama menjadi
   "buka deskripsi" berarti merampas sentuhan itu dari tautannya, sehingga
   alat perlu dua sentuhan untuk dibuka -- dan itu mustahil dilakukan tanpa
   JavaScript, yang di halaman ini dilarang (CSP ketat, tanpa skrip menempel).
   Di layar sempit daftar alat sudah satu kolom, jadi deskripsi dua baris
   tidak membuat kartu terasa ramai seperti di grid tiga kolom.

   Tidak memakai display:none supaya tinggi kartu tidak melompat saat disorot;
   yang diubah hanya keterlihatannya. Teksnya SELALU ada di DOM, jadi pembaca
   layar dan pencarian halaman tetap menemukannya di lebar berapa pun.
   -------------------------------------------------------------------------- */
.ds-alat-kepala {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-sp-2);
}
.ds-alat-ikon {
  flex: none;
  display: inline-flex;
  color: var(--ds-sun);
}
.ds-alat-ikon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ds-alat-kartu-terkunci .ds-alat-ikon { color: var(--ds-ink-3); }

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .ds-alat-ket {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .16s ease, opacity .16s ease;
  }
  .ds-alat-kartu:hover .ds-alat-ket,
  .ds-alat-kartu:focus .ds-alat-ket,
  .ds-alat-kartu:focus-visible .ds-alat-ket,
  .ds-alat-kartu:focus-within .ds-alat-ket {
    max-height: 8em;
    opacity: 1;
  }
}

/* Kartu terkunci bukan tautan, jadi ia diberi tabindex supaya deskripsinya
   tetap bisa dibuka dengan keyboard. Cincin fokusnya dibuat sama dengan
   kartu yang bisa diklik. */
.ds-alat-kartu-terkunci:focus-visible {
  outline: 2px solid var(--ds-sun);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .ds-alat-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .ds-alat-daftar { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   KETERBATASAN DI PANEL ASUMSI (Tahap 3A / T2)
   Dua kalimat yang menyatakan bahwa angka penghematan adalah BATAS ATAS.
   Ditampilkan langsung, tidak di balik tautan, dan tidak dikecilkan sampai
   tak terbaca.
   ========================================================================== */
.ds-asumsi-batas {
  margin-top: var(--ds-sp-3);
  padding-left: var(--ds-sp-3);
  border-left: 2px solid var(--ds-sun);
  color: var(--ds-ink-2);
  font-size: var(--ds-t-12);
  line-height: 1.6;
}
/* Di dalam panel gelap, teksnya harus terang. */
.ds-konsol .ds-asumsi-batas { color: var(--ds-night-fg); }

/* Empat kartu angka di konsol: dua baris dua kolom begitu ruang menyempit,
   supaya Ukuran sistem dan Investasi tetap terbaca berdampingan. */
@media (max-width: 1100px) {
  .ds-konsol .ds-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .ds-konsol .ds-grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   TAHAP 3B — POLA SATU HALAMAN ALAT, dan PETA ALAT BERANDA
   Patokan visual: solarakyat-alat.html (empat keadaan) dan bagian
   "21 alat, satu alur" di solarakyat-konsol.html.

   Semua di bawah ini KOMPONEN, bukan CSS khusus halaman: dipakai bersama
   /alat/hemat-listrik, /alat/komparator, dan beranda. Tanpa hex harfiah,
   tanpa skrip, target sentuh minimum var(--ds-touch).
   ========================================================================== */

/* --------------------------------------------------------------------------
   MEJA KERJA: isian di kiri, hasil hidup di kanan.
   Hasil di kanan DIBUAT LENGKET supaya tetap terlihat saat isian digeser —
   itulah inti "hasilnya berubah mengikuti isian".
   -------------------------------------------------------------------------- */
.ds-kerja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--ds-sp-6);
  align-items: start;
  margin-top: var(--ds-sp-6);
}
.ds-kerja-kiri { display: grid; gap: var(--ds-sp-5); min-width: 0; }
.ds-kerja-kanan {
  display: grid;
  gap: var(--ds-sp-4);
  min-width: 0;
  position: sticky;
  top: var(--ds-sp-4);
}
@media (max-width: 1024px) {
  .ds-kerja { grid-template-columns: minmax(0, 1fr); }
  /* Di layar sempit urutannya dibalik: hasil lebih dulu, lalu isian, supaya
     angka yang berubah tidak pernah berada di luar layar. */
  .ds-kerja-kanan { position: static; order: -1; }
}

/* --------------------------------------------------------------------------
   SATU BAGIAN ISIAN
   -------------------------------------------------------------------------- */
.ds-sesi {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-4);
  background: var(--ds-paper);
  padding: var(--ds-sp-5);
}
.ds-sesi-judul {
  margin: 0;
  font-size: var(--ds-t-17);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-snug);
}
.ds-sesi-teks {
  margin: var(--ds-sp-2) 0 0;
  font-size: var(--ds-t-13);
  color: var(--ds-ink-2);
  line-height: 1.55;
}
.ds-sesi-isi { display: grid; gap: var(--ds-sp-4); margin-top: var(--ds-sp-4); }
.ds-sesi-dua {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-4);
}
@media (max-width: 520px) {
  .ds-sesi-dua { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   PILIHAN (radio dan checkbox) — 44px, bukan kotak 13px bawaan browser.
   Kotaknya sendiri tetap <input> sungguhan supaya tetap bisa dipakai dengan
   papan tombol dan pembaca layar; yang diperbesar adalah LABELNYA, yang
   memang jadi target sentuh sebenarnya.
   -------------------------------------------------------------------------- */
.ds-pilihan-grup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-2);
}
.ds-pilihan-grup-tegak { flex-direction: column; }

.ds-pilihan {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-3);
  min-height: var(--ds-touch);
  padding: var(--ds-sp-2) var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-paper);
  font-size: var(--ds-t-14);
  font-weight: var(--ds-w-med);
  line-height: 1.35;
  cursor: pointer;
}
.ds-pilihan:hover { background: var(--ds-sun-soft); border-color: var(--ds-sun-line); }
.ds-pilihan input {
  /* 20px, bukan 13px. Ukuran inputnya sendiri tidak dipakai sebagai target
     sentuh — labelnya yang 44px — tetapi tetap diperbesar supaya terlihat. */
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--ds-sun);
}
.ds-pilihan:has(input:checked) {
  border-color: var(--ds-sun);
  background: var(--ds-sun-soft);
}
.ds-pilihan:has(input:focus-visible) {
  outline: 2px solid var(--ds-sun);
  outline-offset: 2px;
}
.ds-pilihan-teks { display: grid; gap: 2px; }
.ds-pilihan-ket {
  font-size: var(--ds-t-12);
  font-weight: var(--ds-w-reg);
  color: var(--ds-ink-2);
}

/* --------------------------------------------------------------------------
   HASIL HIDUP
   -------------------------------------------------------------------------- */
.ds-live-utama {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-4);
  background: var(--ds-night);
  color: var(--ds-night-fg);
  padding: var(--ds-sp-5);
}
.ds-live-kepala {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-3);
  align-items: center;
  justify-content: space-between;
}
.ds-live-label {
  font-size: var(--ds-t-11);
  font-weight: var(--ds-w-med);
  letter-spacing: var(--ds-ls-tight);
  text-transform: uppercase;
  color: var(--ds-night-fg-2);
}
.ds-live-angka {
  margin-top: var(--ds-sp-2);
  font-size: var(--ds-t-42);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-tightest);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.ds-live-catatan {
  margin-top: var(--ds-sp-2);
  font-size: var(--ds-t-13);
  color: var(--ds-night-fg-2);
}
@media (max-width: 480px) {
  .ds-live-angka { font-size: var(--ds-t-34); }
}

/* Batang perbandingan sebelum dan sesudah. Lebarnya diisi JS dari angka
   server; tidak ada angka di CSS. */
.ds-batang-set { display: grid; gap: var(--ds-sp-3); margin-top: var(--ds-sp-4); }
.ds-batang-baris {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) auto;
  gap: var(--ds-sp-3);
  align-items: center;
  font-size: var(--ds-t-12);
}
.ds-batang-nama { color: var(--ds-ink-2); }
.ds-batang-rel {
  position: relative;
  height: 20px;
  border-radius: var(--ds-r-1);
  background: var(--ds-ground);
  overflow: hidden;
}
.ds-batang-isi { position: absolute; inset: 0 auto 0 0; background: var(--ds-sun); }
.ds-batang-isi-sepi { background: var(--ds-line); }
.ds-batang-nilai {
  font-weight: var(--ds-w-head);
  font-variant-numeric: tabular-nums;
}
.ds-live-utama .ds-batang-nama { color: var(--ds-night-fg-2); }
.ds-live-utama .ds-batang-rel { background: rgba(var(--ds-paper-rgb), .14); }
@media (max-width: 520px) {
  .ds-batang-baris { grid-template-columns: 7rem minmax(0, 1fr) auto; }
}

/* --------------------------------------------------------------------------
   DAFTAR PEMERIKSAAN OTOMATIS
   Empat keadaan: ok, warn, bad, dan NETRAL. Netral dipakai untuk angka yang
   memang tidak punya ambang penilaian di data — disebut, tetapi tidak
   dinilai baik atau buruk.
   -------------------------------------------------------------------------- */
.ds-periksa {
  display: grid;
  gap: var(--ds-sp-1);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-4);
  background: var(--ds-paper);
  padding: var(--ds-sp-4);
}
.ds-periksa-butir {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-3) 0;
  border-top: 1px solid var(--ds-line);
}
.ds-periksa-butir:first-of-type { border-top: 0; }
.ds-periksa-titik {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-ink-3);
}
.ds-periksa-ok .ds-periksa-titik { background: var(--ds-ok); }
.ds-periksa-warn .ds-periksa-titik { background: var(--ds-warn); }
.ds-periksa-bad .ds-periksa-titik { background: var(--ds-bad); }
.ds-periksa-judul {
  font-size: var(--ds-t-14);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-snug);
  line-height: 1.35;
}
.ds-periksa-teks {
  margin: 4px 0 0;
  font-size: var(--ds-t-12);
  color: var(--ds-ink-2);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   PANEL ASUMSI yang menyebut ASALNYA
   -------------------------------------------------------------------------- */
.ds-asumsi-baris {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-2) 0;
  border-top: 1px solid rgba(var(--ds-line-rgb), .7);
  font-size: var(--ds-t-12);
}
.ds-asumsi-baris:first-of-type { border-top: 0; }
.ds-asumsi-label { font-weight: var(--ds-w-med); color: var(--ds-ink-2); }
.ds-asumsi-nilai { font-weight: var(--ds-w-med); }
.ds-asumsi-sumber {
  display: block;
  margin-top: 2px;
  font-size: var(--ds-t-11);
  color: var(--ds-ink-3);
  line-height: 1.5;
}
@media (max-width: 520px) {
  .ds-asumsi-baris { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* --------------------------------------------------------------------------
   BARIS SIMPAN, dengan SISA JATAH yang terbaca SEBELUM tombol ditekan
   -------------------------------------------------------------------------- */
.ds-simpan-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-3);
  align-items: center;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-4);
  background: var(--ds-ground);
  padding: var(--ds-sp-4);
}
.ds-simpan-sisa {
  flex: 1 1 16rem;
  min-width: 0;
  font-size: var(--ds-t-12);
  color: var(--ds-ink-2);
  line-height: 1.55;
}
.ds-simpan-sisa b { color: var(--ds-ink); }
.ds-simpan-kabar {
  flex: 1 1 100%;
  font-size: var(--ds-t-13);
  font-weight: var(--ds-w-med);
}

/* --------------------------------------------------------------------------
   DUA TAHAP KOMPARATOR: memilih produk, lalu hasil
   -------------------------------------------------------------------------- */
.ds-tahap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-2);
  align-items: center;
  font-size: var(--ds-t-12);
  color: var(--ds-ink-2);
}
.ds-tahap-butir {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-2);
  padding: var(--ds-sp-1) var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: var(--ds-paper);
}
.ds-tahap-butir[aria-current="step"] {
  border-color: var(--ds-sun);
  background: var(--ds-sun-soft);
  color: var(--ds-ink);
  font-weight: var(--ds-w-med);
}

/* Pencarian produk */
.ds-cari-bungkus { position: relative; }
.ds-cari {
  width: 100%;
  min-height: var(--ds-touch);
  padding: var(--ds-sp-3) var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-paper);
  font: inherit;
  font-size: var(--ds-t-14);
  color: inherit;
}
.ds-cari:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 1px; }

/* Hasil pencarian: kartu produk yang bisa ditambahkan */
.ds-produk-daftar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--ds-sp-3);
  margin-top: var(--ds-sp-3);
  max-height: 22rem;
  overflow-y: auto;
  padding: 2px;
}
.ds-produk-kartu {
  display: grid;
  gap: 3px;
  min-height: var(--ds-touch);
  padding: var(--ds-sp-3) var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-paper);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ds-produk-kartu:hover { background: var(--ds-sun-soft); border-color: var(--ds-sun-line); }
.ds-produk-kartu:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }
.ds-produk-kartu[aria-pressed="true"] { border-color: var(--ds-sun); background: var(--ds-sun-soft); }
.ds-produk-kartu[disabled] { opacity: .55; cursor: default; }
.ds-produk-merek {
  font-size: var(--ds-t-11);
  letter-spacing: var(--ds-ls-tight);
  text-transform: uppercase;
  color: var(--ds-ink-3);
}
.ds-produk-nama { font-size: var(--ds-t-14); font-weight: var(--ds-w-head); line-height: 1.3; }
.ds-produk-spek { font-size: var(--ds-t-12); color: var(--ds-ink-2); }

/* Empat slot produk terpilih */
.ds-slot-daftar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-sp-3);
  margin-top: var(--ds-sp-4);
}
.ds-slot {
  display: grid;
  gap: 3px;
  align-content: start;
  min-height: 5.5rem;
  padding: var(--ds-sp-3) var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-paper);
}
.ds-slot-kosong {
  align-content: center;
  justify-items: center;
  border-style: dashed;
  background: var(--ds-ground);
  color: var(--ds-ink-3);
  font-size: var(--ds-t-12);
  text-align: center;
}
.ds-slot-buang {
  justify-self: start;
  margin-top: var(--ds-sp-2);
  min-height: var(--ds-touch);
  padding: var(--ds-sp-1) var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-2);
  background: var(--ds-paper);
  font: inherit;
  font-size: var(--ds-t-12);
  color: var(--ds-ink-2);
  cursor: pointer;
}
.ds-slot-buang:hover { border-color: var(--ds-bad); color: var(--ds-bad); }
.ds-slot-buang:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }
@media (max-width: 900px) {
  .ds-slot-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .ds-slot-daftar { grid-template-columns: minmax(0, 1fr); }
}

/* Bobot yang bisa diubah pengguna */
.ds-bobot { display: grid; gap: var(--ds-sp-2); margin-top: var(--ds-sp-4); }
.ds-bobot-baris {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) 3.5rem;
  gap: var(--ds-sp-3);
  align-items: center;
  font-size: var(--ds-t-12);
}
.ds-bobot-baris input[type="range"] {
  width: 100%;
  /* Target sentuh penuh: yang disentuh adalah seluruh tinggi pengatur. */
  height: var(--ds-touch);
  min-height: var(--ds-touch);
  margin: 0;
  accent-color: var(--ds-sun);
}
.ds-bobot-nilai {
  text-align: right;
  font-weight: var(--ds-w-head);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .ds-bobot-baris { grid-template-columns: minmax(0, 1fr) 3.5rem; }
  .ds-bobot-baris > :first-child { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   TABEL PERBANDINGAN: produk menambah KOLOM, bukan mengubah bentuk tabel.
   -------------------------------------------------------------------------- */
.ds-banding-gulir { overflow-x: auto; margin-top: var(--ds-sp-4); }
.ds-banding {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-t-13);
}
.ds-banding th,
.ds-banding td {
  padding: var(--ds-sp-3) var(--ds-sp-4);
  border-bottom: 1px solid var(--ds-line);
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}
.ds-banding th:first-child,
.ds-banding td:first-child {
  text-align: left;
  white-space: normal;
  min-width: 13rem;
}
.ds-banding thead th {
  position: sticky;
  top: 0;
  background: var(--ds-paper);
  font-size: var(--ds-t-12);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-snug);
}
.ds-banding-grup td {
  background: var(--ds-ground);
  font-size: var(--ds-t-11);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-tight);
  text-transform: uppercase;
  text-align: left;
  color: var(--ds-ink-2);
}
.ds-banding-unggul {
  background: var(--ds-ok-bg);
  font-weight: var(--ds-w-head);
}
/* Parameter yang datanya belum ada: ditulis apa adanya, tidak disembunyikan
   dan tidak diisi tebakan. */
.ds-banding-belum { color: var(--ds-ink-3); font-style: italic; }
/* Baris yang tidak ikut dinilai diberi tanda kecil, bukan dibuang. */
.ds-banding-tak-dinilai td:first-child::after {
  content: " · tidak dinilai";
  font-size: var(--ds-t-11);
  color: var(--ds-ink-3);
  font-weight: var(--ds-w-reg);
}

/* Skor berbobot per produk */
.ds-skor { display: grid; gap: var(--ds-sp-2); margin-top: var(--ds-sp-4); }

/* --------------------------------------------------------------------------
   PETA ALAT DI BERANDA — lima simpul mengikuti aliran listrik
   -------------------------------------------------------------------------- */
.ds-peta { margin-top: var(--ds-sp-6); }
.ds-peta-baris {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ds-sp-3);
}
.ds-peta-simpul {
  display: grid;
  align-content: start;
  gap: var(--ds-sp-2);
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-4);
  background: var(--ds-paper);
}
.ds-peta-judul {
  margin: 0;
  font-size: var(--ds-t-15);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-snug);
}
.ds-peta-teks {
  margin: 0;
  font-size: var(--ds-t-12);
  color: var(--ds-ink-2);
  line-height: 1.55;
}
.ds-peta-alat {
  list-style: none;
  margin: var(--ds-sp-2) 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.ds-peta-alat > li { display: block; }
.ds-peta-tautan,
.ds-peta-kunci {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-2);
  align-items: center;
  min-height: var(--ds-touch);
  padding: var(--ds-sp-2) var(--ds-sp-3);
  border-radius: var(--ds-r-2);
  font-size: var(--ds-t-13);
  line-height: 1.35;
}
.ds-peta-tautan { color: inherit; text-decoration: none; font-weight: var(--ds-w-med); }
.ds-peta-tautan:hover { background: var(--ds-sun-soft); }
.ds-peta-tautan:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }
.ds-peta-kunci { color: var(--ds-ink-2); }
.ds-peta-tanda {
  font-size: var(--ds-t-11);
  letter-spacing: var(--ds-ls-tight);
  color: var(--ds-ink-3);
}
.ds-peta-panah {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ds-sp-3);
  margin-top: var(--ds-sp-2);
  color: var(--ds-ink-3);
  font-size: var(--ds-t-14);
  text-align: center;
}
.ds-peta-kaki {
  margin: var(--ds-sp-4) 0 0;
  font-size: var(--ds-t-13);
  color: var(--ds-ink-2);
  line-height: 1.6;
}
@media (max-width: 1100px) {
  .ds-peta-baris { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-peta-panah { display: none; }
}
@media (max-width: 720px) {
  .ds-peta-baris { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .ds-peta-baris { grid-template-columns: minmax(0, 1fr); }
}

/* Saringan "hanya yang berbeda" pada tabel perbandingan. Tanpa skrip:
   penyembunyiannya dikerjakan :has() pada pembungkus. */
.ds-banding-bungkus:has(.ds-banding-saklar:checked) .ds-banding-sama { display: none; }

/* --------------------------------------------------------------------------
   TAHAP 3B (putaran 2) — SEBARIS TAUTAN YANG BERDIRI SENDIRI
   Bukan tautan di dalam kalimat, jadi pengecualian WCAG 2.5.8 TIDAK berlaku
   dan tiap tautan wajib setinggi var(--ds-touch). Dipakai footer halaman
   alat, dan boleh dipakai di mana saja sebaris tautan berdiri sendiri.
   -------------------------------------------------------------------------- */
.ds-tautan-baris {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-2);
  align-items: center;
}
.ds-tautan-baris > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-touch);
  padding-inline: var(--ds-sp-3);
  border-radius: var(--ds-r-2);
  color: inherit;
}
.ds-tautan-baris > a:hover { background: var(--ds-ground); }
.ds-tautan-baris > a:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   TAHAP 3B (putaran 2) — KOLOM PARAMETER TETAP TERLIHAT
   Dipertahankan dari Tahap 2: saat tabel perbandingan digeser ke samping di
   HP, nama parameternya harus tetap terbaca. Karena itu sel pertama tiap
   baris adalah <th scope="row">, dan inilah yang dibuat lengket.
   -------------------------------------------------------------------------- */
.ds-banding th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--ds-paper);
  text-align: left;
  white-space: normal;
  min-width: 13rem;
  font-weight: var(--ds-w-med);
}
.ds-banding-grup td { position: relative; z-index: 2; }

/* Saringan "hanya yang berbeda" memakai PENANDA RESMI data-sama="1",
   penanda yang sama dipakai sejak Tahap 2. Kelas .ds-banding-sama tetap
   ada untuk keperluan gaya, tetapi yang menentukan adalah penandanya. */
.ds-banding-bungkus:has(.ds-banding-saklar:checked) .ds-banding [data-sama="1"] { display: none; }
/* ==========================================================================
   TAHAP 3C / LINGKUP 1 — HEADER PIL MENGAMBANG DAN FOOTER BERSAMA

   Blok ini DITAMBAHKAN di akhir berkas, bukan menimpa blok "HEADER PIL
   MENGAMBANG" dan "FOOTER" di atas: aturan di bawah menang karena datang
   lebih akhir pada kekhususan yang sama, dan blok lama tetap utuh supaya
   perubahan ini bisa dibatalkan dengan menghapus blok ini saja.

   Yang dibereskan di sini (cacat tercatat di Tahap 3B):
     - logo navbar 32px  -> tautannya 44x44, gambarnya tetap 26px
     - tautan "Tools" 38px dan "Login" 39px -> 44x44
   ========================================================================== */

/* Pil-nya sendiri: putih agak tembus + blur, garis tipis, sudut bulat penuh.
   position:relative dipakai sebagai patokan panel menu layar sempit. */
.ds-header {
  position: relative;
  gap: var(--ds-sp-4);
  background: rgba(var(--ds-paper-rgb), .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Peramban tanpa backdrop-filter: latar dibuat lebih pekat supaya teks di
   belakang pil tidak ikut terbaca. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .ds-header { background: rgba(var(--ds-paper-rgb), .97); }
}

/* --------------------------------------------------------------- merek */
.ds-header-merek {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-touch);
  min-width: var(--ds-touch);
  padding-inline: var(--ds-sp-1);
  border-radius: var(--ds-r-pill);
}
.ds-header-merek:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }

/* ------------------------------------------------- menu (murni CSS) */

/*
  KENAPA BUKAN display:contents, dan kenapa ::details-content dinetralkan:

  Peramban menyembunyikan isi <details> yang tertutup dengan caranya sendiri.
  Chrome baru melakukannya lewat pseudo-elemen ::details-content yang diberi
  content-visibility:hidden -- dan itu TIDAK bisa ditimpa oleh aturan pada
  elemen anaknya. Kalau dibiarkan, menu di layar LEBAR ikut hilang, karena di
  layar lebar <details> memang dibiarkan tertutup.

  Jadi dua hal dilakukan:
   1. ::details-content dinetralkan, sehingga yang menentukan tampil atau
      tidaknya menu HANYA aturan kita sendiri di .ds-menu-isi di bawah.
   2. .ds-menu tidak memakai display:contents, karena dengan kotaknya
      dihapus perilaku ::details-content jadi tidak bisa diandalkan. Ia
      flex biasa, dan hasil tata letaknya sama.

  Peramban yang belum mengenal ::details-content tetap benar: aturan bawaannya
  (details:not([open]) > :not(summary){display:none}) selalu kalah melawan
  aturan penulis, berapa pun kekhususannya.
*/
.ds-menu {
  display: flex;
  align-items: center;
  min-width: 0;
}
.ds-menu::details-content {
  content-visibility: visible;
  display: contents;
}

/* summary hanya ada di layar sempit. list-style dan ::marker dibuang supaya
   tidak ada segitiga bawaan peramban. */
.ds-menu-pembuka {
  display: none;
  list-style: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sp-2);
  min-height: var(--ds-touch);
  min-width: var(--ds-touch);
  padding-inline: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  font-size: var(--ds-t-14);
  font-weight: var(--ds-w-head);
  color: var(--ds-ink);
}
.ds-menu-pembuka::-webkit-details-marker { display: none; }
.ds-menu-pembuka::marker { content: ""; }
.ds-menu-pembuka:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }
.ds-menu-ikon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* Di layar lebar isi details DIPAKSA tampil walau details tertutup;
   aturan penulis menang atas aturan bawaan peramban. */
.ds-menu-isi {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-1);
}
.ds-menu-isi a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-touch);
  min-width: var(--ds-touch);
  padding-inline: var(--ds-sp-3);
  border-radius: var(--ds-r-2);
  font-size: var(--ds-t-14);
  font-weight: var(--ds-w-med);
  color: var(--ds-ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.ds-menu-isi a:hover { background: var(--ds-ground); color: var(--ds-ink); }
.ds-menu-isi a:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }
.ds-menu-isi a[aria-current="page"] { color: var(--ds-ink); font-weight: var(--ds-w-head); }

/* ------------------------------------------------------- tombol kanan */
.ds-header-aksi {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
}
.ds-header-ikon,
.ds-header-tombol {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sp-2);
  min-height: var(--ds-touch);
  min-width: var(--ds-touch);
  padding-inline: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: transparent;
  font-family: inherit;
  font-size: var(--ds-t-14);
  font-weight: var(--ds-w-head);
  color: var(--ds-ink);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.ds-header-ikon { padding-inline: var(--ds-sp-2); }
.ds-header-ikon:hover,
.ds-header-tombol:hover { background: var(--ds-ground); }
.ds-header-ikon:focus-visible,
.ds-header-tombol:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }
.ds-header-svg { display: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ds-header-ikon .ds-header-svg { display: block; }

.ds-header-tombol-utama {
  background: var(--ds-sun);
  border-color: var(--ds-sun);
  color: #1B1200;
}
.ds-header-tombol-utama:hover { background: var(--ds-sun-deep); border-color: var(--ds-sun-deep); color: #FFFFFF; }

.ds-header-lencana {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-sun);
  color: #1B1200;
  font-size: var(--ds-t-12);
  font-weight: var(--ds-w-head);
  line-height: 20px;
  text-align: center;
}

/* Menu akun: tetap dibuka/ditutup js/sr-navbar.js (berkas terpisah, bukan
   skrip di dalam HTML). Tautan akunnya juga bisa dicapai langsung. */
.ds-header-akun { position: relative; }
.ds-header-akun-menu {
  position: absolute;
  top: calc(100% + var(--ds-sp-2));
  right: 0;
  min-width: 190px;
  display: none;
  flex-direction: column;
  padding: var(--ds-sp-2);
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  box-shadow: var(--ds-shadow-2);
  z-index: 40;
}
.ds-header-akun:hover > .ds-header-akun-menu,
.ds-header-akun:focus-within > .ds-header-akun-menu,
.ds-header-akun[data-open="true"] > .ds-header-akun-menu { display: flex; }
.ds-header-akun-menu a,
.ds-header-akun-menu button {
  display: flex;
  align-items: center;
  min-height: var(--ds-touch);
  min-width: var(--ds-touch);
  padding-inline: var(--ds-sp-3);
  border: 0;
  border-radius: var(--ds-r-2);
  background: transparent;
  font-family: inherit;
  font-size: var(--ds-t-14);
  color: var(--ds-ink-2);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.ds-header-akun-menu a:hover,
.ds-header-akun-menu button:hover { background: var(--ds-ground); color: var(--ds-ink); }
.ds-header-akun-menu form { margin: 0; }
.ds-header-akun-menu button { width: 100%; }

/* ==========================================================================
   FOOTER BERSAMA (bentuk kolom)
   Patokan: solarakyat-konsol.html (.ft dan .ftbase).
   ========================================================================== */
.ds-footer-publik {
  margin-top: var(--ds-sp-10);
  border-top: 1px solid var(--ds-line);
}
.ds-footer-kolom {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--ds-sp-7);
  max-width: 1152px;
  margin-inline: auto;
  padding: var(--ds-sp-8) var(--ds-sp-4) var(--ds-sp-7);
}
.ds-footer-merek p {
  margin: var(--ds-sp-3) 0 0;
  max-width: 30ch;
  font-size: var(--ds-t-14);
  color: var(--ds-ink-2);
}
.ds-footer-kolom h2 {
  margin: 0 0 var(--ds-sp-2);
  font-size: var(--ds-t-12);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: var(--ds-w-head);
  color: var(--ds-ink-3);
}
.ds-footer-kolom ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds-footer-kolom a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-touch);
  min-width: var(--ds-touch);
  padding-inline: var(--ds-sp-2);
  margin-inline: calc(-1 * var(--ds-sp-2));
  border-radius: var(--ds-r-2);
  font-size: var(--ds-t-14);
  color: var(--ds-ink-2);
  text-decoration: none;
}
.ds-footer-kolom a:hover { background: var(--ds-ground); color: var(--ds-ink); }
.ds-footer-kolom a:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }
.ds-footer-dasar {
  max-width: 1152px;
  margin-inline: auto;
  padding: var(--ds-sp-5) var(--ds-sp-4) var(--ds-sp-9);
  border-top: 1px solid var(--ds-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ds-sp-4);
  font-size: var(--ds-t-13);
  color: var(--ds-ink-3);
}

/* Bentuk ringkas (dipakai /ds-contoh): tautannya juga wajib 44px. */
.ds-footer-tautan a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-touch);
  min-width: var(--ds-touch);
  justify-content: center;
  padding-inline: var(--ds-sp-2);
  border-radius: var(--ds-r-2);
}

/* ==========================================================================
   TAHAP 3C — LAYAR SEMPIT
   ========================================================================== */
@media (max-width: 900px) {
  /* Menu jadi panel yang dibuka summary; tanpa JavaScript sama sekali. */
  .ds-menu-pembuka { display: inline-flex; }
  .ds-menu:not([open]) > .ds-menu-isi { display: none; }
  .ds-menu[open] > .ds-menu-isi {
    position: absolute;
    top: calc(100% + var(--ds-sp-2));
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-sp-1);
    padding: var(--ds-sp-2);
    background: var(--ds-paper);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-3);
    box-shadow: var(--ds-shadow-2);
    z-index: 40;
  }
  .ds-menu[open] > .ds-menu-isi a { justify-content: flex-start; }

  .ds-footer-kolom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  /* Pil tetap satu baris di 360px: jarak dan padding dipersempit, label
     tombol kanan diganti ikon, dan logo diperkecil ke 20px.
     !important dipakai KHUSUS di sini karena tinggi/lebar gambar logo
     ditulis sebagai atribut style sebaris oleh komponen ds.logo (supaya
     tidak ada geser tata letak saat muat), dan atribut sebaris hanya bisa
     ditimpa dengan !important. */
  .ds-header {
    flex-wrap: nowrap;
    gap: var(--ds-sp-1);
    border-radius: var(--ds-r-pill);
    padding: var(--ds-sp-2);
  }
  .ds-header-merek img { height: 20px !important; width: 143px !important; }
  .ds-menu-pembuka { padding-inline: 0; }
  .ds-menu-pembuka > span { display: none; }
  .ds-header-tombol { padding-inline: var(--ds-sp-2); }
  .ds-header-tombol .ds-header-svg { display: block; }
  .ds-header-tombol > span {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .ds-footer-kolom { grid-template-columns: minmax(0, 1fr); gap: var(--ds-sp-5); padding-block: var(--ds-sp-7) var(--ds-sp-5); }
  .ds-footer-dasar { padding-bottom: var(--ds-sp-7); }
}

/* Lencana keranjang: phase4m-navbar-cart-final.js memaksa display:flex saat
   isinya > 0, jadi perataan tengahnya ditulis untuk kedua mode tampil. */
.ds-header-lencana{align-items:center;justify-content:center}

/* ==========================================================================
   TAHAP 3C / LINGKUP 2 — SISA HALAMAN PUBLIK

   Komponen baru untuk katalog, halaman produk, keranjang, artikel, kontak,
   dan halaman masuk/daftar. Patokan: solarakyat-halaman.html dan
   solarakyat-halaman2.html.

   Awalan nama dipilih supaya TIDAK menabrak komponen yang sudah ada:
   kartu produk katalog memakai .ds-toko-*, karena .ds-produk-kartu sudah
   dipakai pemilih produk di komparator dan artinya lain.

   Target sentuh: tiap elemen yang bisa disentuh di blok ini memakai
   min-height DAN min-width var(--ds-touch).
   ========================================================================== */

/* ==========================================================================
   KATALOG — REL SARINGAN KIRI YANG LANGSUNG TERLIHAT
   Saringan BUKAN di balik satu tombol: di layar lebar ia rel kiri, di layar
   sempit ia <details> yang bisa dibuka tanpa JavaScript sama sekali.
   ========================================================================== */
.ds-toko {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: var(--ds-sp-7);
  align-items: start;
  margin-top: var(--ds-sp-6);
}

.ds-toko-rel { min-width: 0; }
.ds-toko-rel > summary { display: none; }

.ds-toko-grup {
  border-bottom: 1px solid var(--ds-line);
  padding-bottom: var(--ds-sp-4);
  margin-bottom: var(--ds-sp-4);
}
.ds-toko-grup:last-of-type { border-bottom: 0; margin-bottom: 0; }
.ds-toko-grup > h2,
.ds-toko-grup > legend {
  margin: 0 0 var(--ds-sp-2);
  padding: 0;
  font-size: var(--ds-t-11);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: var(--ds-w-head);
  color: var(--ds-ink-3);
}
.ds-toko-grup > fieldset { border: 0; margin: 0; padding: 0; }

.ds-toko-opsi {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-3);
  min-height: var(--ds-touch);
  min-width: var(--ds-touch);
  padding-inline: var(--ds-sp-2);
  margin-inline: calc(-1 * var(--ds-sp-2));
  border-radius: var(--ds-r-2);
  font-size: var(--ds-t-14);
  color: var(--ds-ink-2);
  cursor: pointer;
}
.ds-toko-opsi:hover { background: var(--ds-ground); color: var(--ds-ink); }
.ds-toko-opsi:focus-within { outline: 2px solid var(--ds-sun); outline-offset: 2px; }
.ds-toko-opsi input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--ds-sun);
}
.ds-toko-opsi.is-aktif { color: var(--ds-ink); font-weight: var(--ds-w-med); }
.ds-toko-opsi-jumlah {
  margin-left: auto;
  font-size: var(--ds-t-13);
  color: var(--ds-ink-3);
  font-variant-numeric: tabular-nums;
}

.ds-toko-atas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-4);
  margin-bottom: var(--ds-sp-4);
  font-size: var(--ds-t-14);
  color: var(--ds-ink-2);
}

/* ==========================================================================
   KATALOG — KARTU BERTINGGI SERAGAM
   Harga dan tombol sejajar di dasar kartu apa pun panjang judulnya:
   .ds-toko-isi memakai flex:1 dan .ds-toko-dasar memakai margin-top:auto.
   Judul dipotong DI BATAS KATA, dua baris, lewat line-clamp -- bukan lewat
   pemotongan huruf di tengah kata.
   ========================================================================== */
.ds-toko-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-sp-5);
}
.ds-toko-kartu {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-4);
  background: var(--ds-paper);
  overflow: hidden;
}
.ds-toko-kartu:hover { border-color: var(--ds-sun-line); }
.ds-toko-kartu:focus-within { outline: 2px solid var(--ds-sun); outline-offset: 2px; }

/*
  GAMBAR PRODUK TIDAK DISENTUH.
  Berkas aslinya sudah berbingkai oranye dan berwatermark, dan itu tidak
  boleh diedit atau dipotong. Jadi:
    - object-fit: contain  -> seluruh gambar terlihat, tidak ada yang dipotong
    - latar netral         -> bingkai oranye berkasnya yang terlihat, bukan
                              bingkai tambahan dari CSS
    - padding              -> menyisakan tepi netral, sehingga lencana promo
                              di pojok berdiri di atas latar, BUKAN di atas
                              gambarnya
*/
.ds-toko-gambar {
  position: relative;
  aspect-ratio: 1;
  background: var(--ds-ground);
  display: grid;
  place-items: center;
  padding: var(--ds-sp-5);
  overflow: hidden;
}
.ds-toko-gambar img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.ds-toko-tanpa-gambar { font-size: var(--ds-t-13); color: var(--ds-ink-3); }
.ds-toko-lencana {
  position: absolute;
  top: var(--ds-sp-2);
  right: var(--ds-sp-2);
  padding: 2px var(--ds-sp-2);
  border-radius: 6px;
  background: var(--ds-sun);
  color: #1B1200;
  font-size: var(--ds-t-11);
  font-weight: var(--ds-w-wordmark);
  letter-spacing: .04em;
}

.ds-toko-isi {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--ds-sp-1);
  padding: var(--ds-sp-4);
}
.ds-toko-tautan {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-1);
  color: inherit;
  text-decoration: none;
}
.ds-toko-kategori {
  font-size: var(--ds-t-11);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: var(--ds-w-head);
  color: var(--ds-ink-3);
}
.ds-toko-nama {
  margin: 0;
  font-size: var(--ds-t-15);
  font-weight: var(--ds-w-med);
  line-height: 1.3;
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Potong di batas kata: kata panjang tidak dipecah di tengah. */
  overflow-wrap: normal;
  word-break: normal;
}
.ds-toko-tautan:hover .ds-toko-nama { color: var(--ds-sun-deep); }
.ds-toko-spek {
  margin: 0;
  font-size: var(--ds-t-13);
  color: var(--ds-ink-3);
  font-variant-numeric: tabular-nums;
}
.ds-toko-dasar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-2);
  margin-top: auto;
  padding-top: var(--ds-sp-3);
}
.ds-toko-harga {
  font-size: var(--ds-t-17);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-snug);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   HALAMAN PRODUK
   ========================================================================== */
.ds-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--ds-sp-7);
  align-items: start;
  margin-top: var(--ds-sp-5);
}
.ds-pdp-utama {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: var(--ds-sp-6);
  background: var(--ds-ground);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-4);
  overflow: hidden;
}
.ds-pdp-utama img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.ds-pdp-thumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-2);
  margin-top: var(--ds-sp-3);
}
.ds-pdp-thumb button {
  display: grid;
  place-items: center;
  min-width: var(--ds-touch);
  min-height: var(--ds-touch);
  width: 64px;
  height: 64px;
  padding: var(--ds-sp-1);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-2);
  background: var(--ds-ground);
  cursor: pointer;
}
.ds-pdp-thumb button img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ds-pdp-thumb button.active,
.ds-pdp-thumb button[aria-current="true"] { border-color: var(--ds-sun); }
.ds-pdp-thumb button:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }

.ds-pdp-harga {
  font-size: var(--ds-t-34);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-tighter);
  font-variant-numeric: tabular-nums;
}
.ds-pdp-harga-coret {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-3);
  margin-top: var(--ds-sp-1);
  font-size: var(--ds-t-14);
  color: var(--ds-ink-3);
}
.ds-pdp-harga-coret > span { text-decoration: line-through; }
.ds-pdp-harga-coret > strong { color: var(--ds-sun-deep); }

.ds-jumlah {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  overflow: hidden;
}
.ds-jumlah button {
  min-width: var(--ds-touch);
  min-height: var(--ds-touch);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--ds-t-17);
  color: var(--ds-ink);
  cursor: pointer;
}
.ds-jumlah button:hover { background: var(--ds-ground); }
.ds-jumlah input {
  width: 56px;
  min-height: var(--ds-touch);
  border: 0;
  border-inline: 1px solid var(--ds-line);
  background: transparent;
  font: inherit;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Deret tab: dipakai halaman produk (Spesifikasi jadi tab pertama). */
.ds-tab-baris {
  display: flex;
  gap: var(--ds-sp-1);
  margin-top: var(--ds-sp-8);
  border-bottom: 1px solid var(--ds-line);
  overflow-x: auto;
}
.ds-tab {
  min-height: var(--ds-touch);
  min-width: var(--ds-touch);
  padding-inline: var(--ds-sp-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: inherit;
  font-size: var(--ds-t-14);
  font-weight: var(--ds-w-head);
  color: var(--ds-ink-2);
  white-space: nowrap;
  cursor: pointer;
}
.ds-tab:hover { color: var(--ds-ink); }
.ds-tab.active,
.ds-tab[aria-selected="true"] { color: var(--ds-ink); border-bottom-color: var(--ds-sun); }
.ds-tab:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: -2px; }

.ds-spek { margin-top: var(--ds-sp-5); }
.ds-spek > div {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-sp-5);
  padding-block: var(--ds-sp-3);
  border-bottom: 1px solid var(--ds-line);
  font-size: var(--ds-t-14);
}
.ds-spek > div > span { color: var(--ds-ink-2); }
.ds-spek > div > strong { font-weight: var(--ds-w-med); text-align: right; }

/* ==========================================================================
   KERANJANG
   ========================================================================== */
.ds-keranjang {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--ds-sp-6);
  align-items: start;
  margin-top: var(--ds-sp-6);
}
.ds-ringkas-baris {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-sp-4);
  padding-block: var(--ds-sp-2);
  font-size: var(--ds-t-14);
  color: var(--ds-ink-2);
}
.ds-ringkas-baris > strong { color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.ds-ringkas-total {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-sp-4);
  margin-top: var(--ds-sp-3);
  padding-top: var(--ds-sp-3);
  border-top: 1px solid var(--ds-line);
  font-size: var(--ds-t-19);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-tight);
}
.ds-ringkas-total > strong { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   ARTIKEL
   ========================================================================== */
.ds-sorot {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0;
  margin-top: var(--ds-sp-6);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-4);
  background: var(--ds-paper);
  overflow: hidden;
}
.ds-sorot-gambar { background: var(--ds-ground); min-height: 260px; }
.ds-sorot-gambar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ds-sorot-isi { padding: var(--ds-sp-7); display: flex; flex-direction: column; gap: var(--ds-sp-3); }
.ds-sorot-isi h2 {
  margin: 0;
  font-size: var(--ds-t-30);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-tighter);
  line-height: 1.15;
}
.ds-sorot-isi h2 a { color: inherit; text-decoration: none; }
.ds-sorot-isi h2 a:hover { color: var(--ds-sun-deep); }

.ds-artikel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-sp-5);
  margin-top: var(--ds-sp-6);
}
.ds-artikel-kartu {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-4);
  background: var(--ds-paper);
  overflow: hidden;
}
.ds-artikel-kartu:hover { border-color: var(--ds-sun-line); }
.ds-artikel-gambar { aspect-ratio: 16 / 10; background: var(--ds-ground); }
.ds-artikel-gambar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ds-artikel-isi { display: flex; flex: 1; flex-direction: column; gap: var(--ds-sp-2); padding: var(--ds-sp-5); }
.ds-artikel-isi h3 { margin: 0; font-size: var(--ds-t-17); font-weight: var(--ds-w-head); line-height: 1.3; letter-spacing: var(--ds-ls-snug); }
.ds-artikel-isi h3 a { color: inherit; text-decoration: none; }
.ds-artikel-isi h3 a:hover { color: var(--ds-sun-deep); }
.ds-artikel-ringkas {
  margin: 0;
  font-size: var(--ds-t-14);
  color: var(--ds-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-artikel-meta { margin-top: auto; padding-top: var(--ds-sp-3); font-size: var(--ds-t-12); color: var(--ds-ink-3); }

/* Halaman baca: daftar isi menempel di kiri, alat terkait di kanan. */
.ds-baca {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 260px;
  gap: var(--ds-sp-7);
  align-items: start;
  margin-top: var(--ds-sp-6);
}
.ds-toc,
.ds-baca-samping {
  position: sticky;
  /* 44px pil + 12px jarak atas + 20px lega */
  top: 76px;
}
.ds-toc > h2,
.ds-baca-samping > h2 {
  margin: 0 0 var(--ds-sp-2);
  font-size: var(--ds-t-11);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: var(--ds-w-head);
  color: var(--ds-ink-3);
}
.ds-toc ol,
.ds-toc ul { margin: 0; padding: 0; list-style: none; }
.ds-toc a {
  display: flex;
  align-items: center;
  min-height: var(--ds-touch);
  min-width: var(--ds-touch);
  padding-inline: var(--ds-sp-2);
  margin-inline: calc(-1 * var(--ds-sp-2));
  border-radius: var(--ds-r-2);
  font-size: var(--ds-t-13);
  color: var(--ds-ink-2);
  text-decoration: none;
}
.ds-toc a:hover { background: var(--ds-ground); color: var(--ds-ink); }
.ds-toc a:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }

.ds-baca-isi { font-size: var(--ds-t-17); line-height: 1.7; color: var(--ds-ink); }
.ds-baca-isi > :first-child { margin-top: 0; }
.ds-baca-isi h2 { margin: var(--ds-sp-8) 0 var(--ds-sp-3); font-size: var(--ds-t-24); font-weight: var(--ds-w-head); letter-spacing: var(--ds-ls-tight); }
.ds-baca-isi h3 { margin: var(--ds-sp-6) 0 var(--ds-sp-2); font-size: var(--ds-t-19); font-weight: var(--ds-w-head); }
.ds-baca-isi p { margin: 0 0 var(--ds-sp-5); }
.ds-baca-isi img { max-width: 100%; height: auto; border-radius: var(--ds-r-3); }
.ds-baca-isi a { color: var(--ds-sun-deep); }

/* Satu kartu alat disisipkan di tengah tulisan. */
.ds-sisip-alat {
  margin-block: var(--ds-sp-7);
  padding: var(--ds-sp-6);
  border: 1px solid var(--ds-sun-line);
  border-radius: var(--ds-r-4);
  background: var(--ds-sun-soft);
}
.ds-sisip-alat > h2 { margin: var(--ds-sp-1) 0 var(--ds-sp-2); font-size: var(--ds-t-19); font-weight: var(--ds-w-head); letter-spacing: var(--ds-ls-tight); }
.ds-sisip-alat > p { margin: 0 0 var(--ds-sp-4); font-size: var(--ds-t-14); color: var(--ds-ink-2); }

/* ==========================================================================
   KONTAK
   ========================================================================== */
.ds-kontak {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--ds-sp-6);
  align-items: start;
  margin-top: var(--ds-sp-6);
}
.ds-kontak-baris {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-sp-4);
  padding-block: var(--ds-sp-3);
  border-bottom: 1px solid var(--ds-line);
  font-size: var(--ds-t-14);
  color: var(--ds-ink-2);
}
.ds-kontak-baris:last-child { border-bottom: 0; }
.ds-kontak-baris > strong { color: var(--ds-ink); font-weight: var(--ds-w-med); }

/* Tanya-jawab murni CSS: details/summary, tanpa JavaScript. */
.ds-tanya { border-bottom: 1px solid var(--ds-line); }
.ds-tanya:last-child { border-bottom: 0; }
.ds-tanya > summary {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-3);
  min-height: var(--ds-touch);
  padding-block: var(--ds-sp-2);
  list-style: none;
  font-size: var(--ds-t-14);
  font-weight: var(--ds-w-med);
  color: var(--ds-ink);
  cursor: pointer;
}
.ds-tanya > summary::-webkit-details-marker { display: none; }
.ds-tanya > summary::marker { content: ""; }
.ds-tanya > summary::after { content: "+"; margin-left: auto; color: var(--ds-ink-3); font-size: var(--ds-t-19); }
.ds-tanya[open] > summary::after { content: "–"; }
.ds-tanya > summary:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }
.ds-tanya > p { margin: 0 0 var(--ds-sp-4); font-size: var(--ds-t-14); color: var(--ds-ink-2); }

/* ==========================================================================
   MASUK DAN DAFTAR — SATU HALAMAN DENGAN SAKELAR MURNI CSS
   Dua radio di LUAR kedua form, jadi tidak ikut terkirim saat form disubmit.
   ========================================================================== */
.ds-masuk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: var(--ds-sp-8);
  align-items: start;
  margin-top: var(--ds-sp-7);
}
.ds-masuk-alasan > ul { margin: var(--ds-sp-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--ds-sp-5); }
.ds-masuk-alasan > ul > li { display: grid; gap: var(--ds-sp-1); }
.ds-masuk-alasan > ul > li > strong { font-size: var(--ds-t-15); font-weight: var(--ds-w-head); }
.ds-masuk-alasan > ul > li > span { font-size: var(--ds-t-14); color: var(--ds-ink-2); }

.ds-sakelar-radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}
.ds-sakelar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--ds-sp-1);
  padding: var(--ds-sp-1);
  margin-bottom: var(--ds-sp-6);
  background: var(--ds-ground);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
}
.ds-sakelar label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-touch);
  min-width: var(--ds-touch);
  border-radius: var(--ds-r-pill);
  font-size: var(--ds-t-14);
  font-weight: var(--ds-w-head);
  color: var(--ds-ink-2);
  cursor: pointer;
}
.ds-sakelar-panel { display: none; }

#ds-sakelar-masuk:checked ~ .ds-sakelar label[for="ds-sakelar-masuk"],
#ds-sakelar-daftar:checked ~ .ds-sakelar label[for="ds-sakelar-daftar"] {
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  color: var(--ds-ink);
}
#ds-sakelar-masuk:focus-visible ~ .ds-sakelar label[for="ds-sakelar-masuk"],
#ds-sakelar-daftar:focus-visible ~ .ds-sakelar label[for="ds-sakelar-daftar"] {
  outline: 2px solid var(--ds-sun);
  outline-offset: 2px;
}
#ds-sakelar-masuk:checked ~ .ds-sakelar-panel[data-sakelar="masuk"],
#ds-sakelar-daftar:checked ~ .ds-sakelar-panel[data-sakelar="daftar"] { display: block; }

.ds-masuk-baris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-3);
  margin-bottom: var(--ds-sp-5);
}
.ds-masuk-baris a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-touch);
  min-width: var(--ds-touch);
  padding-inline: var(--ds-sp-2);
  margin-inline: calc(-1 * var(--ds-sp-2));
  border-radius: var(--ds-r-2);
  font-size: var(--ds-t-14);
  color: var(--ds-sun-deep);
  text-decoration: none;
}
.ds-masuk-baris a:hover { background: var(--ds-ground); }

/* ==========================================================================
   TAHAP 3C / LINGKUP 2 — LAYAR SEMPIT
   ========================================================================== */
@media (max-width: 1100px) {
  /* Halaman baca: alat terkait pindah ke bawah tulisan, daftar isi tetap. */
  .ds-baca { grid-template-columns: 200px minmax(0, 1fr); }
  .ds-baca-samping { grid-column: 1 / -1; position: static; }
  .ds-pdp { grid-template-columns: minmax(0, 1fr) 340px; }
}

@media (max-width: 900px) {
  /* Rel saringan jadi <details> yang bisa dibuka TANPA JavaScript. Ini
     bukan "saringan di balik satu tombol" versi lama: pembukanya bagian
     dari rel itu sendiri dan isinya tetap satu daftar yang sama. */
  .ds-toko { grid-template-columns: minmax(0, 1fr); gap: var(--ds-sp-5); }
  .ds-toko-rel > summary {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-3);
    min-height: var(--ds-touch);
    padding-inline: var(--ds-sp-4);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-pill);
    list-style: none;
    font-size: var(--ds-t-14);
    font-weight: var(--ds-w-head);
    color: var(--ds-ink);
    cursor: pointer;
  }
  .ds-toko-rel > summary::-webkit-details-marker { display: none; }
  .ds-toko-rel > summary::marker { content: ""; }
  .ds-toko-rel > summary::after { content: "▾"; margin-left: auto; color: var(--ds-ink-3); }
  .ds-toko-rel[open] > summary::after { content: "▴"; }
  .ds-toko-rel[open] > form,
  .ds-toko-rel[open] > div { margin-top: var(--ds-sp-4); }

  .ds-toko-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-artikel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-pdp { grid-template-columns: minmax(0, 1fr); }
  .ds-keranjang { grid-template-columns: minmax(0, 1fr); }
  .ds-kontak { grid-template-columns: minmax(0, 1fr); }
  .ds-masuk { grid-template-columns: minmax(0, 1fr); gap: var(--ds-sp-6); }
  .ds-sorot { grid-template-columns: minmax(0, 1fr); }
  .ds-sorot-isi { padding: var(--ds-sp-6); }
  .ds-sorot-isi h2 { font-size: var(--ds-t-24); }
  .ds-baca { grid-template-columns: minmax(0, 1fr); }
  .ds-toc { position: static; }
}

@media (max-width: 620px) {
  .ds-toko-grid { grid-template-columns: minmax(0, 1fr); }
  .ds-artikel-grid { grid-template-columns: minmax(0, 1fr); }
  .ds-pdp-harga { font-size: var(--ds-t-30); }
  .ds-sorot-isi { padding: var(--ds-sp-5); }
  .ds-baca-isi { font-size: var(--ds-t-15); }
  .ds-sisip-alat { padding: var(--ds-sp-5); }
}

/* Panel tab halaman produk. Kelas .active dipasang/dilepas
   public/js/solarakyat-product-detail.js; nama kelasnya tidak diubah. */
.ds-tab-panel { display: none; padding-top: var(--ds-sp-6); }
.ds-tab-panel.active { display: block; }

/* ==========================================================================
   TAHAP 3C — TAUTAN YANG BERDIRI SENDIRI WAJIB 44px

   Diukur di peramban sesudah pasang, pada 360 / 390 / 768 / 1280 / 1440 px.
   Yang ketemu di bawah 44px dan BUKAN tautan di dalam kalimat dibereskan di
   sini:

     judul kartu artikel        21 dan 43 px tinggi  -> 44
     judul artikel di rel       18 px tinggi         -> 44
     tautan WhatsApp dan email
     di kartu kontak            17 px tinggi         -> 44

   YANG SENGAJA DIKECUALIKAN, beserta alasannya:

     - tautan di dalam kalimat (mis. "Masuk" di pesan jatah tamu, "Lihat
       semua alat" di kaki peta alat, "Lihat daftar alatnya" di halaman
       masuk). WCAG 2.5.8 mengecualikan tautan yang berada DI DALAM satu
       blok teks, karena membesarkannya akan memecah kalimatnya.
     - remah (breadcrumb): satu baris teks berisi beberapa tautan yang
       dipisah tanda "›" di dalam satu paragraf -- bentuknya blok teks, jadi
       pengecualian yang sama berlaku.
     - <input type=radio> dan <input type=checkbox> berukuran 18-20px: yang
       disentuh adalah <label> pembungkusnya, dan label itu 44px. Diukur:
       label 225x44 membungkus input 20x20.
   ========================================================================== */

/* Judul kartu artikel dan judul artikel sorotan. */
.ds-artikel-isi h3 a,
.ds-sorot-isi h2 a {
  display: flex;
  align-items: center;
  min-height: var(--ds-touch);
  min-width: var(--ds-touch);
}

/* Judul yang dipakai SEBAGAI TAUTAN di baris daftar. Dibatasi ke a.
   supaya pemakaian .ds-baris-judul sebagai teks biasa (span) tidak ikut
   berubah tingginya. */
a.ds-baris-judul {
  display: flex;
  align-items: center;
  min-height: var(--ds-touch);
  min-width: var(--ds-touch);
}

/* Tautan WhatsApp dan email di kartu kontak: berdiri sendiri, bukan di
   dalam kalimat. */
.ds-kontak-baris a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--ds-touch);
  min-width: var(--ds-touch);
}

/* ==========================================================================
   TAHAP 4A / AREA CUSTOMER: REL KIRI (.ds-ac-*)

   Sebelum ini area customer memakai bar bawah bergaya aplikasi ponsel di
   SEMUA lebar, sehingga di laptop sisi kiri layar kosong dan isi halaman
   terdorong oleh pita masukan di atasnya.

   Sekarang: rel kiri tetap di layar >= 960px; di bawah itu rel menjadi satu
   bilah dengan menu bisa-dibuka MURNI CSS (<details>/<summary>), pola yang
   sama dengan header publik Tahap 3C. Tanpa JavaScript, tanpa on*=.
   ========================================================================== */
.ds-ac {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* ------------------------------------------------------------------ rel */
.ds-ac-rel {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-3);
  min-width: 0;
  box-sizing: border-box;
  padding: var(--ds-sp-4) var(--ds-sp-4) var(--ds-sp-3);
  border-bottom: 1px solid var(--ds-line);
  background: var(--ds-paper);
}

.ds-ac-merek {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-touch);
  text-decoration: none;
}
.ds-ac-merek img { height: 26px; width: auto; display: block; }
.ds-ac-merek:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }

.ds-ac-siapa {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
  min-width: 0;
}
.ds-ac-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--ds-r-2);
  background: var(--ds-sun-soft);
  color: var(--ds-sun-deep);
  font-size: var(--ds-t-12);
  font-weight: var(--ds-w-head);
}
.ds-ac-siapa__teks { display: flex; flex-direction: column; min-width: 0; }
.ds-ac-siapa__teks b {
  font-size: var(--ds-t-13);
  font-weight: var(--ds-w-head);
  color: var(--ds-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-ac-siapa__teks span { font-size: var(--ds-t-11); color: var(--ds-ink-3); }

/* --------------------------------------------------- menu bisa-dibuka */
.ds-ac-menu { min-width: 0; }
.ds-ac-menu::details-content { content-visibility: visible; display: contents; }

.ds-ac-pembuka {
  display: flex;
  list-style: none;
  cursor: pointer;
  align-items: center;
  gap: var(--ds-sp-2);
  min-height: var(--ds-touch);
  padding-inline: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  font-size: var(--ds-t-14);
  font-weight: var(--ds-w-head);
  color: var(--ds-ink);
}
.ds-ac-pembuka::-webkit-details-marker { display: none; }
.ds-ac-pembuka::marker { content: ""; }
.ds-ac-pembuka:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }
.ds-ac-ikon-menu { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.ds-ac-nav {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-1);
  margin-top: var(--ds-sp-2);
}
.ds-ac-nav__form { margin: 0; }
.ds-ac-nav__butir {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-3);
  width: 100%;
  box-sizing: border-box;
  min-height: var(--ds-touch);
  padding: var(--ds-sp-2) var(--ds-sp-3);
  border: 0;
  border-radius: var(--ds-r-2);
  background: none;
  font: inherit;
  font-size: var(--ds-t-14);
  font-weight: var(--ds-w-med);
  color: var(--ds-ink-2);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.ds-ac-nav__butir svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ds-ac-nav__butir:hover { background: var(--ds-ground); color: var(--ds-ink); }
.ds-ac-nav__butir:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }
.ds-ac-nav__butir.is-active,
.ds-ac-nav__butir[aria-current="page"] {
  background: var(--ds-sun-soft);
  color: var(--ds-sun-deep);
  font-weight: var(--ds-w-head);
}

.ds-ac-kelompok {
  margin-top: var(--ds-sp-4);
  padding: 0 var(--ds-sp-3) var(--ds-sp-1);
  font-size: var(--ds-t-11);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: var(--ds-w-head);
  color: var(--ds-ink-3);
}

/* ------------------------------------------- dasar rel: satu baris masukan */
.ds-ac-kaki { margin-top: var(--ds-sp-3); }
.ds-ac-masukan {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-sp-2);
  min-height: var(--ds-touch);
  box-sizing: border-box;
  padding: var(--ds-sp-2) var(--ds-sp-3);
  border-top: 1px solid var(--ds-line);
  font-size: var(--ds-t-13);
  color: var(--ds-ink-2);
  text-decoration: none;
}
.ds-ac-masukan b { color: var(--ds-sun-deep); font-weight: var(--ds-w-head); }
.ds-ac-masukan:hover { color: var(--ds-ink); }
.ds-ac-masukan:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }

/* ==================================================== layar >= 960px: rel */
@media (min-width: 960px) {
  .ds-ac { grid-template-columns: 248px minmax(0, 1fr); }

  .ds-ac-rel {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100vh;
    gap: var(--ds-sp-4);
    padding: var(--ds-sp-5) var(--ds-sp-4);
    border-bottom: 0;
    border-right: 1px solid var(--ds-line);
  }
  .ds-ac-merek img { height: 30px; }

  /* Menu selalu terbuka: <summary> disembunyikan dan isi <details> dipaksa
     tampil, jadi rel tetap utuh walau <details> tertutup. */
  .ds-ac-pembuka { display: none; }
  .ds-ac-nav { margin-top: 0; }

  /* Pita masukan menempel di DASAR rel, bukan menggantung di bawah menu. */
  .ds-ac-kaki { margin-top: auto; }

  /* Isi halaman: lebar penuh kolomnya sendiri. Dua kelas supaya menang atas
     .sr-app-main di sr-design-system.css, yang dimuat setelah berkas ini. */
  .ds-ac > .ds-ac-isi {
    max-width: none;
    margin-inline: 0;
    padding: var(--ds-sp-6) var(--ds-sp-6) var(--ds-sp-8);
  }
}

/* Bar bawah lama sudah tidak dipasang di area customer, tetapi padding bawah
   .sr-app-main masih menyisakan ruang 88px untuknya. Di layar sempit ruang itu
   dikembalikan ke isi halaman. */
@media (max-width: 959px) {
  .ds-ac > .ds-ac-isi {
    padding-bottom: calc(var(--ds-sp-8) + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   TAHAP 4A / TEMUAN DINAIKKAN (.ds-temuan)

   Satu peringatan utuh di ATAS halaman: judul, kalimat berisi ANGKA, dan
   saran ukuran. Menggantikan titik merah kecil di salah satu kartu modul.
   Nada merah = perlu diperbaiki, kuning = ada catatan. Warnanya BUKAN
   satu-satunya penanda: ada juga teks status untuk pembaca layar.
   ========================================================================== */
.ds-temuan {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-sp-3);
  box-sizing: border-box;
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-paper);
}
.ds-temuan--merah { border-color: #D8B4A4; background: #FDF4F1; }
.ds-temuan--kuning { border-color: #E8D6A8; background: #FDFaF0; }

.ds-temuan__dot {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
}
.ds-temuan--merah .ds-temuan__dot { background: #9B3B20; }
.ds-temuan--kuning .ds-temuan__dot { background: #AE6108; }

.ds-temuan__isi { flex: 1 1 auto; min-width: 0; }
.ds-temuan__isi strong {
  display: block;
  font-size: var(--ds-t-15);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-snug);
  color: var(--ds-ink);
}
.ds-temuan__isi p {
  margin: var(--ds-sp-2) 0 0;
  font-size: var(--ds-t-13);
  line-height: 1.5;
  color: var(--ds-ink-2);
}
.ds-temuan__saran b { color: var(--ds-ink); }
.ds-temuan__aksi { flex: none; }

@media (max-width: 620px) {
  .ds-temuan { flex-wrap: wrap; }
  .ds-temuan__aksi { flex-basis: 100%; }
}

/* ==========================================================================
   TAHAP 4A / KARTU PROJECT (.ds-pg-*)

   Kartu menunjukkan DENAH susunan modul di atap (penggambar bersama
   <x-ds.denah-atap>), lalu nama + lokasi + status, tiga angka pokok, dan
   satu baris kaki. Teks jumlah panel yang dulu berdiri sendiri sudah
   digantikan gambarnya.
   ========================================================================== */
.ds-pg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-4);
}
.ds-pg-kartu {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-paper);
}
.ds-pg-denah {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 108px;
  padding: var(--ds-sp-3);
  border-bottom: 1px solid var(--ds-line);
  background: var(--ds-ground);
}
.ds-pg-denah svg { max-height: 120px; }
.ds-pg-denah__belum {
  margin: 0;
  font-size: var(--ds-t-12);
  color: var(--ds-ink-3);
  text-align: center;
}

.ds-pg-isi {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-3);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--ds-sp-4);
}
.ds-pg-kepala {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sp-3);
  min-width: 0;
}
.ds-pg-kepala h2 {
  margin: 0;
  font-size: var(--ds-t-17);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-snug);
  color: var(--ds-ink);
}
.ds-pg-lok {
  margin: var(--ds-sp-1) 0 0;
  font-size: var(--ds-t-13);
  color: var(--ds-ink-2);
}

.ds-pg-angka {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-4);
  padding-block: var(--ds-sp-1);
  border-top: 1px solid var(--ds-line);
  padding-top: var(--ds-sp-3);
}
.ds-pg-angka > div { display: flex; flex-direction: column; min-width: 0; }
.ds-pg-angka span { font-size: var(--ds-t-11); color: var(--ds-ink-3); }
.ds-pg-angka b {
  font-size: var(--ds-t-15);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-snug);
  color: var(--ds-ink);
}

.ds-pg-kaki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-3);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--ds-sp-3);
  border-top: 1px solid var(--ds-line);
}
.ds-pg-kaki__ket {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-2);
  min-width: 0;
  font-size: var(--ds-t-13);
  color: var(--ds-ink-2);
}

/* Pesanan terakhir + Hitung cepat: dua kartu sebaris. */
.ds-pg-baris2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-4);
}

@media (max-width: 860px) {
  .ds-pg,
  .ds-pg-baris2 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   TAHAP 4A / KARTU MODUL + KOLOM KANAN DISKUSI

   .ds-mod-kerja membentuk kolom kanan HANYA saat panel diskusi terbuka,
   lewat :has(). Sebelum panel dibuka, grid modul memakai lebar penuh -- tidak
   ada kolom kosong yang menyempitkan isi. Di peramban tanpa :has() panel
   muncul di bawah grid: tetap utuh dan bisa dipakai, hanya tidak sebaris.
   ========================================================================== */
.ds-mod-kerja {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-sp-4);
  align-items: start;
}

@media (min-width: 1100px) {
  .ds-mod-kerja:has(.sr-dsk-overlay--dok:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}

/* -------------------------------------------------------- kartu modul */
.ds-mods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-3);
  margin-top: var(--ds-sp-3);
}

.ds-mod {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-paper);
}
/* Nada status ikut terlihat di tepi kartu, tetapi warna BUKAN satu-satunya
   penanda: ada titik status dan teks status untuk pembaca layar. */
.ds-mod--merah { border-color: #D8B4A4; }
.ds-mod--kuning { border-color: #E8D6A8; }

.ds-mod__buka {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-1);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--ds-sp-3) var(--ds-sp-4);
  color: inherit;
  text-decoration: none;
}
.ds-mod__buka:hover { background: var(--ds-ground); }
.ds-mod__buka:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }

.ds-mod__hd {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
  min-width: 0;
}
.ds-mod__no {
  flex: none;
  font-size: var(--ds-t-11);
  font-weight: var(--ds-w-head);
  color: var(--ds-ink-3);
}
.ds-mod__nama {
  font-size: var(--ds-t-13);
  font-weight: var(--ds-w-med);
  color: var(--ds-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-mod__nilai {
  font-size: var(--ds-t-17);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-snug);
  color: var(--ds-ink);
}
.ds-mod__ket {
  font-size: var(--ds-t-12);
  color: var(--ds-ink-3);
  line-height: 1.4;
}
.ds-mod--merah .ds-mod__ket { color: #9B3B20; }

/* Kaki kartu: nomor versi + tombol tanya KECIL. Tombolnya sengaja tidak
   setinggi tombol utama, karena enam tombol setinggi itu menggandakan tinggi
   seluruh grid -- keluhan yang ditulis pemilik. Tetap 44px lebar/tinggi
   minimal supaya tetap nyaman disentuh. */
.ds-mod__kaki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-2);
  padding: 0 var(--ds-sp-3) var(--ds-sp-2);
  border-top: 1px solid var(--ds-line);
  padding-top: var(--ds-sp-2);
}
.ds-mod__versi { font-size: var(--ds-t-11); color: var(--ds-ink-3); }

.ds-mod__kaki .sr-dsk-buka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-touch);
  min-width: var(--ds-touch);
  padding-inline: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: var(--ds-paper);
  font-size: var(--ds-t-12);
  font-weight: var(--ds-w-med);
  color: var(--ds-ink-2);
  cursor: pointer;
}
.ds-mod__kaki .sr-dsk-buka:hover { background: var(--ds-ground); color: var(--ds-ink); }
.ds-mod__kaki .sr-dsk-buka:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }

@media (max-width: 620px) {
  .ds-mods { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   TAHAP 4A / HALAMAN MODUL DESAIN SISTEM

   KEADAAN SEBELUMNYA: kolom ISIAN yang menempel (sticky) di kiri, sedangkan
   hasilnya ikut tergulir. Di layar sempit hasil malah DIPINDAH KE ATAS form
   (order:1), sehingga untuk melihat akibat sebuah perubahan pengguna harus
   menggulir ke atas lagi -- keluhan yang ditulis pemilik.

   SESUDAH: yang menempel adalah blok HASIL HIDUP.
     - layar >= 960px : hasil menempel di KANAN, sejajar isian.
     - layar < 960px  : tidak ada "kanan", jadi hasil menjadi BILAH RINGKAS
       yang menempel di ATAS layar dan tetap terlihat selagi isian diisi;
       isian ada di bawahnya, dan rincian hasil tersimpan paling bawah.
   ========================================================================== */
.ds-hasil-hidup { z-index: 5; }

.ds-hasil-status {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--ds-sp-2);
  border-radius: var(--ds-r-pill);
  font-size: var(--ds-t-11);
  font-weight: var(--ds-w-head);
}
.ds-hasil-status[data-nada="abu"] { background: var(--ds-ground); color: var(--ds-ink-3); }
.ds-hasil-status[data-nada="hijau"] { background: #E8F1E6; color: #2F6B3A; }
.ds-hasil-status[data-nada="kuning"] { background: #FBF0D8; color: #AE6108; }
.ds-hasil-status[data-nada="merah"] { background: #F7E3DC; color: #9B3B20; }

.ds-hasil-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-3);
  margin-top: var(--ds-sp-3);
}

/* Saat permintaan sedang berjalan, angka diredupkan sedikit -- tanpa
   menyembunyikannya, supaya angka lama masih bisa dibaca. */
.ds-hasil-hidup[data-sibuk] .ds-hasil-grid { opacity: .55; }

.ds-hasil-pesan {
  margin: var(--ds-sp-2) 0 0;
  font-size: var(--ds-t-12);
  color: #AE6108;
}

.ds-hasil-catatan {
  list-style: none;
  margin: var(--ds-sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-2);
}
.ds-hasil-catatan li {
  font-size: var(--ds-t-12);
  line-height: 1.45;
  color: var(--ds-ink-2);
  padding-left: var(--ds-sp-3);
  border-left: 2px solid var(--ds-line);
}
.ds-hasil-catatan li[data-nada="merah"] { border-left-color: #9B3B20; color: #9B3B20; }
.ds-hasil-catatan li[data-nada="kuning"] { border-left-color: #AE6108; }

/* ------------------------------------- sakelar dasar perhitungan */
.ds-ms-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}
.ds-ms-sakelar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-2);
}
.ds-ms-pilih {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-2);
  min-height: var(--ds-touch);
  padding-inline: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: var(--ds-paper);
  font-size: var(--ds-t-13);
  font-weight: var(--ds-w-med);
  color: var(--ds-ink-2);
  cursor: pointer;
}
/* Yang terpilih ditandai latar DAN tebalnya huruf, bukan warna saja. */
.ds-ms-pilih:has(input:checked) {
  border-color: var(--ds-sun-line);
  background: var(--ds-sun-soft);
  color: var(--ds-sun-deep);
  font-weight: var(--ds-w-head);
}
.ds-ms-pilih:focus-within { outline: 2px solid var(--ds-sun); outline-offset: 2px; }

/* --------------------------------------- kotak kesalahan satuan */
.ds-ms-satuan {
  margin-top: var(--ds-sp-2);
  padding: var(--ds-sp-3);
  border: 1px solid #D8B4A4;
  border-radius: var(--ds-r-2);
  background: #FDF4F1;
}
.ds-ms-satuan[hidden] { display: none; }
.ds-ms-satuan p {
  margin: 0;
  font-size: var(--ds-t-12);
  line-height: 1.5;
  color: #7A2E18;
}
.ds-ms-perbaiki {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-touch);
  margin-top: var(--ds-sp-2);
  padding-inline: var(--ds-sp-3);
  border: 1px solid #9B3B20;
  border-radius: var(--ds-r-pill);
  background: var(--ds-paper);
  font: inherit;
  font-size: var(--ds-t-12);
  font-weight: var(--ds-w-head);
  color: #9B3B20;
  cursor: pointer;
}
.ds-ms-perbaiki:hover { background: #F7E3DC; }
.ds-ms-perbaiki:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }

/* ================================================= layar >= 960px */
@media (min-width: 960px) {
  /* Isian TIDAK lagi yang menempel; hasil yang menempel. */
  .sr-pj-work > .sr-pj-work__in { position: static; }
  .ds-hasil-hidup { position: sticky; top: 12px; }
}

/* ================================================= layar < 960px */
@media (max-width: 959px) {
  /* Anak-anak kolom hasil ikut masuk grid induk supaya urutannya bisa
     disusun satu per satu: hasil hidup (1), isian (2), hasil tersimpan (3).
     Sebelumnya SELURUH kolom hasil dipindah ke atas form. */
  .sr-pj-work > .sr-pj-work__out { display: contents; }
  .sr-pj-work > .sr-pj-work__in { order: 2; position: static; }
  .sr-pj-work__out > .ds-hasil-hidup {
    order: 1;
    position: sticky;
    top: 0;
  }
  .sr-pj-work__out > .sr-pj-card:not(.ds-hasil-hidup) { order: 3; }

  /* Bilah ringkas: empat angka sebaris, huruf lebih kecil, supaya tidak
     memakan layar selagi isian diisi. */
  .ds-hasil-hidup .ds-hasil-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ds-sp-2);
  }
  .ds-hasil-hidup .ds-hasil-grid .sr-pj-kpi__nilai { font-size: var(--ds-t-13); }
  .ds-hasil-hidup .ds-hasil-grid .sr-pj-kpi__ket { display: none; }
}

@media (max-width: 520px) {
  .ds-hasil-hidup .ds-hasil-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   TAHAP 4A / PERBAIKAN DARI PENGUKURAN

   Bilah langkah modul (.sr-pj-steps) menggulung ke samping (overflow-x:auto)
   tetapi bukan "positioned ancestor". Span .sr-only di dalamnya memakai
   position:absolute, jadi ia diposisikan terhadap HALAMAN dan menarik lebar
   dokumen sampai 706 px di layar 351 px -- halaman ikut tergulir ke samping
   padahal isinya tidak.

   position:relative membuat span itu kembali diposisikan di dalam bilahnya
   dan terpotong oleh overflow-x bilah itu sendiri. Tidak ada yang berubah
   bagi pembaca layar.
   ========================================================================== */
.sr-pj-steps { position: relative; }

/* ==========================================================================
   TAHAP 4A / TARGET SENTUH 44 px untuk kontrol berdiri sendiri

   Terukur sebelum perbaikan: isian .sr-pj-fields 40,0 px; <summary>
   "n pemeriksaan lain aman" 20,0 px; label pilihan skema 42,4 px.
   Ketiganya harus disentuh untuk dipakai, jadi tidak termasuk pengecualian
   "tautan di dalam kalimat".
   ========================================================================== */
.sr-pj-fields input[type="text"],
.sr-pj-fields input[type="number"],
.sr-pj-fields input[type="email"],
.sr-pj-fields input[type="tel"],
.sr-pj-fields select,
.sr-pj-fields textarea {
  height: auto;
  min-height: var(--ds-touch);
}

.sr-pj-checks-aman > summary {
  display: flex;
  align-items: center;
  min-height: var(--ds-touch);
  cursor: pointer;
}

.sr-pj-skema-pilih label,
.sr-pj-skema label {
  min-height: var(--ds-touch);
  display: flex;
  align-items: center;
}

/* Tautan kartu skema di halaman project: terukur 42,4 px. Tautan BERDIRI
   SENDIRI, jadi dinaikkan ke 44 px. (.sr-pj-mod kini hanya dipakai kartu
   skema; kartu modul halaman project memakai .ds-mod sejak Tahap 4A.) */
a.sr-pj-mod {
  box-sizing: border-box;
  min-height: var(--ds-touch);
}

/* Tautan kembali dan tautan "Lihat hasil lengkap" di riwayat versi: terukur
   15,5 px dan 20,8 px. Keduanya tautan berdiri sendiri, dinaikkan ke 44 px.
   inline-flex + align-items supaya teksnya tetap di tengah kotak sentuhnya. */
a.sr-app-back,
.sr-mv-head a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-touch);
}

/* ==========================================================================
   TAHAP 4B: WADAH GULIR = POSITIONED ANCESTOR

   Teks khusus pembaca layar memakai position:absolute. Tanpa
   position:relative di wadah yang menggulung ke samping, teks itu
   diposisikan terhadap HALAMAN dan menarik lebar dokumen melebar,
   sehingga seluruh halaman bisa digulir ke samping walau isinya tidak.
   Terukur 354 px kelebihan di Tahap 4A. Perbaikan per kategori.
   ========================================================================== */
.ds-banding-gulir,
.ds-header nav,
.ds-tab-baris,
.ds-tabel-gulir {
  position: relative;
}

/* ==========================================================================
   TAHAP 4B / DIALOG KONFIRMASI DALAM HALAMAN (.sr-konf)

   Menggantikan confirm() bawaan peramban untuk tindakan yang tidak bisa
   dibatalkan. Polanya sama dengan pengingat panel Diskusi Project.
   ========================================================================== */
.sr-konf {
  position: fixed;
  inset: 0;
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-sp-4);
  background: rgba(var(--ds-ink-rgb), .55);
}
.sr-konf[hidden] { display: none; }

.sr-konf__kartu {
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  padding: var(--ds-sp-5);
  border-radius: var(--ds-r-3);
  background: var(--ds-paper);
  box-shadow: 0 18px 50px rgba(var(--ds-ink-rgb), .3);
}
.sr-konf__kartu strong {
  display: block;
  font-size: var(--ds-t-17);
  font-weight: var(--ds-w-head);
  letter-spacing: var(--ds-ls-snug);
  color: var(--ds-ink);
}
.sr-konf__kartu p {
  margin: var(--ds-sp-2) 0 0;
  font-size: var(--ds-t-13);
  line-height: 1.55;
  color: var(--ds-ink-2);
}
.sr-konf__aksi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-2);
  margin-top: var(--ds-sp-4);
}
.sr-konf__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-touch);
  padding-inline: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: var(--ds-paper);
  font: inherit;
  font-size: var(--ds-t-14);
  font-weight: var(--ds-w-med);
  color: var(--ds-ink);
  cursor: pointer;
}
.sr-konf__btn:hover { background: var(--ds-ground); }
.sr-konf__btn:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }
/* Tombol yang meneruskan tindakan berbahaya dibedakan warna DAN tebal huruf,
   bukan warna saja. */
.sr-konf__btn--bahaya {
  border-color: #9B3B20;
  background: #9B3B20;
  color: #fff;
  font-weight: var(--ds-w-head);
}
.sr-konf__btn--bahaya:hover { background: #7A2E18; }

/* ==========================================================================
   TAHAP 4B / TARGET SENTUH 44 px untuk dua kontrol yang terlewat

   Terukur sebelum perbaikan: isian di tabel MPPT halaman Rangkaian String
   40,0 px; ringkasan "Lihat" pada baris temuan halaman detail project
   20,8 px. Keduanya kontrol berdiri sendiri, jadi tidak termasuk
   pengecualian "tautan di dalam kalimat".
   ========================================================================== */
.smc-form-tabel input,
.smc-form-tabel select {
  box-sizing: border-box;
  min-height: var(--ds-touch);
}

.sr-pj-alert > details > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-touch);
  cursor: pointer;
}

/* ==========================================================================
   TAHAP 4B / TARGET SENTUH HALAMAN KABEL

   Lihat catatan di patch: lima pola terukur, empat dinaikkan ke 44 px, satu
   (tautan remah) dikecualikan karena tautan di dalam kalimat.
   ========================================================================== */
details.sr-pj-card > summary,
.sr-pj-card details > summary,
.sr-src-fields details > summary {
  display: flex;
  align-items: center;
  min-height: var(--ds-touch);
  cursor: pointer;
}

/* Radionya punya <label for="..."> pasangannya; labelnya yang dibuat nyaman
   disentuh, bukan bulatan radio bawaan peramban. */
.sr-src-opt > label {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-touch);
  padding-inline: var(--ds-sp-1);
  cursor: pointer;
}

.sr-rule-form input[type="text"],
.sr-rule-form input[type="number"],
.sr-rule-form select {
  box-sizing: border-box;
  min-height: var(--ds-touch);
}

/* ==========================================================================
   TAHAP 4B / TARGET SENTUH .sr-field

   Terukur 15,5 px pada delapan isian/daftar pilih di halaman Atap & Mounting.
   Kontrol berdiri sendiri, jadi dinaikkan ke 44 px.
   ========================================================================== */
.sr-field input:not([type="hidden"]),
.sr-field select,
.sr-field textarea {
  box-sizing: border-box;
  min-height: var(--ds-touch);
}

/* ==========================================================================
   TAHAP 5 / AREA OWNER, ADMIN, DAN ERP (.ds-kerja-*)

   Halaman Beranda owner, Masukan customer, dan Keuangan memakai kerangka
   layouts/sr-owner.blade.php, yang HANYA memuat ds-token.css dan berkas ini
   (tanpa sr-design-system.css dan tanpa sr-owner-workspace.css). Jadi dua
   hal yang biasanya datang dari berkas lain harus ada di sini: reset body
   dan padding dasar kolom isi.

   Rel kirinya memakai kelas .ds-ac-* dari Tahap 4A apa adanya; yang baru di
   sini hanya lencana jumlah antrean dan tanda "segera".

   Target sentuh 44px tetap aturan utama. Bekerja di 360, 390, 768, 1280,
   1440 px.
   ========================================================================== */

/* Reset halaman. Hanya untuk halaman yang memakai .ds-scope DI BODY; halaman
   lama memakai .sr-scope dan tidak ikut terpengaruh. */
body.ds-scope {
  margin: 0;
  background: var(--ds-ground);
}

/* Padding dasar kolom isi untuk layar sempit. Di halaman area customer
   aturan .sr-app-main dari sr-design-system.css (dimuat setelah berkas ini)
   menimpanya, jadi tampilan area customer TIDAK berubah. */
.ds-ac-isi {
  min-width: 0;
  padding: var(--ds-sp-5) var(--ds-sp-4) var(--ds-sp-8);
}

/* ------------------------------------------- lencana jumlah di rel kiri */
.ds-kerja-jumlah {
  margin-left: auto;
  flex: none;
  min-width: 22px;
  padding: 1px var(--ds-sp-2);
  border-radius: var(--ds-r-pill);
  background: var(--ds-ground);
  color: var(--ds-ink-3);
  font-size: var(--ds-t-12);
  font-weight: var(--ds-w-head);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.ds-kerja-jumlah.is-perlu { background: var(--ds-sun); color: #1B1200; }

.ds-kerja-segera {
  margin-left: auto;
  flex: none;
  padding: 1px var(--ds-sp-2);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  font-size: var(--ds-t-11);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
}
.ds-ac-nav__butir.is-segera { cursor: default; opacity: .6; }
.ds-kerja-keluar { margin: 0; padding-inline: var(--ds-sp-3); }

/* ------------------------------------------------ satu-satunya daftar tugas */
.ds-tugas { display: block; }
.ds-tugas > .ds-baris:last-child { border-bottom: 0; }
.ds-tugas > .ds-baris.is-nol { color: var(--ds-ink-3); }
.ds-tugas > .ds-baris.is-nol .ds-baris-judul { font-weight: var(--ds-w-reg); }
.ds-tugas-umur { color: var(--ds-bad); font-weight: var(--ds-w-head); }
.ds-tugas-aksi { margin-left: var(--ds-sp-3); flex: none; }

/* --------------------------------------------------- pembanding bulan lalu */
.ds-banding-angka {
  display: block;
  margin-top: var(--ds-sp-2);
  font-size: var(--ds-t-13);
  color: var(--ds-ink-2);
}
.ds-banding-angka.is-naik { color: var(--ds-ok); }
.ds-banding-angka.is-turun { color: var(--ds-bad); }
.ds-banding-angka.is-sama,
.ds-banding-angka.is-tidak-ada { color: var(--ds-ink-3); }

/* ---------------------------------------------- alur lima tahap (ERP) */
.ds-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ds-alur-tahap {
  box-sizing: border-box;
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-paper);
}
.ds-alur-tahap.is-sorot { border-color: var(--ds-sun-line); background: var(--ds-sun-soft); }
.ds-alur-tahap.is-sorot .ds-angka { color: var(--ds-sun-deep); }
.ds-alur-tahap > span:last-child {
  display: block;
  margin-top: var(--ds-sp-1);
  font-size: var(--ds-t-13);
  color: var(--ds-ink-3);
}

/* ------------------------------------------------- kartu masukan customer */
.ds-kutip {
  margin: var(--ds-sp-3) 0 0;
  padding-left: var(--ds-sp-4);
  border-left: 3px solid var(--ds-sun);
  font-size: var(--ds-t-17);
  line-height: 1.45;
  color: var(--ds-ink);
}
.ds-masukan-kepala {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-sp-3);
}
.ds-masukan-kepala > time { margin-left: auto; font-size: var(--ds-t-13); color: var(--ds-ink-3); }
.ds-masukan-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-sp-3);
  margin-top: var(--ds-sp-3);
  font-size: var(--ds-t-13);
  color: var(--ds-ink-2);
}
.ds-masukan-cuplik {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 38px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-1);
  background: var(--ds-ground);
  font-size: var(--ds-t-11);
  color: var(--ds-ink-3);
  text-decoration: none;
}
.ds-masukan-aksi {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-sp-2);
  margin-top: var(--ds-sp-4);
  padding-top: var(--ds-sp-3);
  border-top: 1px solid var(--ds-line);
}
.ds-masukan-aksi form { display: flex; align-items: center; gap: var(--ds-sp-2); margin: 0; }

/* -------------------------------------- lebar sempit: kolom jadi satu/dua */
@media (max-width: 1100px) {
  .ds-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .ds-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ds-grid-5 { grid-template-columns: minmax(0, 1fr); }
  .ds-tugas > .ds-baris { flex-wrap: wrap; }
  .ds-tugas-aksi { margin-left: 0; }
  .ds-masukan-kepala > time { margin-left: 0; }
}

/* ==========================================================================
   TAHAP 6 / TEMUAN 2 — PETA ALAT DIPADATKAN

   DUA SEBAB TINGGINYA, keduanya terukur di produksi 24 Oktober 2026:

    1. SEMUA KARTU SETINGGI KARTU TERPANJANG. .ds-peta-baris adalah grid
       dengan align-items bawaan (stretch), jadi kartu Matahari yang hanya
       punya 2 alat tetap dipaksa 630 px — sama dengan kartu Baterai yang
       punya 9. Terukur di 1280 px: kelima kartu 630 px.
    2. KARTU TERPANJANG MEMANG PANJANG. Baterai 562 px di 360 px, dan karena
       di ponsel kelima kartu bertumpuk, seluruh peta jadi 1.923 px.

   Perbaikan (1) satu baris: align-items:start. Perbaikan (2) di view: alat
   kelima dan seterusnya pindah ke balik <details> murni CSS.

   Lima simpul, urutan aliran listriknya, label "perlu akun", dan jumlah alat
   yang bisa dicapai TIDAK berubah.
   ========================================================================== */
.ds-peta-baris {
  align-items: start;
}

/* Pembuka "N alat lagi di simpul ini". Target sentuh 44 px, dan segitiga
   bawaan peramban dibuang supaya rupanya sejajar dengan butir alat lain. */
.ds-peta-lagi { margin-top: var(--ds-sp-1); }
.ds-peta-pembuka {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
  list-style: none;
  cursor: pointer;
  min-height: var(--ds-touch);
  padding: var(--ds-sp-2) var(--ds-sp-3);
  border-radius: var(--ds-r-2);
  font-size: var(--ds-t-13);
  font-weight: var(--ds-w-med);
  color: var(--ds-sun-deep);
  line-height: 1.35;
}
.ds-peta-pembuka::-webkit-details-marker { display: none; }
.ds-peta-pembuka::marker { content: ""; }
.ds-peta-pembuka::after { content: "\203A"; margin-left: auto; }
.ds-peta-lagi[open] > .ds-peta-pembuka::after { content: "\2039"; }
.ds-peta-pembuka:hover { background: var(--ds-sun-soft); }
.ds-peta-pembuka:focus-visible { outline: 2px solid var(--ds-sun); outline-offset: 2px; }