/* Token warna dan ukuran. Nilai dan alasannya ada di DESIGN.md. */
/* IBM Plex Sans, satu file variabel (berat 100-700), huruf latin. Lisensi: assets/fonts/OFL.txt */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin.woff2?v=e2291e842c") format("woff2");
}

:root {
  color-scheme: light dark;
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #EEF1F5;
  --text: #18212F;
  --text-2: #475467;
  --line: #D5DBE3;
  --line-strong: #7B8798;
  --navy: #1E3A5F;
  --navy-hover: #142A47;
  --navy-tint: #E7EDF5;
  --on-navy: #FFFFFF;
  --danger: #B42318;

  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 1120px;
  --prose: 720px;
  --gutter: 16px;
  --space-section: 40px;
  --r-control: 4px;
  --r-card: 6px;
  --speed: 150ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1520;
    --surface: #151F2D;
    --surface-2: #1B2738;
    --text: #E7ECF2;
    --text-2: #A8B3C2;
    --line: #2A3749;
    --line-strong: #6E7C90;
    --navy: #9FBBE0;
    --navy-hover: #BFD2EC;
    --navy-tint: #1F3150;
    --on-navy: #0E1520;
    --danger: #F59A8F;
  }
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}

@media (min-width: 1024px) {
  :root { --space-section: 64px; }
}

/* Dasar */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
}

@media (min-width: 1024px) {
  body { font-size: 1.0625rem; }
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  margin: 0 0 0.5em;
  line-height: 1.25;
  font-weight: 600;
  color: var(--text);
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.5rem); }
h3 { font-size: 1.125rem; }

p, ul, ol, dl, table, address { margin: 0 0 1rem; }
address { font-style: normal; }
ul, ol { padding-left: 1.25rem; }
li + li { margin-top: 0.35rem; }

a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--speed), text-decoration-thickness var(--speed);
}
a:hover { color: var(--navy-hover); text-decoration-thickness: 2px; }

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

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lompat {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--navy);
  color: var(--on-navy);
  border-radius: var(--r-control);
}
.lompat:focus { top: 8px; }

.wadah {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prosa { max-width: var(--prose); }
/* Kalau dipasang bersama .wadah, kolom teks tetap rata kiri dengan judul halaman */
.wadah.prosa { max-width: var(--max); }
.wadah.prosa > * { max-width: var(--prose); }

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

/* Header dan menu */
.kepala {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
/* Pemilih bahasa: bilah tipis di atas header, rata kanan. */
.bilah-bahasa { border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 0.8125rem; }
.bahasa { display: flex; justify-content: flex-end; gap: 4px; list-style: none; margin: 0; padding: 0; }
.bahasa li { margin: 0; }
.bahasa a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 36px; padding: 0 8px;
  color: var(--text-2); text-decoration: none; font-weight: 500; letter-spacing: 0.02em;
}
.bahasa a:hover { color: var(--navy); }
.bahasa a[aria-current="true"] { color: var(--navy); font-weight: 600; box-shadow: inset 0 -2px 0 var(--navy); }
@media (pointer: fine) { .bahasa a { min-height: 30px; } }

.kepala-baris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 64px;
  padding-block: 10px;
}
.merek {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.merek:hover { color: var(--text); }
.merek img { width: auto; height: 44px; }
@media (max-width: 380px) { .merek img { height: 38px; } }

.menu-tombol {
  display: none;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.js .menu-tombol { display: inline-flex; align-items: center; }

.navigasi { flex-basis: 100%; }
.js .navigasi { display: none; }
.js .navigasi.terbuka { display: block; }

.nav-daftar {
  list-style: none;
  margin: 0;
  padding: 8px 0 12px;
  border-top: 1px solid var(--line);
}
.nav-daftar li { margin: 0; }
.nav-daftar a:not(.tombol),
.nav-sub-tombol {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  color: var(--text);
  text-decoration: none;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.nav-daftar a:not(.tombol):hover,
.nav-sub-tombol:hover { color: var(--navy); }
.nav-daftar a[aria-current="page"]:not(.tombol) {
  color: var(--navy);
  font-weight: 600;
}

.nav-sub-tombol::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav-sub-tombol[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
[data-aktif] > .nav-sub-tombol { color: var(--navy); font-weight: 600; }

.nav-sub { list-style: none; margin: 0; padding: 0 0 4px 16px; }
.js .nav-sub:not(.terbuka) { display: none; }
.no-js .nav-sub-tombol { display: none; }
.no-js .nav-sub { padding-left: 0; }

.nav-aksi { padding-top: 8px; }
.nav-aksi .tombol { width: 100%; }

@media (min-width: 1024px) {
  .js .menu-tombol { display: none; }
  .navigasi, .js .navigasi { display: block; flex-basis: auto; }
  .nav-daftar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border-top: 0;
  }
  .nav-daftar a:not(.tombol),
  .nav-sub-tombol {
    width: auto;
    padding: 8px 10px;
    border-bottom: 2px solid transparent;
  }
  .nav-daftar a[aria-current="page"]:not(.tombol) { border-bottom-color: var(--navy); }
  .nav-grup { position: relative; }
  .js .nav-sub {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    min-width: 200px;
    padding: 6px 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
  }
  .js .nav-sub a:not(.tombol) { width: 100%; padding: 8px 16px; border-bottom: 0; }
  .no-js .nav-sub { display: flex; }
  .nav-aksi { padding: 0 0 0 8px; }
  .nav-aksi .tombol { width: auto; }
}

/* Laptop kecil: menu dirapatkan supaya tetap satu baris dengan logo */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav-daftar { gap: 2px; }
  .nav-daftar a:not(.tombol), .nav-sub-tombol { padding-inline: 6px; }
  .nav-aksi { padding-left: 6px; }
}

/* Tombol */
.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--speed), color var(--speed), border-color var(--speed);
}
.tombol-utama { background: var(--navy); color: var(--on-navy); }
.tombol-utama:hover { background: var(--navy-hover); color: var(--on-navy); }
.tombol-kedua { background: transparent; color: var(--navy); border-color: var(--navy); }
.tombol-kedua:hover { background: var(--navy-tint); color: var(--navy); }
.tombol[aria-busy="true"] { cursor: progress; }

.aksi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Bagian halaman */
.bagian { padding-block: var(--space-section); }
.bagian-pita { background: var(--surface-2); }
.bagian + .bagian:not(.bagian-pita) { padding-top: 0; }
.bagian-pita + .bagian { padding-top: var(--space-section); }
.pembuka + .bagian { padding-top: 8px; }

.kepala-halaman { padding-block: 32px 8px; }
@media (min-width: 1024px) {
  .kepala-halaman { padding-block: 48px 16px; }
}

.remah ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 0.875rem;
  color: var(--text-2);
}
.remah li { margin: 0; }
.remah li + li::before { content: "/"; margin: 0 8px; color: var(--line-strong); }
.remah a { color: var(--text-2); }

.pengantar {
  font-size: 1.125rem;
  color: var(--text-2);
  max-width: 62ch;
}

.catatan-kecil { font-size: 0.9375rem; color: var(--text-2); }

.tautan-lanjut { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.tautan-baris a { display: inline-flex; align-items: center; min-height: 44px; }

/* Pembuka beranda */
.pembuka { padding-block: 32px var(--space-section); }
.pembuka-grid { display: grid; gap: 32px; }
.pembuka h1 { max-width: 24ch; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); }
@media (min-width: 1024px) {
  .pembuka { padding-top: 56px; }
  .pembuka-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: start; }
}

/* Bukti AI yang live di pembuka beranda */
.bukti-ai-judul { font-size: 1rem; margin-bottom: 12px; color: var(--text-2); font-weight: 500; }
.bukti-ai-daftar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.bukti-ai-daftar > li { margin: 0; }
.bukti-ai-daftar img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-2);
  margin-bottom: 10px;
}
.bukti-ai-daftar h3 { font-size: 1rem; margin-bottom: 2px; }
.bukti-ai-daftar p { font-size: 0.9375rem; color: var(--text-2); margin-bottom: 0; }
.bukti-ai-daftar a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
@media (min-width: 640px) and (max-width: 1023px) {
  .bukti-ai { max-width: 560px; }
}

/* Kartu dan daftar data (motif "baris yang bisa diperiksa") */
.kartu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px;
}
.kartu-judul { font-size: 1rem; margin-bottom: 12px; }
.kartu-data-beranda { max-width: 720px; container-type: inline-size; }

/* Di kartu yang cukup lebar, label dan nilai berjajar seperti formulir resmi */
@container (min-width: 440px) {
  .data-daftar > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 16px; align-items: baseline; }
  .data-daftar dd { margin: 0; }
}

.data-daftar { margin: 0 0 12px; }
.data-daftar > div {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.data-daftar > div:first-child { border-top: 0; padding-top: 0; }
.data-daftar dt { font-size: 0.8125rem; color: var(--text-2); }
.data-daftar dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }

/* Tabel data: berubah jadi daftar bertumpuk di HP */
.tabel-data {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
}
.tabel-data th, .tabel-data td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line);
}
.tabel-data thead th {
  background: var(--surface-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-2);
  border-top: 0;
}
.tabel-data tbody th { font-weight: 600; }
.tabel-data td { overflow-wrap: anywhere; }

@media (max-width: 639px) {
  .tabel-data, .tabel-data tbody, .tabel-data tr, .tabel-data th, .tabel-data td { display: block; }
  .tabel-data thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .tabel-data tr { padding: 12px 14px; border-top: 1px solid var(--line); }
  .tabel-data tr:first-child { border-top: 0; }
  .tabel-data th, .tabel-data td { padding: 2px 0; border-top: 0; }
  .tabel-data td:empty { display: none; }
  .tabel-data td[data-label="Isi"]::before { content: none; }
  .tabel-data td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8125rem;
    color: var(--text-2);
    margin-top: 6px;
  }
}

/* Tiga pintu masuk di beranda */
.pintu {
  display: grid;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}
.pintu > li { margin: 0; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.pintu p { color: var(--text-2); }
.tautan-baris { display: flex; flex-wrap: wrap; gap: 0 16px; }
@media (min-width: 640px) {
  .pintu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Aplikasi ringkas di beranda */
.aplikasi-ringkas {
  display: grid;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 24px 0 16px;
}
.aplikasi-ringkas > li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  align-items: start;
}
.aplikasi-ringkas img,
.produk-gambar img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-2);
}
.aplikasi-ringkas h3 { margin-bottom: 4px; }
.aplikasi-ringkas a, .tabel-data a { display: inline-flex; align-items: center; min-height: 44px; }
.aplikasi-ringkas p { margin-bottom: 6px; color: var(--text-2); }
@media (min-width: 640px) {
  .aplikasi-ringkas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .aplikasi-ringkas > li { grid-template-columns: 1fr; }
  .aplikasi-ringkas img { max-width: 240px; }
}

/* Halaman produk */
.produk-daftar { display: grid; gap: 0; margin-top: 8px; }
.produk {
  display: grid;
  gap: 16px;
  padding-block: 28px;
  border-top: 1px solid var(--line);
}
.produk:first-child { border-top: 0; }
.produk-gambar { max-width: 180px; }
.produk h2 { margin-bottom: 6px; }
.produk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; color: var(--text-2); font-size: 0.9375rem; }
@media (min-width: 640px) {
  .produk.ada-gambar { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; }
}

.status {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--navy);
  border-radius: var(--r-control);
  background: var(--navy-tint);
  color: var(--navy);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
}
.status-purwarupa { border-style: dashed; background: transparent; }
.status-permintaan { border-color: var(--line-strong); background: transparent; color: var(--text-2); }
.status-internal { background: transparent; }

.pemberitahuan {
  margin: 0 0 1.25rem;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--text);
}
.pemberitahuan p:last-child { margin-bottom: 0; }

/* Lapis teknis */
details.teknis {
  margin: 12px 0;
  border-top: 1px solid var(--line);
}
details.teknis summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-weight: 500;
  color: var(--navy);
}
details.teknis > :not(summary) { color: var(--text-2); font-size: 0.9375rem; }
details.teknis > :last-child { margin-bottom: 12px; }

/* FAQ: tiap pertanyaan bisa dibuka dan ditutup tanpa JavaScript */
.tanya {
  border-top: 1px solid var(--line);
}
.tanya:last-of-type { border-bottom: 1px solid var(--line); }
.tanya summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 10px 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.tanya summary::-webkit-details-marker { display: none; }
.tanya summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: translateY(-3px) rotate(45deg);
}
.tanya[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.tanya-isi { padding: 0 0 16px; color: var(--text); }
.tanya-isi p:last-child { margin-bottom: 0; }
.faq-kelompok { padding-block: 24px; }
.faq-kelompok h2 { margin-bottom: 12px; }

/* Tombol WhatsApp melayang, hanya di HP dan tablet */
.wa-melayang {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid var(--bg);
  border-radius: var(--r-card);
  background: var(--navy);
  color: var(--on-navy);
  font-weight: 600;
  text-decoration: none;
}
.wa-melayang:hover { background: var(--navy-hover); color: var(--on-navy); }
body:has(.wa-melayang) .kaki { padding-bottom: 72px; }
@media (min-width: 1024px) {
  .wa-melayang { right: 24px; bottom: 24px; }
}

/* Portofolio di Rekam Jejak */
.porto { display: grid; gap: 24px; margin-bottom: 40px; }
.porto-gambar { display: grid; gap: 12px; }
.porto-gambar img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-card); }
@media (min-width: 1024px) {
  .porto { grid-template-columns: minmax(0, 1fr) minmax(0, var(--prose)); gap: 48px; align-items: start; }
}

/* Halaman detail produk */
.produk-detail { display: grid; gap: 24px; }
.produk-detail .produk-gambar img { max-width: 240px; border: 1px solid var(--line); border-radius: var(--r-card); }
@media (min-width: 1024px) {
  .produk-detail { grid-template-columns: 240px minmax(0, var(--prose)); gap: 48px; align-items: start; }
}

/* Artikel */
.artikel-meta { color: var(--text-2); font-size: 0.9375rem; }
.artikel-daftar { list-style: none; padding: 0; }
.artikel-daftar li { padding: 20px 0; border-top: 1px solid var(--line); }
.artikel-daftar h2 { font-size: 1.25rem; margin-bottom: 4px; }
.artikel-sumber li { overflow-wrap: anywhere; }
.draf-tanda { margin: 0; padding: 8px 16px; background: var(--danger); color: #FFFFFF; font-weight: 600; text-align: center; }

/* Kit Media: contoh logo di latar terang dan gelap */
.logo-contoh { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0 24px; }
.logo-contoh img { width: auto; height: 48px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: #FFFFFF; }
.logo-contoh img + img { background: #12172A; }

/* Dokumen resmi (/brosur/) */
.dokumen-info { color: var(--text-2); font-size: 0.9375rem; }
.dokumen-item .aksi { margin-top: 16px; }

/* Layanan: daftar dua kolom di layar lebar */
.daftar-layanan { padding-left: 1.25rem; }
@media (min-width: 1024px) {
  .daftar-layanan { columns: 2; column-gap: 40px; }
  .daftar-layanan li { break-inside: avoid; }
}

.kelompok { padding-block: 28px; border-top: 1px solid var(--line); }
.kelompok:first-of-type { border-top: 0; padding-top: 8px; }
.kelompok-judul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 0.6em; }
.kelompok-judul h2 { margin: 0; }

/* Langkah kerja sama */
.langkah { list-style: none; counter-reset: langkah; padding: 0; margin: 16px 0 0; }
.langkah > li {
  counter-increment: langkah;
  position: relative;
  margin: 0;
  padding: 0 0 18px 44px;
}
.langkah > li::before {
  content: counter(langkah);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--navy);
  border-radius: var(--r-control);
  color: var(--navy);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.langkah strong { display: block; }

/* Daftar definisi umum */
.definisi > div { padding: 12px 0; border-top: 1px solid var(--line); }
.definisi > div:first-child { border-top: 0; padding-top: 0; }
.definisi dt { font-weight: 600; }
.definisi dd { margin: 4px 0 0; }

/* Formulir */
.formulir { max-width: 640px; }
.isian { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.isian label, .isian legend {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}
.isian legend { padding: 0; }
.petunjuk { margin: 0 0 6px; font-size: 0.875rem; color: var(--text-2); }
.wajib { font-weight: 400; color: var(--text-2); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
textarea { min-height: 120px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-2); opacity: 1; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }

.galat { margin: 6px 0 0; color: var(--danger); font-size: 0.9375rem; font-weight: 500; }
.galat-umum {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--danger);
  border-radius: var(--r-control);
  color: var(--danger);
  background: var(--surface);
}
.berhasil {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--navy);
  border-radius: var(--r-control);
  background: var(--navy-tint);
  color: var(--text);
}

.perangkap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Pilihan radio berbentuk kotak (paket, nominal, metode bayar) */
.pilihan-daftar { display: grid; gap: 8px; }
@media (min-width: 640px) {
  .pilihan-daftar.dua-kolom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pilihan {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  cursor: pointer;
}
.pilihan:has(input:checked) { border-color: var(--navy); border-width: 2px; padding: 11px 13px; background: var(--navy-tint); }
.pilihan input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--navy); flex: none; }
.pilihan img { width: 40px; height: 40px; object-fit: contain; background: #FFFFFF; border-radius: var(--r-control); padding: 4px; flex: none; }
.pilihan-teks { display: grid; gap: 2px; }
.pilihan-nama { font-weight: 600; }
.pilihan-harga { font-variant-numeric: tabular-nums; }
.pilihan-ket { font-size: 0.875rem; color: var(--text-2); }
.status-muat { margin: 0; color: var(--text-2); }

/* Kontak: dua kolom di layar lebar */
.kontak-grid { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .kontak-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; }
}
.peta {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-2);
}

/* Status pembayaran */
.status-bayar { max-width: var(--prose); }
.status-bayar .data-daftar { margin-top: 16px; }

/* Footer */
.kaki {
  margin-top: var(--space-section);
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: 0.9375rem;
}
.kaki-isi { display: grid; gap: 32px; padding-block: 40px 24px; }
.kaki-nama { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; }
/* Empat kelompok tautan: 2 kolom di HP, 4 kolom mulai tablet. */
.kaki-grup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.kaki-judul { font-size: 0.875rem; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.kaki-tautan ul, .kaki-hukum { list-style: none; padding: 0; margin: 0; }
.kaki-tautan li, .kaki-hukum li { margin: 0; }
.kaki-tautan a, .kaki-hukum a { display: inline-flex; align-items: center; min-height: 44px; }
.kaki-bawah {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px;
  padding-block: 12px 24px; border-top: 1px solid var(--line); font-size: 0.875rem;
}
.kaki-bawah p { margin: 0; }
.kaki-hukum { display: flex; flex-wrap: wrap; gap: 0 20px; }
/* Dengan mouse, tautan tidak perlu setinggi target jari, jadi kolom lebih rapat. */
@media (pointer: fine) {
  .kaki-tautan a, .kaki-hukum a { min-height: 32px; }
}
@media (min-width: 640px) {
  .kaki-grup { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (min-width: 1024px) {
  .kaki-isi { grid-template-columns: minmax(0, 1.35fr) minmax(0, 2.65fr); gap: 48px; }
}

/* Gerakan dimatikan untuk yang memintanya */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* Cetak: pejabat sering mencetak halaman legalitas dan kerja sama */
@media print {
  .menu-tombol, .navigasi, .bilah-bahasa, .kaki-grup, .kaki-hukum, .aksi, .lompat, .wa-melayang { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}