/* Hallmark · shape: Long Document (swap from Manifesto: the brief is a guide with overview, checklist and FAQ) · genre: editorial · theme: Studio (deal 3/3, seed creativeenhance-portal-kreativitas-digital-74c6·f7ae0195·2026-11-12·r0) · job: visit (the portal behind the CTA link) · draw: e449e1
 * hero: Stage (swap from Corridor: hero.svg is required by the brief) · nav: edge-aligned, wordmark, six section links with an active marker, one outlined action · footer: letter close · imagery: diagrams 4 (by request, labelled), no photographs · signature: the portal drawn as a construction sheet, each area numbered to its section
 * axes: light/roman-serif/red · posture: committed (red field on the hero and the close; red rules and the active marker elsewhere; the action is ink) · recolour: Studio's orange swapped for a dominant red by request · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E4 S3 R4 V4 · weakest: S, a portal brief with no product facts; every diagram is numbered to the section it explains so the page reads as one map */
/* Hallmark · dismissed 58 · 600 words page-wide is the brief's own requirement (overview, three guide sections, checklist, six FAQ); every 900px window holds 84 words at most once the owner-only config box is gone (it adds about 50 words at the top until the placeholders are replaced) */

/* ==========================================================================
   CREATIVEENHANCE, style.css
   Konsep: "lembar proof konstruksi" dengan merah sebagai warna dominan.
   Hero dan seksi penutup berupa bidang merah bergrid titik; garis
   konstruksi dan penanda aktif juga merah. Tombol utama berwarna tinta
   gelap supaya kontras di atas merah maupun di atas kertas. Crop mark
   ada di sudut setiap benda cetak (gambar, tombol).

   Cara edit:
   - Ganti warna & font HANYA di blok :root di bawah (token).
   - Setelah mengubah file ini, naikkan ?v=1 menjadi ?v=2 di index.html.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKEN (warna, font, jarak, ukuran)
   Palet utama 3 warna: kertas, tinta, merah. Sisanya turunan (tint) dari
   ketiganya. Mau ganti warna dominan? Ubah --color-accent dan --color-field-2. --color-warn hanya dipakai kotak pemeriksa konfigurasi.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Warna utama */
  --color-paper: oklch(97.5% 0.008 25);    /* kertas, latar */
  --color-ink: oklch(18% 0.03 25);         /* tinta, teks dan tombol utama */
  --color-accent: oklch(52% 0.2 27);       /* MERAH dominan: bidang hero & penutup, garis, penanda */

  /* Bidang merah (hero dan penutup): sama dengan --color-accent */
  --color-field: var(--color-accent);
  --color-field-2: oklch(44% 0.18 27);     /* merah lebih gelap: hover di atas bidang merah */
  --color-on-field: oklch(97.5% 0.008 25); /* teks di atas merah (kontras 5,7:1) */
  --color-accent-ink: var(--color-on-field); /* teks bila merah dipakai sebagai isian */

  /* Turunan */
  --color-paper-2: oklch(94.5% 0.014 22);
  --color-paper-3: oklch(91% 0.02 22);
  --color-paper-hi: oklch(99% 0.004 25);
  --color-ink-2: oklch(34% 0.03 25);
  --color-muted: oklch(48% 0.025 25);
  --color-rule: oklch(85% 0.015 25);
  --color-focus: oklch(45% 0.19 27);       /* cincin fokus di atas kertas */
  --color-dot: color-mix(in oklab, var(--color-ink) 18%, transparent);
  --color-dot-on-field: color-mix(in oklab, var(--color-paper) 26%, transparent);
  --color-mark: color-mix(in oklab, var(--color-ink) 72%, transparent);
  --color-mark-on-field: color-mix(in oklab, var(--color-paper) 80%, transparent);

  /* Khusus kotak pemeriksa konfigurasi (kuning) */
  --color-warn: oklch(93% 0.11 95);
  --color-warn-edge: oklch(62% 0.13 85);

  /* Font: satu font display dari Google Fonts, sisanya font sistem */
  --font-display: "Hedvig Letters Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* Jarak */
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;

  /* Ukuran teks */
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem;
  --text-display: clamp(2.5rem, 3.4vw + 1rem, 4.5rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem);
  --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem);
  --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);

  /* Gerak */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;

  /* Tata letak */
  --container: 1440px; --gutter: 64px; --gap-columns: 32px;
  --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --header-h: 72px;

  /* Lapisan (z-index) */
  --z-raised: 10; --z-sticky: 200; --z-sticky-nav: 300; --z-toast: 500;

  /* Bentuk */
  --radius-card: 3px; --radius-control: 2px; --rule-hair: 1px;
  --tracking-display: -0.022em;
}

@media (max-width: 60rem) {
  :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; --header-h: 64px; }
}
@media (max-width: 40rem) {
  :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; }
}


/* --------------------------------------------------------------------------
   2. DASAR
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }   /* cegah scroll horizontal tanpa merusak sticky */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-md));
  scrollbar-color: var(--color-muted) var(--color-paper);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  caret-color: var(--color-accent);
  -webkit-font-smoothing: antialiased;
}
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { text-decoration-color: var(--color-accent); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: var(--tracking-display);
  line-height: 1.04;
  color: var(--color-ink);
  overflow-wrap: break-word;
  min-width: 0;
  text-wrap: balance;
}
h1 { max-width: 16ch; font-size: var(--text-display); line-height: 1.02; }
h2 { max-width: 22ch; font-size: var(--text-section); }
h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.005em; }

p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 46ch; color: var(--color-ink-2); }

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Skip link: muncul saat difokus dengan Tab */
.skip {
  position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper);
}
.skip:focus-visible { top: var(--space-md); }


/* --------------------------------------------------------------------------
   3. MATERIAL: kertas proof bergrid titik & crop mark
   -------------------------------------------------------------------------- */
.proof {
  background-color: var(--color-paper);
  background-image: radial-gradient(circle at 1px 1px, var(--color-dot) 1px, transparent 1.4px);
  background-size: 24px 24px;
}

/* Crop mark: delapan garis tipis di luar sudut sebuah benda cetak */
.crop { position: relative; --l: 10px; --o: 14px; }
.crop::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--o));
  pointer-events: none;
  --m: linear-gradient(var(--color-mark), var(--color-mark));
  background:
    var(--m) left 0 top var(--o) / var(--l) 1px no-repeat,
    var(--m) left var(--o) top 0 / 1px var(--l) no-repeat,
    var(--m) right 0 top var(--o) / var(--l) 1px no-repeat,
    var(--m) right var(--o) top 0 / 1px var(--l) no-repeat,
    var(--m) left 0 bottom var(--o) / var(--l) 1px no-repeat,
    var(--m) left var(--o) bottom 0 / 1px var(--l) no-repeat,
    var(--m) right 0 bottom var(--o) / var(--l) 1px no-repeat,
    var(--m) right var(--o) bottom 0 / 1px var(--l) no-repeat;
}


/* --------------------------------------------------------------------------
   4. TOMBOL (tombol cetak: garis tinta + garis dalam, crop mark membuka saat hover)
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-lg);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-control);
  background: var(--color-paper-hi);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
/* garis kedua di dalam tombol */
.btn::after {
  content: "";
  position: absolute;
  inset: var(--space-3xs);
  border: var(--rule-hair) solid var(--color-mark);
  border-radius: 1px;
  pointer-events: none;
}
.btn:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Tombol utama: isian tinta gelap, kontras di atas merah dan di atas kertas */
.btn--primary { background: var(--color-ink); color: var(--color-paper); }
.btn--primary::after { border-color: color-mix(in oklab, var(--color-paper) 45%, transparent); }
.btn--primary:hover { background: var(--color-ink-2); }

/* Tombol sekunder */
.btn--quiet { background: transparent; }
.btn--quiet::after { border-color: transparent; }
.btn--quiet:hover { background: var(--color-paper-2); }


/* --------------------------------------------------------------------------
   5. HEADER & NAVIGASI
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.brand img { width: 200px; height: auto; }

.site-nav { display: flex; align-items: center; gap: var(--space-lg); }
.site-nav__list { display: flex; align-items: center; gap: var(--space-md); }
.site-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.site-nav__list a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
/* Penanda seksi aktif (diatur main.js): garis merah di bawah tautan */
.site-nav__list a[aria-current="true"] {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.25em;
}
.site-nav__cta { min-height: 44px; font-size: var(--text-sm); }

/* Tombol menu: hanya tampil di layar kecil dan hanya kalau JS aktif */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-control);
  background: var(--color-paper-hi);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.menu-toggle:hover { background: var(--color-paper-2); }
.menu-toggle:active { transform: translateY(1px); }
.menu-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@media (max-width: 60rem) {
  .brand img { width: 168px; }

  /* Dengan JS: menu panel yang bisa dibuka-tutup */
  .js .menu-toggle { display: inline-flex; }
  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    padding: var(--space-md) var(--gutter) var(--space-lg);
    background: var(--color-paper);
    border-bottom: var(--rule-hair) solid var(--color-ink);
  }
  .js .site-header[data-menu="open"] .site-nav { display: flex; }
  .js .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .js .site-nav__list a {
    display: flex;
    min-height: 48px;
    font-size: var(--text-md);
    border-bottom: var(--rule-hair) solid var(--color-rule);
  }
  .js .site-nav__cta { min-height: 48px; }

  /* Tanpa JS: tautan menjadi baris yang bisa digeser di bawah logo */
  .no-js .site-header__bar { flex-wrap: wrap; row-gap: 0; padding-block: var(--space-xs); }
  .no-js .site-nav { width: 100%; overflow-x: auto; }
  .no-js .site-nav__cta { display: none; }
}


/* --------------------------------------------------------------------------
   6. HERO (Stage: teks 5 kolom, diagram 7 kolom, strip lompat di kakinya)
   Bidang merah bergrid titik; teks berwarna kertas.
   -------------------------------------------------------------------------- */
.hero.proof {
  background-color: var(--color-field);
  background-image: radial-gradient(circle at 1px 1px, var(--color-dot-on-field) 1px, transparent 1.4px);
  --color-mark: var(--color-mark-on-field);   /* crop mark berwarna terang di atas merah */
}
.hero h1, .hero .lead { color: var(--color-on-field); }
.hero .btn:focus-visible { outline-color: var(--color-on-field); }
.hero .btn--quiet { color: var(--color-on-field); border-color: var(--color-on-field); }
.hero .btn--quiet:hover { background: var(--color-field-2); }
.hero {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: calc(100dvh - var(--header-h));
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--space-xl);
}
.hero__copy { display: grid; gap: var(--space-lg); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }

.hero__figure { justify-self: start; }
.hero__figure img {
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - var(--header-h) - 240px);
  min-height: 300px;
  object-fit: contain;
}

/* Strip lompat cepat */
.jump { border-top: var(--rule-hair) solid var(--color-ink); background: var(--color-paper); }
.jump__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.jump__list li + li { border-left: var(--rule-hair) solid var(--color-rule); }
.jump__list a {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  min-height: 64px;
  padding: var(--space-md) var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out);
}
.jump__list li:first-child a { padding-left: 0; }
.jump__list a:hover { background: var(--color-paper-2); text-decoration: underline; text-decoration-color: var(--color-accent); }
.jump__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-muted); }

@media (max-width: 60rem) {
  .hero { min-height: 0; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }
  .hero__figure { justify-self: stretch; margin-inline: var(--space-sm); }
  .hero__figure img { width: 100%; max-height: none; min-height: 0; }
  .jump__list { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 0; }
  .jump__list li { border-bottom: var(--rule-hair) solid var(--color-rule); }
  .jump__list li + li { border-left: 0; }
  .jump__list li:not(:nth-child(3n + 1)) { border-left: var(--rule-hair) solid var(--color-rule); }
  .jump__list a, .jump__list li:first-child a { min-height: 56px; padding: var(--space-sm) var(--space-md); }
}


/* --------------------------------------------------------------------------
   7. SEKSI UMUM
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section-gap); }
.section--overview { padding-block: var(--section-gap) var(--section-gap); }
.section--web { padding-block: calc(var(--section-gap-l) + var(--space-xl)) var(--section-gap); }
.section--play { padding-block: var(--section-gap) var(--section-gap-l); }

/* Judul di kiri, satu baris lead di kanan, baseline sejajar */
.head-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  align-items: end;
  margin-bottom: var(--space-2xl);
}
.head-split h2 { grid-column: 1 / 7; }
.head-split .lead { grid-column: 8 / 13; }

@media (max-width: 60rem) {
  .head-split { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); margin-bottom: var(--space-xl); }
  .head-split h2, .head-split .lead { grid-column: 1 / -1; }
}


/* --------------------------------------------------------------------------
   8. 01 IKHTISAR (Rows)
   -------------------------------------------------------------------------- */
.overview__head { grid-column: 1 / 5; display: grid; gap: var(--space-lg); align-content: start; }
.overview__rows { grid-column: 6 / 13; border-top: var(--rule-hair) solid var(--color-ink); }
.rows__item {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  column-gap: var(--gap-columns);
  align-items: baseline;
  padding-block: var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.rows__item dt { font-family: var(--font-display); font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.005em; }
.rows__item dt a { text-decoration-color: var(--color-rule); }
.rows__item dt a:hover { text-decoration-color: var(--color-accent); }
.rows__item dd { color: var(--color-ink-2); max-width: 52ch; }

@media (max-width: 60rem) {
  .overview__head, .overview__rows { grid-column: 1 / -1; }
  .overview__rows { margin-top: var(--space-xl); }
  .rows__item { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xs); padding-block: var(--space-lg); }
}


/* --------------------------------------------------------------------------
   9. 02 KREATIVITAS (Showcase + empat catatan)
   -------------------------------------------------------------------------- */
.showcase { margin-bottom: var(--space-2xl); }
.showcase__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.showcase__scroll:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.showcase__scroll img { width: 100%; }
.showcase__hint { display: none; margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

.notes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  row-gap: var(--space-xl);
}
.notes li { display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink); }
.notes p { color: var(--color-ink-2); }

@media (max-width: 60rem) {
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  /* Diagram lebar tetap terbaca: digeser ke samping di dalam bingkainya */
  .showcase__scroll img { width: 720px; max-width: none; }
  .showcase__hint { display: block; }
  .notes { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   10. 03 TEKNOLOGI WEB (Steps vertikal, diagram ditahan di kanan)
   -------------------------------------------------------------------------- */
.web__copy { grid-column: 1 / 6; display: grid; gap: var(--space-lg); align-content: start; }
.web__figure {
  grid-column: 7 / 13;
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + var(--space-xl));
}
.web__figure img { width: 100%; }

.steps { counter-reset: langkah; margin-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink); }
.steps li {
  counter-increment: langkah;
  display: grid;
  grid-template-columns: var(--space-2xl) minmax(0, 1fr);
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
  padding-block: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.steps li::before {
  content: counter(langkah);
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-size: var(--text-section);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.steps p { color: var(--color-ink-2); }

@media (max-width: 60rem) {
  .web__copy, .web__figure { grid-column: 1 / -1; }
  .web__figure { position: relative; top: auto; margin: var(--space-2xl) var(--space-sm) 0; }
}


/* --------------------------------------------------------------------------
   11. 04 HIBURAN (Table)
   -------------------------------------------------------------------------- */
.play-table { width: 100%; border-collapse: collapse; }
.play-table thead th {
  padding-block: 0 var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  text-align: left;
  white-space: nowrap;
  border-bottom: var(--rule-hair) solid var(--color-ink);
}
.play-table tbody th, .play-table td {
  padding: var(--space-lg) var(--space-md) var(--space-lg) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  text-align: left;
  vertical-align: baseline;
}
.play-table tbody th {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 400;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  width: 30%;
}
.play-table td { color: var(--color-ink-2); }

.law-note {
  max-width: 60ch;
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-accent);
  font-size: var(--text-lead);
  line-height: 1.45;
}

@media (max-width: 40rem) {
  /* Tabel disusun ulang menjadi blok berlabel di ponsel */
  .play-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .play-table, .play-table tbody, .play-table tr, .play-table th, .play-table td { display: block; width: 100%; }
  .play-table tr { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .play-table tbody tr:first-child { border-top: var(--rule-hair) solid var(--color-ink); }
  .play-table tbody th, .play-table td { width: 100%; padding: var(--space-2xs) 0; border: 0; }
  .play-table td::before { content: attr(data-label) ": "; color: var(--color-muted); }
}


/* --------------------------------------------------------------------------
   12. 05 CHECKLIST (band kertas kedua, elemen interaktif)
   -------------------------------------------------------------------------- */
.band { background: var(--color-paper-2); padding-block: var(--section-gap-s); }

.check__intro { grid-column: 1 / 6; display: grid; gap: var(--space-lg); align-content: start; }
.check__figure { margin-top: var(--space-lg); max-width: 400px; }
.check__figure img { width: 100%; }

.checklist { grid-column: 7 / 13; align-self: start; }
.checklist fieldset { margin: 0; padding: 0; border: 0; min-width: 0; counter-reset: dicek; }
.checklist legend {
  padding: 0 0 var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
}
.checklist__list { border-top: var(--rule-hair) solid var(--color-ink); }
.checklist__list li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.checklist__list li:has(input:checked) { counter-increment: dicek; }
.checklist__list label {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 56px;
  padding-block: var(--space-sm);
  cursor: pointer;
}
.checklist__list input {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--color-ink);
  cursor: pointer;
}
.checklist__list input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.checklist__list input:checked + span { color: var(--color-ink-2); text-decoration: line-through; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }

.checklist__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-lg);
  row-gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.checklist__status, .checklist__css-count { font-variant-numeric: tabular-nums; font-weight: 500; }
.checklist__bar {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 6px;
  background: var(--color-paper-3);
  overflow: hidden;
}
.checklist__bar span {
  display: block;
  height: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-short) var(--ease-out);
}

/* Tanpa JS: status JS & bar disembunyikan, penghitung CSS tampil */
.no-js .checklist__status, .no-js .checklist__bar { display: none; }
.checklist__css-count::after { content: counter(dicek) " dari 6 poin dicek"; }
.js .checklist__css-count { display: none; }

@media (max-width: 60rem) {
  .check__intro, .checklist { grid-column: 1 / -1; }
  .checklist { margin-top: var(--space-2xl); }
  .check__figure { margin-inline: var(--space-sm); }
}


/* --------------------------------------------------------------------------
   13. 06 FAQ (details)
   -------------------------------------------------------------------------- */
.faq__head { grid-column: 1 / 5; display: grid; gap: var(--space-lg); align-content: start; }
.faq__list { grid-column: 6 / 13; border-top: var(--rule-hair) solid var(--color-ink); }
.faq__list details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 64px;
  padding-block: var(--space-md);
  cursor: pointer;
  list-style: none;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary h3 { font-size: var(--text-lg); line-height: 1.3; }
/* Tanda plus yang berputar menjadi silang saat dibuka */
.faq__list summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-ink);
  transition: transform var(--dur-short) var(--ease-out);
}
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list summary:hover h3 { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
.faq__list summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq__list details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }
/* Jawaban di details yang tertutup tidak dirender sama sekali (sama seperti perilaku bawaan) */
.faq__list details:not([open]) > p { display: none; }

@media (max-width: 60rem) {
  .faq__head, .faq__list { grid-column: 1 / -1; }
  .faq__list { margin-top: var(--space-xl); }
}


/* --------------------------------------------------------------------------
   14. CTA PENUTUP (bidang merah)
   -------------------------------------------------------------------------- */
.closing { background: var(--color-field); color: var(--color-on-field); padding-block: var(--section-gap-s); }
.closing__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: var(--gap-columns);
  align-items: end;
}
.closing h2 { color: var(--color-on-field); max-width: none; }
.closing__side { display: grid; gap: var(--space-lg); justify-items: start; }
.closing__side p { color: var(--color-on-field); font-size: var(--text-lead); }
.closing .btn:focus-visible { outline-color: var(--color-on-field); }

@media (max-width: 60rem) {
  .closing__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
}


/* --------------------------------------------------------------------------
   15. FOOTER (letter close)
   -------------------------------------------------------------------------- */
.site-footer { padding-block: var(--space-3xl) var(--space-xl); border-top: var(--rule-hair) solid var(--color-ink); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: var(--gap-columns);
  row-gap: var(--space-2xl);
}
.footer__close { font-family: var(--font-display); font-size: var(--text-section); line-height: 1.08; letter-spacing: var(--tracking-display); max-width: 20ch; text-wrap: balance; }
.footer__sign { display: grid; gap: var(--space-sm); align-content: end; justify-items: start; }
.footer__date { font-size: var(--text-sm); color: var(--color-muted); }
.footer__nav ul { display: flex; flex-wrap: wrap; column-gap: var(--space-lg); }
.footer__nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-color: var(--color-rule); }
.footer__nav a:hover { text-decoration-color: var(--color-accent); }
.footer__legal { align-self: center; font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 60rem) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  /* ruang untuk dock CTA mobile */
  .js .site-footer { padding-bottom: var(--space-3xl); }
}


/* --------------------------------------------------------------------------
   16. DOCK CTA MOBILE (diatur main.js)
   -------------------------------------------------------------------------- */
.dock { display: none; }
@media (max-width: 60rem) {
  .js .dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    display: block;
    padding: var(--space-sm) var(--gutter) calc(var(--space-sm) + env(safe-area-inset-bottom));
    background: var(--color-paper);
    border-top: var(--rule-hair) solid var(--color-ink);
    transform: translateY(110%);
    transition: transform var(--dur-short) var(--ease-in);
  }
  .js .dock.is-visible { transform: translateY(0); transition-timing-function: var(--ease-out); }
  .dock .btn { width: 100%; }
}


/* --------------------------------------------------------------------------
   17. KOTAK PEMERIKSA KONFIGURASI (dibuat main.js, hanya muncul kalau ada masalah)
   -------------------------------------------------------------------------- */
.config-check {
  position: fixed;
  top: calc(var(--header-h) + var(--space-sm));
  right: var(--space-md);
  left: auto;
  z-index: var(--z-toast);
  width: min(28rem, calc(100% - 2 * var(--space-md)));
  max-height: calc(100dvh - var(--header-h) - var(--space-2xl));
  overflow-y: auto;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  background: var(--color-warn);
  color: var(--color-ink);
  border: 2px solid var(--color-warn-edge);
  border-radius: var(--radius-card);
  font-size: var(--text-sm);
}
.config-check__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.config-check__title { font-weight: 700; font-size: var(--text-md); }
.config-check__close {
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-sm);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-control);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.config-check__close:hover { background: color-mix(in oklab, var(--color-warn) 80%, var(--color-ink)); }
.config-check__close:active { transform: translateY(1px); }
.config-check__close:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.config-check ul { list-style: disc; padding-left: var(--space-lg); margin-block: var(--space-sm); display: grid; gap: var(--space-2xs); }
.config-check code { font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; }
.config-check__foot { color: var(--color-ink-2); }


/* --------------------------------------------------------------------------
   18. HALAMAN 404
   -------------------------------------------------------------------------- */
.page-404 { min-height: calc(100dvh - var(--header-h)); display: grid; align-content: center; gap: var(--space-lg); padding-block: var(--space-3xl); }


/* --------------------------------------------------------------------------
   19. GERAK DIKURANGI (prefers-reduced-motion)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:active, .menu-toggle:active, .config-check__close:active { transform: none; }
}