/* Light theme selaras index */

:root{
  --bg:#f6f8fc;          /* latar lembut, bukan putih polos */
  --fg:#0a1633;          /* teks utama */
  --muted:#5e6c86;       /* teks sekunder */
  --card:#ffffff;        /* kartu/form */
  --line:#d7deea;        /* border abu-abu terang */
  --brand:#0a92d0;       /* aksen biru kalem */
  --radius:14px;
  --shadow:0 10px 26px rgba(17,40,85,.08);
  color-scheme: light;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
}
a{color:#1583d6;text-decoration:none}

/* Layout & kartu */
.wrap{max-width:980px;margin:40px auto;padding:0 20px}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.pane{padding:14px}

/* Pill/label */
.pill{
  display:inline-block;
  background: color-mix(in oklab, var(--brand) 10%, var(--card));
  border:1px solid var(--line); color:var(--fg);
  padding:2px 10px; border-radius:999px; font-size:13px;
}

/* Controls default TERANG */
input,select,button{
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  color:var(--fg);
  box-shadow:none;
}
button{
  font-weight:700; cursor:pointer;
}
button:hover{
  background: color-mix(in oklab, var(--brand) 8%, var(--card));
  border-color: color-mix(in oklab, var(--brand) 25%, var(--line));
}
button:disabled{opacity:.6; cursor:not-allowed}

/* (opsional) tombol aksen biru */
.btn-primary{
  background: var(--brand); color:#fff; border:none;
  box-shadow: 0 6px 16px rgba(10,146,208,.18);
}
.btn-primary:hover{ filter: brightness(1.05); }

/* Teks bantu & item list */
.muted{color:var(--muted)}
.item{
  border:1px solid var(--line); background:var(--card);
  border-radius:12px; padding:12px; margin:8px 0;
}
.mini{font-size:12px;color:var(--muted)}

/* Grid responsif */
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:980px){ .grid{grid-template-columns:1fr 1fr} }