/* ============================================
   Rapih AI — Calculator UI
   --------------------------------------------
   Shared by every page under /tools/.
   Loads on top of /blog/blog.css, which supplies
   the design tokens, nav, footer and prose.
   ============================================ */

.calc-wrap { max-width: 1040px; }
.calc-head { padding: 36px 0 8px; position: relative; }
.calc-head::before {
  content: ""; position: absolute; top: -8%; bottom: -8%; left: calc(-50vw + 50%); width: 100vw; z-index: 0; pointer-events: none;
  background:
    radial-gradient(20% 70% at 22% 0%, rgba(47,107,79,.13), transparent 68%),
    radial-gradient(16% 60% at 80% 0%, rgba(212,168,87,.12), transparent 68%);
  animation: mesh-drift 22s ease-in-out infinite alternate;
}
.calc-head::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(-50vw + 50%); width: 100vw; z-index: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(22,32,26,.08) 1.5px, transparent 1.5px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 38% 90% at 50% 0%, black 25%, transparent 85%);
  mask-image: radial-gradient(ellipse 38% 90% at 50% 0%, black 25%, transparent 85%);
}
.calc-head > * { position: relative; z-index: 1; }
.calc-head h1 { margin: 20px 0 18px; }
.calc-lede { font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 32px; max-width: 60ch; }

.calc-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; align-items: start; margin-bottom: 40px; }

.calc-panel { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 26px; box-shadow: var(--shadow-sm); }
.calc-panel h2 { font-size: 19px; margin-bottom: 4px; }
.calc-panel .hint { font-size: 13.5px; color: var(--ink-mute); margin: 0 0 22px; line-height: 1.5; }

.calc-section { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); padding-top: 22px; margin-bottom: 16px; border-top: 1px solid var(--line-soft); }
.calc-section.first { padding-top: 0; border-top: 0; }

/* ---------- Fields ---------- */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field .sub { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-mute); margin-top: 3px; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .prefix, .input-wrap .suffix { position: absolute; font-size: 14px; color: var(--ink-mute); pointer-events: none; }
.input-wrap .prefix { left: 14px; }
.input-wrap .suffix { right: 14px; }
.input-wrap input {
  width: 100%; height: 46px; padding: 0 14px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); transition: border-color .15s ease, box-shadow .15s ease;
  font-variant-numeric: tabular-nums;
}
.input-wrap.has-prefix input { padding-left: 40px; }
.input-wrap.has-suffix input { padding-right: 42px; }
.input-wrap input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(47,107,79,.12); }
.input-wrap input::placeholder { color: #b3b9b3; }

/* ---------- Repeatable rows ---------- */
.rows { margin-bottom: 12px; }
.row { display: flex; gap: 8px; margin-bottom: 8px; }
.row input.nm { flex: 1 1 auto; min-width: 0; }
.row .input-wrap.amt { flex: 0 0 132px; }
.row input { height: 42px; padding: 0 12px; font: inherit; font-size: 14.5px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); font-variant-numeric: tabular-nums; }
.row .input-wrap.amt input { padding-left: 34px; }
.row .input-wrap.amt .prefix { left: 12px; font-size: 13px; }
.row input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(47,107,79,.12); }
.row button {
  flex: 0 0 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--bg); color: var(--ink-mute); font-size: 18px; line-height: 1;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.row button:hover { color: #b4453c; border-color: #e3c4c0; background: #fdf6f5; }
.add-row { font-size: 14px; font-weight: 600; color: var(--green); padding: 6px 0; }
.add-row:hover { color: var(--green-deep); }
.rows-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 0; margin-top: 4px; border-top: 1px dashed var(--line); font-size: 14px; }
.rows-total strong { font-size: 16px; font-variant-numeric: tabular-nums; }

/* ---------- Result panel ---------- */
.result-panel { background: var(--bg-ink); border: 0; color: var(--ink-on-dark); position: sticky; top: 88px; }
.result-panel h2 { color: var(--ink-on-dark); }
.result-panel .hint { color: #9DA89F; }

.headline-price { padding: 4px 0 20px; border-bottom: 1px solid #2A352D; margin-bottom: 20px; }
.headline-price .label { font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #9DA89F; margin-bottom: 10px; }
.headline-price .value { font-size: clamp(34px,4.6vw,50px); font-weight: 700; letter-spacing: -.035em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.headline-price .value.neg { color: #F0A78A; }
.headline-price .value.pos { color: #8FD4A8; }
.headline-price .note { font-size: 13.5px; color: #9DA89F; margin-top: 10px; line-height: 1.5; }

.stat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 14.5px; }
.stat-row:last-of-type { border-bottom: 0; }
.stat-row .k { color: #9DA89F; }
.stat-row .v { font-weight: 600; color: var(--ink-on-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-row.em .v { color: #8FD4A8; }
.stat-row.bad .v { color: #F0A78A; }
.stat-row.total { border-top: 1px solid #2A352D; border-bottom: 0; margin-top: 6px; padding-top: 14px; }
.stat-row.total .k { color: var(--ink-on-dark); font-weight: 600; }

.result-note { margin-top: 20px; padding: 16px 18px; border-radius: var(--r-sm); background: rgba(255,255,255,.05); font-size: 13.5px; line-height: 1.6; color: #C7D0C8; }
.result-note strong { color: #fff; }
.result-warn { background: rgba(229,181,149,.12); color: #F0C9AC; }
.result-warn strong { color: #F6DCC7; }

.empty-state { color: #9DA89F; font-size: 14.5px; line-height: 1.6; padding: 20px 0; }

/* ---------- Verdict badge ---------- */
.verdict { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; letter-spacing: .02em; margin-bottom: 18px; }
.verdict .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.verdict.sehat   { background: rgba(143,212,168,.15); color: #8FD4A8; }
.verdict.waspada { background: rgba(229,181,149,.16); color: #F0C9AC; }
.verdict.bahaya  { background: rgba(240,138,122,.16); color: #F0A78A; }

/* ---------- "Where the money is" bars ---------- */
.trap-list { margin-top: 4px; }
.trap { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.trap:last-child { border-bottom: 0; }
.trap-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 14.5px; margin-bottom: 8px; }
.trap-head .k { color: #9DA89F; }
.trap-head .v { font-weight: 600; color: var(--ink-on-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trap-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.trap-bar span { display: block; height: 100%; border-radius: 3px; background: #8FD4A8; transition: width .3s ease; }
.trap-bar.peach span { background: var(--peach); }

@media (max-width: 860px) {
  .calc-grid { grid-template-columns: 1fr; gap: 20px; }
  .result-panel { position: static; }
}
@media (max-width: 480px) {
  .row { flex-wrap: wrap; }
  .row input.nm { flex: 1 1 100%; }
  .row .input-wrap.amt { flex: 1 1 auto; }
}

/* ---------- Handoff to WhatsApp ---------- */
.handoff { margin-top: 22px; padding-top: 22px; border-top: 1px solid #2A352D; }
.handoff-line { font-size: 14.5px; line-height: 1.55; color: var(--ink-on-dark); margin: 0 0 14px; }
.handoff-line strong { color: #8FD4A8; }
.handoff .btn { width: 100%; height: 50px; }
.handoff-sub { font-size: 12.5px; color: #9DA89F; margin: 10px 0 0; text-align: center; line-height: 1.5; }

/* ---------- Who made this ---------- */
.tool-by { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; margin: 0 0 32px; background: var(--green-tint); border: 1px solid var(--green-soft); border-radius: var(--r-md); font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.tool-by img { width: 30px; height: 30px; flex: none; object-fit: contain; }
.tool-by strong { color: var(--ink); }
.tool-by a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }