/* Reset ringan */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }

/* Layout umum */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#f6f7fb;
  color:#111827;
  line-height:1.5;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }

/* Topbar */
.topbar { background:#0f172a; color:#fff; }
.topbar .wrap { display:flex; align-items:center; gap:16px; }
.topbar strong { font-weight:700; margin-right:12px; }
.topbar nav a {
  color:#c7d2fe; text-decoration:none; padding:10px 12px; border-radius:8px;
  display:inline-block; margin-right:6px;
}
.topbar nav a:hover { background:rgba(255,255,255,.08); color:#fff; }

/* Card & konten */
main.wrap { padding-top:20px; }
h1, h2 { margin: 8px 0 16px; letter-spacing:.2px; }
.card {
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:20px; box-shadow: 0 4px 14px rgba(15,23,42,.05);
}

/* Form */
label { display:block; font-weight:600; margin:12px 0 6px; color:#111827; }
input[type="text"],
input[type="date"],
input[type="datetime-local"],
select {
  width:100%; padding:10px 12px; border:1px solid #cbd5e1;
  border-radius:10px; background:#fff; outline:none;
}
input:focus, select:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15); }

button, .btn {
  display:inline-block; padding:10px 16px; border-radius:10px; border:0;
  background:#4f46e5; color:#fff; cursor:pointer; font-weight:600;
}
.btn { text-decoration:none; }
button:hover, .btn:hover { filter:brightness(1.05); }
button:disabled { opacity:.6; cursor:not-allowed; }

/* Table */
.table { width:100%; border-collapse:collapse; }
.table th, .table td { border:1px solid #e5e7eb; padding:10px; }
.table th { background:#f3f4f6; text-align:left; }

/* Alerts */
.alert { padding:10px 12px; border-radius:10px; margin:10px 0; }
.alert.ok  { background:#dcfce7; border:1px solid #86efac; color:#065f46; }
.alert.err { background:#fee2e2; border:1px solid #fecaca; color:#991b1b; }