/* ═══════════════════════════════════════════════════════════════════════
   Gaya bersama untuk halaman dokumen: privasi.html dan ketentuan.html.

   KENAPA BERKAS TERPISAH, padahal index.html sengaja mandiri penuh.
   Halaman depan mandiri karena ia satu-satunya dan harus ringan pada kesan
   pertama. Dokumen ada DUA dan gayanya sama persis; menyalin seratus baris
   CSS dua kali berarti dua tempat yang bisa berbeda diam-diam. Satu berkas
   dibaca dua halaman lebih jujur daripada dua salinan yang mengaku kembar.

   Warnanya diambil dari index.html, bukan dikarang ulang, supaya ketiga
   halaman terasa satu situs.

   Halaman ini SENGAJA satu tema gelap saja, sama seperti halaman depan.
   Karena itu tiap warna dicat tegas — tidak ada yang meminjam latar
   peramban.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --tinta: #1c1a22;
  --tinta-2: #15141a;
  --emas: #dbbd77;
  --taupe: #8b7355;
  --teks: #f0ece4;
  --teks-lembut: #a9a2b4;
  --garis: rgba(240, 236, 228, 0.14);

  --lebar: 44rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tinta-2);
  color: var(--teks);
  font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.isi {
  max-width: var(--lebar);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Kepala ───────────────────────────────────────────────────────────── */

header {
  border-bottom: 1px solid var(--garis);
}
header .baris {
  max-width: var(--lebar);
  margin: 0 auto;
  padding: clamp(1.1rem, 3vw, 1.6rem) var(--gutter);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.namamerek {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--teks);
  text-decoration: none;
}
.namamerek em { font-style: normal; color: var(--emas); }
header .lain {
  font-size: 0.85rem;
  color: var(--taupe);
}
header .lain a { color: var(--teks-lembut); text-decoration: none; }
header .lain a:hover { color: var(--emas); text-decoration: underline; }

/* ── Isi dokumen ──────────────────────────────────────────────────────── */

main { padding: clamp(2.5rem, 7vh, 4.5rem) 0 clamp(3rem, 8vh, 5rem); }

h1 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0 0 0.9rem;
}

.tanggal {
  margin: 0 0 2rem;
  font-size: 0.85rem;
  color: var(--taupe);
}

/* Keterangan jujur di kepala dokumen. Ditaruh menonjol, bukan disembunyikan
   di kaki halaman: pembaca berhak tahu status naskah ini sebelum membacanya,
   bukan sesudah. */
.catatan {
  margin: 0 0 2.75rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(219, 189, 119, 0.42);
  border-radius: 0.75rem;
  background: rgba(219, 189, 119, 0.09);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--teks-lembut);
}
.catatan strong { color: var(--emas); font-weight: 600; }

h2 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--emas);
  margin: 2.75rem 0 0.75rem;
  text-wrap: balance;
}

p { margin: 0 0 1.1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

main strong { color: var(--teks); font-weight: 600; }

a { color: var(--emas); }
a:hover { text-decoration: underline; }

.hubungi {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--garis);
  font-size: 0.95rem;
  color: var(--teks-lembut);
}

/* ── Kaki ─────────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--garis);
  padding: clamp(1.75rem, 5vh, 2.5rem) 0;
  color: var(--taupe);
  font-size: 0.85rem;
}
footer .baris {
  max-width: var(--lebar);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
}
footer a { color: var(--teks-lembut); text-decoration: none; }
footer a:hover { color: var(--emas); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--emas);
  outline-offset: 3px;
  border-radius: 2px;
}