/* =================================================================
   kalkulator.html - Calculator wizard & product recommendation UI
   ================================================================= */


/* ── Wizard steps ────────────────── */
#calc-app.calc-app-shell { padding-bottom:2.5rem; }
.calc-step { display:none; padding-bottom:3rem; }
.calc-step.active { display:block; }
.calc-flow-bridge {
  display:grid;
  gap:1rem;
  align-items:center;
  border:1px solid var(--border);
  background:linear-gradient(135deg,rgba(15,76,129,.04),rgba(255,255,255,.94));
  box-shadow:var(--panel-shadow);
}
.calc-flow-bridge-copy p {
  margin:0;
  color:var(--muted);
  line-height:1.7;
  font-size:.86rem;
}
.calc-flow-bridge-steps {
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  padding:0;
  margin:0;
  list-style:none;
}
.calc-flow-bridge-steps li {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .7rem;
  border:1px solid rgba(15,76,129,.12);
  background:rgba(255,255,255,.78);
  font-size:.74rem;
  font-weight:700;
  color:var(--text);
}
.calc-flow-bridge-steps li span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.2rem;
  height:1.2rem;
  background:var(--brand);
  color:#fff;
  font-size:.66rem;
  font-weight:800;
}
@media (min-width: 768px) {
  #calc-app.calc-app-shell { padding-bottom:3.5rem; }
  .calc-step { padding-bottom:4.25rem; }
  .calc-flow-bridge {
    grid-template-columns:minmax(0,1.2fr) auto;
  }
}
@media (max-width: 640px) {
  .calc-step { padding-bottom:2.2rem; }
  .calc-flow-bridge {
    padding:1rem !important;
  }
  .calc-flow-bridge-steps li {
    width:100%;
  }
}

/* ── Step progress ───────────────── */
.snode {
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:800; flex-shrink:0;
  border:2px solid var(--border); background:var(--panel); color:var(--muted);
  transition:all .25s;
}
.snode.active { background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 0 0 4px rgba(15,76,129,.15); }
.snode.done   { background:var(--brand); border-color:var(--brand); color:#fff; opacity:.5; }
.scon { flex:1; height:2px; background:var(--border); margin:0 4px; transition:background .25s; }
.scon.done { background:var(--brand); opacity:.4; }
.slbl { font-size:.57rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-top:5px; text-align:center; }
.slbl.active { color:var(--brand); }

/* ── Type cards ──────────────────── */
.type-card { border:2px solid var(--border); background:var(--panel); transition:border-color .2s, box-shadow .2s; cursor:pointer; }
.type-card:hover { border-color:var(--brand); box-shadow:0 4px 16px rgba(15,76,129,.1); }
.type-card.selected { border-color:var(--brand); background:rgba(15,76,129,.04); }

/* ── Usage buttons ─────────────────── */
.usage-btn { border:2px solid var(--border); background:var(--panel); transition:border-color .2s, box-shadow .2s; cursor:pointer; }
.usage-btn:hover { border-color:var(--brand); box-shadow:0 4px 16px rgba(15,76,129,.1); }
.usage-btn.selected { border-color:var(--brand); background:rgba(15,76,129,.04); }

/* ── Summary sidebar ─────────────── */
.calc-summary {
  background:linear-gradient(160deg,#071e27 0%,#0F4C81 130%);
  position:relative; z-index:1; overflow:hidden;
  border-left:3px solid #FBBF24;
}
.calc-summary::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 2px 2px,rgba(255,255,255,.07) 1px,transparent 0);
  background-size:18px 18px;
}
.calc-summary-body { position:relative; z-index:2; }
.calc-summary-row-border { border-bottom:1px solid rgba(255,255,255,.1); }

/* ── Step 1: hero + type/usage cards ─────── */
.calc-progress-wrap { max-width:360px; }
.calc-hero-h1 { font-weight:900; font-size:clamp(2.2rem,5vw,4rem); line-height:.96; letter-spacing:-.03em; }
.calc-hero-lead { max-width:420px; line-height:1.72; }
.calc-border-top { border-top:1px solid var(--border); }
.usage-btn-icon { font-size:15px; }
.usage-btn-desc { font-size:.63rem; line-height:1.4; }
.calc-btn-mulai { font-size:.85rem; padding:.85rem 2rem; }
.calc-divider-line { background:var(--border); }

/* ── Step 2: input beban ─────────────────── */
.nh-eyebrow--flush { margin-bottom:0; }
.calc-back-link { font-weight:600; }
.calc-h2 { font-weight:900; font-size:clamp(1.7rem,4vw,2.8rem); letter-spacing:-.02em; line-height:1.05; }
.calc-type-label { font-size:.6em; }
.calc-add-btn { padding:.65rem 1.75rem; }

/* ── Icon size utilities (calculator scope) ── */
.calc-icon-va { vertical-align:middle; }
.calc-icon-12 { font-size:12px; }
.calc-icon-14 { font-size:14px; }
.calc-icon-15 { font-size:15px; }
.calc-icon-16 { font-size:16px; }
.calc-amber-text { color:#FBBF24; }
.calc-text-strong { color:var(--text); }

/* ── Step 3: hasil simulasi ───────────────── */
.calc-hero-glow {
  position:absolute; right:-30px; top:-30px; width:200px; height:200px;
  background:radial-gradient(circle,rgba(15,76,129,.07) 0%,transparent 70%);
  pointer-events:none;
}
.calc-result-h2 { font-weight:900; font-size:clamp(2rem,5vw,3.5rem); letter-spacing:-.03em; line-height:1.02; }
.calc-result-lead { max-width:440px; line-height:1.7; }
.calc-badge-brand { background:rgba(15,76,129,.08); color:var(--brand); }
.calc-badge-success { background:rgba(16,185,129,.1); color:#065f46; }
.calc-mini-card-brand { background:rgba(15,76,129,.07); border:1px solid rgba(15,76,129,.12); }
.calc-mini-card-amber { background:rgba(251,191,36,.07); border:1px solid rgba(251,191,36,.2); }
.calc-mini-card-label { font-size:.6rem; font-weight:700; }
.calc-mini-card-value { font-size:1.35rem; line-height:1; letter-spacing:-.02em; }
.calc-mini-card-unit { font-size:.65rem; }

/* ── Analysis + spec panel ────────────────── */
.calc-analysis-desc { line-height:1.5; }
.cap-fill-amber { background:#FBBF24; }
.cap-fill-green { background:#10b981; }
.calc-standard-note { font-size:.68rem; }
.calc-spec-panel { background:#111827; border:1px solid rgba(251,191,36,.25); box-shadow:inset 0 1px 0 rgba(251,191,36,.15),0 4px 20px rgba(0,0,0,.3); }
.calc-spec-texture {
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 2px 2px,rgba(255,255,255,.04) 1px,transparent 0);
  background-size:16px 16px;
}
.calc-spec-topline {
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,#FBBF24,rgba(251,191,36,0));
  pointer-events:none;
}
.calc-spec-title { position:relative; z-index:1; color:#FBBF24; opacity:.85; }
.calc-spec-body { position:relative; z-index:1; }
.calc-spec-row-border { border-bottom:1px solid rgba(255,255,255,.08); }
.calc-spec-footnote { position:relative; z-index:1; }

/* ── Product rec / katalog CTA / article guide ── */
.calc-h3 { font-weight:900; font-size:1.5rem; letter-spacing:-.02em; }
.calc-guide-link { text-decoration:none; white-space:nowrap; }
.calc-katalog-cta { padding:.65rem 1.5rem; white-space:nowrap; }
.calc-h3-sm { font-weight:900; font-size:1.35rem; letter-spacing:-.02em; line-height:1.2; }
.calc-tick { width:3px; height:13px; border-radius:2px; flex-shrink:0; }
.calc-tick--brand { background:var(--brand); }
.calc-tick--accent { background:var(--accent); }
.calc-badge-sm { font-size:.6rem; }
.calc-article-link { text-decoration:none; transition:border-color .2s, box-shadow .2s; }
.calc-article-link:hover { border-color:var(--brand); }
.calc-card-strip { height:3px; }
.calc-card-strip--brand { background:var(--brand); }
.calc-card-strip--amber { background:#FBBF24; }
.calc-card-strip--green { background:#10b981; }
.calc-card-strip--purple { background:#8b5cf6; }

/* ── JS-rendered fragments (history list, load table, empty states) ── */
.calc-history-btn { padding:.45rem 1rem; }
.calc-table-accent { color:var(--accent); }
.calc-empty-cta { font-size:.8rem; padding:.65rem 1.5rem; }
.calc-empty-cta-alt { padding:.55rem 1.2rem; }

/* ── Live pulse dot ──────────────── */
.live-dot {
  width:7px; height:7px; border-radius:50%;
  background:#FBBF24; flex-shrink:0;
  box-shadow:0 0 0 0 rgba(251,191,36,.6);
  animation:livePulse 2s infinite;
}
@keyframes livePulse {
  0%   { box-shadow:0 0 0 0 rgba(251,191,36,.5); }
  60%  { box-shadow:0 0 0 6px rgba(251,191,36,0); }
  100% { box-shadow:0 0 0 0 rgba(251,191,36,0); }
}

/* ── Load table row ──────────────── */
.load-row { transition:background .12s; }
.load-row:hover { background:var(--panel2); }

/* ── Product rec card ────────────── */
.prod-card { border:1px solid var(--border); background:var(--panel); box-shadow:var(--panel-shadow); transition:border-color .2s, box-shadow .2s, transform .15s; cursor:pointer; }
.prod-card:hover { border-color:var(--brand); box-shadow:0 6px 20px rgba(15,76,129,.12); transform:translateY(-2px); }

/* ── Badges ──────────────────────── */
.jps-badge { display:inline-block; font-size:.57rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:.18rem .5rem; border-radius:3px; }
.b-entry    { background:#e6f6ff; color:#003659; }
.b-compact  { background:#dbeafe; color:#1d4ed8; }
.b-industrial { background:#fef3c7; color:#92400e; }
.b-silent   { background:#d1fae5; color:#065f46; }
.b-heavy    { background:#ede9fe; color:#5b21b6; }
.b-premium  { background:#fce7f3; color:#9d174d; }
.b-mega     { background:#fee2e2; color:#991b1b; }
[data-theme="dark"] .b-entry    { background:rgba(0,54,89,.4); color:#7dbfff; }
[data-theme="dark"] .b-compact  { background:rgba(29,78,216,.3); color:#93c5fd; }
[data-theme="dark"] .b-industrial { background:rgba(146,64,14,.3); color:#fcd34d; }
[data-theme="dark"] .b-silent   { background:rgba(6,95,70,.3); color:#6ee7b7; }
[data-theme="dark"] .b-heavy    { background:rgba(91,33,182,.3); color:#c4b5fd; }
[data-theme="dark"] .b-premium  { background:rgba(157,23,77,.3); color:#f9a8d4; }
[data-theme="dark"] .b-mega     { background:rgba(153,27,27,.3); color:#fca5a5; }

/* ── Adaptive ghost button (light + dark) ─── */
.btn-adaptive {
  color: var(--text) !important;
  border-color: var(--border) !important;
  background: transparent !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease !important;
}
.btn-adaptive:hover {
  background: rgba(15,76,129,.06) !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  box-shadow: 0 4px 12px rgba(15,76,129,.1) !important;
  transform: translateY(-1px);
}
.btn-adaptive:active { transform: translateY(0) !important; }

/* ── Calculator result CTA buttons ───────────── */
.calc-result-cta {
  min-height: 2.9rem;
  padding: .72rem .9rem;
  border-radius: 4px;
  border: 1px solid transparent;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: .73rem !important;
  line-height: 1.22;
  letter-spacing: .025em;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.calc-result-cta .material-symbols-outlined {
  font-size: 15px !important;
}
.calc-result-cta:hover {
  transform: translateY(-1px);
}
.calc-result-cta:active {
  transform: translateY(0);
}
.calc-result-cta:focus-visible {
  outline: 2px solid rgba(34,179,93,.55);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(21,115,71,.18);
}
.calc-result-cta-accent {
  background: #fbbf24 !important;
  color: #0d1117 !important;
  border-color: rgba(251,191,36,.55);
  box-shadow: 0 10px 20px rgba(251,191,36,.22);
}
.calc-result-cta-accent:hover {
  background: #f3b102 !important;
  color: #0d1117 !important;
  border-color: rgba(243,177,2,.62);
  box-shadow: 0 12px 24px rgba(251,191,36,.28);
}
.calc-result-cta-primary {
  background: linear-gradient(135deg,#0F4C81 0%,#0a3d6a 100%) !important;
  color: #ffffff !important;
  border-color: rgba(10,61,106,.34);
  box-shadow: 0 12px 24px rgba(15,76,129,.2);
}
.calc-result-cta-primary:hover {
  background: linear-gradient(135deg,#135791 0%,#0d4879 100%) !important;
  color: #ffffff !important;
  border-color: rgba(10,61,106,.44);
  box-shadow: 0 14px 28px rgba(15,76,129,.26);
}
.calc-result-cta-secondary {
  background: linear-gradient(135deg,#1f9c52 0%,#157347 100%) !important;
  color: #ffffff !important;
  border-color: rgba(21,115,71,.34) !important;
  box-shadow: 0 12px 24px rgba(21,115,71,.18);
}
.calc-result-cta-secondary:hover {
  background: linear-gradient(135deg,#22b35d 0%,#198754 100%) !important;
  color: #ffffff !important;
  border-color: rgba(21,115,71,.42) !important;
  box-shadow: 0 14px 28px rgba(21,115,71,.24);
}
[data-theme="dark"] .calc-result-cta:focus-visible {
  box-shadow: 0 0 0 4px rgba(44,197,104,.22);
}
[data-theme="dark"] .calc-result-cta-accent {
  background: #fbbf24 !important;
  color: #0d1117 !important;
  border-color: rgba(251,191,36,.58);
  box-shadow: 0 12px 24px rgba(3,14,20,.28);
}
[data-theme="dark"] .calc-result-cta-accent:hover {
  background: #f6c94c !important;
  color: #0d1117 !important;
  border-color: rgba(251,191,36,.7);
  box-shadow: 0 14px 28px rgba(3,14,20,.34);
}
[data-theme="dark"] .calc-result-cta-primary {
  background: linear-gradient(135deg,#68adf4 0%,#4189cf 100%) !important;
  color: #ffffff !important;
  border-color: rgba(125,191,255,.34);
  box-shadow: 0 14px 28px rgba(3,14,20,.34);
}
[data-theme="dark"] .calc-result-cta-primary:hover {
  background: linear-gradient(135deg,#7ab9ff 0%,#5d9fe0 100%) !important;
  color: #ffffff !important;
  border-color: rgba(125,191,255,.44);
  box-shadow: 0 18px 34px rgba(3,14,20,.4);
}
[data-theme="dark"] .calc-result-cta-secondary {
  background: linear-gradient(135deg,#1f9c52 0%,#157347 100%) !important;
  color: #ffffff !important;
  border-color: rgba(44,197,104,.34) !important;
  box-shadow: 0 14px 28px rgba(3,14,20,.34);
}
[data-theme="dark"] .calc-result-cta-secondary:hover {
  background: linear-gradient(135deg,#22b35d 0%,#198754 100%) !important;
  color: #ffffff !important;
  border-color: rgba(44,197,104,.46) !important;
  box-shadow: 0 16px 30px rgba(3,14,20,.38);
}
@media (min-width: 768px) {
  .calc-result-cta {
    min-height: 3rem;
    padding: .78rem 1rem;
    font-size: .77rem !important;
  }
}
@media (max-width: 640px) {
  .calc-result-cta {
    min-height: 2.72rem;
    padding: .68rem .8rem;
    font-size: .7rem !important;
    letter-spacing: .015em;
  }
  .calc-result-cta .material-symbols-outlined {
    font-size: 14px !important;
  }
}

/* ── Capacity bar ────────────────── */
.cap-track { height:10px; background:var(--panel2); border-radius:3px; overflow:hidden; border:1px solid var(--border); }
.cap-fill  { height:100%; border-radius:3px; transition:width .7s cubic-bezier(.4,0,.2,1); }

/* ── FAQ ─────────────────────────── */
.faq-body { display:none; }
.faq-body.open { display:block; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:last-child { border-bottom:none; }

/* ── Spinner ─────────────────────── */
@keyframes spin { to { transform:rotate(360deg); } }
.spin { animation:spin .9s linear infinite; display:inline-block; }

/* ── nh-eyebrow (fallback if not in main.css) ── */
.nh-eyebrow { font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand2,var(--brand)); display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; }
.nh-eyebrow::before { content:''; display:block; width:22px; height:2px; background:var(--accent); flex-shrink:0; }
.nh-cta-eyebrow { font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,200,66,.85); display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.nh-cta-eyebrow::before { content:''; display:block; width:28px; height:2px; background:#FBBF24; flex-shrink:0; }
.nh-cta-headline { font-weight:900; font-size:clamp(2rem,5vw,3.5rem); line-height:1.05; color:#fff; max-width:640px; margin:0 auto .75rem; }
.nh-cta-desc { font-size:.9rem; color:rgba(255,255,255,.6); max-width:480px; margin:0 auto 2.5rem; line-height:1.7; }