/*
 * Token identitas visual, diambil dari logo Digdaya (merah "i" dan charcoal "D").
 * Warna ditulis sebagai "R G B" agar bisa dipakai Tailwind dengan opasitas (mis. bg-brand/10).
 */
:root {
  --brand: 184 37 40;        /* #B82528 merah logo */
  --brand-dark: 152 28 31;   /* #981C1F hover */
  --brand-light: 232 92 88;  /* #E85C58 aksen di latar gelap */
  --brand-soft: 251 236 236; /* #FBECEC latar lembut */
  --charcoal: 51 54 63;      /* #33363F charcoal logo */
  --ink: 27 29 35;           /* #1B1D23 judul */
  --body: 82 86 97;          /* #525661 teks */
  --muted: 112 116 127;      /* #70747F teks sekunder */
  --line: 230 231 235;       /* #E6E7EB garis */
  --surface: 244 245 247;    /* #F4F5F7 kartu */
  --night: 22 24 30;         /* #16181E seksi gelap, footer */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Montserrat", "Inter", system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
a[href], button, label, select, summary, [role="button"] { cursor: pointer; }
h1, h2, h3 { text-wrap: balance; }

.container-x { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .container-x { padding-inline: 2rem; } }
@media (min-width: 1024px) { .container-x { padding-inline: 3rem; } }

/* Wordmark besar di footer */
.footer-word {
  font-size: clamp(4.5rem, 19vw, 17rem);
  color: transparent;
  -webkit-text-stroke: 1px rgb(255 255 255 / .12);
  margin-bottom: -0.12em;
}

/* Menu seluler: menimpa konten di bawah header, muncul dengan geser + pudar */
.mobile-nav {
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s;
}
.mobile-nav.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s;
}
[data-nav-toggle] svg { transition: transform .3s ease; }
[data-nav-toggle][aria-expanded="true"] svg { transform: rotate(90deg); }

[data-header].is-scrolled { box-shadow: 0 1px 0 rgb(var(--line)); }
[data-toc-link].is-active { background: rgb(var(--ink)); color: #fff; }

/* Animasi masuk */
.hero-in { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-in:nth-child(2) { animation-delay: .08s; }
.hero-in:nth-child(3) { animation-delay: .16s; }
.hero-in:nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}