@font-face { font-family: "Jost"; font-weight: 100 900; font-style: normal;
  src: url("fonts/Jost.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Overpass Mono"; font-weight: 300 700; font-style: normal;
  src: url("fonts/OverpassMono.woff2") format("woff2"); font-display: swap; }


:root {
  /* Gelap — DITURUNKAN, bukan dari template: DESIGN.md mereka hanya punya token
     terang (surface #FFFFFF, text #111827) walau SKILL.md menyebut "dark mode".
     Semua rasio di bawah diukur dengan rumus luminansi WCAG. */
  --paper:      #0A0A0B;   /* latar utama */
  --panel:      #18181B;   /* pita bagian */
  --ink:        #F5F5F7;   /* teks utama — 18,18:1 di latar · 16,27:1 di panel */
  --muted:      #A1A1AA;   /* teks redup — 7,72:1 · 6,91:1 */
  /* Aksen #F34173: dari piksel referensi Jaka (typeui.sh), 5,48:1 · 4,91:1.
     Token template #E60076 gagal di sini (4,36:1). */
  --accent:     #F34173;
  --accent-ink: #FA8FAE;   /* hover — 9,05:1 · 8,10:1 */
  --line:       rgba(245,245,247,.13);
  --line-strong:#F5F5F7;

  --font: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Overpass Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step-0: clamp(1.0625rem, 1rem + .25vw, 1.125rem);   /* 17 → 18px (badan teks) */
  --step-1: clamp(1.25rem, 1.15rem + .45vw, 1.375rem);  /* 20 → 22px (lede, nilai jual, h3) */
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  --step-4: clamp(2.5rem, 1.6rem + 4.2vw, 4.25rem);

  --r-flat: 0px;    /* permukaan besar — mengikuti pratinjau resmi template */
  --r-ctl:  4px;    /* kontrol kecil — token template */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--step-0);
  line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--accent-ink); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; padding: .75rem 1.25rem;
  background: var(--accent); color: #0A0A0B; z-index: 20; font-family: var(--font-mono);
  font-size: .8125rem; font-weight: 600; }
.skip:focus { left: 0; top: 0; }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: 46rem; }

/* ---------- tipografi kontemporer ---------- */
h1, h2, h3 { font-weight: 700; margin: 0; letter-spacing: -.02em; }
h1 { font-size: var(--step-4); line-height: 1.02; letter-spacing: -.035em; font-weight: 800;
     max-width: 22ch; }
h2 { font-size: var(--step-3); line-height: 1.06; letter-spacing: -.03em; }
h3 { font-size: var(--step-1); line-height: 1.3; letter-spacing: -.01em; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 1.25rem;
}
.eyebrow.acc { color: var(--accent); }
.lede { font-size: var(--step-1); line-height: 1.5; max-width: 46ch; margin: 0 0 2rem; font-weight: 400; }

/* ---------- HERO ---------- */
.hero { padding: clamp(3rem, 8vw, 7rem) 0 clamp(2.5rem, 6vw, 5rem); }
.role-line { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 1.5rem; }
.hero h1 { margin-bottom: 1.5rem; }
.value-prop { font-size: var(--step-1); line-height: 1.5; max-width: 48ch; margin: 0 0 2.5rem; }

/* ---------- blok angka: grid bertepi, tanpa bayangan ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line-strong); margin: 0 0 2.5rem; }
.stats > div { padding: 1.5rem 1.25rem; border-right: 1px solid var(--line-strong); }
.stats > div:last-child { border-right: 0; }
.stats dt { font-size: var(--step-3); font-weight: 800; letter-spacing: -.035em;
  line-height: 1; font-variant-numeric: tabular-nums; }
.stats dd { margin: .6rem 0 0; font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---------- navigasi ---------- */
.jump { display: flex; flex-wrap: wrap; gap: .5rem .625rem; }
.jump a { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .04em;
  color: var(--ink); border: 1px solid rgba(245,245,247,.36); border-radius: var(--r-ctl);
  padding: .75rem 1rem; min-height: 44px; display: inline-flex; align-items: center; }
.jump a:hover { background: var(--panel); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- bagian ---------- */
section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.band { background: var(--panel); }
.sec-head { display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem;
  align-items: start; margin-bottom: 2.5rem; }
.sec-num { font-family: var(--font-mono); font-size: var(--step-1); letter-spacing: .12em;
  color: var(--accent); padding-top: .3rem; }

/* ---------- What I do: grid bertepi ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line); }
.grid-2 > article { padding: 2rem 1.75rem 2rem 0; border-bottom: 1px solid var(--line); }
.grid-2 > article:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 1.75rem; }
.grid-2 > article:nth-child(even) { padding-left: 1.75rem; }
.grid-2 h3 { margin-bottom: .6rem; }
.grid-2 p { margin: 0; color: var(--muted); }
/* ---------- pengalaman ---------- */
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.entry { display: grid; grid-template-columns: 11rem 1fr; gap: 2rem;
  padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
.entry .period { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .04em;
  color: var(--muted); font-variant-numeric: tabular-nums; padding-top: .2rem; }
.entry h3 { margin-bottom: .25rem; }
.entry .role-line2 { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .75rem; }
.entry .context { margin: 0 0 .5rem; color: var(--muted); max-width: 62ch; }
.entry .result { margin: 0; max-width: 62ch; }
.entry .result strong { font-weight: 600; }

/* ---------- studi kasus ---------- */
.case { border: 1px solid var(--line-strong); margin-bottom: 1.5rem; }
.case-head { padding: 1.75rem 1.75rem 1.25rem; border-bottom: 1px solid var(--line); }
.case-head .tag { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: .75rem; }
.case-head h3 { font-size: var(--step-2); letter-spacing: -.02em; max-width: 30ch; }
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  border-bottom: 1px solid var(--line); }
.results > div { padding: 1.25rem 1.5rem; border-right: 1px solid var(--line); }
.results > div:last-child { border-right: 0; }
.results dt { font-size: var(--step-2); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; }
.results dd { margin: .5rem 0 0; font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.case-body { margin: 0; padding: 1.75rem; }
.case-body dt { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-top: 1.5rem; }
.case-body dt:first-of-type { margin-top: 0; }
.case-body dd { margin: .5rem 0 0; max-width: 68ch; }
.case-note { padding: 0 1.75rem 1.75rem; margin: 0; font-size: .9375rem; color: var(--muted); }

/* ---------- prinsip ---------- */
.principles { list-style: none; margin: 0; padding: 0; }
.principles li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.5rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.principles .p-num { font-family: var(--font-mono); font-size: .75rem; color: var(--muted);
  padding-top: .3rem; }
.principles h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.principles p { margin: 0; color: var(--muted); max-width: 66ch; }

/* ---------- kontak ---------- */
.cta { display: inline-flex; align-items: center; min-height: 52px;
  background: var(--accent); color: #0A0A0B; font-weight: 700; font-size: var(--step-1);
  padding: .9rem 1.75rem; border: 0; border-radius: var(--r-ctl); letter-spacing: -.01em; }
.cta:hover { background: var(--accent-ink); color: #0A0A0B; }
/* Contact terbaca redup (laporan Jaka 1 Okt). Diukur: 3,17 piksel terang
   per 1000 px vs 16-36 di bagian lain — 5x lebih pucat. Penyebabnya dua baris
   mono redup di bagian TERPENDEK yang jatuh di latar paling gelap (tanpa pita).
   Dinaikkan ke #C9C9D1 = 12,02:1 (dari 7,72:1), dan 16px (dari 14px). */
.email-plain { font-family: var(--font-mono); font-size: 1rem; color: #C9C9D1;
  margin: 1rem 0 0; font-variant-numeric: tabular-nums; }

/* ---------- kaki ---------- */
footer { border-top: 1px solid var(--line-strong); padding: 2rem 0 3rem; }
footer p { margin: 0; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em;
  color: #B4B4BC; }

/* ---------- gerak: hanya transform + opacity, gagal aman ---------- */
/* PERBAIKAN 1 Okt: `rise` TIDAK lagi menganimasikan opacity.
   Alasan terukur: dengan `animation: rise linear both` + `animation-timeline: view()`,
   tiap bagian ada di opacity 0 SAMPAI timeline-nya maju. Di renderer yang tidak
   memajukan timeline gulir (screenshot, cetak, pembaca, sebagian bot), SELURUH
   bagian jadi tak terlihat — kubuktikan dengan tangkapan viewport yang nyaris
   hitam pekat dan `.wrap` op=0 di semua lima bagian.
   Isi halaman tidak boleh bergantung pada animasi untuk bisa dibaca.
   Geraknya tetap ada — hanya geser, tanpa pudar. */
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  /* a) masuk layar — animation-timeline: view(), dengan penjaga @supports.
        Peramban tanpa dukungan: tidak ada animasi sama sekali, halaman tetap utuh. */
  @supports (animation-timeline: view()) {
    section > .wrap, .case, .entry {
      animation: rise linear both; animation-timeline: view();
      animation-range: entry 6% cover 22%;
    }
  }
  /* b) garis bawah judul tumbuh sekali — tidak bergantung dukungan view() */
  .sec-head h2 { position: relative; }
  .sec-head h2::after {
    content: ""; position: absolute; left: 0; bottom: -.35rem; height: 2px; width: 3.5rem;
    background: var(--accent); transform-origin: left center;
    animation: grow .7s .15s cubic-bezier(.2,.7,.3,1) both;
  }
  /* c) blok angka: barisnya tumbuh sekali, angka tidak bergerak */
  .stats { position: relative; }
  .stats::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--accent); transform-origin: left center;
    animation: grow .8s .1s cubic-bezier(.2,.7,.3,1) both;
  }
  a, .cta, .jump a { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .sec-head h2::after, .stats::after { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- ponsel ---------- */
@media (max-width: 767.98px) {
  .stats { grid-template-columns: 1fr; }
  .stats > div { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .stats > div:last-child { border-bottom: 0; }
  .sec-head { grid-template-columns: 1fr; gap: .5rem; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-2 > article:nth-child(odd) { border-right: 0; padding-right: 0; }
  .grid-2 > article:nth-child(even) { padding-left: 0; }
  .entry { grid-template-columns: 1fr; gap: .4rem; }
  .entry .period { padding-top: 0; }
  .results { grid-template-columns: repeat(2, 1fr); }
  .results > div { border-bottom: 1px solid var(--line); }
  .principles li { grid-template-columns: 2.5rem 1fr; gap: 1rem; }
}

/* ── Lantai ukuran (1 Okt 2026) ─────────────────────────────────────────────
   Jaka bertanya: "font nya terbaca engga ya? Terlalu kecil engga?"
   Diukur, bukan ditebak: 2,3% teks tampak ada di bawah 14px, dan 279 karakter
   (0,8%) di 11px. Yang terakhir itu di bawah lantai mana pun.
   Lantai final: 14px (label mono) dan 15px (tautan navigasi, baris peran).
   Pengecualian penanda nomor: .sec-num 22px (--step-1), .p-num 12px — sengaja,
   bukan pelanggaran lantai.
   Catatan: teks mono Overpass terbaca LEBIH BESAR dari Jost pada px yang sama
   (x-height 0,511 em vs 0,460 em), jadi 14px mono ≈ 15,5px Jost. Angka
   x-height diukur dari berkas fontnya, bukan dikira. */
.eyebrow, .stats dd, .entry .role-line2,
.results dd, .case-body dt, .case-head .tag, footer p { font-size: .875rem; }  /* 14px */
.jump a, .role-line { font-size: .9375rem; }   /* 15px — baris peran di bawah nama */
.skip { font-size: .875rem; }           /* 14px */
.case-note { font-size: 1rem; }         /* 16px — tadinya 15px, di bawah badan teks */
.entry .period { font-size: .875rem; }  /* 14px */