/* Hallmark · macrostructure: Marquee Hero → Feature grid · tone: bold / technical-light · anchor hue: brand yellow 95°
 * theme: studied-DNA (source: https://notebook.agency/) mapped onto Kontento brand
 * paper: #0C111B (brand ink-950) · accent: #FFD602 (brand yellow) · display: Host Grotesk 300/600 · mono: Geist Mono
 * nav: N1b three-section · footer: Ft2 inline single line
 * signature: hand-drawn monoline SVG on dot grids, white + one yellow accent
 */

:root {
  --color-bg:      var(--ink-950);
  --color-card:    #121826;
  --color-card-2:  var(--ink-900);
  --color-rule:    #232B3A;
  --color-text:    #FFFFFF;
  --color-text-2:  #C3C9D2;
  --color-text-3:  #8C96A6;
  --color-accent:  var(--yellow-500);
  --color-accent-hover: var(--yellow-400);
  --color-on-accent: var(--ink-950);
  --color-error:   #F09184;
  --color-focus:   var(--yellow-500);

  --font-display: 'Host Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px;
  --space-xl: 48px; --space-2xl: 72px; --space-3xl: 112px; --space-4xl: 152px;

  --text-sm: 14px; --text-md: 17px; --text-lg: 20px;
  --text-hero: clamp(2.5rem, 4.6vw, 4.3rem);
  --text-h2: clamp(2rem, 3.8vw, 3.4rem);
  --text-h3: 22px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 200ms;
  --radius: 8px;
  --radius-card: 18px;
  --page-gutter: clamp(16px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--color-rule) var(--color-bg); scroll-behavior: smooth; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text-2);
  font: 400 var(--text-md)/1.6 var(--font-display); -webkit-font-smoothing: antialiased; caret-color: var(--color-accent);
}
::selection { background: var(--color-accent); color: var(--color-on-accent); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.22em; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; color: var(--color-text); font-style: normal; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
.hl { color: var(--color-accent); }
.dim { color: var(--color-text-3); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--page-gutter); top: var(--space-xs); background: var(--color-accent); color: var(--color-on-accent); padding: var(--space-2xs) var(--space-xs); z-index: 30; }
.svg-defs { position: absolute; width: 0; height: 0; }
.page { padding: 0 var(--page-gutter); max-width: 1280px; margin: 0 auto; }

.h-hero { font-size: var(--text-hero); font-weight: 300; line-height: 1.08; letter-spacing: -0.03em; }
.h2 { font-size: var(--text-h2); font-weight: 300; line-height: 1.12; letter-spacing: -0.025em; }
.h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--color-text-2); max-width: 52ch; }
.lead b { color: var(--color-text); font-weight: 600; }

/* ---------- nav: N1b ---------- */
.nav-wrap { position: sticky; top: 0; z-index: 20; background: var(--color-bg); }
.nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; }
.wm { display: block; width: 124px; aspect-ratio: 6.004; background: var(--wm-yellow) left center / contain no-repeat; text-indent: -9999px; overflow: hidden; }
.nav-links { display: flex; justify-content: center; gap: var(--space-lg); font-size: var(--text-sm); }
.nav-links a { color: var(--color-text-2); text-decoration: none; white-space: nowrap; transition: color var(--dur) var(--ease-out); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--color-text); }
.nav-right { display: flex; align-items: center; gap: var(--space-md); }
.lang { display: flex; gap: 2px; font: 500 13px/1 var(--font-mono); }
.lang a { color: var(--color-text-3); text-decoration: none; padding: 6px 6px; border-radius: 4px; }
.lang a[aria-current] { color: var(--color-text); background: var(--color-card); }
.lang a:hover { color: var(--color-text); }
@media (max-width: 860px) { .nav-links { display: none; } .nav { grid-template-columns: auto 1fr; } .nav-right { justify-content: flex-end; gap: var(--space-sm); } }
@media (max-width: 420px) { .wm { width: 100px; } .nav .btn { padding: 0 14px; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: 46px; padding: 0 22px; border: 0; border-radius: var(--radius);
  background: var(--color-accent); color: var(--color-on-accent);
  font: 600 14px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap; cursor: pointer; transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.btn:hover { background: var(--color-accent-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: 13px; }
.tlink { display: inline-flex; align-items: center; gap: 10px; color: var(--color-accent); text-decoration: none; font-weight: 500; white-space: nowrap; }
.tlink svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.tlink:hover svg { transform: translateX(4px); }
.tlink:hover { color: var(--color-accent-hover); }

/* ---------- hero ---------- */
.hero { display: grid; gap: var(--space-xl); align-items: center; padding: var(--space-2xl) 0 var(--space-3xl); min-height: min(86vh, 820px); }
@media (min-width: 980px) { .hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.hero .lead { margin-top: var(--space-md); }
.hero .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.art { color: var(--color-text); width: 100%; height: auto; }
.art-hero { max-width: 620px; justify-self: end; }
@media (max-width: 979px) { .art-hero { max-width: 440px; justify-self: center; } }
@media (prefers-reduced-motion: no-preference) {
  .js .art-line { stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw 1.4s var(--ease-out) forwards; animation-delay: calc(var(--i) * 90ms); }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}

/* ---------- sections ---------- */
.sec { padding: var(--space-3xl) 0; }
.sec-head { max-width: 760px; margin-bottom: var(--space-xl); }
.sec-head .lead { margin-top: var(--space-md); }

.framework { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 980px) { .framework { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); } }
.framework .lead { margin-top: var(--space-md); }
.layer-names { list-style: none; padding: 0; margin: var(--space-lg) 0; display: grid; max-width: 460px; }
.layer-names li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-xs) 0; border-top: 1px solid var(--color-rule); color: var(--color-text); }
.layer-names li span { font: 500 13px/1.9 var(--font-mono); color: var(--color-text-3); }
.layer-names li:last-child span { color: var(--color-accent); }
.art-layers { max-width: 480px; justify-self: center; }

/* kartu kemampuan */
.cards { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.card { background: var(--color-card); border-radius: var(--radius-card); padding: var(--space-lg) var(--space-md) var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); transition: background-color var(--dur) var(--ease-out); }
.card:hover { background: var(--color-card-2); }
.icon-art { width: 92px; height: 92px; color: var(--color-text); margin-bottom: var(--space-xs); }
.card p { font-size: 15px; color: var(--color-text-2); }

/* riset */
.research { background: var(--color-card); border-radius: var(--radius-card); padding: clamp(24px, 4vw, 56px); display: grid; gap: var(--space-xl); }
@media (min-width: 980px) { .research { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl); } }
.research .lead { margin-top: var(--space-md); }
.research .tlink { margin-top: var(--space-lg); }
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.bars li:last-child { border-bottom: 0; }
.bars .top { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: 15px; color: var(--color-text); margin-bottom: 10px; }
.bars .top b { font: 500 15px/1.4 var(--font-mono); color: var(--color-text); white-space: nowrap; }
.bars .top small { display: block; font: 400 12px/1.4 var(--font-mono); color: var(--color-text-3); letter-spacing: 0.04em; }
.bars .track { height: 8px; border-radius: 4px; background: var(--color-rule); overflow: hidden; }
.bars .fill { height: 100%; border-radius: 4px; background: var(--color-text-3); }
.bars li.lead-row .fill { background: var(--color-accent); }
.bars-note { font: 400 12px/1.6 var(--font-mono); color: var(--color-text-3); margin-top: var(--space-md); }

.stats { display: grid; gap: var(--space-md); margin-top: var(--space-2xl); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { border-top: 1px solid var(--color-rule); padding-top: var(--space-md); }
.stat b { display: block; font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 300; line-height: 1; letter-spacing: -0.03em; color: var(--color-text); }
.stat > span { display: block; margin-top: var(--space-xs); font-size: 15px; max-width: 30ch; }

/* cara kerja */
.steps { display: grid; border-top: 1px solid var(--color-rule); }
.step { display: grid; gap: var(--space-xs) var(--space-xl); padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); }
@media (min-width: 860px) { .step { grid-template-columns: 70px minmax(0, 0.9fr) minmax(0, 1.4fr) 160px; align-items: baseline; } }
.step .n { font: 500 14px/1 var(--font-mono); color: var(--color-text-3); }
.step .when { font: 400 14px/1.4 var(--font-mono); color: var(--color-text-3); }
.step .free { display: inline-block; margin-left: 10px; font: 600 11px/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-on-accent); background: var(--color-accent); padding: 5px 8px; border-radius: 4px; vertical-align: 3px; }

/* janji */
.promise { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) { .promise { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } }
.promise ul { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.promise li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule); }
.promise svg { width: 18px; height: 18px; margin-top: 4px; }
.promise .yes svg { color: var(--color-accent); }
.promise .no svg { color: var(--color-text-3); }

/* kutipan pendiri */
.quote { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 980px) { .quote { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-2xl); } }
.qmark { width: 64px; height: 52px; color: var(--color-accent); }
.quote blockquote { margin: 0; font: 400 clamp(20px, 2.3vw, 30px)/1.45 var(--font-mono); color: var(--color-text); letter-spacing: -0.01em; max-width: 36ch; }
.quote blockquote mark { background: var(--color-accent); color: var(--color-on-accent); padding: 0 4px; }
.who { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); }
.who .mono-av { width: 52px; height: 52px; border-radius: 50%; background: var(--color-card-2); display: grid; place-items: center; font: 600 16px/1 var(--font-display); color: var(--color-accent); flex: none; }
.who strong { display: block; color: var(--color-text); font-weight: 600; }
.who span { font-size: var(--text-sm); color: var(--color-text-3); }
.quote .more { margin-top: var(--space-lg); max-width: 62ch; }

/* catatan */
.notes { display: grid; gap: var(--space-sm); }
@media (min-width: 860px) { .notes { grid-template-columns: 1fr 1fr; } }
.note-card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); min-height: 260px; background: var(--color-card); border-radius: var(--radius-card); padding: var(--space-lg); text-decoration: none; transition: background-color var(--dur) var(--ease-out); }
.note-card:hover { background: var(--color-card-2); }
.note-card .meta { font: 400 13px/1.4 var(--font-mono); color: var(--color-text-3); }
.note-card h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; margin-top: var(--space-sm); }
.note-card p { margin-top: var(--space-sm); font-size: 15px; }

/* faq */
.faq { display: grid; gap: var(--space-xl); }
@media (min-width: 980px) { .faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-2xl); } }
.faq details { border-top: 1px solid var(--color-rule); }
.faq details:last-child { border-bottom: 1px solid var(--color-rule); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: var(--space-sm); padding: var(--space-md) 0; color: var(--color-text); font-weight: 500; font-size: 19px; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; margin-top: 3px; color: var(--color-accent); transition: transform var(--dur) var(--ease-out); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-accent); }
.faq details p { padding: 0 0 var(--space-md); max-width: 64ch; }

/* penutup */
.closer { padding: var(--space-4xl) 0 var(--space-3xl); display: grid; gap: var(--space-lg); justify-items: start; }
.closer .h2 { max-width: 18ch; font-size: clamp(2.4rem, 5vw, 4.4rem); }
.closer .lead { max-width: 54ch; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); padding: var(--space-lg) 0 var(--space-xl); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-text-3); }
.foot a { color: var(--color-text-2); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }

/* ---------- halaman dokumen ---------- */
.doc-head { display: grid; gap: var(--space-xl); padding: var(--space-2xl) 0 var(--space-xl); align-items: end; }
@media (min-width: 980px) { .doc-head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-2xl); } }
.doc-head .lead { margin-top: var(--space-md); max-width: 58ch; }
.meta-card { background: var(--color-card); border-radius: var(--radius-card); padding: var(--space-md) var(--space-lg); }
.meta-card dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--space-md); }
.meta-card dt, .meta-card dd { margin: 0; padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); }
.meta-card dt { font: 400 13px/1.6 var(--font-mono); color: var(--color-text-3); }
.meta-card dd { color: var(--color-text); font-size: 15px; }
.meta-card dt:last-of-type, .meta-card dd:last-of-type { border-bottom: 0; }
.doc-body { display: grid; gap: var(--space-xl); padding: var(--space-xl) 0 var(--space-3xl); border-top: 1px solid var(--color-rule); }
@media (min-width: 980px) { .doc-body { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-2xl); } }
.toc { position: sticky; top: 96px; align-self: start; list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.toc a { display: block; padding: 7px 0 7px 14px; color: var(--color-text-3); text-decoration: none; border-left: 2px solid var(--color-rule); }
.toc a:hover { color: var(--color-text); border-left-color: var(--color-accent); }
@media (max-width: 979px) { .toc { position: static; display: flex; flex-wrap: wrap; gap: 0 var(--space-sm); } .toc a { border: 0; padding: 4px 0; } }
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; margin: var(--space-2xl) 0 var(--space-sm); scroll-margin-top: 96px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--text-lg); font-weight: 600; margin: var(--space-lg) 0 var(--space-2xs); }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 var(--space-sm); }
.prose li { margin-bottom: var(--space-2xs); }
.prose li::marker { color: var(--color-accent); }
.prose strong { color: var(--color-text); font-weight: 600; }
.prose a { color: var(--color-text); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.prose .panel { background: var(--color-card); border-radius: var(--radius-card); padding: var(--space-lg); margin: var(--space-xl) 0; }
.prose .panel-title { display: flex; justify-content: space-between; gap: var(--space-sm); font: 400 13px/1.5 var(--font-mono); color: var(--color-text-3); margin-bottom: var(--space-sm); }
.prose .panel ul { margin-bottom: 0; }
.table-scroll { overflow-x: auto; }
.datatable { width: 100%; border-collapse: collapse; font-size: 15px; }
.datatable th { text-align: left; font: 400 12px/1.4 var(--font-mono); color: var(--color-text-3); padding: 0 var(--space-sm) var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); }
.datatable td { padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.datatable td:first-child { color: var(--color-text); }

/* ---------- formulir snapshot ---------- */
.form-page { display: grid; gap: var(--space-2xl); padding: var(--space-2xl) 0 var(--space-3xl); }
@media (min-width: 980px) { .form-page { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }
.receive { list-style: none; padding: 0; margin: var(--space-lg) 0 0; }
.receive li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule); }
.receive svg { width: 18px; height: 18px; color: var(--color-accent); margin-top: 4px; }
.form-card { background: var(--color-card); border-radius: var(--radius-card); padding: clamp(24px, 3vw, 40px); }
.fld { display: block; margin-bottom: var(--space-md); }
.fld .lbl { display: block; font-size: var(--text-sm); color: var(--color-text); font-weight: 500; margin-bottom: 8px; }
.fld input, .fld textarea {
  width: 100%; background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-rule); border-radius: var(--radius);
  font: 400 16px/1.5 var(--font-display); padding: 12px 14px; transition: border-color var(--dur) var(--ease-out);
}
.fld textarea { min-height: 130px; resize: vertical; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--color-text-3); }
.fld input:hover, .fld textarea:hover { border-color: var(--color-text-3); }
.fld input:focus-visible, .fld textarea:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.fld [aria-invalid="true"] { border-color: var(--color-error); }
.fld .err { display: none; font-size: 13px; color: var(--color-error); margin-top: 6px; }
.fld.has-err .err { display: block; }
.form-card .note { font-size: 13px; color: var(--color-text-3); margin-top: var(--space-sm); }

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

/* v4: judul seksi berpalang, kartu layanan 4 kolom, ikon tegas, riset disederhanakan */
.sec-title { position: relative; padding-left: 34px; }
.sec-title::before { content: ""; position: absolute; left: 0; top: 0.08em; bottom: 0.08em; width: 6px; background: var(--color-accent); }
.cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.card { padding: var(--space-lg) var(--space-lg) var(--space-xl); gap: var(--space-md); border-radius: 18px; }
.card .h3 { font-size: clamp(22px, 1.9vw, 26px); font-weight: 400; line-height: 1.2; letter-spacing: -0.015em; }
.icon-art { width: 116px; height: 116px; margin-bottom: var(--space-sm); }
.why { display: grid; gap: var(--space-xl); }
.why-big { font-size: clamp(26px, 3.2vw, 44px); font-weight: 300; line-height: 1.25; letter-spacing: -0.02em; color: var(--color-text); max-width: 30ch; margin: 0; }
.why-foot { display: grid; gap: var(--space-lg); align-items: end; max-width: 1000px; }
.why-foot { justify-items: start; }
.layer-names li small { display: block; font-size: 14px; color: var(--color-text-3); line-height: 1.4; }

/* v5: contoh jawaban AI di hero, tab industri, WhatsApp, harga */
.chat { margin: 0; max-width: 520px; justify-self: end; width: 100%; padding: var(--space-lg); border-radius: 18px; background: radial-gradient(circle, rgba(255,255,255,0.10) 1.2px, transparent 1.6px) 0 0 / 16px 16px, var(--color-card); }
@media (max-width: 979px) { .chat { justify-self: stretch; } }
.chat-label { display: block; font: 400 12px/1.5 var(--font-mono); color: var(--color-text-3); margin-bottom: var(--space-md); }
.bubble-q { margin: 0 0 var(--space-md) auto; max-width: 88%; background: var(--color-card-2); border: 1px solid var(--color-rule); color: var(--color-text); padding: 14px 16px; border-radius: 14px 14px 4px 14px; font-size: 15px; }
.bubble-a { font-size: 15px; color: var(--color-text-2); }
.bubble-a ol { margin: var(--space-xs) 0 var(--space-md); padding-left: 1.2em; }
.bubble-a li { margin-bottom: var(--space-2xs); }
.bubble-a li b { display: block; color: var(--color-text); font-weight: 600; }
.bubble-a li span { font-size: 14px; color: var(--color-text-3); }
.missing { margin: 0; padding: 12px 14px; border: 1.5px dashed var(--color-accent); border-radius: 10px; color: var(--color-accent); font-weight: 600; }
.btn.wa, .btn.ghost { gap: 10px; }
.btn.ghost { background: transparent; color: var(--color-text); box-shadow: inset 0 0 0 1.5px var(--color-text-3); }
.btn.ghost:hover { background: var(--color-card); box-shadow: inset 0 0 0 1.5px var(--color-accent); }
.row-cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.wa-alt { margin-top: var(--space-lg); display: grid; gap: var(--space-sm); justify-items: start; }
.step .price { color: var(--color-accent); font-weight: 500; }
.ind-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.ind-tabs button { font: 500 15px/1 var(--font-display); color: var(--color-text-2); background: transparent; border: 1px solid var(--color-rule); border-radius: 999px; padding: 11px 18px; cursor: pointer; white-space: nowrap; transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.ind-tabs button:hover { color: var(--color-text); border-color: var(--color-text-3); }
.ind-tabs button[aria-selected="true"] { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.ind-panel { display: grid; gap: var(--space-sm); }
.ind-panel[hidden] { display: none; }
@media (min-width: 900px) { .ind-panel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.ind-q, .ind-found { background: var(--color-card); border-radius: 18px; padding: var(--space-lg); }
.ind-qtext { font-size: clamp(22px, 2.2vw, 30px); font-weight: 300; line-height: 1.3; letter-spacing: -0.015em; color: var(--color-text); margin: 0 0 var(--space-lg); }
.ind-qtext::before { content: "\201C"; color: var(--color-accent); }
.ind-qtext::after { content: "\201D"; color: var(--color-accent); }
.ind-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.ind-actions .btn svg { width: 18px; height: 18px; }
button.tlink { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; cursor: pointer; }
.ind-found p { color: var(--color-text); font-size: 17px; margin: 0; }
img.mono-av { object-fit: cover; }

/* v8: diagram penjelas halaman metode */
.viz { margin: var(--space-lg) 0 var(--space-xl); background: var(--color-card); border-radius: var(--radius-card); padding: clamp(18px, 3vw, 32px); color: var(--color-text-2); font-size: 15px; }
.viz figcaption { margin-top: var(--space-md); font-size: 14px; color: var(--color-text-3); }
.vz-label { display: block; font: 400 12px/1.5 var(--font-mono); color: var(--color-text-3); margin-bottom: var(--space-xs); }
.vz-arrow { width: 40px; height: 16px; color: var(--color-text-3); flex: none; }
.vz-arrow-d { width: 16px; height: 32px; color: var(--color-text-3); margin: var(--space-2xs) auto; }
.vz-ic { width: 18px; height: 18px; flex: none; }
.vz-ic.ok { color: var(--color-accent); } .vz-ic.no { color: var(--color-error); }
.vz-bot { width: 44px; height: 44px; color: var(--color-text); flex: none; }
.vz-door { width: 48px; height: 60px; color: var(--color-text); flex: none; }
/* alur sumber ke jawaban */
.vz-flow { display: grid; justify-items: center; text-align: center; }
.vz-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vz-chips li { border: 1px solid var(--color-rule); border-radius: 999px; padding: 6px 12px; font-size: 14px; color: var(--color-text); }
.vz-ai { display: flex; align-items: center; gap: 10px; color: var(--color-text); font-weight: 600; }
.vz-answer { width: min(100%, 360px); text-align: left; background: var(--color-bg); border: 1px solid var(--color-rule); border-radius: 12px; padding: 14px 16px; }
.vz-answer ol { margin: 0; padding: 0; list-style: none; }
.vz-answer li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--color-rule); color: var(--color-text); }
.vz-answer li:first-child { border-top: 0; }
.vz-answer li small { font: 400 12px/1 var(--font-mono); color: var(--color-text-3); }
.vz-answer li.off span { color: var(--color-text-3); text-decoration: line-through; }
/* dua keadaan berdampingan */
.vz-two { display: grid; gap: var(--space-sm); }
@media (min-width: 640px) { .vz-two { grid-template-columns: 1fr 1fr; } }
.vz-state { background: var(--color-bg); border: 1px solid var(--color-rule); border-radius: 12px; padding: 16px; }
.vz-state.good { border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-rule)); }
.vz-state b { display: flex; align-items: center; gap: 8px; color: var(--color-text); font-weight: 600; margin-top: 12px; }
.vz-state p { margin: 6px 0 0; font-size: 14px; }
.vz-row { display: flex; align-items: center; gap: 10px; }
.vz-ids { list-style: none; margin: 0; padding: 0; }
.vz-ids li { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--color-rule); }
.vz-ids li:first-child { border-top: 0; }
.vz-ids small { font: 400 12px/1.6 var(--font-mono); color: var(--color-text-3); }
.vz-ids span { color: var(--color-text); }
.vz-state.bad .vz-ids li:nth-child(n+2) span { color: var(--color-error); }
/* WA ke halaman */
.vz-qa { display: grid; gap: var(--space-sm); align-items: center; }
@media (min-width: 640px) { .vz-qa { grid-template-columns: 1fr auto 1.2fr; } }
@media (max-width: 639px) { .vz-qa .vz-arrow { transform: rotate(90deg); justify-self: center; } }
.vz-bubble { margin: 0; background: #1F3B2C; color: #E9F5EC; padding: 12px 14px; border-radius: 12px 12px 12px 4px; font-size: 15px; }
.vz-page { background: var(--color-bg); border: 1px solid var(--color-rule); border-radius: 12px; padding: 16px; }
.vz-page-h { margin: 0 0 8px; color: var(--color-text); font-weight: 600; font-size: 17px; }
.vz-first { margin: 0 0 12px; padding: 8px 10px; border-radius: 6px; background: rgba(255, 214, 2, 0.14); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-accent); font-size: 14px; }
.vz-line { display: block; height: 7px; border-radius: 4px; background: var(--color-rule); margin-top: 8px; }
.vz-line.short { width: 60%; }
/* hub sumber */
.vz-hub-wrap { position: relative; display: grid; place-items: center; min-height: 260px; }
.vz-hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.vz-nodes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.vz-nodes li { position: absolute; background: var(--color-bg); border: 1px solid var(--color-rule); border-radius: 999px; padding: 6px 12px; font-size: 14px; color: var(--color-text); white-space: nowrap; }
.vz-nodes li:nth-child(1) { left: 0; top: 4%; } .vz-nodes li:nth-child(2) { right: 0; top: 4%; }
.vz-nodes li:nth-child(3) { left: 0; bottom: 4%; } .vz-nodes li:nth-child(4) { right: 0; bottom: 4%; }
.vz-center { position: relative; background: var(--color-accent); color: var(--color-on-accent); font-weight: 600; padding: 12px 18px; border-radius: 999px; }
/* grafik bulanan */
.vz-bars { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); align-items: end; height: 190px; }
.vz-bars li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 8px; }
.vz-bar { width: 100%; max-width: 64px; height: var(--h); min-height: 6px; background: var(--color-text-3); border-radius: 6px 6px 2px 2px; position: relative; }
.vz-bars li:last-child .vz-bar { background: var(--color-accent); }
.vz-val { font: 500 14px/1 var(--font-mono); color: var(--color-text); }
.vz-bars li { gap: 6px; }
.vz-bars small { font: 400 12px/1 var(--font-mono); color: var(--color-text-3); white-space: nowrap; }
.vz-layers .art-layers { max-width: 360px; margin: 0 auto; color: var(--color-text); }

/* v9: metode ronde 1 */
.updated { margin-top: var(--space-md); font: 400 13px/1.5 var(--font-mono); color: var(--color-text-3); }
.prose .summary { margin-top: 0; border: 1px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-rule)); }
.prose .summary ol { padding-left: 1.2em; margin: var(--space-sm) 0; }
.selfcheck { margin: var(--space-lg) 0; padding: var(--space-md) var(--space-lg); border-left: 0; border-radius: var(--radius-card); background: color-mix(in srgb, var(--color-accent) 9%, var(--color-card)); }
.selfcheck p { margin: 0; color: var(--color-text); }
.cta-mid { margin: var(--space-xl) 0; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-card); display: grid; gap: var(--space-md); }
.cta-mid .cta-h { margin: 0 0 4px; color: var(--color-text); font-weight: 600; font-size: 19px; }
.cta-mid p { margin: 0; }
.faq-inline details { border-top: 1px solid var(--color-rule); }
.faq-inline details:last-child { border-bottom: 1px solid var(--color-rule); }
.faq-inline summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: var(--space-sm); padding: var(--space-sm) 0; color: var(--color-text); font-weight: 500; }
.faq-inline summary::-webkit-details-marker { display: none; }
.faq-inline summary svg { width: 18px; height: 18px; color: var(--color-accent); transition: transform var(--dur) var(--ease-out); }
.faq-inline details[open] summary svg { transform: rotate(45deg); }
.faq-inline details p { padding-bottom: var(--space-sm); }
.biz-line { font: 400 13px/1.6 var(--font-mono); color: var(--color-text-3); }
.prose a.btn { color: var(--color-on-accent); text-decoration: none; } .prose a.btn.ghost { color: var(--color-text); }