/* ========== Base reset & typography ========== */
:root{
  --maxw: 1100px;
  --pad: 16px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --text: #1a1a1a;
  --muted: #666;
  --bg: #fff;
  --brand: #0f6d3c; /* ganti sesuai warna brand */
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}

img{ max-width:100%; height:auto; display:block; }

/* Biar konten tidak “melebar” di layar besar */
.container, .wrap, .wrapper, main{
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ========== Header / top bar (umum) ========== */
header, .header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Link & tombol */
a{ color: inherit; }
a:hover{ opacity: .85; }

button, .btn, a.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow);
}
button:hover, .btn:hover, a.btn:hover{ transform: translateY(-1px); }

/* ========== Section cards (buat blok konten) ========== */
section, .section, .block{
  padding-block: 28px;
}

.card, .box, .feature, .item{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Heading konsisten */
h1, h2, h3{ line-height: 1.15; margin: 0 0 10px; }
p{ margin: 0 0 14px; color: var(--muted); }

/* ========== Hero/slider text readability ========== */
.hero, .slider, .banner{
  position: relative;
}
.hero::after, .slider::after, .banner::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15));
  pointer-events:none;
}
.hero * , .slider * , .banner *{
  position: relative;
  z-index: 1;
}

/* ========== Mobile improvements ========== */
@media (max-width: 768px){
  :root{ --pad: 14px; }
  h1{ font-size: 28px; }
  h2{ font-size: 22px; }
  .container, .wrap, .wrapper, main{ padding-inline: var(--pad); }
}