/* ═══════════════════════════════════════════════════════════
   base.css — Reset, variabel, tipografi global
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── Warna dasar ──────────────────────────────────── */
  --bg: #FDF6F2;
  --bg-alt: #FBEFE8;
  --bg-warm: #EFE4DD;          /* panel media modal, fallback gambar */
  /* Dark section (Kontak + Footer): rose-brown — menyatu dengan brand
     rose. Sebelumnya #2A1714 (brown murni, hue 13°) terasa tidak sekeluarga
     dengan brand rose (hue 355°). #301C24 hue 341° — dekat brand. */
  --bg-dark: #301C24;
  --ink: #2C1A18;
  --ink-muted: #7A5E58;

  /* ─── Teks & garis di atas dark section ─────────────── */
  --ink-on-dark: rgba(255,255,255,.78);
  --ink-on-dark-muted: rgba(255,255,255,.55);
  --line-on-dark: rgba(255,255,255,.12);
  --brand-on-dark: #F4D5DC;   /* = --brand-soft — aksen rose di dark bg */

  /* ─── Brand ─────────────────────────────────────────── */
  --brand: #C9566E;
  --brand-light: #D5607A;      /* gradient hover tombol modal */
  --brand-dark: #A03852;
  --brand-soft: #F4D5DC;
  --accent: #E5B769;

  /* ─── Permukaan & garis ─────────────────────────────── */
  --card: #FFFFFF;
  --line: #EEDDD3;
  --ok: #4D8B5F;
  --warn: #C0472B;

  /* ─── Mockup (halaman cara-update) ──────────────────── */
  --mock-head: #FDF1EC;        /* header tabel sheet */
  --mock-edit: #FFF7E8;        /* sel sedang diedit */
  --mock-dot: #DCC8BE;         /* titik window netral */
  --mock-dot-r: #E89AA6;
  --mock-dot-y: #E5B769;
  --mock-dot-g: #9BC4A6;

  /* ─── Skeleton shimmer ──────────────────────────────── */
  --skel-a: #EFE4DD;
  --skel-b: #F6ECE6;

  /* ─── Status pesan error ────────────────────────────── */
  --warn-soft: #F0B8AA;        /* border pesan error */
  --warn-bg: #FDF2EE;          /* latar pesan error */

  /* ─── Bayangan ──────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(44,26,24,.06);
  --shadow-md: 0 12px 32px -12px rgba(160,56,82,.22);
  --shadow-lg: 0 24px 60px -20px rgba(44,26,24,.25);

  /* ─── Bentuk & ukuran ───────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --maxw: 1200px;

  /* ─── Tipografi ─────────────────────────────────────── */
  --font-serif: Georgia, 'Times New Roman', 'Iowan Old Style', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  color-scheme: only light;
  /* Offset untuk anchor scroll supaya navbar sticky (76px) tidak menutupi
     heading target. Extra 16px untuk napas visual. */
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ─── Util ──────────────────────────────────────────────── */
[hidden] { display: none !important; }

/* ─── Scroll reveal ─────────────────────────────────────── */
/* Section muncul halus saat masuk viewport. Dijalankan via
   IntersectionObserver di app.js. Kalau JS mati, `data-reveal`
   tidak akan menyembunyikan konten — fallback aman. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity .7s cubic-bezier(.2,.7,.3,1),
      transform .7s cubic-bezier(.2,.7,.3,1);
    will-change: opacity, transform;
  }
  html.js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

/* ─── Responsive polish — global ────────────────────────── */
@media (max-width: 640px) {
  .container { padding: 0 20px; }
}