/* KolomCV (nama kerja) — mockup mobile-first.
   Keputusan desain:
   Palet dari pemilik produk (Color Hunt): #8B2626 merah tua, #EF6905 jingga, #F1E5A1 kuning pucat, #486C2F hijau.
   Catatan pengecualian: skill desain melarang kombinasi krem + rust sebagai "gaya"; di sini palet itu keputusan pemilik,
   jadi dipakai dengan peran tetap, bukan sebagai dekorasi:
   - jingga = satu-satunya tombol aksi utama (teks tinta, kontras 5,9:1)
   - kuning pucat = penanda stabilo di kertas (menandai bagian penting / yang kurang)
   - merah tua = sisi gelap brand (pita CTA, callout AI); hijau = status berhasil/aktif
   1. Aksen: penanda stabilo di kertas, bukan dekorasi.
   2. Halaman memakai lembar CV nyata (contoh) sebagai elemen produk, bukan ilustrasi abstrak.
   3. Bricolage Grotesque untuk judul, IBM Plex Sans untuk isi. Tidak ada gradien, tidak ada ikon dekoratif. */

:root {
  --color-ink: #211a17;
  --color-ink-2: #4a423d;
  --color-ink-3: #675d56;
  --color-paper: #fbf9f1;
  --color-surface: #ffffff;
  --color-line: #e6e0cc;
  --color-line-strong: #cdc5a6;
  --color-brand: #8b2626;
  --color-accent: #ef6905;
  --color-accent-hover: #d95c00;
  --color-mark: #f1e5a1;
  --color-mark-hover: #e8d879;
  --color-mark-soft: #f8f2cf;
  --color-danger: #b42318;
  --color-danger-soft: #fdeceb;
  --color-ok: #486c2f;
  --color-ok-soft: #e7eedf;

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 5vw, 2rem);
  --step-3: clamp(2.25rem, 9vw, 3rem);
  --step-4: clamp(2.5rem, 11vw, 4rem);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;

  --shadow-1: 0 1px 0 rgba(20, 23, 31, 0.06);
  --shadow-2: 0 14px 28px -16px rgba(20, 23, 31, 0.28);
  --shadow-3: 0 -10px 24px -18px rgba(20, 23, 31, 0.35);

  --duration-fast: 140ms;
  --duration-base: 240ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --dock-h: 88px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  overflow-x: hidden;
}
body.has-dock { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; font-weight: 700; }
h1 { font-size: var(--step-4); line-height: 1.06; letter-spacing: -0.025em; }
h2 { font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: var(--step-1); line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; border-radius: var(--radius-s); }

/* Tautan: satu gaya di seluruh situs. Selalu bergaris bawah; saat disorot diberi penanda stabilo.
   Tautan yang berdiri sendiri (bukan di dalam kalimat) mendapat area sentuh 44px dan huruf 15px/500. */
a, .btn-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: background-color var(--duration-fast) var(--ease); }
a:hover, .btn-link:hover { background-color: var(--color-mark-soft); }
.btn-link { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; }
.btn-link, .head-link, .foot a { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1.2 var(--font-body); }
.head-link { padding-inline: var(--space-2); }
.wordmark { text-decoration: none; }
.wordmark:hover { background: none; }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--space-4); }
.wrap--narrow { max-width: 560px; }
.section { padding-block: var(--space-7); }
.section--tight { padding-block: var(--space-6); }
.section--line { border-top: 1px solid var(--color-line); }
[id] { scroll-margin-top: 72px; }
.eyebrow { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-3); }
.lead { font-size: var(--step-1); line-height: 1.45; color: var(--color-ink-2); }
.muted { color: var(--color-ink-3); }
.small { font-size: var(--step--1); }
.mark { box-shadow: inset 0 -0.42em 0 var(--color-mark); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.measure { max-width: 52ch; }
.mt-3 { margin-top: var(--space-3); }
.mt-5 { margin-top: var(--space-5); }
.section-head { display: grid; gap: var(--space-3); justify-items: start; }
.section-head .lead { max-width: 52ch; }
.section-head--invert .eyebrow { color: var(--color-mark); }
.section-head--invert h2 { max-width: 12ch; }
.section-head--invert .lead { color: inherit; font-size: 18px; line-height: 1.5; max-width: 40ch; }
/* Header */
.site-head { border-bottom: 1px solid var(--color-line); background: var(--color-paper); position: sticky; top: 0; z-index: 10; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.wordmark span { box-shadow: inset 0 -0.38em 0 var(--color-mark); }

/* Tombol. Tiga tingkat: utama (jingga, satu per area), sekunder (garis, .btn--outline), tersier (tautan, .btn-link).
   Ukuran: standar 48px, kecil .btn--sm 44px (dialog dan kontrol pendamping). Semua memakai satu radius, satu tebal garis, satu huruf. */
.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 8px 20px; border-radius: var(--radius-m); border: 1.5px solid var(--color-ink);
  font: 500 15px/1.2 var(--font-body); text-decoration: none; cursor: pointer; text-align: center;
  background: var(--color-accent); color: var(--color-ink);
  transition: background-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.btn:hover { background: var(--color-accent-hover); }
.btn:active { transform: translateY(1px); }
.btn--outline { background: transparent; }
.btn--outline:hover { background: var(--color-surface); }
.btn--sm { min-height: 44px; padding: 6px 16px; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { background: var(--color-line); border-color: var(--color-line); color: var(--color-ink-3); cursor: not-allowed; transform: none; }
.btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--color-ink); border-right-color: transparent; animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.foot { padding-block: var(--space-6); font-size: 14px; color: var(--color-ink-2); }
.foot ul { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
/* Progress steps (app pages) */
.progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); padding-block: var(--space-3); list-style: none; margin: 0; }
.progress li { font-size: var(--step--1); padding-top: var(--space-2); border-top: 3px solid var(--color-line-strong); color: var(--color-ink-3); }
.progress li.is-done { border-color: var(--color-ink); color: var(--color-ink); }
.progress li.is-now { border-color: var(--color-ink); color: var(--color-ink); font-weight: 600; box-shadow: 0 -3px 0 var(--color-mark); }
.page-title { padding-top: var(--space-4); }
.page-title h1 { font-size: var(--step-3); }
.page-title p { margin-top: var(--space-2); color: var(--color-ink-2); }
/* Forms */
.form { display: grid; gap: var(--space-5); padding-block: var(--space-5) var(--space-6); }
.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.fieldset legend { padding: 0; font: 700 var(--step-1) var(--font-display); letter-spacing: -0.01em; margin-bottom: var(--space-3); }
.field { display: grid; gap: var(--space-1); }
.field label { font-weight: 500; font-size: 15px; }
.field .hint { font-size: 14px; color: var(--color-ink-3); }
.field .err { display: none; font-size: 14px; color: var(--color-danger); font-weight: 500; }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; font: 400 16px/1.4 var(--font-body); color: var(--color-ink);
  background: var(--color-surface); border: 1.5px solid var(--color-line-strong); border-radius: var(--radius-m);
  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
.textarea { min-height: 200px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-ink-3); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 0; border-color: var(--color-ink); }
.textarea--s { min-height: 96px; }
.textarea--l { min-height: 280px; }
.input[disabled], .select[disabled], .textarea[disabled] { background: var(--color-line); color: var(--color-ink-3); cursor: not-allowed; border-color: var(--color-line); }
.field.has-error .input, .field.has-error .textarea { border-color: var(--color-danger); background: var(--color-danger-soft); }
.field.has-error .err { display: block; }
.row2 { display: grid; gap: var(--space-4); }
.counter { font-size: 14px; color: var(--color-ink-3); text-align: right; }
.counter.is-over { color: var(--color-danger); font-weight: 600; }
/* Dock (tombol tetap di bawah, mudah dijangkau jempol) */
.dock {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 20; background: var(--color-surface); border-top: 1px solid var(--color-line-strong);
  box-shadow: var(--shadow-3); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
}
.dock .wrap { padding-inline: 0; display: grid; gap: var(--space-1); }
.dock .small { text-align: center; color: var(--color-ink-3); }
/* Cards & notices */
.panel { background: var(--color-surface); border: 1px solid var(--color-line-strong); border-radius: var(--radius-l); padding: var(--space-4) var(--space-5); }
.notice { border-left: 4px solid var(--color-ink); background: var(--color-surface); padding: var(--space-3) var(--space-4); font-size: 15px; border-radius: 0 var(--radius-m) var(--radius-m) 0; }
.notice--mark { background: var(--color-mark-soft); }
.notice--danger { border-color: var(--color-danger); background: var(--color-danger-soft); }
.notice--ok { border-color: var(--color-ok); background: var(--color-ok-soft); }
.todo { border: 1.5px dashed var(--color-line-strong); border-radius: var(--radius-m); padding: var(--space-4); color: var(--color-ink-3); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.chip { font-size: 14px; padding: 4px 10px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-s); background: var(--color-surface); }
.chip--mark { background: var(--color-mark); border-color: var(--color-ink); }
/* Pertanyaan (QuestionCell) */
.q { display: grid; gap: var(--space-2); padding-block: var(--space-4); border-bottom: 1px solid var(--color-line-strong); }
.q:first-of-type { border-top: 1px solid var(--color-ink); }
.q__top { display: flex; justify-content: space-between; align-items: start; gap: var(--space-3); }
.q__text { font-weight: 600; }
.q.is-skipped .q__text { color: var(--color-ink-3); text-decoration: line-through; }
.q.is-skipped .textarea { display: none; }
/* Judul bagian kecil dan kutipan cerita */
.h-sub { font-size: var(--step-1); margin-bottom: var(--space-3); }
.quote { margin: 0 0 var(--space-3); overflow-wrap: anywhere; }
.quote .eyebrow { margin-bottom: var(--space-1); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--color-ink); border-radius: var(--radius-m); overflow: hidden; }
.tabs button, .tabs a { display: grid; place-items: center; min-height: 48px; border: 0; background: transparent; font: 500 15px var(--font-body); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease); }
.tabs button:hover, .tabs a:hover { background: var(--color-surface); }
.tabs button[aria-selected="true"], .tabs a[aria-current="page"] { background: var(--color-ink); color: var(--color-paper); }
.divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-ink-3); font-size: 14px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--color-line-strong); }
.g-dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--color-ink); display: inline-grid; place-items: center; font: 700 12px var(--font-body); }

/* Tablet dan desktop (peningkatan, bukan dasar) */
@media (min-width: 640px) {
  .wrap { padding-inline: var(--space-5); }
  .section { padding-block: var(--space-8); }
  .row2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .dock .wrap { max-width: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}