/* =========================================================
   Sistem Pemilihan - bahasa visual "kertas suara".
   Tailwind (CDN) mengurus tata letak di index.html.
   Berkas ini memegang yang tidak bisa diurus utilitas:
   token warna, kelas keadaan yang ditoggle index.js, dan gerak.
   ========================================================= */

:root {
  color-scheme: light;

  /* Palet: Royal Blue #2563EB + Putih + Abu muda #E5E7EB, aksen Cyan #38BDF8 */
  --dasar: #eef1f6;
  --kertas: #ffffff;
  --kertas-2: #f5f7fa;

  --tinta: #2563eb;          /* royal blue: warna merek sekaligus penanda "sudah dicap" */
  --tinta-kuat: #1d4ed8;
  --tinta-lembut: #dbeafe;
  --di-tinta: #ffffff;

  --emas: #0284c7;           /* cyan tua: dipakai untuk teks pemenang supaya tetap terbaca */
  --emas-terang: #38bdf8;    /* cyan: garis tebal & batang pemenang */
  --merah: #dc2626;

  --teks: #111827;
  --redup: #6b7280;
  --garis: #e5e7eb;          /* abu muda */
  --garis-kuat: #cbd5e1;

  --r-kartu: 14px;
  --r-kontrol: 10px;
  --r-pil: 999px;

  --bayang: 0 1px 2px rgba(17, 24, 39, .05), 0 12px 28px -20px rgba(17, 24, 39, .45);
  --bayang-angkat: 0 2px 4px rgba(17, 24, 39, .07), 0 22px 44px -24px rgba(37, 99, 235, .5);

  --lentur: cubic-bezier(.18, 1.4, .42, 1);
  --halus: cubic-bezier(.16, 1, .3, 1);
}

[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; }

body {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  min-height: 100dvh;
  overflow-x: clip;
  background:
    radial-gradient(115% 55% at 100% 0%, var(--tinta-lembut) 0%, transparent 58%),
    var(--dasar);
  color: var(--teks);
  font-family: "Public Sans", system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Motif kertas suara: garis cetak halus + dua sapuan tinta. Satu lapis tetap. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--tinta) 4%, transparent) 0 1px, transparent 1px 24px),
    radial-gradient(58% 42% at 96% 2%, color-mix(in srgb, var(--tinta) 11%, transparent), transparent 72%),
    radial-gradient(52% 40% at 0% 96%, color-mix(in srgb, var(--emas-terang) 13%, transparent), transparent 74%);
}

::selection { background: var(--tinta); color: var(--di-tinta); }

/* Scrollbar ala shadcn (Radix ScrollArea): trek bening, ibu jari membulat
   penuh sewarna garis, disisipkan 1px lewat background-clip supaya tidak
   menempel ke tepi. Tidak ada pustaka - murni properti scrollbar bawaan CSS. */
* {
  scrollbar-width: thin;                          /* Firefox */
  scrollbar-color: var(--garis-kuat) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--garis-kuat);
  border: 1px solid transparent;
  border-radius: var(--r-pil);
  background-clip: content-box;                   /* sisipan 1px, seperti p-px di shadcn */
  transition: background-color .2s;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--redup); }
::-webkit-scrollbar-corner { background: transparent; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================
   Tipografi
   ========================================================= */
h1, h2, h3 {
  font-family: "Bricolage Grotesque", "Public Sans", sans-serif;
  margin: 0;
  letter-spacing: -.025em;
  line-height: 1.04;
  font-weight: 700;
}

.judul-besar { font-size: clamp(2.5rem, 7vw, 4.1rem); font-weight: 800; letter-spacing: -.035em; }
.judul-sedang { font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.judul-kecil { font-size: 1.12rem; }

.tinta { color: var(--tinta); }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .92em; }

.eyebrow {
  margin: 0 0 .7rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta);
}

.teks-panjang { margin: .9rem 0 0; max-width: 58ch; color: var(--redup); }
.teks-tengah { margin-inline: auto; text-align: center; }

.petunjuk { margin: .55rem 0 0; font-size: .85rem; color: var(--redup); }

/* =========================================================
   Tombol
   ========================================================= */
.tombol {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .62rem 1.15rem;
  font: inherit;
  font-size: .93rem;
  font-weight: 600;
  border: 1.5px solid transparent;
  border-radius: var(--r-pil);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .25s var(--halus), transform .12s;
}
.tombol:disabled { opacity: .45; cursor: not-allowed; }
.tombol:not(:disabled):active { transform: translateY(1px) scale(.985); }

.tombol--utama { color: var(--di-tinta); background: var(--tinta); }
.tombol--utama:not(:disabled):hover { background: var(--tinta-kuat); box-shadow: 0 16px 26px -14px var(--tinta); }

.tombol--polos { color: var(--teks); background: var(--kertas); border-color: var(--garis); }
.tombol--polos:not(:disabled):hover { border-color: var(--tinta); color: var(--tinta); }

.tombol--bahaya { color: var(--merah); }
.tombol--bahaya:not(:disabled):hover { border-color: var(--merah); color: var(--merah); }

.tombol--hapus { color: #fff; background: var(--merah); }
.tombol--hapus:not(:disabled):hover { background: #b91c1c; }

.tombol--sibuk { pointer-events: none; }
.tombol--sibuk:disabled { opacity: .9; }
.tombol--sibuk::before {
  content: "";
  width: .85em; height: .85em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: putar .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tombol--sibuk::before { animation: none; }
}

.tombol--lebar { width: 100%; margin-top: 1.2rem; }

.tautan-kembali {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: 1rem;
  padding: 0;
  font: inherit;
  font-size: .9rem;
  color: var(--redup);
  background: none;
  border: 0;
  cursor: pointer;
}
.tautan-kembali:hover { color: var(--tinta); }

/* =========================================================
   Isian
   ========================================================= */
.label { display: block; margin: 1rem 0 .35rem; font-size: .87rem; font-weight: 600; }
.label__opsional { font-weight: 400; color: var(--redup); }

.isian {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit;
  font-size: .95rem;
  color: var(--teks);
  background: var(--kertas-2);
  border: 1.5px solid var(--garis);
  border-radius: var(--r-kontrol);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.isian::placeholder { color: var(--redup); opacity: .85; }
.isian:focus {
  outline: none;
  background: var(--kertas);
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px var(--tinta-lembut);
}
.isian--mono { font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .06em; }
.isian--panjang { resize: vertical; font-family: inherit; }
.isian--berkas { padding: .5rem; background: var(--kertas); }

/* Pilihan orde basis: daftar centang, pengganti Tom Select.
   Tidak butuh pustaka, tetap jalan tanpa internet. */
.pilih-org {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .5rem .65rem;
  font-size: .9rem;
  background: var(--kertas-2);
  border: 1.5px solid var(--garis);
  border-radius: var(--r-kontrol);
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.pilih-org:hover { border-color: var(--garis-kuat); }
.pilih-org input { accent-color: var(--tinta); margin-top: .18rem; flex: none; }
.pilih-org:has(input:checked) {
  border-color: var(--tinta);
  background: var(--tinta-lembut);
  color: var(--tinta);
  font-weight: 600;
}

.isian-sandi { position: relative; }
.isian-sandi .isian { padding-right: 2.9rem; }

.mata {
  position: absolute;
  right: .45rem;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  padding: 0;
  color: var(--redup);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.mata:hover { color: var(--tinta); background: var(--tinta-lembut); }
.mata[aria-pressed="false"] .mata__tutup,
.mata[aria-pressed="true"] .mata__buka { display: none; }

.galat {
  margin: .9rem 0 0;
  padding: .6rem .8rem;
  font-size: .87rem;
  color: var(--merah);
  background: color-mix(in srgb, var(--merah) 8%, transparent);
  border-left: 3px solid var(--merah);
  border-radius: 0 8px 8px 0;
}

.form-aksi { display: flex; gap: .6rem; align-items: center; }
.form-aksi .tombol--lebar, .form-aksi .tombol--polos { margin-top: 1.2rem; }

/* =========================================================
   Tab & panel
   ========================================================= */
.tab {
  display: flex;
  gap: .25rem;
  margin: 0 0 1.3rem;
  padding: .28rem;
  background: var(--kertas-2);
  border: 1.5px solid var(--garis);
  border-radius: var(--r-pil);
}
.tab--admin { margin: 0 0 1.6rem; width: fit-content; flex-wrap: wrap; }

.tab__btn {
  flex: 1;
  padding: .55rem .9rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--redup);
  background: none;
  border: 0;
  border-radius: var(--r-pil);
  cursor: pointer;
  transition: color .2s, background .2s, box-shadow .25s;
}
.tab__btn:hover { color: var(--teks); }
.tab__btn--aktif { color: var(--di-tinta); background: var(--tinta); box-shadow: 0 8px 18px -12px var(--tinta); }

.panel { display: none; }
.panel--aktif { display: block; }

/* =========================================================
   Rangka halaman
   ========================================================= */
.pita-galat {
  padding: .7rem 1rem;
  font-size: .88rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: var(--merah);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--kertas) 86%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--garis);
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--kertas); backdrop-filter: none; }
}
.topbar__sekolah { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chip {
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: .35rem .8rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--tinta);
  background: var(--tinta-lembut);
  border-radius: var(--r-pil);
}

.tampilan { display: none; }
.tampilan--aktif { display: block; }

.kepala-halaman { position: relative; margin-bottom: 1.8rem; padding-top: 1.1rem; }
.kepala-halaman::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 3rem; height: 3px;
  border-radius: var(--r-pil);
  background: linear-gradient(90deg, var(--tinta), var(--emas-terang));
}

.maklumat {
  margin-bottom: 1.4rem;
  padding: .9rem 1.1rem;
  font-size: .9rem;
  color: var(--redup);
  background: color-mix(in srgb, var(--emas-terang) 14%, var(--kertas));
  border: 1.5px solid color-mix(in srgb, var(--emas) 30%, transparent);
  border-radius: var(--r-kartu);
}
.maklumat strong { color: var(--teks); }

.kartu {
  background: var(--kertas);
  border: 1.5px solid var(--garis);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang);
}
.kartu--form { padding: 1.6rem; }
.kartu--rapat { padding: 1.3rem; margin-bottom: 1.6rem; }


/* =========================================================
   Rangka: topbar, isi, kaki.
   Dulu ditulis sebagai utilitas Tailwind di index.html; sekarang
   CSS biasa supaya tidak ada berkas atau langkah bangun tambahan.
   ========================================================= */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
}
.topbar__kiri { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.topbar__kiri > div { min-width: 0; }
.lambang { width: 38px; height: 38px; flex: none; border-radius: var(--r-kontrol); }
.topbar__sekolah { font-weight: 600; font-size: .97rem; line-height: 1.2; }
.topbar__sub { font-size: .78rem; color: var(--redup); }
.topbar__kanan { display: flex; flex: none; align-items: center; gap: .5rem; }

#aplikasi {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding: 2rem 1rem;
}

.kaki {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding: 1.5rem 1rem;
}

/* Kaki halaman dikurung jadi konteks tumpuk sendiri. Tanpa ini tombol
   "Pasang aplikasi" - yang position:relative karena ikut .tombol - lolos
   naik ke atas bilah aksi yang melayang di bilik suara. */
.kaki { position: relative; z-index: 0; }
.kaki__logo { flex: none; border-radius: 6px; }
.kaki__ket { flex: 1; font-size: .82rem; color: var(--redup); }
.kaki__pasang { flex: none; padding: .45rem .9rem; font-size: .82rem; }

/* Daftar centang orde basis */
.pilih-org-wadah {
  display: grid;
  grid-template-columns: 1fr;
  gap: .375rem;
  max-height: 14rem;
  overflow-y: auto;
  padding-right: .25rem;
}

@media (min-width: 640px) {
  .pilih-org-wadah { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .topbar, #aplikasi, .kaki { padding-inline: 2rem; }
}
@media (max-width: 560px) {
  .chip { display: none; }
}

/* jarak antar kartu formulir di panel calon */
#admin-calon .kartu--rapat { margin-top: 1.25rem; }
#btn-foto-hapus { margin-top: .5rem; }

/* =========================================================
   1. Gerbang: manifes + formulir
   ========================================================= */
.gerbang {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  min-height: calc(100dvh - 72px - 8rem);
}
.gerbang__pesan { position: relative; max-width: 34rem; }

/* Cincin cetak pengaman di belakang kartu formulir. Murni hiasan. */
.gerbang::after {
  content: "";
  position: absolute;
  right: -4vw;
  top: -18%;
  width: min(46vw, 30rem);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0 22px,
      color-mix(in srgb, var(--tinta) 9%, transparent) 22px 23.5px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 74%);
}

@media (max-width: 900px) {
  .gerbang { grid-template-columns: 1fr; min-height: 0; gap: 2.2rem; }
  .gerbang__pesan { max-width: none; }
}

/* Simulasi kertas suara di halaman depan */
.simulasi {
  position: relative;
  width: min(20rem, 100%);
  margin-top: 2.4rem;
  padding: 1rem 1.1rem 1.2rem;
  background: var(--kertas);
  border: 1.5px solid var(--garis);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang);
}
.simulasi__kop {
  margin: 0 0 .8rem;
  padding-bottom: .55rem;
  border-bottom: 1.5px dashed var(--garis);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--redup);
}
.simulasi__baris {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .55rem;
  border-radius: var(--r-kontrol);
  border: 1.5px solid transparent;
}
.simulasi__nomor {
  display: grid;
  place-items: center;
  width: 1.6rem; height: 1.6rem;
  flex: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .78rem;
  font-weight: 600;
  color: var(--redup);
  background: var(--kertas-2);
  border: 1.5px solid var(--garis);
  border-radius: 7px;
}
.simulasi__garis {
  height: 8px;
  flex: 1;
  border-radius: var(--r-pil);
  background: var(--kertas-2);
  border: 1px solid var(--garis);
}
.simulasi__baris:nth-child(3) .simulasi__garis { flex: .8; }
.simulasi__baris:nth-child(4) .simulasi__garis { flex: .62; }
.simulasi__cap {
  position: absolute;
  right: .4rem;
  display: grid;
  place-items: center;
  width: 2.9rem; height: 2.9rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta);
  border: 2.5px solid var(--tinta);
  border-radius: 50%;
  opacity: 0;
}
/* Tanpa animasi, hasil akhirnya tetap masuk akal: baris kedua sudah tercap. */
.simulasi__baris--dipilih { border-color: var(--tinta); background: var(--tinta-lembut); }
.simulasi__baris--dipilih .simulasi__nomor {
  color: var(--di-tinta); background: var(--tinta); border-color: var(--tinta);
}
.simulasi__baris--dipilih .simulasi__cap { opacity: 1; }

.judul-besar .tinta { position: relative; display: inline-block; }
.judul-besar .tinta::after {
  content: "";
  position: absolute;
  left: 0; right: 6%;
  bottom: .06em;
  height: .1em;
  border-radius: var(--r-pil);
  background: var(--emas-terang);
  transform-origin: left;
}

/* =========================================================
   2. Beranda siswa
   ========================================================= */
.daftar-pemilihan { display: grid; gap: 1rem; }

.kartu-pemilihan {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 1.35rem 1.5rem;
  background: var(--kertas);
  border: 1.5px solid var(--garis);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang);
  transition: transform .3s var(--halus), box-shadow .3s var(--halus), border-color .25s;
}
.kartu-pemilihan:hover {
  transform: translateY(-3px);
  border-color: var(--garis-kuat);
  box-shadow: var(--bayang-angkat);
}
.kartu-pemilihan::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--garis);
}
.kartu-pemilihan--selesai::before { background: var(--tinta); }

.kartu-pemilihan__isi { min-width: 0; }
.kartu-pemilihan__lingkup {
  margin: 0 0 .3rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--redup);
}
.kartu-pemilihan__nama { margin: 0; font-size: 1.32rem; }
.kartu-pemilihan__ket { margin: .35rem 0 0; font-size: .92rem; color: var(--redup); }
.kartu-pemilihan__hasil {
  margin: .6rem 0 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--tinta);
}
.kartu-pemilihan__aksi { flex: none; display: flex; align-items: center; gap: .6rem; }

.cap {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .8rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--redup);
  background: var(--kertas-2);
  border: 1.5px solid var(--garis);
  border-radius: var(--r-pil);
}
.cap--selesai { color: var(--tinta); background: var(--tinta-lembut); border-color: var(--tinta); }
.cap--merah { color: var(--merah); background: color-mix(in srgb, var(--merah) 9%, transparent); border-color: color-mix(in srgb, var(--merah) 35%, transparent); }
.cap--emas { color: var(--emas); background: color-mix(in srgb, var(--emas-terang) 20%, transparent); border-color: color-mix(in srgb, var(--emas) 40%, transparent); }

@media (max-width: 640px) {
  .kartu-pemilihan { flex-direction: column; align-items: stretch; }
  .kartu-pemilihan__aksi { justify-content: flex-start; }
}

/* =========================================================
   3. Kertas suara
   ========================================================= */
.daftar-calon {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
  gap: 1rem;
  margin-bottom: 6.5rem;
}

.calon {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  text-align: left;
  font: inherit;
  color: inherit;
  min-height: 8rem;
  padding: 1.2rem 1.3rem 1.35rem;
  background: var(--kertas);
  border: 1.5px solid var(--garis);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang);
  cursor: pointer;
  transition: transform .3s var(--halus), box-shadow .3s var(--halus),
              border-color .25s, opacity .3s, filter .3s;
}
.calon:hover { border-color: var(--garis-kuat); transform: translateY(-2px); }
.calon--dipilih {
  border-color: var(--tinta);
  border-width: 2px;
  box-shadow: var(--bayang-angkat);
  transform: translateY(-4px);
}
/* calon lain mundur begitu satu kartu ditandai */
.daftar-calon:has(.calon--dipilih) .calon:not(.calon--dipilih) { opacity: .48; filter: saturate(.55); }

.calon__foto { position: relative; display: block; }

.potret {
  display: block;
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: 12px;
  border: 1.5px solid var(--garis);
  background: var(--kertas-2);
}
.potret--besar { width: 74px; height: 74px; }
.potret--kosong {
  display: grid;
  place-items: center;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--di-tinta);
  background: var(--tinta);
  border-color: var(--tinta);
}

.calon__nomor {
  position: absolute;
  left: -8px; top: -8px;
  min-width: 26px;
  padding: .1rem .35rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
  color: var(--di-tinta);
  background: var(--tinta);
  border-radius: 8px;
}

.calon__nama { font-weight: 700; font-size: 1.05rem; }
.calon__kelas { color: var(--redup); font-size: .9rem; }
.calon__visi {
  display: block;
  margin-top: .5rem;
  font-size: .9rem;
  color: var(--redup);
  padding-right: 5.2rem;   /* teks berhenti sebelum zona cap */
}

/* Cap tinta: penanda pilihan, animasinya di bagian "Gerak" */
.calon__coblos {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 68px; height: 68px;
  display: grid;
  place-items: center;
  border: 3px solid var(--tinta);
  border-radius: 50%;
  color: var(--tinta);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transform: rotate(-12deg) scale(1);
  pointer-events: none;
}
.calon__coblos::before { content: "Dipilih"; }
.calon__coblos::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: .55;
}
.calon--dipilih .calon__coblos { opacity: 1; }

.bilah-aksi {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 25;
  width: min(1120px, calc(100% - 2rem));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem .9rem .8rem 1.3rem;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--kertas) 84%, transparent),
    color-mix(in srgb, var(--kertas) 64%, transparent));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--tinta) 16%, transparent);
  border-radius: var(--r-pil);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--bayang-angkat);
}
.bilah-aksi__info { margin: 0; font-size: .9rem; font-weight: 600; }

/* Bilah aksi melayang menutupi dasar layar, jadi saat bilik suara terbuka
   kaki halaman diberi ruang agar tidak berebut tempat yang sama. Di layar
   sempit bilahnya menumpuk jadi dua baris, jadi ruangnya lebih lega. */
body:has(#view-suara.tampilan--aktif) .kaki { padding-bottom: 6rem; }

@media (max-width: 560px) {
  body:has(#view-suara.tampilan--aktif) .kaki { padding-bottom: 9rem; }
}

@media (max-width: 560px) {
  .bilah-aksi { flex-direction: column; align-items: stretch; border-radius: var(--r-kartu); padding: .9rem; }
  .bilah-aksi__info { text-align: center; }

  /* Di layar sempit cap bundar memakan satu baris sendiri; diganti pil kecil
     yang tetap melayang supaya tinggi kartu tidak bertambah. */
  .calon { min-height: 0; }
  .calon__visi { padding-right: 0; }
  .calon__coblos {
    top: 5rem;
    left: 1.05rem;
    right: auto;
    bottom: auto;
    width: 4.6rem;
    height: auto;
    padding: .26rem 0;
    border-width: 2px;
    border-radius: var(--r-pil);
    background: var(--kertas);
    font-size: .54rem;
    transform: rotate(-4deg);
  }
  .calon__coblos::after { display: none; }
}

/* =========================================================
   4. Modal, toast, cap besar
   ========================================================= */
.tirai {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: color-mix(in srgb, #0f172a 55%, transparent);
  backdrop-filter: blur(3px);
}

.modal {
  width: min(30rem, 100%);
  padding: 1.6rem;
  background: var(--kertas);
  border: 1.5px solid var(--garis);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang-angkat);
}

.modal__ringkas {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.1rem 0;
  padding: 1rem;
  background: var(--kertas-2);
  border: 1.5px dashed var(--garis);
  border-radius: var(--r-kontrol);
}
.modal__ringkas .calon__foto { flex: none; }
.modal--tanya .judul-kecil { margin-bottom: .5rem; }
.modal--tanya .teks-panjang { margin-top: 0; }

.modal__peringatan { margin: 0; font-size: .85rem; color: var(--redup); }

.modal__aksi { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.4rem; }

.toast-wadah {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  translate: -50% 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: center;
  width: min(26rem, calc(100% - 2rem));
  pointer-events: none;
}
.toast {
  width: 100%;
  padding: .75rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--teks);
  background: var(--kertas);
  border: 1.5px solid var(--garis);
  border-left: 4px solid var(--garis-kuat);
  border-radius: var(--r-kontrol);
  box-shadow: var(--bayang-angkat);
}
.toast--ok { border-left-color: var(--tinta); }
.toast--galat { border-left-color: var(--merah); }

.cap-besar {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.cap-besar__stempel {
  display: grid;
  place-items: center;
  width: min(15rem, 60vw);
  aspect-ratio: 1;
  padding: 1rem;
  text-align: center;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta);
  background: color-mix(in srgb, var(--kertas) 88%, transparent);
  border: 7px solid var(--tinta);
  border-radius: 50%;
  transform: rotate(-11deg);
  box-shadow: var(--bayang-angkat);
}

/* =========================================================
   5. Pengumuman
   ========================================================= */
.tersegel {
  position: relative;
  overflow: hidden;
  padding: 2.4rem 1.6rem;
  text-align: center;
  background: var(--kertas);
  border: 1.5px solid var(--garis);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang);
}
.tersegel > * { position: relative; }
.tersegel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--emas-terang) 10%, transparent) 0 10px,
    transparent 10px 20px);
  pointer-events: none;
}

.hitung-mundur {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1.6rem 0 .4rem;
}
.hitung-mundur__unit {
  min-width: 4.4rem;
  padding: .7rem .4rem;
  background: var(--kertas-2);
  border: 1.5px solid var(--garis);
  border-radius: var(--r-kontrol);
}
.hitung-mundur__angka {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.hitung-mundur__label {
  display: block;
  margin-top: .3rem;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--redup);
}

.hasil {
  margin-bottom: 1.2rem;
  padding: 1.4rem 1.5rem;
  background: var(--kertas);
  border: 1.5px solid var(--garis);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang);
}
.hasil__kepala {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.hasil__total { margin: .25rem 0 0; font-size: .88rem; color: var(--redup); }

.baris { margin-bottom: 1rem; }
.baris__atas {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .35rem;
  font-size: .93rem;
}
.baris__nomor {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .82rem;
  color: var(--redup);
  margin-right: .5rem;
}
.baris__nama { font-weight: 600; }
.baris__suara { color: var(--redup); font-variant-numeric: tabular-nums; white-space: nowrap; }

.batang {
  height: 10px;
  overflow: hidden;
  background: var(--kertas-2);
  border: 1px solid var(--garis);
  border-radius: var(--r-pil);
}
.batang__isi {
  height: 100%;
  background: var(--tinta);
  border-radius: var(--r-pil);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s var(--halus);
}
.batang__isi--menang { background: linear-gradient(90deg, var(--tinta), var(--emas-terang)); }

/* =========================================================
   6. Panel admin
   ========================================================= */
.panel-admin { display: none; }
.panel-admin--aktif { display: block; }

.saring { display: flex; gap: .4rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.saring__btn {
  padding: .45rem .95rem;
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  color: var(--redup);
  background: var(--kertas);
  border: 1.5px solid var(--garis);
  border-radius: var(--r-pil);
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.saring__btn:hover { color: var(--teks); }
.saring__btn--aktif { color: var(--tinta); background: var(--tinta-lembut); border-color: var(--tinta); }

.baris-data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .7rem;
  padding: .95rem 1.1rem;
  background: var(--kertas);
  border: 1.5px solid var(--garis);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang);
  transition: border-color .2s, background .2s;
}
.baris-data--diubah { border-color: var(--tinta); background: var(--tinta-lembut); }
.baris-data__judul { margin: 0; font-weight: 600; }
.baris-data__ket { margin: .2rem 0 0; font-size: .84rem; color: var(--redup); }
.baris-data__aksi { display: flex; gap: .45rem; flex-wrap: wrap; }

.kartu-calon {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .7rem;
  padding: .95rem 1.1rem;
  background: var(--kertas);
  border: 1.5px solid var(--garis);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang);
  transition: border-color .2s, background .2s;
}
.kartu-calon--diubah { border-color: var(--tinta); background: var(--tinta-lembut); }
.kartu-calon__kepala { position: relative; }
.kartu-calon__nomor {
  position: absolute;
  left: -8px; top: -8px;
  min-width: 26px;
  padding: .1rem .35rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
  color: var(--di-tinta);
  background: var(--tinta);
  border-radius: 8px;
}
.kartu-calon__isi { flex: 1; min-width: 0; }
.kartu-calon__nama { margin: 0; font-weight: 700; }
.kartu-calon__kelas { margin: .1rem 0 0; font-size: .85rem; color: var(--redup); }
.kartu-calon__visi { margin: .45rem 0 0; font-size: .88rem; color: var(--redup); }
.kartu-calon__aksi { display: flex; gap: .45rem; flex-wrap: wrap; }

.unggah { display: flex; align-items: center; gap: 1rem; margin-top: .4rem; }
.unggah__pratinjau {
  width: 74px; height: 74px;
  object-fit: cover;
  border-radius: 12px;
  border: 1.5px solid var(--garis);
}
.unggah > div { flex: 1; min-width: 0; }

@media (max-width: 640px) {
  .unggah { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   7. Gerak
   Semua animasi masuk hanya berjalan kalau pengguna tidak
   meminta gerak dikurangi. Keadaan akhirnya sudah benar tanpa animasi.
   ========================================================= */
@keyframes masuk-halaman { from { opacity: 0; } to { opacity: 1; } }
@keyframes masuk-kepala {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes masuk-kartu {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes cap-tekan {
  0%   { opacity: 0; transform: rotate(-32deg) scale(2.6); }
  55%  { opacity: 1; transform: rotate(-8deg) scale(.86); }
  75%  { transform: rotate(-13deg) scale(1.06); }
  100% { opacity: 1; transform: rotate(-12deg) scale(1); }
}
@keyframes riak-tinta {
  from { opacity: .5; transform: scale(0); }
  to   { opacity: 0; transform: scale(1); }
}
@keyframes goyang-kartu {
  0%, 100% { transform: translateY(-4px); }
  35%      { transform: translateY(-1px) scale(.99); }
}
@keyframes cap-besar-turun {
  0%   { opacity: 0; transform: rotate(-24deg) scale(2.1); }
  60%  { opacity: 1; transform: rotate(-8deg) scale(.9); }
  80%  { transform: rotate(-13deg) scale(1.05); }
  100% { opacity: 1; transform: rotate(-11deg) scale(1); }
}
@keyframes toast-naik {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-pergi {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(8px) scale(.97); }
}
@keyframes modal-muncul {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes panel-dari-kanan {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes panel-dari-kiri {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: none; }
}
/* Satu putaran 9 detik dibagi tiga: tiap baris punya jendela aktifnya sendiri. */
@keyframes simulasi-cap {
  0%, 2%    { opacity: 0; transform: rotate(-26deg) scale(2.2); }
  8%        { opacity: 1; transform: rotate(-5deg) scale(.88); }
  12%       { transform: rotate(-9deg) scale(1); }
  26%       { opacity: 1; transform: rotate(-9deg) scale(1); }
  31%, 100% { opacity: 0; transform: rotate(-9deg) scale(1); }
}
@keyframes simulasi-baris {
  0%, 3%    { border-color: transparent; background: transparent; }
  8%, 26%   { border-color: var(--tinta); background: var(--tinta-lembut); }
  31%, 100% { border-color: transparent; background: transparent; }
}
@keyframes simulasi-nomor {
  0%, 3%    { color: var(--redup); background: var(--kertas-2); border-color: var(--garis); }
  8%, 26%   { color: var(--di-tinta); background: var(--tinta); border-color: var(--tinta); }
  31%, 100% { color: var(--redup); background: var(--kertas-2); border-color: var(--garis); }
}
@keyframes putar { to { transform: rotate(1turn); } }
@keyframes cap-pil {
  from { opacity: 0; transform: rotate(-14deg) scale(1.5); }
  60%  { opacity: 1; transform: rotate(-1deg) scale(.96); }
  to   { opacity: 1; transform: rotate(-3deg) scale(1); }
}
@keyframes cincin-napas {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  50%      { transform: translateY(-14px) scale(1.03); opacity: .78; }
}
@keyframes garis-tinta { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  .tampilan--aktif { animation: masuk-halaman .35s var(--halus) both; }
  .tampilan--aktif .kepala-halaman { animation: masuk-kepala .5s var(--halus) both; }

  /* --i disetel saat kartu dirender, jadi masuknya berurutan */
  .kartu-pemilihan,
  .calon,
  .hasil,
  .baris-data,
  .kartu-calon {
    animation: masuk-kartu .5s var(--halus) both;
    animation-delay: calc(var(--i, 0) * 55ms);
  }

  .judul-besar .tinta::after { animation: garis-tinta .7s .25s var(--halus) both; }

  /* cincin cetak pengaman bernapas pelan, satu-satunya gerak abadi di halaman */
  .gerbang::after { animation: cincin-napas 14s ease-in-out infinite; }

  .panel--dari-kanan { animation: panel-dari-kanan .32s var(--halus) both; }
  .panel--dari-kiri { animation: panel-dari-kiri .32s var(--halus) both; }

  /* Kertas suara di halaman depan mencoblos nomor 1, 2, lalu 3 bergantian. */
  .simulasi__baris--dipilih { border-color: transparent; background: transparent; }
  .simulasi__baris--dipilih .simulasi__nomor {
    color: var(--redup); background: var(--kertas-2); border-color: var(--garis);
  }
  .simulasi__baris--dipilih .simulasi__cap { opacity: 0; }

  .simulasi__baris { animation: simulasi-baris 9s var(--halus) infinite; }
  .simulasi__nomor { animation: simulasi-nomor 9s var(--halus) infinite; }
  .simulasi__cap { animation: simulasi-cap 9s var(--lentur) infinite; }
  .simulasi__baris:nth-of-type(2), .simulasi__baris:nth-of-type(2) * { animation-delay: 3s; }
  .simulasi__baris:nth-of-type(3), .simulasi__baris:nth-of-type(3) * { animation-delay: 6s; }

  .calon--dipilih { animation: goyang-kartu .4s var(--halus); }
  .calon--dipilih .calon__coblos { animation: cap-tekan .55s var(--lentur) both; }

  /* riak tinta dari titik yang ditekan */
  .calon--dipilih::after {
    content: "";
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    width: 200%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--tinta) 0%, transparent 62%);
    animation: riak-tinta .65s var(--halus) forwards;
    pointer-events: none;
  }

  .cap-besar__stempel { animation: cap-besar-turun .6s var(--lentur) both; }
  .toast { animation: toast-naik .35s var(--lentur) both; }
  .toast--pergi { animation: toast-pergi .28s var(--halus) both; }
  .modal { animation: modal-muncul .35s var(--lentur) both; }
}

@media (prefers-reduced-motion: reduce) {
  .batang__isi { transition: none; }
}

@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  .calon--dipilih .calon__coblos { animation: cap-pil .45s var(--lentur) both; }
}