@import url("fonts.css");

/* ==========================================================================
   Tes MBTI — Indonesia
   --------------------------------------------------------------------------
   Token mengikuti W3C DTCG (design-tokens/community-group) dan dilapisi
   primitive -> semantic -> composite:

     primitive  nilai mentah, tidak dipakai langsung di komponen
     semantic   peran (bg-canvas, teks-utama), titik ganti tema
     composite  potongan berulang (kartu, tombol, pilihan)

   Nol dependensi, tanpa build. Buka langsung dari file://
   Riset yang jadi dasar file ini: DESIGN-RESEARCH.md
   ========================================================================== */

/* ── PRIMITIVE: nilai mentah ─────────────────────────────────────────── */

:root {
  /* Abu netral dengan sedikit ungu, supaya tidak terasa clinical */
  --p-abu-0:   #ffffff;
  --p-abu-50:  #f7f8fb;
  --p-abu-100: #eceef4;
  --p-abu-200: #dde1ea;
  --p-abu-300: #c3cad9;
  --p-abu-400: #9aa4b8;
  --p-abu-500: #737e94;
  --p-abu-600: #566074;
  --p-abu-700: #3d4658;
  --p-abu-800: #262d3b;
  --p-abu-900: #171c26;
  --p-abu-950: #0e1219;

  /* Aksen: kardinal/oxblood. Bukan indigo -- ungu di atas abu tua adalah
     tanda "AI generik". Merah gelap ini lebih khas dan tetap terbaca. */
  --p-rosso-200: #e8b4ad;
  --p-rosso-300: #d18a82;
  --p-rosso-400: #b8524a;
  --p-rosso-500: #97362f;
  --p-rosso-600: #7a2520;

  --p-hijau-300: #8fc7ab;
  --p-hijau-400: #5da283;
  --p-hijau-500: #3f7d63;

  --p-kuning-300: #d9b779;
  --p-kuning-400: #bd9a5c;

  --p-tinta-300: #93a9c4;
  --p-tinta-400: #6f8aab;
  --p-tinta-500: #4f6a8a;

  /* Ruang — satu skala ritme untuk gap, padding, dan ukuran */
  --p-r-1: 0.25rem;
  --p-r-2: 0.5rem;
  --p-r-3: 0.75rem;
  --p-r-4: 1rem;
  --p-r-5: 1.5rem;
  --p-r-6: 2rem;
  --p-r-7: 3rem;

  --p-radius-sm: 8px;
  --p-radius:    12px;
  --p-radius-lg: 18px;
  --p-radius-pill: 999px;

  /* Gerak */
  --p-dur-cepat: 120ms;
  --p-dur-sedang: 240ms;
  --p-dur-lambat: 400ms;
  --p-ease-masuk: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Tipografi. Fraunces untuk judul (serif optik, variabel), IBM Plex Sans
     untuk isi. Font diunduh lokal oleh tools/fetch-fonts.sh, jadi tidak ada
     permintaan jaringan dan tidak perlu build step. */
  --p-font: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --p-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --p-font-angka: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Skala tipografi: lompatan besar antara judul dan teks, sesuai aturan
     editorial. 14px body lalu judul 40-64px. */
  --p-t-1: 0.8125rem;   /* 13  label kecil */
  --p-t-2: 0.9375rem;   /* 15  teks sekunder */
  --p-t-3: 1.0625rem;   /* 17  body */
  --p-t-4: 1.375rem;    /* 22  sub-judul */
  --p-t-5: 2rem;        /* 32  judul kartu */
  --p-t-6: 3rem;        /* 48  judul layar */
  --p-t-7: 4.5rem;      /* 72  hero */
}

/* ── SEMANTIC: peran. Hanya lapis ini yang berubah saat ganti tema ────── */

:root {
  --bg-canvas:  #12141b;
  --bg-kartu:   #191c24;
  --bg-kartu-2: #22262f;

  --garis-halus:   #232833;
  --garis-standar: #343b49;

  /* Diuji terhadap foto kain, bukan kanvas polos. Angkanya dinaikkan karena
     wash di atas foto menaikkan luminansi latar efektif. */
  --teks-utama:    var(--p-abu-100);
  --teks-sekunder: var(--p-abu-300);
  --teks-redup:    var(--p-abu-400);
  --teks-kebalikan: #fdfcfa;

  /* Aksen sedikit lebih lembut supaya tidak terasa "menolak". */
  --aksen:        var(--p-rosso-300);
  --aksen-lembut: rgba(209, 138, 130, 0.13);
  /* aksen-teks dipakai untuk heading dan kata yang ditebalkan, jadi harus
     terang: 3.80:1 di desktop dan 3.70:1 di mobile sebelum diperbaiki. */
  --aksen-teks:   #f0c4bd;

  --sukses:        var(--p-hijau-400);
  --sukses-lembut: rgba(93, 162, 131, 0.14);
  --peringatan:    #d97b6c;
  --netral:        var(--p-kuning-400);

  --fokus: var(--p-tinta-300);

  /* Ritme vertikal: semua jarak memakai kelipatan yang sama */
  --ritme-1: var(--p-r-1);
  --ritme-2: var(--p-r-2);
  --ritme-3: var(--p-r-3);
  --ritme-4: var(--p-r-4);
  --ritme-5: var(--p-r-5);
  --ritme-6: var(--p-r-6);
  --ritme-7: var(--p-r-7);
}

/* ── RESET ────────────────────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  /* Lapisan: dua pantulan cahaya hangat di atas gradien dasar. */
  /* Lapisan, dari belakang ke depan:
     gambar kain linen (sangat samar), dua pantulan cahaya hangat, lalu
     gradien dasar. Urutan itu penting: yang paling pekat paling belakang. */
  background:
    radial-gradient(ellipse 80% 55% at 18% -8%, rgba(209, 138, 130, 0.11) 0%, transparent 62%),
    radial-gradient(ellipse 70% 50% at 88% 4%, rgba(93, 162, 131, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #12141b 0%, #0c0e13 100%);
  background-attachment: fixed;
  color: var(--teks-utama);
  font-family: var(--p-font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--p-serif);
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.015em;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Fokus keyboard: selalu terlihat */
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-radius: var(--p-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ── LAYOUT ───────────────────────────────────────────────────────────── */

/* Lewati ke konten — hanya muncul saat keyboard */
.lewati {
  position: absolute;
  left: var(--ritme-4);
  top: var(--ritme-4);
  z-index: 10;
  padding: var(--ritme-2) var(--ritme-4);
  background: var(--aksen);
  color: var(--teks-kebalikan);
  font-weight: 600;
  border-radius: var(--p-radius-sm);
  transform: translateY(-200%);
  transition: transform var(--p-dur-cepat) var(--p-ease-masuk);
}
.lewati:focus { transform: none; }

/* Lapisan kabut di atas gambar: menjaga kontras teks tanpa mengurangi
   kesan lembut dari kainnya. */
.kabut {
  position: fixed;
  /* fixed inset:0 hanya setinggi satu viewport, jadi teksturnya berhenti
     di tengah halaman yang lebih panjang. 130vh menutupi sampai bawah. */
  inset: 0 0 auto 0;
  height: 130vh;
  z-index: -1;
  pointer-events: none;
  /* Kain linen di lapisan ini, bukan di body. Body memakai
     background-attachment: fixed, yang hanya menutup satu tinggi layar --
     makanya teksturnya berhenti di tengah halaman. */
  /* Lapisan atas dulu: wash gelap untuk menjaga kontras teks.
     Lapisan bawah: foto kainnya. Urutan ini tidak boleh dibalik --
     shorthand background melukis lapis pertama di paling atas. */
  background:
    linear-gradient(180deg, rgba(18, 20, 27, 0.82) 0%, rgba(11, 13, 18, 0.92) 100%),
    url("../images/linen-rose.jpg") center 30% / cover no-repeat;
}

.bungkus {
  max-width: 44rem;
  margin-inline: auto;
  padding: var(--ritme-5) var(--ritme-4) var(--ritme-7);
}

.layar { display: none; }
.layar.aktif {
  display: block;
  animation: masuk var(--p-dur-sedang) var(--p-ease-masuk);
}

@keyframes masuk {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 48rem) {
  .bungkus { padding-inline: var(--ritme-6); }
}


/* ─── Hero: editorial, bukan "centered hero + 3 feature + CTA" ─────────── */

.pembuka { text-align: left; padding-top: var(--ritme-5); }

@media (min-width: 56rem) {
  .pembuka {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--ritme-7);
    align-items: center;
    text-align: left;
  }
}

/* Ilustrasi: empat bujur yang membentuk "grid" MBTI.
   SVG inline, jadi tidak ada file gambar dan tidak ada permintaan jaringan. */
.visi {
  position: relative;
  aspect-ratio: 1;
  max-width: 22rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ritme-3);
  padding: var(--ritme-3);
  border: 1px solid var(--garis-halus);
  border-radius: var(--p-radius-lg);
  background: linear-gradient(150deg, rgba(184, 82, 74, 0.07), rgba(93, 162, 131, 0.05));
}
@media (min-width: 56rem) {
  .visi { margin-inline: 0; justify-self: end; width: 100%; }
}

.kotak-visi {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--p-radius);
  border: 1px solid var(--garis-halus);
  background: var(--bg-kartu-2);
  transition: border-color var(--p-dur-sedang) var(--p-ease-masuk),
              transform var(--p-dur-sedang) var(--p-ease-masuk);
  animation: masukKotak 600ms var(--p-ease-masuk) backwards;
}
.kotak-visi:nth-child(1) { animation-delay: 80ms; }
.kotak-visi:nth-child(2) { animation-delay: 160ms; }
.kotak-visi:nth-child(3) { animation-delay: 240ms; }
.kotak-visi:nth-child(4) { animation-delay: 320ms; }

@keyframes masukKotak {
  from { opacity: 0; transform: scale(0.9) rotate(-2deg); }
  to   { opacity: 1; transform: none; }
}

.kotak-visi svg { width: 46%; height: 46%; }
.kotak-visi:nth-child(1) { color: var(--p-rosso-300); }
.kotak-visi:nth-child(2) { color: var(--p-tinta-300); }
.kotak-visi:nth-child(3) { color: var(--p-hijau-300); }
.kotak-visi:nth-child(4) { color: var(--p-kuning-300); }

/* Tipografi hero */
.pembuka h1 {
  font-size: clamp(2.75rem, 11vw, var(--p-t-7));
  font-weight: 500;
  margin: var(--ritme-3) 0 var(--ritme-3);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.pembuka h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--aksen-teks);
}

.ringkasan {
  color: var(--teks-sekunder);
  font-size: var(--p-t-3);
  max-width: 42ch;
  margin-inline: 0;
}

.daftar-fakta {
  display: grid;
  gap: var(--ritme-2);
  text-align: left;
  margin: var(--ritme-5) 0 var(--ritme-6);
  max-width: 42ch;
  color: var(--teks-sekunder);
  font-size: var(--p-t-2);
}

@media (min-width: 56rem) {
  .daftar-fakta { margin-inline: 0; }
}

/* Lencana dipindah jadi kicker kecil di atas judul */
.lencana {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--p-t-1);
  font-weight: 600;
  /* Pelat sendiri. Kalau teksnya mengikuti latar foto, kontrasnya ikut berubah
     setiap kali lebar layar atau posisi di belakangnya berubah -- pernah diukur
     4.18:1 di desktop dan 4.44:1 di mobile, keduanya di bawah 4.5.
     Dengan pelat gelap sendiri, kontrasnya tetap. */
  color: #cfeede;
  background: rgba(16, 24, 24, 0.72);
  border: 1px solid rgba(126, 200, 170, 0.22);
  border-radius: var(--p-radius-pill);
  padding: var(--ritme-1) var(--ritme-3);
}

/* ─── Penenang: tiga jawaban atas keberatan ─────────────────────────────── */

.tenang {
  display: grid;
  gap: var(--ritme-4);
  margin-top: var(--ritme-7);
  padding-top: var(--ritme-6);
  border-top: 1px solid var(--garis-halus);
}
/* .pembuka jadi dua kolom di layar lebar. .tenang harus melewati kolom
   teks itu dan memakai lebar penuh, kalau tidak tiga kolomnya saling
   berebut ruang di 358px dan teks pecah satu kata per baris. */
@media (min-width: 56rem) {
  .tenang { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
}

.tenang-item { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--ritme-2); }

.tenang-item h3 {
  font-family: var(--p-font);
  font-size: var(--p-t-2);
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 var(--ritme-1);
  color: var(--teks-utama);
}
.tenang-item p {
  font-size: var(--p-t-2);
  line-height: 1.55;
  color: var(--teks-sekunder);
}
.tenang-item .ikon { color: var(--p-hijau-400); margin-top: 0.2em; }

/* ─── Ikon sebaris: garis tipis, ukuran lewat currentColor ────────────── */

.ikon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.18em;
}

/* Judul kartu memakai ikon, jadi ada ruang untuk jaraknya */
.kartu h3 { display: flex; align-items: center; gap: var(--ritme-2); }
.kartu h3 .ikon { color: var(--aksen-teks); }

.tombol .ikon { width: 1.05em; height: 1.05em; }

/* Daftar centang/silang memakai ikon, bukan glyph teks */
.daftar-tick li::before,
.daftar-silang li::before {
  content: none;
}
.daftar-tick li, .daftar-silang li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--ritme-2);
  align-items: start;
  padding-left: 0;
}
.daftar-tick .ikon { color: var(--sukses); margin-top: 0.22em; }
.daftar-silang .ikon { color: var(--peringatan); margin-top: 0.22em; }

/* Kode tipe memakai serif dengan tracking lebar */
.kode-tipe {
  font-family: var(--p-serif);
  font-size: clamp(3rem, 15vw, 4.75rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--aksen-teks);
}

/* Label kecil konsisten */
.label-dimensi {
  font-family: var(--p-font);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--p-t-1);
  font-weight: 600;
  color: var(--aksen-teks);
}

.mutiara {
  font-family: var(--p-serif);
  font-size: var(--p-t-4);
  font-style: italic;
  font-weight: 400;
  color: var(--netral);
}

/* ── COMPOSITE: tombol ────────────────────────────────────────────────── */

.tombol {
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ritme-2);
  padding: var(--ritme-3) var(--ritme-5);
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--p-radius);
  cursor: pointer;
  background: var(--bg-kartu-2);
  color: var(--teks-utama);
  transition: background var(--p-dur-cepat) var(--p-ease-masuk),
              border-color var(--p-dur-cepat) var(--p-ease-masuk),
              transform var(--p-dur-cepat) var(--p-ease-masuk);
}
.tombol:hover:not(:disabled) { transform: translateY(-1px); }
.tombol:active:not(:disabled) { transform: translateY(0); }
.tombol:disabled { opacity: 0.35; cursor: not-allowed; }

.tombol-utama { background: var(--aksen); color: var(--teks-kebalikan); }
.tombol-utama:hover:not(:disabled) { background: var(--p-rosso-300); }

.tombol-sekar {
  background: transparent;
  border-color: var(--garis-standar);
  color: var(--teks-sekunder);
}
.tombol-sekar:hover:not(:disabled) { border-color: var(--aksen); color: var(--teks-utama); }

.tombol-besar { padding: var(--ritme-4) var(--ritme-6); font-size: 1.0625rem; }

/* ── COMPOSITE: kartu ─────────────────────────────────────────────────── */

.kartu {
  background: var(--bg-kartu);
  border: 1px solid var(--garis-halus);
  border-radius: var(--p-radius-lg);
  padding: var(--ritme-5);
}
.kartu + .kartu { margin-top: var(--ritme-4); }

.kartu h3 { font-size: var(--p-t-4); margin-bottom: var(--ritme-2); }

/* ─── Layar mulai ─────────────────────────────────────────────────────── */

.pembuka h1 {
  font-size: clamp(2.5rem, 9vw, 3.5rem);
  margin: var(--ritme-4) 0 var(--ritme-2);
}

.ringkasan {
  color: var(--teks-sekunder);
  font-size: 1.0625rem;
  max-width: 34ch;
  margin-inline: auto;
}

.daftar-fakta {
  display: inline-grid;
  gap: var(--ritme-1);
  text-align: left;
  margin: var(--ritme-5) auto var(--ritme-6);
  color: var(--teks-sekunder);
  font-size: 0.9375rem;
}
.daftar-fakta li { padding-left: var(--ritme-5); position: relative; }
.daftar-fakta li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--sukses);
  font-weight: 700;
}

/* Diukur 3.86:1 di mobile sebelum dinaikkan; target 4.5. */
.catatan { color: var(--teks-sekunder); font-size: 0.8125rem; margin-top: var(--ritme-4); }
.catatan.rats {
  margin: 0 0 var(--ritme-4);
  font-size: var(--p-t-2);
  line-height: 1.5;
}
.isi-kartu { margin: 0; color: var(--teks-sekunder); }
.tengah { text-align: center; }

/* ─── Layar kuis ──────────────────────────────────────────────────────── */

.bilah-atas {
  display: flex;
  align-items: center;
  gap: var(--ritme-3);
  margin-bottom: var(--ritme-5);
}

.hitung {
  font-variant-numeric: tabular-nums;
  color: var(--teks-sekunder);
  font-size: 0.875rem;
  white-space: nowrap;
}

.progres {
  flex: 1;
  height: 6px;
  background: var(--bg-kartu-2);
  border-radius: var(--p-radius-pill);
  overflow: hidden;
}
.progres-isi {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--aksen), var(--sukses));
  border-radius: var(--p-radius-pill);
  transition: width var(--p-dur-sedang) var(--p-ease-masuk);
}

.kartu-soal { min-height: 22rem; display: flex; flex-direction: column; }

/* Penjelasan skala sekali saja, supaya angka 1..5 tidak membingungkan. */
.petunjuk {
  font-size: var(--p-t-1);
  color: var(--teks-redup);
  margin-bottom: var(--ritme-3);
}

.label-dimensi {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--aksen-teks);
  margin-bottom: var(--ritme-2);
}

.soal {
  font-size: 1.1875rem;
  line-height: 1.55;
  margin-bottom: var(--ritme-5);
}

.pilihan { display: grid; gap: var(--ritme-2); }

.pilihan-item {
  display: flex;
  align-items: center;
  gap: var(--ritme-3);
  padding: var(--ritme-3) var(--ritme-4);
  min-height: 48px;
  border: 1px solid var(--garis-halus);
  border-radius: var(--p-radius);
  background: var(--bg-kartu-2);
  cursor: pointer;
  transition: border-color var(--p-dur-cepat) var(--p-ease-masuk),
              background var(--p-dur-cepat) var(--p-ease-masuk);
}
.pilihan-item:hover { border-color: var(--garis-standar); }
.pilihan-item input { accent-color: var(--aksen); width: 18px; height: 18px; flex: none; }
.pilihan-item .teks { font-size: 0.9375rem; }

/* Angka jangkar 1..5. Menuronic, menempel di kiri, supaya arah skala
   terlihat tanpa harus menulis ulang "sangat" di tiap pilihan. */
.angka-pilih {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--garis-halus);
  border-radius: 50%;
  background: var(--bg-canvas);
  color: var(--teks-redup);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: color var(--p-dur-cepat) var(--p-ease-masuk),
              border-color var(--p-dur-cepat) var(--p-ease-masuk);
}
.pilihan-item:hover .angka-pilih { border-color: var(--garis-standar); }
.pilihan-item.terpilih .angka-pilih {
  color: var(--aksen-teks);
  border-color: var(--aksen);
  background: var(--aksen-lembut);
}
.pilihan-item.terpilih { border-color: var(--aksen); background: var(--aksen-lembut); }

.nav-atas {
  display: flex;
  justify-content: space-between;
  gap: var(--ritme-3);
  margin-top: var(--ritme-4);
}

/* ─── Layar hasil ─────────────────────────────────────────────────────── */

.kartu-tipe {
  text-align: center;
  background: linear-gradient(180deg, #1b2130, var(--bg-kartu));
  border-color: var(--garis-standar);
}

.kode-tipe {
  font-family: var(--p-font-angka);
  font-size: clamp(2.75rem, 14vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: var(--ritme-1) 0;
  color: var(--aksen);
}

.nama-tipe { font-weight: 600; color: var(--sukses); }
.tagline-tipe { color: var(--teks-sekunder); margin-top: var(--ritme-2); }

.deskripsi-tipe {
  margin-top: var(--ritme-5);
  text-align: left;
  padding-top: var(--ritme-4);
  border-top: 1px solid var(--garis-halus);
}

.batang-daftar { display: grid; gap: var(--ritme-3); margin-top: var(--ritme-4); }

.batang-baris .batas {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  margin-bottom: var(--ritme-1);
}
.batas .angka { color: var(--teks-sekunder); font-variant-numeric: tabular-nums; }

.batang-jalur {
  height: 8px;
  background: var(--bg-kartu-2);
  border-radius: var(--p-radius-pill);
  overflow: hidden;
}
.batang-isi {
  height: 100%;
  background: var(--aksen);
  border-radius: var(--p-radius-pill);
  transform-origin: left;
  animation: tumbuh var(--p-dur-lambat) var(--p-ease-masuk);
}
.batang-isi.kedua { background: var(--sukses); }

@keyframes tumbuh { from { transform: scaleX(0); } to { transform: scaleX(1); } }


.grid-dua { display: grid; gap: var(--ritme-4); }
@media (min-width: 40rem) { .grid-dua { grid-template-columns: 1fr 1fr; } }

.kartu-mutiara { text-align: center; }
.mutiara {
  font-size: 1.125rem;
  font-style: italic;
  color: var(--netral);
  margin-top: var(--ritme-1);
}

.dekat-daftar { display: grid; gap: var(--ritme-2); }
.dekat-item {
  display: flex;
  align-items: center;
  gap: var(--ritme-3);
  padding: var(--ritme-3);
  background: var(--bg-kartu-2);
  border: 1px solid var(--garis-halus);
  border-radius: var(--p-radius);
}
.dekat-kode {
  font-family: var(--p-font-angka);
  font-weight: 700;
  color: var(--aksen);
  min-width: 3.25rem;
}
.dekat-info { flex: 1; }
.dekat-info small { display: block; color: var(--teks-redup); }
.dekat-persen {
  color: var(--teks-sekunder);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.aksi {
  display: flex;
  gap: var(--ritme-3);
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--ritme-6) 0 var(--ritme-2);
}

/* ─── Aksesibilitas gerak ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Tampilan cetak ─────────────────────────────────────────────────── */

@media print {
  body { background: #fff; color: #000; }
  .tombol, .nav-atas, .aksi, .bilah-atas { display: none; }
  .layar { display: block !important; }
}