:root{
  --bg:#f7f3ee;
  --fg:#111111;
  --muted:#6b7280;
  --card:#ffffff;
  --accent:#111111;
  --border:#e5e7eb;
}

*{box-sizing:border-box}
html,body {margin:0;padding:0;font-family:Inter,system-ui,Arial,sans-serif;background:var(--bg);color:var(--fg)}
a {color:var(--accent);text-decoration:none;}
p {font-size:14px;}
.container {max-width:1100px;margin:0 auto;padding:16px}
.card {background:var(--card);border:1px solid var(--border);border-radius:16px;padding:10px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.row {display:grid;gap:12px}
.row.cols-2 {grid-template-columns:repeat(2,minmax(0,1fr))}
.row.cols-3 {grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:800px) {.row.cols-2,.row.cols-3{grid-template-columns:1fr}}
.input,select,textarea{font-size:14px;font-family:Inter,system-ui,Arial,sans-serif;width:100%;padding:10px;border:1px solid var(--border);border-radius:12px;background:#fff}
.btn {margin:5px 5px 5px 5px; display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:#fff;cursor:pointer}
.btn:hover {background: #ccc;}
.btnx { display:inline-block; padding:7px 9px; border-radius:12px; border:1px solid var(--border); background:#fff; cursor:pointer }
.btn.primary {background:#2196f3; color:#fff;}
.btn.primary:hover {background: #0056b3; transform: translateY(-1px);}
.btn.primary_black {background:var(--accent);padding:10px 14px;color:#fff}
.btn.primary_black:hover {background: #272c32;box-shadow: 0 3px 8px rgba(229, 57, 53, 0.35);transform: translateY(-1px);}
.btn.secondary {background:#e0e0e0; color:#000;}
.btn.secondary:hover {background: #546E7A;box-shadow: 0 3px 8px rgba(96, 125, 139, 0.35);transform: translateY(-1px);}
.btn.danger {background: #E53935;color: #fff;}
.btn.danger:hover {background: #C62828;box-shadow: 0 3px 8px rgba(229, 57, 53, 0.35);transform: translateY(-1px);}
.btn.info { background: #119c62; color: #fff; }
.btn.info:hover {background: #0d6d7bff;box-shadow: 0 3px 8px rgba(229, 57, 53, 0.35);transform: translateY(-1px);}
.btn.ghost {background:#e0e0e0; color:#000;}
.btn.ghost:hover {background: #7b9fb0b5; transform: translateY(-1px);}

.btn.primary2 { padding: 5px 5px 5px 5px; background:#2196f3; color:#fff;}
.btn.primary2:hover {background: #0056b3; transform: translateY(-1px);}
.btn.primary_black2 { padding: 5px 5px 5px 5px; background:var(--accent);color:#fff}
.btn.primary_black2:hover {background: #272c32;box-shadow: 0 3px 8px rgba(229, 57, 53, 0.35);transform: translateY(-1px);}
.btn.secondary2 { padding: 5px 5px 5px 5px; background:#e0e0e0; color:#000;}
.btn.secondary2:hover {background: #546E7A;box-shadow: 0 3px 8px rgba(96, 125, 139, 0.35);transform: translateY(-1px);}
.btn.danger2 { padding: 5px 5px 5px 5px; background: #E53935;color: #fff;}
.btn.danger2:hover {background: #C62828;box-shadow: 0 3px 8px rgba(229, 57, 53, 0.35);transform: translateY(-1px);}
.btn.info2 { padding: 5px 5px 5px 5px; background: #17a2b8; color: #fff; padding: 5px 5px 5px 5px;}
.btn.info2:hover {background: #0d6d7bff;box-shadow: 0 3px 8px rgba(229, 57, 53, 0.35);transform: translateY(-1px);}
.btn.ghost2 { padding: 5px 5px 5px 5px; background:#e0e0e0; color:#000;}
.btn.ghost2:hover {background: #7b9fb0b5; transform: translateY(-1px);}


@media (max-width:700px) {
.btn {font-size:10px;margin:5px 5px 5px 5px; display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:#fff;cursor:pointer}
p {font-size:12px;}
}

.table{width:100%;border-collapse:collapse}
.table th,.table td{font-size:small;border-bottom:1px solid var(--border);padding:5px;text-align:left;}
.table th{color:var(--muted);font-weight:500}
.nav{position:sticky;top:0;background:rgba(247,243,238,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:20}
.nav .inner{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:10px 16px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--border);font-size:.8rem;color:var(--muted)}
.kbd{font-family:ui-monospace,monospace;background:#eee;border-radius:6px;padding:2px 6px;border:1px solid #ddd}
.grid-qrs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media print{.no-print{display:none}.grid-qrs{grid-template-columns:repeat(4,1fr)}.card{box-shadow:none;border:none}}
.marker{position:absolute;transform:translate(-50%,-100%);background:#111;color:#fff;border-radius:10px;padding:4px 6px;font-size:12px;cursor:grab}
.map-wrap{position:relative;width:100%;overflow:auto;border-radius:16px;border:1px solid var(--border);background:#fff}
.map-img{max-width:100%;display:block}
.tooltip{position:absolute;background:#111;color:#fff;padding:6px 8px;border-radius:8px;font-size:12px;white-space:nowrap;transform:translate(-50%,-120%);pointer-events:none}
.sejajar {display: flex;justify-content: space-between; /* kiri-kanan */align-items: center;/* sejajar tengah vertikal */margin-bottom: 5px;}

.login-card { max-width: 420px; margin: 40px auto; padding: 20px; }
form label { display: block; margin-bottom: 15px; }
.login-links { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.login-links .btn { text-align: center; background: #f8f8f8; border: 1px solid #ccc; }
.login-links .btn:hover { background: #e6e6e6; }