:root { --hijau:#10B981; --gelap:#064E3B; --abu:#6B7280; --garis:#E5E7EB; --bg:#F9FAFB; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; color:#111827; background:var(--bg); line-height:1.7; }
header { background:var(--hijau); color:#fff; padding:28px 20px; }
.wrap { max-width:820px; margin:0 auto; padding:0 20px; }
header .wrap { padding:0; }
h1 { margin:0 0 6px; font-size:25px; font-weight:800; }
header p { margin:0; opacity:.92; font-size:14px; }
nav { background:#fff; border-bottom:1px solid var(--garis); padding:12px 0; }
nav a { color:var(--gelap); text-decoration:none; font-size:13px; font-weight:600; margin-right:16px; white-space:nowrap; display:inline-block; margin-bottom:4px; }
nav a:hover { text-decoration:underline; }
main { padding:30px 0 60px; }
h2 { font-size:18px; margin:30px 0 10px; color:var(--gelap); }
h3 { font-size:15px; margin:20px 0 8px; }
li { margin-bottom:8px; }
.info { background:#ECFDF5; border:1px solid #A7F3D0; border-radius:12px; padding:16px; margin:20px 0; }
.perhatian { background:#FEF3C7; border:1px solid #FDE68A; border-radius:12px; padding:16px; margin:20px 0; }
.tanggal { color:var(--abu); font-size:13px; }
footer { background:#fff; border-top:1px solid var(--garis); padding:26px 0; font-size:13px; color:var(--abu); }
footer a { color:var(--gelap); }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--garis); margin:14px 0; }
th, td { text-align:left; padding:11px 13px; border-bottom:1px solid var(--garis); font-size:14px; vertical-align:top; }
th { background:#F3F4F6; font-weight:700; }
.tombol { display:inline-block; background:var(--hijau); color:#fff; text-decoration:none; padding:13px 22px; border-radius:12px; font-weight:700; }

/* ==========================================
   🆕 BILAH MEREK — logo + menu dalam satu baris.
   Logo diberi ukuran tetap lewat atribut width/height di HTML supaya ruangnya
   sudah dipesan sebelum gambarnya selesai dimuat; tanpa itu isi halaman
   melompat saat logo muncul, dan lompatan itu yang membuat sebuah situs
   terasa "belum jadi".
   ========================================== */
nav .wrap { display:flex; align-items:center; flex-wrap:wrap; gap:4px 18px; }
nav .merek { display:inline-flex; align-items:center; margin-right:8px; }
nav .merek img { display:block; height:36px; width:auto; }
nav a { margin-right:0; }

@media (max-width:560px) {
  nav .wrap { gap:4px 12px; }
  nav .merek { flex-basis:100%; margin-bottom:4px; }
  nav .merek img { height:30px; }
}