/* ===== Tema Hijau–Putih PASTI Kudat (header/footer hijau, tengah putih→hijau) ===== */
:root{
  --g50:#f0fdf4; --g100:#dcfce7; --g200:#bbf7d0;
  --g500:#22c55e; --g600:#16a34a; --g700:#15803d; --g800:#0f5f2e;
  --ink:#0b1320; --muted:#475569; --white:#fff;
}

/* Asas */
html,body{font-family:'Inter',system-ui,Segoe UI,Roboto,sans-serif;color:var(--ink);background:#fff}
a{color:inherit;text-decoration:none}
.container{max-width:1200px}

/* Latar tengah laman (gradasi lembut) */
.page-bg{
  background:
    radial-gradient(1000px 600px at 110% -10%, rgba(34,197,94,.12), transparent 60%),
    radial-gradient(1200px 700px at -10% 110%, rgba(21,128,61,.10), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f6fff9 100%);
}

/* Topbar + Navbar + Footer (hijau) */
.topbar{background:#136c31;color:var(--white)}
.navbar{background:#0f5f2e;color:var(--white);position:sticky;top:0;z-index:50}
.navbar a{color:var(--white);opacity:.95}
.navbar a:hover{opacity:1}
.nav-item{padding:.75rem .5rem;border-bottom:2px solid transparent}
.nav-item.active{border-bottom-color:#bbf7d0;font-weight:700}

/* Dropdown */
.dropdown{position:relative}
.dropdown-menu{
  position:absolute;left:0;top:100%;min-width:14rem;margin-top:.5rem;
  background:#ffffff;color:#0b1720;border-radius:12px;padding:.5rem 0;
  box-shadow:0 20px 45px rgba(2,6,23,.2);display:none;
}
.dropdown:hover .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:.5rem 1rem;border-left:3px solid transparent}
.dropdown-menu a:hover{background:#f0fdf4;border-left-color:#16a34a;color:#0f5f2e}

/* Kad/Media utiliti */
.card{background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.media{border-radius:16px;overflow:hidden;background:#eef2f7}
.media img{width:100%;height:100%;object-fit:cover;display:block}

/* Butang */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.6rem 1.1rem;font-weight:700}
.btn-primary{background:#16a34a;color:#fff}
.btn-primary:hover{background:#15803d}
.btn-outline{border:1px solid #ccebd9;background:#fff;color:#15803d}
.btn-outline:hover{background:#f0fdf4}

/* Footer */
.site-footer{background:#0c4d26;color:#d1fae5}
.site-footer a:hover{color:#fff}