:root {
  --indigo: #4f46e5;
  --violet: #8b5cf6;
  --pink: #ec4899;
  --sky: #38bdf8;
  --ink: #1f1b3a;
  --muted: #635f82;
  --halus: rgba(79, 70, 229, 0.12);
  --radius: 18px;
  --radius-kecil: 12px;
  --bayang: 0 18px 40px -22px rgba(31, 27, 58, 0.38);
  --permukaan: rgba(255, 255, 255, 0.66);
  --garis: rgba(255, 255, 255, 0.8);
  --hijau: #059669;
  --kuning: #b45309;
  --biru: #1d4ed8;
  --oranye: #c2410c;
  --merah: #dc2626;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: #f3f0ff;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
}
body::before {
  width: 46rem;
  height: 46rem;
  top: -20rem;
  left: -14rem;
  background: radial-gradient(circle at 30% 30%, rgba(79, 70, 229, 0.55), transparent 65%);
}
body::after {
  width: 42rem;
  height: 42rem;
  bottom: -18rem;
  right: -14rem;
  background: radial-gradient(circle at 60% 40%, rgba(236, 72, 153, 0.42), transparent 62%),
    radial-gradient(circle at 30% 70%, rgba(56, 189, 248, 0.35), transparent 60%);
}

a { color: var(--indigo); }

.wadah { max-width: 1180px; margin: 0 auto; padding: 24px 20px 72px; }
.wadah-sempit { max-width: 720px; }

/* -------------------------------- topbar -------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid var(--garis);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}
.topbar .merek { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.topbar .merek .logo {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  box-shadow: 0 10px 22px -12px rgba(79, 70, 229, 0.9);
}
.topbar .merek small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.topbar .kanan { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* --------------------------------- kartu -------------------------------- */
.kartu {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  box-shadow: var(--bayang);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 24px;
}
.kartu + .kartu { margin-top: 22px; }
.kartu-rata { text-align: center; }
.kartu-judul { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.kartu-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }

.kisi { display: grid; gap: 20px; }
.kisi-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kisi-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kisi-stat { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.bagian-atas { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.bagian-atas .kanan { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.jarak-bawah { margin-bottom: 20px; }
.jarak-atas { margin-top: 22px; }

/* ---------------------------------- teks -------------------------------- */
.judul-besar { font-size: 26px; font-weight: 800; letter-spacing: -0.4px; margin: 0 0 8px; }
.judul-sedang { font-size: 19px; font-weight: 700; margin: 0 0 6px; }
.teks-muted { color: var(--muted); }
.teks-kecil { font-size: 12.5px; }
.teks-sangat-kecil { font-size: 11.5px; }
.mono { font-variant-numeric: tabular-nums; }
.rapat { margin: 0; }
.daftar-polos { margin: 0; padding-left: 20px; }
.daftar-polos li { margin-bottom: 6px; }

/* --------------------------------- tombol ------------------------------- */
.btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 18px;
  border-radius: var(--radius-kecil);
  color: #fff;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  box-shadow: 0 14px 26px -16px rgba(79, 70, 229, 0.95);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-sekunder {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  border: 1px solid var(--halus);
  box-shadow: 0 10px 20px -18px rgba(31, 27, 58, 0.5);
}
.btn-bahaya { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: none; }
.btn-halus { background: rgba(79, 70, 229, 0.12); color: var(--indigo); box-shadow: none; }
.btn-kecil { padding: 7px 12px; font-size: 12.5px; border-radius: 10px; }
.btn-blok { width: 100%; justify-content: center; }
.btn-baris { display: flex; gap: 10px; flex-wrap: wrap; }

/* --------------------------------- form --------------------------------- */
.label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.input, .select, .textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  padding: 11px 13px;
  border-radius: var(--radius-kecil);
  border: 1px solid var(--halus);
  background: rgba(255, 255, 255, 0.9);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.textarea { min-height: 96px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  border-color: rgba(79, 70, 229, 0.6);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.14);
}
.baris-form { margin-bottom: 16px; }
.baris-form-ganda { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.form-sempit { max-width: 460px; margin: 0 auto; }

.input-kode {
  text-align: center;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 14px;
  text-indent: 14px;
  padding: 16px 10px;
  text-transform: uppercase;
}
.pesan-galat { color: var(--merah); font-size: 13px; margin-top: 10px; min-height: 18px; }

/* --------------------------------- tabel -------------------------------- */
.tabel-bungkus {
  border: 1px solid var(--halus);
  border-radius: 14px;
  overflow: auto;
  background: rgba(255, 255, 255, 0.7);
  max-width: 100%;
}
table.tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabel th, table.tabel td { padding: 11px 12px; text-align: left; vertical-align: middle; }
table.tabel th {
  background: rgba(79, 70, 229, 0.08);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
table.tabel tbody tr { border-top: 1px solid rgba(79, 70, 229, 0.1); }
table.tabel tbody tr:hover { background: rgba(79, 70, 229, 0.045); }
table.tabel td.nama-peserta { font-weight: 600; }
.sel-aksi { white-space: nowrap; display: flex; gap: 6px; flex-wrap: wrap; }
.img-ttd {
  height: 34px;
  background: #fff;
  border: 1px dashed var(--halus);
  border-radius: 8px;
  padding: 2px 4px;
}

/* --------------------------------- pil ---------------------------------- */
.pil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pil.hadir { background: rgba(5, 150, 105, 0.14); color: var(--hijau); }
.pil.izin { background: rgba(180, 83, 9, 0.14); color: var(--kuning); }
.pil.sakit { background: rgba(29, 78, 216, 0.14); color: var(--biru); }
.pil.terlambat { background: rgba(194, 65, 12, 0.14); color: var(--oranye); }
.pil.belum { background: rgba(99, 95, 130, 0.14); color: var(--muted); }
.pil.aktif { background: rgba(5, 150, 105, 0.14); color: var(--hijau); }
.pil.ditutup { background: rgba(99, 95, 130, 0.16); color: var(--muted); }
.pil.info { background: rgba(79, 70, 229, 0.14); color: var(--indigo); }

/* ------------------------------- statistik ------------------------------ */
.stat {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--garis);
  border-radius: 14px;
  padding: 16px 18px;
}
.stat .angka { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.stat .nama { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* --------------------------------- tab ---------------------------------- */
.tab { display: flex; gap: 8px; overflow-x: auto; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--garis); }
.tab button {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--muted);
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.tab button.aktif { background: linear-gradient(135deg, var(--indigo), var(--violet)); color: #fff; }

/* ------------------------------ kartu agenda ---------------------------- */
#kartu-kode.sorot {
  border-color: rgba(79, 70, 229, 0.65);
  box-shadow: 0 0 0 5px rgba(79, 70, 229, 0.16), var(--bayang);
}

/* ------------------------------ daftar nama ----------------------------- */
.kisi-nama { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.kartu-nama {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--garis);
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.kartu-nama:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(31, 27, 58, 0.6); }
.kartu-nama .nomor {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  background: rgba(79, 70, 229, 0.12);
  color: var(--indigo);
}
.kartu-nama .nama { font-weight: 600; font-size: 14px; word-break: break-word; }
.kartu-nama .ket { font-size: 11.5px; color: var(--muted); }
.kartu-nama.sudah { background: rgba(5, 150, 105, 0.09); border-color: rgba(5, 150, 105, 0.3); }
.kartu-nama.sudah .nomor { background: rgba(5, 150, 105, 0.16); color: var(--hijau); }

/* ------------------------------- tanda tangan --------------------------- */
.papan-bungkus {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--halus);
  background: repeating-linear-gradient(to bottom, #fff 0 43px, rgba(79, 70, 229, 0.08) 43px 44px);
  overflow: hidden;
}
canvas.papan { display: block; width: 100%; height: 210px; touch-action: none; cursor: crosshair; }
.garis-ttd { position: absolute; left: 8%; right: 8%; bottom: 42px; border-bottom: 1px dashed rgba(99, 95, 130, 0.5); pointer-events: none; }

/* --------------------------------- feed --------------------------------- */
.feed { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow: auto; }
.feed-item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--garis); }
.feed-item .titik { width: 9px; height: 9px; border-radius: 50%; background: var(--hijau); flex: 0 0 auto; }

/* --------------------------------- modal -------------------------------- */
.tirai {
  position: fixed;
  inset: 0;
  background: rgba(31, 27, 58, 0.45);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: 18px;
  z-index: 90;
  overflow: auto;
}
.tirai[hidden] { display: none; }
.modal {
  width: min(620px, 100%);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--garis);
  border-radius: 20px;
  box-shadow: 0 30px 70px -30px rgba(31, 27, 58, 0.7);
  padding: 24px;
  max-height: 92vh;
  overflow: auto;
}
.modal-lebar { width: min(860px, 100%); }

/* -------------------------------- toast --------------------------------- */
.toast-bungkus { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast {
  background: rgba(31, 27, 58, 0.94);
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  animation: naik 0.18s ease;
  max-width: min(90vw, 460px);
}
.toast.galat { background: #b91c1c; }
.toast.sukses { background: #047857; }
@keyframes naik { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------- spanduk -------------------------------- */
.spanduk {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 18px;
}
.spanduk.offline { background: rgba(180, 83, 9, 0.14); color: var(--kuning); }
.spanduk.daring { background: rgba(5, 150, 105, 0.12); color: var(--hijau); }

/* ------------------------------- pencarian ------------------------------ */
.kotak-cari { position: relative; }
.kotak-cari .input { padding-left: 38px; }
.kotak-cari::before { content: "🔎"; position: absolute; left: 13px; top: 11px; font-size: 14px; opacity: 0.7; }

.pusat { text-align: center; }
.senter { display: flex; justify-content: center; }
.kosong { padding: 34px 18px; text-align: center; color: var(--muted); }

.footer-kecil { margin-top: 28px; text-align: center; color: var(--muted); font-size: 12px; }

.kode-besar { font-size: 30px; font-weight: 800; letter-spacing: 6px; color: var(--indigo); }

/* =====================================================================
   Tema "Si-HADIR" — hanya untuk halaman utama peserta (body.tema-si-hadir).
   Halaman admin & super admin tetap memakai kartu kaca VibeCoder di atas.
   ===================================================================== */
.tema-si-hadir { --garis-kartu: #e7e9f3; --navy: #131a3a; }
.tema-si-hadir .topbar { background: #fff; border-bottom: 1px solid var(--garis-kartu); }
.tema-si-hadir .topbar .merek { font-size: 16px; letter-spacing: -0.2px; }
.tema-si-hadir .topbar .merek .logo { background: var(--navy); box-shadow: 0 10px 20px -14px rgba(19, 26, 58, 0.9); }
.banner {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(120deg, #101635 0%, #1b2452 55%, #2b2f6b 100%);
  box-shadow: 0 26px 50px -30px rgba(16, 22, 53, 0.85);
}
.banner-timpa {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 18%, rgba(139, 92, 246, 0.55), transparent 42%),
    radial-gradient(circle at 12% 90%, rgba(56, 189, 248, 0.35), transparent 46%);
  opacity: 0.75;
  pointer-events: none;
}
.banner-isi {
  position: relative;
  display: flex;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 30px 34px 32px;
}
.banner-sistem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  margin-bottom: 14px;
}
.banner h1 { font-size: 30px; line-height: 1.2; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.6px; }
.banner-sub { margin: 0; max-width: 620px; color: rgba(255, 255, 255, 0.82); font-size: 13.5px; }
.banner-aksi { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-putih {
  background: #fff;
  color: #1b2452;
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.7);
}
.btn-putih:hover { background: #f4f5fb; }

.kisi-ringkasan { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kotak-ringkas {
  background: #fff;
  border: 1px solid var(--garis-kartu);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 14px 26px -24px rgba(19, 26, 58, 0.5);
}
.kotak-ringkas .label-kecil {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.kotak-ringkas .angka-besar { font-size: 27px; font-weight: 800; letter-spacing: -0.8px; line-height: 1; }
.kotak-ringkas .keterangan { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

.penyaring { display: grid; gap: 14px; grid-template-columns: minmax(240px, 2fr) minmax(170px, 1fr) minmax(170px, 1fr); align-items: center; }
.penyaring .kotak-cari { position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.judul-bagian-agenda { display: flex; align-items: center; gap: 10px; margin: 26px 0 14px; }
.judul-bagian-agenda:first-child { margin-top: 0; }
.judul-bagian-agenda h2 { font-size: 15px; font-weight: 800; margin: 0; letter-spacing: 0.2px; text-transform: uppercase; }
.judul-bagian-agenda .hitung {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(19, 26, 58, 0.07);
  color: var(--navy);
}
.judul-bagian-agenda .garis { flex: 1; height: 1px; background: var(--garis-kartu); }

.kisi-kegiatan { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.kegiatan-kartu {
  display: flex;
  flex-direction: column;
  gap: 13px;
  background: #fff;
  border: 1px solid var(--garis-kartu);
  border-left: 4px solid var(--navy);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 18px 34px -30px rgba(19, 26, 58, 0.6);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.kegiatan-kartu:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -28px rgba(19, 26, 58, 0.5); }
.kegiatan-kartu.berlangsung { border-left-color: #0f9d6b; }
.kegiatan-kartu.akan-datang { border-left-color: #5b5ef0; }
.kegiatan-kartu .kk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.cip.berlangsung { color: #0b7a54; border-color: rgba(15, 157, 107, 0.4); background: rgba(15, 157, 107, 0.08); }
.cip.akan-datang { color: #4341c4; border-color: rgba(91, 94, 240, 0.36); background: rgba(91, 94, 240, 0.08); }
.cip.netral { color: var(--muted); border-color: var(--garis-kartu); background: rgba(19, 26, 58, 0.04); }
.kegiatan-kartu .kk-tanggal-kecil { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); }
.kegiatan-kartu h3 { margin: 0; font-size: 17px; line-height: 1.35; letter-spacing: -0.3px; }
.kegiatan-kartu .kk-sub { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: var(--muted); }
.kegiatan-kartu .pemisah { height: 1px; background: var(--garis-kartu); }
.blok-pj {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 13px;
  background: #f7f8fd;
  border: 1px solid var(--garis-kartu);
}
.blok-pj .avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, #1b2452, #5b5ef0);
}
.blok-pj .pj-label { font-size: 9.5px; font-weight: 800; letter-spacing: 0.9px; text-transform: uppercase; color: var(--muted); }
.blok-pj .pj-nama { font-size: 14px; font-weight: 700; }
.blok-pj .pj-sub { font-size: 11.5px; color: var(--muted); }
.kk-detail { display: grid; gap: 10px 18px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); font-size: 12.5px; }
.kk-detail div { display: flex; flex-direction: column; gap: 2px; }
.kk-detail .dt-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.kk-detail .dt-nilai { font-weight: 600; }
.blok-hadir { display: flex; flex-direction: column; gap: 8px; }
.blok-hadir .baris-atas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.blok-hadir .baris-atas .angka { font-weight: 800; }
.blok-hadir .baris-atas .pil-kanan { margin-left: auto; }
.progres { height: 8px; border-radius: 999px; background: rgba(19, 26, 58, 0.08); overflow: hidden; }
.progres span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0f9d6b, #24c08a); }
.progres.indigo span { background: linear-gradient(90deg, #4341c4, #7b7ef5); }
.pil-persen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(91, 94, 240, 0.1);
  color: #4341c4;
}
.kegiatan-kartu .kk-tombol { margin-top: auto; }

@media (max-width: 900px) {
  .penyaring { grid-template-columns: 1fr; }
  .banner-isi { padding: 24px 20px 26px; }
  .banner h1 { font-size: 23px; }
  .banner-aksi { width: 100%; }
  .banner-aksi .btn { flex: 1; justify-content: center; }
  .kisi-kegiatan { grid-template-columns: 1fr; gap: 16px; }
  .kegiatan-kartu { padding: 16px; }
}

@media (max-width: 620px) {
  .wadah { padding: 18px 14px 60px; }
  .kartu { padding: 18px; }
  .judul-besar { font-size: 22px; }
  .input-kode { font-size: 27px; letter-spacing: 8px; text-indent: 8px; }
  .topbar { padding: 12px 14px; }
  .topbar .merek small { display: none; }
}