/* ==========================================================================
   JPG ke PDF — main.css
   Sistem desain: token, reset, tipografi dasar, primitif layout.
   Tema: "Ruang Dokumen" — permukaan sejuk terang, aksi indigo tegas,
   navy dalam sebagai tinta, hijau untuk status selesai, magenta aksen.
   ========================================================================== */

/* ---------- Token desain ---------- */
:root {
  /* Palet brand */
  --indigo: #575DC7;        /* aksi utama */
  --indigo-deep: #454BB0;   /* ditekan / tautan */
  --indigo-soft: #ECEDFB;   /* permukaan tint indigo */
  --navy: #051A7F;          /* tinta judul / heading */
  --navy-700: #0B2494;
  --green: #2EBD59;         /* status berhasil */
  --green-deep: #23A24A;
  --green-soft: #E4F7EA;
  --magenta: #F748CD;       /* aksen sorot */
  --magenta-soft: #FEEAF9;
  --white: #FFFFFF;
  --off: #F7F8FC;           /* latar halaman */

  /* Skala navy / abu */
  --ink: #0A1230;           /* tinta hampir hitam kebiruan */
  --slate-900: #0E1633;
  --slate-800: #182046;     /* permukaan gelap */
  --slate-700: #333B5C;
  --slate-500: #5B637F;     /* teks tubuh redup */
  --slate-400: #868DA6;
  --slate-200: #E1E4F0;     /* garis batas */
  --slate-100: #EEF0F8;     /* isian halus */

  /* Penetapan semantik */
  --bg-page: var(--off);
  --bg-surface: var(--white);
  --bg-dark: var(--slate-900);
  --text-body: var(--slate-700);
  --text-heading: var(--navy);
  --text-muted: var(--slate-500);
  --text-on-dark: #C9CFEA;
  --accent: var(--indigo);
  --link: var(--indigo-deep);
  --link-hover: var(--navy);
  --border: var(--slate-200);
  --success: var(--green-deep);
  --error: #D92D20;

  /* Keluarga font */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Skala tipe fluida */
  --fs-hero: clamp(1.95rem, 1.35rem + 2.1vw, 2.95rem);
  --fs-h1: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  --fs-h3: clamp(1.18rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-h4: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-lead: clamp(1rem, 0.96rem + 0.35vw, 1.15rem);

  /* Skala tipe artikel (pos tunggal) — sedang, nyaman dibaca */
  --fs-post-h1: clamp(1.65rem, 1.25rem + 1.4vw, 2.25rem);
  --fs-post-h2: clamp(1.3rem, 1.12rem + 0.6vw, 1.55rem);
  --fs-post-h3: clamp(1.08rem, 1rem + 0.35vw, 1.22rem);
  --fs-post-body: 1.05rem;

  /* Skala spasi */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Bayangan (nada dingin) */
  --shadow-sm: 0 1px 2px rgba(10, 18, 48, 0.05), 0 1px 3px rgba(10, 18, 48, 0.07);
  --shadow-md: 0 6px 20px rgba(10, 18, 48, 0.08), 0 2px 6px rgba(10, 18, 48, 0.05);
  --shadow-lg: 0 24px 50px rgba(10, 18, 48, 0.14), 0 8px 16px rgba(10, 18, 48, 0.08);
  --shadow-indigo: 0 12px 30px rgba(87, 93, 199, 0.32);

  /* Layout */
  --container: 1180px;
  --container-narrow: 780px;
  --header-h: 72px;

  /* Gerak */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.25rem);
}

[id] { scroll-margin-top: calc(var(--header-h) + 1.25rem); }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

a { color: var(--link); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--link-hover); }

ul, ol { list-style: none; padding: 0; }

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

/* ---------- Tipografi dasar ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

strong, b { font-weight: 700; color: var(--text-heading); }

.kw { color: var(--indigo-deep); font-weight: 700; }

/* ---------- Aksesibilitas ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -120%);
  background: var(--navy);
  color: var(--white);
  padding: 0.6rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 1000;
  font-weight: 600;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--white); }

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

/* ---------- Primitif layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-7); }
.section--dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  position: relative;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }

.text-center { text-align: center; }

main { flex: 1 0 auto; display: block; }

/* ---------- Kepala seksi ---------- */
.section-head { margin-bottom: var(--space-7); max-width: 60ch; }
.section-head--center { margin-inline: auto; text-align: center; }

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--indigo-deep);
  background: var(--indigo-soft);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.section--dark .section-eyebrow {
  color: #C4C8FF;
  background: rgba(87, 93, 199, 0.22);
}

.section-title { font-size: var(--fs-h2); margin-bottom: var(--space-4); }
.section-intro {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  line-height: 1.6;
}
.section--dark .section-intro { color: var(--text-on-dark); }

/* ---------- Skema seleksi ---------- */
::selection { background: var(--indigo); color: var(--white); }

/* ---------- Reveal sekali jalan ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}