* { box-sizing: border-box; margin:0; padding:0; font-family: 'Segoe UI', Roboto, Arial, sans-serif; }
body { background:#f4f6f9; color:#2c3e50; }

/* Login */
.halaman-login { display:flex; align-items:center; justify-content:center; height:100vh; background:linear-gradient(135deg,#2c3e50,#4b6cb7); }
.kotak-login { background:#fff; padding:36px 32px; border-radius:14px; width:100%; max-width:380px; box-shadow:0 12px 30px rgba(0,0,0,.2); }
.kotak-login h1 { font-size:20px; margin-bottom:4px; }
.kotak-login .sub { color:#7f8c8d; font-size:13px; margin-bottom:20px; }
.kotak-login label { display:block; font-size:13px; margin:12px 0 4px; color:#555; }
.kotak-login input { width:100%; padding:10px 12px; border:1px solid #dcdde1; border-radius:8px; font-size:14px; }
.kotak-login button { width:100%; margin-top:20px; padding:11px; background:#4b6cb7; color:#fff; border:none; border-radius:8px; font-size:15px; cursor:pointer; }
.kotak-login button:hover { background:#3b5998; }

.alert { padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:14px; }
.alert-error { background:#fdecea; color:#c0392b; }
.alert-sukses { background:#eafaf1; color:#1e824c; }

/* Layout admin */
.sidebar { position:fixed; top:0; left:0; width:220px; height:100vh; background:#1f2937; padding:24px 0; display:flex; flex-direction:column; }
.sidebar .brand { color:#fff; font-weight:600; padding:0 20px 20px; font-size:16px; }
.sidebar a { color:#cbd5e1; text-decoration:none; padding:12px 20px; font-size:14px; }
.sidebar a.aktif, .sidebar a:hover { background:#374151; color:#fff; }
.sidebar a.keluar { margin-top:auto; color:#f87171; }

.konten { margin-left:220px; padding:28px 32px; }
.header-halaman { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.header-halaman h1 { font-size:22px; }
.info-live { font-size:13px; color:#7f8c8d; display:flex; align-items:center; gap:6px; }
.titik-hidup { width:8px; height:8px; border-radius:50%; background:#2ecc71; display:inline-block; animation:kedip 1.5s infinite; }
@keyframes kedip { 0%,100%{opacity:1;} 50%{opacity:.3;} }

.panel-atas { display:flex; gap:16px; }
.kartu-ringkas { background:#fff; border-radius:12px; padding:18px 24px; flex:1; box-shadow:0 2px 6px rgba(0,0,0,.05); display:flex; flex-direction:column; }
.kartu-ringkas .angka { font-size:28px; font-weight:700; color:#4b6cb7; }
.kartu-ringkas .label { font-size:13px; color:#7f8c8d; margin-top:4px; }

.tabel-wrap { background:#fff; border-radius:12px; overflow:hidden; margin-top:14px; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.tabel { width:100%; border-collapse:collapse; }
.tabel th, .tabel td { padding:12px 16px; text-align:left; font-size:14px; border-bottom:1px solid #eee; }
.tabel th { background:#f9fafb; color:#555; font-weight:600; font-size:13px; }
.badge { color:#fff; padding:3px 10px; border-radius:20px; font-size:12px; }

.kartu-form { background:#fff; border-radius:12px; padding:20px 24px; margin-top:16px; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.kartu-form h3 { margin-bottom:10px; }
.petunjuk { font-size:12px; color:#7f8c8d; margin-bottom:14px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.form-grid .lebar-penuh { grid-column: 1 / -1; }
.form-grid label { display:block; font-size:13px; margin-bottom:4px; color:#555; }
.form-grid input { width:100%; padding:9px 10px; border:1px solid #dcdde1; border-radius:6px; font-size:13px; }
.form-grid button, .form-filter button { grid-column:1/-1; padding:10px; background:#4b6cb7; color:#fff; border:none; border-radius:8px; cursor:pointer; width:fit-content; padding-left:24px; padding-right:24px; }

.form-filter { display:flex; gap:14px; align-items:end; background:#fff; padding:16px 20px; border-radius:12px; margin-bottom:16px; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.form-filter label { display:block; font-size:12px; margin-bottom:4px; color:#555; }
.form-filter input, .form-filter select { padding:8px 10px; border:1px solid #dcdde1; border-radius:6px; }

.tautan-hapus { color:#e74c3c; }
.tautan-edit { color:#4b6cb7; }
.tombol-batal { padding:10px 20px; border-radius:8px; background:#f1f2f6; color:#555; text-decoration:none; display:inline-flex; align-items:center; font-size:13px; }

.pin-checkpoint { background:#6c5ce7; color:#fff; font-size:10px; font-weight:700; border-radius:50%; width:26px; height:26px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff; }
.pin-satpam { width:18px; height:18px; border-radius:50%; box-shadow:0 0 0 3px #fff, 0 0 6px rgba(0,0,0,.3); }
.pin-jejak { color:#fff; font-size:11px; font-weight:700; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff; }
.pin-jejak-kecil { background:#6c5ce7; color:#fff; font-size:10px; border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff; }

/* Mobile (satpam) */
body.mobile { background:#f4f6f9; }
.topbar-mobile { background:#4b6cb7; color:#fff; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; }
.keluar-mobile { color:#fff; font-size:13px; }
.konten-mobile { padding:16px; max-width:480px; margin:0 auto; }
.kartu-status { padding:12px 16px; border-radius:10px; margin-bottom:10px; font-size:14px; font-weight:600; }
.kartu-radius { padding:10px 16px; border-radius:10px; margin-bottom:10px; font-size:13px; background:#fff; border:1px dashed #dcdde1; color:#555; }
.kartu-kompas { padding:10px 16px; border-radius:10px; margin-bottom:16px; font-size:13px; background:#fff8e1; color:#8a6d00; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kartu-kompas button { padding:7px 12px; border:none; border-radius:8px; background:#4b6cb7; color:#fff; font-size:12px; cursor:pointer; white-space:nowrap; }
.cp-radius-label { font-size:11px; color:#95a5a6; font-weight:400; }
.konten-mobile h2 { font-size:15px; margin:18px 0 6px; }
.daftar-cp { display:flex; flex-direction:column; gap:10px; }
.tombol-checkpoint { padding:14px; border:none; border-radius:10px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.06); text-align:left; font-size:14px; cursor:pointer; }
.tombol-checkpoint:active { background:#eef2ff; }
.pesan-checkin { margin-top:12px; font-size:13px; }
.pesan-checkin .ok { color:#1e824c; }
.pesan-checkin .gagal { color:#c0392b; }
.item-riwayat { background:#fff; padding:10px 14px; border-radius:8px; display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; box-shadow:0 1px 4px rgba(0,0,0,.05); }

/* Radar */
.radar-bingkai { background:#04150d; border-radius:16px; padding:14px; box-shadow:0 4px 14px rgba(0,0,0,.25); margin-bottom:12px; }
.radar-svg { width:100%; height:auto; display:block; }
.teks-arah { fill:#3fd68a; font-size:11px; font-weight:700; }
.label-blip { fill:#ffffff; font-size:8px; font-weight:600; }
.label-kosong { fill:#3fd68a; font-size:11px; opacity:0.7; }
.lapisan-sapuan { transform-origin:150px 150px; animation:putarSapuan 4s linear infinite; }
@keyframes putarSapuan { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.denyut-saya { animation:denyutSaya 1.8s ease-out infinite; }
@keyframes denyutSaya { 0% { r:6; opacity:1; } 100% { r:20; opacity:0; } }
.denyut-blip { animation:denyutBlip 1.2s ease-out infinite; }
@keyframes denyutBlip { 0% { r:7; opacity:1; } 70% { r:14; opacity:0.15; } 100% { r:7; opacity:1; } }
.radar-skala { text-align:center; color:#3fd68a; font-size:11px; margin-top:8px; }

.legenda-checkpoint { margin-bottom:16px; }
.baris-legenda { display:flex; align-items:center; gap:8px; background:#fff; padding:8px 12px; border-radius:8px; margin-bottom:6px; font-size:13px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.titik-legenda { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.nama-legenda { flex:1; font-weight:600; }
.jarak-legenda { color:#7f8c8d; font-size:12px; }