@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #f5f7f2;
  --surface: #ffffff;
  --ink: #10231d;
  --muted: #485850;
  --line: #d6ddd6;
  --brand: #0b6b53;
  --brand-ink: #ffffff;
  --accent: #0b6b53;
  --kuning: #d6f76b;
  --hero-bg: #f5f7f2;
  --hero-ink: #10231d;
  --ukur-bg: #10231d;
  --cta-bg: #0b4f3e;
  --hot: #c62a1e;
  --warm: #9a5200;
  --cold: #47606f;
  --radius: 8px;
  --max: 1200px;
  --display: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #0c1815;
  --surface: #15261f;
  --ink: #eef4ef;
  --muted: #a9bab1;
  --line: #2c4238;
  --brand: #8fe3bf;
  --brand-ink: #0c1815;
  --accent: #8fe3bf;
  --hero-bg: #0c1815;
  --hero-ink: #eef4ef;
  --ukur-bg: #15261f;
  --cta-bg: #15261f;
  --hot: #ff8a7d;
  --warm: #f0b56a;
  --cold: #a9c3d1;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--body); }
a { color: var(--brand); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(20px, 3vw, 40px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(40px, 4.8vw, 68px); line-height: 1; font-weight: 800; margin: 0 0 18px; }
h3 { font-size: 21px; line-height: 1.25; margin: 0 0 8px; }
.sub { color: var(--muted); max-width: 62ch; margin: 0 0 40px; }
.kicker, .eyebrow { font-weight: 700; font-size: 16px; color: var(--accent); margin: 0 0 10px; }
.eyebrow { color: var(--hero-ink); }
section { padding: clamp(56px, 7vw, 96px) 0; }
section.alt { background: var(--surface); }

/* Header */
header.site { background: var(--hero-bg); color: var(--hero-ink); position: sticky; top: 0; z-index: 10; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.logo { display: inline-flex; align-items: center; font: 900 30px/1 var(--display); color: var(--hero-ink); text-decoration: none; }
.logo img { display: block; width: 32px; height: 32px; margin-right: 10px; }
.logo span { margin-left: 0.18em; }
nav.main { display: flex; gap: 24px; align-items: center; }
nav.main a:not(.btn) { color: var(--hero-ink); text-decoration: none; font-size: 16px; font-weight: 500; }
nav.main a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
.theme-btn { background: none; border: 0; padding: 6px 2px; color: var(--hero-ink); font: 500 16px/1 var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) { nav.main { gap: 14px; } nav.main a:not(.btn) { display: none; } header.site .btn { padding: 10px 14px; } }

/* Tombol */
.btn { display: inline-block; padding: 12px 20px; border-radius: 6px; background: var(--brand); color: var(--brand-ink) !important; font-weight: 700; text-decoration: none; font-size: 16px; border: 2px solid var(--brand); }
.btn:hover { filter: brightness(1.18); }
.btn.ghost { background: transparent; color: var(--ink) !important; border-color: currentColor; }
.btn-lg { padding: 16px 26px; font-size: 18px; }
.hero .btn.ghost { color: var(--hero-ink) !important; }

/* Hero */
.hero { overflow-x: clip; background: var(--hero-bg); color: var(--hero-ink); padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); }
.hero h1 { font-weight: 800; font-size: clamp(50px, 6.2vw, 88px); line-height: 1; margin: 0 0 24px; text-wrap: balance; }
.hero p.lead { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; max-width: 50ch; margin: 0 0 28px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note { font-size: 15px; margin: 18px 0 0; }
.hero-split .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
.hero-sub h1 { font-size: clamp(50px, 5.8vw, 84px); line-height: 1; }
.price-line { font: 800 clamp(26px, 2.4vw, 32px)/1.1 var(--display); margin: 0 0 24px; }
.breadcrumb { font-size: 15px; color: var(--hero-ink); padding-top: 20px; margin-top: 0; margin-bottom: 0; background: var(--hero-bg); box-shadow: 0 0 0 100vmax var(--hero-bg); clip-path: inset(0 -100vmax); }
.breadcrumb a { color: var(--hero-ink); }
@media (max-width: 900px) { .hero-split .wrap { grid-template-columns: minmax(0, 1fr); } }

/* Nota: kertas tetap putih di mode gelap, jadi warnanya dikunci di sini */
.mock { --brand-ink: #ffffff; --ink: #10231d; --muted: #485850; --line: #d6ddd6; --surface: #ffffff; --bg: #f2f5f1; --brand: #0b6b53; --accent: #0b6b53; --hot: #d3211a; --warm: #a85200; --cold: #4a5a8c; margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; color: var(--ink); }
.mock-chat { max-width: 92%; }
.mock-head { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--hero-ink); }
.mock-bubble { margin: 0; background: #fff; box-shadow: 0 0 0 1px var(--line); border-radius: 3px 14px 14px 14px; padding: 11px 15px; font-size: 16px; line-height: 1.45; }
.mock-thread { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.mock-thread .mock-bubble { max-width: 86%; }
.mock-bubble.me { align-self: flex-end; background: #d5ebe1; border-radius: 14px 3px 14px 14px; }
.nota-wrap { position: relative;  }
.mock:not(.coba) {  }
.mock-card { position: relative; background: var(--surface); padding: 24px; border-radius: 12px; }
.mock-mini { padding: 26px 22px 18px; }
.mock-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; min-height: 76px; }
.mock-label { display: block; font-size: 14px; font-weight: 700; color: var(--muted); margin: 0 0 6px; }
.mock-why { margin: 0 0 14px; font-size: 15px; color: var(--muted); }
.mock-draft { margin: 0 0 16px; background: var(--bg); padding: 11px 13px; font-size: 15px; line-height: 1.45; }
.mock-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; font-size: 14px; line-height: 1.35; color: var(--muted); }
.mock-steps b { display: block; color: var(--ink); font: 800 22px/1.1 var(--display); }
.mock figcaption { font-size: 14px; color: var(--hero-ink); }
.mock-num { font: 900 34px/1 var(--display); }
.mock-line { margin: 0; font-size: 15px; }
.mock-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mock-table td { padding: 7px 0; border-bottom: 1px solid var(--line); }
.mock-table td:last-child { text-align: right; font-weight: 700; }
.mock-table tr:last-child td { border-bottom: 0; }
@media (max-width: 900px) { .mock-chat { max-width: 100%; } }

/* Cap stempel: elemen pengenal situs ini */
.mock-score, #r-skor, .stamp {
  display: inline-block; font: 900 60px/0.92 var(--display); color: var(--hot); padding: 3px 14px 5px;
  border: 4px solid currentColor; border-radius: 7px; transform: rotate(-6deg); white-space: nowrap;
  
}
.mock-score.warm, .stamp.warm, #r-skor.warm { color: var(--warm); }
.mock-score.cold, .stamp.cold, #r-skor.cold { color: var(--cold); }
#r-skor.hot { color: var(--hot); }
.stamp.biru { color: var(--brand); }
.stamp.kecil { font-size: 30px; border-width: 3px; padding: 2px 9px 3px; border-radius: 5px; }

/* Daftar harga */
.harga { border-bottom: 2px solid var(--ink); }
.harga-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 270px; gap: 16px 40px; padding: 32px 0; border-top: 2px solid var(--ink); align-items: start; }
.harga-row h3 { font: 800 clamp(30px, 3vw, 40px)/1 var(--display); margin: 0 0 10px; }
.harga-row p { margin: 0; color: var(--muted); }
.harga-row ul { list-style: none; margin: 0; padding: 0; }
.harga-row li { padding: 6px 0 6px 24px; position: relative; line-height: 1.4; }
.harga-row li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.harga-kanan { text-align: right; }
.harga-kanan .price { font: 800 clamp(46px, 4.6vw, 62px)/0.95 var(--display); color: var(--ink); white-space: nowrap; }
.harga-kanan .price small { display: block; font: 500 15px/1.3 var(--body); color: var(--muted); margin-top: 16px; }
.harga-kanan .more { display: block; margin-top: 8px; font-weight: 700; }
.harga-kanan .price + .more { margin-top: 16px; }
.harga-utama { --ink: #10231d; --muted: #3f5049; --brand: #0b6b53; background: #f1f8dc; box-shadow: inset 6px 0 0 var(--kuning); color: var(--ink); padding-left: 24px; padding-right: 24px; margin: 0 -24px; border-top-color: transparent; }
.harga-utama + .harga-row { border-top-color: transparent; }
.harga-row p.card-tag { font-weight: 700; color: var(--ink); margin: 0 0 8px; }
@media (max-width: 960px) {
  .harga-row { grid-template-columns: minmax(0, 1fr); }
  .harga-kanan { text-align: left; }
  .harga-utama { padding-left: 20px; padding-right: 20px; margin: 0 -20px; }
}

/* Langkah */
.steps { counter-reset: s; display: grid; gap: 32px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps > div { position: relative; }
.steps > div::before { counter-increment: s; content: counter(s); display: block; font: 800 clamp(64px, 6vw, 84px)/0.9 var(--display); color: var(--brand); margin-bottom: 14px; }
.steps p { color: var(--muted); margin: 0; }
.steps .stamp { position: absolute; top: 10px; left: 56px; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* FAQ */
.faq .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); column-gap: clamp(32px, 5vw, 72px); }
.faq h2 { grid-row: 1 / span 30; }
.faq details { grid-column: 2; border-top: 2px solid var(--ink); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 19px; }
.faq details p { color: var(--muted); margin: 10px 0 0; max-width: 62ch; }
@media (max-width: 760px) { .faq .wrap { display: block; } }

.prose { max-width: 72ch; }
.prose p, .prose li { color: var(--muted); }
.prose h2 { margin-top: 36px; }

/* Penutup */
.cta-band { background: var(--cta-bg); color: #ffffff; }
.cta-band .box h2 { font-size: clamp(48px, 6.4vw, 92px); line-height: 1; max-width: 18ch; margin-bottom: 24px; }
.cta-band .box p { max-width: 54ch; font-size: 19px; margin: 0 0 26px; }
.cta-band .btn { padding: 16px 26px; font-size: 18px; background: var(--kuning); border-color: var(--kuning); color: #10231d !important; }
footer.site { background: #10231d; color: #c5d3cb; padding: 40px 0 0; font-size: 15px; overflow: hidden; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
footer.site a { color: #fff; }

/* Halaman layanan */
.flow { list-style: none; counter-reset: f; margin: 0 0 64px; padding: 0; display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.flow li { counter-increment: f; line-height: 1.45; }
.flow li::before { content: counter(f); display: block; font: 900 72px/0.9 var(--display); color: var(--brand); margin-bottom: 8px; }
.card { display: flex; flex-direction: column; border-top: 2px solid var(--ink); padding: 18px 0 0; }
.card p { color: var(--muted); margin: 0 0 16px; }
.card .more { margin-top: auto; font-weight: 700; }
.grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feat-grid { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.feat-grid h3 { font: 800 30px/1 var(--display); margin-bottom: 14px; }
.feat-grid ul { list-style: none; padding: 0; margin: 0; }
.feat-grid li { padding: 7px 0 7px 24px; position: relative; line-height: 1.45; }
.feat-grid li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }

/* Halaman demo */
.demo-hero h1 { font-size: clamp(46px, 5vw, 68px); line-height: 1; max-width: 24ch; margin-bottom: 14px; }
.demo-hero { padding-bottom: 32px; }
.demo-hero p.lead { margin-bottom: 0; }
.demo-steps { list-style: none; counter-reset: d; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 900px; }
.demo-steps li { counter-increment: d; line-height: 1.35; font-size: 16px; }
.demo-steps li::before { content: counter(d); display: block; font: 800 32px/1 var(--display); color: var(--brand); }
.demo-steps b { font-weight: 700; }
@media (max-width: 640px) { .demo-steps { grid-template-columns: minmax(0, 1fr); } }
.demo-stage { padding-top: clamp(40px, 5vw, 64px); }
.demo-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
@media (max-width: 860px) { .demo-grid { grid-template-columns: minmax(0, 1fr); } }
.demo-panel { background: var(--surface); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); }
.demo-form { display: flex; flex-direction: column; gap: 14px; }
.demo-form h2, .demo-placeholder h2 { font-size: 42px; margin: 0 0 6px; }
.demo-form label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 700; }
.demo-form input, .demo-form select, .demo-form textarea, .tpl-fill input, .tpl-tools input, .tpl-tools select { width: 100%; padding: 11px 12px; border-radius: var(--radius); border: 1px solid var(--muted); background: var(--bg); color: var(--ink); font: 16px/1.45 var(--body); }
.demo-form .btn { align-self: flex-start; cursor: pointer; }
.demo-form .btn:disabled { opacity: 0.6; cursor: default; }
.demo-note, .demo-status { color: var(--muted); font-size: 15px; margin: 0; }
.demo-samples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); margin: 0; }
.chip { font: 700 15px/1 var(--body); padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--muted); background: var(--bg); color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.demo-side { min-width: 0; }
.demo-placeholder { border: 2px dashed var(--muted); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); color: var(--muted); }
.demo-placeholder p { margin: 0 0 18px; }
.demo-ghost { display: grid; gap: 10px; }
.demo-ghost span { display: block; height: 14px; background: var(--line); }
.demo-ghost span:nth-child(1) { width: 40%; height: 28px; }
.demo-ghost span:nth-child(2) { width: 90%; }
.demo-ghost span:nth-child(3) { width: 70%; }
.demo-result { min-width: 0; }
.demo-result h3 { font-size: 17px; margin-top: 20px; }
.demo-score-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; min-height: 80px; }
.demo-why { color: var(--muted); }
.demo-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.demo-actions .btn { cursor: pointer; }
.demo-skor.hot { color: var(--hot); }
.demo-skor.warm { color: var(--warm); }
.demo-skor.cold { color: var(--cold); }
.demo-tl { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 12px; }
.demo-tl li { margin: 0; }
.demo-tl pre { margin-top: 6px; }
.demo-table-wrap { overflow-x: auto; border-top: 2px solid var(--ink); }
.demo-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.demo-table th, .demo-table td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--muted); vertical-align: top; }
.demo-table td.demo-skor { font-weight: 800; }
.demo-empty td { color: var(--muted); }
.link-btn { background: none; border: 0; padding: 0 4px; color: var(--brand); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
#hasil { scroll-margin-top: 84px; }

/* Pustaka template internal */
.var { color: var(--accent); font-weight: 700; }
.tpl-hero { padding-top: 32px; }
.tpl-fill { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tpl-fill label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.tpl-tools { display: grid; gap: 10px; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
@media (max-width: 760px) { .tpl-tools { grid-template-columns: 1fr; } }
.tpl-count { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.tpl-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
@media (max-width: 480px) { .tpl-list { grid-template-columns: 1fr; } }
.tpl { background: var(--surface); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; min-width: 0; }
.tpl[hidden] { display: none; }
.tpl h3 { font-size: 17px; }
.tpl-meta { color: var(--accent); font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.tpl-kapan { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.tpl-teks { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius); background: var(--bg); font: 15px/1.5 var(--body); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow-y: auto; }
.tpl-act { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tpl-act .btn { padding: 8px 16px; cursor: pointer; }
.tpl-link { color: var(--muted); font-size: 13px; text-decoration: none; }
.tpl-empty { color: var(--muted); }

/* Chat */
.chat-launcher { position: fixed; right: 20px; bottom: 20px; z-index: 30; padding: 14px 20px; border-radius: 6px; border: 2px solid var(--brand); background: var(--brand); color: var(--brand-ink); font: 700 16px/1 var(--body); cursor: pointer; box-shadow: 0 6px 20px rgba(16, 35, 29, 0.3); }
.chat-launcher:hover { filter: brightness(1.18); }
.chat-panel { position: fixed; right: 20px; bottom: 80px; z-index: 30; width: min(380px, calc(100vw - 32px)); height: min(540px, calc(100vh - 110px)); display: flex; flex-direction: column; background: var(--surface); border-radius: 6px; box-shadow: 0 12px 40px rgba(16, 35, 29, 0.35); overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-panel header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chat-panel header span { display: block; font-size: 13px; color: var(--muted); }
.chat-close { background: none; border: 0; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.chat-log { flex: 1; min-height: 0; overscroll-behavior: contain; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { margin: 0; padding: 10px 13px; border-radius: 10px; max-width: 85%; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.assistant { background: var(--bg); align-self: flex-start; }
.chat-msg.user { background: var(--brand); color: var(--brand-ink); align-self: flex-end; }
.chat-msg.typing { color: var(--muted); }
.chat-msg.error { color: var(--hot); }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat-form textarea { flex: 1; resize: none; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--muted); background: var(--bg); color: var(--ink); font: 15px/1.4 var(--body); }
.chat-form .btn { padding: 10px 16px; cursor: pointer; }
.chat-form .btn:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 480px) { .chat-launcher { right: 16px; bottom: 16px; } .chat-panel { right: 16px; bottom: 72px; } }

/* Beranda: kotak coba */
.hero-coba { padding-top: clamp(24px, 3vw, 40px); }
.hero-coba .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
.hero-coba .hero-copy { padding-top: 12px; }
@media (max-width: 960px) { .hero-coba .wrap { grid-template-columns: minmax(0, 1fr); } }
.coba .mock-card { padding: 26px 22px 18px; }
.coba textarea, .coba select, .coba input[id="c-nama"] { width: 100%; padding: 9px 11px; border: 1px solid var(--muted); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: 15px/1.45 var(--body); }
.coba textarea { resize: vertical; display: block; }
.link { background: none; border: 0; padding: 4px 0; color: var(--brand); font: 700 14px/1.3 var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.coba-isi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 12px; font-size: 14px; color: var(--muted); }
.coba-baris { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
.coba-baris label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 700; color: var(--muted); }
.coba .btn { width: 100%; cursor: pointer; text-align: center; }
.coba .btn:disabled { opacity: 0.65; cursor: progress; }
.coba-status { min-height: 21px; margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.coba-hasil { position: relative; border-top: 1px dashed var(--muted); margin-top: 8px; padding-top: 12px; }
.coba-hasil > * { transition: opacity 0.2s; }
.coba-hasil.membaca > * { opacity: 0.35; }
.coba-hasil.intro .mock-score, .coba-hasil.intro .mock-why, .coba-hasil.intro .mock-draft { opacity: 0; }
.coba .mock-row { min-height: 64px; padding-bottom: 8px; margin-bottom: 8px; }
.coba .mock-row .mock-label { margin: 0; }
.coba .mock-score { font-size: 46px; border-width: 3px; padding: 2px 11px 4px; }
.coba .mock-why { margin-bottom: 10px; }
.coba-tab { display: flex; gap: 2px; }
.coba-tab button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 5px 9px 4px; color: var(--muted); font: 700 14px/1.2 var(--body); cursor: pointer; }
.coba-tab button:first-child { padding-left: 0; }
.coba-tab button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.coba .mock-draft { margin: 0 0 8px; min-height: 92px; }
.coba-aksi { display: flex; gap: 16px; margin: 0; font-size: 14px; font-weight: 700; }
.coba-catatan { margin: 8px 0 0; font-size: 14px; color: var(--hero-ink); }
.coba-catatan a { color: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .cap-baru .mock-score { animation: cap 0.26s cubic-bezier(0.3, 1.3, 0.5, 1) both; }
  .cap-baru .mock-why, .cap-baru .mock-draft { animation: muncul 0.4s ease-out 0.2s both; }
  .sheet tr.muncul { animation: sorot 1.6s ease-out; }
  .membaca .mock-score { animation: goyang 0.5s ease-in-out infinite alternate; }
  .coba-hasil.membaca { overflow: hidden; }
  .coba-hasil.membaca::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent calc(100% - 3px), var(--brand) 0); animation: pindai 0.9s ease-in-out infinite alternate; }
  .hentak { animation: hentak 0.24s ease-out 0.16s; }
}
@keyframes pindai { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes hentak { 30% { transform: translateY(4px); } }
@keyframes cap { from { opacity: 0; transform: rotate(-16deg) scale(2.8); } }
@keyframes muncul { from { opacity: 0; } }
@keyframes sorot { from { background: rgba(255, 210, 31, 0.5); } }
@keyframes goyang { from { transform: rotate(-6deg) translateY(-3px); } to { transform: rotate(-4deg) translateY(3px); } }

/* Angka terukur */
.ukur { background: var(--ukur-bg); color: #e2e8e2; padding: clamp(32px, 4vw, 48px) 0; }
.ukur dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; }
.ukur dt { font: 800 clamp(34px, 3.2vw, 44px)/1 var(--display); margin-bottom: 8px; color: var(--kuning); }
.ukur dd { margin: 0; font-size: 15px; line-height: 1.4; }
@media (max-width: 860px) { .ukur dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .ukur dl { grid-template-columns: minmax(0, 1fr); } }

/* Alur: langkah di kiri, hasilnya di kanan */
.alur-baris { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 20px clamp(28px, 4vw, 56px); padding: clamp(28px, 3.4vw, 44px) 0; border-top: 2px solid var(--ink); align-items: start; counter-increment: alur; }
.alur { counter-reset: alur; }
.alur-teks h3 { font: 800 clamp(28px, 2.6vw, 36px)/1.05 var(--display); margin: 0 0 10px; }
.alur-teks h3::before { content: counter(alur) ". "; color: var(--brand); }
.alur-teks p { margin: 0; color: var(--muted); max-width: 44ch; }
@media (max-width: 960px) { .alur-baris { grid-template-columns: minmax(0, 1fr); } }
.sheet { overflow-x: auto; border: 1px solid var(--muted); background: var(--bg); }
.sheet table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 14px; line-height: 1.35; }
.sheet th, .sheet td { border: 1px solid var(--line); padding: 7px 9px; text-align: left; vertical-align: top; }
.sheet th { background: var(--surface); font-weight: 700; white-space: nowrap; }
.sheet .demo-skor { font-weight: 800; }
.sheet td:nth-child(5) { min-width: 180px; }
.sheet td:nth-child(6) { min-width: 126px; }
.sheet .link { white-space: nowrap; }
.surat { margin: 0; padding: 18px 20px; background: var(--surface); border-left: 4px solid var(--brand); font: 15px/1.5 var(--body); white-space: pre-wrap; overflow-wrap: anywhere; }
.hari { background: var(--surface); padding: 18px 20px; }
.hari label { font-weight: 700; display: block; margin-bottom: 8px; }
.hari output { font: 800 26px/1 var(--display); color: var(--brand); }
input[type="range"] { width: 100%; accent-color: var(--brand); height: 28px; margin: 0; cursor: pointer; }
.hari-titik { list-style: none; position: relative; height: 26px; margin: 0 8px 12px; padding: 0; font-size: 14px; font-weight: 700; color: var(--muted); }
.hari-titik li { position: absolute; transform: translateX(-50%); }
.hari-titik li[data-h="0"] { left: 0; }
.hari-titik li[data-h="1"] { left: 12.5%; }
.hari-titik li[data-h="3"] { left: 37.5%; }
.hari-titik li[data-h="7"] { left: 87.5%; }
.hari-titik li.lewat { color: var(--brand); }
.hari-judul { font-weight: 700; margin: 0 0 4px; }
.hari-isi { margin: 0; color: var(--muted); min-height: 76px; }

/* Batasan */
.jujur-isi { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.jujur-isi li { border-top: 2px solid var(--ink); padding-top: 14px; color: var(--muted); }
.jujur-isi b { display: block; color: var(--ink); font-size: 19px; line-height: 1.3; margin-bottom: 6px; }
@media (max-width: 760px) { .jujur-isi { grid-template-columns: minmax(0, 1fr); } }

/* Balik modal */
.modal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(28px, 5vw, 64px); align-items: center; margin-top: 40px; padding: clamp(22px, 3vw, 32px); background: var(--surface); }
.modal h3 { font-size: 19px; margin-bottom: 10px; }
.modal-nilai { margin: 6px 0 0; font: 800 34px/1 var(--display); }
.modal-hasil { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; color: var(--muted); font-size: 15px; line-height: 1.45; }
.modal-hasil b { font: 900 clamp(68px, 7vw, 96px)/0.9 var(--display); color: var(--brand); }
@media (max-width: 760px) { .modal { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .sheet table { min-width: 0; font-size: 13px; }
  .sheet th:nth-child(3), .sheet td:nth-child(3), .sheet th:nth-child(5), .sheet td:nth-child(5) { display: none; }
  .sheet th { white-space: normal; }
  .sheet th, .sheet td { padding: 6px; }
  .sheet td:nth-child(6) { min-width: 0; }
  .sheet .link { white-space: normal; text-align: left; }
}

.chat-launcher.sembunyi { display: none; }
.coba-isi .link[aria-pressed="true"] { text-decoration-thickness: 3px; }

/* HP: kotak coba naik ke atas, tombol ajakan turun di bawahnya */
@media (max-width: 960px) {
  .hero-coba .wrap { gap: 0; }
  .hero-coba .hero-copy { display: contents; }
  .hero-coba h1 { order: 1; }
  .hero-coba .lead { order: 2; }
  .hero-coba .coba { order: 3; margin-bottom: 28px; }
  .hero-coba .cta { order: 4; }
  .hero-coba .hero-note { order: 5; }
}
/* Sasaran sentuh minimal 44px */
@media (max-width: 760px), (pointer: coarse) {
  .link, .coba-tab button, .coba-aksi a, .harga-kanan .more, .theme-btn, .breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; }
  .faq summary { padding: 10px 0; }
  footer.site a, .cuplikan-catatan a, a.buka { display: inline-block; padding: 11px 0; }
  .coba textarea, .coba select, .coba input[id="c-nama"], .demo-form input, .demo-form select, .chip { min-height: 44px; }
  input[type="range"] { height: 44px; }
  .harga-kanan .more { margin-top: 0; }
  .logo { min-height: 44px; }
  nav.main a:not(.btn) { padding: 10px 0; }
}

/* Halaman layanan: judul di kiri, isi di kanan */
.blok { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); gap: 16px clamp(28px, 4vw, 56px); padding: clamp(24px, 3vw, 40px) 0; border-top: 2px solid var(--ink); }
.blok:first-child { border-top: 0; padding-top: 0; }
.blok:last-child { padding-bottom: 0; }
.blok h2 { font-size: clamp(30px, 3vw, 42px); margin: 0; }
.urut { list-style: none; counter-reset: u; margin: 0; padding: 0; display: grid; gap: 16px; }
.urut li { counter-increment: u; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; }
.urut li::before { content: counter(u); font: 800 28px/1 var(--display); color: var(--brand); }
.centang { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 36px; }
.centang li { position: relative; padding-left: 24px; line-height: 1.45; }
.centang li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.batas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.batas li { padding-left: 16px; border-left: 4px solid var(--warm); line-height: 1.45; }
@media (max-width: 860px) { .blok { grid-template-columns: minmax(0, 1fr); } .centang { grid-template-columns: minmax(0, 1fr); } }
.coba-aksi { align-items: center; }
@media (max-width: 760px), (pointer: coarse) { .coba-isi { gap: 0 12px; margin-bottom: 8px; } }

/* Header dan pilihan pekerjaan di halaman website */
header.site .btn { white-space: nowrap; }
.pilih { margin: 0; }
.pilih label { display: flex; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--line); font-size: 15px; cursor: pointer; }
.pilih input { width: 20px; height: 20px; flex: none; accent-color: var(--brand); }
.pilih .btn { display: block; margin-top: 18px; text-align: center; }

/* Halaman teks panjang */
.prosa .wrap { max-width: 720px; }
.prosa h1 { font: 900 clamp(46px, 6vw, 72px)/1 var(--display); margin: 0 0 18px; }
.prosa h2 { font: 800 clamp(26px, 3vw, 34px)/1.1 var(--display); margin: 36px 0 10px; }
.prosa p, .prosa li { line-height: 1.6; }
.prosa ul { padding-left: 22px; }
.prosa li { margin-bottom: 8px; }

/* Halaman bahasa lain: huruf utama hanya untuk Latin, sisanya memakai huruf sistem */
.hal-bahasa h1 { font-family: var(--display), system-ui, sans-serif; line-height: 1.15; overflow-wrap: anywhere; }
.hal-bahasa { font-family: var(--body), system-ui, sans-serif; }
.tabel-bahasa { width: 100%; border-collapse: collapse; margin: 20px 0 14px; }
.tabel-bahasa td { padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabel-bahasa .angka { font-weight: 700; white-space: nowrap; text-align: end; padding-inline-start: 16px; }
.hal-bahasa .cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.catatan-mesin { font-size: 14px; color: var(--muted); }
.daftar-bahasa { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 16px; }
.daftar-bahasa li { margin: 0; }
.daftar-bahasa a { display: flex; align-items: center; min-height: 44px; }
@media (max-width: 520px) { .tabel-bahasa .angka { white-space: normal; } }
.logo { direction: ltr; unicode-bidi: isolate; }

.walkthrough { margin: 24px 0 8px; }
.walkthrough video { display: block; width: 100%; max-width: 900px; height: auto; border: 2px solid var(--ink); background: var(--surface); }
.walkthrough figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }

/* Beranda: halaman tenang, warnanya datang dari contoh kerja */
.logo span { color: var(--brand); }
.hero h1, .hero-sub h1 { font-weight: 700; font-size: clamp(38px, 5vw, 68px); line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.025em; }
.cta-band .box h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.06; }
.btn { border-radius: var(--radius); }
.awal { overflow: hidden; padding: clamp(36px, 5vw, 72px) 0 clamp(40px, 5vw, 72px); }
.awal .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.awal h1 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 20px; text-wrap: balance; }
.awal .lead { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; color: var(--muted); max-width: 46ch; margin: 0 0 26px; }
.awal .cta { display: flex; flex-wrap: wrap; gap: 10px; }
.awal .catatan { font-size: 15px; color: var(--muted); margin: 18px 0 0; }
.galeri { position: relative; aspect-ratio: 11 / 9; }
.bingkai { display: block; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 35, 29, 0.1), 0 18px 44px rgba(16, 35, 29, 0.16); border: 1px solid var(--line); }
.bingkai img { display: block; width: 100%; height: auto; }
.galeri .bingkai { position: absolute; width: 68%; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.galeri .g1 { left: 0; top: 0; z-index: 1; }
.galeri .g2 { right: 0; top: 16%; z-index: 2; }
.galeri .g3 { left: 12%; bottom: 0; z-index: 3; }
.galeri .bingkai:hover, .galeri .bingkai:focus-visible { transform: translateY(-6px); z-index: 4; }
@media (prefers-reduced-motion: no-preference) {
  .galeri .bingkai { animation: naik 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .galeri .g2 { animation-delay: 0.12s; }
  .galeri .g3 { animation-delay: 0.24s; }
}
@keyframes naik { from { opacity: 0; transform: translateY(28px); } }
@media (max-width: 860px) { .awal .wrap { grid-template-columns: minmax(0, 1fr); } }
.bagian { padding: clamp(56px, 7vw, 96px) 0; }
.bagian.alt { background: var(--surface); }
.bagian > .wrap > h2, .dua h2 { margin: 0 0 12px; max-width: 22ch; }
.bagian .sub { color: var(--muted); max-width: 56ch; margin: 0 0 32px; }
.karya { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 32px); }
.karya article:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.karya h3 { font-size: clamp(22px, 2vw, 28px); margin: 14px 0 6px; }
.karya p { color: var(--muted); margin: 0 0 8px; }
.karya .bingkai { transition: transform 0.2s ease; }
.karya .bingkai:hover { transform: translateY(-4px); }
.karya .buka { font-weight: 700; }
@media (max-width: 760px) { .karya, .karya article:first-child { grid-template-columns: minmax(0, 1fr); } }
.dua { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.dua .kotak-coba { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 36px rgba(16, 35, 29, 0.08); }
.dua .mock-card { background: var(--bg); }
.dua ul { padding: 0; margin: 20px 0 0; list-style: none; }
.dua li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--muted); }
.dua li b { color: var(--ink); }
.dua .coba-catatan { color: var(--muted); }
@media (max-width: 860px) { .dua { grid-template-columns: minmax(0, 1fr); } }
.bagian .jasa + h2.jasa-lanjut { margin-top: 64px; }
.jasa { border-top: 1px solid var(--line); }
.jasa article { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) 230px; gap: 8px clamp(16px, 3vw, 40px); padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.jasa h3 { font-size: 22px; margin: 0; }
.jasa h3 a { color: inherit; text-decoration: none; }
.jasa h3 a:hover { text-decoration: underline; }
.jasa p { margin: 0; color: var(--muted); }
.jasa .harga-jasa { font-weight: 700; color: var(--ink); text-align: right; white-space: nowrap; }
@media (max-width: 760px) { .jasa article { grid-template-columns: minmax(0, 1fr); } .jasa .harga-jasa { text-align: left; } }
.urut { list-style: none; counter-reset: l; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); padding: 0; margin: 0; }
.urut li { counter-increment: l; border-top: 2px solid var(--ink); padding-top: 14px; }
.urut li::before { content: counter(l); font-weight: 700; color: var(--brand); }
.urut h3 { font-size: 20px; margin: 4px 0 6px; }
.urut p { margin: 0; color: var(--muted); font-size: 16px; }
@media (max-width: 860px) { .urut { grid-template-columns: minmax(0, 1fr); } }
details.lanjut { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
details.lanjut > summary { cursor: pointer; padding: 18px 0; font-weight: 700; font-size: 19px; min-height: 44px; }
details.lanjut .alur { padding: 0; background: none; }
details.lanjut .alur > .wrap { padding: 0; }
details.lanjut .alur h2 { display: none; }

.urut li { display: block; }
.urut li::before { display: block; margin-bottom: 2px; }
@media (max-width: 560px) {
  .logo { font-size: 21px; gap: 6px; }
  .logo img { width: 26px; height: 26px; }
  header.site nav.main { gap: 10px; }
  header.site nav.main .btn { padding: 10px 12px; font-size: 14px; white-space: nowrap; }
  header.site .theme-btn { font-size: 14px; }
}

/* Hasil riset referensi: judul lebih ringan, kontrol lebih kecil, garis tipis */
h1, h2, h3, .hero h1, .hero-sub h1, .awal h1 { font-weight: 600; }
.awal h1 { font-size: clamp(38px, 4.5vw, 62px); line-height: 1.04; letter-spacing: -0.04em; }
.hero h1, .hero-sub h1 { font-size: clamp(36px, 4.4vw, 60px); letter-spacing: -0.035em; }
h2 { font-size: clamp(28px, 3.1vw, 42px); letter-spacing: -0.03em; }
.cta-band .box h2 { font-size: clamp(32px, 3.8vw, 52px); font-weight: 600; letter-spacing: -0.03em; }
.btn, .btn-lg { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; font-size: 15px; font-weight: 600; border-radius: 8px; border-width: 1px; }
.btn.ghost, .hero .btn.ghost { border: 1px solid var(--line); background: transparent; }
.btn.ghost:hover { border-color: var(--ink); filter: none; }
.cta-band .btn { padding: 10px 18px; font-size: 15px; }
.awal { position: relative; background: radial-gradient(640px 460px at 82% 38%, rgba(214, 247, 107, 0.34), transparent 70%), radial-gradient(560px 420px at 60% 86%, rgba(11, 107, 83, 0.12), transparent 70%); }
html[data-theme="dark"] .awal { background: radial-gradient(640px 460px at 82% 38%, rgba(143, 227, 191, 0.14), transparent 70%); }
.bingkai { position: relative; padding-top: 22px; border-radius: 10px; box-shadow: 0 1px 1px rgba(16, 35, 29, 0.06), 0 16px 40px rgba(16, 35, 29, 0.14); background: #f2f5f1 radial-gradient(circle 3px at 12px 11px, #c3ccc5 98%, transparent) no-repeat, #f2f5f1; }
.bingkai::before { content: ""; position: absolute; top: 8px; left: 20px; width: 6px; height: 6px; border-radius: 50%; background: #c3ccc5; box-shadow: 10px 0 0 #c3ccc5; }
.galeri .bingkai { width: 72%; }
.urut li { border-top-width: 1px; border-top-color: var(--line); }
.faq details { border-top-width: 1px; border-top-color: var(--line); }

/* Tombol ganti bahasa tetap terlihat di HP */
@media (max-width: 760px) {
  header.site nav.main a[hreflang] { display: inline-flex !important; align-items: center; min-height: 44px; font-size: 14px; }
}
@media (max-width: 400px) {
  header.site nav.main { gap: 8px; }
  header.site nav.main .btn { padding: 8px 10px; font-size: 13px; }
  .logo { font-size: 19px; }
}
@media (max-width: 400px) { .btn-panjang { display: none; } }

/* Dari riset DESIGN.md: hasil kerja jadi pemeran utama, kedalaman dari perbedaan permukaan, satu tombol utama */
h1, h2, h3, .hero h1, .hero-sub h1, .awal h1, .cta-band .box h2 { font-weight: 500; }
.awal, html[data-theme="dark"] .awal { background: none; }
@media (min-width: 861px) { .awal .wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 56px); } }
.btn.ghost, .hero .btn.ghost { border: 1px solid transparent; background: rgba(11, 107, 83, 0.1); }
.btn.ghost:hover { border-color: transparent; background: rgba(11, 107, 83, 0.17); }
html[data-theme="dark"] .btn.ghost { background: rgba(143, 227, 191, 0.13); }
html[data-theme="dark"] .btn.ghost:hover { background: rgba(143, 227, 191, 0.2); }
.bingkai { border-radius: 14px; box-shadow: none; }
.dua .kotak-coba { box-shadow: none; border-radius: 14px; }
.dua .mock-card { background: var(--surface); }
.panggung-tab { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.panggung-tab button { min-height: 44px; padding: 8px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: 500 15px var(--body); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.panggung-tab button:hover { color: var(--ink); }
.panggung-tab button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.panggung-layar { position: relative; aspect-ratio: 1280 / 824; padding-top: 0; }
.layar { position: absolute; inset: 22px 0 0; opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s linear 0.45s; }
.layar.aktif { opacity: 1; visibility: visible; transition: opacity 0.45s ease; }
.layar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (prefers-reduced-motion: reduce) { .layar, .layar.aktif, .panggung-tab button { transition: none; } }

/* Hero lebih berani: hasil kerja menonjol di atas hijau pekat */
.awal, html[data-theme="dark"] .awal { --ink: #ffffff; --muted: #d4e4dc; --surface: #ffffff; background: #0b3b2e; color: #ffffff; padding: clamp(44px, 6vw, 88px) 0 clamp(52px, 6vw, 96px); }
.awal h1 { color: #ffffff; font-size: clamp(42px, 5.4vw, 76px); line-height: 1; }
.awal .lead, .awal .catatan { color: #d4e4dc; }
.awal .btn, html[data-theme="dark"] .awal .btn { background: #d6f76b; border-color: #d6f76b; color: #10231d !important; }
.awal .btn:hover { filter: brightness(1.06); }
.awal .btn.ghost, html[data-theme="dark"] .awal .btn.ghost { background: rgba(255, 255, 255, 0.12); border-color: transparent; color: #ffffff !important; }
.awal .btn.ghost:hover { background: rgba(255, 255, 255, 0.2); }
.awal :focus-visible { outline-color: #d6f76b; }
.awal .panggung-tab button { color: #d4e4dc; }
.awal .panggung-tab button:hover { color: #ffffff; }
.awal .panggung-tab button[aria-pressed="true"] { background: #d6f76b; color: #10231d; box-shadow: none; }
.awal .bingkai { border-color: rgba(255, 255, 255, 0.18); background: #123f33; }
.awal .bingkai::before { background: rgba(255, 255, 255, 0.45); box-shadow: 10px 0 0 rgba(255, 255, 255, 0.45); }
.banding { --x: 50%; position: relative; max-width: 1040px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.banding img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.banding .sebelum { clip-path: inset(0 0 0 var(--x)); }
.banding .garis { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: #d6f76b; box-shadow: 0 0 0 1px rgba(16, 35, 29, 0.5); pointer-events: none; }
.banding .garis::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%; background: #d6f76b; box-shadow: 0 2px 8px rgba(16, 35, 29, 0.4); }
.banding .tanda { position: absolute; top: 12px; padding: 4px 10px; border-radius: 6px; background: #10231d; color: #ffffff; font-size: 14px; font-weight: 500; pointer-events: none; }
.banding .tanda.kiri { left: 12px; }
.banding .tanda.kanan { right: 12px; }
.banding input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.banding input:focus-visible { opacity: 0.01; }
.banding:focus-within { outline: 3px solid var(--brand); outline-offset: 3px; }

/* Judul berupa kalimat penuh: lebih kecil supaya tombol tetap terlihat */
.awal h1 { font-size: clamp(36px, 3.9vw, 56px); line-height: 1.06; text-wrap: pretty; }
@media (min-width: 861px) { .awal .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
@media (max-width: 1100px) { .btn-panjang { display: none; } }
@media (max-width: 1100px) { header.site nav.main > a:not(.btn):not([hreflang]) { display: none; } header.site nav.main a[hreflang] { display: inline-flex !important; align-items: center; min-height: 44px; } }
@media (min-width: 761px) { .jasa article { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) 230px; } }

.bukti { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); margin: 0; padding: 0; }
.bukti li { border-top: 1px solid var(--line); padding-top: 14px; }
.bukti h3 { font-size: 20px; margin: 0 0 6px; }
.bukti p { margin: 0; color: var(--muted); font-size: 16px; }
@media (max-width: 960px) { .bukti { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bukti { grid-template-columns: minmax(0, 1fr); } }

/* Demo AI Agent */
.agen h1 { font-size: clamp(34px, 4vw, 52px); font-weight: 500; letter-spacing: -0.035em; margin: 0 0 12px; }
.agen-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.agen-kiri, .agen-kanan { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(16px, 2vw, 24px); }
.agen-kanan h2 { font-size: 18px; letter-spacing: -0.01em; margin: 0 0 10px; }
.agen-chat { display: flex; flex-direction: column; gap: 10px; height: 340px; overflow-y: auto; padding: 2px; }
.agen-pesan { margin: 0; padding: 10px 14px; border-radius: 12px; max-width: 86%; font-size: 16px; line-height: 1.45; }
.agen-pesan.agent { background: var(--bg); align-self: flex-start; }
.agen-pesan.saya { background: var(--brand); color: var(--brand-ink); align-self: flex-end; }
.agen-contoh { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 12px 0; }
.agen-contoh .link { min-height: 44px; }
.agen-form { display: flex; gap: 8px; }
.agen-form input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--muted); border-radius: 8px; background: var(--bg); color: var(--ink); font: 16px var(--body); }
.agen-langkah { list-style: none; margin: 0 0 22px; padding: 0; font-size: 15px; }
.agen-langkah li { padding: 8px 0; border-top: 1px solid var(--line); }
.agen-langkah li.kosong { color: var(--muted); }
.agen-langkah b { display: block; font-weight: 600; }
.agen-langkah span { color: var(--muted); }
.agen-hari { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 14px; }
.agen-hari b { width: 62px; font-weight: 600; }
.agen-slot { padding: 3px 8px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); }
.agen-slot.terisi { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.agen-sales { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.agen-sales p { margin: 0; font-size: 15px; color: var(--muted); }
.agen + .bagian .btn, .agen .coba-catatan { margin-top: 14px; }
.agen .coba-catatan { color: var(--muted); }
.tautan-agen { margin: 26px 0 0; }
@media (max-width: 860px) { .agen-grid { grid-template-columns: minmax(0, 1fr); } .agen-chat { height: 300px; } }

/* Hero: agent sungguhan jadi pemeran utama. Pesan muncul berurutan sekali saja. */
.cuplikan { background: #ffffff; color: #10231d; border-radius: 14px; padding: clamp(16px, 2vw, 24px); }
.cuplikan-judul { margin: 0 0 12px; font-weight: 600; font-size: 15px; color: #485850; }
.cuplikan-isi { display: flex; flex-direction: column; gap: 8px; }
.cuplikan .agen-pesan { font-size: 15px; padding: 9px 13px; }
.cuplikan .agen-pesan.agent { background: #f2f5f1; }
.cuplikan .agen-pesan.saya { background: #0b6b53; color: #ffffff; }
.cuplikan-alat { margin: 0; align-self: flex-start; padding: 5px 10px; border-left: 3px solid #0b6b53; font-size: 14px; color: #485850; }
.cuplikan-alat b { color: #10231d; font-weight: 600; }
.cuplikan-catatan { margin: 12px 0 0; font-size: 14px; color: #485850; }
.cuplikan-catatan a { color: #0b6b53; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .cuplikan-isi > * { animation: tiba 0.35s ease-out both; }
  .cuplikan-isi .c2 { animation-delay: 0.7s; }
  .cuplikan-isi .c3 { animation-delay: 1.3s; }
  .cuplikan-isi .c4 { animation-delay: 2.4s; }
  .cuplikan-isi .c5 { animation-delay: 3.1s; }
  .cuplikan-isi .c6 { animation-delay: 3.7s; }
}
@keyframes tiba { from { opacity: 0; transform: translateY(6px); } }
.bagian { padding: clamp(44px, 5vw, 72px) 0; }
.awal { padding: clamp(36px, 4.5vw, 64px) 0; }
.awal .btn.ghost, html[data-theme="dark"] .awal .btn.ghost { border: 1px solid rgba(255, 255, 255, 0.55); background: transparent; }

/* Gerak yang menjelaskan: tanda agent bekerja, langkah baru, janji baru, dan isi yang tiba saat digulir */
@media (prefers-reduced-motion: no-preference) {
  .agen-pesan { animation: tiba 0.25s ease-out; }
  .agen-langkah li.baru { animation: geser-masuk 0.35s ease-out both; }
  .agen-slot.baru { animation: pop-slot 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
  .agen-ketik i { animation: titik 1s ease-in-out infinite; }
  .agen-ketik i:nth-child(2) { animation-delay: 0.15s; }
  .agen-ketik i:nth-child(3) { animation-delay: 0.3s; }
  .muncul-aktif .karya article, .muncul-aktif .bukti li, .muncul-aktif .urut li { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease-out, transform 0.45s ease-out; }
  .muncul-aktif .karya article.terlihat, .muncul-aktif .bukti li.terlihat, .muncul-aktif .urut li.terlihat { opacity: 1; transform: none; }
  .btn { transition: transform 0.12s ease, background-color 0.15s ease; }
  .btn:active { transform: scale(0.97); }
  details > summary::marker { transition: color 0.15s ease; }
  details[open] > *:not(summary) { animation: tiba 0.25s ease-out; }
}
.agen-ketik { display: inline-flex; gap: 5px; align-items: center; min-height: 40px; }
.agen-ketik i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
@keyframes geser-masuk { from { opacity: 0; transform: translateX(-10px); } }
@keyframes pop-slot { 0% { transform: scale(0.85); } 60% { transform: scale(1.08); } }
@keyframes titik { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* Toggle bahasa di menu */
.pilih-bahasa { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--hero-ink); cursor: pointer; }
.pilih-bahasa span { text-decoration: underline; text-underline-offset: 4px; }
.pilih-bahasa select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.pilih-bahasa:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* Toggle terang gelap dan bahasa terlihat sebagai kontrol */
header.site .theme-btn, .pilih-bahasa { display: inline-flex; align-items: center; min-height: 40px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--hero-ink); font: 500 14px/1 var(--body); text-decoration: none; cursor: pointer; }
header.site .theme-btn { gap: 6px; padding: 0 10px; }
header.site .theme-btn:hover, .pilih-bahasa:hover { border-color: var(--ink); }
.pilih-bahasa { padding: 0 8px; }
.pilih-bahasa span { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.pilih-bahasa b { font-weight: 500; }
@media (max-width: 560px) {
  header.site .theme-btn { padding: 0 9px; }
  header.site .theme-btn span { display: none; }
  .pilih-bahasa { padding: 0 6px; }
}
@media (max-width: 360px) { .pilih-bahasa svg:last-child { display: none; } header.site nav.main { gap: 4px; } .logo { font-size: 17px; gap: 4px; } .logo img { width: 22px; height: 22px; } header.site .theme-btn { padding: 0 6px; } }
.sheet table { min-width: 0; }
.sheet td:nth-child(5) { min-width: 130px; }
.sheet td:nth-child(6) { min-width: 0; }
@media (max-width: 900px) { .sheet th, .sheet td { padding: 6px; } }
@media (max-width: 420px) { .sheet th:nth-child(1), .sheet td:nth-child(1) { display: none; } }