@charset "UTF-8";
/* ============================================================================
   DIPON CAT SYSTEM — VERSI 10.0
   Berkas : assets/css/dipon.css
   Peran  : Sistem desain bersama untuk seluruh halaman.

   ARAH DESAIN
   -----------
   Terang, biru profesional, lapang. Nada visualnya mengambil bahasa yang
   sudah dikenal peserta SKD: biru untuk sistem, hijau untuk lolos ambang
   batas, kuning untuk ragu-ragu, merah untuk belum lolos. Warna di sini
   membawa arti, bukan sekadar hiasan.

   ELEMEN TANDA TANGAN
   -------------------
   Bilah Ambang Batas (.ukur). Skor SKD tidak bermakna tanpa pembandingnya,
   maka setiap nilai selalu digambarkan bersama garis ambang yang harus
   dilewati.

   ZONA GERAK
   ----------
   Animasi dibuat semarak di halaman non-ujian. Pada halaman ujian, kelas
   .tenang pada <body> meredam seluruh gerak yang tidak perlu supaya peserta
   tetap fokus. Semua gerak otomatis mati bila sistem operasi pengguna
   meminta pengurangan animasi.

   URUTAN ISI
   ----------
    1. Token         9. Lencana        17. Bilah kemajuan
    2. Dasar        10. Tabel          18. Kerangka muat
    3. Tipografi    11. Pesan          19. Keadaan kosong
    4. Tata letak   12. Notifikasi     20. Penomoran
    5. Bilah atas   13. Dialog         21. Avatar
    6. Tombol       14. Bilah ambang   22. Utilitas
    7. Formulir     15. Kartu skor     23. Gerak
    8. Kartu        16. Ruang ujian    24. Cetak
============================================================================ */

/* ==========================================================================
   1. TOKEN
   ========================================================================== */
:root{
  /*  CATATAN TENTANG PENAMAAN TOKEN
      -------------------------------
      Nama token di bawah masih memakai kata biru dan langit karena rancangan
      awal bertema biru. Nilainya kini ungu magenta, tetapi namanya sengaja
      tidak diubah: token ini dirujuk 132 kali di dua belas berkas, dan
      mengganti namanya berarti menyunting seluruh berkas itu hanya demi
      penamaan. Risikonya tidak sebanding.

      Untuk kode baru, tersedia nama yang lebih tepat di bagian bawah blok ini.
      Keduanya menunjuk nilai yang sama. */

  /*  PEMISAHAN PERAN --tinta DAN --judul
      ------------------------------------
      Semula --tinta dipakai untuk dua hal sekaligus: sebagai warna tulisan
      pada judul dan angka besar, sekaligus sebagai warna latar pada penghitung
      waktu dan kop cetak.

      Pada tema terang keduanya kebetulan berjalan, sebab tulisan gelap memang
      pas di atas kertas putih. Pada tema gelap keduanya bertabrakan: tulisan
      gelap jatuh di atas latar yang juga gelap, sehingga nama aplikasi dan
      angka-angka besar lenyap sama sekali.

      Sekarang perannya dipisah. --tinta tetap menjadi latar paling gelap pada
      kedua tema, sedangkan --judul menjadi warna tulisan yang menyesuaikan
      diri: gelap di tema terang, terang di tema gelap. */

  /* --- Warna inti: Sovereign Sapphire & Regal Obsidian (Anti-Slop Modern Authority) --- */
  --tinta:#0b132b;          /* Latar paling gelap: penghitung waktu, kop cetak */
  --tinta-lembut:#1c2541;
  --judul:#0f172a;          /* Tulisan judul dan angka besar - Deep Slate Black */

  --biru:#2563eb;           /* Aksen utama: Royal Cobalt Blue */
  --biru-tua:#1d4ed8;       /* Keadaan aktif/hover */
  --biru-muda:#eff6ff;      /* Latar lembut opsi terpilih */
  --biru-garis:#bfdbfe;     /* Garis tepi aksen lembut */

  --langit:#0284c7;         /* Oceanic Cyan aksen sekunder */

  /* Aliases untuk kompatibilitas penuh */
  --ungu:#2563eb;
  --ungu-tua:#1d4ed8;
  --ungu-muda:#eff6ff;
  --ungu-garis:#bfdbfe;
  --magenta:#0284c7;
  --ungu-terang:#dbeafe;

  /* Warna bermakna: Standar Hasil Ujian SKD BKN */
  --lulus:#059669;      --lulus-muda:#ecfdf5;   --lulus-garis:#a7f3d0;
  --ragu:#d97706;       --ragu-muda:#fffbeb;    --ragu-garis:#fde68a;
  --gagal:#e11d48;      --gagal-muda:#fff1f2;   --gagal-garis:#fecdd3;

  --lulus-teks:#047857;
  --ragu-teks:#b45309;
  --gagal-teks:#be123c;
  --biru-teks:#1d4ed8;

  /* --- Permukaan (Pure Crisp Porcelain & Slate) --- */
  --kertas:#f8fafc;
  --permukaan:#ffffff;
  --permukaan-2:#f1f5f9;

  /* --- Teks (WCAG AAA High Contrast & Crisp Eye-Comfort) --- */
  --teks:#0f172a;
  --redup:#475569;
  --samar:#64748b;

  /* --- Garis Pembatas (Crisp 1px borders) --- */
  --garis:#e2e8f0;
  --garis-tegas:#cbd5e1;

  /* --- Huruf --- */
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --t-xs:.72rem;  --t-sm:.82rem;  --t-md:.92rem;  --t-lg:1.05rem;
  --t-xl:1.3rem;  --t-2xl:1.7rem; --t-3xl:2.2rem; --t-4xl:3rem;

  /* --- Sudut --- */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:24px; --r-bulat:999px;

  /* --- Bayangan Utilitarian Bersih (Tanpa Glow Berlebih) --- */
  --bayang-1:0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
  --bayang-2:0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.07);
  --bayang-3:0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --bayang-biru:0 10px 25px -5px rgba(37, 99, 235, 0.22);

  /* --- Gerak --- */
  --cepat:.15s;
  --sedang:.25s;
  --lambat:.45s;
  --pegas:cubic-bezier(.34,1.42,.64,1);
  --halus:cubic-bezier(.16,1,.3,1);

  /* --- Jarak --- */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px;
  --sp5:24px; --sp6:32px; --sp7:48px; --sp8:64px;

  --lebar-isi:1080px;
}


/* ==========================================================================
   2. DASAR
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--kertas);
  color:var(--teks);
  font-family:var(--font);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg{max-width:100%; height:auto; display:block}
button,input,select,textarea{font:inherit; color:inherit}

/* Cincin fokus yang selalu terlihat — syarat dasar aksesibilitas keyboard */
:focus-visible{
  outline:3px solid rgba(37,99,235,.25);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

::selection{background:var(--biru-muda); color:var(--biru-tua)}

/* Batang gulir yang serasi */
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-track{background:var(--permukaan-2)}
::-webkit-scrollbar-thumb{background:var(--garis-tegas); border-radius:var(--r-bulat); border:3px solid var(--permukaan-2)}
::-webkit-scrollbar-thumb:hover{background:var(--samar)}


/* ==========================================================================
   3. TIPOGRAFI
   ========================================================================== */
h1,h2,h3,h4,h5{margin:0 0 var(--sp3); font-weight:800; letter-spacing:-.02em; line-height:1.25}
h1{font-size:var(--t-2xl)}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-lg)}
h4{font-size:var(--t-md)}
p{margin:0 0 var(--sp4)}
p:last-child{margin-bottom:0}

a{color:var(--biru); text-decoration:none; transition:color var(--cepat)}
a:hover{color:var(--biru-tua)}

code,kbd,.mono{font-family:var(--mono); font-size:.86em}
code{background:var(--biru-muda); color:var(--biru-tua); padding:2px 7px; border-radius:var(--r-sm)}

/* Angka yang lebarnya seragam — penting agar timer tidak bergoyang */
.angka,.timer,.skor,td.angka{font-family:var(--mono); font-variant-numeric:tabular-nums}

/*  Label bagian memakai --redup, bukan --samar.

    Pada rancangan sebelumnya label ini memakai warna paling pudar, dan
    kontrasnya hanya 2,6 banding 1 terhadap latar putih. Padahal ukurannya
    kecil dan hurufnya rapat, sehingga justru butuh kontras lebih tinggi.
    Kekurangan itu sudah ada sejak versi biru dan baru ketahuan saat palet
    diperiksa ulang. */
.mata{
  font-size:var(--t-xs); font-weight:800; text-transform:uppercase;
  letter-spacing:.09em; color:var(--redup);
}
.redup{color:var(--redup)}
.samar{color:var(--samar)}
mark.sorot{background:#fde68a; color:#3d1235; padding:1px 3px; border-radius:3px}


/* ==========================================================================
   4. TATA LETAK
   ========================================================================== */
.bungkus{width:100%; max-width:var(--lebar-isi); margin:0 auto; padding:0 var(--sp5)}
.bungkus-sempit{max-width:720px}
.bungkus-lebar{max-width:1240px}

.halaman{padding:var(--sp6) 0 var(--sp8)}

.kepala-halaman{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp4); flex-wrap:wrap; margin-bottom:var(--sp5);
}
.kepala-halaman h1{margin-bottom:2px}
.kepala-halaman .sub{font-size:var(--t-sm); color:var(--redup)}

.baris{display:flex; gap:var(--sp3); flex-wrap:wrap}
.baris-rapat{gap:var(--sp2)}
.baris-tengah{align-items:center}
.baris-ujung{justify-content:space-between}

.petak{display:grid; gap:var(--sp4)}
.petak-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.petak-3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.petak-4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}


/* ==========================================================================
   5. BILAH ATAS
   ========================================================================== */
.bilah{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--garis);
  position:sticky; top:0; z-index:40;
}
.bilah-isi{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp4); min-height:66px;
}

.merek{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:var(--t-lg); color:var(--judul); letter-spacing:-.02em}
.merek:hover{color:var(--judul)}
.merek-ikon{
  width:34px; height:34px; border-radius:10px; flex:none;
  background:linear-gradient(135deg,var(--biru),var(--langit));
  display:grid; place-items:center; color:#fff; font-size:1rem;
  box-shadow:0 6px 16px rgba(123,45,142,.34);
}
.merek-logo-img{
  width:34px; height:34px; border-radius:8px; object-fit:contain; flex:none;
  box-shadow:0 4px 12px rgba(15,23,42,.15);
  transition:transform var(--cepat);
}
.merek:hover .merek-logo-img{transform:scale(1.06);}

.menu{display:flex; gap:var(--sp1); align-items:center}
.menu a{
  padding:8px 14px; border-radius:var(--r-sm); font-size:var(--t-sm);
  font-weight:700; color:var(--redup); transition:all var(--cepat);
}
.menu a:hover{background:var(--permukaan-2); color:var(--teks)}
.menu a.kini{background:var(--biru-muda); color:var(--biru-tua)}


/* ==========================================================================
   6. TOMBOL
   ========================================================================== */
.tbl{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border:1px solid transparent; border-radius:var(--r);
  font-size:var(--t-sm); font-weight:700; line-height:1.2;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background var(--cepat), border-color var(--cepat),
             color var(--cepat), box-shadow var(--sedang),
             transform var(--sedang) var(--pegas);
}
.tbl:active{transform:scale(.96)}
.tbl:disabled,.tbl.mati{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}

.tbl-utama{background:var(--biru); color:#fff}
.tbl-utama:hover{background:var(--biru-tua); color:#fff; transform:translateY(-2px); box-shadow:var(--bayang-biru)}

.tbl-lulus{background:var(--lulus); color:#fff}
.tbl-lulus:hover{background:#15803d; color:#fff; transform:translateY(-2px); box-shadow:0 12px 30px rgba(22,163,74,.26)}

.tbl-gagal{background:var(--gagal); color:#fff}
.tbl-gagal:hover{background:#b91c1c; color:#fff; transform:translateY(-2px); box-shadow:0 12px 30px rgba(220,38,38,.26)}

.tbl-tinta{background:var(--tinta); color:#fff}
.tbl-tinta:hover{background:var(--tinta-lembut); color:#fff; transform:translateY(-2px); box-shadow:var(--bayang-3)}

.tbl-garis{background:var(--permukaan); color:var(--teks); border-color:var(--garis)}
.tbl-garis:hover{border-color:var(--biru); color:var(--biru); transform:translateY(-2px); box-shadow:var(--bayang-2)}

.tbl-hantu{background:transparent; color:var(--redup)}
.tbl-hantu:hover{background:var(--permukaan-2); color:var(--teks)}

.tbl-kecil{padding:7px 13px; font-size:var(--t-xs); border-radius:var(--r-sm)}
.tbl-besar{padding:15px 30px; font-size:var(--t-md); border-radius:var(--r-lg)}
.tbl-lebar{width:100%}
.tbl-bulat{border-radius:var(--r-bulat)}

/* Tombol lingkaran untuk deretan aksi di tabel */
.tbl-ikon{
  width:34px; height:34px; padding:0; border-radius:10px;
  display:inline-grid; place-items:center; flex:none;
}

/* Riak sentuh — ditanam oleh dipon.js */
.riak{
  position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,.55); pointer-events:none;
  animation:riak .6s var(--halus);
}
.tbl-garis .riak,.tbl-hantu .riak{background:rgba(123,45,142,.24)}
@keyframes riak{to{transform:scale(2.6); opacity:0}}

/* Keadaan sibuk */
.tbl.sibuk{pointer-events:none; opacity:.75}
.tbl.sibuk::after{
  content:""; width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent;
  animation:putar .7s linear infinite;
}
@keyframes putar{to{transform:rotate(360deg)}}


/* ==========================================================================
   7. FORMULIR
   ========================================================================== */
.bidang{margin-bottom:var(--sp4)}
.bidang:last-child{margin-bottom:0}

.label{
  display:block; margin-bottom:6px;
  font-size:var(--t-xs); font-weight:800;
  text-transform:uppercase; letter-spacing:.07em; color:var(--redup);
}
.label .wajib{color:var(--gagal); margin-left:2px}

.isian{
  display:block; width:100%; padding:12px 15px;
  background:var(--permukaan); border:1.5px solid var(--garis);
  border-radius:var(--r); font-size:var(--t-md); color:var(--teks);
  transition:border-color var(--cepat), box-shadow var(--cepat), background var(--cepat);
}
.isian::placeholder{color:var(--samar)}
.isian:hover{border-color:var(--garis-tegas)}
.isian:focus{
  outline:none; border-color:var(--biru);
  box-shadow:0 0 0 4px rgba(123,45,142,.14);
}
.isian:disabled{background:var(--permukaan-2); color:var(--samar); cursor:not-allowed}
textarea.isian{resize:vertical; min-height:110px; line-height:1.7}
select.isian{
  appearance:none; padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6273' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}

.isian.salah{border-color:var(--gagal)}
.isian.salah:focus{box-shadow:0 0 0 4px rgba(220,38,38,.13)}
.pesan-bidang{margin-top:6px; font-size:var(--t-xs); color:var(--redup)}
.pesan-bidang.salah{color:var(--gagal); font-weight:600}

/* Kelompok masukan, misalnya sandi dengan tombol lihat */
.gabung{display:flex}
.gabung .isian{border-radius:var(--r) 0 0 var(--r); border-right:none}
.gabung .tbl{border-radius:0 var(--r) var(--r) 0; border:1.5px solid var(--garis); border-left:none}
.gabung .isian:focus + .tbl{border-color:var(--biru)}

/* Pengukur kekuatan sandi */
.ukur-sandi{display:flex; gap:4px; margin-top:8px}
.ukur-sandi i{
  flex:1; height:4px; border-radius:var(--r-bulat); background:var(--garis);
  transition:background var(--sedang);
}
.ukur-sandi[data-skor="1"] i:nth-child(-n+1){background:var(--gagal)}
.ukur-sandi[data-skor="2"] i:nth-child(-n+2){background:var(--ragu)}
.ukur-sandi[data-skor="3"] i:nth-child(-n+3){background:var(--langit)}
.ukur-sandi[data-skor="4"] i{background:var(--lulus)}

/* Kotak centang dan tombol pilih */
.centang{display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:var(--t-sm)}
.centang input{
  width:18px; height:18px; accent-color:var(--biru); cursor:pointer; flex:none;
}


/* ==========================================================================
   8. KARTU
   ========================================================================== */
.kartu{
  background:var(--permukaan);
  border:1px solid var(--garis);
  border-radius:var(--r-lg);
  box-shadow:var(--bayang-2);
  overflow:hidden;
}
.kartu-pad{padding:var(--sp5)}
.kartu + .kartu{margin-top:var(--sp4)}

.kartu-kepala{
  padding:var(--sp4) var(--sp5);
  border-bottom:1px solid var(--garis);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp3);
}
.kartu-kepala h2,.kartu-kepala h3{margin:0; font-size:var(--t-md)}
.kartu-isi{padding:var(--sp5)}
.kartu-kaki{
  padding:var(--sp4) var(--sp5);
  border-top:1px solid var(--garis);
  background:var(--permukaan-2);
}

/* Kartu yang mengangkat saat disentuh — dipakai untuk tautan menu */
.kartu-tautan{
  display:block; color:inherit;
  transition:transform var(--sedang) var(--halus), box-shadow var(--sedang), border-color var(--sedang);
}
.kartu-tautan:hover{
  transform:translateY(-5px); box-shadow:var(--bayang-3);
  border-color:var(--biru-garis); color:inherit;
}


/* ==========================================================================
   9. LENCANA
   ========================================================================== */
.tag{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px; border-radius:var(--r-bulat);
  font-size:var(--t-xs); font-weight:800; letter-spacing:.02em;
  white-space:nowrap; line-height:1.4;
}
.tag-biru{background:var(--biru-muda); color:var(--biru-tua)}
.tag-lulus{background:var(--lulus-muda); color:var(--lulus-teks)}
.tag-ragu{background:var(--ragu-muda); color:var(--ragu-teks)}
.tag-gagal{background:var(--gagal-muda); color:var(--gagal-teks)}
.tag-netral{background:var(--permukaan-2); color:var(--redup)}
.tag-tinta{background:var(--tinta); color:#fff}

/* Titik penanda keadaan */
.titik{width:7px; height:7px; border-radius:50%; flex:none; background:currentColor}
.titik-hidup{background:var(--lulus); box-shadow:0 0 0 3px var(--lulus-muda); animation:denyut 2.2s ease-in-out infinite}
@keyframes denyut{50%{box-shadow:0 0 0 6px rgba(22,163,74,.14)}}


/* ==========================================================================
   10. TABEL
   ========================================================================== */
.tabel-gulung{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tabel{width:100%; border-collapse:collapse; font-size:var(--t-sm)}
.tabel th{
  padding:12px 15px; text-align:left; background:var(--permukaan-2);
  font-size:var(--t-xs); font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--redup); white-space:nowrap;
  border-bottom:1px solid var(--garis);
}
.tabel td{padding:13px 15px; border-bottom:1px solid var(--permukaan-2); vertical-align:middle}
.tabel tbody tr:last-child td{border-bottom:0}
.tabel tbody tr{transition:background var(--cepat)}
.tabel tbody tr:hover td{background:#fdfaff}
.tabel .tengah{text-align:center}
.tabel .kanan{text-align:right}

/* Baris milik pengguna yang sedang melihat — dipakai di papan peringkat */
.tabel tr.saya td{background:var(--biru-muda)}
.tabel tr.saya td:first-child{box-shadow:inset 3px 0 0 var(--biru)}


/* ==========================================================================
   11. PESAN
   ========================================================================== */
.pesan{
  display:flex; gap:var(--sp3); align-items:flex-start;
  padding:15px 18px; border-radius:var(--r);
  font-size:var(--t-sm); line-height:1.65; margin-bottom:var(--sp4);
  border-left:4px solid;
}
.pesan b{display:block; margin-bottom:3px; font-size:var(--t-md)}
.pesan .ikon{font-size:1.15rem; line-height:1.4; flex:none}
.pesan-biru{background:var(--biru-muda); border-color:var(--biru); color:var(--biru-teks)}
.pesan-lulus{background:var(--lulus-muda); border-color:var(--lulus); color:var(--lulus-teks)}
.pesan-ragu{background:var(--ragu-muda); border-color:var(--ragu); color:var(--ragu-teks)}
.pesan-gagal{background:var(--gagal-muda); border-color:var(--gagal); color:var(--gagal-teks)}


/* ==========================================================================
   12. NOTIFIKASI MELAYANG
   ========================================================================== */
#rak-toast{
  position:fixed; top:20px; right:20px; z-index:9000;
  display:flex; flex-direction:column; gap:10px;
  max-width:calc(100vw - 40px); pointer-events:none;
}
.toast{
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:11px;
  min-width:280px; max-width:390px;
  padding:14px 17px; border-radius:var(--r);
  background:var(--permukaan); border-left:4px solid var(--biru);
  box-shadow:var(--bayang-3);
  font-size:var(--t-sm); font-weight:600; line-height:1.55;
  animation:toast-masuk .45s var(--pegas);
}
.toast .ikon{font-size:1.1rem; line-height:1.35; flex:none; color:var(--biru)}
.toast .tutup{
  margin-left:auto; background:none; border:0; cursor:pointer;
  color:var(--samar); font-size:1.1rem; line-height:1; padding:0 0 0 6px;
}
.toast .tutup:hover{color:var(--teks)}

.toast.sukses{border-left-color:var(--lulus)}       .toast.sukses .ikon{color:var(--lulus)}
.toast.error{border-left-color:var(--gagal)}         .toast.error .ikon{color:var(--gagal)}
.toast.peringatan{border-left-color:var(--ragu)}     .toast.peringatan .ikon{color:var(--ragu)}

.toast.pergi{animation:toast-keluar .3s var(--halus) forwards}

@keyframes toast-masuk{
  from{opacity:0; transform:translateX(50px) scale(.94)}
  to{opacity:1; transform:none}
}
@keyframes toast-keluar{
  to{opacity:0; transform:translateX(50px) scale(.94)}
}


/* ==========================================================================
   13. DIALOG
   ========================================================================== */
.tirai{
  position:fixed; inset:0; z-index:8000;
  background:rgba(45,10,46,.58); backdrop-filter:blur(4px);
  display:grid; place-items:center; padding:var(--sp4);
  animation:pudar-masuk var(--sedang) ease;
}
.tirai.pergi{animation:pudar-keluar var(--cepat) ease forwards}

.dialog{
  width:100%; max-width:430px;
  background:var(--permukaan); border-radius:var(--r-xl);
  box-shadow:var(--bayang-3); overflow:hidden;
  animation:dialog-masuk .4s var(--pegas);
}
.dialog-isi{padding:var(--sp6) var(--sp5) var(--sp5); text-align:center}
.dialog-ikon{
  width:60px; height:60px; border-radius:var(--r-lg); margin:0 auto var(--sp4);
  display:grid; place-items:center; font-size:1.7rem;
}
.dialog-ikon.tanya{background:var(--biru-muda); color:var(--biru)}
.dialog-ikon.bahaya{background:var(--gagal-muda); color:var(--gagal)}
.dialog-ikon.ingat{background:var(--ragu-muda); color:var(--ragu)}
.dialog h3{margin:0 0 var(--sp2); font-size:var(--t-lg)}
.dialog p{color:var(--redup); font-size:var(--t-sm); margin:0}
.dialog-aksi{display:flex; gap:10px; padding:0 var(--sp5) var(--sp5)}
.dialog-aksi .tbl{flex:1}

@keyframes pudar-masuk{from{opacity:0} to{opacity:1}}
@keyframes pudar-keluar{to{opacity:0}}
@keyframes dialog-masuk{
  from{opacity:0; transform:translateY(24px) scale(.94)}
  to{opacity:1; transform:none}
}


/* ==========================================================================
   14. BILAH AMBANG BATAS — ELEMEN TANDA TANGAN
   --------------------------------------------------------------------------
   Nilai SKD hanya bermakna bila dibandingkan ambang batasnya. Selisih dua
   poin bisa memisahkan lolos dan tidak. Karena itu setiap skor digambarkan
   sebagai bilah dengan garis ambang yang tegas, bukan sekadar angka.
   ========================================================================== */
.ukur{display:block}

.ukur-atas{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp3); margin-bottom:7px;
}
.ukur-nama{font-size:var(--t-xs); font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--redup)}
.ukur-nilai{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:var(--t-lg); font-weight:700; color:var(--teks); line-height:1;
}
.ukur-nilai small{font-size:var(--t-xs); color:var(--samar); font-weight:400}

.ukur-rel{
  position:relative; height:11px; border-radius:var(--r-bulat);
  background:var(--permukaan-2); overflow:visible;
}

.ukur-isi{
  position:absolute; inset:0 auto 0 0; width:0;
  border-radius:var(--r-bulat);
  background:linear-gradient(90deg,var(--gagal),#f87171);
  transition:width 1.1s var(--halus), background var(--lambat);
}
.ukur.lolos .ukur-isi{background:linear-gradient(90deg,var(--lulus),#4ade80)}
.ukur.kosong .ukur-isi{background:var(--garis-tegas)}

/* Garis ambang — penanda vertikal yang harus dilewati */
.ukur-batas{
  position:absolute; top:-5px; bottom:-5px; width:2px;
  background:var(--judul); border-radius:1px; z-index:2;
}
.ukur-batas::after{
  content:attr(data-nilai);
  position:absolute; top:-19px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:9px; font-weight:700;
  color:var(--judul); background:var(--permukaan);
  padding:0 3px; border-radius:3px; white-space:nowrap;
}

/* Kilau saat ambang terlampaui */
.ukur.lolos .ukur-rel::after{
  content:""; position:absolute; inset:0; border-radius:var(--r-bulat);
  box-shadow:0 0 0 3px var(--lulus-muda);
  animation:ukur-kilau .8s ease .9s;
}
@keyframes ukur-kilau{
  0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}
  100%{box-shadow:0 0 0 9px rgba(22,163,74,0)}
}

.ukur-kaki{
  display:flex; justify-content:space-between;
  margin-top:6px; font-size:var(--t-xs); color:var(--samar);
}


/* ==========================================================================
   15. KARTU SKOR
   ========================================================================== */
.skor-kartu{
  background:var(--permukaan); border:1px solid var(--garis);
  border-radius:var(--r-lg); padding:var(--sp5) var(--sp4);
  box-shadow:var(--bayang-2); position:relative; overflow:hidden;
}
/* Pita warna tipis penanda materi */
.skor-kartu::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--biru);
}
.skor-kartu.twk::before{background:linear-gradient(90deg,var(--biru),#c084fc)}
.skor-kartu.tiu::before{background:linear-gradient(90deg,var(--lulus),#4ade80)}
.skor-kartu.tkp::before{background:linear-gradient(90deg,var(--ragu),#fbbf24)}
.skor-kartu.total::before{background:linear-gradient(90deg,var(--tinta),var(--langit))}

.skor-nama{font-size:var(--t-xs); font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--redup); margin-bottom:var(--sp2)}
.skor-angka{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:var(--t-3xl); font-weight:800; letter-spacing:-.04em;
  line-height:1; color:var(--judul); margin-bottom:var(--sp3);
}
.skor-kartu .ukur{margin-top:var(--sp5)}


/* ==========================================================================
   16. RUANG UJIAN
   --------------------------------------------------------------------------
   Bagian ini sengaja lebih tenang. Peserta mengerjakan sampai 110 soal dalam
   100 menit, jadi antarmuka harus menyingkir dan membiarkan soal jadi pusat
   perhatian.
   ========================================================================== */

/* --- Penanda waktu --- */
.jam{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 17px; border-radius:var(--r);
  background:var(--tinta); color:#fff;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:var(--t-xl); font-weight:700; letter-spacing:.02em;
  transition:background var(--sedang);
}
.jam .ikon{font-size:.85em; opacity:.7}
.jam.menipis{background:var(--ragu)}
.jam.kritis{background:var(--gagal); animation:jam-degup 1s ease-in-out infinite}
@keyframes jam-degup{50%{opacity:.72}}

/* --- Bilah kemajuan pengerjaan --- */
.jalur{height:5px; background:var(--permukaan-2); border-radius:var(--r-bulat); overflow:hidden}
.jalur i{
  display:block; height:100%; width:0; border-radius:var(--r-bulat);
  background:linear-gradient(90deg,var(--biru),var(--langit));
  transition:width var(--lambat) var(--halus);
}

/* --- Tata letak ruang ujian ---
   Dijadikan kelas tersendiri, bukan gaya sisipan di tiap halaman, supaya
   perilaku responsifnya terjamin. Pada layar sempit navigasi soal berpindah
   ke bawah kartu soal, bukan berdesakan di sampingnya. */
.tata-ujian{
  display:grid; gap:var(--sp4);
  grid-template-columns:1fr 290px; align-items:start;
}
.tata-ujian > .sisi{position:sticky; top:86px}

/* --- Kartu soal --- */
.soal-kartu{
  background:var(--permukaan); border:1px solid var(--garis);
  border-radius:var(--r-lg); box-shadow:var(--bayang-2);
}
.soal-kepala{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp3); flex-wrap:wrap; padding:var(--sp4) var(--sp5);
  border-bottom:1px solid var(--garis);
}
.soal-badan{padding:var(--sp5)}
.soal-teks{font-size:var(--t-lg); line-height:1.75; color:var(--judul); margin-bottom:var(--sp5)}
.soal-teks img{margin:var(--sp4) auto; border-radius:var(--r); box-shadow:var(--bayang-1)}

/* --- Pilihan jawaban --- */
.opsi{display:grid; gap:10px}
.opsi input{position:absolute; opacity:0; width:0; height:0}

.opsi label{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 20px; border:1.5px solid var(--garis); border-radius:var(--r);
  cursor:pointer; background:var(--permukaan);
  transition:border-color var(--cepat), background var(--cepat), transform var(--cepat), box-shadow var(--cepat);
  user-select:none;
}
.opsi label:hover{
  border-color:var(--biru-garis);
  background:var(--permukaan-2);
  box-shadow:var(--bayang-1);
}
.opsi label:active{transform:scale(.99)}

.opsi-huruf{
  flex:none; width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--permukaan-2); color:var(--redup);
  border:1px solid var(--garis);
  font-size:var(--t-md); font-weight:800; font-family:var(--mono);
  transition:all var(--cepat);
}
.opsi-teks{flex:1; padding-top:4px; line-height:1.7; font-size:1.02rem}

.opsi input:checked + label{
  border-color:var(--biru);
  background:var(--biru-muda);
  box-shadow:0 0 0 1px var(--biru), var(--bayang-2);
}
.opsi input:checked + label .opsi-huruf{
  background:var(--biru);
  border-color:var(--biru);
  color:#fff;
  box-shadow:0 2px 8px rgba(37,99,235,0.35);
}

.opsi input:checked + label{border-color:var(--biru); background:var(--biru-muda)}
.opsi input:checked + label .opsi-huruf{background:var(--biru); color:#fff}
.opsi input:focus-visible + label{outline:3px solid rgba(37,99,235,.25); outline-offset:2px}

/* Keadaan khusus halaman pembahasan */
.opsi label.benar{border-color:var(--lulus); background:var(--lulus-muda)}
.opsi label.benar .opsi-huruf{background:var(--lulus); color:#fff}
.opsi label.salah{border-color:var(--gagal); background:var(--gagal-muda)}
.opsi label.salah .opsi-huruf{background:var(--gagal); color:#fff}

.opsi-cap{
  position:absolute; top:-9px; right:12px;
  padding:2px 9px; border-radius:var(--r-bulat);
  font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
}
.opsi label{position:relative}
.opsi-cap.kunci{background:var(--lulus); color:#fff}
.opsi-cap.pilihan{background:var(--gagal); color:#fff}
.opsi-cap.bobot{background:var(--ragu); color:#fff}

/* --- Petak navigasi soal --- */
.peta{
  display:grid; grid-template-columns:repeat(5,1fr); gap:7px;
  max-height:340px; overflow-y:auto; padding:2px;
}
.peta-butir{
  aspect-ratio:1; display:grid; place-items:center;
  border:1.5px solid var(--garis); border-radius:9px;
  background:var(--permukaan); color:var(--redup);
  font-family:var(--mono); font-size:var(--t-xs); font-weight:700;
  cursor:pointer;
  transition:transform var(--cepat) var(--pegas), border-color var(--cepat),
             background var(--cepat), color var(--cepat);
}
.peta-butir:hover{border-color:var(--biru-garis); transform:scale(1.06)}
.peta-butir.terisi{background:var(--lulus); border-color:var(--lulus); color:#fff}
.peta-butir.ragu{background:var(--ragu); border-color:var(--ragu); color:#fff}
.peta-butir.kini{
  border-color:var(--judul); border-width:2.5px;
  transform:scale(1.1); box-shadow:var(--bayang-2); z-index:1;
}
.peta-butir.benar{background:var(--lulus); border-color:var(--lulus); color:#fff}
.peta-butir.keliru{background:var(--gagal); border-color:var(--gagal); color:#fff}
.peta-butir.lewat{background:var(--permukaan-2); color:var(--samar)}

.peta-kunci{
  display:flex; flex-wrap:wrap; gap:var(--sp3);
  margin-top:var(--sp4); padding-top:var(--sp3); border-top:1px solid var(--garis);
  font-size:var(--t-xs); color:var(--redup);
}
.peta-kunci span{display:inline-flex; align-items:center; gap:6px}
.peta-kunci i{width:11px; height:11px; border-radius:4px; flex:none}
.kunci-terisi{background:var(--lulus)}
.kunci-ragu{background:var(--ragu)}
.kunci-kosong{background:var(--permukaan-2); border:1.5px solid var(--garis)}

/* --- Penanda simpan otomatis --- */
.simpan-tanda{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--t-xs); font-weight:700; color:var(--samar);
  transition:color var(--cepat);
}
.simpan-tanda.jalan{color:var(--biru)}
.simpan-tanda.beres{color:var(--lulus)}
.simpan-tanda.gagal{color:var(--gagal)}


/* ==========================================================================
   17. BILAH KEMAJUAN CINCIN
   ========================================================================== */
.cincin{position:relative; display:inline-grid; place-items:center}
.cincin svg{transform:rotate(-90deg)}
.cincin circle{fill:none; stroke-width:9; stroke-linecap:round}
.cincin .alur{stroke:var(--permukaan-2)}
.cincin .isi{
  stroke:var(--biru);
  stroke-dasharray:var(--keliling);
  stroke-dashoffset:var(--keliling);
  transition:stroke-dashoffset 1.2s var(--halus);
}
.cincin.lolos .isi{stroke:var(--lulus)}
.cincin.gagal .isi{stroke:var(--gagal)}
.cincin-teks{
  position:absolute; text-align:center;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-weight:800; font-size:var(--t-xl); color:var(--judul); line-height:1;
}
.cincin-teks small{display:block; font-family:var(--font); font-size:var(--t-xs); font-weight:700; color:var(--samar); margin-top:3px}


/* ==========================================================================
   18. KERANGKA MUAT
   ========================================================================== */
.kerangka{
  background:linear-gradient(90deg,var(--permukaan-2) 25%,#ece5f0 37%,var(--permukaan-2) 63%);
  background-size:400% 100%;
  border-radius:var(--r-sm);
  animation:kilau 1.4s ease infinite;
}
.kerangka-baris{height:13px; margin-bottom:9px}
.kerangka-baris:last-child{width:65%}
@keyframes kilau{0%{background-position:100% 50%} 100%{background-position:0 50%}}


/* ==========================================================================
   19. KEADAAN KOSONG
   ========================================================================== */
.kosong{text-align:center; padding:var(--sp8) var(--sp5)}
.kosong-ikon{
  width:72px; height:72px; margin:0 auto var(--sp4);
  border-radius:var(--r-xl); background:var(--permukaan-2);
  display:grid; place-items:center; font-size:2rem; color:var(--samar);
}
.kosong h3{margin-bottom:var(--sp2)}
.kosong p{color:var(--redup); font-size:var(--t-sm); max-width:400px; margin:0 auto var(--sp5)}


/* ==========================================================================
   20. PENOMORAN HALAMAN
   ========================================================================== */
.nomor{display:flex; gap:5px; justify-content:center; flex-wrap:wrap; margin-top:var(--sp5)}
.nomor a,.nomor span{
  min-width:38px; height:38px; padding:0 11px;
  display:inline-grid; place-items:center;
  border:1px solid var(--garis); border-radius:var(--r-sm);
  background:var(--permukaan); color:var(--redup);
  font-size:var(--t-sm); font-weight:700;
  transition:all var(--cepat);
}
.nomor a:hover{border-color:var(--biru); color:var(--biru); transform:translateY(-2px)}
.nomor .kini{background:var(--biru); border-color:var(--biru); color:#fff}
.nomor .putus{border:0; background:none; color:var(--samar)}


/* ==========================================================================
   21. AVATAR
   ========================================================================== */
.avatar{
  width:40px; height:40px; border-radius:var(--r); flex:none;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--biru),var(--langit));
  color:#fff; font-size:var(--t-sm); font-weight:800; letter-spacing:.02em;
}
.avatar-kecil{width:30px; height:30px; font-size:var(--t-xs); border-radius:9px}
.avatar-besar{width:58px; height:58px; font-size:var(--t-lg); border-radius:var(--r-lg)}
.avatar-emas{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
.avatar-perak{background:linear-gradient(135deg,#64748b,#94a3b8)}
.avatar-perunggu{background:linear-gradient(135deg,#b45309,#d97706)}


/* ==========================================================================
   22. UTILITAS
   ========================================================================== */
.tengah{text-align:center}      .kanan{text-align:right}
.tebal{font-weight:700}          .tebal-x{font-weight:800}
.kecil{font-size:var(--t-sm)}    .mini{font-size:var(--t-xs)}
.sembunyi{display:none !important}
.penuh{width:100%}
.tumbuh{flex:1}
.tanpa-pilih{user-select:none}

.mt1{margin-top:var(--sp1)}  .mt2{margin-top:var(--sp2)}  .mt3{margin-top:var(--sp3)}
.mt4{margin-top:var(--sp4)}  .mt5{margin-top:var(--sp5)}  .mt6{margin-top:var(--sp6)}
.mb0{margin-bottom:0}        .mb2{margin-bottom:var(--sp2)} .mb3{margin-bottom:var(--sp3)}
.mb4{margin-bottom:var(--sp4)} .mb5{margin-bottom:var(--sp5)}

.pisah{height:1px; background:var(--garis); border:0; margin:var(--sp5) 0}
.pisah-teks{
  display:flex; align-items:center; gap:var(--sp3);
  margin:var(--sp5) 0; color:var(--samar);
  font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
}
.pisah-teks::before,.pisah-teks::after{content:""; flex:1; height:1px; background:var(--garis)}

/* Hanya terbaca pembaca layar */
.baca-saja{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* ==========================================================================
   23. GERAK
   --------------------------------------------------------------------------
   Kelas .muncul disiapkan oleh dipon.js dan dinyalakan saat elemen masuk
   layar. Jeda bertingkat memberi kesan kartu-kartu berdatangan.
   ========================================================================== */
/*  PENTING — MENGAPA ANIMASI INI DISALAKAN LEWAT JAVASCRIPT
    ---------------------------------------------------------
    Rancangan awal memberi .muncul nilai opacity nol, lalu JavaScript
    menambahkan .tampil untuk memunculkannya. Cara itu keliru: bila berkas
    dipon.js gagal dimuat, misalnya karena salah letak folder atau jaringan
    terputus, seluruh isi halaman ikut menghilang permanen. Pengunjung hanya
    melihat halaman kosong tanpa tahu apa yang salah.

    Sekarang keadaan bawaannya adalah TERLIHAT. Animasi hanya berjalan bila
    JavaScript sempat memasang penanda .siap-gerak pada elemen html. Tanpa
    JavaScript, isi halaman tetap tampil utuh, hanya saja tanpa gerakan.
    Isi selalu lebih penting daripada animasi. */
.muncul{opacity:1; transform:none}

html.siap-gerak .muncul{opacity:0; transform:translateY(22px)}
html.siap-gerak .muncul.tampil{
  opacity:1; transform:none;
  transition:opacity var(--lambat) var(--halus), transform var(--lambat) var(--halus);
}
.tunda-1{transition-delay:.06s} .tunda-2{transition-delay:.12s}
.tunda-3{transition-delay:.18s} .tunda-4{transition-delay:.24s}
.tunda-5{transition-delay:.3s}  .tunda-6{transition-delay:.36s}

/* Pergantian soal — geser halus, tanpa kejutan */
.geser-masuk{animation:geser-masuk .34s var(--halus)}
@keyframes geser-masuk{
  from{opacity:0; transform:translateX(18px)}
  to{opacity:1; transform:none}
}
.geser-mundur{animation:geser-mundur .34s var(--halus)}
@keyframes geser-mundur{
  from{opacity:0; transform:translateX(-18px)}
  to{opacity:1; transform:none}
}

/* Kanvas perayaan */
#kanvas-rayakan{position:fixed; inset:0; pointer-events:none; z-index:9500}

/*  ZONA TENANG
    Dipasang pada <body> halaman ujian. Gerak dekoratif dipadamkan, tetapi
    umpan balik yang berguna seperti pergantian soal tetap hidup. */
body.tenang .kartu-tautan:hover,
body.tenang .tbl:hover{transform:none}
body.tenang .muncul{opacity:1; transform:none}
body.tenang .peta-butir:hover{transform:none}
body.tenang .titik-hidup{animation:none}
body.tenang .ukur.lolos .ukur-rel::after{animation:none}


/*  Jaring pengaman terakhir bagi pengunjung yang mematikan JavaScript. */
.tanpa-js .muncul{opacity:1 !important; transform:none !important}

/* ==========================================================================
   24. TANGGAP LAYAR
   ========================================================================== */
@media (max-width:860px){
  :root{--t-3xl:1.9rem; --t-4xl:2.4rem}
  .bungkus{padding:0 var(--sp4)}
  .halaman{padding:var(--sp5) 0 var(--sp7)}
  .kepala-halaman{flex-direction:column; align-items:stretch}
  .tata-ujian{grid-template-columns:1fr}
  .tata-ujian > .sisi{position:static}
  .peta{grid-template-columns:repeat(8,1fr); max-height:190px}
  .kartu-pad,.kartu-isi{padding:var(--sp4)}
  .soal-badan{padding:var(--sp4)}
  .soal-teks{font-size:var(--t-md)}
}

@media (max-width:560px){
  body{font-size:14.5px}
  .bilah-isi{min-height:58px}
  .menu a{padding:7px 10px; font-size:var(--t-xs)}
  .petak-4{grid-template-columns:repeat(2,1fr)}
  .peta{grid-template-columns:repeat(6,1fr)}
  .jam{font-size:var(--t-lg); padding:7px 13px}
  .dialog-aksi{flex-direction:column-reverse}
  #rak-toast{left:12px; right:12px; top:12px}
  .toast{min-width:0; max-width:none}
  .tbl{padding:11px 16px}
}


/* ==========================================================================
   25. PENGURANGAN GERAK
   Menghormati pengaturan sistem pengguna. Semua animasi dipadamkan, tetapi
   tampilan akhir tetap benar karena kelas .tampil tetap dipasang.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .muncul{opacity:1; transform:none}
}


/* ==========================================================================
   26. CETAK
   ========================================================================== */
@media print{
  @page{size:A4; margin:14mm}
  body{background:#fff; font-size:11pt; color:#000}

  .bilah,.menu,.tbl,#rak-toast,.tirai,#kanvas-rayakan,.tanpa-cetak{display:none !important}

  .kartu{box-shadow:none; border:1px solid #cbd5e1; break-inside:avoid}
  .bungkus{max-width:none; padding:0}

  /* Warna latar wajib ikut tercetak agar status lulus tetap terbaca */
  .tag,.ukur-isi,.pesan,.skor-kartu::before{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }

  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#64748b}
}


/* ==========================================================================
   27. HALAMAN AUTENTIKASI
   --------------------------------------------------------------------------
   Kartu berwibawa di tengah layar dengan latar arsitektural halus. Dipakai oleh
   login, registrasi, lupa sandi, dan atur ulang sandi.
   ========================================================================== */
.auth{
  min-height:100vh; display:grid; place-items:center;
  padding:var(--sp5) var(--sp4); position:relative; overflow:hidden;
  background-color:var(--kertas);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.05) 0%, transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(2, 132, 199, 0.04) 0%, transparent 50%);
}

.auth::before,.auth::after{display:none}

.auth-kotak{position:relative; z-index:1; width:100%; max-width:442px}

.auth-kartu{
  background:var(--permukaan);
  border:1px solid var(--garis);
  border-radius:var(--r-xl);
  box-shadow:var(--bayang-3);
  padding:var(--sp6) var(--sp5) var(--sp5);
  animation:auth-masuk .35s var(--halus);
}
@keyframes auth-masuk{
  from{opacity:0; transform:translateY(16px)}
  to{opacity:1; transform:none}
}

.auth-merek{text-align:center; margin-bottom:var(--sp6)}
.auth-lambang{
  width:56px; height:56px; margin:0 auto var(--sp4);
  border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--biru),var(--biru-tua));
  display:grid; place-items:center; color:#fff; font-size:1.55rem;
  box-shadow:0 8px 20px -3px rgba(37,99,235,.38);
}
.auth-logo-link{
  display:inline-block; margin:0 auto var(--sp3); text-decoration:none;
  transition:transform var(--cepat);
}
.auth-logo-link:hover{transform:scale(1.06);}
.auth-logo-img{
  width:64px; height:64px; border-radius:14px; object-fit:contain;
  box-shadow:0 8px 22px rgba(15,23,42,.12); display:block; margin:0 auto;
}
.auth-nama{
  font-size:var(--t-xl); font-weight:800; letter-spacing:-.03em;
  color:var(--judul); margin-bottom:4px;
}
.auth-sub{font-size:var(--t-sm); color:var(--redup)}

.auth-kaki{
  text-align:center; margin-top:var(--sp5);
  padding-top:var(--sp4); border-top:1px solid var(--garis);
  font-size:var(--t-sm); color:var(--redup);
}
.auth-kaki a{font-weight:700; color:var(--biru)}
.auth-kaki a:hover{color:var(--biru-tua); text-decoration:underline}

.auth-cap{
  text-align:center; margin-top:var(--sp4);
  font-size:var(--t-xs); color:var(--samar);
}

@media (max-width:560px){
  .auth-kartu{padding:var(--sp5) var(--sp4)}
}

/* ==========================================================================
   28. MODE GELAP (Sovereign Sapphire & Titanium Slate)
   --------------------------------------------------------------------------
   Dirancang khusus agar mata peserta tetap nyaman membaca soal berjam-jam.
   Menggunakan latar Titanium Obsidian tanpa pendaran berlebih, kontras tinggi
   memenuhi standar WCAG AAA.
   ========================================================================== */

html[data-tema="gelap"]{
  color-scheme:dark;

  /* --- Permukaan: Deep Space Obsidian & Titanium Slate --- */
  --kertas:#080d1a;
  --permukaan:#0f172a;
  --permukaan-2:#1e293b;

  /* --- Teks (Luminescent Soft White, Anti-Eye Strain) --- */
  --teks:#f8fafc;
  --redup:#94a3b8;
  --samar:#64748b;

  /* --- Garis Pembatas Halus --- */
  --garis:rgba(255, 255, 255, 0.08);
  --garis-tegas:rgba(255, 255, 255, 0.16);

  /* --- Kop & Timer --- */
  --tinta:#030712;
  --tinta-lembut:#0f172a;
  --judul:#f8fafc;

  /* --- Aksen: Sovereign Cobalt Blue --- */
  --biru:#3b82f6;
  --biru-tua:#60a5fa;
  --biru-muda:rgba(59, 130, 246, 0.14);
  --biru-garis:rgba(59, 130, 246, 0.32);
  --langit:#38bdf8;

  --ungu:#3b82f6;
  --ungu-tua:#60a5fa;
  --ungu-muda:rgba(59, 130, 246, 0.14);
  --ungu-garis:rgba(59, 130, 246, 0.32);
  --magenta:#38bdf8;
  --ungu-terang:#93c5fd;
  --ungu-isi:#3b82f6;
  --ungu-isi-tua:#2563eb;

  /* --- Warna bermakna: Standar Ujian SKD BKN --- */
  --lulus:#10b981;   --lulus-muda:rgba(16, 185, 129, 0.14);  --lulus-garis:rgba(16, 185, 129, 0.35);
  --ragu:#f59e0b;    --ragu-muda:rgba(245, 158, 11, 0.14);   --ragu-garis:rgba(245, 158, 11, 0.35);
  --gagal:#f43f5e;   --gagal-muda:rgba(244, 63, 94, 0.14);   --gagal-garis:rgba(244, 63, 94, 0.35);

  --lulus-teks:#34d399;
  --ragu-teks:#fbbf24;
  --gagal-teks:#fb7185;
  --biru-teks:#60a5fa;

  /* --- Bayangan Utilitarian di latar gelap --- */
  --bayang-1:0 1px 3px rgba(0,0,0,.4);
  --bayang-2:0 4px 12px rgba(0,0,0,.45);
  --bayang-3:0 20px 32px rgba(0,0,0,.65);
  --bayang-biru:0 10px 25px -5px rgba(59, 130, 246, 0.3);
}

/* Penyesuaian Komponen Mode Gelap */
html[data-tema="gelap"] .bilah{
  background:rgba(15, 23, 42, 0.92);
  border-bottom-color:var(--garis);
}

html[data-tema="gelap"] .tbl-utama{
  background:var(--biru); color:#fff;
}
html[data-tema="gelap"] .tbl-utama:hover{
  background:var(--biru-tua); color:#fff;
}

html[data-tema="gelap"] .tbl-tinta{
  background:var(--permukaan-2); color:var(--teks); border-color:var(--garis-tegas);
}
html[data-tema="gelap"] .tbl-tinta:hover{
  background:#334155; color:#fff;
}

html[data-tema="gelap"] .auth{
  background-color:var(--kertas);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.10) 0%, transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.05) 0%, transparent 40%);
}

html[data-tema="gelap"] .soal-teks img,
html[data-tema="gelap"] .opsi-teks img{
  filter:brightness(.92);
}

html[data-tema="gelap"] .tabel tbody tr:hover td{ background:rgba(255,255,255,0.03); }
html[data-tema="gelap"] .tabel tr.saya td{ background:rgba(59, 130, 246, 0.12); }
html[data-tema="gelap"] .opsi label:hover{ background:var(--permukaan-2); }

html[data-tema="gelap"] .kerangka{
  background:linear-gradient(90deg,var(--permukaan-2) 25%,#334155 37%,var(--permukaan-2) 63%);
}

html[data-tema="gelap"] .tirai{ background:rgba(3, 7, 18, 0.78); }
html[data-tema="gelap"] mark.sorot{ background:#7c5a10; color:#fde68a; }

html[data-tema="gelap"] ::-webkit-scrollbar-track{ background:var(--kertas); }
html[data-tema="gelap"] ::-webkit-scrollbar-thumb{
  background:var(--garis-tegas); border-color:var(--kertas);
}

html[data-tema="gelap"] code{ background:#1e293b; color:#93c5fd; }

html[data-tema="gelap"] .tbl-lulus,
html[data-tema="gelap"] .tbl-lulus:hover,
html[data-tema="gelap"] .peta-butir.terisi,
html[data-tema="gelap"] .peta-butir.benar,
html[data-tema="gelap"] .opsi label.benar .opsi-huruf,
html[data-tema="gelap"] .opsi-cap.kunci{
  color:#fff;
}

html[data-tema="gelap"] .tbl-gagal,
html[data-tema="gelap"] .tbl-gagal:hover,
html[data-tema="gelap"] .peta-butir.keliru,
html[data-tema="gelap"] .opsi label.salah .opsi-huruf,
html[data-tema="gelap"] .opsi-cap.pilihan,
html[data-tema="gelap"] .jam.kritis{
  color:#fff;
}

html[data-tema="gelap"] .peta-butir.ragu,
html[data-tema="gelap"] .opsi-cap.bobot,
html[data-tema="gelap"] .jam.menipis{
  color:#fff;
}

html[data-tema="gelap"] .opsi input:checked + label .opsi-huruf,
html[data-tema="gelap"] .avatar,
html[data-tema="gelap"] .merek-ikon,
html[data-tema="gelap"] .nomor .kini,
html[data-tema="gelap"] .auth-lambang,
html[data-tema="gelap"] .dialog-ikon.tanya{
  color:#fff;
}

html[data-tema="gelap"] .titik-hidup{ box-shadow:0 0 0 3px rgba(16, 185, 129, 0.2); }

.tbl-tema{
  width:36px; height:36px; padding:0; border-radius:10px; flex:none;
  display:inline-grid; place-items:center; cursor:pointer;
  background:var(--permukaan); color:var(--redup);
  border:1px solid var(--garis);
  transition:color var(--cepat), border-color var(--cepat), background var(--cepat);
}
.tbl-tema:hover{ color:var(--biru); border-color:var(--biru); background:var(--biru-muda); }

@media print{
  html[data-tema="gelap"]{
    color-scheme:light;
    --kertas:#ffffff;      --permukaan:#ffffff;   --permukaan-2:#f8fafc;
    --teks:#0f172a;        --redup:#475569;       --samar:#64748b;
    --garis:#e2e8f0;       --garis-tegas:#cbd5e1;
    --tinta:#0b132b;       --tinta-lembut:#1e293b;
    --biru:#2563eb;        --biru-tua:#1d4ed8;
    --biru-muda:#eff6ff;   --biru-garis:#bfdbfe;
    --lulus:#059669;       --lulus-muda:#ecfdf5;
    --ragu:#d97706;        --ragu-muda:#fffbeb;
    --gagal:#e11d48;       --gagal-muda:#fff1f2;
  }
  html[data-tema="gelap"] .bilah{ background:#fff; }
  html[data-tema="gelap"] .soal-teks img,
  html[data-tema="gelap"] .opsi-teks img{ filter:none; }
}

/* Peta Navigasi Soal - Active Pulse & Micro Polish */
.peta button.aktif, .peta-butir.kini{
  border-color:var(--biru);
  box-shadow:0 0 0 2px var(--permukaan), 0 0 0 4px var(--biru);
  transform:scale(1.08);
  z-index:2;
}
.peta button.terjawab, .peta-butir.terisi{
  background:var(--lulus);
  border-color:var(--lulus);
  color:#fff;
}
.peta button.ragu, .peta-butir.ragu{
  background:var(--ragu);
  border-color:var(--ragu);
  color:#fff;
}