/* ============================================================
   BASE — Variabel warna, reset, tipografi, tombol, form
   Ubah tema warna website cukup dari :root di bawah ini.
   ============================================================ */
:root{
  --ink:#2C2C2B;        /* teks utama */
  --ink2:#7D7A75;       /* teks sekunder */
  --canvas:#FFFFFF;
  --soft:#F9F8F7;
  --soft2:#F0EFED;
  --border:#E6E5E3;
  --green:#0D6FC2;      /* warna utama PKK */
  --green-dark:#0A5697;
  --green-soft:#E8F1F9;
  --gold:#D5A03B;
  --radius:8px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
  --shadow-md:0 2px 4px rgba(0,0,0,.06), 0 12px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--canvas); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;}
img{display:block; max-width:100%;}
a{color:var(--green); text-decoration:none;}
button{font:inherit; cursor:pointer;}
::selection{background:var(--green-soft); color:var(--green-dark);}

/* Aksesibilitas: fokus keyboard terlihat jelas */
:focus-visible{outline:2px solid var(--green); outline-offset:2px; border-radius:4px;}

.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

/* ---------- Tombol ---------- */
.btn{display:inline-block; padding:11px 20px; border-radius:var(--radius); font-weight:600; font-size:15px; border:1px solid transparent; transition:background .18s ease, box-shadow .18s ease, transform .18s ease;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(.98);}
.btn-light{background:#fff; color:var(--green-dark);}
.btn-light:hover{background:#f2f2f0; box-shadow:var(--shadow-sm);}
.btn-ghost{border-color:rgba(255,255,255,.5); color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.12);}
.btn-green{background:var(--green); color:#fff;}
.btn-green:hover{background:var(--green-dark); box-shadow:0 4px 14px rgba(13,111,194,.28);}
.btn-plain{background:var(--soft2); color:var(--ink); border:1px solid var(--border);}
.btn-plain:hover{background:var(--border);}
.btn-danger{background:#FCE9E7; color:#B3382C; border:1px solid #f0c6c1;}
.btn-sm{padding:6px 12px; font-size:13.5px;}

/* ---------- Form ---------- */
.field{margin-bottom:16px;}
.field label{display:block; font-size:14px; font-weight:600; margin-bottom:6px;}
.field input[type=text],.field input[type=password],.field input[type=date],.field input[type=url],.field select,.field textarea{width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius); font:inherit; font-size:15px; background:#fff; color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease;}
.field textarea{min-height:140px; resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(13,111,194,.15);}
.field .hint{font-size:12.5px; color:var(--ink2); margin-top:5px;}

/* ---------- Pesan ---------- */
.alert{background:#FCE9E7; color:#B3382C; border:1px solid #f0c6c1; border-radius:var(--radius); padding:10px 14px; font-size:14px; margin-bottom:16px;}
.notice{background:var(--green-soft); color:var(--green-dark); border:1px solid #cbdff2; border-radius:var(--radius); padding:10px 14px; font-size:14px; margin-bottom:16px;}
.empty{padding:32px; text-align:center; color:var(--ink2); font-size:14.5px;}

/* ---------- Toast (notifikasi kecil setelah menyimpan) ---------- */
.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%, 16px); background:var(--green-dark); color:#fff; padding:11px 22px; border-radius:999px; font-size:14px; font-weight:600; opacity:0; transition:opacity .25s ease, transform .25s ease; z-index:200; box-shadow:var(--shadow-md); pointer-events:none; max-width:calc(100vw - 48px); text-align:center;}
.toast.show{opacity:1; transform:translate(-50%, 0);}

/* ---------- Animasi reveal saat scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease;}
.reveal.in{opacity:1; transform:none;}

/* Hormati preferensi pengguna yang menonaktifkan animasi */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .btn,.btn:hover,.btn:active{transform:none; transition:none;}
}