/* Gerbang Masuk JSA — tema Putih Salju */
:root {
  --latar:#f6f8fb; --kartu:#ffffff; --garis:#e4e9f2; --garis-tegas:#cfd8e8;
  --teks:#152238; --redup:#6a7893; --biru:#1c5fd8; --biru-lembut:#eaf1ff;
  --hijau:#12a150; --merah:#d6455d; --kuning:#c98209;
  --bayang:0 1px 2px rgba(19,38,66,.05), 0 8px 24px rgba(19,38,66,.06);
  --radius:14px;
}
html[data-tema="gelap"] {
  --latar:#0f1420; --kartu:#161d2c; --garis:#26314a; --garis-tegas:#31405e;
  --teks:#e9eefb; --redup:#93a2c0; --biru:#6f9bff; --biru-lembut:#1d2942;
  --hijau:#39c07a; --merah:#ff6f86; --kuning:#e2a53b;
  --bayang:0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35);
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  background:var(--latar); color:var(--teks); font-size:14.5px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1 { font-size:22px; margin:14px 0 6px; letter-spacing:-.3px; }
h2 { font-size:19px; margin:0 0 6px; letter-spacing:-.2px; }
p { margin:6px 0; line-height:1.55; }
.redup { color:var(--redup); }
.kecil { font-size:12.5px; }
.catatan-kecil { color:var(--redup); font-size:12.5px; line-height:1.6; }
code { background:var(--biru-lembut); color:var(--biru); padding:2px 6px; border-radius:6px; font-size:12.5px; word-break:break-all; }

/* ---------- tengah (masuk / daftar) ---------- */
.tengah { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:26px 18px; }
.kartu-pusat {
  width:100%; max-width:392px; background:var(--kartu); border:1px solid var(--garis);
  border-radius:18px; padding:30px 28px 26px; box-shadow:var(--bayang);
}
.lambang {
  width:46px; height:46px; border-radius:13px; background:var(--biru); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; letter-spacing:.4px;
  font-size:15px; margin-bottom:6px; box-shadow:0 6px 16px rgba(28,95,216,.28);
}
.lambang.kecil { width:34px; height:34px; border-radius:10px; font-size:12px; margin:0; box-shadow:none; }
.kilau { animation:kilau 1.5s ease-in-out infinite alternate; }
@keyframes kilau { from { opacity:.55; } to { opacity:1; } }

label { display:block; font-size:12.5px; font-weight:600; color:var(--redup); margin:14px 0 5px; }
.masukan {
  width:100%; padding:10px 12px; font-size:14.5px; color:var(--teks); background:var(--kartu);
  border:1px solid var(--garis-tegas); border-radius:10px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.masukan:focus { border-color:var(--biru); box-shadow:0 0 0 3px var(--biru-lembut); }
.tombol {
  padding:10px 15px; font-size:14px; font-weight:600; color:var(--teks); background:var(--kartu);
  border:1px solid var(--garis-tegas); border-radius:10px; cursor:pointer; transition:.15s;
}
.tombol:hover { border-color:var(--biru); color:var(--biru); }
.tombol.utama { background:var(--biru); border-color:var(--biru); color:#fff; }
.tombol.utama:hover { filter:brightness(1.07); color:#fff; }
.tombol.penuh { width:100%; margin-top:16px; }
.tombol.kecil { padding:7px 11px; font-size:13px; }
.pesan { margin-top:12px; font-size:13px; min-height:18px; color:var(--redup); }
.pesan.salah { color:var(--merah); font-weight:600; }
.pesan.benar { color:var(--hijau); font-weight:600; }

/* ---------- kepala halaman ---------- */
.kepala {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; padding:12px 20px; background:rgba(255,255,255,.86);
  border-bottom:1px solid var(--garis); backdrop-filter:saturate(1.4) blur(10px);
}
html[data-tema="gelap"] .kepala { background:rgba(22,29,44,.86); }
.merek { display:flex; align-items:center; gap:11px; }
.judul-merek { font-weight:700; letter-spacing:-.2px; }
.alat { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cari { width:210px; padding:8px 11px; font-size:13.5px; }
.pil-peran {
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--biru); background:var(--biru-lembut); padding:5px 10px; border-radius:999px;
}
.isi { max-width:1120px; margin:0 auto; padding:24px 20px 60px; }
.baris-sambutan { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }

/* ---------- kisi aplikasi ---------- */
.kisi { display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:14px; }
.kartu {
  background:var(--kartu); border:1px solid var(--garis); border-radius:var(--radius);
  padding:16px 16px 14px; box-shadow:var(--bayang); display:flex; flex-direction:column; gap:9px;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.kartu:hover { transform:translateY(-2px); border-color:var(--garis-tegas); box-shadow:0 12px 30px rgba(19,38,66,.10); }
.kartu.mati { opacity:.62; }
.kartu-atas { display:flex; align-items:center; gap:11px; }
.ikon {
  width:38px; height:38px; border-radius:11px; background:var(--biru-lembut); color:var(--biru);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.ikon svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.kartu-nama { font-weight:700; letter-spacing:-.2px; }
.pil { font-size:11px; font-weight:700; color:var(--redup); background:var(--latar); border:1px solid var(--garis); padding:3px 8px; border-radius:999px; }
.kartu-ket { color:var(--redup); font-size:13px; line-height:1.5; flex:1; }
.kartu-bawah { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; border-top:1px solid var(--garis); }
.keadaan { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--redup); }
.titik { width:8px; height:8px; border-radius:50%; background:var(--redup); }
.titik.hidup { background:var(--hijau); box-shadow:0 0 0 3px rgba(18,161,80,.14); }
.titik.mati { background:var(--merah); box-shadow:0 0 0 3px rgba(214,69,93,.14); }
.pil-sso { font-size:10.5px; font-weight:700; color:var(--hijau); background:rgba(18,161,80,.10); padding:3px 7px; border-radius:999px; }

/* ---------- jendela ---------- */
.jendela { position:fixed; inset:0; background:rgba(12,20,34,.45); display:none; align-items:center; justify-content:center; padding:20px; z-index:50; }
.jendela.buka { display:flex; }
.isi-jendela {
  background:var(--kartu); border-radius:18px; border:1px solid var(--garis); width:100%;
  max-width:560px; max-height:90vh; overflow:auto; padding:22px 24px 26px; box-shadow:0 24px 60px rgba(10,20,36,.3);
}
.isi-jendela.lebar { max-width:900px; }
.isi-jendela.sempit { max-width:400px; }
.kepala-jendela { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.tab { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; }
.tab .tab-aktif { background:var(--biru-lembut); border-color:var(--biru); color:var(--biru); }
.panel { border-top:1px solid var(--garis); padding-top:14px; }
.kisi-borang { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:4px 14px; margin-top:6px; }
.baris-aksi { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px; }
.baris-saklar { display:flex; gap:20px; flex-wrap:wrap; margin-top:14px; }
.saklar { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--teks); font-weight:500; margin:0; }
.menempel { display:flex; gap:8px; align-items:center; }
.menempel .masukan { flex:1; }

/* ---------- tabel ---------- */
.tabel { width:100%; border-collapse:collapse; font-size:13.5px; margin-top:6px; }
.tabel th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--redup); padding:8px 8px; border-bottom:1px solid var(--garis-tegas); }
.tabel td { padding:9px 8px; border-bottom:1px solid var(--garis); vertical-align:middle; }
.tabel tr:last-child td { border-bottom:none; }
.tautan-kecil { background:none; border:none; color:var(--biru); font-size:12.5px; font-weight:600; cursor:pointer; padding:2px 4px; }
.tautan-kecil.bahaya { color:var(--merah); }
.pil-hidup { color:var(--hijau); font-weight:600; }
.pil-mati { color:var(--redup); font-weight:600; }

@media (max-width:640px) {
  .kepala { padding:10px 14px; }
  .cari { width:100%; }
  .isi { padding:18px 14px 50px; }
  .kisi { grid-template-columns:1fr; }
  .kartu-pusat { padding:24px 20px; }
}