/* =========================================================================
   SMART FIT — gaya visual
   Kertas krem + tinta navy + aksen oranye bendera. Tipografi: Bricolage
   Grotesque (judul), Geist (teks), Geist Mono (label & data).
   ========================================================================= */

:root {
  --paper: #f4f1ea;
  --paper-2: #ebe6db;
  --card: #fffdf8;
  --ink: #0e1726;
  --ink-2: #2b3445;
  --muted: #667085;
  --line: #d9d2c3;
  --line-2: #c8bfac;
  --accent: #ff5b22;
  --accent-ink: #b8360a;
  --accent-soft: #ffe3d6;
  --night: #0e1726;
  --night-2: #172338;
  --night-line: #2a3a55;
  --chalk: #e9edf5;
  --ok: #1f7a4d;
  --ok-soft: #dcf1e5;
  --warn: #9a6200;
  --warn-soft: #fbefd5;
  --info: #2457c5;
  --info-soft: #e1e9fb;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 0 rgba(14, 23, 38, .04), 0 12px 32px -18px rgba(14, 23, 38, .25);
  --max: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.mono, .eyebrow, .tag, .btn, .chip, .stat__label, .nav__link {
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: 12px; text-transform: uppercase; color: var(--accent-ink);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; }
.on-night .eyebrow { color: var(--accent); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.05; }
h1 { font-size: clamp(40px, 7vw, 84px); letter-spacing: -.035em; }
h2 { font-size: clamp(28px, 4vw, 46px); }
h3 { font-size: clamp(20px, 2.2vw, 26px); }
p { margin: 0; }
.lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-2); max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.01em; line-height: 1; }
.brand__sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  text-decoration: none; font-size: 12.5px; text-transform: uppercase;
  padding: 9px 13px; border-radius: 999px; color: var(--ink-2);
  transition: background .15s, color .15s;
}
.nav__link:hover { background: var(--paper-2); }
.nav__link[aria-current="page"] { background: var(--ink); color: var(--paper); }
.btn.nav__toggle { display: none; }

@media (max-width: 860px) {
  .nav {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 10px var(--gutter) 18px;
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .18s ease;
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav__link { padding: 14px; font-size: 13px; }
  .btn.nav__toggle { display: inline-flex; }
  .btn.header-cta { display: none; }
}
@media (max-width: 480px) {
  .brand__sub { display: none !important; }
  .brand__name { font-size: 15px; }
}
.brand__name { white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--paper); --bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 20px; border-radius: 999px;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  font-size: 13px; font-weight: 500; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: transform .12s ease, background .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(14, 23, 38, .5); }
.btn:active { transform: none; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--accent { --bg: var(--accent); --fg: #fff; --bd: var(--accent); }
.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--line-2); }
.btn--ghost:hover { --bg: var(--card); }
.on-night .btn--ghost { --fg: var(--chalk); --bd: var(--night-line); }
.on-night .btn--ghost:hover { --bg: var(--night-2); }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: 11.5px; }
.btn--link { background: none; border: 0; padding: 0; min-height: 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.btn--link:hover { box-shadow: none; color: var(--accent-ink); }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translate(2px, -2px); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 96px) 0 0; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { margin-top: 22px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__art { position: relative; aspect-ratio: 1 / 1.05; }
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { max-width: 420px; width: 100%; margin: 0 auto; }
}

.steps-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.steps-strip__item { padding: 20px 20px 22px 0; display: flex; gap: 14px; align-items: baseline; }
.steps-strip__item + .steps-strip__item { padding-left: 20px; border-left: 1px solid var(--line); }
.steps-strip__num { font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); }
.steps-strip__title { font-weight: 600; }
.steps-strip__text { font-size: 14px; color: var(--muted); margin-top: 2px; }
@media (max-width: 720px) {
  .steps-strip { grid-template-columns: 1fr; }
  .steps-strip__item + .steps-strip__item { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--night { background: var(--night); color: var(--chalk); }
.section--night .lead, .section--night .muted { color: #aab4c6; }
.section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: clamp(28px, 4vw, 44px); }
.section__head .lead { margin-top: 12px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--night-line); border: 1px solid var(--night-line); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--night); padding: 24px 22px; }
.stat__value { font-family: var(--font-display); font-size: clamp(34px, 4.5vw, 52px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.stat__value small { font-size: .45em; color: var(--accent); margin-left: 4px; }
.stat__label { font-size: 11.5px; text-transform: uppercase; color: #93a0b8; margin-top: 10px; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }

.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pillar { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.pillar__num { font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); }
.pillar h3 { font-size: 20px; }
.pillar p { color: var(--muted); font-size: 14.5px; }
@media (max-width: 960px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }

.quote { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.02em; max-width: 26ch; }
.quote::before { content: "“"; color: var(--accent); }
.quote::after { content: "”"; color: var(--accent); }

/* ---------- Page head ---------- */
.page-head { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(24px, 3vw, 36px); text-align: center; }
.page-head .lead { margin: 14px auto 0; }
.page-head h1 { font-size: clamp(36px, 5.5vw, 64px); }

/* ---------- Fitter ---------- */
.progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.progress__bar { height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress__bar > span { display: block; height: 100%; width: 0; background: var(--ink); transition: width .35s ease; }
.progress__bar.is-done > span, .progress__bar.is-active > span { width: 100%; }
.progress__bar.is-active > span { background: var(--accent); }
.progress-label { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; display: flex; justify-content: space-between; gap: 12px; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 36px); }
.panel + .panel { margin-top: 18px; }

.callout { background: var(--paper-2); border-radius: var(--radius); padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; }
.callout__icon { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 600 12px var(--font-mono); }
.callout strong { display: block; }
.callout p { color: var(--muted); font-size: 14px; margin-top: 2px; }

.field { margin-top: 28px; }
.field__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.field__num { font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); }
.field__label { font-weight: 600; font-size: 16.5px; }
.field__opt { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px; }
.field__hint { font-size: 13.5px; color: var(--muted); margin-top: 10px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
@media (max-width: 720px) { .field-row { grid-template-columns: 1fr; } }

.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.choices--wide { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.choices--speed { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.choice {
  position: relative; text-align: left; cursor: pointer;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 14px; min-height: 52px; font-size: 14.5px; font-weight: 500;
  transition: border-color .12s, background .12s, transform .12s;
}
.choice:hover { border-color: var(--ink-2); }
.choice[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.choice__sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 3px; }
.choice[aria-pressed="true"] .choice__sub { color: #b9c2d3; }
.choice--speed { text-align: center; padding: 12px 6px; }
.choice--speed b { display: block; font-family: var(--font-display); font-size: 18px; letter-spacing: -.01em; }
.choice--speed span { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.choice--speed[aria-pressed="true"] span { color: #b9c2d3; }

.input, .select {
  width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-size: 15px; transition: border-color .12s;
}
.input:focus, .select:focus { outline: none; border-color: var(--ink); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.speed-input { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; max-width: 360px; }
.speed-input__unit { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

.toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14.5px; }
.toggle input { appearance: none; width: 42px; height: 24px; border-radius: 99px; background: var(--line-2); position: relative; cursor: pointer; transition: background .15s; flex: none; }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.toggle input:checked { background: var(--accent); }
.toggle input:checked::after { transform: translateX(18px); }

.fitter-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.fitter-nav__note { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); text-transform: uppercase; }
.disclaimer-line { text-align: center; font-size: 13px; color: var(--muted); margin: 22px 0 0; }

details.collapse { border: 1.5px dashed var(--line-2); border-radius: var(--radius); padding: 0 18px; margin-top: 28px; }
details.collapse[open] { border-style: solid; background: var(--paper); padding-bottom: 18px; }
details.collapse summary { cursor: pointer; list-style: none; padding: 16px 0; display: flex; justify-content: space-between; gap: 12px; align-items: center; font-weight: 600; }
details.collapse summary::-webkit-details-marker { display: none; }
details.collapse summary::after { content: "+"; font: 500 20px var(--font-mono); color: var(--accent-ink); }
details.collapse[open] summary::after { content: "−"; }
details.collapse summary small { display: block; font: 400 11.5px var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }

/* ---------- Interview ---------- */
.interview { background: var(--night); color: var(--chalk); border-radius: calc(var(--radius) + 6px); padding: clamp(22px, 4vw, 44px); position: relative; overflow: hidden; }
.interview__meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; color: var(--accent); letter-spacing: .06em; }
.interview h2 { margin-top: 16px; font-size: clamp(26px, 3.6vw, 40px); }
.interview__why { margin-top: 18px; display: inline-block; background: var(--night-2); border-left: 3px solid var(--accent); padding: 10px 14px; font-size: 13.5px; color: #c4cdde; border-radius: 0 8px 8px 0; }
.interview__why b { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: .06em; margin-right: 6px; }
.interview__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 24px; }
.answer { text-align: left; cursor: pointer; background: var(--night-2); border: 1.5px solid var(--night-line); color: var(--chalk); border-radius: var(--radius-sm); padding: 15px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; transition: border-color .12s, background .12s; }
.answer:hover { border-color: var(--accent); background: #1d2b44; }
.answer::after { content: "↗"; color: var(--accent); font-family: var(--font-mono); }
.interview__skip { margin-top: 20px; color: #9aa6bb; }
.interview__skip:hover { color: var(--chalk); }
.interview__dots { display: flex; gap: 6px; }
.interview__dots span { width: 18px; height: 4px; border-radius: 9px; background: var(--night-line); }
.interview__dots span.on { background: var(--accent); }

.loading { display: flex; gap: 20px; align-items: center; }
.spinner { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 3px solid var(--night-line); border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading__steps { list-style: none; padding: 0; margin: 14px 0 0; font-family: var(--font-mono); font-size: 12.5px; color: #8e9ab0; }
.loading__steps li { padding: 3px 0; transition: color .2s; }
.loading__steps li.done { color: var(--chalk); }
.loading__steps li.done::before { content: "✓ "; color: var(--accent); }

/* ---------- Report ---------- */
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.confidence { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; padding: 6px 12px; border-radius: 99px; border: 1.5px solid; }
.confidence--explore { color: var(--warn); border-color: #e6c27a; background: var(--warn-soft); }
.confidence--guided { color: var(--ok); border-color: #9fd3b6; background: var(--ok-soft); }

.summary-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.summary-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.summary-card__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; }
.summary-card__value { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; line-height: 1; }
.summary-card__value small { font-size: 14px; font-family: var(--font-mono); font-weight: 400; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.summary-card__sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
@media (max-width: 720px) { .summary-cards { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.chip { font-size: 11.5px; padding: 5px 10px; border-radius: 99px; background: var(--paper-2); color: var(--ink-2); }
.chip b { font-weight: 500; color: var(--muted); margin-right: 4px; text-transform: uppercase; }
.chip--missing { background: transparent; border: 1px dashed var(--line-2); color: var(--muted); }

.targets { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 18px; }
@media (max-width: 860px) { .targets { grid-template-columns: 1fr; } }
.target-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 14px; background: var(--card); }
.target-box__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.target-box__title { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.target-box__value { font-family: var(--font-display); font-weight: 700; font-size: 22px; }

.ruler { margin-top: 12px; }
.ruler svg { width: 100%; height: auto; overflow: visible; }

.tabs { display: flex; gap: 4px; background: var(--paper-2); padding: 4px; border-radius: 999px; margin-top: 28px; width: fit-content; max-width: 100%; overflow-x: auto; }
.tab { border: 0; background: transparent; cursor: pointer; padding: 10px 18px; border-radius: 999px; font: 500 12.5px var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tabpanel { margin-top: 22px; }

.cand-group-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.cand-group-title h3 { font-size: 22px; }
.cand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cand-grid + .cand-group-title { margin-top: 28px; }
@media (max-width: 960px) { .cand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cand-grid { grid-template-columns: 1fr; } }

.cand { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px; position: relative; transition: border-color .15s, box-shadow .15s; }
.cand:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.cand--primary { border-top: 4px solid var(--accent); }
.cand__rank { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: flex; justify-content: space-between; }
.cand__match { color: var(--ink); }
.cand__brand { font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); text-transform: uppercase; letter-spacing: .04em; }
.cand__model { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.1; letter-spacing: -.015em; margin-top: 2px; }
.cand__specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.cand__spec { background: var(--paper); padding: 10px 12px; }
.cand__spec b { display: block; font-family: var(--font-display); font-size: 20px; line-height: 1; }
.cand__spec span { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 10.5px; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; letter-spacing: .05em; white-space: nowrap; }
.tag--demo { background: var(--ok-soft); color: var(--ok); }
.tag--retail { background: var(--info-soft); color: var(--info); }
.tag--order { background: var(--warn-soft); color: var(--warn); }
.tag--muted { background: var(--paper-2); color: var(--muted); }
.tag--est { background: var(--accent-soft); color: var(--accent-ink); }
.cand__why { font-size: 13.5px; color: var(--ink-2); }
.cand__why li { margin: 2px 0; }
.cand__why ul { margin: 0; padding-left: 18px; }
.cand__actions { margin-top: auto; display: flex; gap: 8px; }

.analysis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.analysis > * { min-width: 0; }
@media (max-width: 860px) { .analysis { grid-template-columns: 1fr; } }
.box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.box--night { background: var(--night); color: var(--chalk); border-color: var(--night); }
.box h4 { font-family: var(--font-mono); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); margin-bottom: 12px; }
.box--night h4 { color: var(--accent); }
.box p + p { margin-top: 10px; }
.list { margin: 0; padding: 0; list-style: none; counter-reset: li; }
.list li { position: relative; padding: 10px 0 10px 34px; border-top: 1px solid var(--line); font-size: 14.5px; }
.box--night .list li { border-color: var(--night-line); }
.list li:first-child { border-top: 0; }
.list li::before { counter-increment: li; content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: 11px; font: 500 11.5px var(--font-mono); color: var(--accent-ink); }
.box--night .list li::before { color: var(--accent); }
.list--dash li::before { content: "—"; }

.sheet { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 8px; }
.sheet th, .sheet td { border: 1px solid var(--line); padding: 9px 10px; text-align: left; }
.sheet th { font: 500 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--paper); }
.sheet td.blank { height: 34px; }
.sheet--compact td, .sheet--compact th { white-space: nowrap; }
.table-scroll { overflow-x: auto; }

.report-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.report-foot__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fine-print { font-size: 12.5px; color: var(--muted); max-width: 70ch; }

/* ---------- Drawer ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(14, 23, 38, .45); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--paper); z-index: 90; transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; box-shadow: -20px 0 50px -20px rgba(14, 23, 38, .4); }
.drawer:not(.is-open) { visibility: hidden; box-shadow: none; transition: transform .25s ease, visibility 0s .25s; }
.drawer.is-open { transform: none; }
.drawer__head { padding: 20px 24px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.drawer__body { padding: 22px 24px 40px; overflow-y: auto; }
.drawer__section + .drawer__section { margin-top: 24px; }
.drawer__section h4 { font: 500 11.5px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); margin-bottom: 10px; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--card); cursor: pointer; display: grid; place-items: center; font-size: 18px; flex: none; }
.icon-btn:hover { border-color: var(--ink); }

.matrix { border-collapse: separate; border-spacing: 4px; font-size: 12.5px; }
.matrix th { font: 500 10.5px var(--font-mono); color: var(--muted); text-transform: uppercase; padding: 4px 6px; text-align: center; }
.matrix td { width: 52px; height: 38px; text-align: center; border-radius: 7px; background: var(--paper-2); color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.matrix td.m-active { background: var(--ok); color: #fff; }
.matrix td.m-retail { background: var(--info-soft); color: var(--info); }
.matrix td.m-order { background: var(--warn-soft); color: var(--warn); }
.matrix td.m-old { background: transparent; border: 1px dashed var(--line-2); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; }
.kv dt { font: 500 11px var(--font-mono); text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.kv dd { margin: 0; }
.articles { font-family: var(--font-mono); font-size: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); max-height: 220px; overflow: auto; }
.articles div { padding: 7px 10px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; }
.articles div:first-child { border-top: 0; }

/* ---------- Catalog ---------- */
.catalog-tools { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.search { position: relative; }
.search .input { padding-left: 42px; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }
.filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.filter-chip { font: 500 11.5px var(--font-mono); text-transform: uppercase; letter-spacing: .04em; padding: 8px 12px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; }
.filter-chip:hover { border-color: var(--ink-2); }
.filter-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter-chip .count { opacity: .55; margin-left: 4px; }
.filter-group { margin-top: 18px; }
.filter-group__label { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.result-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 26px 0 12px; flex-wrap: wrap; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lib-card { text-align: left; cursor: pointer; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.lib-card:hover { border-color: var(--ink-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.lib-card__top { display: flex; justify-content: space-between; gap: 10px; }
.lib-card__flexes { display: flex; flex-wrap: wrap; gap: 4px; }
.lib-card__flexes span { font: 500 11px var(--font-mono); padding: 3px 7px; border-radius: 5px; background: var(--paper-2); }
.lib-card__flexes span.d { background: var(--ok-soft); color: var(--ok); }
.lib-card.is-old { opacity: .7; }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); border: 1.5px dashed var(--line-2); border-radius: var(--radius); }

/* ---------- Method ---------- */
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--night-line); border: 1px solid var(--night-line); border-radius: var(--radius); overflow: hidden; }
.method-step { background: var(--night); padding: 28px 24px; }
.method-step__num { font: 500 12px var(--font-mono); color: var(--accent); }
.method-step h3 { margin-top: 14px; font-size: 22px; }
.method-step p { color: #aab4c6; margin-top: 10px; font-size: 14.5px; }
@media (max-width: 860px) { .method-grid { grid-template-columns: 1fr; } }
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 720px) { .guide-grid { grid-template-columns: 1fr; } }
.guide { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.guide__num { font: 500 11.5px var(--font-mono); color: var(--accent-ink); text-transform: uppercase; letter-spacing: .05em; }
.guide h3 { margin-top: 10px; font-size: 22px; }
.guide p { margin-top: 10px; color: var(--ink-2); font-size: 14.5px; }
.formula { white-space: pre; font-weight: 400; font-family: var(--font-mono); font-size: 13px; background: var(--night); color: var(--chalk); padding: 18px 20px; border-radius: var(--radius); overflow-x: auto; line-height: 1.8; }
.formula .c { color: #7f8ba3; }
.formula .k { color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: #aab4c6; padding: 48px 0 32px; margin-top: 40px; }
.site-footer__grid { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.site-footer .brand__name { color: var(--chalk); }
.site-footer p { max-width: 52ch; font-size: 14px; margin-top: 14px; }
.site-footer__meta { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--night-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 99px; font: 500 13px var(--font-mono); opacity: 0; pointer-events: none; transition: .2s; z-index: 100; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Motion ---------- */
.fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Print: hanya laporan ---------- */
.print-only { display: none; }
@media print {
  @page { margin: 14mm; }
  body { background: #fff; font-size: 12px; }
  .site-header, .site-footer, .page-head, .tabs, .report-foot__actions, .cand__actions, .no-print, .drawer, .drawer-backdrop, .toast { display: none !important; }
  .print-only { display: block; }
  .panel { box-shadow: none; border: 0; padding: 0; }
  .tabpanel[hidden] { display: block !important; }
  .tabpanel { break-inside: auto; margin-top: 18px; }
  .cand, .box, .target-box, .summary-card { break-inside: avoid; }
  .cand-grid { grid-template-columns: repeat(3, 1fr); }
  .box--night { background: #fff; color: var(--ink); border-color: var(--line); }
  .box--night .list li { border-color: var(--line); }
}

/* ---------- Quick compare ---------- */
.lib-card { padding: 0; cursor: default; overflow: hidden; }
.lib-card:hover { transform: none; }
.lib-card__open { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 12px; cursor: pointer; flex: 1; }
.lib-card__open:focus-visible { outline: 2.5px solid var(--accent); outline-offset: -3px; border-radius: var(--radius); }
.lib-card__open:hover .cand__model { color: var(--accent-ink); }
.lib-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px dashed var(--line); background: var(--paper); }
.lib-card.is-compared { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

.cmp-btn { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .04em; padding: 7px 11px; border-radius: 99px; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer; white-space: nowrap; transition: .12s; }
.cmp-btn:hover { border-color: var(--ink); }
.cmp-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.compare-tray { position: fixed; left: 50%; bottom: 16px; z-index: 70; width: min(980px, calc(100% - 24px)); transform: translate(-50%, 140%); transition: transform .25s ease; pointer-events: none; }
.compare-tray.is-on { transform: translate(-50%, 0); pointer-events: auto; }
.compare-tray.is-shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { margin-left: -6px; } 40%, 80% { margin-left: 6px; } }
.compare-tray__inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--night); color: var(--chalk); border-radius: 18px; padding: 12px 14px 12px 18px; box-shadow: 0 18px 40px -18px rgba(14, 23, 38, .7); }
.compare-tray__label { display: flex; flex-direction: column; line-height: 1.2; }
.compare-tray__label .muted { color: #93a0b8; }
.compare-tray__chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.tray-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--night-2); border: 1px solid var(--night-line); border-radius: 99px; padding: 5px 6px 5px 12px; font-size: 13px; max-width: 260px; }
.tray-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-chip b { font-weight: 600; }
.tray-chip button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--night-line); color: var(--chalk); cursor: pointer; flex: none; line-height: 1; }
.tray-chip button:hover { background: var(--accent); }
.tray-chip--empty { border-style: dashed; color: #93a0b8; padding-right: 12px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; }
.compare-tray__actions { display: flex; align-items: center; gap: 12px; }
.compare-tray__actions .btn--link { color: #aab4c6; }
body.has-tray .site-footer { padding-bottom: 120px; }
@media (max-width: 600px) {
  .compare-tray { bottom: 10px; }
  .compare-tray__inner { padding: 10px 10px 10px 14px; flex-wrap: nowrap; gap: 10px; }
  .compare-tray__chips, .compare-tray__actions .btn--link { display: none; }
  .compare-tray__label { flex: 1; }
  .catalog-tools { grid-template-columns: 1fr; }
  .catalog-tools .select { width: 100% !important; }
}

.drawer--wide { width: min(980px, 100%); }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: calc(150px + var(--cols, 3) * 180px); }
.compare-table th, .compare-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.compare-table thead th { background: var(--card); border-bottom: 2px solid var(--ink); position: sticky; top: 0; }
.compare-table thead th:first-child { width: 150px; }
.compare-table tbody th { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
.compare-table tbody tr.is-diff th::after, .diff-dot { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 7px; vertical-align: 1px; }
.compare-table tbody tr.is-diff td { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.compare-table__acts { display: flex; gap: 14px; margin-top: 8px; }
@media print { .compare-tray { display: none !important; } }
.compare-table tbody th, .compare-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); }
.compare-table thead th:first-child { z-index: 2; }
@media (max-width: 600px) {
  .compare-table { min-width: calc(104px + var(--cols, 3) * 168px); font-size: 13.5px; }
  .compare-table thead th:first-child { width: 104px; }
  .compare-table tbody th { white-space: normal; font-size: 10.5px; }
  .compare-table th, .compare-table td { padding: 10px; }
}

/* ---------- Katalog sederhana ---------- */
.lib-hero { padding-top: clamp(64px, 11vw, 150px); padding-bottom: clamp(48px, 8vw, 110px); min-height: 62vh; }
.lib-hero__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.lib-hero__title { font-size: clamp(44px, 7.4vw, 92px); letter-spacing: -.04em; margin-top: 22px; }
.lib-hero .lead { margin-top: 18px; max-width: 54ch; }
.lib-search { display: grid; grid-template-columns: 1fr minmax(200px, 300px) auto; gap: 14px; margin-top: clamp(36px, 5vw, 64px); }
.lib-search .input, .lib-search .select { min-height: 64px; font-size: 17px; background-color: var(--card); border-radius: 10px; }
.lib-search .search .input { padding-left: 48px; }
.lib-search .search svg { left: 18px; width: 20px; height: 20px; }
.lib-search .select { width: 100%; background-position: calc(100% - 24px) 29px, calc(100% - 19px) 29px; }
.lib-search__toggle { min-height: 64px; border-radius: 10px; padding: 0 26px; font-size: 12.5px; letter-spacing: .08em; }
.lib-hero__note { margin-top: 14px; max-width: none; }
.lib-list { margin-top: 28px; }
.lib-list .result-meta { margin: 0 0 10px; }
.lib-rows { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.lib-row { display: flex; align-items: center; gap: 12px; padding-right: 16px; border-top: 1px solid var(--line); transition: background .12s; }
.lib-row:first-child { border-top: 0; }
.lib-row:hover { background: var(--paper); }
.lib-row.is-compared { background: color-mix(in srgb, var(--accent-soft) 45%, var(--card)); box-shadow: inset 3px 0 0 var(--accent); }
.lib-row__open { all: unset; box-sizing: border-box; flex: 1; min-width: 0; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0 16px 20px; }
.lib-row__open:focus-visible { outline: 2.5px solid var(--accent); outline-offset: -3px; border-radius: 8px; }
.lib-row__open:hover b { color: var(--accent-ink); }
.lib-row__name { display: flex; flex-direction: column; min-width: 0; }
.lib-row__name b { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-row__brand { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.lib-row__flex { display: flex; flex-wrap: wrap; gap: 4px; }
.lib-row__flex span { font: 500 11px var(--font-mono); padding: 3px 7px; border-radius: 5px; background: var(--paper-2); }
.lib-row__spec { display: flex; flex-direction: column; font-size: 14px; }
.lib-row__spec b { font-weight: 500; }
.lib-row__spec span { font: 400 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: 2px; }
.lib-rows .empty { border: 0; border-radius: 0; }
@media (max-width: 860px) {
  .lib-search { grid-template-columns: 1fr 1fr; }
  .lib-search .search { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .lib-hero { min-height: 0; }
  .lib-search { grid-template-columns: 1fr; gap: 10px; }
  .lib-search .input, .lib-search .select, .lib-search__toggle { min-height: 54px; font-size: 16px; }
  .lib-search .select { background-position: calc(100% - 22px) 24px, calc(100% - 17px) 24px; }
  .lib-row { flex-wrap: wrap; padding: 0 14px 14px; gap: 0; }
  .lib-row__open { grid-template-columns: 1fr auto; padding: 14px 0 10px; gap: 6px 12px; flex-basis: 100%; }
  .lib-row__flex { grid-column: 1 / -1; grid-row: 2; }
  .lib-row__spec { text-align: right; }
}
.lib-row .cmp-btn { min-width: 138px; text-align: center; flex: none; }
@media (max-width: 600px) { .lib-row .cmp-btn { min-width: 0; margin-left: auto; } }
@media (max-width: 600px) { .lib-hero__meta > .mono, .lib-list .result-meta > .muted { display: none; } }

/* ---------- Nomor telepon customer + hasil pencarian ---------- */
.cust-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; max-width: 820px; }
.cust-row .input { height: 100%; min-height: 56px; font-size: 17px; letter-spacing: .02em; }
.cust-result { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1.5px dashed var(--line-2); background: var(--paper); font-size: 14.5px; transition: background .15s, border-color .15s; }
.cust-result b { display: block; font-weight: 600; font-size: 15.5px; line-height: 1.25; }
.cust-result small { display: block; font: 400 11.5px var(--font-mono); color: var(--muted); letter-spacing: .02em; margin-top: 2px; }
.cust-result__hint { color: var(--muted); font-size: 13.5px; }
.cust-result__icon { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 14px var(--font-mono); }
.cust-result.is-found { border-style: solid; border-color: #9fd3b6; background: var(--ok-soft); }
.cust-result.is-found .cust-result__icon { background: var(--ok); color: #fff; }
.cust-result.is-missing, .cust-result.is-unavailable { border-style: solid; border-color: #e6c27a; background: var(--warn-soft); }
.cust-result.is-missing .cust-result__icon, .cust-result.is-unavailable .cust-result__icon { background: var(--warn); color: #fff; }
.cust-result.is-searching { color: var(--muted); }
.cust-spinner { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@media (max-width: 600px) { .cust-row { grid-template-columns: 1fr; } }

/* =========================================================================
   DESIGN SYSTEM — disamakan dengan shaftiq.ai (izin pemilik, 2026-11-06)
   Lapisan ini menimpa token & komponen di atas. Font: Manrope + DM Sans.
   ========================================================================= */
:root {
  --paper: #f6f6f2;
  --paper-2: #eef1eb;
  --card: #ffffff;
  --ink: #121a17;
  --ink-2: #37463a;
  --muted: #64716a;
  --line: #dfe2dc;
  --line-2: #cedccf;
  --accent: #d5ff8a;          /* acid lime: isian tombol & aksen di latar gelap */
  --accent-ink: #4c9270;      /* hijau untuk teks/garis di latar terang */
  --accent-soft: #e4eddf;
  --night: #0c1712;
  --night-2: #17271d;
  --night-line: #35503c;
  --chalk: #f8faf4;
  --ok: #276c4b;
  --ok-soft: #e4eddf;
  --info: #385543;
  --info-soft: #eaf1e5;
  --warn: #8a6a1f;
  --warn-soft: #f6efd9;

  --font-display: "Manrope", Arial, sans-serif;
  --font-body: "DM Sans", Arial, sans-serif;
  --font-mono: "DM Sans", Arial, sans-serif;   /* label kapital kecil memakai DM Sans tebal */

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 18px 60px rgba(25, 48, 35, .03);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

body { font-family: var(--font-body); color: var(--ink); background: var(--paper); }
:focus-visible { outline: 2px solid #4c9270; outline-offset: 3px; border-radius: 3px; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.06em; }
h1 { letter-spacing: -.075em; line-height: 1.05; }
h2 { letter-spacing: -.07em; line-height: 1.09; }
h3 { letter-spacing: -.045em; }

/* Label kapital kecil: DM Sans 800 dengan tracking lebar */
.eyebrow, .tag, .chip, .nav__link, .field__num, .field__opt, .stat__label, .progress-label, .fitter-nav__note,
.summary-card__label, .target-box__title, .cand__rank, .cand__brand, .cand__spec span, .filter-group__label,
.box h4, .drawer__section h4, .guide__num, .pillar__num, .method-step__num, .interview__meta, .lib-row__brand,
.result-meta .mono, .sheet th, .matrix th, .kv dt, .cmp-btn, .tab, .filter-chip, .steps-strip__num {
  font-family: var(--font-body); font-weight: 800; letter-spacing: .12em;
}
.eyebrow { font-size: 10px; letter-spacing: .25em; color: #719b77; }
.eyebrow::before { display: none; }
.on-night .eyebrow, .section--night .eyebrow, .hero--dark .eyebrow { color: #d8fa97; }
.mono { font-family: var(--font-body); }

/* ---------- Header ---------- */
.site-header { background: #f5f5f0; backdrop-filter: none; border-bottom: 1px solid #e2e8dc; box-shadow: 0 1px 0 #dfe8dc; }
.site-header__inner { height: 90px; }
.brand__name { font-family: var(--font-display); font-weight: 800; letter-spacing: .16em; font-size: 15px; }
.brand__sub { font-family: var(--font-body); font-weight: 700; letter-spacing: .14em; font-size: 9px; }
.brand__mark { width: 44px; height: 44px; }
.nav { gap: 38px; }
.nav__link { font-size: 10px; letter-spacing: .08em; padding: 10px 5px; border-radius: 0; color: #37463a; opacity: .72; background: none !important; transition: opacity .15s, color .15s; }
.nav__link:hover, .nav__link[aria-current="page"] { opacity: 1; color: #101c14; background: none; }
.nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 #101c14; }
@media (max-width: 860px) {
  .nav { background: #f5f5f0; gap: 0; }
  .nav__link { padding: 14px 4px; opacity: 1; }
}

/* ---------- Tombol ---------- */
.btn {
  --bg: var(--ink); --fg: #fff; --bd: var(--ink);
  border-radius: 3px; min-height: 0; padding: 15px 20px; gap: 18px;
  font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: .11em;
  transition: transform .2s, opacity .15s, background .15s, border-color .15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: none; }
.btn .arrow { color: var(--accent); transition: none; }
.btn:hover .arrow { transform: none; }
.btn--accent { --bg: var(--accent); --fg: #151915; --bd: var(--accent); border-radius: 0; padding: 19px 24px; gap: 45px; }
.btn--accent .arrow { color: #151915; }
.btn--sm { padding: 13px 17px; font-size: 10.5px; gap: 14px; }
.btn--accent.btn--sm { padding: 13px 17px; gap: 18px; border-radius: 3px; }
.btn--ghost { --bg: transparent; --fg: #365343; --bd: #cedccf; border-radius: 5px; }
.btn--ghost:hover { --bg: #f2f6ef; }
.on-night .btn--ghost, .hero--dark .btn--ghost {
  --bg: transparent; --fg: #f1f5f1; --bd: transparent; border-radius: 0; padding: 9px 0 7px;
  border-bottom: 1px solid #8f9b95; letter-spacing: .13em;
}
.on-night .btn--ghost:hover, .hero--dark .btn--ghost:hover { --bg: transparent; opacity: .8; }
.btn--link { color: #365343; font-weight: 700; letter-spacing: .02em; }
.btn--link:hover { color: #101c14; }

/* ---------- Beranda: hero gelap ---------- */
.hero--dark { background: var(--night); color: #f8faf4; padding: clamp(70px, 9vw, 105px) 0 0; }
.hero--dark h1 { color: #f8faf4; font-size: clamp(54px, 7vw, 105px); letter-spacing: -.082em; line-height: 1.03; }
.hero--dark h1 em { color: var(--accent); }
.hero--dark .lead { color: #b5c0ba; font-size: 17px; line-height: 1.85; max-width: 580px; }
.hero--dark .hero__art svg { filter: none; }
.hero--dark .steps-strip { border-color: #22332a; margin-top: clamp(56px, 8vw, 105px); }
.hero--dark .steps-strip__item + .steps-strip__item { border-color: #22332a; }
.hero--dark .steps-strip__num { color: #899590; }
.hero--dark .steps-strip__title { color: #e9efe6; font-size: 14px; }
.hero--dark .steps-strip__text { color: #899590; font-size: 12.5px; }
.proof-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; background: #deebdb; padding: 23px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.proof-strip span { font-size: 10px; font-weight: 700; letter-spacing: .045em; display: flex; align-items: center; gap: 12px; color: #385543; text-transform: uppercase; }
.proof-strip b { font-weight: 800; color: #799184; }
@media (max-width: 860px) { .proof-strip { grid-template-columns: repeat(2, 1fr); } .proof-strip span { font-size: 9px; } }

.section { padding: clamp(66px, 8vw, 95px) 0; }
.section h2 { font-size: clamp(40px, 4.75vw, 68px); }
.section__head .lead { color: var(--muted); font-size: 15px; line-height: 1.7; }
.section--night { background: #101d16; color: #fff; }
.section--night .lead, .section--night .muted { color: #acb9b0; }
.stats { background: #22332a; border-color: #22332a; border-radius: 9px; }
.stat { background: #101d16; }
.stat__value { font-family: var(--font-display); letter-spacing: -.05em; color: #f8faf4; }
.stat__label { color: #9ca9a0; font-size: 10px; }

.pillar, .guide { background: #f8faf5; border: 1px solid #d8e2d6; border-radius: 9px; padding: 36px 30px; }
.pillar__num, .guide__num { font-size: 10px; letter-spacing: .13em; color: #6a8968; }
.pillar h3, .guide h3 { font-size: 20px; letter-spacing: -.045em; margin-top: 18px; }
.pillar p, .guide p { font-size: 13px; line-height: 1.85; color: #637268; }
.guide { background: #fff; border-color: #e0e8de; padding: 32px; }
.quote { font-family: var(--font-display); font-weight: 800; letter-spacing: -.06em; }
.quote::before, .quote::after { color: #4c9270; }

/* ---------- Kepala halaman (workspace heading) ---------- */
.page-head .eyebrow { font-size: 10px; letter-spacing: .2em; color: #719b77; }
.page-head h1 { font-size: clamp(30px, 4.5vw, 55px); letter-spacing: -.045em; line-height: 1.13; }
.page-head .lead { font-size: 14px; color: #78837b; }

/* ---------- AI Fitter ---------- */
#main:has(#stepForm), #main:has(.interview), #main:has(#report) { background: #f5f7f3; }
.progress { gap: 8px; }
.progress__bar { height: 5px; border-radius: 6px; background: #e1e7df; }
.progress__bar > span, .progress__bar.is-active > span { background: #4c9270; }
.progress-label { font-size: 10px; letter-spacing: .18em; color: #607d6c; }
.panel { background: #fff; border: 1px solid #e5eae1; border-radius: 13px; box-shadow: var(--shadow); padding: clamp(20px, 4vw, 44px); }
.callout { background: #edf4e9; border: 1px solid #d5e3d1; border-radius: 9px; }
.callout strong { font-weight: 800; letter-spacing: .02em; }
.callout__icon { background: #214f3c; color: var(--accent); border-radius: 6px; }
.field__num { font-size: 10px; letter-spacing: .14em; color: #6a8968; }
.field__label { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.field__opt { font-size: 9px; letter-spacing: .1em; border-color: #d5e1d7; color: #607568; }
.field__hint { font-size: 12.5px; color: #78837b; }

.choice { border: 1px solid #e0e4de; background: #f8faf6; border-radius: 6px; min-height: 56px; text-align: center;
  color: #3f4742; font-size: 12px; font-weight: 700; transition: background .15s, border .15s, color .15s; }
.choice:hover { border-color: #b9c8b8; }
.choice[aria-pressed="true"] { background: #17291f; border-color: #17291f; color: #fff; }
.choice__sub { font-size: 9.5px; color: #8e9690; }
.choice[aria-pressed="true"] .choice__sub { color: #c0cec2; }
.choice--speed { border-color: #d3ded1; background: #f7f9f5; color: #314a39; border-radius: 7px; min-height: 58px; }
.choice--speed b { font-family: var(--font-body); font-weight: 800; font-size: 13px; letter-spacing: 0; }
.choice--speed span { font-family: var(--font-body); font-size: 9px; font-weight: 500; opacity: .75; }
.choice--speed[aria-pressed="true"] { background: #1b3524; color: #deffa9; border-color: #1b3524; }
.choice--speed[aria-pressed="true"] span { color: #deffa9; }

.input, .select { background-color: #fff; border: 1px solid #d7dcd3; border-radius: 5px; font-family: var(--font-body); }
.input:focus, .select:focus { border-color: #4c9270; box-shadow: 0 0 0 3px rgba(76, 146, 112, .14); }
.fitter-nav { border-top: 1px solid var(--line); }
.fitter-nav__note { font-size: 10px; letter-spacing: .1em; color: #9ca39d; }
.disclaimer-line { font-size: 12px; color: #78837b; }
details.collapse { border-color: #d5e1d7; border-radius: 9px; }
details.collapse[open] { background: #f8faf6; }
details.collapse summary::after { color: #4c9270; }
.toggle input:checked { background: #4c9270; }

/* Nomor telepon customer */
.cust-result { border-radius: 6px; border-color: #d5e1d7; background: #f8faf6; }
.cust-result.is-found { border-color: #a9cdb4; background: #e4eddf; }
.cust-result.is-found .cust-result__icon { background: #214f3c; color: var(--accent); }
.cust-spinner { border-color: #d5e1d7; border-top-color: #4c9270; }

/* ---------- Wawancara & loading ---------- */
.interview { background: #12231a; color: #f8fff6; border-radius: 14px; padding: 44px 48px; box-shadow: 0 19px 45px rgba(20, 37, 26, .14); }
.interview__meta { font-size: 10px; letter-spacing: .16em; color: #cfff8a; }
.interview h2 { font-size: clamp(26px, 3.3vw, 42px); letter-spacing: -.055em; line-height: 1.22; color: #f8fff6; }
.interview > p, .interview p { color: #c2d4c4; }
.interview__why { background: #1b3326; border-left-color: var(--accent); color: #c2d4c4; border-radius: 0 6px 6px 0; }
.interview__why b { color: var(--accent); font-family: var(--font-body); letter-spacing: .12em; }
.answer { border: 1px solid #698876; border-radius: 7px; background: #22372b; color: #f0faec; font-weight: 700; font-size: 12.5px; padding: 18px 15px; }
.answer:hover, .answer:focus-visible { border-color: var(--accent); background: #35503c; }
.answer::after { color: var(--accent); }
.interview__skip { color: #c6d8c7; font-size: 11px; }
.interview__dots span { background: #35503c; }
.interview__dots span.on { background: var(--accent); }
@media (max-width: 600px) { .interview { padding: 26px 20px; } }
.loading { background: transparent; }
.spinner { width: 44px; height: 44px; border: 3px solid #608069; border-top-color: var(--accent); animation: spin .85s linear infinite; }
.loading__steps { color: #acbaa8; font-family: var(--font-body); font-size: 12px; }
.loading__steps li.done { color: #f1f7ef; }
.loading__steps li.done::before { color: var(--accent); }
.loading h3 { font-family: var(--font-display); font-size: 22px; letter-spacing: -.04em; }

/* ---------- Laporan ---------- */
.confidence { font-family: var(--font-body); font-weight: 800; font-size: 10px; letter-spacing: .1em; border-radius: 4px; border-width: 1px; }
.confidence--explore { color: #6b5a22; background: #f6efd9; border-color: #e5d7a8; }
.confidence--guided { color: #214f3c; background: #e4eddf; border-color: #b9d3bd; }
.summary-card { background: #fff; border: 1px solid #dce4d9; border-radius: 9px; padding: 15px 19px; }
.summary-card__label { font-size: 10px; font-weight: 700; letter-spacing: .07em; color: #607568; }
.summary-card__value { font-family: var(--font-body); font-size: 25px; font-weight: 800; color: #182f27; letter-spacing: -.01em; line-height: 1.35; }
.summary-card__value small { font-family: var(--font-body); font-size: 12px; }
.chip { border-radius: 4px; background: #eef3ea; color: #385543; font-size: 10px; letter-spacing: .05em; }
.chip b { color: #6a8968; }
.chip--missing { border-color: #d5e1d7; background: transparent; color: #8e9690; }
.target-box { border: 1px solid #dce4d9; border-radius: 9px; }
.target-box__title { font-size: 10px; letter-spacing: .07em; color: #607568; }
.target-box__value { font-family: var(--font-body); font-weight: 800; letter-spacing: -.01em; color: #182f27; }

.tabs { display: flex; gap: 6px; max-width: 650px; width: auto; margin: 28px auto 22px; padding: 6px; border: 1px solid #d5e1d7; background: #f2f6ef; border-radius: 8px; }
.tab { flex: 1 1; padding: 13px 12px; font-size: 11px; letter-spacing: .06em; color: #516353; border-radius: 5px; }
.tab[aria-selected="true"] { background: #214f3c; color: #fff; box-shadow: 0 2px 6px rgba(29, 72, 47, .11); }

.cand { border: 1px solid #d3dfd2; border-radius: 10px; padding: 18px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.cand:hover { border-color: #3f8c63; box-shadow: 0 5px 19px rgba(34, 69, 43, .082); }
.cand--primary { border-top: 1px solid #d3dfd2; box-shadow: inset 0 3px 0 #4c9270; }
.cand--primary:hover { box-shadow: inset 0 3px 0 #4c9270, 0 5px 19px rgba(34, 69, 43, .082); }
.cand__rank { font-size: 10px; letter-spacing: .1em; color: #607568; }
.cand__brand { font-size: 10px; letter-spacing: .12em; color: #6a8968; }
.cand__model { font-family: var(--font-display); letter-spacing: -.045em; }
.cand__specs { background: #dce4d9; border-color: #dce4d9; border-radius: 7px; }
.cand__spec { background: #f8faf6; }
.cand__spec b { font-family: var(--font-body); font-weight: 800; font-size: 18px; letter-spacing: -.01em; color: #182f27; }
.cand__why { font-size: 12.5px; color: #5f7064; line-height: 1.7; }
.tag { border-radius: 3px; font-size: 9px; letter-spacing: .1em; }
.tag--retail { background: #eaf1e5; color: #385543; }
.tag--demo { background: #e4eddf; color: #214f3c; }
.tag--est { background: #f1f7d9; color: #5c6a1e; }

.box { background: #fff; border: 1px solid #dde5db; border-radius: 10px; padding: 30px; }
.box h4 { font-size: 10px; letter-spacing: .14em; color: #537354; }
.box--night { background: #17271d; border-color: #17271d; color: #f1f7ef; }
.box--night h4 { color: var(--accent); }
.list li { font-size: 13px; line-height: 1.75; color: #5f7064; }
.box--night .list li { color: #cfddce; }
.list li::before { color: #6a8968; font-family: var(--font-body); font-weight: 800; }
.box--night .list li::before { color: var(--accent); }
.sheet th { background: #f2f6ef; color: #607568; }
.sheet th, .sheet td { border-color: #dce4d9; }
.report-foot { border-top-color: var(--line); }
.fine-print { color: #78837b; font-size: 12px; }

/* ---------- Drawer, katalog, perbandingan ---------- */
.drawer { background: #f7f8f4; }
.drawer-backdrop { background: rgba(12, 23, 18, .45); }
.icon-btn { border-radius: 5px; border-color: #cedccf; background: #fff; }
.matrix td { border-radius: 5px; background: #eef1eb; }
.matrix td.m-active { background: #214f3c; color: #fff; }
.legend i { border-radius: 2px; }
.articles { border-color: #dce4d9; border-radius: 7px; }

.lib-hero { background: #f7f8f4; }
.lib-hero__title { font-size: clamp(44px, 7vw, 92px); letter-spacing: -.075em; }
.lib-hero .lead { font-size: 15px; color: var(--muted); }
.lib-search .input, .lib-search .select { border: 1px solid #d7dcd3; background-color: #fff; border-radius: 5px; font-size: 16px; }
.lib-search__toggle { border-radius: 0; background: #1f2620; border-color: #1f2620; color: #fff; padding: 0 26px; }
.lib-search__toggle:hover { transform: none; opacity: .92; }
.lib-rows { background: #fff; border: 1px solid #e3e8e0; border-radius: 9px; }
.lib-row { border-top: 1px solid #e8ebe7; }
.lib-row:hover { background: #fafbf8; }
.lib-row.is-compared { background: #f2f8ea; box-shadow: inset 3px 0 0 #4c9270; }
.lib-row__name b { font-size: 13px; font-weight: 700; letter-spacing: 0; }
.lib-row__brand { font-size: 9.5px; letter-spacing: .1em; color: #6a8968; }
.lib-row__flex span { background: #eef3ea; color: #385543; font-family: var(--font-body); font-weight: 800; border-radius: 3px; }
.lib-row__spec b { font-weight: 700; font-size: 13px; }
.lib-row__spec span { font-family: var(--font-body); font-size: 9.5px; letter-spacing: .08em; color: #778079; }
.lib-row__open:hover b { color: #214f3c; }
.cmp-btn { border-radius: 3px; border: 1px solid #cedccf; background: #fff; color: #365343; font-size: 10px; letter-spacing: .1em; }
.cmp-btn:hover { border-color: #4c9270; }
.cmp-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #151915; }
.compare-tray__inner { background: #12231a; border-radius: 12px; }
.tray-chip { background: #22372b; border-color: #35503c; border-radius: 5px; }
.tray-chip button { background: #35503c; border-radius: 4px; }
.tray-chip button:hover { background: var(--accent); color: #151915; }
.compare-table thead th { border-bottom-color: #121a17; background: #fff; }
.compare-table tbody th { font-family: var(--font-body); font-weight: 800; letter-spacing: .1em; color: #607568; background: #f7f8f4; }
.compare-table tbody tr.is-diff th::after, .diff-dot { background: #4c9270; }
.compare-table tbody tr.is-diff td { background: #f2f8ea; }
.filter-chip { border-radius: 4px; }

/* ---------- Metode ---------- */
.method-grid { background: transparent; border: 0; gap: 15px; }
.method-step { background: #17271d; border: 1px solid #22372b; border-radius: 9px; padding: 36px 30px; }
.method-step__num { color: #b8e07a; font-size: 10px; letter-spacing: .13em; }
.method-step h3 { font-size: 20px; letter-spacing: -.045em; margin-top: 28px; }
.method-step p { color: #acb9b0; font-size: 13px; line-height: 1.85; }
.formula { background: #12231a; border-radius: 10px; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.formula .k { color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer { background: #101412; color: #fff; }
.site-footer p { color: #9ca9a0; font-size: 11px; line-height: 1.7; }
.site-footer__meta { font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: .15em; color: #b1c0b0; border-top-color: #22332a; }
.site-footer .brand__name { letter-spacing: .12em; font-size: 12px; }

.toast { background: #12231a; color: #f1f7ef; border-radius: 6px; font-family: var(--font-body); font-weight: 700; letter-spacing: .04em; }
.empty { border-color: #d5e1d7; border-radius: 9px; }

/* ---------- Motion ---------- */
@keyframes shaftiqStepForward { 0% { opacity: .15; transform: translateY(42px); } 100% { opacity: 1; transform: none; } }
@keyframes shaftiqStepBack { 0% { opacity: .15; transform: translateY(-32px); } 100% { opacity: 1; transform: none; } }
@keyframes shaftiqLeaveLeft { to { opacity: .4; transform: translateX(-65px); } }
@keyframes shaftiqEnterRight { from { opacity: .4; transform: translateX(65px); } }
@keyframes shaftiqLeaveRight { to { opacity: .4; transform: translateX(65px); } }
@keyframes shaftiqEnterLeft { from { opacity: .4; transform: translateX(-65px); } }
.fade-in { animation: shaftiqStepForward .39s var(--ease-out) both; }
.fade-in.is-back { animation-name: shaftiqStepBack; }
#stepForm { view-transition-name: tg-questions; }
@supports (view-transition-name: root) {
  html[data-step-direction]::view-transition-old(root), html[data-step-direction]::view-transition-new(root) { animation: none; }
  html[data-step-direction="next"]::view-transition-old(tg-questions) { animation: shaftiqLeaveLeft .31s ease-in both; }
  html[data-step-direction="next"]::view-transition-new(tg-questions) { animation: shaftiqEnterRight .31s ease-out both; }
  html[data-step-direction="back"]::view-transition-old(tg-questions) { animation: shaftiqLeaveRight .31s ease-in both; }
  html[data-step-direction="back"]::view-transition-new(tg-questions) { animation: shaftiqEnterLeft .31s ease-out both; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-step-direction]::view-transition-old(tg-questions), html[data-step-direction]::view-transition-new(tg-questions) { animation: none !important; }
  .btn:hover { transform: none; }
}
/* Saat View Transition berjalan, animasi .fade-in dimatikan agar tidak dobel */
html[data-step-direction] #stepForm.fade-in { animation: none; }
.site-footer .btn--ghost { --bg: transparent; --fg: #b1c0b0; --bd: transparent; border-radius: 0; padding: 9px 0 7px; border-bottom: 1px solid #55625a; font-size: 10px; letter-spacing: .12em; }
.site-footer .btn--ghost:hover { --bg: transparent; opacity: .8; }
@media (max-width: 600px) {
  .hero--dark .hero__ctas { flex-direction: column; align-items: stretch; gap: 15px; }
  .hero--dark .hero__ctas .btn--accent { width: 100%; min-height: 52px; justify-content: space-between; }
  .hero--dark .hero__ctas .btn--ghost { align-self: flex-start; }
  .hero--dark h1 { font-size: clamp(48px, 13vw, 75px); }
}

/* =========================================================================
   SESI UJI — tata letak tablet (fitter berdiri, satu tangan)
   ========================================================================= */
#main:has(.ses), #main:has(.ses-list) { background: #f5f7f3; }
.ses { padding-top: 34px; padding-bottom: 40px; }
.ses-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.ses-title { font-size: clamp(30px, 4.2vw, 50px); letter-spacing: -.055em; margin-top: 10px; }
.ses-top__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ses-h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.05em; }
.ses-h3 { font-size: 18px; letter-spacing: -.035em; margin-bottom: 14px; }
.ses-prev { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 16px; padding: 12px 16px; background: #edf4e9; border: 1px solid #d5e3d1; border-radius: 9px; font-size: 13.5px; }
.ses-prev b { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #537354; }
.ses-prev a { margin-left: auto; font-weight: 800; font-size: 11px; letter-spacing: .08em; color: #214f3c; text-decoration: none; }

.ses-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.ses-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.ses-col > .panel { margin: 0; padding: clamp(16px, 2.6vw, 28px); }
@media (max-width: 1100px) { .ses-grid { grid-template-columns: minmax(0, 1fr); } }

/* Chip shaft */
.ses-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.ses-chip { flex: none; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 9px 14px 9px 12px; border: 1px solid #d3ded1; background: #f7f9f5; border-radius: 7px; text-align: left; cursor: pointer; color: #314a39; transition: background .15s, border-color .15s; }
.ses-chip i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ses-chip b { display: block; font-size: 13px; font-weight: 800; white-space: nowrap; max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
.ses-chip small { display: block; font-size: 10.5px; color: #78837b; white-space: nowrap; }
.ses-chip[aria-selected="true"] { background: #17291f; border-color: #17291f; color: #fff; }
.ses-chip[aria-selected="true"] small { color: #c0cec2; }
.ses-chip--add { border-style: dashed; font-weight: 800; font-size: 12px; letter-spacing: .06em; color: #214f3c; background: transparent; }
.ses-chip--add:hover { border-color: #4c9270; }

.ses-entry__head { margin: 16px 0 12px; }
.ses-entry__title { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.04em; margin: 2px 0 2px; }

/* Input pukulan: besar & cepat */
.ses-shot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.ses-field label { display: flex; justify-content: space-between; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #607568; margin-bottom: 6px; }
.ses-field label span { color: #9ca39d; letter-spacing: .04em; text-transform: none; font-weight: 700; }
.ses-field .input { min-height: 64px; font-size: 28px; font-weight: 800; letter-spacing: -.01em; text-align: center; padding: 0 10px; color: #121a17; }
.ses-field .input::placeholder { color: #c6cec3; font-weight: 400; }
.ses-field--offline { grid-column: span 2; }
.ses-offline { display: grid; grid-template-columns: 76px 1fr 76px; gap: 8px; }
.ses-side { min-height: 64px; border: 1px solid #d3ded1; background: #f7f9f5; border-radius: 6px; font-weight: 800; font-size: 15px; color: #314a39; cursor: pointer; }
.ses-side[aria-pressed="true"] { background: #1b3524; color: #deffa9; border-color: #1b3524; }
.ses-actions { grid-column: span 2; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin-top: 4px; }
.ses-actions .btn { min-height: 60px; justify-content: center; }
.ses-save { justify-content: space-between !important; font-size: 12px; }
.ses-shot > * { min-width: 0; }
.ses-field .input { width: 100%; min-width: 0; }
.ses-actions .btn { min-width: 0; white-space: normal; text-align: center; }
@media (min-width: 560px) {
  .ses-shot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ses-field--offline { grid-column: span 2; }
  .ses-actions { grid-column: 1 / -1; }
}
.ses-shots { margin-top: 16px; font-size: 13px; }
.ses-shots td, .ses-shots th { padding: 8px; white-space: nowrap; }
.ses-shots tr.is-off td { color: #a5aea8; text-decoration: line-through; text-decoration-color: #c6cec3; }
.ses-shots tr.is-off td:nth-last-child(-n+2) { text-decoration: none; }
.ses-shots__act { text-align: right; }

/* Papan peringkat */
.ses-board { font-size: 13px; }
.ses-board th, .ses-board td { padding: 9px 8px; white-space: nowrap; }
.ses-board td.is-in { color: #214f3c; background: #eef6e8; font-weight: 700; }
.ses-board td.is-out { color: #8a6a1f; background: #fbf4df; font-weight: 700; }
.ses-board tr.is-champ td { background-color: #f2f8ea; }
.ses-board tr.is-champ td:first-child { box-shadow: inset 3px 0 0 #4c9270; }
.ses-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.ses-crown { font-size: 9px; letter-spacing: .12em; background: var(--accent); color: #151915; padding: 2px 6px; border-radius: 3px; }

/* Saran */
.ses-warn { background: #fbf4df; border-color: #e9d9a6; margin-bottom: 14px; }
.ses-warn .callout__icon { background: #8a6a1f; color: #fff; }
.ses-sugg-dir { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #214f3c; background: #e4eddf; padding: 5px 9px; border-radius: 4px; margin-bottom: 10px; }
.ses-sugg { display: grid; gap: 8px; }
.ses-sugg__card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #dce4d9; border-radius: 8px; background: #fff; }
.ses-sugg__card b { display: block; font-size: 14px; margin-top: 2px; }
.ses-sugg__card small { display: block; font-size: 11.5px; color: #78837b; margin-top: 2px; }
.ses-sugg__card .btn { flex: none; min-height: 48px; }

/* Plot */
.ses-plot { width: 100%; height: auto; font-family: var(--font-body); }
.ses-legend { margin-top: 8px; }
.ses-legend i { border-radius: 50%; }

/* Keputusan */
.ses-decision { margin-top: 18px; background: #12231a; color: #f1f7ef; border-radius: 12px; padding: 24px 28px; }
.ses-decision .eyebrow { color: #d8fa97; }
.ses-decision h2 { font-size: clamp(22px, 3vw, 34px); color: #fff; margin: 10px 0 6px; letter-spacing: -.05em; }
.ses-decision p { color: #cfddce; font-size: 14px; }
.ses-decision__note { margin-top: 8px; padding-top: 10px; border-top: 1px solid #35503c; }
.ses-pick { display: grid; gap: 8px; }
.ses-pick__opt { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid #dce4d9; border-radius: 8px; background: #fff; cursor: pointer; }
.ses-pick__opt input { width: 20px; height: 20px; accent-color: #214f3c; }
.ses-pick__opt b { display: block; font-size: 14px; }
.ses-pick__opt small { display: block; font-size: 11.5px; color: #78837b; }

/* Daftar sesi */
.ses-list { padding-bottom: 50px; }
.ses-list__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 40px 0 14px; }
.ses-list__tools { display: flex; gap: 8px; }
.ses-rows { display: grid; gap: 8px; }
.ses-row { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr auto; gap: 14px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid #e3e8e0; border-radius: 9px; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.ses-row:hover { border-color: #3f8c63; box-shadow: 0 5px 19px rgba(34, 69, 43, .08); }
.ses-row b { display: block; font-size: 14px; }
.ses-row small { display: block; font-size: 11px; color: #78837b; letter-spacing: .02em; }
@media (max-width: 760px) { .ses-row { grid-template-columns: 1fr auto; } .ses-row__meta, .ses-row__champ { grid-column: 1; } }

@media print {
  .ses-grid { grid-template-columns: 1fr 1fr; }
  .ses-entry, .ses-top__actions, #sesSuggest { display: none !important; }
  .ses-decision { background: #fff; color: #121a17; border: 1px solid #dce4d9; }
  .ses-decision h2, .ses-decision p { color: #121a17; }
}

/* Pengingat cadangan (daftar sesi) */
.ses-backup { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 12px; border-radius: 9px; border: 1px solid #d5e3d1; background: #edf4e9; font-size: 13.5px; }
.ses-backup b { display: block; font-size: 14px; }
.ses-backup small { display: block; font-size: 11.5px; color: #607568; }
.ses-backup .btn { margin-left: auto; }
.ses-backup__icon { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #214f3c; color: var(--accent); }
.ses-backup.is-pending { background: #f7f8f4; border-color: #dce4d9; }
.ses-backup.is-pending .ses-backup__icon { background: #4c9270; color: #fff; }
.ses-backup.is-overdue { background: #fbf4df; border-color: #e9d9a6; }
.ses-backup.is-overdue .ses-backup__icon { background: #8a6a1f; color: #fff; }
@media (max-width: 600px) { .ses-backup .btn { margin-left: 0; width: 100%; justify-content: center; } }

/* =========================================================================
   KARTU FITTING — Current vs New spec (meniru kartu Excel fitter)
   ========================================================================= */
.ses-tabs { margin: 22px 0 6px; max-width: 520px; margin-left: 0; }
#sesCardView { margin-top: 14px; display: grid; gap: 16px; }
#sesCardView[hidden] { display: none; }
.fc-head { padding: 22px 24px; }
.fc-head__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 20px; }
.fc-head__grid b { display: block; font-size: 15px; margin-top: 4px; }
.fc-head__grid small { display: block; font-size: 11px; color: #78837b; }
.fc-head__grid .input { margin-top: 4px; min-height: 42px; }
.fc-label { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6a8968; }
.fc-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.fc-add .fc-label { margin-right: 6px; }
@media (max-width: 860px) { .fc-head__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fc-sec { padding: clamp(16px, 2.6vw, 28px); }
.fc-sec__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fc-sec__head .eyebrow { font-size: 11px; color: #214f3c; }
.fc-sec__tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.fc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.fc-table th, .fc-table td { padding: 5px 6px; border-bottom: 1px solid #edf0ea; vertical-align: middle; text-align: left; }
.fc-table thead th { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #607568; background: #f2f6ef; padding: 10px 8px; }
.fc-table thead th small { text-transform: none; letter-spacing: 0; font-weight: 600; color: #8e9690; }
.fc-table tbody th { width: 30%; font-weight: 700; font-size: 13px; color: #314a39; }
.fc-table tbody th small { font-weight: 500; color: #9ca39d; }
.fc-table td { width: 35%; }
.fc-group th { background: #f7f9f5; font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: .16em; text-transform: uppercase; color: #6a8968 !important; padding-top: 9px !important; }
.fc-in { min-height: 40px; font-size: 14px; padding: 0 10px; width: 100%; }
.fc-in.select { padding-right: 34px; background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px; }
textarea.fc-in { padding: 9px 10px; min-height: 58px; resize: vertical; line-height: 1.45; }
.fc-num { display: flex; align-items: center; gap: 6px; }
.fc-num i { font-style: normal; font-size: 11px; color: #9ca39d; min-width: 24px; }
.fc-in.is-changed { border-color: #4c9270; background-color: #eef6e8; font-weight: 700; color: #17291f; }
.fc-legend-changed { background: #eef6e8; border: 1px solid #4c9270; padding: 0 5px; border-radius: 3px; color: #17291f; }

.fc-sw { margin-top: 10px; font-size: 12.5px; color: #42614b; }
.fc-sw:empty { display: none; }
.fc-sim { margin-top: 20px; }
.fc-sim h4, .fc-result h4 { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #537354; margin-bottom: 8px; }
.fc-sim h4 small { color: #9ca39d; letter-spacing: .06em; }
.fc-table--sim { min-width: 520px; }
.fc-table--sim tbody th { width: 34%; }
.fc-table--sim td { width: 22%; }
.fc-delta { font-weight: 800; text-align: center !important; font-size: 13.5px; }
.fc-delta.is-good { color: #214f3c; background: #eef6e8; }
.fc-delta.is-bad { color: #8a4a1f; background: #fbefe4; }
.fc-delta.is-neutral { color: #607568; }
.fc-result { margin-top: 18px; }
.fc-improve { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fc-chip { font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 4px; background: #eef1eb; color: #385543; }
.fc-chip.is-good { background: #e4eddf; color: #214f3c; }
.fc-chip.is-bad { background: #fbefe4; color: #8a4a1f; }

@media print {
  #sesShotsView, .ses-tabs, .ses-prev { display: none !important; }
  #sesCardView[hidden] { display: none !important; }
  .fc-sec, .fc-head { break-inside: avoid; border: 1px solid #dce4d9; box-shadow: none; }
  .fc-table { min-width: 0; font-size: 11px; }
  .fc-in { border: 0 !important; background: transparent !important; min-height: 0; padding: 2px 0; font-size: 11px; }
  .fc-in.is-changed { font-weight: 800; text-decoration: underline; text-decoration-color: #4c9270; }
  .fc-in.select { appearance: none; background-image: none !important; }
  .fc-group th { background: #f2f6ef !important; }
}
textarea.fc-type { min-height: 76px; }

/* Smash langsung di input pukulan */
.ses-smash__val { display: grid; place-items: center; min-height: 64px; border-radius: 5px; background: #f2f6ef; border: 1px dashed #cedccf; font-size: 26px; font-weight: 800; color: #607568; }
.ses-smash__val.is-good { background: #e4eddf; border: 1px solid #a9cdb4; color: #214f3c; }
.ses-smash__val.is-bad { background: #fbf4df; border: 1px solid #e9d9a6; color: #8a6a1f; }
@media (min-width: 560px) { .ses-field--offline { grid-column: 1 / -1; } }

/* Saran penantang dua arah */
.ses-hypo { background: #f2f8ea; border: 1px solid #cfe2c8; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.ses-hypo .ses-sugg-dir { margin-bottom: 6px; }
.ses-hypo p { font-size: 13px; color: #385543; line-height: 1.6; }
.ses-dirs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ses-dir { border: 1px solid #dce4d9; border-radius: 9px; padding: 12px; background: #fafbf8; min-width: 0; }
.ses-dir.is-primary { border-color: #4c9270; background: #fff; box-shadow: inset 0 3px 0 #4c9270; }
.ses-dir__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ses-dir__head b { font-size: 13.5px; }
.ses-dir__test { font-size: 11.5px; color: #607568; line-height: 1.55; margin: 4px 0 10px; }
.ses-dir .ses-sugg__card { flex-wrap: wrap; }
@media (max-width: 760px) { .ses-dirs { grid-template-columns: 1fr; } }

/* =========================================================================
   ALUR FITTING 7 LANGKAH (fitting-flow.js) — fokus fitter, tablet berdiri
   ========================================================================= */
.seg { display: inline-flex; flex-wrap: nowrap; border: 1px solid #cedccf; border-radius: 6px; overflow: hidden; background: #fff; }
.seg--wrap { flex-wrap: wrap; }
.seg button { min-height: 46px; padding: 0 16px; font: 700 13px var(--font-body); color: #365343; background: none; border: 0; border-right: 1px solid #e1e8df; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: #12231a; color: var(--accent); }
.seg button[disabled] { opacity: .45; cursor: not-allowed; }
.seg--sm button { min-height: 40px; padding: 0 11px; font-size: 12px; }
.btn--lg { padding: 21px 28px; font-size: 13px; }
.input--lg { min-height: 58px; font-size: 20px; font-weight: 600; letter-spacing: .02em; }
textarea.input { padding: 12px 14px; min-height: 64px; resize: vertical; }

.ff-home { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; text-align: left; }
.ff-home .lead { margin: 14px 0 0; max-width: 560px; }
.ff-list { padding-bottom: 72px; }
.ff-list__bar { display: flex; gap: 10px; align-items: center; margin: 6px 0 14px; }
.ff-list__bar .input { flex: 1; min-width: 0; }
.ff-rows { display: grid; gap: 8px; }
.ff-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto auto; gap: 16px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid #dfe5dc; border-radius: 9px; color: inherit; text-decoration: none; transition: transform .15s var(--ease-out), border-color .15s; }
.ff-row:hover { transform: translateY(-2px); border-color: #4c9270; }
.ff-row__cat { font: 800 12px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: #214f3c; background: #eef3ea; border-radius: 4px; padding: 8px 10px; text-align: center; }
.ff-row__who { min-width: 0; }
.ff-row__who b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-row__who small, .ff-row__prog small { display: block; color: #64716a; font-size: 12px; margin-top: 2px; }
.ff-row__prog { text-align: right; }
.ff-dots { display: inline-flex; gap: 4px; }
.ff-dots i { width: 14px; height: 5px; border-radius: 3px; background: #dfe5dc; }
.ff-dots i.is-done { background: #4c9270; }
.ff-dots i.is-cur { background: #12231a; }
@media (max-width: 640px) { .ff-row { grid-template-columns: 1fr auto auto; } .ff-row__cat { grid-column: 1 / -1; justify-self: start; } .ff-row__prog { text-align: left; } }

.ff { padding-top: 18px; padding-bottom: 80px; }
.ff-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ff-back { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #cedccf; border-radius: 6px; color: #214f3c; text-decoration: none; font-size: 20px; flex: none; }
.ff-back:hover { background: #f2f6ef; }
.ff-top__who { flex: 1; min-width: 0; }
.ff-top__who b { display: block; font: 800 22px var(--font-display); letter-spacing: -.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-top__who small { color: #64716a; font-size: 12.5px; }

.ff-steps { list-style: none; margin: 0 0 18px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; background: #0c1712; border-radius: 9px; padding: 5px; }
.ff-step button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px; min-height: 54px; border: 0; border-radius: 6px; background: none; color: #8fa596; text-align: left; cursor: pointer; font-family: var(--font-body); }
.ff-step button[disabled] { cursor: default; }
.ff-step button:not([disabled]):hover { background: #17271d; color: #f8faf4; }
.ff-step__n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--font-display); border: 1px solid #35503c; }
.ff-step__t { font: 700 13px var(--font-body); line-height: 1.15; min-width: 0; }
.ff-step__t small { display: block; font-weight: 400; font-size: 10.5px; opacity: .75; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-step.is-done .ff-step__n { background: #214f3c; border-color: #214f3c; color: var(--accent); }
.ff-step.is-done button { color: #cfe0d3; }
.ff-step.is-cur button { background: var(--accent); color: #12231a; }
.ff-step.is-cur .ff-step__n { border-color: #12231a; background: #12231a; color: var(--accent); }
@media (max-width: 1100px) { .ff-step__t small { display: none; } }
@media (max-width: 860px) {
  .ff-steps { grid-template-columns: repeat(7, auto); overflow-x: auto; scrollbar-width: none; }
  .ff-step button { padding: 8px; min-height: 46px; }
  .ff-step:not(.is-cur) .ff-step__t { display: none; }
}

.ff-body { display: grid; gap: 14px; min-width: 0; }
.ff-card { background: #fff; border: 1px solid #dfe5dc; border-radius: 10px; padding: clamp(18px, 2.4vw, 28px); min-width: 0; }
.ff-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ff-card__head .ff-h { margin: 0; }
.ff-h { font: 800 clamp(22px, 2.6vw, 28px)/1.1 var(--font-display); letter-spacing: -.05em; margin-bottom: 8px; }
.ff-sub { font: 800 15px var(--font-display); letter-spacing: -.02em; margin: 22px 0 10px; }
.ff-small { font-size: 13px; }
.ff-note { padding: 12px 16px; border-radius: 8px; background: #f6efd9; color: #5d4a17; font-size: 14px; }
.ff-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; align-items: end; }
@media (max-width: 640px) { .ff-grid2 { grid-template-columns: 1fr; } }
.ff-field { display: grid; gap: 7px; min-width: 0; }
.ff-field > span { font: 700 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #4c6a57; }
.ff-dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; }
.ff-dl dt { font: 700 10.5px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #6a8968; }
.ff-dl dd { margin: 4px 0 0; font-weight: 600; }
@media (max-width: 640px) { .ff-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ff-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 860px) { .ff-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ff-cat { min-height: 76px; padding: 12px; border: 1px solid #cedccf; border-radius: 8px; background: #fff; cursor: pointer; text-align: left; font-family: var(--font-body); transition: transform .15s var(--ease-out); }
.ff-cat:hover:not([disabled]) { transform: translateY(-2px); border-color: #4c9270; }
.ff-cat b { display: block; font: 800 17px var(--font-display); letter-spacing: -.03em; color: #12231a; }
.ff-cat small { display: block; font-size: 11.5px; color: #64716a; margin-top: 4px; }
.ff-cat[aria-checked="true"] { background: #12231a; border-color: #12231a; }
.ff-cat[aria-checked="true"] b { color: var(--accent); }
.ff-cat[aria-checked="true"] small { color: #9fb5a5; }
.ff-cat[disabled] { opacity: .4; cursor: not-allowed; }

.ff-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-chip { min-height: 44px; padding: 0 16px; border: 1px solid #cedccf; border-radius: 99px; background: #fff; color: #214f3c; font: 600 14px var(--font-body); cursor: pointer; }
.ff-chip:hover { border-color: #4c9270; }
.ff-chip[aria-pressed="true"] { background: #12231a; border-color: #12231a; color: var(--accent); }
.ff-chip[aria-pressed="true"]::before { content: "✓ "; }
.ff-chip--sm { min-height: 34px; padding: 0 11px; font-size: 12.5px; }

/* Form spec */
.ff-spec { display: grid; gap: 14px; }
.ff-spec__type { max-width: 520px; }
.ff-spec__g { border: 0; margin: 0; padding: 0; min-width: 0; }
.ff-spec__g legend { font: 800 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #6a8968; margin-bottom: 8px; padding: 0; }
.ff-spec__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 980px) { .ff-spec__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ff-spec__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.drawer .ff-spec__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ff-spec__f { display: grid; gap: 5px; min-width: 0; }
.ff-spec__f > span { font-size: 12px; font-weight: 600; color: #4c5b52; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-spec__f em { font-style: normal; font-weight: 500; color: #8a6a1f; }
.ff-spec__f .input { min-height: 46px; padding: 0 10px; font-size: 15px; }
.ff-spec__f.is-changed .input { border-color: #4c9270; background-color: #f1f8ea; box-shadow: inset 3px 0 0 #4c9270; }
.ff-num { position: relative; display: block; }
.ff-num .input { padding-right: 34px; }
.ff-num i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; color: #8e9690; pointer-events: none; }

/* Langkah 3: stik uji */
.ff-tests { display: grid; gap: 14px; min-width: 0; }
.ff-tests__bar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.ff-club { position: relative; flex: none; min-width: 150px; max-width: 240px; min-height: 64px; padding: 10px 14px; border: 1px solid #cedccf; border-radius: 8px; background: #fff; text-align: left; cursor: pointer; font-family: var(--font-body); }
.ff-club small { display: block; font: 700 10px var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: #6a8968; }
.ff-club b { display: block; font-size: 14px; margin-top: 3px; color: #12231a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 22px; }
.ff-club i { position: absolute; top: 10px; right: 10px; font: 800 12px var(--font-display); background: #eef3ea; color: #214f3c; border-radius: 99px; min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 5px; }
.ff-club.is-base { border-style: dashed; }
.ff-club.is-on { background: #12231a; border-color: #12231a; border-style: solid; }
.ff-club.is-on b { color: #fff; }
.ff-club.is-on small { color: var(--accent); }
.ff-club--add { border-style: dashed; background: #f6f9f3; }
.ff-club--add b { color: #214f3c; }
.ff-head-act { display: flex; gap: 8px; }

.ff-shot { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; padding: 14px; border-radius: 9px; background: #f3f6f0; }
.ff-shot > * { min-width: 0; }
.ff-m { display: grid; gap: 6px; min-width: 0; }
.ff-m > span { font: 700 11px var(--font-body); letter-spacing: .04em; color: #37463a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-m small { font-weight: 500; color: #7a867e; letter-spacing: 0; }
.ff-m .input { min-height: 54px; font-size: 20px; font-weight: 700; text-align: center; padding: 0 6px; }
.ff-off { display: flex; gap: 4px; min-width: 0; }
.ff-off .seg { flex: none; }
.ff-off .seg button { padding: 0 8px; min-height: 54px; }
.ff-off .input { min-width: 0; }
.ff-m--smash output { display: grid; place-items: center; min-height: 54px; border-radius: 5px; background: #fff; border: 1px dashed #cedccf; font: 800 20px var(--font-display); color: #64716a; }
.ff-m--smash output.is-good { color: #276c4b; border-color: #4c9270; }
.ff-m--smash output.is-bad { color: #a33b1f; border-color: #e1a08d; }
.ff-shot__act { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.ff-shot__act .btn--accent { flex: 1; justify-content: center; }
@media (max-width: 1020px) { .ff-shot { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ff-m--off { grid-column: span 2; } }
@media (max-width: 560px) { .ff-shot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ff-putt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px; border-radius: 9px; background: #f3f6f0; }
.ff-m--wide { grid-column: 1 / -1; }
.ff-putt .ff-m .input { font-size: 16px; text-align: left; padding: 0 12px; }
.ff-putt .ff-m .input--lg { font-size: 24px; text-align: center; }
.ff-putt .seg button { min-height: 54px; min-width: 54px; font-size: 16px; }

.ff-table-wrap { overflow-x: auto; margin-top: 12px; }
.ff-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ff-table th { font: 700 10.5px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #6a8968; text-align: left; padding: 8px 10px; border-bottom: 1px solid #dfe5dc; white-space: nowrap; }
.ff-table td { padding: 9px 10px; border-bottom: 1px solid #eef1eb; white-space: nowrap; }
.ff-table td small { color: #8e9690; font-size: 11px; }
.ff-table tfoot td { font-weight: 800; border-top: 1px solid #cedccf; border-bottom: 0; background: #f6f9f3; }
.ff-table tr.is-bad td { color: #a6aea9; text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .18); }
.ff-table tr.is-bad td:last-child { text-decoration: none; }
.ff-x { min-height: 34px; min-width: 56px; padding: 0 8px; border: 1px solid #dfe5dc; border-radius: 5px; background: #fff; font: 700 11px var(--font-body); color: #4c9270; cursor: pointer; }
tr.is-bad .ff-x { color: #a33b1f; border-color: #e9c3b6; }
.ff-empty-shots { padding: 18px 4px 4px; }
.ff-board tbody tr { cursor: pointer; }
.ff-board tbody tr:hover td { background: #f6f9f3; }
.ff-board tr.is-win td { background: #f1f8ea; }
.ff-score { font: 800 18px var(--font-display); }

/* Drawer stik uji */
.ff-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.ff-catres { display: grid; gap: 8px; margin-top: 10px; }
.ff-catres__row { padding: 10px; border: 1px solid #e3e8e0; border-radius: 7px; }
.ff-catres__row b { display: block; font-size: 13.5px; margin-bottom: 6px; }
.ff-catres__row span { display: flex; flex-wrap: wrap; gap: 5px; }
.ff-drawer-act { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }

/* Langkah 4 */
.ff-rec { background: #0c1712; border-color: #0c1712; color: #f8faf4; }
.ff-rec .eyebrow { color: var(--accent); }
.ff-rec .lead { color: #b9cabd; margin: 6px 0 0; }
.ff-rec .lead b { color: #fff; }
.ff-deltas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 16px; }
.ff-delta { padding: 12px 14px; border-radius: 8px; background: #f3f6f0; border-left: 3px solid #cedccf; }
.ff-rec .ff-delta { background: #17271d; }
.ff-delta small { display: block; font: 700 10.5px var(--font-body); letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.ff-delta b { display: block; font: 800 20px var(--font-display); margin-top: 4px; }
.ff-delta i { font-style: normal; font-size: 12px; }
.ff-delta.is-good { border-left-color: #4c9270; }
.ff-delta.is-good i { color: #276c4b; }
.ff-rec .ff-delta.is-good i { color: var(--accent); }
.ff-delta.is-bad { border-left-color: #d0806a; }
.ff-delta.is-bad i { color: #a33b1f; }
.ff-rec .ff-delta.is-bad i { color: #f0a58f; }
.ff-basis { margin-top: 16px; max-width: 520px; }
.ff-rec .ff-basis > span { color: #9fb5a5; }
.ff-notes { margin: 14px 0 0; padding-left: 18px; color: #d5e1d7; font-size: 14px; display: grid; gap: 6px; }

/* Langkah 5 */
.ff-progress { font-size: 13px; color: #64716a; }
.ff-progress b { font: 800 18px var(--font-display); color: #12231a; }
.ff-work { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ff-work label { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid #dfe5dc; border-radius: 8px; cursor: pointer; min-height: 60px; }
.ff-work input { width: 26px; height: 26px; accent-color: #214f3c; flex: none; }
.ff-work b { display: block; font-size: 15px; }
.ff-work small { display: block; font-size: 13px; color: #64716a; margin-top: 2px; }
.ff-work strong { color: #214f3c; }
.ff-work label.is-done { background: #f1f8ea; border-color: #bcd6b9; }
.ff-work label.is-done b { text-decoration: line-through; text-decoration-color: #4c9270; }

/* Langkah 7: laporan */
.ff-report { background: #fff; border: 1px solid #dfe5dc; border-radius: 10px; padding: clamp(20px, 3vw, 36px); display: grid; gap: 8px; min-width: 0; }
.ff-report__head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid #dfe5dc; }
.ff-verdict { padding: 14px 18px; border-radius: 9px; background: #eef1eb; min-width: 220px; }
.ff-verdict small { display: block; font: 700 10.5px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #6a8968; }
.ff-verdict b { display: block; font: 800 22px var(--font-display); letter-spacing: -.04em; margin-top: 4px; }
.ff-verdict span { font-size: 13px; color: #64716a; }
.ff-verdict.is-good { background: #12231a; }
.ff-verdict.is-good b { color: var(--accent); }
.ff-verdict.is-good small, .ff-verdict.is-good span { color: #9fb5a5; }
.ff-verdict.is-bad { background: #fbe9e3; }
.ff-report__sec .ff-sub { margin-top: 14px; }
.ff-analysis { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 15px; line-height: 1.55; }
.ff-resolved { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ff-resolved li { display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 7px; background: #f3f6f0; font-size: 14px; }
.ff-resolved li b { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.ff-resolved li.is-good b { color: #276c4b; }
.ff-resolved li.is-bad b { color: #a33b1f; }
.ff-resolved li.is-flat b { color: #8a6a1f; }
.ff-cmp td.is-good { color: #276c4b; font-weight: 700; }
.ff-cmp td.is-bad { color: #a33b1f; font-weight: 700; }
.ff-cmp tr.is-changed td { background: #f1f8ea; }
.ff-danger { margin-top: 10px; font-size: 13px; color: #64716a; }
.ff-danger summary { cursor: pointer; }
.ff-danger .btn { margin-top: 8px; }

.ff-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 0; position: sticky; bottom: 0; background: linear-gradient(180deg, rgba(246, 246, 242, 0), #f6f6f2 30%); z-index: 5; }
.ff-foot__grp { display: flex; gap: 8px; flex-wrap: wrap; }

@media print {
  body.ff-printing .site-header, body.ff-printing .site-footer, body.ff-printing .ff-back, body.ff-printing .ff-steps, body.ff-printing .ff-foot, body.ff-printing .ff-danger, body.ff-printing .toast { display: none !important; }
  body.ff-printing .ff-report { border: 0; padding: 0; }
  body.ff-printing .ff-report textarea { border: 0; resize: none; padding: 0; }
  body.ff-printing .ff-verdict.is-good { background: #fff; border: 2px solid #12231a; }
  body.ff-printing .ff-verdict.is-good b { color: #12231a; }
  body.ff-printing .ff-report__sec { break-inside: avoid; }
}
.ff-field[hidden], .ff [hidden] { display: none !important; }
.ff-more { margin-top: 14px; border-top: 1px solid #e3e8e0; padding-top: 12px; }
.ff-more summary { cursor: pointer; font: 700 12px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: #4c9270; margin-bottom: 12px; }
.ff-rec .input { color: #121a17; }
.ff-foot--report { position: static; background: none; }
@media (max-width: 560px) { .ff-foot:not(.ff-foot--report) { flex-wrap: nowrap; } .ff-foot .btn { padding: 15px 14px; gap: 10px; font-size: 10.5px; } .ff-foot .btn--lg { flex: 1; justify-content: space-between; } }

/* Waktu per langkah (uji bay FIT-055) */
.ff-timing { margin: 14px 0 0; font-size: 14px; }
.ff-timing summary { cursor: pointer; color: var(--muted, #5b6b62); font-weight: 600; }
.ff-timing ul { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 4px; max-width: 420px; }
.ff-timing li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed rgba(0,0,0,.12); padding: 4px 0; }
body.ff-printing .ff-timing { display: none !important; }
@media print { .ff-timing { display: none !important; } }

/* =====================================================================
   VISUAL PUKULAN (ShotViz) — pop-up gaya layar simulator
   ===================================================================== */
body.sv-open { overflow: hidden; }
.ff-table tbody tr[data-ff="shot-viz"] { cursor: pointer; }
.ff-table tbody tr[data-ff="shot-viz"]:hover td { background: rgba(213, 255, 138, .14); }
.ff-table tbody tr[data-ff="shot-viz"] td:first-child { position: relative; }
.ff-viz-hint { margin-top: 6px; }
.sv-backdrop {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: 18px; background: rgba(4, 10, 7, .72); backdrop-filter: blur(4px);
}
.sv-backdrop.is-opening { animation: svFade .18s ease-out; }
.sv {
  width: min(1060px, 100%); max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px); overflow: auto;
  background: linear-gradient(180deg, #0f1d16 0%, #0c1712 100%); color: #eef4ef;
  border: 1px solid #214f3c; border-radius: 18px; padding: 14px 18px 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.sv-backdrop.is-opening .sv { animation: svPop .22s cubic-bezier(.2, .9, .3, 1.2); }
.sv.no-anim .sv-trail { animation: none; stroke-dashoffset: 0; }
.sv.no-anim .sv-apex, .sv.no-anim .sv-land text, .sv.no-anim .sv-offlbl { animation: none; opacity: 1; }
.sv.no-anim .sv-zone { animation: none; }
.sv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sv-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #7fbf98; }
.sv-head h2 { font-family: Manrope, "DM Sans", sans-serif; font-weight: 800; font-size: 24px; margin: 4px 0 0; display: flex; gap: 10px; align-items: center; color: #fff; }
.sv-tag { font-family: "DM Sans", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: #d5ff8a; color: #0c1712; }
.sv-tag.is-bad { background: #ff8a7a; }
.sv-nav { display: flex; align-items: center; gap: 6px; color: #9fb7a8; font-size: 13px; font-variant-numeric: tabular-nums; }
.sv-nav button { width: 40px; height: 40px; border-radius: 12px; border: 1px solid #2b5a45; background: #12231a; color: #eef4ef; font-size: 22px; line-height: 1; cursor: pointer; }
.sv-nav button:hover:not(:disabled) { border-color: #d5ff8a; color: #d5ff8a; }
.sv-nav button:disabled { opacity: .35; cursor: default; }
.sv-nav .sv-x { font-size: 16px; margin-left: 6px; }
.sv-stats { display: grid; grid-template-columns: 1.5fr repeat(8, minmax(0, 1fr)); gap: 8px; margin: 10px 0 10px; }
.sv-stat { background: #12231a; border: 1px solid #1d3a2b; border-radius: 12px; padding: 8px 10px; min-width: 0; }
.sv-stat small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #7fbf98; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-stat b { font-family: Manrope, sans-serif; font-weight: 800; font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
.sv-stat span { font-size: 11px; color: #9fb7a8; margin-left: 3px; }
.sv-stat--hero { background: #d5ff8a; border-color: #d5ff8a; }
.sv-stat--hero small, .sv-stat--hero span { color: #214f3c; }
.sv-stat--hero b { color: #0c1712; font-size: 30px; }
.sv-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); grid-template-areas: "side top" "face top"; gap: 12px; }
.sv-panel { margin: 0; background: #0a1410; border: 1px solid #1d3a2b; border-radius: 14px; overflow: hidden; position: relative; min-width: 0; }
.sv-panel figcaption { position: absolute; top: 10px; left: 14px; z-index: 1; font-weight: 800; font-size: 13px; color: #fff; pointer-events: none; }
.sv-panel figcaption small { font-weight: 500; color: #8fae9c; margin-left: 4px; }
.sv-panel--side { grid-area: side; }
.sv-panel--top { grid-area: top; }
.sv-panel--face { grid-area: face; padding: 36px 14px 12px; background: radial-gradient(120% 90% at 30% 40%, #1b3527 0%, #0a1410 70%);
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.sv-face-info { min-width: 0; }
.sv-panel--top { display: flex; align-items: stretch; }
.sv-panel--top svg { height: 100%; max-height: 640px; }
.sv-panel svg { display: block; width: 100%; height: auto; }
.sv-side text, .sv-top text { font: 600 12px "DM Sans", system-ui, sans-serif; fill: #9fb7a8; }
.sv-gridlines line, .sv-rings line { stroke: #d5ff8a; stroke-opacity: .07; }
.sv-ticks text { fill: #cfe6d6; font-weight: 700; }
.sv-unit { fill: #cfe6d6 !important; opacity: .7; }
.sv-ghost path { fill: none; stroke: #ffffff; stroke-opacity: .16; stroke-width: 1.6; }
.sv-arc { fill: none; stroke: #d5ff8a; stroke-opacity: .5; stroke-width: 1.5; stroke-dasharray: 3 3; }
.sv-trail { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); animation: svDraw 1.15s cubic-bezier(.3, .1, .2, 1) .1s forwards; }
.sv-trail--top { stroke-width: 3; }
.sv-apex line { stroke: #d5ff8a; stroke-opacity: .35; stroke-dasharray: 4 4; }
.sv-apex circle { fill: #d5ff8a; }
.sv-apex text { fill: #d5ff8a !important; font-weight: 800 !important; }
.sv-apex, .sv-land text, .sv-offlbl { opacity: 0; animation: svFade .3s ease-out 1.1s forwards; }
.sv-land text { fill: #fff !important; font: 800 15px Manrope, sans-serif !important; }
.sv-offlbl { fill: #fff !important; font-weight: 800 !important; }
.sv-pulse { fill: none; stroke: #d5ff8a; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: svPulse 1.6s ease-out 1.15s infinite; opacity: 0; }
.sv-center { stroke: #fff; stroke-opacity: .25; stroke-dasharray: 5 6; }
.sv-unknown { stroke: #fff; stroke-opacity: .7; stroke-width: 2; stroke-dasharray: 6 5; }
.sv-offlbl--muted { fill: #b9cfc1 !important; font-weight: 600 !important; }
.sv-dots circle { fill: #fff; fill-opacity: .35; }
.sv-lbl { font: 800 11px "DM Sans", sans-serif; letter-spacing: .1em; fill: #7fbf98; }
.sv-face { display: block; max-width: 440px; margin: 0 auto; }
.sv-face-axis { display: flex; justify-content: space-between; max-width: 440px; margin: 2px auto 0; font: 800 11px "DM Sans", sans-serif; letter-spacing: .1em; color: #7fbf98; }
.is-tapemode .sv-face { cursor: crosshair; outline: 2px dashed #ffb547; outline-offset: -2px; border-radius: 12px; }
.sv-zone { animation: svFade .5s ease-out .2s both; }
.sv-legend { display: flex; align-items: center; justify-content: flex-start; gap: 8px; font-size: 13px; color: #cfe6d6; margin-top: 2px; text-align: center; flex-wrap: wrap; }
.sv-key { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.sv-key--est { background: radial-gradient(circle, #d5ff8a 0 35%, rgba(213, 255, 138, .25) 65%); }
.sv-key--tape { border: 2.5px solid #ffb547; background: #fff; }
.sv-hint { text-align: left; color: #ffb547; font-size: 13px; margin: 6px 0 0; font-weight: 600; }
.sv-face-act { display: flex; justify-content: flex-start; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sv-btn { font: 700 13px "DM Sans", sans-serif; border-radius: 999px; padding: 8px 14px; border: 1px solid #d5ff8a; background: #d5ff8a; color: #0c1712; cursor: pointer; min-height: 38px; }
.sv-btn.is-on { background: #ffb547; border-color: #ffb547; }
.sv-btn--ghost { background: transparent; color: #eef4ef; border-color: #2b5a45; }
.sv-why { margin-top: 10px; font-size: 13px; color: #cfe6d6; }
.sv-why summary { cursor: pointer; color: #7fbf98; font-weight: 700; }
.sv-why ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.sv-foot { margin: 8px 2px 0; font-size: 12px; color: #7f998a; line-height: 1.45; }
@keyframes svDraw { to { stroke-dashoffset: 0; } }
@keyframes svFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes svPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes svPulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
@media (prefers-reduced-motion: reduce) {
  .sv-trail { animation: none; stroke-dashoffset: 0; }
  .sv-apex, .sv-land text, .sv-offlbl { animation: none; opacity: 1; }
  .sv-pulse, .sv, .sv-backdrop, .sv-zone { animation: none; }
}
@media (max-width: 900px) {
  .sv-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sv-stat--hero { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
}
@media (max-width: 640px) {
  .sv-backdrop { padding: 0; place-items: stretch; }
  .sv { max-height: 100vh; max-height: 100dvh; border-radius: 0; padding: 14px 16px 12px; border: 0; }
  .sv-head h2 { font-size: 20px; }
  .sv-nav button { width: 36px; height: 36px; }
  .sv-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .sv-stat { padding: 6px 8px; }
  .sv-stat b { font-size: 16px; }
  .sv-stat--hero { grid-column: span 2; grid-row: span 1; }
  .sv-stat--hero b { font-size: 24px; }
  .sv-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "face" "top"; }
  .sv-panel figcaption small { display: none; }
  .sv-stat--hero { display: block; }
  .sv-panel--face { grid-template-columns: minmax(0, 1fr); }
  .sv-panel--top { justify-content: center; }
  .sv-panel--top svg { width: auto; height: auto; max-height: 420px; max-width: 100%; }
}
@media print { .sv-backdrop { display: none !important; } }

/* =====================================================================
   LOGIN TOKO & STOK PER TOKO (store.js)
   ===================================================================== */
body.st-locked { overflow: hidden; }
.st-login {
  position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(120% 90% at 20% 0%, #214f3c 0%, #12231a 45%, #0c1712 100%);
  overflow-y: auto;
}
.st-card {
  width: min(440px, 100%); background: #fbfcf9; color: #12231a; border-radius: 20px;
  padding: 28px 26px 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); display: grid; gap: 14px;
}
.st-brand { display: flex; align-items: center; gap: 12px; }
.st-brand svg { width: 42px; height: 42px; flex: none; }
.st-brand b { display: block; font: 800 14px var(--font-display, Manrope, sans-serif); letter-spacing: .08em; }
.st-brand small { display: block; font-size: 12px; color: #4c9270; font-weight: 600; }
.st-card h1 { font: 800 30px var(--font-display, Manrope, sans-serif); letter-spacing: -.03em; margin: 6px 0 0; }
.st-lead { margin: 0; color: #4f5d55; font-size: 14.5px; line-height: 1.45; }
.st-field { display: grid; gap: 6px; }
.st-field > span { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #4c9270; }
.st-pin { letter-spacing: .4em; font-size: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.st-err { min-height: 20px; margin: -4px 0 0; color: #b3261e; font-weight: 600; font-size: 14px; }
.st-go { width: 100%; justify-content: center; }
.st-go:disabled { opacity: .6; }
.st-fine { margin: 0; font-size: 12.5px; color: #6b7871; text-align: center; }

.st-chipwrap { position: relative; }
.st-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid #cfdccf; background: #fff; color: #12231a; font: 700 13px var(--font-body, "DM Sans", sans-serif);
  cursor: pointer; white-space: nowrap; max-width: 220px;
}
.st-chip span { overflow: hidden; text-overflow: ellipsis; }
.st-chip svg { width: 16px; height: 16px; flex: none; color: #4c9270; }
.st-chip small { font-size: 10px; font-weight: 800; letter-spacing: .08em; background: #12231a; color: #d5ff8a; padding: 2px 6px; border-radius: 999px; }
.st-chip:hover { border-color: #4c9270; }
.st-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 260px; background: #fff; border: 1px solid #dfe7df;
  border-radius: 14px; padding: 14px; box-shadow: 0 16px 40px rgba(12, 23, 18, .18); display: grid; gap: 10px;
}
.st-menu[hidden] { display: none; }
.st-menu__who { margin: 0; font-size: 13.5px; }
.st-menu__meta { margin: 0; font-size: 12px; color: #6b7871; }

.lib-row__stock { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.st-badge { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.st-badge--sale { background: #e3f4d0; color: #214f3c; }
.st-badge--demo { background: #12231a; color: #d5ff8a; }
.st-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.st-table th, .st-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid #e6ece5; vertical-align: top; }
.st-table th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #4c9270; }

.ff-sugg-h { margin: 10px 0 6px; font-weight: 800; font-size: 13px; color: #12231a; }
.ff-sugg-h small { font-weight: 500; color: #6b7871; }
.ff-q { font-style: normal; font-size: 11px; font-weight: 800; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: #12231a; color: #d5ff8a; }
.ff-q--sale { background: #e3f4d0; color: #214f3c; }
.ff-q--none { background: #eef1ee; color: #7b8780; }
.ff-stock { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; background: rgba(213, 255, 138, .12); color: #d5ff8a; border: 1px solid rgba(213, 255, 138, .35); }
.ff-stock.is-warn { background: rgba(255, 181, 71, .1); color: #ffcf85; border-color: rgba(255, 181, 71, .4); }

@media (max-width: 860px) {
  .st-chip { max-width: 150px; }
}
@media (max-width: 560px) {
  .st-card { padding: 22px 18px 18px; }
  .st-card h1 { font-size: 26px; }
  .st-chip { padding: 0 10px; max-width: 120px; }
  .st-chip small { display: none; }
}
@media print { .st-chipwrap, .st-login { display: none !important; } }
.lib-search:has(#scopeSel) { grid-template-columns: minmax(0, 1fr) minmax(170px, 240px) minmax(170px, 230px) auto; }
@media (max-width: 980px) { .lib-search:has(#scopeSel) { grid-template-columns: 1fr 1fr; } .lib-search:has(#scopeSel) .search, .lib-search:has(#scopeSel) .lib-search__toggle { grid-column: 1 / -1; } }
@media (max-width: 560px) { .lib-search:has(#scopeSel) { grid-template-columns: 1fr; } }
.st-chip__code { display: none; }
@media (max-width: 560px) {
  .st-chip__name { display: none; }
  .st-chip__code { display: inline; }
  .st-chip { height: 34px; padding: 0 9px; gap: 4px; }
  .st-menu { right: -60px; width: min(260px, calc(100vw - 32px)); }
}
@media (max-width: 480px) { .site-header__inner:has(.st-chipwrap) .brand__name { font-size: 12px; letter-spacing: .06em; } }
@media (max-width: 400px) { .site-header__inner:has(.st-chipwrap) .brand__name { display: none; } }

/* =====================================================================
   KATALOG SEBAGAI TABEL — kolom tetap & judul kolom (2026-11-10)
   Baris dan judul memakai --lib-cols yang sama → semua kolom sejajar.
   ===================================================================== */
.lib-rows { --lib-cols: minmax(0, 2.2fr) minmax(0, 1.5fr) minmax(110px, 1fr); --lib-cmp: 150px; }
.lib-rows--store { --lib-cols: minmax(0, 2.2fr) minmax(0, 1.5fr) minmax(100px, .9fr) 86px 86px; }
.lib-row__open, .lib-head__cols { grid-template-columns: var(--lib-cols); gap: 16px; }
.lib-row .cmp-btn { width: var(--lib-cmp); min-width: 0; }
.lib-head { display: flex; align-items: center; gap: 12px; padding: 0 16px 0 0; background: #f4f7f1; border-bottom: 1px solid #e3e8e0; }
.lib-head__cols { flex: 1; min-width: 0; display: grid; align-items: center; padding: 11px 0 11px 20px; }
.lib-head__cols span { font: 800 10.5px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #4c9270; }
.lib-head__cmp { width: var(--lib-cmp); flex: none; }
.lib-row:first-of-type { border-top: 0; }
.lib-head + .lib-row { border-top: 0; }
.lib-num { text-align: center; justify-self: stretch; }
.lib-qty { display: inline-block; min-width: 38px; padding: 4px 10px; border-radius: 999px; font: 800 14px var(--font-body); font-variant-numeric: tabular-nums; }
.lib-qty--sale { background: #e3f4d0; color: #214f3c; }
.lib-qty--demo { background: #12231a; color: #d5ff8a; }
.lib-zero { font-style: normal; color: #b9c2bc; font-weight: 700; }
.lib-row__flex span.is-demo { background: transparent; color: #385543; box-shadow: inset 0 0 0 1.5px #9fb5a5; }
.lib-row__spec { justify-content: center; }
.lib-row__stockm { display: none; }
.lib-legend { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; }
.lib-legend__chip { display: inline-block; font: 800 10px var(--font-body); padding: 1px 6px; border-radius: 3px; background: #eef3ea; color: #385543; }
.lib-legend__chip.is-demo { background: transparent; box-shadow: inset 0 0 0 1.5px #9fb5a5; }
@media (max-width: 860px) {
  .lib-rows { --lib-cmp: 128px; }
  .lib-rows--store { --lib-cols: minmax(0, 1.8fr) minmax(0, 1.3fr) minmax(84px, .8fr) 70px 70px; }
  .lib-row__open, .lib-head__cols { gap: 10px; }
}
/* HP: kartu ringkas — nama + angka stok di kanan, flex di bawah; judul kolom disembunyikan */
@media (max-width: 600px) {
  .lib-head { display: none; }
  .lib-row__open, .lib-rows--store .lib-row__open { grid-template-columns: minmax(0, 1fr) auto; }
  .lib-rows--store .lib-num { display: none; }
  .lib-rows--store .lib-row__stockm { display: flex; gap: 6px; grid-column: 2; grid-row: 1; justify-self: end; }
  .lib-rows--store .lib-row__spec { display: none; }
  .lib-row .cmp-btn { width: auto; }
}

/* =====================================================================
   INPUT RATA-RATA (2026-11-10) — satu baris per stik
   ===================================================================== */
.ff-shot__hint { grid-column: 1 / -1; margin: 0 0 2px; font-size: 13.5px; color: #4f5d55; }
.ff-shot.is-saved .ff-shot__hint { color: #214f3c; font-weight: 700; }
.ff-shot.is-saved { box-shadow: inset 0 0 0 1.5px #b9dca0; }
.ff-avg {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; margin-top: 12px;
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(6, minmax(0, 1fr)); gap: 10px; align-items: center;
  padding: 12px 16px; border-radius: 12px; background: #12231a; color: #fff;
}
.ff-avg:hover, .ff-avg:focus-visible { box-shadow: 0 0 0 2px #d5ff8a; }
.ff-avg > span { display: flex; flex-direction: column; min-width: 0; }
.ff-avg small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8fb79f; }
.ff-avg b { font: 800 17px var(--font-display, Manrope, sans-serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ff-avg__t { color: #d5ff8a; font-weight: 800; font-size: 14px; }
.ff-avg__t small { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; margin-top: 2px; }
.ff-avg .is-out b { color: #ffcf85; }
.ff-legacy { margin: 12px 0 6px; font-size: 12.5px; color: #6b7871; font-style: italic; }
@media (max-width: 760px) {
  .ff-avg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ff-avg__t { grid-column: 1 / -1; }
}
.ff-reset { margin-top: 18px; padding: 12px 14px; border: 1px dashed #d9b9b3; border-radius: 10px; }
.ff-reset summary { color: #9a3b2f; font-weight: 700; }
.ff-reset .btn { border-color: #c96a5c; color: #9a3b2f; }

/* =====================================================================
   AUTOCOMPLETE MODEL HEAD / STIK (head-suggest.js)
   ===================================================================== */
.ff-spec__type { position: relative; }
.hs-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 80; max-height: 340px; overflow-y: auto;
  background: #fff; border: 1px solid #cfdccf; border-radius: 12px; box-shadow: 0 16px 36px rgba(12, 23, 18, .16); padding: 6px;
}
.hs-h { margin: 4px 8px 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #4c9270; }
.hs-opt {
  all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 10px; border-radius: 8px; cursor: pointer; min-height: 44px;
}
.hs-opt:hover, .hs-opt[aria-selected="true"] { background: #eef6e6; }
.hs-opt__name { font-size: 15px; color: #12231a; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-opt__name mark { background: #d5ff8a; color: inherit; border-radius: 3px; padding: 0 1px; }
.hs-opt__meta { flex: none; font-size: 11.5px; color: #7b8780; display: flex; gap: 6px; align-items: center; }
.hs-old { font-style: normal; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 999px; background: #f1ece4; color: #8a6d3b; }
.hs-foot { margin: 6px 8px 2px; font-size: 11.5px; color: #8a958f; }
.ff-spec__ac { position: relative; }
.hs-stock { font-style: normal; font-weight: 700; font-size: 10px; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; background: #e6eefb; color: #2f4f7a; white-space: nowrap; }
.ff-spec__ac .hs-list { right: auto; width: max(100%, 360px); max-width: calc(100vw - 48px); }

/* =====================================================================
   REKOMENDASI AI (ai-reco.js) — tombol & panel paket
   ===================================================================== */
.btn--ai { background: #12231a; color: #d5ff8a; border: 1px solid #12231a; gap: 8px; }
.btn--ai:hover { background: #214f3c; }
.btn--ai.is-off { background: #e9eee8; color: #8a958f; border-color: #dfe6de; }
.btn--ai__spark { font-size: 1.15em; line-height: 1; }
.air { display: grid; gap: 14px; }
.air h4 { margin: 0 0 8px; font: 800 12px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #4c9270; }
.air-diag { background: #f4f7f1; border: 1px solid #e3e9e1; border-radius: 12px; padding: 14px 16px; }
.air-d { padding: 8px 0; border-top: 1px dashed #dbe3d8; }
.air-d:first-of-type { border-top: 0; padding-top: 0; }
.air-d b { font-size: 14px; color: #12231a; }
.air-d p { margin: 3px 0 0; font-size: 13.5px; color: #3d4a43; line-height: 1.45; }
.air-target { margin-top: 10px; padding: 10px 12px; background: #12231a; color: #eef4ef; border-radius: 10px; font-size: 13.5px; }
.air-target b { color: #d5ff8a; }
.air-target ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.air-h { margin-top: 4px !important; }
.air-h small { text-transform: none; letter-spacing: 0; font-weight: 600; color: #6b7871; }
.air-pkg { border: 1px solid #dfe7df; border-radius: 14px; padding: 12px 14px 14px; background: #fff; }
.air-pkg.is-top { border-color: #4c9270; box-shadow: 0 0 0 2px rgba(213, 255, 138, .6); }
.air-pkg header { display: flex; align-items: center; gap: 12px; }
.air-pkg header > div { flex: 1; min-width: 0; }
.air-pkg header small { display: block; font-size: 11.5px; font-weight: 700; color: #4c9270; letter-spacing: .04em; }
.air-pkg header b { display: block; font: 800 17px var(--font-display, Manrope, sans-serif); color: #12231a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.air-rank { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #12231a; color: #d5ff8a; font: 800 15px var(--font-display, Manrope, sans-serif); }
.air-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.air-part { background: #f7f9f6; border-radius: 10px; padding: 10px 12px; min-width: 0; }
.air-k { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #4c9270; }
.air-part > b { display: block; font-size: 14px; color: #12231a; margin-top: 2px; }
.air-part ul { margin: 6px 0 0; padding-left: 16px; font-size: 12.5px; color: #4f5d55; display: grid; gap: 2px; }
.air-av { display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #eef1ee; color: #6b7871; }
.air-av--3 { background: #12231a; color: #d5ff8a; }
.air-av--2 { background: #e3f4d0; color: #214f3c; }
.air-av--1 { background: #fff3dc; color: #8a6d3b; }
.air-verify { border: 1px dashed #cfdccf; border-radius: 12px; padding: 12px 14px; }
.air-verify ul { margin: 0; padding-left: 18px; font-size: 13.5px; display: grid; gap: 3px; }
.air-foot { margin: 0; font-size: 12px; color: #7b8780; line-height: 1.45; }
.air-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
@media (max-width: 760px) {
  .air-parts { grid-template-columns: minmax(0, 1fr); }
  .air-pkg header { flex-wrap: wrap; }
  .air-pkg header .btn { width: 100%; }
}

.air-data { border: 1px solid #214f3c; background: #12231a; color: #eef4ef; border-radius: 12px; padding: 14px 16px; }
.air-data h4 { color: #d5ff8a !important; }
.air-data h4 small { text-transform: none; letter-spacing: 0; font-weight: 600; color: #8fb79f; }
.air-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.air-chip { display: flex; flex-direction: column; min-width: 92px; padding: 7px 10px; border-radius: 10px; background: #1b3427; border: 1px solid #2b5a45; }
.air-chip small { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8fb79f; }
.air-chip b { font: 800 16px var(--font-display, Manrope, sans-serif); color: #fff; }
.air-chip i { font-style: normal; font-size: 11px; color: #8fb79f; }
.air-chip.is-hi b, .air-chip.is-lo b { color: #ffcf85; }
.air-chip.is-na b { color: #8fb79f; font-size: 13px; }
.air-lines { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13.5px; line-height: 1.45; }
.air-conflict { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #3a2a10; border: 1px solid #8a6d3b; color: #ffe2b0; font-size: 13.5px; }
.air-conflict b { color: #ffcf85; }
.air-conflict p { margin: 4px 0 0; }

.ff-aicmp__hit { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: #eef8e3; color: #214f3c; font-size: 14px; }
.air-chips--light .air-chip { background: #f4f7f1; border-color: #e3e9e1; }
.air-chips--light .air-chip b { color: #12231a; }
.air-chips--light .air-chip small, .air-chips--light .air-chip i { color: #4c9270; }
.air-chips--light .air-chip.is-hi b, .air-chips--light .air-chip.is-lo b { color: #b5651d; }
.ff-aicmp__lines { margin: 4px 0 10px; padding-left: 18px; font-size: 13.5px; display: grid; gap: 4px; color: #3d4a43; }
.ff-aicmp__pk { margin: 0 0 8px; padding-left: 20px; font-size: 13.5px; display: grid; gap: 3px; }

/* Tombol × untuk menghapus stik uji dari daftar tab */
.ff-club-wrap { position: relative; flex: none; display: flex; }
.ff-club-wrap .ff-club b { padding-right: 52px; }
.ff-club-wrap .ff-club i { right: 40px; }
.ff-club__x {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid #dfe6de; background: #fff; color: #6b7871; font: 700 16px/1 var(--font-body); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.ff-club__x:hover, .ff-club__x:focus-visible { background: #fdecea; border-color: #e5a39a; color: #b3261e; }
.ff-club-wrap .ff-club.is-on + .ff-club__x { background: #214f3c; border-color: #2b5a45; color: #d5ff8a; }
.ff-club-wrap .ff-club.is-on + .ff-club__x:hover { background: #b3261e; border-color: #b3261e; color: #fff; }
@media (pointer: coarse) { .ff-club__x { width: 30px; height: 30px; top: 6px; right: 6px; } .ff-club-wrap .ff-club i { right: 42px; } }

/* Tujuan customer: pilihan ganda (segmen terpisah, tiap tombol bisa aktif) */
.seg--multi { gap: 8px; border: 0; background: transparent; padding: 0; overflow: visible; }
.seg--multi button { border: 1px solid #cedccf; border-radius: 8px; background: #fff; }
.seg--multi button[aria-pressed="true"] { background: #12231a; border-color: #12231a; color: var(--accent); }
.ff-sub small { font-weight: 500; font-size: 13px; }

/* =====================================================================
   ✦ ANALISIS AI — debrief hasil rekomendasi (langkah 4)
   ===================================================================== */
.air-res { display: grid; gap: 14px; }
.air-res h4 { margin: 0 0 8px; font: 800 12px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #4c9270; }
.air-res__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #12231a; color: #fff; }
.air-res__head small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8fb79f; }
.air-res__head b { font: 800 19px var(--font-display, Manrope, sans-serif); color: #d5ff8a; }
.air-conf { flex: none; font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 999px; cursor: help; }
.air-conf--tinggi { background: #d5ff8a; color: #12231a; }
.air-conf--sedang { background: #ffe2b0; color: #6b4a12; }
.air-conf--rendah { background: #f6c9c2; color: #8a2a1e; }
.air-res__hit { margin: 0; padding: 9px 12px; border-radius: 10px; background: #eef8e3; color: #214f3c; font-size: 14px; }
.air-res__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.air-res__cols section, .air-res__tune, .air-res__next { border: 1px solid #e3e9e1; border-radius: 12px; padding: 12px 14px; background: #fff; }
.air-res__good { border-left: 4px solid #4c9270 !important; }
.air-res__watch { border-left: 4px solid #d9a441 !important; }
.air-res ul, .air-res ol { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13.5px; }
.air-res li > b { display: block; color: #12231a; font-size: 14px; }
.air-res li span b { color: #12231a; }
.air-res li span { display: block; color: #4f5d55; line-height: 1.45; margin-top: 2px; }
.air-res__tune { background: #f4f7f1; }
.air-res__vs { margin: 0; font-size: 13.5px; color: #3d4a43; padding: 0 2px; }
.air-res__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.air-res__chips span { font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: #eef1ee; color: #4f5d55; }
.air-res__chips span.is-good { background: #e3f4d0; color: #214f3c; }
.air-res__chips span.is-bad { background: #fdecea; color: #9a3b2f; }
.air-res__next li { color: #3d4a43; }
@media (max-width: 760px) { .air-res__cols { grid-template-columns: minmax(0, 1fr); } .air-res__head { flex-wrap: wrap; } }

/* ---------- Lihat detail: perbandingan semua stik (ShotViz.openCompare) ---------- */
.ff-rec__detail { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 12px; padding: 12px 16px;
  border-radius: 14px; border: 1px solid #2b5a45; background: #13261c; color: #f8faf4; cursor: pointer; text-align: left; font: inherit; min-height: 52px; }
.ff-rec__detail:hover, .ff-rec__detail:focus-visible { border-color: var(--accent); background: #183223; }
.ff-rec__detail b { display: block; font-size: 15px; color: var(--accent); }
.ff-rec__detail small { display: block; font-size: 12.5px; color: #9fb5a5; margin-top: 2px; }
.ff-rec__detail i { font-style: normal; font-size: 26px; line-height: 1; color: var(--accent); }
.svc-hint { margin: 6px 0 8px; font-size: 12.5px; color: #8fae9c; }
.svc-wrap { overflow-x: auto; margin: 0 0 12px; border: 1px solid #1d3a2b; border-radius: 14px; background: #0f1d16; -webkit-overflow-scrolling: touch; }
.svc-table { width: 100%; min-width: 860px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.svc-table th { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #7fbf98; text-align: right; padding: 9px 10px 7px; white-space: nowrap; vertical-align: bottom; }
.svc-table th small { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #5f8a72; }
.svc-table th:first-child, .svc-table td:first-child { text-align: left; position: sticky; left: 0; z-index: 1; background: #0f1d16; }
.svc-table td { padding: 9px 10px; border-top: 1px solid #1a3125; text-align: right; white-space: nowrap; }
.svc-table td b { font: 800 15px Manrope, sans-serif; color: #eef4ef; }
.svc-table td i { display: block; font-style: normal; font-size: 11.5px; color: #8fae9c; margin-top: 1px; }
.svc-table td i.is-good { color: #d5ff8a; }
.svc-table td i.is-bad { color: #f0a58f; }
.svc-table td.is-out b { color: #ffc46b; }
.svc-table td.is-best b { color: #d5ff8a; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.svc-table tbody tr { cursor: pointer; transition: background .15s; }
.svc-table tbody tr:hover, .svc-table tbody tr:hover td:first-child { background: #14271d; }
.svc-table tbody tr.is-focus, .svc-table tbody tr.is-focus td:first-child { background: #193424; }
.svc-table tbody tr.is-focus td:first-child { box-shadow: inset 4px 0 0 var(--c); }
.svc-table tbody tr:focus-visible { outline: 2px solid var(--c); outline-offset: -2px; }
.svc-name { display: flex; align-items: flex-start; gap: 9px; min-width: 190px; max-width: 250px; white-space: normal; }
.svc-name b { display: block; font: 700 13px "DM Sans", sans-serif !important; color: #fff !important; line-height: 1.3; }
.svc-sw { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); margin-top: 3px; box-shadow: 0 0 0 2px #0a1410, 0 0 0 3px var(--c); }
.svc-tag { display: inline-block; margin-top: 3px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: #23392d; color: #cfe6d6; }
.svc-tag--win { background: #d5ff8a; color: #0c1712; }
.svc-lines path { fill: none; stroke-width: 2.2; stroke-opacity: .8; stroke-linecap: round; }
.svc-tlines path { fill: none; stroke-width: 2.2; stroke-opacity: .8; stroke-linecap: round; }
.svc-unk { stroke-width: 2.5; stroke-dasharray: 5 4; }
.svc-marks circle { stroke: #0a1410; stroke-width: 1.6; }
.svc-ring { fill: none; stroke-width: 2.4; }
.svc-keys { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: #9fb7a8; }
.svc-keys li { display: flex; align-items: center; gap: 6px; }
.svc-keys li.is-focus { color: #fff; font-weight: 700; }
.svc-keys .svc-sw { width: 9px; height: 9px; margin-top: 0; box-shadow: none; }
@media (max-width: 640px) {
  .svc-table { min-width: 760px; }
  .svc-name { min-width: 140px; max-width: 170px; }
  .svc-table td b { font-size: 14px; }
}
.svc-table td.svc-score { border-right: 1px solid #1a3125; }
.svc-table td.svc-score b { font-size: 17px; }
.svc .sv-nav span { white-space: nowrap; }
@media (max-width: 640px) {
  .svc .sv-head { gap: 8px; }
  .svc .sv-head h2 { font-size: 19px; white-space: nowrap; gap: 8px; }
  .svc .sv-nav { gap: 4px; }
  .svc .sv-nav button { width: 34px; height: 34px; font-size: 19px; }
  .svc .sv-nav .sv-x { margin-left: 2px; }
}

/* =====================================================================
   LAPORAN PDF (assets/report-pdf.js) — dokumen A4, hanya muncul saat cetak
   ===================================================================== */
.btn--pdf { display: inline-flex; align-items: center; gap: 8px; background: #0c1712; color: #d5ff8a; border: 1px solid #0c1712; }
.btn--pdf svg { width: 18px; height: 18px; }
.btn--pdf:hover { background: #183223; color: #d5ff8a; }
#ffPdf { display: none; }
#ffPdf.pdf-preview { display: block; background: #8a948f; padding: 20px 0; }
#ffPdf.pdf-preview .pdf-page { margin: 0 auto 20px; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
@media print {
  body.pdf-mode > *:not(#ffPdf) { display: none !important; }
  body.pdf-mode { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body.pdf-mode #ffPdf { display: block !important; }
}
.pdf { --ink: #12231a; --muted: #5e6e65; --line: #e1e8e0; --soft: #f4f7f1; --brand: #0c1712; --lime: #d5ff8a; --good: #2f7d4f; --bad: #b2513f; --warn: #b7791f;
  font-family: "DM Sans", system-ui, sans-serif; color: var(--ink); font-size: 12px; line-height: 1.45;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pdf *, .pdf *::before, .pdf *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pdf-page { width: 210mm; min-height: 296.5mm; box-sizing: border-box; padding: 9mm 12mm 8mm; background: #fff; display: flex; flex-direction: column; gap: 4.2mm;
  break-after: page; page-break-after: always; position: relative; overflow: hidden; }
.pdf-page:last-child { break-after: auto; page-break-after: auto; }
.pdf h1, .pdf h2, .pdf h3 { font-family: Manrope, "DM Sans", sans-serif; margin: 0; color: var(--ink); }
.pdf-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding-bottom: 3mm; border-bottom: 1.5px solid var(--brand); }
.pdf-brand { display: flex; align-items: center; gap: 8px; }
.pdf-logo { width: 26px; height: 26px; flex: none; }
.pdf-brand b { display: block; font: 800 11.5px Manrope, sans-serif; letter-spacing: .06em; }
.pdf-brand small, .pdf-top__r small { display: block; font-size: 9.5px; color: var(--muted); letter-spacing: .04em; }
.pdf-top__mid { font: 800 9.5px "DM Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #4c7a62; }
.pdf-top__r { text-align: right; }
.pdf-top__r b { font: 800 12px Manrope, sans-serif; }
.pdf-foot { margin-top: auto; display: flex; justify-content: space-between; padding-top: 2.5mm; border-top: 1px solid var(--line); font-size: 9px; color: var(--muted); letter-spacing: .02em; }
.pdf-muted { color: var(--muted); }
.pdf-small { font-size: 9.5px; margin: 1.5mm 0 0; }
.pdf-h { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.pdf-lead { margin: -2mm 0 0; color: var(--muted); font-size: 11px; max-width: 176mm; }
.pdf-good { color: var(--good); font-weight: 700; }
.pdf-bad { color: var(--bad); font-weight: 700; }
.pdf-out { color: var(--warn); font-weight: 700; }
.pdf-sec h2, .pdf-box h2 { font-size: 13px; font-weight: 800; margin-bottom: 2.5mm; display: flex; align-items: baseline; gap: 8px; }
.pdf-sec h2 small { font: 600 10px "DM Sans", sans-serif; color: var(--muted); }
.pdf-box h3 { font-size: 12px; font-weight: 800; margin-bottom: 2mm; }

/* hal. 1 */
.pdf-hero { display: grid; grid-template-columns: minmax(0, 1fr) 66mm; gap: 6mm; align-items: stretch; background: var(--brand); color: #fff; border-radius: 4mm; padding: 6mm 7mm;
  background-image: radial-gradient(120% 140% at 100% 0%, #1f4733 0%, rgba(12, 23, 18, 0) 60%); }
.pdf-eyebrow { font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.pdf-hero h1 { color: #fff; font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 2mm 0 1.5mm; line-height: 1.05; }
.pdf-hero p { margin: 0; color: #b9cabd; font-size: 11px; }
.pdf-hero .pdf-hero__no { margin-top: 3mm; font-size: 10px; }
.pdf-hero__no b { color: #fff; letter-spacing: .04em; }
.pdf-verdict { background: #17291f; border: 1px solid #2b5a45; border-radius: 3mm; padding: 4mm 4.5mm; display: flex; flex-direction: column; gap: 1.5mm; }
.pdf-verdict small { font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8fb79f; }
.pdf-verdict > b { font: 800 17px Manrope, sans-serif; color: var(--lime); line-height: 1.15; }
.pdf-verdict.is-bad > b { color: #ffb4a5; }
.pdf-verdict__score { font-size: 11px; color: #b9cabd; }
.pdf-verdict__score i { font-style: normal; color: #fff; font-weight: 700; }
.pdf-verdict__score em { font-style: normal; color: var(--lime); font-weight: 800; font-size: 14px; }
.pdf-verdict__rec { font-size: 10.5px; color: #b9cabd; margin-top: auto; padding-top: 1.5mm; border-top: 1px solid #2b5a45; }
.pdf-verdict__rec b { color: #fff; }
.pdf-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5mm; }
.pdf-box { border: 1px solid var(--line); border-radius: 3mm; padding: 4mm 4.5mm; break-inside: avoid; }
.pdf-box--soft { background: var(--soft); border-color: var(--soft); }
.pdf-dl { margin: 0; display: grid; }
.pdf-dl div { display: grid; grid-template-columns: 26mm minmax(0, 1fr); gap: 3mm; padding: 1.3mm 0; border-bottom: 1px dashed var(--line); }
.pdf-dl div:last-child { border-bottom: 0; }
.pdf-dl dt { color: var(--muted); font-size: 10.5px; }
.pdf-dl dd { margin: 0; font-weight: 700; font-size: 11px; }
.pdf-complaints { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6mm; }
.pdf-complaints li { display: flex; justify-content: space-between; align-items: center; gap: 3mm; padding: 1.8mm 2.5mm; background: var(--soft); border-radius: 2mm; font-size: 11px; font-weight: 600; }
.pdf-complaints b { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; padding: 1mm 2.2mm; border-radius: 99px; white-space: nowrap; background: #ecefe9; color: #6b5a26; }
.pdf-complaints b.is-good { background: #dff1cf; color: #1f5a37; }
.pdf-complaints b.is-bad { background: #fbe3de; color: #8f3326; }
.pdf-note { margin: 2.5mm 0 0; font-size: 10.5px; }
.pdf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(23mm, 1fr)); gap: 2.2mm; }
.pdf-kpi { border: 1px solid var(--line); border-top: 3px solid #c9d2cc; border-radius: 2.5mm; padding: 2mm 2.4mm 2.2mm; break-inside: avoid; display: flex; flex-direction: column; gap: .4mm; min-width: 0; }
.pdf-kpi.is-good { border-top-color: var(--good); }
.pdf-kpi.is-bad { border-top-color: var(--bad); }
.pdf-kpi small { font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-kpi b { font: 800 13px Manrope, sans-serif; white-space: nowrap; }
.pdf-kpi__from { font-size: 9px; color: var(--muted); white-space: nowrap; }
.pdf-kpi em { font-style: normal; font-size: 10px; font-weight: 800; color: var(--muted); }
.pdf-kpi.is-good em { color: var(--good); }
.pdf-kpi.is-bad em { color: var(--bad); }
.pdf-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.pdf-table th { text-align: left; font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #4c7a62; padding: 1.8mm 2mm; border-bottom: 1.5px solid var(--ink); vertical-align: bottom; }
.pdf-table td { padding: 1.5mm 2mm; border-bottom: 1px solid var(--line); vertical-align: top; }
.pdf-table td:first-child { color: var(--muted); white-space: nowrap; }
.pdf-spec th { letter-spacing: .02em; text-transform: none; font-size: 9.5px; color: var(--ink); }
.pdf-spec th em { display: block; font-style: normal; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--good); margin-top: .6mm; }
.pdf-spec .is-win { background: #f1f8e6; }
.pdf-spec td.is-win { font-weight: 700; }
.pdf-spec__score td { border-bottom: 0; border-top: 1.5px solid var(--ink); }
.pdf-spec__score b { font: 800 13px Manrope, sans-serif; }
.pdf-sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 5px; box-shadow: 0 0 0 1px #8d9993; vertical-align: 1px; }

/* hal. 2 — grafik (panel gelap gaya simulator) */
.pdf-cmp .svc-wrap { overflow: visible; background: #fff; border: 1px solid var(--line); border-radius: 3mm; margin: 0; }
.pdf-cmp .svc-table { min-width: 0; font-size: 10px; }
.pdf-cmp .svc-table th { padding: 1.6mm 1.4mm 1.2mm; color: #4c7a62; font-size: 8px; position: static; background: #fff; }
.pdf-cmp .svc-table th small { color: #8a9a91; font-size: 8px; }
.pdf-cmp .svc-table td { padding: 1.5mm 1.4mm; border-top: 1px solid var(--line); position: static; background: transparent; }
.pdf-cmp .svc-table td:first-child { background: transparent; }
.pdf-cmp .svc-table td b { font-size: 11.5px; color: var(--ink); }
.pdf-cmp .svc-table td.svc-score b { font-size: 13px; }
.pdf-cmp .svc-table td.svc-score { border-right: 1px solid var(--line); }
.pdf-cmp .svc-table td i { font-size: 9px; color: #7d8c84; }
.pdf-cmp .svc-table td i.is-good { color: var(--good); }
.pdf-cmp .svc-table td i.is-bad { color: var(--bad); }
.pdf-cmp .svc-table td.is-out b { color: var(--warn); }
.pdf-cmp .svc-table td.is-best b { color: var(--good); text-decoration-color: var(--good); }
.pdf-cmp .svc-table tbody tr.is-focus, .pdf-cmp .svc-table tbody tr.is-focus td:first-child { background: #f1f8e6; }
.pdf-cmp .svc-table tbody tr.is-focus td:first-child { box-shadow: inset 3px 0 0 #7fb43a; }
.pdf-cmp .svc-name { min-width: 0; max-width: 42mm; gap: 6px; }
.pdf-cmp .svc-name b { font-size: 10.5px !important; color: var(--ink) !important; }
.pdf-cmp .svc-sw { width: 9px; height: 9px; box-shadow: 0 0 0 1px #8d9993; margin-top: 2px; }
.pdf-cmp .svc-tag { font-size: 7.5px; background: #eef1ee; color: var(--muted); padding: .5mm 1.6mm; }
.pdf-cmp .svc-tag--win { background: #d5ff8a; color: #0c1712; }
.pdf .sv-panel { grid-area: auto; break-inside: avoid; border-radius: 3mm; }
.pdf .sv-panel figcaption { font-size: 11px; }
.pdf .sv-panel figcaption small { font-size: 9.5px; }
.pdf .sv-trail { animation: none !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
.pdf .sv-apex, .pdf .sv-land text, .pdf .sv-offlbl { animation: none !important; opacity: 1 !important; }
.pdf .sv-pulse { display: none; }
.pdf .sv-zone { animation: none !important; }
.pdf-viz { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 3.5mm; align-items: stretch; }
.pdf .sv-panel--face { padding: 9mm 4mm 3mm; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2mm 3mm; }
.pdf .sv-face { max-width: 100%; }
.pdf .sv-face-axis { font-size: 8.5px; }
.pdf .sv-legend { font-size: 10.5px; }
.pdf .svc-keys { font-size: 9.5px; gap: 1mm 3mm; }
.pdf-why { margin: 2mm 0 0; padding-left: 4mm; font-size: 9px; color: #cfe6d6; display: grid; gap: 1mm; }
.pdf-panel--top { display: flex; align-items: stretch; justify-content: center; }
.pdf-panel--top svg { width: 100%; height: auto; max-height: 112mm; }

/* hal. 3 — Analisis AI */
.pdf-lines { margin: 0; padding-left: 4.5mm; display: grid; gap: 1mm; font-size: 11px; }
.pdf-ai .air-res { gap: 3.5mm; }
.pdf-ai .air-res__head { padding: 4mm 4.5mm; border-radius: 3mm; }
.pdf-ai .air-res__head b { font-size: 16px; }
.pdf-ai .air-res__cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 3.5mm; }
.pdf-ai .air-res__cols section, .pdf-ai .air-res__tune, .pdf-ai .air-res__next { padding: 3.2mm 3.8mm; border-radius: 3mm; break-inside: avoid; }
.pdf-ai .air-res ul, .pdf-ai .air-res ol { font-size: 10.5px; gap: 1.8mm; }
.pdf-ai .air-res li > b { font-size: 11px; }
.pdf-ai .air-res h4 { font-size: 9.5px; margin-bottom: 2mm; }
.pdf-ai .air-res__vs, .pdf-ai .air-res__hit { font-size: 10.5px; }
.pdf-ai .air-res__chips span { font-size: 9.5px; }

/* hal. 4 — spec lama → baru */
.pdf-ba td { padding: 1.7mm 2.4mm; font-size: 11px; }
.pdf-ba td:first-child { width: 42mm; }
.pdf-ba td:nth-child(2), .pdf-ba td:nth-child(4) { width: 58mm; }
.pdf-ba .pdf-ba__arrow { width: 6mm; text-align: center; color: var(--good); font-weight: 800; }
.pdf-ba .pdf-ba__g td { padding: 2.6mm 2.4mm 1mm; font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #4c7a62; border-bottom: 1px solid var(--ink); }
.pdf-ba tr.is-changed td { background: #f1f8e6; }
.pdf-ba tr.is-changed td:first-child { color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 0 #7fb43a; }
.pdf-notes p { margin: 0; font-size: 11px; white-space: pre-wrap; }
.pdf-lines-empty { display: grid; gap: 7mm; padding-top: 4mm; }
.pdf-lines-empty i { display: block; border-bottom: 1px solid var(--line); }
.pdf-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 14mm; margin-top: 4mm; }
.pdf-sign div { display: grid; gap: 1.5mm; }
.pdf-sign span { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pdf-sign i { display: block; height: 16mm; border-bottom: 1px solid var(--ink); }
.pdf-sign b { font-size: 11px; }
.pdf-disclaimer { margin-top: 2mm; }
/* PDF: rapatkan agar tiap bagian muat satu lembar A4 */
.pdf-panel--top svg { max-height: 84mm; width: auto; }
.pdf .sv-panel--face { padding-top: 8mm; }
.pdf .pdf-ba td { padding-top: 1.25mm; padding-bottom: 1.25mm; }
.pdf .pdf-ba .pdf-ba__g td { padding-top: 2mm; }
.pdf-sign i { height: 12mm; }

/* ---------- Cloud sync (cloud.js) ---------- */
.cl-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid #cfdccf; background: #fff; color: #4f5d55; font: 700 12.5px var(--font-body, "DM Sans", sans-serif);
  cursor: pointer; white-space: nowrap; margin-right: 8px;
}
.cl-chip[hidden] { display: none; }
.cl-chip svg { width: 17px; height: 17px; flex: none; }
.cl-chip.is-ok { color: #214f3c; border-color: #b9dca0; background: #f1fae6; }
.cl-chip.is-ok svg { color: #4c9270; }
.cl-chip.is-sync svg { color: #2f6fb0; animation: cl-pulse 1.2s ease-in-out infinite; }
.cl-chip.is-warn { color: #8a5a00; border-color: #ecd48f; background: #fff8e3; }
.cl-chip.is-bad { color: #b3261e; border-color: #f0b8b3; background: #fff1f0; }
.cl-chip:hover { border-color: #4c9270; }
@keyframes cl-pulse { 50% { opacity: .35; } }
.cl-pin .st-card .cl-later { margin-top: -6px; }
@media (max-width: 860px) {
  .cl-chip { height: 34px; padding: 0 9px; margin-right: 6px; }
  .cl-chip span { display: none; }
  .cl-chip.is-warn span, .cl-chip.is-bad span { display: inline; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) { .cl-chip.is-sync svg { animation: none; } }

/* ---------- Baca otomatis dari bay (Start/Stop) ---------- */
.ff-bay { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 7px; background: #fff; border: 1px solid #dfe5dc; }
.ff-bay__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #4c9270; box-shadow: 0 0 0 3px rgba(76, 146, 112, .16); }
.ff-bay.is-off .ff-bay__dot { background: #c98a1b; box-shadow: 0 0 0 3px rgba(201, 138, 27, .16); }
.ff-bay.is-live { border-color: #4c9270; background: #f1f8ea; }
.ff-bay.is-live .ff-bay__dot, .ff-bay__wait .ff-bay__dot { background: #d33b1f; box-shadow: 0 0 0 3px rgba(211, 59, 31, .18); animation: ff-bay-rec 1.2s ease-in-out infinite; }
@keyframes ff-bay-rec { 50% { opacity: .35; } }
.ff-bay__t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ff-bay__t b { font: 800 15px var(--font-display); color: #14231b; letter-spacing: .01em; }
.ff-bay__t small { font: 500 12.5px var(--font-body); color: #64716a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-bay__sel { max-width: 220px; min-height: 38px; font: 700 14px var(--font-body); padding: 0 10px; }
.ff-bay__btn { min-height: 48px; min-width: 132px; justify-content: center; font-size: 13px; letter-spacing: .12em; }
.ff-bay__btn--stop { background: #14231b; color: #fff; border-color: #14231b; }
.ff-bay__btn--stop:hover { background: #24372c; }
.ff-shot .input[readonly] { background: #f7faf4; color: #14231b; border-style: dashed; cursor: default; }
.ff-shot__act--end { justify-content: flex-end; }
.ff-bay__wait { display: flex; align-items: center; gap: 10px; margin: 12px 2px 0; font: 600 13.5px var(--font-body); color: #37463a; }
.ff-bay-list tbody tr.is-new td { background: #f1f8ea; animation: ff-bay-new 1.6s ease-out; }
@keyframes ff-bay-new { from { background: #dcefc6; } }
.ff-bay__x { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid #dfe5dc; border-radius: 50%; background: #fff; color: #8e9690; font: 700 18px/1 var(--font-body); cursor: pointer; }
.ff-bay__x:hover, .ff-bay__x:focus-visible { color: #a33b1f; border-color: #e9c3b6; background: #fdf3ef; }
.ff-bay-list td:last-child, .ff-bay-list th:last-child { width: 1%; text-align: right; }
.ff-bay__note { margin-top: 8px; }
.ff-bay__viz { border: 0; background: none; padding: 0; font: 700 12.5px var(--font-body); color: #276c4b; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .ff-bay { flex-wrap: wrap; }
  .ff-bay__btn { flex: 1 1 100%; }
}
.ff-bay-list .ff-table th, .ff-bay-list .ff-table td { padding-left: 8px; padding-right: 8px; }
.ff-bay-list .ff-table th small { display: block; font-size: 9.5px; letter-spacing: .04em; }
@media (max-width: 900px) {
  .ff-bay__club { display: none; }
  .ff-bay-list .ff-table { font-size: 13px; }
  .ff-bay-list .ff-table th, .ff-bay-list .ff-table td { padding-left: 5px; padding-right: 5px; }
}

/* ---------- Rekomendasi AI: 5 produk jadi (tanpa kustomisasi) ---------- */
.air-prods { display: grid; gap: 10px; }
.air-prod { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; border: 1px solid #dfe7df; border-radius: 14px; padding: 12px 14px; background: #fff; }
.air-prod .air-rank { background: #fff; color: #12231a; border: 2px solid #12231a; }
.air-prod__b small { display: block; font-size: 11.5px; font-weight: 700; color: #4c9270; letter-spacing: .04em; }
.air-prod__b > b { display: block; margin-top: 2px; font: 800 15.5px/1.3 var(--font-display, Manrope, sans-serif); color: #12231a; overflow-wrap: anywhere; }
.air-prod__m { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.air-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: #eef3ec; font: 700 12px var(--font-body); color: #37463a; }
.air-prod ul { margin: 8px 0 0; padding-left: 16px; font-size: 12.5px; color: #4f5d55; display: grid; gap: 2px; }
.air-prod > .btn { align-self: center; white-space: nowrap; }
@media (max-width: 640px) {
  .air-prod { grid-template-columns: auto minmax(0, 1fr); }
  .air-prod > .btn { grid-column: 1 / -1; justify-content: center; }
}

/* ---------- Kolom wajib (FIT-088) ---------- */
.ff-req { font-style: normal; font-weight: 800; color: #c0392b; margin-left: 2px; }
.ff-miss > .input, .ff-miss .input, .ff-miss.input, select.ff-miss { border-color: #c0392b !important; background-color: #fdf1ef !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, .15) !important; }
.ff-cats.ff-miss, .ff-chips.ff-miss, .ff-shot.ff-miss, [data-req-feel].ff-miss { outline: 2px solid #c0392b; outline-offset: 6px; border-radius: 12px; }
.ff-work li.ff-miss > label { border-color: #c0392b; background: #fdf1ef; box-shadow: inset 3px 0 0 #c0392b; }
.ff-spec__f.ff-miss > span, .ff-field.ff-miss > span, .ff-m.ff-miss > span { color: #c0392b; }

/* ---------- Analisis fitter per stik di pop-up Rata-rata (FIT-089) ---------- */
.sv-extra { margin-top: 14px; border-top: 1px solid #214f3c; padding-top: 16px; }
.svf { display: grid; gap: 14px; }
.svf-head h3 { margin: 6px 0 0; font: 800 20px/1.3 Manrope, "DM Sans", sans-serif; color: #fff; }
.svf-head h3 b { color: #d5ff8a; }
.svf-head p { margin: 6px 0 0; font-size: 14px; color: #b9cbbf; line-height: 1.5; }
.svf-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; }
.svf-box { background: #13251c; border: 1px solid #1f3b2e; border-radius: 14px; padding: 14px 16px; min-width: 0; }
.svf h4 { margin: 0 0 10px; font: 800 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #7fbf98; }
.svf-h { margin: 4px 0 0 !important; }
.svf-h small { text-transform: none; letter-spacing: 0; font-weight: 600; color: #8aa596; }
.svf-muted { margin: 0; font-size: 13.5px; color: #8aa596; }
.svf-steps { margin: 0; padding: 0; list-style: none; counter-reset: svf; display: grid; gap: 10px; }
.svf-steps li { counter-increment: svf; position: relative; padding-left: 36px; display: grid; gap: 3px; font-size: 13.5px; line-height: 1.45; color: #d7e3db; }
.svf-steps li::before { content: counter(svf); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #d5ff8a; color: #0c1712; font: 800 13px Manrope, sans-serif; }
.svf-steps b { color: #fff; font-size: 14.5px; }
.svf-steps span b { color: #d5ff8a; font-size: inherit; }
.svf-steps em { font-style: normal; color: #d5ff8a; background: rgba(213, 255, 138, .08); border-left: 2px solid #d5ff8a; padding: 4px 8px; border-radius: 0 6px 6px 0; }
.svf-keep { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #24453a; font-size: 13px; color: #b9cbbf; }
.svf-keep b { color: #7fbf98; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.svf-keep ul, .svf-target ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.svf-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.svf-links li { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; color: #c9d7ce; }
.svf-links li > i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--font-body); font-style: normal; background: #2a3a32; color: #b9cbbf; }
.svf-links li.is-ok > i { background: #d5ff8a; color: #0c1712; }
.svf-links li.is-bad > i { background: #e8a33d; color: #1b1205; }
.svf-links b { color: #fff; }
.svf-links small { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8aa596; }
.svf-links li.is-ok small { color: #d5ff8a; }
.svf-links li.is-bad small { color: #f0b860; }
.svf-target { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #0c1712; border: 1px solid #1f3b2e; font-size: 12.5px; color: #b9cbbf; }
.svf-target b { color: #d5ff8a; }
.svf-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.svf-card { display: flex; flex-direction: column; gap: 8px; background: #13251c; border: 1px solid #1f3b2e; border-radius: 14px; padding: 12px 14px; min-width: 0; }
.svf-card.is-top { border-color: #d5ff8a; box-shadow: 0 0 0 1px rgba(213, 255, 138, .35); }
.svf-card header { display: flex; align-items: center; gap: 8px; }
.svf-card header small { font-size: 11px; font-weight: 700; color: #7fbf98; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svf-rank { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #d5ff8a; color: #0c1712; font: 800 13px Manrope, sans-serif; }
.svf-name { font: 800 15px/1.3 Manrope, "DM Sans", sans-serif; color: #fff; }
.svf-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.svf-tags .air-av { margin-top: 0; }
.svf-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #1f3b2e; color: #c9d7ce; }
.svf-parts { margin: 0; display: grid; gap: 4px; font-size: 12.5px; }
.svf-parts div { display: flex; gap: 8px; }
.svf-parts dt { flex: none; width: 40px; color: #7fbf98; font-weight: 700; }
.svf-parts dd { margin: 0; color: #e3ece6; min-width: 0; }
.svf-card ul { margin: 0; padding-left: 16px; font-size: 12.5px; color: #b9cbbf; display: grid; gap: 2px; flex: 1; }
.svf-card .sv-btn { align-self: flex-start; margin-top: 2px; }
.svf-card .sv-btn[disabled] { opacity: .75; cursor: default; }
@media (max-width: 900px) {
  .svf-grid { grid-template-columns: 1fr; }
  .svf-cards { grid-template-columns: 1fr; }
}

/* ---------- Analisis semua stik + alasan pemenang di pop-up perbandingan (FIT-090) ---------- */
.svf-small { margin: 0; font-size: 12.5px; color: #b9cbbf; line-height: 1.45; }
.svf-small b { color: #fff; }
.svf-good b { color: #d5ff8a; }
.svf-conf { margin-left: 6px; font-size: 10.5px; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; background: #2a3a32; color: #c9d7ce; vertical-align: 1px; }
.svf-conf.is-tinggi { background: #d5ff8a; color: #0c1712; }
.svf-conf.is-sedang { background: #3b4d2a; color: #e3f4d0; }
.svf-conf.is-rendah { background: #e8a33d; color: #1b1205; }
.svf-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13px; color: #c9d7ce; line-height: 1.45; }
.svf-list li > b { display: block; color: #fff; }
.svf-list li > span b { color: #d5ff8a; }
.svf-target .svf-list { margin-top: 6px; }
.svf-links--sm { gap: 6px; margin-top: 6px; }
.svf-links--sm li > i { width: 18px; height: 18px; font-size: 10px; }
.svf-steps span { color: #c9d7ce; }
.svf-clubs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.svf-club { display: grid; gap: 8px; align-content: start; background: #13251c; border: 1px solid #1f3b2e; border-left: 4px solid var(--c); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.svf-club.is-win { border-color: #d5ff8a; border-left-color: var(--c); box-shadow: 0 0 0 1px rgba(213, 255, 138, .3); }
.svf-club header { display: flex; align-items: center; gap: 10px; }
.svf-club header > div { flex: 1; min-width: 0; }
.svf-club header small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7fbf98; }
.svf-club.is-win header small { color: #d5ff8a; }
.svf-club header b { display: block; font: 800 15px/1.3 Manrope, "DM Sans", sans-serif; color: #fff; }
.svf-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }
.svf-score { flex: none; font: 800 24px Manrope, sans-serif; color: #fff; }
.svf-club.is-win .svf-score { color: #d5ff8a; }
.svf-bars { display: grid; gap: 5px; }
.svf-bars > div { display: grid; grid-template-columns: 118px minmax(0, 1fr) 28px; align-items: center; gap: 8px; font-size: 12px; color: #b9cbbf; }
.svf-bars i { font-style: normal; color: #6f8a7b; font-size: 11px; }
.svf-bars em { height: 6px; border-radius: 999px; background: #0c1712; overflow: hidden; }
.svf-bars s { display: block; height: 100%; border-radius: inherit; background: var(--c); text-decoration: none; }
.svf-bars b { text-align: right; color: #fff; font-weight: 700; }
.svf-club__v { margin: 0; font-size: 13px; line-height: 1.45; color: #e3ece6; }
.svf-club__v b { color: #d5ff8a; }
.svf-deltas { display: flex; flex-wrap: wrap; gap: 5px; }
.svf-deltas span { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #1f3b2e; color: #c9d7ce; }
.svf-deltas span.is-ok { background: rgba(213, 255, 138, .14); color: #d5ff8a; }
.svf-deltas span.is-bad { background: rgba(232, 163, 61, .16); color: #f0b860; }
.svf-why { margin: 0; padding: 8px 10px; border-radius: 10px; background: #0c1712; border: 1px dashed #2c4a3c; font-size: 12.5px; line-height: 1.45; color: #c9d7ce; }
.svf-why > b { display: block; margin-bottom: 2px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #f0b860; }
@media (max-width: 900px) { .svf-clubs { grid-template-columns: 1fr; } }
.svf-keep .svf-links b { text-transform: none; letter-spacing: 0; font-size: 13px; color: #fff; }
.svf-note { margin: 8px 0 0 !important; padding: 8px 12px; border-radius: 10px; background: rgba(213, 255, 138, .07); border-left: 3px solid #d5ff8a; font-size: 13px !important; color: #d7e3db !important; }
.svf-note b { color: #d5ff8a; margin-right: 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Titik kena terukur Foresight (FIT-093) ---------- */
.sv-meas { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: #8aa596; }
.sv-meas-tag { margin-left: 4px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #d5ff8a; }
.ff-bay__kena { white-space: nowrap; font-size: 12.5px; }
@media (max-width: 700px) { .ff-bay__kena { display: none; } }
.sv-dots circle { fill: rgba(255, 255, 255, .55); stroke: #0c1712; stroke-width: .8; }

/* ---------- Draft & simpan otomatis (FIT-095) ---------- */
.ff-autosave { margin: 0 0 12px; padding: 7px 12px; border-radius: 10px; background: #eef7e6; border: 1px solid #cfe5bf; color: #2f5d3f; font-size: 13px; font-weight: 600; }
.ff-autosave b { color: #12231a; }
.tag--draft { background: #fff3dc; color: #8a6d3b; border-color: #f0dcb4; }
.ff-row.is-draft { border-style: dashed; }

/* ---------- Sesi SimBridge: menunggu siap, nilai tak terukur (FIT-100) ---------- */
.ff-bay.is-wait { border-color: #e0b85a; background: #fff8e8; }
.ff-bay.is-wait .ff-bay__dot { background: #d9961c; box-shadow: 0 0 0 3px rgba(217, 150, 28, .2); animation: ff-bay-rec 1.2s ease-in-out infinite; }
.ff-bay__ok { color: #1f7a45; }
.ff-bay__warn { color: #b0461f; }
.ff-bay__na { margin: 0 0 10px; padding: 7px 12px; border-radius: 10px; background: #fff6e0; border: 1px solid #f0dcb4; color: #6b5420; font-size: 12.5px; line-height: 1.45; }
.ff-na { color: #9aa59f; font-size: 11.5px; font-style: italic; }
.ff-est { color: #9a7b3c; font-style: italic; }
.ff-table tr.is-nospin td { background: #fffaf0; }

/* ---------- Hapus fitting per baris (FIT-101) ---------- */
.ff-row__del { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e3e8e1; background: #fff; color: #8a958f; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s, border-color .15s; }
.ff-row__del:hover, .ff-row__del:focus-visible { background: #fbeae6; border-color: #e7b8ad; color: #b0461f; outline: none; }

/* ---------- Tombol "Lihat Visual & Rekomendasi" di bawah Club speed (FIT-102) ---------- */
.ff-shot__act .ff-shot__viz { margin-right: auto; border-color: #4c9270; color: #214f3c; font-weight: 800; }
.ff-shot__act .ff-shot__viz:not([disabled]):hover { background: #eef7e6; }
.ff-shot__act .ff-shot__viz[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Kotak Analisis AI · Copilot (gerbang AI, FIT-104) ---------- */
.aig { border: 1px solid #cfe0c9; border-radius: 14px; padding: 12px 14px; background: linear-gradient(180deg, #f7fbf2, #fff); display: grid; gap: 8px; }
.aig-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.aig-head b { font: 800 14px var(--font-display, Manrope, sans-serif); color: #12231a; }
.aig-head small { color: #6b7871; font-size: 12px; }
.aig-spark { color: #4c9270; font-size: 15px; }
.aig-wait { margin: 0; display: flex; align-items: center; gap: 10px; color: #4f5d55; font-size: 13.5px; }
.aig-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #cfe0c9; border-top-color: #4c9270; animation: aigspin .8s linear infinite; flex: none; }
@keyframes aigspin { to { transform: rotate(360deg); } }
.aig.is-fail { border-color: #f0dcb4; background: #fffaf0; }
.aig-fail { margin: 0; font-size: 13.5px; color: #6b5420; }
.aig-retry { justify-self: start; border: 1px solid #d9c08a; background: #fff; border-radius: 999px; padding: 5px 12px; font: 700 12.5px var(--font-body); cursor: pointer; color: #6b5420; }
.aig-sum { margin: 0; font-size: 14.5px; font-weight: 700; color: #12231a; line-height: 1.45; }
.aig-list, .aig-notes { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13.5px; color: #3d4a43; }
.aig-notes { color: #6b7871; font-size: 12.5px; }
.aig-recs { display: grid; gap: 6px; }
.aig-recs h5 { margin: 4px 0 0; font: 800 11px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #4c9270; }
.aig-rec { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #e3e9e1; }
.aig-rec > div { flex: 1; min-width: 0; }
.aig-rec b { display: block; font-size: 13.5px; color: #12231a; }
.aig-rec small { display: block; font-size: 12.5px; color: #4f5d55; }
.aig-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #12231a; color: #d5ff8a; font: 800 12px Manrope, sans-serif; }
.aig-act { flex: none; border: 0; border-radius: 999px; padding: 6px 12px; background: #d5ff8a; color: #12231a; font: 800 12px var(--font-body); cursor: pointer; }
.aig-act[disabled] { background: #eef1ee; color: #6b7871; cursor: default; }
.aig-foot { margin: 0; font-size: 11.5px; color: #8a958f; }
.aig-engine { margin: 10px 0 6px; font: 800 11px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #8a958f; }
/* di pop-up gelap */
.sv .aig { background: #13251c; border-color: #2c4a3c; }
.sv .aig-head b, .sv .aig-sum, .sv .aig-rec b { color: #fff; }
.sv .aig-list, .sv .aig-wait, .sv .aig-rec small { color: #c9d7ce; }
.sv .aig-rec { background: #0c1712; border-color: #24453a; }
.sv .aig.is-fail { background: #2a2414; border-color: #6b5420; }
.sv .aig-fail { color: #f0d9a8; }
.sv .aig-engine { color: #7fbf98; }
.sv-extra > .aig-slot { margin-bottom: 4px; }

/* ---------- Administrasi → Koneksi Microsoft 365 ---------- */
.ff-admin { display: grid; gap: 14px; padding-bottom: 40px; }
.adm-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 12px 0; }
.adm-dl dd { overflow-wrap: anywhere; }
.adm-err { color: #a33b1f; }
.adm-bad { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: #fbeae6; border: 1px solid #e7b8ad; color: #7a2d17; font-size: 13.5px; }
.adm-act { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) { .adm-dl { grid-template-columns: 1fr; } }

/* ---------- Panel Koneksi Microsoft 365 (gaya sama dengan SOI, FIT-104) ---------- */
.adm-card { background: #fff; border: 1px solid #e3e8e1; border-radius: 16px; padding: 18px 20px 16px; display: grid; gap: 12px; }
.adm-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.adm-eyebrow { display: block; font: 800 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #2f8a1f; }
.adm-title { margin: 4px 0 0; font: 800 22px var(--font-display, Manrope, sans-serif); color: #12231a; }
.adm-badge { flex: none; padding: 6px 14px; border-radius: 999px; font: 700 13px var(--font-body); }
.adm-badge.is-on { background: #e4f4dc; color: #2f7d1f; }
.adm-badge.is-off { background: #f1f3f0; color: #6b7871; }
.adm-desc { margin: 0; max-width: 780px; font-size: 14px; line-height: 1.55; color: #4f5d55; }
.adm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.adm-tile { background: #f4f5f3; border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.adm-tile small { font-size: 12.5px; color: #6b7871; margin-bottom: 4px; }
.adm-tile b { font: 700 15px var(--font-body); color: #12231a; overflow-wrap: anywhere; }
.adm-tile span { font-size: 14px; color: #5d6a63; overflow-wrap: anywhere; }
.adm-act { display: flex; gap: 10px; flex-wrap: wrap; }
.adm-btn { border-radius: 12px; padding: 10px 18px; font: 700 14px var(--font-body); cursor: pointer; border: 1px solid #d9dfd6; background: #fff; color: #12231a; }
.adm-btn--main { background: #2f7d1f; border-color: #2f7d1f; color: #fff; box-shadow: 0 6px 16px rgba(47, 125, 31, .25); }
.adm-btn--danger { border-color: #e7a7a0; color: #c0392b; }
.adm-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.adm-foot { margin: 0; font-size: 13px; color: #5d6a63; }
.adm-foot code { display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: 6px; background: #f1f3f0; font-size: 12px; color: #12231a; overflow-wrap: anywhere; }
.adm-ok { margin: 0; padding: 8px 12px; border-radius: 10px; background: #eef7e6; border: 1px solid #cfe5bf; color: #2f5d3f; font-size: 13.5px; }
@media (max-width: 900px) { .adm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .adm-tiles { grid-template-columns: 1fr; } }

/* Susunan: hasil mesin di atas, Analisis AI di bawah (2026-11-12) */
.aig-engine { margin: 0 0 8px; }
.aig-below { margin-top: 14px; }
.sv-extra .aig-below { margin-top: 16px; }

/* =====================================================================
   Analisis AI · Copilot — versi menonjol & bersinar (FIT-106, 2026-11-12)
   Bingkai gradasi mengalir + pendar lembut; ringkasan besar; Pilihan AI #1 disorot.
   Gerak dimatikan otomatis bila perangkat memilih "kurangi gerakan".
   ===================================================================== */
.aig {
  --aig-bg1: #ffffff; --aig-bg2: #f6fde9; --aig-ink: #12231a; --aig-sub: #44534a; --aig-line: #e2ecd9;
  --aig-glow: rgba(156, 220, 60, .45); --aig-glow2: rgba(43, 181, 160, .28);
  position: relative; display: grid; gap: 12px; padding: 18px 20px 16px; border-radius: 18px;
  border: 2px solid transparent;
  background:
    linear-gradient(160deg, var(--aig-bg1), var(--aig-bg2)) padding-box,
    linear-gradient(120deg, #d5ff8a, #4c9270, #2bb5a0, #b6f06a, #d5ff8a) border-box;
  background-size: 100% 100%, 300% 300%;
  box-shadow: 0 0 0 4px rgba(213, 255, 138, .18), 0 12px 32px -8px var(--aig-glow2), 0 0 28px -4px var(--aig-glow);
  animation: aig-flow 7s linear infinite, aig-pulse 3.6s ease-in-out infinite;
  overflow: hidden;
}
.aig::before {   /* kilau halus yang menyapu sekali-sekali */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-120%); animation: aig-sheen 5.5s ease-in-out infinite;
}
@keyframes aig-flow { to { background-position: 0 0, 300% 50%; } }
@keyframes aig-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(213, 255, 138, .18), 0 12px 32px -8px var(--aig-glow2), 0 0 24px -6px var(--aig-glow); }
  50% { box-shadow: 0 0 0 6px rgba(213, 255, 138, .28), 0 14px 38px -8px var(--aig-glow2), 0 0 40px -2px var(--aig-glow); }
}
@keyframes aig-sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.aig-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aig-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 10px; border-radius: 999px;
  background: linear-gradient(90deg, #d5ff8a, #9fe8c8); color: #0c1712;
  font: 800 12.5px var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(12, 23, 18, .06), 0 4px 14px -4px rgba(156, 220, 60, .8);
}
.aig-spark { display: inline-block; font-size: 15px; line-height: 1; animation: aig-twinkle 2.4s ease-in-out infinite; }
@keyframes aig-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.35) rotate(25deg); opacity: .75; } }
.aig-meta { color: var(--aig-sub); font-size: 12.5px; }

.aig-sum {
  margin: 2px 0 0; padding: 12px 14px; border-radius: 12px; position: relative;
  background: rgba(213, 255, 138, .22); border-left: 4px solid #8fd14f;
  font: 700 16.5px/1.5 var(--font-body); color: var(--aig-ink);
}
.aig-sec { display: grid; gap: 7px; }
.aig-sec h5, .aig-recs h5 { margin: 4px 0 0; font: 800 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #3f8a5c; }
.aig-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.aig-list li { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.5; color: var(--aig-ink); }
.aig-list li::before {
  content: "✓"; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font: 800 11px var(--font-body); color: #0c1712;
  background: linear-gradient(135deg, #d5ff8a, #8fd14f); box-shadow: 0 0 10px -2px rgba(156, 220, 60, .8);
}
.aig-rec {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .85); border: 1px solid var(--aig-line); transition: transform .15s, box-shadow .15s;
}
.aig-rec:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(76, 146, 112, .45); }
.aig-rec.is-top { border: 1.5px solid #8fd14f; background: linear-gradient(120deg, #fbfff3, #effbe1); box-shadow: 0 0 0 3px rgba(213, 255, 138, .35), 0 8px 22px -10px rgba(76, 146, 112, .6); }
.aig-rec > div { flex: 1; min-width: 0; }
.aig-rec b { display: block; font-size: 14.5px; color: var(--aig-ink); }
.aig-rec small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--aig-sub); }
.aig-top { display: inline-block; margin-bottom: 3px; padding: 2px 8px; border-radius: 999px; background: #12231a; color: #d5ff8a; font: 800 10.5px var(--font-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.aig-n {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: #12231a; color: #d5ff8a; font: 800 13px Manrope, sans-serif;
}
.aig-rec.is-top .aig-n { background: linear-gradient(135deg, #d5ff8a, #8fd14f); color: #0c1712; box-shadow: 0 0 14px -2px rgba(156, 220, 60, .9); }
.aig-act { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; background: linear-gradient(90deg, #d5ff8a, #b6f06a); color: #12231a; font: 800 12.5px var(--font-body); cursor: pointer; box-shadow: 0 4px 12px -4px rgba(156, 220, 60, .9); }
.aig-act[disabled] { background: #eef1ee; color: #6b7871; box-shadow: none; cursor: default; }
.aig-notes { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 12.5px; color: var(--aig-sub); }
.aig-foot { margin: 2px 0 0; font-size: 11.5px; color: #7f8b84; }

/* menunggu: bola bercahaya + garis kilau */
.aig-load { display: grid; gap: 10px; }
.aig-wait { margin: 0; display: flex; align-items: center; gap: 10px; font: 700 14px var(--font-body); color: var(--aig-ink); }
.aig-orb { flex: none; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #d5ff8a 45%, #4c9270); box-shadow: 0 0 14px 3px rgba(156, 220, 60, .7); animation: aig-orb 1.4s ease-in-out infinite; }
@keyframes aig-orb { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1.15); } }
.aig-skel { display: grid; gap: 8px; }
.aig-skel i { display: block; height: 11px; border-radius: 6px; background: linear-gradient(90deg, rgba(76, 146, 112, .12), rgba(213, 255, 138, .55), rgba(76, 146, 112, .12)); background-size: 200% 100%; animation: aig-shimmer 1.4s linear infinite; }
.aig-skel i:nth-child(1) { width: 92%; } .aig-skel i:nth-child(2) { width: 78%; } .aig-skel i:nth-child(3) { width: 60%; }
@keyframes aig-shimmer { to { background-position: -200% 0; } }

/* gagal: tetap terlihat, tanpa sinar */
.aig.is-fail { background: linear-gradient(#fffaf0, #fffaf0) padding-box, linear-gradient(120deg, #f0dcb4, #e3c27f) border-box; box-shadow: none; animation: none; }
.aig.is-fail::before { display: none; }
.aig.is-fail .aig-badge { background: #f3e6c8; box-shadow: none; }
.aig.is-fail .aig-spark { animation: none; }
.aig-fail { margin: 0; font-size: 14px; color: #6b5420; }
.aig-retry { justify-self: start; border: 1px solid #d9c08a; background: #fff; border-radius: 999px; padding: 7px 14px; font: 700 13px var(--font-body); cursor: pointer; color: #6b5420; }

/* versi gelap di pop-up */
.sv .aig { --aig-bg1: #13291e; --aig-bg2: #0d1b14; --aig-ink: #f2f8f3; --aig-sub: #b9cbbf; --aig-line: #24453a; --aig-glow: rgba(213, 255, 138, .35); --aig-glow2: rgba(43, 181, 160, .35); }
.sv .aig::before { background: linear-gradient(105deg, transparent 35%, rgba(213, 255, 138, .12) 50%, transparent 65%); }
.sv .aig-sum { background: rgba(213, 255, 138, .1); }
.sv .aig-sec h5 { color: #9fe8c8; }
.sv .aig-rec { background: rgba(12, 23, 18, .7); }
.sv .aig-rec.is-top { background: linear-gradient(120deg, rgba(213, 255, 138, .14), rgba(43, 181, 160, .1)); border-color: #b6f06a; box-shadow: 0 0 0 3px rgba(213, 255, 138, .18), 0 0 26px -6px rgba(213, 255, 138, .55); }
.sv .aig-foot { color: #8aa596; }
.sv .aig.is-fail { background: linear-gradient(#2a2414, #2a2414) padding-box, linear-gradient(120deg, #6b5420, #8a6d2c) border-box; }
.sv .aig-fail { color: #f0d9a8; }

@media (prefers-reduced-motion: reduce) {
  .aig, .aig::before, .aig-spark, .aig-orb, .aig-skel i { animation: none !important; }
  .aig::before { display: none; }
}
@media (max-width: 560px) { .aig-rec { flex-wrap: wrap; } .aig-act { margin-left: 40px; } }