/* ===== VARIABLES & RESET ===== */

:root{
  --green: #2e7d32;
  --green-dark: #1b5e20;
  --muted: #6b6b6b;
  --bg-light: #f2fbf4;
  --container-w: 1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#222;
  background:#fff;
  line-height:1.5;
}

/* Utility container */
.container{
  width:90%;
  max-width:var(--container-w);
  margin:0 auto;
}

/* ===== HEADER ===== */
.site-header{
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
  position:sticky;
  top:0;z-index:40;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 0;
}

/* brand */
.site-brand {
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none
}

.site-brand img {
  width:60px;
  height:auto;
  display:block
}

.brand-text {
  color:var(--green);
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:0.4px
}

/* nav */
.main-nav ul {
  display:flex;
  gap:26px;
  align-items:center;
  list-style:none;
}

.main-nav a {
  color:#222;
  font-weight:600;
  padding:8px 6px;
  border-radius:6px;
  transition:all .18s ease;
}

.main-nav a:hover {
  color:var(--green)
}

.main-nav a.active {
  color:var(--green)
}

/* mobile nav toggle */
.nav-toggle{
  display:none;
  width:42px;
  height:36px;
  background:transparent;
  border:0;
  cursor:pointer;
  flex-direction:column;
  justify-content:space-between;
  padding:6px;
}

.nav-toggle span {
  display:block;
  height:3px;
  background:#333;
  border-radius:2px;
  transition:all .18s ease
}

.nav-toggle.open span:nth-child(2) {
  opacity:0
}

.nav-toggle.open span:nth-child(1) {
  transform:translateY(8px) rotate(45deg)
}

.nav-toggle.open span:nth-child(3) {
  transform:translateY(-8px) rotate(-45deg)
}

/* ===== Section Divider Shadow ===== */
section {
  position: relative;
}

section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.06),
    transparent
  );
  pointer-events: none;
}


/* ===== FOOTER ===== */
.site-footer {
  background:var(--green);
  color:#fff;
  padding:30px 0;
  margin-top:30px
}

.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  flex-wrap:wrap
}

.footer-left img {
  width:72px
}

.footer-desc {
  max-width:420px;
  color:#e9f0e9;
  margin-top:8px
}

.footer-right p {
  opacity:0.95;
  margin-bottom:8px
}

.footer-socials img {
  width:28px;
  filter:brightness(0) invert(1);
  margin-left:10px
}



/* --- RESPONSIVE & MENU --- */
@media (max-width: 768px) {
  /* Sembunyikan menu default di layar kecil */
  .main-nav {
    display: none;
    position: absolute;
    top: 70px; /* tinggi header */
    right: 20px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 15px;
    width: 200px;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 15px;
  }

  /* Saat menu aktif */
  .main-nav.show {
    display: block;
  }

  /* Tampilkan tombol hamburger di layar kecil */
  .nav-toggle {
    display: flex;
  }
}