/* style.css - reka bentuk simple & responsive, tiada framework */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:Arial, sans-serif; font-size:13px; background:#f2f4f6; color:#222; line-height:1.6; }
a { text-decoration:none; color:#1a4d8f; }

.site-header { background:#1a4d8f; padding:12px 20px; }
.header-dalam { max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; }
.logo-organisasi { color:#fff; font-size:15px; font-weight:bold; }
.nav-menu a { color:#fff; margin-left:14px; font-size:13px; }
.nav-menu a:hover { text-decoration:underline; }

.kandungan-utama { max-width:1100px; margin:20px auto; padding:0 20px; min-height:60vh; }
.banner-img { width:100%; max-height:320px; object-fit:cover; border-radius:6px; margin-bottom:16px; }
.kad { background:#fff; border:1px solid #ddd; border-radius:6px; padding:18px; margin-bottom:16px; }
.kad h2 { font-size:15px; margin-bottom:10px; color:#1a4d8f; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px) { .grid-2 { grid-template-columns:1fr; } }

form label { display:block; font-size:13px; margin:12px 0 4px; font-weight:bold; }
form input, form select, form textarea {
    width:100%; padding:8px; font-size:13px; border:1px solid #ccc; border-radius:4px; font-family:inherit;
}
form textarea { min-height:70px; resize:vertical; }
.baris-radio label { display:inline-block; font-weight:normal; margin-right:16px; }
.bantuan-teks { font-size:13px; color:#777; margin-top:4px; }

.btn { display:inline-block; font-size:13px; padding:9px 16px; border:none; border-radius:4px; cursor:pointer; margin-top:14px; }
.btn-utama { background:#1a4d8f; color:#fff; }
.btn-hijau { background:#2e8b57; color:#fff; }
.btn-merah { background:#c0392b; color:#fff; }
.btn-kecil { padding:5px 10px; margin-top:0; }

.mesej-berjaya { background:#e2f5e9; color:#206b3f; border:1px solid #b7e4c7; padding:10px; border-radius:4px; margin-bottom:14px; }
.mesej-ralat { background:#fdecea; color:#a02c22; border:1px solid #f5c2bd; padding:10px; border-radius:4px; margin-bottom:14px; }

table { width:100%; border-collapse:collapse; background:#fff; font-size:13px; }
table th, table td { border:1px solid #ddd; padding:8px; text-align:left; }
table th { background:#1a4d8f; color:#fff; }
.table-wrap { overflow-x:auto; }

.status-menunggu { color:#b8860b; font-weight:bold; }
.status-disahkan { color:#1a4d8f; font-weight:bold; }
.status-selesai  { color:#2e8b57; font-weight:bold; }
.status-batal    { color:#c0392b; font-weight:bold; }

.senarai-slot { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.pilihan-slot { border:1px solid #ccc; border-radius:4px; padding:8px 12px; font-size:13px; background:#fff; }
.pilihan-slot.penuh { background:#f0f0f0; color:#999; }

.stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:14px; margin-bottom:20px; }
.stat-kotak { background:#fff; border:1px solid #ddd; border-radius:6px; padding:16px; text-align:center; }
.stat-kotak .angka { font-size:15px; font-weight:bold; color:#1a4d8f; }

.site-footer { text-align:center; padding:16px; font-size:13px; color:#777; border-top:1px solid #ddd; margin-top:30px; }
.btn-oku { background:#444; color:#fff; font-size:13px; padding:6px 10px; border-radius:4px; margin-left:8px; }

/* Mod OKU */
body.mod-teks-besar, body.mod-teks-besar h2 { font-size:15px !important; }
body.mod-kontras-tinggi { background:#000 !important; color:#ff0 !important; }
body.mod-kontras-tinggi .kad, body.mod-kontras-tinggi table { background:#000 !important; color:#ff0 !important; border-color:#ff0 !important; }
body.mod-kontras-tinggi a { color:#6cf !important; }

/* Modal (gantikan popup confirm/alert) */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); align-items:center; justify-content:center; z-index:100; }
.modal-overlay.aktif { display:flex; }
.modal-box { background:#fff; border-radius:6px; padding:20px; max-width:340px; width:90%; text-align:center; }
.modal-box p { font-size:13px; margin-bottom:14px; }
.modal-butang { display:flex; gap:10px; justify-content:center; }