/* ============================================================================
   Token Astryx (implementasi CSS custom properties untuk halaman non-React)
   Tema: neutral (default). Semua warna adaptif light/dark via light-dark().
   Tidak ada warna/ukuran mentah di komponen — selalu var(--token).
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- warna: permukaan (body -> surface -> card -> popover) --- */
  --color-background-body:    light-dark(#ffffff, #0b0b0c);
  --color-background-surface: light-dark(#f7f7f8, #131315);
  --color-background-muted:   light-dark(#f1f1f3, #1a1a1d);
  --color-background-card:    light-dark(#ffffff, #17171a);
  --color-background-popover: light-dark(#ffffff, #1f1f23);

  /* --- warna: teks --- */
  --color-text-primary:   light-dark(#17171a, #f5f5f7);
  --color-text-secondary: light-dark(#5c5c66, #a5a5b0);
  --color-text-disabled:  light-dark(#9a9aa5, #6b6b75);
  --color-text-accent:    light-dark(#17171a, #ffffff);

  /* --- warna: aksen (tema neutral = nyaris monokrom) --- */
  --color-accent:        light-dark(#17171a, #f5f5f7);
  --color-accent-muted:  light-dark(#e8e8ec, #232328);
  --color-on-accent:     light-dark(#ffffff, #17171a);

  /* --- warna: garis & ikon --- */
  --color-border:        light-dark(#e4e4e8, #2a2a30);
  --color-border-strong: light-dark(#c9c9d1, #3a3a42);
  --color-icon-default:  light-dark(#17171a, #f5f5f7);
  --color-icon-muted:    light-dark(#71717a, #8a8a95);
  --color-icon-positive: light-dark(#1f7a4d, #5cc98d);
  --color-icon-negative: light-dark(#9a1f2b, #e0727d);

  /* --- tipografi: skala geometrik (base 14px, rasio 1.2) --- */
  --font-family-base: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-family-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-size-xs:   0.694rem;
  --font-size-sm:   0.833rem;
  --font-size-base: 1rem;      /* 14px */
  --font-size-lg:   1.2rem;
  --font-size-xl:   1.44rem;
  --font-size-2xl:  1.728rem;
  --font-size-3xl:  2.074rem;
  --font-size-4xl:  2.488rem;

  --text-heading-1-size:   var(--font-size-4xl);
  --text-heading-2-size:   var(--font-size-2xl);
  --text-heading-3-size:   var(--font-size-xl);
  --text-body-size:        var(--font-size-base);
  --text-body-leading:     1.65;
  --text-heading-leading:  1.2;
  --text-heading-weight:   600;

  /* --- spasi (kelipatan 4) --- */
  --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: 4px;  --radius-md: 8px;  --radius-lg: 12px;
  --radius-xl: 16px; --radius-full: 999px;

  /* --- elevasi --- */
  --shadow-sm: 0 1px 2px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.4));
  --shadow-md: 0 4px 12px light-dark(rgb(0 0 0 / 0.07), rgb(0 0 0 / 0.5));

  /* --- motion --- */
  --motion-fast: 120ms ease-out;
  --motion-base: 200ms ease-out;

  /* --- ukuran --- */
  --size-container: 60rem;
  --size-border-width: 1px;
}

/* ============================================================================
   Dasar
   ========================================================================== */

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

html { font-size: 14px; }

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--color-text-primary);
  background: var(--color-background-body);
  -webkit-font-smoothing: antialiased;
}

.wadah {
  max-width: var(--size-container);
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-9);
}

/* ============================================================================
   Tipografi
   ========================================================================== */

h1, h2, h3 {
  margin: 0;
  font-weight: var(--text-heading-weight);
  line-height: var(--text-heading-leading);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-heading-1-size); }
h2 { font-size: var(--text-heading-2-size); }
h3 { font-size: var(--text-heading-3-size); }

p { margin: 0 0 var(--space-4); }

.teks-sekunder { color: var(--color-text-secondary); }
.teks-kecil { font-size: var(--font-size-sm); }
.mono { font-family: var(--font-family-mono); font-variant-numeric: tabular-nums; }

/* ============================================================================
   Komponen
   ========================================================================== */

/* --- kartu --- */
.kartu {
  background: var(--color-background-card);
  border: var(--size-border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.kartu--unggulan { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }

.kartu__judul { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }

/* --- lencana --- */
.lencana {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--size-border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-background-muted);
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.lencana--aksen { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }

/* --- grid --- */
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* --- bagian --- */
.bagian { margin-top: var(--space-8); }
.bagian__kepala { margin-bottom: var(--space-5); }
.bagian__nomor {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-disabled);
  letter-spacing: 0.08em;
}

/* --- daftar centang --- */
.daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.daftar li { display: grid; grid-template-columns: 1.15rem 1fr; gap: var(--space-3); align-items: start; }
.daftar svg { margin-top: 0.15rem; }

/* --- tabel --- */
table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
th, td { text-align: left; padding: var(--space-3) var(--space-3); border-bottom: var(--size-border-width) solid var(--color-border); vertical-align: top; }
th { color: var(--color-text-secondary); font-weight: 500; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; }
td:last-child, th:last-child { text-align: right; white-space: nowrap; }

/* --- harga --- */
.harga {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- garis waktu --- */
.waktu { display: grid; gap: var(--space-4); }
.waktu__baris { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-4); align-items: baseline; }
.waktu__tahap { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* --- pemisah --- */
hr { border: 0; border-top: var(--size-border-width) solid var(--color-border); margin: var(--space-7) 0; }

/* --- kepala halaman --- */
.kepala { display: grid; gap: var(--space-4); }
.kepala__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* --- penutup --- */
.penutup {
  margin-top: var(--space-8); padding: var(--space-6);
  background: var(--color-background-surface);
  border: var(--size-border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* ============================================================================
   Cetak (untuk PDF) — matikan tema gelap, atur pemenggalan halaman
   ========================================================================== */

@page { size: A4; margin: 16mm 14mm; }

@media print {
  :root { color-scheme: light; }
  body { background: #fff; }
  .wadah { max-width: none; padding: 0; }
  /* kartu & tabel tetap utuh, tapi bagian boleh mengalir supaya tidak ada
     ruang kosong besar di tengah dokumen */
  .bagian { margin-top: 1.6rem; }
  .kartu, table, .penutup, .waktu__baris, .daftar li { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .kartu { box-shadow: none; }
  .tanpa-cetak { display: none; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.35rem; }
}