/* =========================================================
   theme.css — design tokens, reset, utilitas, tombol
   ========================================================= */
:root {
  /* Palet bersih: hijau logo dan putih dominan; navy hanya aksen kecil */
  --primary: #2f7d20;        /* Hijau utama (tombol, ikon, tautan) */
  --primary-dark: #14401a;   /* Hijau tua (dasar hero, teks di atas hijau muda pada mode gelap) */
  --secondary: #2a7320;      /* hijau teks kecil di atas putih/hijau muda */
  --accent: #6cbd44;         /* Hijau logo: CTA, garis bawah, highlight */
  --accent-light: #a9de8a;
  --navy: #212265;           /* Navy logo: aksen kecil saja */
  --tint: #f1f8ec;           /* Hijau sangat muda: latar bagian */
  --tint-2: #e3f1d8;
  --announce-bg: #2f7d20;
  --background: #ffffff;
  --surface: #ffffff;
  --text: #17231b;
  --text-muted: #506055;
  --border: rgba(30, 90, 26, .15);
  --focus: #1d5a1a;

  --on-accent: #123d17;
  --glass: rgba(255, 255, 255, .84);
  --glass-solid: rgba(255, 255, 255, .97);
  --shadow-sm: 0 1px 2px rgba(20, 64, 26, .06), 0 6px 16px rgba(20, 64, 26, .07);
  --shadow-md: 0 18px 40px rgba(20, 64, 26, .16);

  /* Bentuk & tipografi */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --gutter: clamp(16px, 4vw, 32px);
  --container: 1240px;

  /* Ukuran header (disesuaikan di responsive.css & state compact) */
  --announce-h: 36px;
  --nav-h: 68px;
  --hero-top: 112px;

  color-scheme: light;
}

[data-theme="dark"] {
  --primary: #7fcb57;
  --primary-dark: #07150a;
  --secondary: #6cbd44;
  --accent: #6cbd44;
  --accent-light: #a9de8a;
  --navy: #212265;
  --tint: #102411;
  --tint-2: #163218;
  --announce-bg: #14401a;
  --background: #0a150b;
  --surface: #102012;
  --text: #eaf3e7;
  --text-muted: #a4b8a2;
  --border: rgba(255, 255, 255, .13);
  --focus: #a9de8a;

  --glass: rgba(10, 21, 11, .76);
  --glass-solid: rgba(10, 21, 11, .97);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .25);
  --shadow-md: 0 18px 40px rgba(0, 0, 0, .5);

  color-scheme: dark;
}

/* Transisi tema hanya saat toggle (class ditambah sebentar oleh theme.js) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}

/* Reset ringan */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--background);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-menu-open,
body.is-modal-open { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
/* Di atas latar gelap (hero, announcement, navbar transparan) cincin fokus putih */
.hero, .announce, .site-header[data-scrolled="false"][data-mega="closed"] { --focus: #fff; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

/* Ikon */
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic use { pointer-events: none; }

/* Aksesibilitas */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 400;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent); font-weight: 600;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* Tombol */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 14px;
  font-weight: 600; font-size: .9375rem; line-height: 1; white-space: nowrap;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, border-color .25s, color .25s;
}
.btn .btn__arrow { transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--accent {
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 8px 20px rgba(108, 189, 68, .28);
}
.btn--accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(108, 189, 68, .38), 0 0 0 4px rgba(108, 189, 68, .16);
}
.btn--accent:active { transform: translateY(0); }
.btn--accent:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--accent:disabled:hover .btn__arrow { transform: none; }

.btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; background: rgba(255, 255, 255, .04); }
.btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

.btn--outline { border-color: var(--border); color: var(--text); background: transparent; }
.btn--outline:hover { border-color: var(--accent); }

.btn--sm { min-height: 44px; padding: 0 18px; border-radius: 12px; }
.btn--lg { min-height: 56px; padding: 0 30px; border-radius: 16px; font-size: 1rem; }
.btn--block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}