/* Gaya bersama untuk halaman statis (tentang, kontak, privasi, dll). */
:root {
  --bg:#f2f5f3; --surface:#fff; --surface-2:#eef2ef; --line:#dbe3de;
  --ink:#15211c; --ink-soft:#5b6b64; --accent:#0e7c5a; --accent-ink:#fff;
  --accent-bg:#e4f1ea; --radius:14px; --logo-bg:transparent;
  --shadow:0 1px 2px rgba(21,33,28,.06), 0 8px 24px -16px rgba(21,33,28,.28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#101614; --surface:#18211e; --surface-2:#1f2a26; --line:#2c3a34;
    --ink:#e8efeb; --ink-soft:#9aaaa3; --accent:#35c48d; --accent-ink:#06120d;
    --accent-bg:#163024; --logo-bg:#fff;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 16px/1.7 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  padding-inline: 16px; padding-block: 28px 56px;
}
.wrap { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 22px; }
a { color: var(--accent); }
h1 { font-size: clamp(26px, 4.4vw, 34px); line-height: 1.2; letter-spacing: -.015em; margin: 0; }
h2 { font-size: 20px; margin: 26px 0 0; letter-spacing: -.01em; }
p, li { color: var(--ink-soft); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; background: var(--logo-bg); border-radius: 10px; padding: 4px 8px; }
.brand img { height: 34px; width: auto; display: block; }
.back { color: var(--ink-soft); text-decoration: none; font-size: 14px; }
.back:hover { color: var(--accent); }
.content {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(20px, 4vw, 36px);
}
.content > *:first-child { margin-top: 0; }
.content ul { padding-left: 20px; }
.content li { margin-bottom: 8px; }
.updated { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

/* Footer (samakan dengan beranda) */
.site-footer { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 30px; display: flex; flex-direction: column; gap: 26px; }
.footer-cols { display: grid; gap: 26px 20px; grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 320px; }
.footer-brand .brand { align-self: flex-start; }
.footer-brand p { font-size: 14px; }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); margin: 0 0 14px; font-weight: 700; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--ink-soft); text-decoration: none; font-size: 14px; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 18px; color: var(--ink-soft); font-size: 13px; }
@media (max-width: 720px) { .footer-cols { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 440px) { .footer-cols { grid-template-columns: 1fr; } }