/* ==========================================================================
   DokuValid — design system
   ==========================================================================

   Satu berkas CSS, tanpa CDN dan tanpa build step. Alasannya bukan kemalasan:
   halaman ini menangani dokumen keuangan, dan menarik skrip atau font dari
   domain pihak ketiga berarti (a) setiap kunjungan membocorkan alamat IP
   pengguna ke domain itu, (b) satu domain bermasalah membuat halaman utama
   rusak, dan (c) tidak ada yang bisa diaudit tanpa jaringan.

   Font memakai system stack: sudah ada di perangkat, dirender instan, dan
   tidak menimbulkan permintaan jaringan sama sekali.

   Isi:
     1. Token
     2. Reset
     3. Dasar & tipografi
     4. Tata letak
     5. Navigasi
     6. Tombol
     7. Formulir
     8. Kartu & panel
     9. Lencana & pita status
    10. Tabel
    11. Temuan (hasil pemeriksaan)
    12. Unggah (dropzone)
    13. Peringatan & pesan
    14. Kerangka (skeleton) & keadaan kosong
    15. Modal & laci
    16. Footer
    17. Utilitas
    18. Animasi & gerak
   ========================================================================== */

/* ─────────────────────────── 1. Token ─────────────────────────── */

:root {
  color-scheme: light;

  /* Netral — dipakai untuk hampir semua permukaan dan teks */
  --n-0: #ffffff;
  --n-25: #fbfcfe;
  --n-50: #f6f8fb;
  --n-100: #eef2f7;
  --n-200: #e0e6ee;
  --n-300: #c9d2de;
  --n-400: #98a4b6;
  --n-500: #6b7789;
  --n-600: #4c5769;
  --n-700: #353e4d;
  --n-800: #232a36;
  --n-900: #161b23;
  --n-950: #0d1117;

  /* Merek — biru, karena pembaca utama adalah pemilik usaha dan staf
     keuangan yang membaca banyak biru sepanjang hari */
  --brand-50: #eef4ff;
  --brand-100: #dbe6ff;
  --brand-200: #bfd3ff;
  --brand-300: #93b4ff;
  --brand-400: #608cff;
  --brand-500: #3b6bf5;
  --brand-600: #2551d8;
  --brand-700: #1c3fae;
  --brand-800: #1b378a;
  --brand-900: #1c3272;

  /* Aksen — dipakai hemat, hanya untuk sorotan dan gradien */
  --accent-400: #38bdf8;
  --accent-500: #0ea5e9;
  --accent-600: #0284c7;

  /* Status temuan. Angka-angka ini muncul di seluruh produk, jadi warnanya
     harus sama di halaman mana pun. Kontrasnya sudah diperiksa terhadap
     latar putih maupun latar gelap. */
  --ok-50: #ecfdf5;
  --ok-100: #d1fae5;
  --ok-500: #10b981;
  --ok-600: #059669;
  --ok-700: #047857;

  --warn-50: #fffbeb;
  --warn-100: #fef3c7;
  --warn-500: #f59e0b;
  --warn-600: #d97706;
  --warn-700: #b45309;

  --crit-50: #fef2f2;
  --crit-100: #fee2e2;
  --crit-500: #ef4444;
  --crit-600: #dc2626;
  --crit-700: #b91c1c;

  --info-50: #eff6ff;
  --info-100: #dbeafe;
  --info-600: #2563eb;
  --info-700: #1d4ed8;

  /* Permukaan — dipisah dari netral supaya tema gelap cukup mengubah
     bagian ini, bukan mengejar setiap pemakaian warna netral */
  --bg: var(--n-50);
  --surface: var(--n-0);
  --surface-2: var(--n-25);
  --surface-sunken: var(--n-100);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --text: var(--n-900);
  --text-muted: var(--n-600);
  --text-faint: var(--n-500);
  --text-invert: var(--n-0);

  /* Bayangan berlapis — satu bayangan tebal terlihat murah, dua sampai tiga
     bayangan tipis terlihat seperti kedalaman sungguhan */
  --sh-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-sm: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
  --sh-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .05);
  --sh-lg: 0 12px 24px -6px rgba(16, 24, 40, .10), 0 4px 8px -4px rgba(16, 24, 40, .05);
  --sh-xl: 0 24px 48px -12px rgba(16, 24, 40, .16), 0 8px 16px -8px rgba(16, 24, 40, .06);
  --sh-focus: 0 0 0 3px rgba(59, 107, 245, .28);

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --w-sempit: 720px;
  --w-sedang: 960px;
  --w-lebar: 1200px;
  --w-penuh: 1320px;

  --t-cepat: 120ms;
  --t-sedang: 200ms;
  --t-lambat: 320ms;
  --ease: cubic-bezier(.32, .72, 0, 1);
}

/* Tema gelap.
   Diaktifkan lewat prefers-color-scheme ATAU atribut data-tema pada <html>.
   Tombol tema menulis atribut itu; kalau pengguna belum memilih, pilihan
   sistem yang dipakai. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    color-scheme: dark;

    --n-0: #0d1117;
    --n-25: #121821;
    --n-50: #10151d;
    --n-100: #171d27;
    --n-200: #232b38;
    --n-300: #313b4a;
    --n-400: #5d6a7e;
    --n-500: #8592a6;
    --n-600: #a7b3c4;
    --n-700: #c5cedb;
    --n-800: #dfe5ee;
    --n-900: #eef2f8;
    --n-950: #f7f9fc;

    --bg: #0a0e14;
    --surface: #121821;
    --surface-2: #171e29;
    --surface-sunken: #0d1219;
    --border: #232b38;
    --border-strong: #313b4a;
    --text: #eef2f8;
    --text-muted: #a7b3c4;
    --text-faint: #8592a6;
    --text-invert: #0d1117;

    --brand-50: #131f3d;
    --brand-100: #17264d;
    --brand-200: #1e3163;
    --brand-300: #6f96ff;
    --brand-400: #85a6ff;
    --brand-500: #94b3ff;
    --brand-600: #aac3ff;
    --brand-700: #c3d5ff;
    --brand-800: #dae5ff;

    --ok-50: #0c2119;
    --ok-100: #0f2c21;
    --ok-600: #34d399;
    --ok-700: #6ee7b7;

    --warn-50: #241a07;
    --warn-100: #2f220a;
    --warn-600: #fbbf24;
    --warn-700: #fcd34d;

    --crit-50: #2a0f10;
    --crit-100: #3a1517;
    --crit-600: #f87171;
    --crit-700: #fca5a5;

    --info-50: #101c33;
    --info-100: #16233f;
    --info-600: #7ba7ff;
    --info-700: #9dbcff;

    --sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-sm: 0 1px 3px rgba(0, 0, 0, .5);
    --sh-md: 0 4px 8px -2px rgba(0, 0, 0, .5);
    --sh-lg: 0 12px 24px -6px rgba(0, 0, 0, .6);
    --sh-xl: 0 24px 48px -12px rgba(0, 0, 0, .7);
    --sh-focus: 0 0 0 3px rgba(148, 179, 255, .3);
  }
}

/* Tema terang dipaksa secara eksplisit — menang atas media query di atas. */
:root[data-tema="terang"] {
  color-scheme: light;
}

/* ─────────────────────────── 2. Reset ─────────────────────────── */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: var(--brand-600);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ─────────────────────── 3. Dasar & tipografi ─────────────────────── */

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 650;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.35rem);
  letter-spacing: -.03em;
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.15rem);
}

h3 {
  font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem);
}

h4 {
  font-size: 1.03rem;
}

p {
  text-wrap: pretty;
}

/* Angka uang harus berbaris rapi di kolomnya — tanpa ini, "1" dan "8"
   punya lebar berbeda dan kolom nominal terlihat bergerigi. */
.num,
td.num,
.uang {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.mono {
  font-family: var(--font-mono);
  font-size: .875em;
  letter-spacing: -.01em;
}

.lede {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem);
  color: var(--text-muted);
  line-height: 1.65;
}

.halus {
  color: var(--text-muted);
}

.samar {
  color: var(--text-faint);
  font-size: .875rem;
}

.sangat-samar {
  color: var(--text-faint);
  font-size: .8125rem;
}

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection {
  background: var(--brand-200);
  color: var(--brand-900);
}

/* ─────────────────────────── 4. Tata letak ─────────────────────────── */

.wadah {
  width: 100%;
  max-width: var(--w-lebar);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.wadah--sempit {
  max-width: var(--w-sempit);
}

.wadah--sedang {
  max-width: var(--w-sedang);
}

.bagian {
  padding-block: clamp(56px, 8vw, 104px);
}

.bagian--rapat {
  padding-block: clamp(36px, 5vw, 64px);
}

.tumpuk {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.tumpuk--rapat {
  gap: var(--sp-2);
}

.tumpuk--longgar {
  gap: var(--sp-6);
}

.baris {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.baris--antara {
  justify-content: space-between;
}

.baris--rapat {
  gap: var(--sp-2);
}

.grid {
  display: grid;
  gap: var(--sp-5);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.tengah {
  text-align: center;
}

.tengah-otomatis {
  margin-inline: auto;
}

/* ─────────────────────────── 5. Navigasi ─────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-sedang) var(--ease),
    background var(--t-sedang) var(--ease);
}

.nav--tergulir {
  border-bottom-color: var(--border);
}

.nav__dalam {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 64px;
}

.nav__merek {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 680;
  font-size: 1.075rem;
  letter-spacing: -.025em;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}

.nav__merek:hover {
  text-decoration: none;
}

/* Logo: kotak gradien dengan tanda centang — "valid" */
.nav__lambang {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--brand-500), var(--accent-500));
  box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255, 255, 255, .28);
  color: #fff;
  flex-shrink: 0;
}

.nav__lambang svg {
  width: 17px;
  height: 17px;
}

.nav__tautan {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
}

.nav__tautan a {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: .9375rem;
  font-weight: 520;
  transition: color var(--t-cepat), background var(--t-cepat);
}

.nav__tautan a:hover {
  color: var(--text);
  background: var(--surface-sunken);
  text-decoration: none;
}

.nav__tautan a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

.nav__aksi {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: var(--sp-3);
}

.nav__tombol-menu {
  display: none;
  margin-left: auto;
  padding: 8px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .nav__tautan {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-3);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-lg);
  }

  .nav__tautan--buka {
    display: flex;
  }

  .nav__tautan a {
    padding: 12px;
  }

  .nav__tombol-menu {
    display: grid;
    place-items: center;
  }

  .nav__aksi {
    margin-left: 0;
  }
}

/* ─────────────────────────── 6. Tombol ─────────────────────────── */

.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-size: .9375rem;
  font-weight: 570;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-cepat) var(--ease),
    border-color var(--t-cepat) var(--ease),
    box-shadow var(--t-cepat) var(--ease),
    transform var(--t-cepat) var(--ease);
}

.tombol:hover {
  text-decoration: none;
}

.tombol:active {
  transform: translateY(.5px);
}

.tombol[disabled],
.tombol--mati {
  opacity: .55;
  pointer-events: none;
}

.tombol--utama {
  background: var(--brand-600);
  color: #fff;
  box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.tombol--utama:hover {
  background: var(--brand-700);
  box-shadow: var(--sh-md), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.tombol--sekunder {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--sh-xs);
}

.tombol--sekunder:hover {
  background: var(--surface-sunken);
}

.tombol--hantu {
  background: transparent;
  color: var(--text-muted);
}

.tombol--hantu:hover {
  background: var(--surface-sunken);
  color: var(--text);
}

.tombol--bahaya {
  background: var(--crit-600);
  color: #fff;
}

.tombol--bahaya:hover {
  background: var(--crit-700);
}

.tombol--besar {
  padding: 14px 26px;
  font-size: 1rem;
  border-radius: var(--r-md);
}

.tombol--kecil {
  padding: 6px 12px;
  font-size: .875rem;
}

.tombol--penuh {
  width: 100%;
}

.tombol svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.tombol__muat {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: putar .6s linear infinite;
}

/* ─────────────────────────── 7. Formulir ─────────────────────────── */

.bidang {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bidang__label {
  font-size: .875rem;
  font-weight: 570;
  color: var(--text);
}

.bidang__petunjuk {
  font-size: .8125rem;
  color: var(--text-faint);
}

.bidang__galat {
  font-size: .8125rem;
  color: var(--crit-600);
  font-weight: 520;
}

.masukan {
  width: 100%;
  padding: 10px 13px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  transition: border-color var(--t-cepat), box-shadow var(--t-cepat);
  font-size: .9375rem;
}

.masukan::placeholder {
  color: var(--text-faint);
}

.masukan:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--sh-focus);
}

.masukan[aria-invalid="true"] {
  border-color: var(--crit-500);
}

.masukan[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .25);
}

select.masukan {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7789' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 34px;
  cursor: pointer;
}

.bidang--sandi {
  position: relative;
}

.bidang--sandi .masukan {
  padding-right: 46px;
}

.tombol__lihat-sandi {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 8px;
  border-radius: var(--r-xs);
  color: var(--text-faint);
  display: grid;
  place-items: center;
}

.tombol__lihat-sandi:hover {
  color: var(--text);
  background: var(--surface-sunken);
}

.tombol__lihat-sandi svg {
  width: 17px;
  height: 17px;
}

/* Kekuatan sandi */
.kekuatan {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

.kekuatan__ruas {
  height: 4px;
  flex: 1;
  border-radius: var(--r-full);
  background: var(--n-200);
  transition: background var(--t-sedang);
}

.kekuatan__ruas--lemah {
  background: var(--crit-500);
}

.kekuatan__ruas--sedang {
  background: var(--warn-500);
}

.kekuatan__ruas--kuat {
  background: var(--ok-500);
}

/* ─────────────────────── 8. Kartu & panel ─────────────────────── */

.kartu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--sh-sm);
}

.kartu--rapat {
  padding: var(--sp-5);
}

.kartu--rata {
  padding: 0;
  overflow: hidden;
}

.kartu--interaktif {
  transition: border-color var(--t-sedang) var(--ease),
    box-shadow var(--t-sedang) var(--ease),
    transform var(--t-sedang) var(--ease);
}

.kartu--interaktif:hover {
  border-color: var(--border-strong);
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
}

.kartu__kepala {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.kartu__judul {
  font-size: 1.0625rem;
  font-weight: 620;
  letter-spacing: -.015em;
}

.kartu__isi {
  color: var(--text-muted);
  font-size: .9375rem;
}

.kartu__kaki {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

/* Kartu sorotan dengan gradien halus di sudut */
.kartu--sorot {
  position: relative;
  overflow: hidden;
}

.kartu--sorot::before {
  content: "";
  position: absolute;
  inset: -60% -20% auto auto;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--brand-100), transparent 68%);
  pointer-events: none;
  opacity: .85;
}

.kartu--sorot > * {
  position: relative;
}

/* Ikon di dalam kartu */
.ikon-bulat {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand-600);
  flex-shrink: 0;
}

.ikon-bulat svg {
  width: 21px;
  height: 21px;
}

.ikon-bulat--ok {
  background: var(--ok-50);
  color: var(--ok-600);
}

.ikon-bulat--warn {
  background: var(--warn-50);
  color: var(--warn-600);
}

.ikon-bulat--crit {
  background: var(--crit-50);
  color: var(--crit-600);
}

/* ──────────────────── 9. Lencana & pita status ──────────────────── */

.lencana {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: .78125rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.lencana svg {
  width: 13px;
  height: 13px;
}

.lencana--ok {
  background: var(--ok-50);
  color: var(--ok-700);
}

.lencana--warn {
  background: var(--warn-50);
  color: var(--warn-700);
}

.lencana--crit {
  background: var(--crit-50);
  color: var(--crit-700);
}

.lencana--info {
  background: var(--info-50);
  color: var(--info-700);
}

.lencana--brand {
  background: var(--brand-50);
  color: var(--brand-700);
}

/* Titik status kecil */
.titik {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.titik--ok {
  background: var(--ok-500);
  box-shadow: 0 0 0 3px var(--ok-100);
}

.titik--warn {
  background: var(--warn-500);
  box-shadow: 0 0 0 3px var(--warn-100);
}

.titik--crit {
  background: var(--crit-500);
  box-shadow: 0 0 0 3px var(--crit-100);
}

/* ─────────────────────────── 10. Tabel ─────────────────────────── */

.tabel-bungkus {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}

.tabel th {
  text-align: left;
  padding: 10px var(--sp-4);
  font-size: .78125rem;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--surface-2);
}

.tabel td {
  padding: 13px var(--sp-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.tabel tbody tr:last-child td {
  border-bottom: 0;
}

.tabel tbody tr {
  transition: background var(--t-cepat);
}

.tabel tbody tr:hover {
  background: var(--surface-2);
}

.tabel__nama {
  font-weight: 550;
  color: var(--text);
}

.tabel__nama:hover {
  color: var(--brand-600);
}

.tabel--padat th,
.tabel--padat td {
  padding: 8px var(--sp-3);
}

/* ──────────────────── 11. Temuan (hasil pemeriksaan) ──────────────────── */

.temuan {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
}

.temuan + .temuan {
  margin-top: var(--sp-3);
}

.temuan--kritis {
  border-left-color: var(--crit-500);
  background: var(--crit-50);
}

.temuan--peringatan {
  border-left-color: var(--warn-500);
  background: var(--warn-50);
}

.temuan--info {
  border-left-color: var(--info-600);
  background: var(--info-50);
}

.temuan__kepala {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  justify-content: space-between;
}

.temuan__kode {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text-muted);
}

.temuan__pesan {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text);
  margin-top: 6px;
}

.temuan__saran {
  font-size: .875rem;
  color: var(--text-muted);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--text) 14%, transparent);
}

.temuan__saran strong {
  color: var(--text);
  font-weight: 600;
}

/* Cincin skor — lingkaran SVG dengan angka di tengah */
.skor {
  position: relative;
  width: 132px;
  height: 132px;
  flex-shrink: 0;
}

.skor svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.skor__jalur {
  fill: none;
  stroke: var(--n-200);
  stroke-width: 10;
}

.skor__nilai {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 900ms var(--ease);
}

.skor__isi {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0;
}

.skor__angka {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.skor__label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-faint);
  font-weight: 620;
  margin-top: 3px;
}

/* ───────────────────────── 12. Unggah ───────────────────────── */

.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
  background: var(--surface-2);
  transition: border-color var(--t-sedang) var(--ease),
    background var(--t-sedang) var(--ease),
    transform var(--t-sedang) var(--ease);
  cursor: pointer;
  position: relative;
}

.dropzone:hover {
  border-color: var(--brand-400);
  background: var(--brand-50);
}

.dropzone--seret {
  border-color: var(--brand-500);
  background: var(--brand-50);
  transform: scale(1.008);
  box-shadow: var(--sh-lg);
}

.dropzone--sibuk {
  pointer-events: none;
  opacity: .7;
}

.dropzone__ikon {
  width: 54px;
  height: 54px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--brand-600);
  box-shadow: var(--sh-sm);
}

.dropzone__ikon svg {
  width: 25px;
  height: 25px;
}

.dropzone__judul {
  font-size: 1.0625rem;
  font-weight: 620;
  letter-spacing: -.015em;
}

.dropzone__ket {
  font-size: .875rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Bilah kemajuan unggah */
.kemajuan {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--n-200);
  overflow: hidden;
  margin-top: var(--sp-4);
}

.kemajuan__isi {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  width: 0%;
  transition: width 240ms var(--ease);
}

/* Daftar berkas yang sedang diunggah */
.unggahan {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.unggahan + .unggahan {
  margin-top: var(--sp-2);
}

.unggahan__nama {
  font-size: .875rem;
  font-weight: 540;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unggahan__ukuran {
  font-size: .8125rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────── 13. Peringatan & pesan ─────────────────── */

.pesan {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  font-size: .9375rem;
  line-height: 1.55;
  border: 1px solid transparent;
}

.pesan svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  margin-top: 1px;
}

.pesan__judul {
  font-weight: 620;
  margin-bottom: 2px;
}

.pesan--ok {
  background: var(--ok-50);
  border-color: var(--ok-100);
  color: var(--ok-700);
}

.pesan--warn {
  background: var(--warn-50);
  border-color: var(--warn-100);
  color: var(--warn-700);
}

.pesan--crit {
  background: var(--crit-50);
  border-color: var(--crit-100);
  color: var(--crit-700);
}

.pesan--info {
  background: var(--info-50);
  border-color: var(--info-100);
  color: var(--info-700);
}

/* Pesan mengambang di atas halaman — untuk hasil aksi cepat */
.lonjakan {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 90;
  padding: 11px 18px;
  border-radius: var(--r-md);
  background: var(--n-900);
  color: var(--n-0);
  font-size: .9375rem;
  font-weight: 540;
  box-shadow: var(--sh-xl);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-sedang) var(--ease),
    transform var(--t-sedang) var(--ease);
  max-width: min(92vw, 560px);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.lonjakan--tampil {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.lonjakan--ok {
  background: var(--ok-600);
  color: #fff;
}

.lonjakan--crit {
  background: var(--crit-600);
  color: #fff;
}

/* ──────────────── 14. Kerangka & keadaan kosong ──────────────── */

.kerangka {
  background: linear-gradient(
    90deg,
    var(--surface-sunken) 25%,
    var(--surface-2) 37%,
    var(--surface-sunken) 63%
  );
  background-size: 400% 100%;
  animation: kilau 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
  height: 14px;
}

.kerangka--judul {
  height: 20px;
  width: 40%;
}

.kerangka--pendek {
  width: 60%;
}

.kosong {
  text-align: center;
  padding: var(--sp-12) var(--sp-5);
}

.kosong__ikon {
  width: 60px;
  height: 60px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  background: var(--surface-sunken);
  color: var(--text-faint);
}

.kosong__ikon svg {
  width: 27px;
  height: 27px;
}

.kosong__judul {
  font-size: 1.0625rem;
  font-weight: 620;
  letter-spacing: -.015em;
}

.kosong__ket {
  color: var(--text-muted);
  font-size: .9375rem;
  margin-top: 5px;
  max-width: 44ch;
  margin-inline: auto;
}

/* ─────────────────────── 15. Modal & laci ─────────────────────── */

.tirai {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(9, 13, 20, .55);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-sedang) var(--ease);
}

.tirai--tampil {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  width: min(100%, 460px);
  max-height: 90dvh;
  overflow-y: auto;
  padding: var(--sp-6);
  transform: translateY(10px) scale(.985);
  transition: transform var(--t-lambat) var(--ease);
}

.tirai--tampil .modal {
  transform: translateY(0) scale(1);
}

/* ─────────────────────────── 16. Footer ─────────────────────────── */

.footer {
  border-top: 1px solid var(--border);
  padding-block: var(--sp-10) var(--sp-8);
  margin-top: var(--sp-16);
  background: var(--surface-2);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-8);
}

@media (max-width: 700px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }
}

.footer__judul {
  font-size: .78125rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
  margin-bottom: var(--sp-3);
}

.footer__tautan {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer__tautan a {
  color: var(--text-muted);
  font-size: .875rem;
}

.footer__tautan a:hover {
  color: var(--text);
}

.footer__bawah {
  margin-top: var(--sp-10);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: .8125rem;
  color: var(--text-faint);
}

/* ─────────────────────────── 17. Utilitas ─────────────────────────── */

.sembunyi {
  display: none !important;
}

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

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }

.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }

.lebar-penuh {
  width: 100%;
}

.tumbuh {
  flex: 1;
  min-width: 0;
}

.sekarangrapat {
  white-space: nowrap;
}

@media (max-width: 560px) {
  .sembunyi-hp {
    display: none !important;
  }
}

@media (min-width: 561px) {
  .hanya-hp {
    display: none !important;
  }
}

/* ─────────────────────── 18. Animasi & gerak ─────────────────────── */

@keyframes putar {
  to {
    transform: rotate(360deg);
  }
}

@keyframes kilau {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes naik {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.naik {
  animation: naik 520ms var(--ease) both;
}

.naik--1 { animation-delay: 60ms; }
.naik--2 { animation-delay: 120ms; }
.naik--3 { animation-delay: 180ms; }
.naik--4 { animation-delay: 240ms; }

/* Menghormati preferensi pengguna. Ini bukan kerapian: animasi yang tidak
   diminta bisa memicu pusing dan mual pada sebagian orang, dan jumlah
   pengguna yang mengaktifkan ini cukup besar untuk tidak diabaikan. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ────────────────── Khusus halaman (landing, dasbor) ────────────────── */

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 7vw, 92px) clamp(40px, 6vw, 76px);
}

.hero::before {
  content: "";
  position: absolute;
  top: -320px;
  right: -180px;
  width: 720px;
  height: 720px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--brand-300) 55%, transparent),
    transparent 66%
  );
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: -380px;
  left: -240px;
  width: 620px;
  height: 620px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent-400) 30%, transparent),
    transparent 68%
  );
  pointer-events: none;
}

.hero__dalam {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (max-width: 940px) {
  .hero__dalam {
    grid-template-columns: 1fr;
  }
}

.hero__pil {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 13px 5px 6px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-xs);
  font-size: .8125rem;
  font-weight: 540;
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}

.hero__pil span.penanda {
  padding: 2px 9px;
  border-radius: var(--r-full);
  background: var(--brand-600);
  color: #fff;
  font-size: .71875rem;
  font-weight: 650;
  letter-spacing: .01em;
}

.hero__judul {
  margin-bottom: var(--sp-5);
}

.hero__judul em {
  font-style: normal;
  background: linear-gradient(100deg, var(--brand-600), var(--accent-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__aksi {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}

.hero__bukti {
  display: flex;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  flex-wrap: wrap;
}

.hero__bukti > div {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: .875rem;
  color: var(--text-muted);
}

.hero__bukti svg {
  width: 16px;
  height: 16px;
  color: var(--ok-600);
  flex-shrink: 0;
}

/* Kartu pratinjau temuan di hero */
.pratinjau {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-5deg) rotateX(2deg);
  transition: transform 600ms var(--ease);
}

.pratinjau:hover {
  transform: perspective(1400px) rotateY(0) rotateX(0);
}

@media (max-width: 940px) {
  .pratinjau {
    transform: none;
  }
}

.pratinjau__kepala {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 11px var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.pratinjau__titik {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
}

.pratinjau__nama {
  font-size: .8125rem;
  color: var(--text-faint);
  margin-left: auto;
  font-family: var(--font-mono);
}

.pratinjau__isi {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.pratinjau__baris {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  font-size: .875rem;
  padding-bottom: var(--sp-3);
  border-bottom: 1px dashed var(--border);
}

.pratinjau__baris:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.pratinjau__kunci {
  color: var(--text-muted);
}

.pratinjau__nilai {
  font-weight: 580;
  font-variant-numeric: tabular-nums;
}

.pratinjau__nilai--salah {
  color: var(--crit-600);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.pratinjau__nilai--benar {
  color: var(--ok-600);
  font-weight: 640;
}

/* Bagian "masalah" — daftar keluhan nyata */
.masalah {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}

.masalah__nomor {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--crit-50);
  color: var(--crit-600);
  font-weight: 680;
  font-size: .875rem;
  flex-shrink: 0;
}

/* Kartu langkah */
.langkah {
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  height: 100%;
}

.langkah__nomor {
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: var(--r-xs);
  background: var(--brand-600);
  color: #fff;
  font-size: .8125rem;
  font-weight: 680;
  margin-bottom: var(--sp-4);
}

/* Kartu harga */
.harga {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  height: 100%;
  position: relative;
}

.harga--unggulan {
  border-color: var(--brand-500);
  border-width: 2px;
  box-shadow: var(--sh-lg);
}

.harga__pita {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 13px;
  border-radius: var(--r-full);
  background: var(--brand-600);
  color: #fff;
  font-size: .71875rem;
  font-weight: 650;
  letter-spacing: .02em;
  white-space: nowrap;
}

.harga__nilai {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.1;
}

.harga__periode {
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-faint);
}

.harga__daftar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  flex: 1;
}

.harga__daftar li {
  display: flex;
  gap: var(--sp-3);
  font-size: .9375rem;
  color: var(--text-muted);
  align-items: flex-start;
}

.harga__daftar svg {
  width: 17px;
  height: 17px;
  color: var(--ok-600);
  flex-shrink: 0;
  margin-top: 3px;
}

.harga__daftar li.mati {
  color: var(--text-faint);
}

.harga__daftar li.mati svg {
  color: var(--text-faint);
}

ul.bersih {
  list-style: none;
  padding: 0;
}

/* Statistik dasbor */
.stat {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
}

.stat__label {
  font-size: .78125rem;
  font-weight: 570;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.stat__angka {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.stat__ket {
  font-size: .8125rem;
  color: var(--text-faint);
}

/* Bilah kuota */
.kuota {
  height: 8px;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  overflow: hidden;
  margin-top: var(--sp-3);
}

.kuota__isi {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transition: width 600ms var(--ease);
}

.kuota__isi--penuh {
  background: linear-gradient(90deg, var(--warn-500), var(--crit-500));
}

/* Baris dokumen di dasbor */
.dok-baris {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-cepat);
  text-decoration: none;
  color: inherit;
}

.dok-baris:last-child {
  border-bottom: 0;
}

.dok-baris:hover {
  background: var(--surface-2);
  text-decoration: none;
}

.dok-baris__nama {
  font-weight: 560;
  font-size: .9375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dok-baris__meta {
  display: flex;
  gap: var(--sp-3);
  font-size: .8125rem;
  color: var(--text-faint);
  margin-top: 3px;
  flex-wrap: wrap;
}

.dok-baris__temuan {
  display: flex;
  gap: var(--sp-2);
}

@media (max-width: 620px) {
  .dok-baris {
    grid-template-columns: 1fr auto;
    gap: var(--sp-3);
  }

  .dok-baris__temuan {
    grid-column: 1 / -1;
  }
}

/* Panel samping sticky untuk detail dokumen */
.dua-kolom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-6);
  align-items: start;
}

@media (max-width: 900px) {
  .dua-kolom {
    grid-template-columns: 1fr;
  }
}

.lengket {
  position: sticky;
  top: 84px;
}

@media (max-width: 900px) {
  .lengket {
    position: static;
  }
}

/* Sakelar tema */
.tombol-tema {
  padding: 8px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  display: grid;
  place-items: center;
}

.tombol-tema:hover {
  background: var(--surface-sunken);
  color: var(--text);
}

.tombol-tema svg {
  width: 18px;
  height: 18px;
}

/* Garis pemisah dengan label */
.pemisah {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-faint);
  font-size: .8125rem;
  margin-block: var(--sp-5);
}

.pemisah::before,
.pemisah::after {
  content: "";
  height: 1px;
  background: var(--border);
  flex: 1;
}

/* Kartu autentikasi (masuk/daftar) */
.auth {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-6) var(--sp-5);
}

.auth__kotak {
  width: 100%;
  max-width: 420px;
}

.auth__kepala {
  text-align: center;
  margin-bottom: var(--sp-6);
}

.auth__judul {
  font-size: 1.6rem;
  letter-spacing: -.025em;
  margin-top: var(--sp-4);
}

.auth__kaki {
  text-align: center;
  margin-top: var(--sp-5);
  font-size: .9375rem;
  color: var(--text-muted);
}