/* =====================================================================
   Umayumcha HR · Sistem desain
   Satu berkas: token (CSS custom properties) + komponen.
   Tanpa pustaka, tanpa sumber dari internet. Mobile dulu.
   Titik patah: 560px (form 2 kolom), 760px (kepala satu baris), 1000px (tata letak 2 kolom).
   ===================================================================== */

/* ---------- 1. Token non-warna ---------- */
:root {
  --huruf: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --huruf-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --t-mini: 11px;  --t-kecil: 12.5px; --t-sedang: 14px; --t-dasar: 15px; --t-besar: 17px;
  --t-judul-3: 18px; --t-judul-2: 21px; --t-judul-1: 25px; --t-angka: 30px; --t-raksasa: 46px;

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

  --sudut-k: 8px; --sudut-s: 11px; --sudut: 14px; --sudut-b: 18px; --sudut-l: 24px; --bulat: 999px;

  --sentuh: 44px; --tinggi-tombol: 46px; --tinggi-isian: 46px;

  --cepat: 140ms;  --sedang: 220ms; --lambat: 320ms;
  --lentur: cubic-bezier(.2, .8, .2, 1);   /* masuk, hover, tekan */
  --keluar: cubic-bezier(.4, 0, 1, 1);     /* keluar: lebih cepat di akhir */
  --pegas: cubic-bezier(.34, 1.56, .64, 1);/* letupan kecil: centang, skor */

  --lebar-isi: 1200px;
}

/* ---------- 2. Token warna: terang ---------- */
:root, [data-tema="terang"] {
  --merek: #1f2f6b; --merek-tua: #172352; --merek-gelap: #0b1230; --merek-terang: #2b3f8c;
  --merek-muda: #e8ebf7; --merek-lembut: #f2f4fa;
  --aksen: #ec5f73; --aksen-teks: #c8364c; --aksen-muda: #fde8eb;

  --latar: #f4f5f9; --kartu: #ffffff; --kartu-2: #f8f9fc; --isian-latar: #ffffff;
  --teks: #161a2b; --redup: #5c6380; --samar: #8a90a8;
  --garis: #e3e6ef; --garis-kuat: #d0d4e2; --garis-isian: #a9afc4;
  --pada-merek: #ffffff; --pada-merek-redup: rgba(255, 255, 255, .8);

  --hijau: #157f3c;  --hijau-latar: #def6e6;
  --kuning: #8a5a00; --kuning-latar: #fff2cc; --kuning-garis: #e0a000;
  --merah: #c42b1c;  --merah-latar: #fde4e1;
  --biru: #1f5fbf;   --biru-latar: #e2edfc;
  --abu: #4b5065;    --abu-latar: #eceef4;

  --gradasi: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .15), transparent 55%),
             linear-gradient(155deg, #2b3f8c 0%, #1f2f6b 42%, #0b1230 100%);
  --gradasi-sorot: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .22), transparent 55%),
             linear-gradient(155deg, #34499c 0%, #233579 42%, #0e1638 100%);
  --gradasi-latar: radial-gradient(90% 60% at 50% -10%, #e3e7f6 0%, transparent 70%);

  --bayang-1: 0 1px 2px rgba(22, 26, 43, .06);
  --bayang-2: 0 1px 2px rgba(22, 26, 43, .05), 0 4px 16px rgba(22, 26, 43, .06);
  --bayang-3: 0 2px 4px rgba(22, 26, 43, .07), 0 12px 32px rgba(22, 26, 43, .12);
  --bayang-4: 0 24px 64px rgba(11, 18, 48, .3);
  --bayang-merek: 0 6px 18px rgba(11, 18, 48, .28);
  --tirai: rgba(11, 18, 48, .42);
  color-scheme: light;
}

/* ---------- 3. Token warna: gelap ---------- */
/* Blok yang sama dipakai dua kali: ikut setelan HP, atau dipaksa lewat data-tema="gelap". */
[data-tema="gelap"] {
  --merek: #8ea2ff; --merek-tua: #b4c1ff; --merek-gelap: #080d24; --merek-terang: #34489a;
  --merek-muda: #1f2748; --merek-lembut: #161b31;
  --aksen: #ff8796; --aksen-teks: #ff8796; --aksen-muda: #3d1d24;
  --latar: #0d0f17; --kartu: #171a26; --kartu-2: #1b1f2d; --isian-latar: #121520;
  --teks: #eef0f8; --redup: #a0a6bd; --samar: #727892;
  --garis: #272b3d; --garis-kuat: #343a52; --garis-isian: #4b526e;
  --pada-merek: #ffffff; --pada-merek-redup: rgba(255, 255, 255, .78);
  --hijau: #5fd68a; --hijau-latar: #12321f; --kuning: #ffd264; --kuning-latar: #3a2d06; --kuning-garis: #e8b23a;
  --merah: #ff7a6b; --merah-latar: #43160f; --biru: #7ab2ff; --biru-latar: #12284a;
  --abu: #c9cde0; --abu-latar: #262a3b;
  --gradasi: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .11), transparent 55%),
             linear-gradient(155deg, #34489a 0%, #1f2f6b 45%, #080d24 100%);
  --gradasi-sorot: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .17), transparent 55%),
             linear-gradient(155deg, #3d53ab 0%, #26387d 45%, #0b1230 100%);
  --gradasi-latar: radial-gradient(90% 60% at 50% -10%, #161c38 0%, transparent 70%);
  --bayang-1: 0 1px 2px rgba(0, 0, 0, .35);
  --bayang-2: 0 1px 2px rgba(0, 0, 0, .4);
  --bayang-3: 0 6px 24px rgba(0, 0, 0, .5);
  --bayang-4: 0 24px 64px rgba(0, 0, 0, .6);
  --bayang-merek: 0 6px 18px rgba(0, 0, 0, .45);
  --tirai: rgba(3, 5, 12, .6);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    --merek: #8ea2ff; --merek-tua: #b4c1ff; --merek-gelap: #080d24; --merek-terang: #34489a;
    --merek-muda: #1f2748; --merek-lembut: #161b31;
    --aksen: #ff8796; --aksen-teks: #ff8796; --aksen-muda: #3d1d24;
    --latar: #0d0f17; --kartu: #171a26; --kartu-2: #1b1f2d; --isian-latar: #121520;
    --teks: #eef0f8; --redup: #a0a6bd; --samar: #727892;
    --garis: #272b3d; --garis-kuat: #343a52; --garis-isian: #4b526e;
    --pada-merek: #ffffff; --pada-merek-redup: rgba(255, 255, 255, .78);
    --hijau: #5fd68a; --hijau-latar: #12321f; --kuning: #ffd264; --kuning-latar: #3a2d06; --kuning-garis: #e8b23a;
    --merah: #ff7a6b; --merah-latar: #43160f; --biru: #7ab2ff; --biru-latar: #12284a;
    --abu: #c9cde0; --abu-latar: #262a3b;
    --gradasi: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .11), transparent 55%),
               linear-gradient(155deg, #34489a 0%, #1f2f6b 45%, #080d24 100%);
    --gradasi-sorot: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .17), transparent 55%),
               linear-gradient(155deg, #3d53ab 0%, #26387d 45%, #0b1230 100%);
    --gradasi-latar: radial-gradient(90% 60% at 50% -10%, #161c38 0%, transparent 70%);
    --bayang-1: 0 1px 2px rgba(0, 0, 0, .35);
    --bayang-2: 0 1px 2px rgba(0, 0, 0, .4);
    --bayang-3: 0 6px 24px rgba(0, 0, 0, .5);
    --bayang-4: 0 24px 64px rgba(0, 0, 0, .6);
    --bayang-merek: 0 6px 18px rgba(0, 0, 0, .45);
    --tirai: rgba(3, 5, 12, .6);
    color-scheme: dark;
  }
}
[data-tema] { background-color: var(--latar); color: var(--teks); }

/* ---------- 4. Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 128px; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--gradasi-latar) no-repeat, var(--latar);
  color: var(--teks);
  font: var(--t-dasar)/1.5 var(--huruf);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.015em; }
p { margin: 0; }
a { color: var(--merek); }
a:hover { color: var(--merek-tua); }
::selection { background: var(--merek-muda); color: var(--teks); }
:focus-visible { outline: 2.5px solid var(--aksen); outline-offset: 2px; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-k { width: 16px; height: 16px; }
.i-b { width: 24px; height: 24px; }
.sprite { display: none; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 120ms var(--keluar) both pudar-keluar; }
::view-transition-new(root) { animation: var(--sedang) var(--lentur) both masuk; }
@keyframes pudar-keluar { to { opacity: 0; } }

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

/* Utilitas */
.sr-saja { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.redup { color: var(--redup); }
.kecil { font-size: var(--t-kecil); }
.tebal { font-weight: 650; }
.angka { font-variant-numeric: tabular-nums; }
.tumpuk { display: grid; gap: var(--j-4); }
.tumpuk-rapat { display: grid; gap: var(--j-2); }
.baris-flex { display: flex; flex-wrap: wrap; align-items: center; gap: var(--j-2); }
.dorong-kanan { margin-left: auto; }
@media (min-width: 760px) { .hanya-hp { display: none !important; } }
@media (max-width: 759.98px) { .hanya-laptop { display: none !important; } }

.lewati {
  position: fixed; left: var(--j-3); top: var(--j-3); z-index: 100; padding: var(--j-2) var(--j-4);
  background: var(--kartu); color: var(--teks); border-radius: var(--sudut-s); box-shadow: var(--bayang-3);
  transform: translateY(-160%); transition: transform var(--cepat) var(--lentur);
}
.lewati:focus { transform: none; }

/* ---------- 5. Kerangka: kepala, merek, menu ---------- */
.kepala {
  position: sticky; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--kartu) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--garis);
  view-transition-name: kepala;
}
.kepala-dalam {
  max-width: var(--lebar-isi); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "merek kanan" "menu menu";
  align-items: center; column-gap: var(--j-4);
  padding: 0 max(var(--j-4), env(safe-area-inset-left));
}
.merek {
  grid-area: merek; display: inline-flex; align-items: center; gap: 10px; min-height: 56px;
  color: var(--teks); text-decoration: none; justify-self: start; border-radius: var(--sudut-s);
}
.merek:hover { color: var(--teks); }
.merek-ikon {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: var(--gradasi); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .02em;
  box-shadow: var(--bayang-merek), inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform var(--sedang) var(--pegas);
}
.merek-ikon::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 14px; height: 2.5px; border-radius: 2px; background: var(--aksen); transform: translateX(-50%); transition: width var(--sedang) var(--lentur); }
.merek:hover .merek-ikon { transform: rotate(-4deg) scale(1.04); }
.merek:hover .merek-ikon::after { width: 20px; }
.merek-teks { display: grid; line-height: 1.1; }
.merek-teks small { font-size: 10.5px; font-weight: 700; color: var(--aksen-teks); letter-spacing: .13em; text-transform: uppercase; }
.merek-teks b { font-size: 15.5px; font-weight: 750; letter-spacing: -.01em; }

.kepala-kanan { grid-area: kanan; display: flex; align-items: center; gap: 2px; }

.menu {
  grid-area: menu; display: flex; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; margin: 0 calc(-1 * var(--j-4)); padding: 2px var(--j-4) 10px;
  scroll-padding-inline: var(--j-8);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pudar-kiri, 0px), #000 calc(100% - var(--pudar-kanan, 28px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--pudar-kiri, 0px), #000 calc(100% - var(--pudar-kanan, 28px)), transparent 100%);
}
.menu::-webkit-scrollbar { display: none; }
.menu.ada-kiri { --pudar-kiri: 28px; }
.menu.mentok-kanan { --pudar-kanan: 0px; }
.menu a {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: var(--bulat); color: var(--redup); text-decoration: none; font-weight: 620; font-size: var(--t-sedang); white-space: nowrap;
  transition: background var(--cepat) var(--lentur), color var(--cepat), transform var(--cepat) var(--lentur);
}
.menu a::before { content: ""; position: absolute; inset: -2px 0; }
.menu a:hover { background: var(--merek-muda); color: var(--merek); }
.menu a:active { transform: scale(.95); }
.menu a[aria-current="page"] { background: var(--gradasi); color: #fff; box-shadow: var(--bayang-merek); }
.menu a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 12px; height: 2px; border-radius: 2px; background: var(--aksen); transform: translateX(-50%); }
.menu .hitung, .tab .hitung {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--bulat); display: inline-grid; place-items: center;
  background: var(--aksen); color: #fff; font-size: var(--t-mini); font-weight: 750;
}
.menu a[aria-current="page"] .hitung { background: #fff; color: var(--merek-tua); }
[data-tema="gelap"] .menu a[aria-current="page"] .hitung { color: #1f2f6b; }

@media (min-width: 760px) {
  .kepala-dalam { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "merek menu kanan"; padding: 0 var(--j-6); column-gap: var(--j-6); }
  .merek { min-height: 64px; }
  .menu { margin: 0; padding: 0; --pudar-kanan: 0px; }
  .menu.ada-kiri { --pudar-kiri: 24px; }
  .menu.ada-kanan { --pudar-kanan: 24px; }
  .menu a { border-radius: var(--sudut-s); }
}

/* Tombol ikon kepala, lonceng, avatar */
.ikon-tombol {
  position: relative; display: grid; place-items: center; width: var(--sentuh); height: var(--sentuh); border-radius: 12px;
  border: 0; background: transparent; color: var(--teks); cursor: pointer; text-decoration: none;
  transition: background var(--cepat), transform var(--cepat) var(--lentur), color var(--cepat);
}
.ikon-tombol:hover { background: var(--merek-muda); color: var(--merek); }
.ikon-tombol:active { transform: scale(.9); }
.lonceng .i { transform-origin: 50% 4px; }
.lonceng:hover .i { animation: ayun 600ms var(--lentur); }
@keyframes ayun { 20% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 70% { transform: rotate(5deg); } }
.titik-angka {
  position: absolute; top: 5px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--bulat);
  display: grid; place-items: center; background: var(--aksen); color: #fff; font-size: var(--t-mini); font-weight: 750;
  border: 2px solid var(--kartu); line-height: 1;
}
.titik-angka.baru { animation: letup 420ms var(--pegas); }

.avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 750; letter-spacing: .02em; background: var(--aksen-muda); color: var(--aksen-teks);
}
.avatar-merek { background: var(--gradasi); color: #fff; }
.avatar-b { width: 56px; height: 56px; font-size: 19px; border-radius: 18px; }
.avatar-k { width: 28px; height: 28px; font-size: 11px; }

.menu-avatar { position: relative; }
.menu-avatar > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: var(--sentuh); height: var(--sentuh); border-radius: 50%; }
.menu-avatar > summary::-webkit-details-marker { display: none; }
.menu-avatar > summary .avatar { transition: box-shadow var(--cepat), transform var(--cepat) var(--lentur); }
.menu-avatar > summary:hover .avatar { box-shadow: 0 0 0 3px var(--merek-muda); }
.menu-avatar > summary:active .avatar { transform: scale(.92); }
.menu-avatar[open] > summary .avatar { box-shadow: 0 0 0 3px var(--merek); }
.menu-avatar-isi {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 236px; padding: 6px;
  background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--sudut); box-shadow: var(--bayang-3);
  transform-origin: top right; animation: muncul-menu var(--sedang) var(--lentur);
}
@keyframes muncul-menu { from { opacity: 0; transform: translateY(-4px) scale(.96); } }
.menu-avatar-isi .ma-kepala { display: flex; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid var(--garis); margin-bottom: 4px; }
.menu-avatar-isi .ma-kepala b { display: block; font-size: var(--t-sedang); }
.menu-avatar-isi .ma-kepala span { font-size: var(--t-kecil); color: var(--redup); }
.menu-avatar-isi a, .menu-avatar-isi button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--sentuh); padding: 0 10px; border: 0; border-radius: var(--sudut-k);
  background: transparent; color: var(--teks); text-decoration: none; font-weight: 560; font-size: var(--t-sedang); cursor: pointer; text-align: left;
  transition: background var(--cepat);
}
.menu-avatar-isi a:hover, .menu-avatar-isi button:hover { background: var(--merek-muda); color: var(--teks); }
.menu-avatar-isi .ma-keluar { color: var(--merah); }
.menu-avatar-isi .ma-keluar:hover { background: var(--merah-latar); }
.menu-avatar-isi form { margin: 0; }

/* ---------- 6. Isi halaman ---------- */
.isi {
  max-width: var(--lebar-isi); margin: 0 auto; overflow-x: clip;
  padding: var(--j-5) max(var(--j-4), env(safe-area-inset-right)) calc(var(--j-12) + env(safe-area-inset-bottom)) max(var(--j-4), env(safe-area-inset-left));
}
@media (min-width: 760px) { .isi { padding: var(--j-8) var(--j-6) var(--j-12); } }
.halaman > * { animation: masuk var(--sedang) var(--lentur) both; }
.halaman > :nth-child(2) { animation-delay: 30ms; }
.halaman > :nth-child(3) { animation-delay: 60ms; }
.halaman > :nth-child(4) { animation-delay: 90ms; }
.halaman > :nth-child(n+5) { animation-delay: 120ms; }
@keyframes masuk { from { opacity: 0; transform: translateY(8px); } }

.kepala-halaman { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--j-3) var(--j-4); margin-bottom: var(--j-5); }
.kepala-halaman > div { min-width: 0; }
.judul-halaman { font-size: var(--t-judul-1); font-weight: 760; letter-spacing: -.025em; line-height: 1.2; text-wrap: balance; }
.sub-halaman { margin-top: var(--j-1); color: var(--redup); text-wrap: pretty; }
@media (min-width: 760px) { .judul-halaman { font-size: 28px; } }
.judul-bagian { display: flex; align-items: center; justify-content: space-between; gap: var(--j-3); font-size: var(--t-dasar); font-weight: 720; margin: var(--j-6) 0 var(--j-3); }
.judul-bagian .tautan { font-size: var(--t-kecil); }
.label-kecil { font-size: var(--t-mini); font-weight: 720; letter-spacing: .08em; text-transform: uppercase; color: var(--redup); }

.kembali {
  display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px 0 4px; margin: 0 0 var(--j-2) -4px;
  color: var(--redup); text-decoration: none; font-weight: 620; font-size: var(--t-sedang); border-radius: var(--sudut-k);
  transition: background var(--cepat), color var(--cepat);
}
.kembali:hover { background: var(--merek-muda); color: var(--merek); }
.kembali:hover .i { transform: translateX(-2px); }
.kembali .i { transition: transform var(--cepat) var(--lentur); }

.dua-kolom { display: grid; gap: var(--j-4); }
@media (min-width: 1000px) {
  .dua-kolom { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--j-6); align-items: start; }
  .dua-kolom.sisi-kiri { grid-template-columns: 260px minmax(0, 1fr); }
  .lengket { position: sticky; top: 92px; }
}

/* ---------- 7. Tautan ---------- */
.tautan {
  color: var(--merek); font-weight: 620; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  text-decoration-thickness: 1.5px; border-radius: 4px; transition: text-decoration-color var(--cepat), color var(--cepat);
}
.tautan:hover { color: var(--merek-tua); text-decoration-color: currentColor; }
.tautan:active { opacity: .7; }

/* ---------- 8. Tombol ---------- */
.tombol {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tinggi-tombol); padding: 0 18px; border-radius: 12px;
  border: 1px solid var(--garis-kuat); background: var(--kartu); color: var(--teks);
  font-weight: 700; font-size: var(--t-dasar); line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: background var(--cepat), border-color var(--cepat), color var(--cepat), box-shadow var(--cepat), transform var(--cepat) var(--lentur), filter var(--cepat);
}
.tombol:hover, .tombol[data-demo="hover"] { border-color: color-mix(in srgb, var(--merek) 40%, var(--garis-kuat)); background: var(--merek-lembut); color: var(--teks); }
.tombol:active, .tombol[data-demo="tekan"] { transform: scale(.97); background: var(--merek-muda); }
.tombol:focus-visible, .tombol[data-demo="fokus"] { outline: 2.5px solid var(--aksen); outline-offset: 2px; }

.tombol-utama { background: var(--gradasi); border-color: transparent; color: #fff; box-shadow: var(--bayang-merek), inset 0 1px 0 rgba(255, 255, 255, .1); }
.tombol-utama:hover, .tombol-utama[data-demo="hover"] { background: var(--gradasi-sorot); border-color: transparent; color: #fff; box-shadow: 0 10px 26px rgba(11, 18, 48, .36), inset 0 1px 0 rgba(255, 255, 255, .14); transform: translateY(-1px); }
.tombol-utama:active, .tombol-utama[data-demo="tekan"] { background: var(--gradasi); transform: translateY(0) scale(.97); box-shadow: 0 3px 8px rgba(11, 18, 48, .3); }

.tombol-bahaya { color: var(--merah); }
.tombol-bahaya:hover, .tombol-bahaya[data-demo="hover"] { background: var(--merah-latar); border-color: var(--merah); color: var(--merah); }
.tombol-bahaya:active, .tombol-bahaya[data-demo="tekan"] { background: var(--merah-latar); }
.tombol-bahaya-penuh { background: var(--merah); border-color: transparent; color: #fff; }
[data-tema="gelap"] .tombol-bahaya-penuh { background: #d63a2a; }
.tombol-bahaya-penuh:hover { background: #a92415; border-color: transparent; color: #fff; }

.tombol-hantu { border-color: transparent; background: transparent; color: var(--merek); }
.tombol-hantu:hover, .tombol-hantu[data-demo="hover"] { background: var(--merek-muda); border-color: transparent; color: var(--merek); }

.tombol-kecil { min-height: 36px; padding: 0 12px; font-size: var(--t-sedang); border-radius: 10px; gap: 6px; }
.tombol-kecil::before { content: ""; position: absolute; inset: -4px 0; }
.tombol-ikon { width: var(--sentuh); padding: 0; }
.tombol-ikon.tombol-kecil { width: 36px; }
.tombol-blok { width: 100%; }

.tombol[disabled], .tombol[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none; filter: saturate(.6); }

.riak { position: absolute; z-index: -1; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .2; pointer-events: none; animation: riak 560ms var(--lentur) forwards; }
@keyframes riak { to { transform: scale(2.6); opacity: 0; } }

.tombol.memuat, .tombol[data-demo="memuat"] { pointer-events: none; color: transparent !important; }
.tombol.memuat > *, .tombol[data-demo="memuat"] > * { visibility: hidden; }
.tombol.memuat::after, .tombol[data-demo="memuat"]::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--teks) 20%, transparent); border-top-color: var(--merek); animation: putar .7s linear infinite;
}
.tombol-utama.memuat::after, .tombol-utama[data-demo="memuat"]::after, .tombol-bahaya-penuh.memuat::after { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
@keyframes putar { to { transform: rotate(360deg); } }
.tombol.berhasil { pointer-events: none; }
.tombol.berhasil::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 13px; margin: -9px 0 0 -4px;
  border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); animation: letup 360ms var(--pegas);
}
.tombol.berhasil > * { visibility: hidden; }

.grup-tombol { display: flex; flex-wrap: wrap; gap: var(--j-2); }
.grup-segmen { display: inline-flex; padding: 3px; gap: 2px; background: var(--abu-latar); border-radius: 12px; }
.grup-segmen a, .grup-segmen button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent;
  color: var(--redup); font-weight: 650; font-size: var(--t-sedang); cursor: pointer; text-decoration: none; transition: background var(--cepat), color var(--cepat), box-shadow var(--cepat);
}
.grup-segmen a:hover, .grup-segmen button:hover { color: var(--teks); }
.grup-segmen [aria-pressed="true"], .grup-segmen [aria-current="page"] { background: var(--kartu); color: var(--teks); box-shadow: var(--bayang-2); }

/* ---------- 9. Isian ---------- */
.formulir { display: grid; gap: var(--j-4); }
.isian { display: grid; gap: 6px; min-width: 0; align-content: start; }
.isian > label, .isian > .label, fieldset.isian > legend { font-weight: 650; font-size: var(--t-sedang); padding: 0; }
fieldset.isian { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.isian > legend { margin-bottom: 6px; }
.wajib { color: var(--aksen-teks); margin-left: 2px; }
.opsional { color: var(--redup); font-weight: 500; font-size: var(--t-kecil); margin-left: 4px; }
.bantu { font-size: var(--t-kecil); color: var(--redup); }
.salah { display: none; align-items: flex-start; gap: 6px; font-size: var(--t-kecil); font-weight: 620; color: var(--merah); }
.salah::before { content: "!"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--merah); color: var(--kartu); font-size: 11px; font-weight: 800; }
.isian.galat .salah { display: flex; animation: masuk var(--sedang) var(--lentur); }
.isian.galat .bantu { display: none; }

.masukan {
  display: block; width: 100%; min-height: var(--tinggi-isian); padding: 11px 13px; border-radius: 12px;
  border: 1.5px solid var(--garis-isian); background: var(--isian-latar); color: var(--teks); font-size: 16px; line-height: 1.4;
  transition: border-color var(--cepat), box-shadow var(--cepat), background var(--cepat);
}
@media (min-width: 760px) { .masukan { font-size: var(--t-dasar); } }
.masukan::placeholder { color: var(--samar); }
.masukan:hover, .masukan[data-demo="hover"] { border-color: color-mix(in srgb, var(--merek) 55%, var(--garis-isian)); }
.masukan:focus, .masukan[data-demo="fokus"] { outline: 0; border-color: var(--merek); box-shadow: 0 0 0 4px color-mix(in srgb, var(--merek) 16%, transparent); }
.masukan:disabled, .masukan[readonly] { background: var(--abu-latar); border-color: var(--garis); color: var(--redup); cursor: not-allowed; }
.masukan[readonly] { cursor: default; }
textarea.masukan { min-height: 96px; resize: vertical; }
select.masukan {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--redup) 50%), linear-gradient(135deg, var(--redup) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.masukan[type="date"], .masukan[type="time"] { -webkit-appearance: none; appearance: none; }
.masukan::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; padding: 4px; border-radius: 6px; transition: opacity var(--cepat), background var(--cepat); }
.masukan::-webkit-calendar-picker-indicator:hover { opacity: 1; background: var(--merek-muda); }
.isian.galat .masukan, .masukan[aria-invalid="true"] { border-color: var(--merah); box-shadow: 0 0 0 4px color-mix(in srgb, var(--merah) 16%, transparent); }
.isian.goyang .masukan, .isian.goyang .pilihan-grup, .isian.goyang .skor { animation: goyang 340ms var(--lentur); }
@keyframes goyang { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.masukan-ikon { position: relative; }
.masukan-ikon > .i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--redup); pointer-events: none; }
.masukan-ikon > .masukan { padding-left: 42px; }
.masukan-ikon > .tombol-dalam { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); }
.masukan-ikon:has(.tombol-dalam) > .masukan { padding-right: 48px; }
.tombol-dalam {
  display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--redup); cursor: pointer;
  transition: background var(--cepat), color var(--cepat);
}
.tombol-dalam:hover { background: var(--merek-muda); color: var(--merek); }
.masukan-akhiran { display: flex; align-items: stretch; }
.masukan-akhiran > .masukan { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.masukan-akhiran > span { display: grid; place-items: center; padding: 0 12px; border: 1.5px solid var(--garis-isian); border-left: 0; border-radius: 0 12px 12px 0; background: var(--kartu-2); color: var(--redup); font-weight: 620; font-size: var(--t-sedang); white-space: nowrap; }

.kisi-isian { display: grid; gap: var(--j-4); }
@media (min-width: 560px) {
  .kisi-isian.dua { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kisi-isian.tiga { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kisi-isian .lebar-penuh { grid-column: 1 / -1; }
}

/* Penambah angka (jumlah) */
.penambah { display: inline-grid; grid-template-columns: 46px minmax(56px, 72px) 46px; border: 1.5px solid var(--garis-isian); border-radius: 12px; overflow: hidden; background: var(--isian-latar); transition: border-color var(--cepat), box-shadow var(--cepat); }
.penambah:focus-within { border-color: var(--merek); box-shadow: 0 0 0 4px color-mix(in srgb, var(--merek) 16%, transparent); }
.penambah button { border: 0; background: transparent; color: var(--merek); font-size: 20px; font-weight: 600; cursor: pointer; transition: background var(--cepat); }
.penambah button:hover { background: var(--merek-muda); }
.penambah button:active { background: color-mix(in srgb, var(--merek) 18%, transparent); }
.penambah input { width: 100%; min-height: 43px; border: 0; background: transparent; text-align: center; font-weight: 700; font-size: 17px; -moz-appearance: textfield; }
.penambah input:focus { outline: 0; }
.penambah input::-webkit-inner-spin-button, .penambah input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Radio sebagai kartu */
.pilihan-grup { display: grid; gap: var(--j-2); }
@media (min-width: 560px) { .pilihan-grup.dua { grid-template-columns: repeat(2, 1fr); } .pilihan-grup.tiga { grid-template-columns: repeat(3, 1fr); } .pilihan-grup.empat { grid-template-columns: repeat(4, 1fr); } }
.pilihan-grup.empat-hp { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .pilihan-grup.empat-hp { grid-template-columns: repeat(4, 1fr); } }
.pilihan-kartu { position: relative; display: block; cursor: pointer; min-width: 0; }
.pilihan-kartu > input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pilihan-kartu > .pk {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 10px; align-items: start; height: 100%;
  min-height: 52px; padding: 12px 13px; border-radius: 12px; border: 1.5px solid var(--garis-kuat); background: var(--kartu);
  transition: border-color var(--cepat), background var(--cepat), box-shadow var(--cepat), transform var(--cepat) var(--lentur);
}
.pilihan-kartu > .pk::before {
  content: ""; grid-row: span 2; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--garis-isian); background: var(--isian-latar);
  transition: border var(--cepat) var(--lentur), background var(--cepat);
}
.pilihan-kartu > input[type="checkbox"] + .pk::before { border-radius: 6px; }
.pilihan-kartu .pk b { font-weight: 680; font-size: var(--t-sedang); }
.pilihan-kartu .pk small { grid-column: 2; font-size: var(--t-kecil); color: var(--redup); line-height: 1.35; }
.pilihan-kartu:hover > .pk { border-color: color-mix(in srgb, var(--merek) 45%, var(--garis-kuat)); background: var(--merek-lembut); }
.pilihan-kartu:active > .pk { transform: scale(.985); }
.pilihan-kartu > input:checked + .pk { border-color: var(--merek); background: var(--merek-lembut); box-shadow: 0 0 0 3px color-mix(in srgb, var(--merek) 14%, transparent); }
.pilihan-kartu > input:checked + .pk::before { border: 6px solid var(--merek); background: var(--kartu); }
.pilihan-kartu > input[type="checkbox"]:checked + .pk::before { border: 0; background: var(--merek); box-shadow: inset 0 0 0 0 transparent; }
.pilihan-kartu > input:focus-visible + .pk { outline: 2.5px solid var(--aksen); outline-offset: 2px; }
.pilihan-kartu > input:disabled + .pk { opacity: .5; cursor: not-allowed; }
.pilihan-kartu.p1 > input:checked + .pk { border-color: var(--merah); background: var(--merah-latar); box-shadow: 0 0 0 3px color-mix(in srgb, var(--merah) 14%, transparent); }
.pilihan-kartu.p1 > input:checked + .pk::before { border-color: var(--merah); }
.pilihan-kartu.bahaya > input:checked + .pk { border-color: var(--merah); background: var(--merah-latar); box-shadow: 0 0 0 3px color-mix(in srgb, var(--merah) 14%, transparent); }
.pilihan-kartu.bahaya > input:checked + .pk::before { border-color: var(--merah); }
.pilihan-kartu.baik > input:checked + .pk { border-color: var(--hijau); background: var(--hijau-latar); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hijau) 14%, transparent); }
.pilihan-kartu.baik > input:checked + .pk::before { border-color: var(--hijau); }
.pilihan-kartu.sedang > input:checked + .pk { border-color: var(--kuning-garis); background: var(--kuning-latar); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kuning-garis) 16%, transparent); }
.pilihan-kartu.sedang > input:checked + .pk::before { border-color: var(--kuning-garis); }
.pilihan-kartu.ringkas > .pk { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 10px 8px; }
.pilihan-kartu.ringkas > .pk::before { display: none; }
.pilihan-kartu.ringkas .pk small { grid-column: 1; }

/* Kotak centang */
.centang { position: relative; display: inline-flex; align-items: flex-start; gap: 10px; min-height: var(--sentuh); padding: 11px 0; cursor: pointer; font-size: var(--t-sedang); line-height: 1.4; }
.centang > input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.centang > .kotak {
  position: relative; flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--garis-isian); background: var(--isian-latar);
  transition: background var(--cepat), border-color var(--cepat), box-shadow var(--cepat);
}
.centang > .kotak::after {
  content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0); transition: transform var(--sedang) var(--pegas);
}
.centang:hover > .kotak { border-color: var(--merek); box-shadow: 0 0 0 4px var(--merek-muda); }
.centang > input:checked + .kotak { background: var(--gradasi); border-color: transparent; }
.centang > input:checked + .kotak::after { transform: rotate(45deg) scale(1); }
.centang > input:indeterminate + .kotak { background: var(--merek); border-color: transparent; }
.centang > input:indeterminate + .kotak::after { left: 5px; top: 9px; width: 10px; height: 0; border-width: 0 0 2.5px; transform: none; }
.centang > input:focus-visible + .kotak { outline: 2.5px solid var(--aksen); outline-offset: 2px; }
.centang > input:disabled + .kotak { opacity: .45; }
.centang > input:disabled ~ span { color: var(--redup); }
.centang.tanpa-teks { padding: 11px; margin: -11px; }

/* Tombol skor 1-5 */
.skor-baris { border: 0; margin: 0; padding: var(--j-4) 0; min-width: 0; display: grid; gap: 10px; border-top: 1px solid var(--garis); }
.skor-baris:first-of-type { border-top: 0; }
.skor-baris legend { float: left; width: 100%; padding: 0; font-weight: 680; font-size: var(--t-dasar); display: flex; justify-content: space-between; gap: var(--j-2); }
.skor-baris legend .nomor-skor { color: var(--redup); font-weight: 600; font-variant-numeric: tabular-nums; }
.skor { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; clear: both; }
.skor label { position: relative; display: block; cursor: pointer; }
.skor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.skor span {
  display: grid; place-items: center; min-height: 50px; border-radius: 12px; border: 1.5px solid var(--garis-kuat); background: var(--kartu);
  font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--redup);
  transition: background var(--cepat), color var(--cepat), border-color var(--cepat), transform var(--cepat) var(--lentur), box-shadow var(--cepat);
}
.skor label:hover span { border-color: var(--merek); color: var(--merek); background: var(--merek-lembut); }
.skor label:active span { transform: scale(.93); }
.skor input:checked + span { background: var(--gradasi); color: #fff; border-color: transparent; box-shadow: var(--bayang-merek); animation: letup 300ms var(--pegas); }
.skor input:focus-visible + span { outline: 2.5px solid var(--aksen); outline-offset: 2px; }
.skor-kunci { display: flex; justify-content: space-between; font-size: var(--t-mini); color: var(--redup); font-weight: 600; margin-top: -2px; }
@keyframes letup { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* Unggah berkas */
.unggah {
  position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; padding: var(--j-6) var(--j-4);
  border: 2px dashed var(--garis-isian); border-radius: var(--sudut-b); background: var(--kartu-2); cursor: pointer;
  transition: border-color var(--cepat), background var(--cepat), transform var(--sedang) var(--lentur);
}
.unggah > input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.unggah .unggah-ikon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--merek-muda); color: var(--merek); margin-bottom: 4px; transition: transform var(--sedang) var(--pegas); }
.unggah b { font-size: var(--t-dasar); }
.unggah span { font-size: var(--t-kecil); color: var(--redup); }
.unggah u { color: var(--merek); font-weight: 650; text-underline-offset: 3px; }
.unggah:hover, .unggah[data-demo="hover"] { border-color: var(--merek); background: var(--merek-lembut); }
.unggah:hover .unggah-ikon { transform: translateY(-3px); }
.unggah:focus-within { outline: 2.5px solid var(--aksen); outline-offset: 2px; }
.unggah.seret, .unggah[data-demo="seret"] { border-color: var(--merek); border-style: solid; background: var(--merek-muda); transform: scale(1.01); }
.unggah.seret .unggah-ikon, .unggah[data-demo="seret"] .unggah-ikon { transform: translateY(-4px) scale(1.08); background: var(--gradasi); color: #fff; }
.isian.galat .unggah { border-color: var(--merah); background: color-mix(in srgb, var(--merah-latar) 50%, var(--kartu)); }
@media (max-width: 759.98px) { .unggah .hanya-laptop-teks { display: none; } }
.berkas-terpilih { display: flex; align-items: center; gap: var(--j-3); padding: 10px 12px; border-radius: var(--sudut); border: 1px solid var(--garis); background: var(--kartu); animation: masuk var(--sedang) var(--lentur); min-width: 0; }
.berkas-terpilih .ikon-berkas { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--merek-muda); color: var(--merek); }
.berkas-terpilih .nama-berkas { flex: 1; min-width: 0; }
.berkas-terpilih .nama-berkas b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sedang); }
.berkas-terpilih .nama-berkas span { font-size: var(--t-kecil); color: var(--redup); }

/* ---------- 10. Lencana status & urgensi ---------- */
.lencana {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; min-height: 22px; border-radius: var(--bulat);
  font-size: var(--t-kecil); font-weight: 680; line-height: 1.3; white-space: nowrap; border: 1px solid transparent;
}
.lencana::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lencana.ikon::before, .lencana.polos::before { display: none; }
.lencana .i { width: 13px; height: 13px; stroke-width: 2.4; }
.l-hijau { background: var(--hijau-latar); color: var(--hijau); }
.l-kuning { background: var(--kuning-latar); color: var(--kuning); }
.l-merah { background: var(--merah-latar); color: var(--merah); }
.l-biru { background: var(--biru-latar); color: var(--biru); }
.l-abu { background: var(--abu-latar); color: var(--abu); }
.l-merek { background: var(--merek-muda); color: var(--merek); }
.l-aksen { background: var(--aksen-muda); color: var(--aksen-teks); }
/* Ditunda: garis putus-putus, supaya beda dari "Menunggu" dan "Ditolak" */
.l-tunda { background: transparent; color: var(--kuning); border: 1.5px dashed var(--kuning-garis); }
/* Dibatalkan: abu dengan teks dicoret */
.l-batal { background: var(--abu-latar); color: var(--abu); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.urgensi { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 7px; font-size: var(--t-mini); font-weight: 800; letter-spacing: .02em; }
.urgensi.p1 { background: var(--merah); color: #fff; }
[data-tema="gelap"] .urgensi.p1 { background: #e0412f; }
.urgensi.p2 { background: var(--kuning-latar); color: var(--kuning); box-shadow: inset 0 0 0 1.5px var(--kuning-garis); }
.urgensi.p3 { background: var(--biru-latar); color: var(--biru); }
.urgensi.p4 { background: var(--abu-latar); color: var(--abu); }
.baris-lencana { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---------- 11. Kartu ---------- */
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--sudut-b); box-shadow: var(--bayang-2); min-width: 0; }
.kartu-isi { padding: var(--j-4); }
@media (min-width: 760px) { .kartu-isi { padding: var(--j-5) var(--j-6); } }
.kartu-kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--j-3); padding: var(--j-4) var(--j-4) 0; }
@media (min-width: 760px) { .kartu-kepala { padding: var(--j-5) var(--j-6) 0; } }
.kartu-kepala h2, .kartu-kepala h3 { font-size: var(--t-dasar); font-weight: 720; display: flex; align-items: center; gap: var(--j-2); }
.kartu-kaki { display: flex; flex-wrap: wrap; gap: var(--j-2); justify-content: flex-end; padding: var(--j-3) var(--j-4); border-top: 1px solid var(--garis); }
.kartu-tautan { display: block; color: inherit; text-decoration: none; transition: transform var(--cepat) var(--lentur), box-shadow var(--cepat), border-color var(--cepat); }
.kartu-tautan:hover { color: inherit; transform: translateY(-2px); box-shadow: var(--bayang-3); border-color: color-mix(in srgb, var(--merek) 30%, var(--garis)); }
.kartu-tautan:active { transform: scale(.985); }
.bagian-nomor { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--gradasi); color: #fff; font-size: 13px; font-weight: 800; }

/* Kartu angka */
.ringkas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .ringkas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--j-4); } }
.angka-kartu {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 15px; border-radius: var(--sudut-b);
  background: var(--kartu); border: 1px solid var(--garis); box-shadow: var(--bayang-2); color: inherit; text-decoration: none;
  transition: transform var(--cepat) var(--lentur), box-shadow var(--cepat), border-color var(--cepat);
}
@media (min-width: 760px) { .angka-kartu { padding: 18px 20px; } }
.angka-kartu:hover, .angka-kartu[data-demo="hover"] { color: inherit; transform: translateY(-2px); box-shadow: var(--bayang-3); border-color: color-mix(in srgb, var(--merek) 30%, var(--garis)); }
.angka-kartu:active { transform: scale(.98); }
.angka-kartu .label { font-size: var(--t-kecil); color: var(--redup); font-weight: 640; }
.angka-kartu .nilai { font-size: var(--t-angka); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
@media (min-width: 760px) { .angka-kartu .nilai { font-size: 34px; } }
.angka-kartu .ket { font-size: var(--t-kecil); color: var(--redup); display: flex; align-items: center; gap: 6px; }
.angka-kartu .ket.merah { color: var(--merah); font-weight: 650; }
.angka-kartu .panah-sudut { position: absolute; right: 12px; top: 12px; color: var(--samar); transition: transform var(--cepat) var(--lentur), color var(--cepat); }
.angka-kartu:hover .panah-sudut { transform: translate(2px, -2px); color: var(--merek); }
.angka-kartu.penting { background: var(--gradasi); border-color: transparent; color: #fff; box-shadow: 0 12px 30px rgba(11, 18, 48, .3); overflow: hidden; }
.angka-kartu.penting::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; border: 18px solid rgba(255, 255, 255, .05); pointer-events: none; }
.angka-kartu.penting:hover { background: var(--gradasi-sorot); border-color: transparent; }
.angka-kartu.penting .label, .angka-kartu.penting .ket { color: var(--pada-merek-redup); }
.angka-kartu.penting .panah-sudut { color: rgba(255, 255, 255, .6); }
.angka-kartu.penting .titik-aksen { width: 7px; height: 7px; border-radius: 50%; background: var(--aksen); box-shadow: 0 0 0 3px rgba(236, 95, 115, .25); }

/* ---------- 12. Baris daftar (garis warna urgensi) ---------- */
.daftar { list-style: none; margin: 0; padding: 0; }
.daftar > li + li { border-top: 1px solid var(--garis); }
.baris {
  position: relative; display: flex; align-items: center; gap: var(--j-3); min-height: 64px; padding: 13px var(--j-4) 13px 18px;
  color: inherit; text-decoration: none; transition: background var(--cepat);
}
.baris:hover, .baris[data-demo="hover"] { background: var(--merek-lembut); color: inherit; }
.baris:active { background: var(--merek-muda); }
.baris:focus-visible { outline-offset: -3px; border-radius: var(--sudut-s); }
.baris::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: transparent; }
.baris.p1::before { background: var(--merah); }
.baris.p2::before { background: var(--kuning-garis); }
.baris.p3::before { background: var(--biru); }
.baris.p4::before { background: var(--garis-kuat); }
.baris.lewat { background: color-mix(in srgb, var(--merah-latar) 45%, transparent); }
.baris.lewat:hover { background: color-mix(in srgb, var(--merah-latar) 75%, transparent); }
.daftar > li:first-child > .baris { border-radius: var(--sudut-b) var(--sudut-b) 0 0; }
.daftar > li:last-child > .baris { border-radius: 0 0 var(--sudut-b) var(--sudut-b); }
.daftar > li:only-child > .baris { border-radius: var(--sudut-b); }
.baris .ikon-bulat { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--merek-muda); color: var(--merek); }
.baris.lewat .ikon-bulat { background: var(--merah-latar); color: var(--merah); }
.baris .teks { flex: 1; min-width: 0; display: grid; gap: 3px; }
.baris .judul { font-weight: 670; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baris .judul.bungkus { white-space: normal; text-wrap: pretty; }
.baris .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--t-kecil); color: var(--redup); }
.baris .meta .pisah { width: 3px; height: 3px; border-radius: 50%; background: var(--samar); }
.baris .panah { flex: none; color: var(--samar); transition: transform var(--cepat) var(--lentur), color var(--cepat); }
.baris:hover .panah { transform: translateX(3px); color: var(--merek); }

/* ---------- 13. Tab, chip, pencarian ---------- */
.tab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: var(--abu-latar); }
.tab a, .tab button {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--redup); font-weight: 650; font-size: var(--t-sedang); text-decoration: none; cursor: pointer; text-align: center;
  transition: background var(--cepat), color var(--cepat), box-shadow var(--cepat), transform var(--cepat) var(--lentur);
}
.tab a:hover, .tab button:hover { color: var(--teks); background: color-mix(in srgb, var(--kartu) 55%, transparent); }
.tab a:active, .tab button:active { transform: scale(.97); }
.tab [aria-current="page"], .tab [aria-selected="true"] { background: var(--kartu); color: var(--teks); box-shadow: var(--bayang-2); }
@media (min-width: 760px) {
  .tab { display: flex; gap: var(--j-1); padding: 0; background: none; border-radius: 0; border-bottom: 1px solid var(--garis); }
  .tab a, .tab button { min-height: 44px; border-radius: 0; padding: 0 14px; }
  .tab a:hover, .tab button:hover { background: none; }
  .tab [aria-current="page"], .tab [aria-selected="true"] { background: none; box-shadow: none; color: var(--merek); }
  .tab [aria-current="page"]::after, .tab [aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--gradasi); animation: garis-tab var(--sedang) var(--lentur); }
}
@keyframes garis-tab { from { transform: scaleX(.3); opacity: 0; } }

.chip-grup { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip > input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip > span, a.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border-radius: var(--bulat);
  border: 1px solid var(--garis-kuat); background: var(--kartu); color: var(--teks); font-size: var(--t-sedang); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background var(--cepat), border-color var(--cepat), color var(--cepat), transform var(--cepat) var(--lentur);
}
.chip i { font-style: normal; color: var(--redup); font-weight: 650; font-variant-numeric: tabular-nums; }
.chip:hover > span, a.chip:hover { border-color: var(--merek); color: var(--merek); }
.chip:active > span, a.chip:active { transform: scale(.95); }
.chip > input:checked + span, a.chip[aria-pressed="true"] { background: var(--merek); border-color: var(--merek); color: var(--kartu); }
.chip > input:checked + span i, a.chip[aria-pressed="true"] i { color: inherit; opacity: .75; }
.chip > input:focus-visible + span { outline: 2.5px solid var(--aksen); outline-offset: 2px; }
.chip > input:checked + span::before { content: ""; width: 5px; height: 9px; margin: -2px 1px 0 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chip.chip-hapus > span { padding-right: 4px; background: var(--merek-muda); border-color: transparent; color: var(--merek); }
.chip-hapus button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background var(--cepat); }
.chip-hapus button:hover { background: color-mix(in srgb, var(--merek) 16%, transparent); }

.cari { position: relative; min-width: 0; }
.cari > .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--redup); pointer-events: none; transition: color var(--cepat); }
.cari > input { padding-left: 44px; padding-right: 44px; border-radius: var(--bulat); }
.cari:focus-within > .i { color: var(--merek); }
.cari kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); padding: 1px 7px; border-radius: 6px; border: 1px solid var(--garis-kuat); background: var(--kartu-2); font: 600 12px var(--huruf-mono); color: var(--redup); }
.cari:focus-within kbd { opacity: 0; }

.alat { display: grid; gap: var(--j-3); margin-bottom: var(--j-4); }
@media (min-width: 760px) { .alat { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

/* ---------- 14. Tabel ---------- */
.wadah-tabel { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--sudut-b); background: var(--kartu); box-shadow: var(--bayang-2); overscroll-behavior-x: contain; }
.tabel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-sedang); }
.tabel th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: var(--t-kecil); font-weight: 700; color: var(--redup); background: var(--kartu-2); padding: 11px 14px; border-bottom: 1px solid var(--garis); white-space: nowrap; }
.tabel td { padding: 12px 14px; border-bottom: 1px solid var(--garis); vertical-align: middle; }
.tabel tbody tr { transition: background var(--cepat); }
.tabel tbody tr:hover { background: var(--merek-lembut); }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tr.dipilih { background: color-mix(in srgb, var(--merek-muda) 70%, transparent); }
.tabel tr.galat-baris { background: color-mix(in srgb, var(--merah-latar) 60%, transparent); }
.tabel .angka, .tabel .kanan { text-align: right; font-variant-numeric: tabular-nums; }
.tabel .lebar-centang { width: 48px; }
.tabel a.nama { color: var(--teks); font-weight: 660; text-decoration: none; }
.tabel a.nama:hover { color: var(--merek); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 15. Papan kanban ---------- */
.kanban { display: grid; gap: var(--j-5); }
.kolom { min-width: 0; }
.kolom-kepala { display: flex; align-items: center; gap: var(--j-2); padding: 0 2px var(--j-2); }
.kolom-kepala h2 { font-size: var(--t-sedang); font-weight: 720; }
.kolom-kepala .jumlah { padding: 0 7px; border-radius: var(--bulat); background: var(--abu-latar); color: var(--redup); font-size: var(--t-kecil); font-weight: 700; font-variant-numeric: tabular-nums; }
.kolom-kepala .titik-tahap { width: 8px; height: 8px; border-radius: 50%; background: var(--garis-kuat); }
.kolom-kepala .pilih-kolom { margin-left: auto; }
.kolom-isi { display: grid; gap: var(--j-2); }
.kolom-lagi { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 12px; color: var(--merek); font-weight: 650; font-size: var(--t-sedang); text-decoration: none; border: 1px dashed var(--garis-kuat); transition: background var(--cepat), border-color var(--cepat); }
.kolom-lagi:hover { background: var(--merek-lembut); border-color: var(--merek); }
.kolom-kosong { display: grid; place-items: center; gap: 4px; padding: var(--j-5) var(--j-3); border-radius: 12px; border: 1px dashed var(--garis-kuat); color: var(--redup); font-size: var(--t-kecil); text-align: center; }
@media (min-width: 760px) {
  .kanban { grid-auto-flow: column; grid-auto-columns: 268px; gap: var(--j-3); overflow-x: auto; padding-bottom: var(--j-3); scroll-snap-type: x proximity; overscroll-behavior-x: contain; align-items: start; }
  .kolom { scroll-snap-align: start; background: var(--kartu-2); border: 1px solid var(--garis); border-radius: var(--sudut-b); padding: var(--j-3) var(--j-2) var(--j-2); max-height: 640px; overflow-y: auto; }
  .kolom-kepala { position: sticky; top: calc(-1 * var(--j-3)); padding: var(--j-1) var(--j-2) var(--j-2); background: var(--kartu-2); z-index: 1; }
}
.kartu-kandidat {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: start;
  padding: 11px 12px; border-radius: 13px; background: var(--kartu); border: 1px solid var(--garis); box-shadow: var(--bayang-1);
  transition: border-color var(--cepat), box-shadow var(--cepat), transform var(--cepat) var(--lentur), background var(--cepat);
}
.kartu-kandidat:hover { border-color: color-mix(in srgb, var(--merek) 35%, var(--garis)); box-shadow: var(--bayang-2); transform: translateY(-1px); }
.kartu-kandidat:has(input:checked) { border-color: var(--merek); background: var(--merek-lembut); box-shadow: 0 0 0 3px color-mix(in srgb, var(--merek) 14%, transparent); }
.kartu-kandidat .centang { min-height: 0; padding: 0; margin-top: 1px; }
.kartu-kandidat .nama { font-weight: 680; color: var(--teks); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartu-kandidat .nama::after { content: ""; position: absolute; inset: 0 0 0 40px; border-radius: 13px; }
.kartu-kandidat .nama:hover { color: var(--merek); }
.kartu-kandidat .nama:focus-visible { outline: 0; }
.kartu-kandidat .nama:focus-visible::after { outline: 2.5px solid var(--aksen); outline-offset: 2px; }
.kartu-kandidat .meta { grid-column: 2; font-size: var(--t-kecil); color: var(--redup); font-variant-numeric: tabular-nums; }
.kartu-kandidat .baris-lencana { grid-column: 2; margin-top: 2px; }

/* ---------- 16. Bar kemajuan, nilai ---------- */
.kemajuan { display: grid; gap: 6px; }
.kemajuan-label { display: flex; justify-content: space-between; gap: var(--j-2); font-size: var(--t-kecil); color: var(--redup); }
.kemajuan-label b { color: var(--teks); font-variant-numeric: tabular-nums; }
progress.bar, meter.bar { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: var(--bulat); background: var(--abu-latar); overflow: hidden; }
progress.bar::-webkit-progress-bar { background: var(--abu-latar); border-radius: var(--bulat); }
progress.bar::-webkit-progress-value { background: var(--gradasi); border-radius: var(--bulat); transition: width var(--lambat) var(--lentur); }
progress.bar::-moz-progress-bar { background: var(--gradasi); border-radius: var(--bulat); }
progress.bar.penuh::-webkit-progress-value { background: var(--hijau); }
progress.bar.penuh::-moz-progress-bar { background: var(--hijau); }
meter.bar::-webkit-meter-bar { background: var(--abu-latar); border: 0; border-radius: var(--bulat); height: 8px; }
meter.bar::-webkit-meter-optimum-value { background: var(--hijau); border-radius: var(--bulat); transition: width var(--lambat) var(--lentur); }
meter.bar::-webkit-meter-suboptimum-value { background: var(--kuning-garis); border-radius: var(--bulat); transition: width var(--lambat) var(--lentur); }
meter.bar::-webkit-meter-even-less-good-value { background: var(--merah); border-radius: var(--bulat); transition: width var(--lambat) var(--lentur); }
meter.bar:-moz-meter-optimum::-moz-meter-bar { background: var(--hijau); }
meter.bar:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--kuning-garis); }
meter.bar:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--merah); }
meter.bar.merek::-webkit-meter-optimum-value, meter.bar.merek::-webkit-meter-suboptimum-value, meter.bar.merek::-webkit-meter-even-less-good-value { background: var(--gradasi); }
.bar-tebal { height: 12px !important; }
.bar-tebal::-webkit-meter-bar { height: 12px !important; }

/* ---------- 17. Penanda tahap ---------- */
.tahap { list-style: none; margin: 0; padding: var(--j-4) var(--j-1); display: flex; counter-reset: tahap; }
.tahap li { flex: 1 1 0; min-width: 0; position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; font-size: var(--t-mini); line-height: 1.25; color: var(--redup); font-weight: 650; overflow-wrap: anywhere; padding: 0 2px; }
.tahap small { display: none; font-weight: 500; font-size: var(--t-mini); color: var(--redup); }
@media (min-width: 520px) { .tahap { padding: var(--j-5) var(--j-4); } .tahap li { font-size: var(--t-kecil); } .tahap small { display: block; } }
.tahap li::before { content: ""; position: absolute; top: 15px; left: calc(-50% + 20px); right: calc(50% + 20px); height: 3px; border-radius: 3px; background: var(--garis); transition: background var(--lambat) var(--lentur); }
.tahap li:first-child::before { display: none; }
.tahap .bulat {
  position: relative; z-index: 1; width: 32px; height: 32px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center;
  background: var(--abu-latar); color: var(--redup); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  transition: background var(--sedang), color var(--sedang), box-shadow var(--sedang), transform var(--sedang) var(--pegas);
}
.tahap .bulat .i { width: 16px; height: 16px; stroke-width: 2.8; }
.tahap .selesai { color: var(--teks); }
.tahap .selesai::before, .tahap .sekarang::before, .tahap .dikembalikan::before, .tahap .ditunda::before, .tahap .ditolak::before { background: var(--merek); }
.tahap .selesai .bulat { background: var(--gradasi); color: #fff; box-shadow: var(--bayang-merek); }
.tahap .sekarang { color: var(--merek); }
.tahap .sekarang .bulat { background: var(--kartu); color: var(--merek); box-shadow: 0 0 0 3px var(--merek); animation: denyut 2s var(--lentur) infinite; }
@keyframes denyut { 0%, 100% { box-shadow: 0 0 0 3px var(--merek), 0 0 0 3px transparent; } 50% { box-shadow: 0 0 0 3px var(--merek), 0 0 0 9px color-mix(in srgb, var(--merek) 16%, transparent); } }
.tahap .dikembalikan { color: var(--kuning); }
.tahap .dikembalikan .bulat { background: var(--kuning-latar); color: var(--kuning); box-shadow: 0 0 0 3px var(--kuning-garis); }
.tahap .ditunda { color: var(--kuning); }
.tahap .ditunda .bulat { background: var(--kartu); color: var(--kuning); outline: 2.5px dashed var(--kuning-garis); outline-offset: 1px; }
.tahap .ditolak { color: var(--merah); }
.tahap .ditolak .bulat { background: var(--merah); color: #fff; }
.tahap .gugur { opacity: .5; }
.tahap .gugur .bulat { background: transparent; box-shadow: inset 0 0 0 1.5px var(--garis-kuat); }
.tahap .baru-selesai .bulat { animation: letup 420ms var(--pegas); }

/* Langkah wizard (impor) */
.langkah { list-style: none; margin: 0 0 var(--j-5); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.langkah li { display: grid; gap: 8px; font-size: var(--t-kecil); font-weight: 650; color: var(--redup); }
.langkah li::before { content: ""; height: 4px; border-radius: 4px; background: var(--garis); transition: background var(--lambat) var(--lentur); }
.langkah li span { display: flex; align-items: center; gap: 6px; }
.langkah li b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--abu-latar); font-size: var(--t-mini); }
.langkah .selesai::before, .langkah .sekarang::before { background: var(--gradasi); }
.langkah .selesai { color: var(--teks); }
.langkah .selesai b { background: var(--merek); color: var(--kartu); }
.langkah .sekarang { color: var(--merek); }
.langkah .sekarang b { background: var(--gradasi); color: #fff; }

/* ---------- 18. Garis waktu ---------- */
.garis-waktu { list-style: none; margin: 0; padding: var(--j-2) var(--j-4) var(--j-4); }
@media (min-width: 760px) { .garis-waktu { padding: var(--j-2) var(--j-6) var(--j-5); } }
.garis-waktu li { position: relative; padding: 10px 0 10px 28px; display: grid; gap: 2px; }
.garis-waktu li::before { content: ""; position: absolute; left: 6px; top: 24px; bottom: -10px; width: 2px; background: var(--garis); }
.garis-waktu li:last-child::before { display: none; }
.garis-waktu li::after { content: ""; position: absolute; left: 0; top: 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--kartu); box-shadow: inset 0 0 0 3.5px var(--merek); }
.garis-waktu li.gw-hijau::after { box-shadow: inset 0 0 0 7px var(--hijau); }
.garis-waktu li.gw-kuning::after { box-shadow: inset 0 0 0 3.5px var(--kuning-garis); }
.garis-waktu li.gw-merah::after { box-shadow: inset 0 0 0 7px var(--merah); }
.garis-waktu li.gw-abu::after { box-shadow: inset 0 0 0 3.5px var(--garis-kuat); }
.garis-waktu b { font-weight: 680; font-size: var(--t-sedang); }
.garis-waktu .meta { font-size: var(--t-kecil); color: var(--redup); }
.garis-waktu blockquote { margin: 6px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--kartu-2); border: 1px solid var(--garis); font-size: var(--t-sedang); }
.garis-waktu li.baru { animation: masuk var(--lambat) var(--lentur); }
.garis-waktu li.baru::after { animation: letup 420ms var(--pegas) 120ms both; }

/* ---------- 19. Rincian, agenda ---------- */
.rincian { margin: 0; display: grid; }
.rincian > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--j-3); padding: 10px 0; border-bottom: 1px dashed var(--garis); }
.rincian > div:last-child { border-bottom: 0; }
.rincian dt { color: var(--redup); font-size: var(--t-sedang); }
.rincian dd { margin: 0; font-weight: 620; text-align: right; overflow-wrap: anywhere; }
.rincian.kiri dd { text-align: left; }
.rincian-grup + .rincian-grup { margin-top: var(--j-4); }
.rincian-grup > h3 { margin-bottom: 2px; }

.agenda { list-style: none; margin: 0; padding: 6px 0; }
.agenda li a, .agenda li > div { display: flex; gap: var(--j-3); align-items: center; padding: 10px var(--j-4); color: inherit; text-decoration: none; border-radius: 12px; transition: background var(--cepat); }
.agenda li a:hover { background: var(--merek-lembut); color: inherit; }
.agenda .tgl { flex: none; width: 46px; padding: 5px 0 6px; text-align: center; border-radius: 12px; background: var(--aksen-muda); color: var(--aksen-teks); line-height: 1.05; }
.agenda .tgl small { display: block; font-size: 10.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.agenda .tgl b { display: block; font-size: 19px; font-weight: 800; }
.agenda .teks { display: grid; gap: 1px; min-width: 0; }
.agenda .teks b { font-weight: 660; font-size: var(--t-sedang); }
.agenda .teks span { font-size: var(--t-kecil); color: var(--redup); }

/* ---------- 20. Peringatan (kotak pesan dalam halaman) ---------- */
.peringatan { display: flex; gap: var(--j-3); align-items: flex-start; padding: 13px 14px; border-radius: var(--sudut); background: var(--biru-latar); color: var(--teks); font-size: var(--t-sedang); }
.peringatan > .i { color: var(--biru); margin-top: 1px; }
.peringatan b { display: block; margin-bottom: 2px; }
.peringatan .isi-peringatan { flex: 1; min-width: 0; display: grid; gap: 4px; }
.peringatan.p-kuning { background: var(--kuning-latar); }
.peringatan.p-kuning > .i { color: var(--kuning); }
.peringatan.p-galat { background: var(--merah-latar); }
.peringatan.p-galat > .i { color: var(--merah); }
.peringatan.p-berhasil { background: var(--hijau-latar); }
.peringatan.p-berhasil > .i { color: var(--hijau); }
.peringatan.p-merek { background: var(--merek-muda); }
.peringatan.p-merek > .i { color: var(--merek); }
.peringatan.goyang { animation: goyang 340ms var(--lentur); }

/* ---------- 21. Paginasi ---------- */
.paginasi { display: flex; align-items: center; justify-content: space-between; gap: var(--j-2); margin-top: var(--j-4); }
.paginasi .halaman-ke { font-size: var(--t-sedang); color: var(--redup); }
.paginasi ol { list-style: none; display: none; gap: 4px; margin: 0; padding: 0; }
.paginasi ol a { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 10px; color: var(--teks); text-decoration: none; font-weight: 620; font-variant-numeric: tabular-nums; transition: background var(--cepat), color var(--cepat); }
.paginasi ol a:hover { background: var(--merek-muda); color: var(--merek); }
.paginasi ol a[aria-current="page"] { background: var(--gradasi); color: #fff; }
.paginasi ol .elip { display: grid; place-items: center; min-width: 24px; color: var(--redup); }
@media (min-width: 760px) { .paginasi ol { display: flex; } .paginasi .halaman-ke { display: none; } }

/* ---------- 22. Bar aksi & bar pilih ---------- */
.bar-aksi {
  position: sticky; bottom: 0; z-index: 15; display: flex; gap: 10px;
  margin: var(--j-5) calc(-1 * var(--j-4)) calc(-1 * var(--j-12) - env(safe-area-inset-bottom));
  padding: 12px var(--j-4) calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--kartu) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--garis);
}
.bar-aksi > .tombol { flex: 1; min-width: 0; }
.bar-aksi > .tombol-ikon { flex: none; }
.bar-aksi .status-aksi { margin: auto; animation: masuk var(--sedang) var(--lentur); }
@media (min-width: 760px) {
  .bar-aksi { position: static; margin: var(--j-6) 0 0; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; justify-content: flex-end; }
  .bar-aksi > .tombol { flex: none; min-width: 148px; }
  .bar-aksi .status-aksi { margin: 0 0 0 auto; }
}
.bar-aksi.lengket-laptop { position: sticky; }

.bar-pilih {
  position: fixed; z-index: 35; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); width: min(calc(100% - 24px), 640px);
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 18px;
  background: var(--gradasi); color: #fff; box-shadow: var(--bayang-4);
  transform: translate(-50%, 0); transition: transform var(--sedang) var(--lentur), opacity var(--sedang);
}
.js .bar-pilih:not(.tampil) { transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none; transition-timing-function: var(--keluar); transition-duration: 160ms; }
.bar-pilih .jumlah-pilih { font-weight: 720; font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: auto; }
.bar-pilih .tombol { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .16); color: #fff; min-height: 42px; padding: 0 12px; font-size: var(--t-sedang); }
.bar-pilih .tombol:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .3); color: #fff; }
.bar-pilih .tombol.putih { background: #fff; color: #1f2f6b; border-color: transparent; }
.bar-pilih .tombol.putih:hover { background: #eef1fb; color: #1f2f6b; }
.bar-pilih .tombol-ikon { width: 42px; padding: 0; background: transparent; border-color: transparent; }

/* Ringkasan nilai menempel (penilaian interview) */
.ringkas-nilai {
  position: sticky; bottom: 0; z-index: 15; display: flex; align-items: center; gap: var(--j-3);
  margin: var(--j-5) calc(-1 * var(--j-4)) calc(-1 * var(--j-12) - env(safe-area-inset-bottom));
  padding: 10px var(--j-4) calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--kartu) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--garis);
}
.ringkas-nilai .angka-besar { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ringkas-nilai .angka-besar small { font-size: 13px; font-weight: 650; color: var(--redup); letter-spacing: 0; }
.ringkas-nilai .tengah { flex: 1; min-width: 0; display: grid; gap: 5px; }
.ringkas-nilai .tengah span { font-size: var(--t-kecil); color: var(--redup); }
.ringkas-nilai .tombol { flex: none; }
.angka-ganti { display: inline-block; }
.angka-ganti.ganti { animation: ganti-angka 300ms var(--lentur); }
@keyframes ganti-angka { 0% { transform: translateY(-30%); opacity: .2; } 100% { transform: none; opacity: 1; } }

/* ---------- 23. Pesan singkat (kilat) ---------- */
.kilat-wadah { position: fixed; z-index: 60; left: 50%; top: calc(12px + env(safe-area-inset-top)); transform: translateX(-50%); width: min(calc(100% - 24px), 420px); display: grid; gap: 8px; pointer-events: none; }
@media (min-width: 760px) { .kilat-wadah { top: 78px; } }
.kilat {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 12px; border-radius: 14px;
  background: #121628; color: #fff; font-weight: 620; font-size: var(--t-sedang); box-shadow: 0 14px 36px rgba(5, 8, 20, .32);
  animation: kilat-masuk var(--lambat) var(--lentur) both;
}
[data-tema="gelap"] .kilat { background: #262b42; box-shadow: 0 14px 36px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.kilat.keluar { animation: kilat-keluar 180ms var(--keluar) both; }
@keyframes kilat-masuk { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
@keyframes kilat-keluar { to { opacity: 0; transform: translateY(-8px) scale(.98); } }
.kilat .tanda { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #2fbf6b; color: #fff; }
.kilat .tanda .i { width: 15px; height: 15px; stroke-width: 3; }
.kilat-galat .tanda { background: #ff6b5b; }
.kilat-info .tanda { background: #5b7cff; }
.kilat .teks-kilat { flex: 1; min-width: 0; }
.kilat .tutup-kilat { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: rgba(255, 255, 255, .7); cursor: pointer; transition: background var(--cepat), color var(--cepat); }
.kilat .tutup-kilat:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.kilat .tautan-kilat { color: #b4c1ff; font-weight: 700; text-decoration: none; padding: 6px 8px; border-radius: 8px; }
.kilat .tautan-kilat:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.kilat.statis { animation: none; }

/* ---------- 24. Lembar bawah (HP) / dialog (laptop) ---------- */
dialog.lembar {
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: calc(100dvh - 48px); margin: 0; overflow: auto;
  padding: 8px var(--j-5) calc(var(--j-5) + env(safe-area-inset-bottom)); border: 0; border-radius: 24px 24px 0 0;
  background: var(--kartu); color: var(--teks); box-shadow: 0 -12px 48px rgba(0, 0, 0, .22);
  transform: translateY(100%); transition: transform 160ms var(--keluar);
}
dialog.lembar.buka { transform: none; transition: transform var(--sedang) var(--lentur); }
dialog.lembar::backdrop { background: var(--tirai); opacity: 0; transition: opacity 160ms var(--keluar); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
dialog.lembar.buka::backdrop { opacity: 1; transition: opacity var(--sedang) var(--lentur); }
.lembar .pegangan { width: 40px; height: 5px; border-radius: 5px; background: var(--garis-kuat); margin: 0 auto 14px; cursor: grab; touch-action: none; }
.lembar .lembar-kepala { display: flex; align-items: flex-start; gap: var(--j-3); margin-bottom: var(--j-4); }
.lembar .lembar-ikon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--merek-muda); color: var(--merek); }
.lembar .lembar-ikon.bahaya { background: var(--merah-latar); color: var(--merah); }
.lembar .lembar-ikon.kuning { background: var(--kuning-latar); color: var(--kuning); }
.lembar h2 { font-size: var(--t-judul-3); font-weight: 750; }
.lembar .lembar-kepala p { margin-top: 4px; color: var(--redup); font-size: var(--t-sedang); }
.lembar .lembar-tombol { display: flex; gap: 10px; margin-top: var(--j-5); }
.lembar .lembar-tombol .tombol { flex: 1; }
@media (min-width: 760px) {
  dialog.lembar {
    inset: 0; margin: auto; width: min(480px, calc(100% - 48px)); height: fit-content; max-height: calc(100dvh - 96px);
    padding: var(--j-6); border-radius: 20px; box-shadow: var(--bayang-4);
    opacity: 0; transform: translateY(12px) scale(.97); transition: opacity 140ms var(--keluar), transform 140ms var(--keluar);
  }
  dialog.lembar.buka { opacity: 1; transform: none; transition: opacity var(--sedang) var(--lentur), transform var(--sedang) var(--lentur); }
  .lembar .pegangan { display: none; }
  .lembar .lembar-tombol { justify-content: flex-end; }
  .lembar .lembar-tombol .tombol { flex: none; min-width: 120px; }
}
.lembar-pratinjau { position: relative; display: grid; gap: 0; border-radius: var(--sudut-b); overflow: hidden; background: var(--tirai); padding-top: 64px; }
.lembar-pratinjau > .lembar-statis { position: static; display: block; transform: none; width: 100%; border-radius: 24px 24px 0 0; background: var(--kartu); padding: 8px var(--j-5) var(--j-5); }

/* ---------- 25. Keadaan kosong & memuat ---------- */
.kosong { display: grid; justify-items: center; text-align: center; gap: var(--j-2); padding: var(--j-10) var(--j-5); }
.kosong .kosong-ikon { position: relative; display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: var(--j-2); border-radius: 26px; background: var(--merek-muda); color: var(--merek); }
.kosong .kosong-ikon::before { content: ""; position: absolute; inset: -10px; border-radius: 32px; border: 1.5px dashed var(--garis-kuat); }
.kosong .kosong-ikon::after { content: ""; position: absolute; right: -4px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--aksen); box-shadow: 0 0 0 4px var(--kartu); }
.kosong .kosong-ikon .i { width: 32px; height: 32px; stroke-width: 1.8; }
.kosong h3 { font-size: var(--t-besar); font-weight: 720; }
.kosong p { max-width: 320px; color: var(--redup); font-size: var(--t-sedang); text-wrap: pretty; }
.kosong .tombol { margin-top: var(--j-2); }

.kerangka { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--abu-latar) 0%, var(--abu-latar) 35%, color-mix(in srgb, var(--abu-latar) 40%, var(--kartu)) 50%, var(--abu-latar) 65%, var(--abu-latar) 100%); background-size: 300% 100%; animation: kilau 1.4s linear infinite; }
@keyframes kilau { from { background-position: 100% 0; } to { background-position: 0 0; } }
.kerangka.teks { height: 12px; }
.kerangka.judul { height: 16px; width: 60%; }
.kerangka.bulat { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.kerangka.angka { height: 30px; width: 50%; }

/* ---------- 26. Sandi sementara (tampil sekali) ---------- */
.sandi-sekali { display: grid; gap: var(--j-4); padding: var(--j-5); border-radius: var(--sudut-b); background: var(--kartu); border: 1.5px solid var(--kuning-garis); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kuning-garis) 16%, transparent), var(--bayang-3); }
.sandi-kotak { display: flex; align-items: center; gap: var(--j-2); padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--kartu-2); border: 1px dashed var(--garis-kuat); }
.sandi-kotak code { flex: 1; min-width: 0; font: 750 22px/1.3 var(--huruf-mono); letter-spacing: .12em; overflow-wrap: anywhere; color: var(--teks); }
.sandi-kotak .tombol.tersalin { background: var(--hijau-latar); border-color: var(--hijau); color: var(--hijau); }

/* ---------- 27. Halaman masuk ---------- */
.masuk { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.masuk-sisi {
  position: relative; overflow: hidden; color: #fff; background: var(--gradasi);
  padding: calc(var(--j-8) + env(safe-area-inset-top)) var(--j-5) 72px;
}
.masuk-sisi::before { content: ""; position: absolute; right: -80px; top: -60px; width: 260px; height: 260px; border-radius: 50%; border: 36px solid rgba(255, 255, 255, .04); }
.masuk-sisi::after { content: ""; position: absolute; left: var(--j-5); bottom: 44px; width: 36px; height: 3px; border-radius: 3px; background: var(--aksen); }
.masuk-sisi .merek, .masuk-sisi .merek:hover { color: #fff; }
.masuk-sisi .merek-ikon { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.masuk-sisi .merek-teks small { color: #ffb1bb; }
.masuk-sisi h1 { margin-top: var(--j-6); font-size: 26px; font-weight: 760; letter-spacing: -.025em; max-width: 420px; text-wrap: balance; }
.masuk-sisi p { margin-top: var(--j-2); color: rgba(255, 255, 255, .75); max-width: 400px; }
.masuk-form-wadah { padding: 0 var(--j-4) var(--j-8); margin-top: -44px; position: relative; }
.masuk-form { max-width: 420px; margin: 0 auto; padding: var(--j-6) var(--j-5); }
.masuk-form h2 { font-size: var(--t-judul-2); font-weight: 760; }
.masuk-kaki { margin-top: var(--j-5); text-align: center; font-size: var(--t-kecil); color: var(--redup); }
@media (min-width: 900px) {
  .masuk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
  .masuk-sisi { display: flex; flex-direction: column; padding: var(--j-10) var(--j-12); }
  .masuk-sisi h1 { margin-top: auto; font-size: 40px; line-height: 1.12; }
  .masuk-sisi p { font-size: var(--t-besar); margin-bottom: auto; }
  .masuk-sisi::after { left: var(--j-12); bottom: var(--j-10); }
  .masuk-form-wadah { display: grid; place-items: center; margin: 0; padding: var(--j-10); }
  .masuk-form { width: 100%; padding: var(--j-8); }
}

/* ---------- 28. Bagian khusus ---------- */
.sapa { font-size: var(--t-judul-1); font-weight: 770; letter-spacing: -.028em; line-height: 1.2; }
@media (min-width: 760px) { .sapa { font-size: 30px; } }
.sapa-sub { margin-top: 4px; color: var(--redup); }
.sapa-sub b { color: var(--teks); }

.banner-notif { display: flex; align-items: center; gap: var(--j-3); padding: 12px 12px 12px 14px; border-radius: var(--sudut-b); background: var(--aksen-muda); border: 1px solid color-mix(in srgb, var(--aksen) 30%, transparent); }
.banner-notif .ikon-bulat { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--kartu); color: var(--aksen-teks); }
.banner-notif .teks { flex: 1; min-width: 0; font-size: var(--t-sedang); }
.banner-notif .teks b { display: block; }
.banner-notif .teks span { color: var(--redup); font-size: var(--t-kecil); }
.banner-notif.keluar { animation: banner-keluar var(--sedang) var(--keluar) forwards; }
@keyframes banner-keluar { to { opacity: 0; transform: scale(.97); } }

.profil-kandidat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--j-3) var(--j-4); align-items: center; }
.profil-kandidat h1 { font-size: var(--t-judul-1); font-weight: 770; letter-spacing: -.025em; }
.profil-kandidat .aksi-profil { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--j-2); }
@media (min-width: 760px) { .profil-kandidat { grid-template-columns: auto minmax(0, 1fr) auto; } .profil-kandidat .aksi-profil { grid-column: auto; } }

.bar-skor { display: grid; grid-template-columns: minmax(0, 1fr) 96px 18px; gap: 10px; align-items: center; font-size: var(--t-kecil); padding: 4px 0; }
.bar-skor .titik-skor { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.bar-skor .titik-skor i { height: 8px; border-radius: 3px; background: var(--abu-latar); }
.bar-skor .titik-skor i.isi { background: var(--merek); }
.bar-skor b { text-align: right; font-variant-numeric: tabular-nums; }

.nilai-bulat { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: conic-gradient(var(--merek) calc(var(--persen, 0) * 1%), var(--abu-latar) 0); position: relative; }
.nilai-bulat::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--kartu); }
.nilai-bulat span { position: relative; font-size: 28px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

.skala-ojt { display: grid; gap: 6px; }
.skala-ojt .pita { display: grid; grid-template-columns: 70fr 10fr 20fr; gap: 3px; }
.skala-ojt .pita span { height: 6px; border-radius: 3px; }
.skala-ojt .pita span:nth-child(1) { background: var(--merah-latar); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--merah) 30%, transparent); }
.skala-ojt .pita span:nth-child(2) { background: var(--kuning-latar); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kuning-garis) 50%, transparent); }
.skala-ojt .pita span:nth-child(3) { background: var(--hijau-latar); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hijau) 30%, transparent); }
.skala-ojt .label-skala { display: grid; grid-template-columns: 70fr 10fr 20fr; font-size: var(--t-mini); color: var(--redup); font-weight: 600; }
.skala-ojt .label-skala span:nth-child(2), .skala-ojt .label-skala span:nth-child(3) { padding-left: 2px; }

.blok-ganti { display: grid; gap: var(--j-4); padding: var(--j-4); border-radius: var(--sudut); background: var(--kartu-2); border: 1px solid var(--garis); }
@supports selector(:has(*)) {
  .blok-ganti { display: none; }
  .formulir:has(input[value="penggantian"]:checked) .blok-ganti { display: grid; animation: masuk var(--sedang) var(--lentur); }
  .blok-lainnya { display: none; }
  .formulir:has(input[value="lainnya"]:checked) .blok-lainnya { display: grid; animation: masuk var(--sedang) var(--lentur); }
  .blok-tidak-hadir { display: none; }
  .formulir:has(#hadir-tidak:checked) .blok-tidak-hadir { display: grid; animation: masuk var(--sedang) var(--lentur); }
  .formulir:has(#hadir-tidak:checked) .blok-skor { display: none; }
}
.daftar-nama { display: grid; gap: var(--j-2); }
.daftar-nama .baris-nama { display: flex; gap: var(--j-2); animation: masuk var(--sedang) var(--lentur); }
.daftar-nama .baris-nama .masukan { flex: 1; }

.nav-bagian { display: none; }
@media (min-width: 1000px) {
  .nav-bagian { display: grid; gap: 2px; }
  .nav-bagian a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--redup); text-decoration: none; font-weight: 640; transition: background var(--cepat), color var(--cepat); }
  .nav-bagian a:hover { background: var(--merek-muda); color: var(--merek); }
  .nav-bagian a[aria-current="true"] { background: var(--kartu); color: var(--teks); box-shadow: var(--bayang-2); }
  .nav-bagian a .bagian-nomor { width: 24px; height: 24px; font-size: 12px; }
  .nav-bagian a:not([aria-current="true"]) .bagian-nomor { background: var(--abu-latar); color: var(--redup); }
}

/* ---------- 29. Tambahan tata letak layar ---------- */
.mt-1 { margin-top: var(--j-1); } .mt-2 { margin-top: var(--j-2); } .mt-3 { margin-top: var(--j-3); } .mt-4 { margin-top: var(--j-4); } .mt-5 { margin-top: var(--j-5); } .mt-6 { margin-top: var(--j-6); }

.daftar-permintaan .baris { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.daftar-permintaan .kol-bawah { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--t-kecil); color: var(--redup); min-width: 0; }
.daftar-permintaan .panah { grid-column: 2; grid-row: 1 / 3; }
.daftar-permintaan .kol-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.daftar-permintaan .kol-tgl small { font-size: inherit; }
.daftar-permintaan .kol-tgl.lewat { color: var(--merah); font-weight: 650; }
.daftar-permintaan .terisi { display: inline-flex; align-items: center; gap: 6px; }
.daftar-permintaan .terisi progress { width: 56px; height: 6px; }
.kepala-daftar { display: none; }
@media (min-width: 1000px) {
  .daftar-permintaan .baris { grid-template-columns: minmax(0, 1fr) 260px 140px 20px; gap: 16px; }
  .daftar-permintaan .kol-bawah { display: contents; }
  .daftar-permintaan .panah { grid-column: auto; grid-row: auto; }
  .daftar-permintaan .kol-tgl { display: grid; font-size: var(--t-sedang); color: var(--teks); font-weight: 620; }
  .daftar-permintaan .kol-tgl small { font-size: var(--t-mini); color: var(--redup); font-weight: 600; }
  .kepala-daftar { display: grid; grid-template-columns: minmax(0, 1fr) 260px 140px 20px; gap: 16px; padding: 0 var(--j-4) 8px 18px; font-size: var(--t-kecil); font-weight: 700; color: var(--redup); }
}

.kolom-kepala .titik-tahap.tt-biru { background: var(--biru); }
.kolom-kepala .titik-tahap.tt-kuning { background: var(--kuning-garis); }
.kolom-kepala .titik-tahap.tt-hijau { background: var(--hijau); }
.kolom-kepala .titik-tahap.tt-merah { background: var(--merah); }
.kolom-kepala .titik-tahap.tt-merek { background: var(--merek); }

.angka-kartu.statis:hover { transform: none; box-shadow: var(--bayang-2); border-color: var(--garis); }
.angka-kartu.hijau .nilai { color: var(--hijau); }
.angka-kartu.biru .nilai { color: var(--biru); }
.angka-kartu.merah .nilai { color: var(--merah); }
.ringkas.tiga { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 760px) { .ringkas.tiga { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.peta { list-style: none; margin: 0; padding: 0 var(--j-4); }
@media (min-width: 760px) { .peta { padding: 0 var(--j-6); } }
.peta li { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--garis); }
.peta li:last-child { border-bottom: 0; }
.peta .nama-kolom { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: var(--t-sedang); }
.peta .contoh-isi { font-size: var(--t-kecil); color: var(--redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peta .masukan { min-height: 42px; padding-top: 8px; padding-bottom: 8px; }
@media (min-width: 760px) {
  .peta li { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 16px; }
  .peta .kepala-peta { padding: 10px 0; font-size: var(--t-kecil); font-weight: 700; color: var(--redup); }
}
.peta .kepala-peta { display: none; }
@media (min-width: 760px) { .peta .kepala-peta { display: grid; } }

.hasil-ojt { display: grid; gap: var(--j-3); padding: var(--j-4); border-radius: var(--sudut); background: var(--kartu-2); border: 1px solid var(--garis); }
.hasil-ojt .atas { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--j-3); flex-wrap: wrap; }
.hasil-ojt .angka-akhir { font-size: var(--t-raksasa); font-weight: 820; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.hasil-ojt .angka-akhir small { font-size: var(--t-dasar); font-weight: 650; color: var(--redup); letter-spacing: 0; }

.nilai-besar { display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.nilai-besar b { font-size: 56px; font-weight: 820; letter-spacing: -.04em; line-height: 1; }
.nilai-besar span { font-size: var(--t-besar); font-weight: 650; color: var(--redup); }

.sukses-ikon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px; background: var(--hijau-latar); color: var(--hijau); animation: letup 480ms var(--pegas) both; }
.sukses-ikon .i { width: 34px; height: 34px; stroke-width: 2.6; }
.kepala-sukses { display: grid; justify-items: center; text-align: center; gap: var(--j-2); padding: var(--j-6) 0 var(--j-5); }
.kepala-sukses h2 { font-size: var(--t-judul-2); font-weight: 760; }
.kepala-sukses p { color: var(--redup); }

fieldset.chip-grup { border: 0; margin: 0; padding: 0; min-width: 0; }
.isian > .tombol { justify-self: start; }
.kartu-kaki.kiri { justify-content: flex-start; }
.merek-teks b, .merek-teks small { white-space: nowrap; }
.judul-bagian .tautan { white-space: nowrap; }
.baris .meta > span { white-space: nowrap; }
[hidden] { display: none !important; }
.lembar-kepala[data-rapat], .lembar-tombol[data-rapat] { margin: 0 !important; }
.kartu-isi[data-rapat] { padding-top: 4px; }
.berkas-terpilih[data-polos] { border: 0; padding: 0; background: none; }
.lengket .bar-aksi { margin-top: 0; }
.lengket .bar-aksi > .tombol { flex: 1; min-width: 0; }
.tautan[data-demo="hover"] { color: var(--merek-tua); text-decoration-color: currentColor; }
.kolom-kepala .centang { min-height: 32px; padding: 5px 0; }