:root {
    --hijau:#0f6b62; --hijau-tua:#0a4f48; --hijau-muda:#e3f1ee; --aksen:#f2b84b;
    --teks:#1d2b29; --redup:#55625f; --garis:#dbe5e2; --latar:#f5f8f7; --kartu:#ffffff;
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--latar); color:var(--teks);
    font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:16px; line-height:1.6; }
  a { color:var(--hijau); }
  .wadah { max-width:1040px; margin:0 auto; padding:0 16px; }

  header.atas { background:#fff; border-bottom:1px solid var(--garis); position:sticky; top:0; z-index:5; }
  header.atas .wadah { display:flex; align-items:center; gap:12px; height:60px; }
  .merek { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; color:var(--teks); text-decoration:none; }
  .merek img { width:30px; height:30px; }
  nav.menu { margin-left:auto; display:flex; gap:18px; align-items:center; font-size:15px; }
  nav.menu a { text-decoration:none; color:var(--redup); }
  nav.menu a.tombol { color:#fff; }
  @media (max-width:640px) { nav.menu a:not(.tombol) { display:none; } }

  .tombol { display:inline-block; background:var(--hijau); color:#fff; text-decoration:none; font-weight:700;
    padding:11px 18px; border-radius:10px; border:0; }
  .tombol:hover { background:var(--hijau-tua); }
  .tombol.garis { background:transparent; color:var(--hijau); border:2px solid var(--hijau); padding:9px 16px; }
  .tombol.garis:hover { background:var(--hijau-muda); }

  .pembuka { background:linear-gradient(180deg,#fff 0%,var(--latar) 100%); padding:56px 0 40px; }
  .pembuka h1 { font-size:clamp(28px,4.6vw,44px); line-height:1.2; margin:0 0 16px; max-width:780px; letter-spacing:-.5px; }
  .pembuka p.lead { font-size:clamp(16px,2.2vw,19px); color:var(--redup); max-width:700px; margin:0 0 26px; }
  .aksi { display:flex; gap:12px; flex-wrap:wrap; }
  .poin { display:flex; gap:10px 22px; flex-wrap:wrap; margin:28px 0 0; padding:0; list-style:none; color:var(--redup); font-size:15px; }
  .poin li::before { content:"✓"; color:var(--hijau); font-weight:800; margin-right:6px; }

  section { padding:44px 0; }
  section h2 { font-size:clamp(22px,3.2vw,30px); margin:0 0 8px; letter-spacing:-.3px; }
  section p.intro { color:var(--redup); margin:0 0 26px; max-width:700px; }

  .grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
  .kartu { background:var(--kartu); border:1px solid var(--garis); border-radius:14px; padding:24px; }
  .kartu h3 { margin:0 0 4px; font-size:20px; }
  .harga { font-size:30px; font-weight:800; color:var(--hijau); margin:8px 0 2px; }
  .harga small { font-size:14px; font-weight:500; color:var(--redup); }
  .kartu ul { padding-left:20px; margin:14px 0 20px; }
  .kartu li { margin:4px 0; }
  .label { display:inline-block; background:var(--aksen); color:#3b2600; font-size:12px; font-weight:800;
    padding:3px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:.4px; }

  ol.langkah { list-style:none; counter-reset:n; padding:0; margin:0; display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
  ol.langkah li { counter-increment:n; background:#fff; border:1px solid var(--garis); border-radius:14px; padding:20px; }
  ol.langkah li::before { content:counter(n); display:inline-flex; width:30px; height:30px; border-radius:50%;
    background:var(--hijau); color:#fff; font-weight:800; align-items:center; justify-content:center; margin-bottom:10px; }
  ol.langkah b { display:block; margin-bottom:4px; }
  ol.langkah span { color:var(--redup); font-size:15px; }

  .dua-kolom { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media (max-width:720px) { .dua-kolom { grid-template-columns:1fr; } }
  .daftar-cek { list-style:none; padding:0; margin:0; }
  .daftar-cek li { padding:9px 0; border-bottom:1px solid var(--garis); }
  .daftar-cek li:last-child { border-bottom:0; }

  details { background:#fff; border:1px solid var(--garis); border-radius:12px; padding:14px 18px; margin-bottom:10px; }
  summary { cursor:pointer; font-weight:700; list-style:none; position:relative; padding-right:26px; }
  summary::-webkit-details-marker { display:none; }
  summary::after { content:"+"; position:absolute; right:0; top:-2px; font-size:22px; color:var(--hijau); }
  details[open] summary::after { content:"−"; }
  details p { margin:10px 0 0; color:var(--redup); }

  .ajakan { background:var(--hijau); color:#fff; border-radius:16px; padding:32px 24px; text-align:center; }
  .ajakan h2 { color:#fff; }
  .ajakan p { color:#d6ebe7; margin:0 0 20px; }
  .ajakan .tombol { background:#fff; color:var(--hijau); }
  .ajakan .tombol:hover { background:var(--hijau-muda); }

  footer { padding:28px 0 40px; color:var(--redup); font-size:14px; }
  footer p { margin:6px 0; }

  nav.menu a.aktif { color:var(--hijau); font-weight:700; }
  @media (max-width:760px) { nav.menu a:not(.tombol) { display:none; } }
  .remah { font-size:14px; color:var(--redup); margin:18px 0 0; }
  .remah a { color:var(--redup); }
  .artikel { max-width:760px; }
  .artikel h1 { font-size:clamp(26px,4vw,38px); line-height:1.25; margin:14px 0 12px; letter-spacing:-.4px; }
  .artikel h2 { font-size:clamp(20px,2.8vw,26px); margin:34px 0 8px; }
  .artikel h3 { font-size:18px; margin:22px 0 6px; }
  .artikel p, .artikel li { font-size:17px; }
  form.kontak-form { display:grid; gap:14px; margin:22px 0; max-width:560px; }
  form.kontak-form label { display:grid; gap:6px; font-weight:600; font-size:15px; }
  form.kontak-form input, form.kontak-form textarea { font:inherit; font-size:16px; padding:11px 12px; border:1px solid #c9d3cc; border-radius:10px; background:#fff; color:#1b2420; width:100%; box-sizing:border-box; }
  form.kontak-form textarea { min-height:150px; resize:vertical; }
  form.kontak-form .opsional { font-weight:400; color:var(--redup); }
  form.kontak-form .jebakan { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  form.kontak-form button { justify-self:start; border:0; cursor:pointer; }
  form.kontak-form button[disabled] { opacity:.6; cursor:wait; }
  .info-kirim { padding:12px 14px; border-radius:10px; font-size:16px; }
  .info-kirim.ok { background:#e7f4ec; color:#1d5b36; }
  .info-kirim.galat { background:#fbeaea; color:#8a2323; }
  .artikel ul, .artikel ol { padding-left:22px; }
  .artikel li { margin:6px 0; }
  .meta { color:var(--redup); font-size:14px; margin:0 0 20px; }
  .catatan { background:var(--hijau-muda); border-left:4px solid var(--hijau); border-radius:8px; padding:14px 18px; margin:20px 0; }
  .catatan p { margin:0; }
  table.data { border-collapse:collapse; width:100%; margin:14px 0; font-size:15px; background:#fff; }
  table.data th, table.data td { border:1px solid var(--garis); padding:9px 11px; text-align:left; vertical-align:top; }
  table.data th { background:var(--hijau-muda); }
  .tabel-gulir { overflow-x:auto; }
  .grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
  .kartu a.judul { color:var(--teks); text-decoration:none; font-weight:700; font-size:18px; }
  .kartu a.judul:hover { color:var(--hijau); }
  .kartu p.kecil { color:var(--redup); font-size:15px; margin:8px 0 0; }
  .kontak a { font-weight:700; }
  footer .kolom { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-bottom:18px; }
  footer h3 { font-size:15px; margin:0 0 6px; color:var(--teks); }
  footer ul { list-style:none; padding:0; margin:0; }
  footer li { margin:4px 0; }
  footer a { color:var(--redup); }