/* KSP Makmur Bersama — arah visual "Buku Besar":
   kertas ledger hangat, garis buku 32px, garis kolom merah tipis di tepi kiri,
   judul Libre Baskerville, angka Public Sans tabular rata kanan, cap SIMULASI
   bergaris ganda. Tanpa gradien, tanpa glow, tanpa grafik dekoratif. */

:root {
  --bg: #FAF7EF;
  --paper: #FFFDF8;
  --ink: #1E2A38;
  --ink-soft: #4C586B;
  --line: #DCD5C2;
  --line-strong: #B6AC92;
  --accent: #2B5D8C;
  --accent-ink: #1F476E;
  --accent-wash: #E9EFF5;
  --red: #B03A2E;
  --red-wash: #F4E5E0;
  --rule: rgba(30, 42, 56, 0.06);
  --radius: 2px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Public Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px;
}

.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;
}

/* Kepala halaman */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--line-strong);
  background: var(--paper);
}

.top-left { display: flex; align-items: center; gap: 14px; min-width: 0; }

.demo-badge {
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.demo-badge:hover { color: var(--accent); }

.brand {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 16px;
  padding-left: 14px;
  border-left: 1px solid var(--line-strong);
  white-space: nowrap;
}

.top-right {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--ink-soft);
}

/* Kerangka halaman */
.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 26px 32px;
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px) 64px;
}

/* Bagian pembuka */
.intro {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  padding: clamp(26px, 3.4vw, 44px) 0 22px;
  border-bottom: 2px solid var(--ink);
}

.kicker {
  margin: 0 0 14px;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
}

h1 {
  margin: 0 0 16px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.005em;
}

h1 em { font-style: italic; color: var(--accent-ink); }

.lede {
  margin: 0;
  max-width: 48ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* Tabel ketentuan — kertas bergaris dengan kolom merah */
.ketentuan {
  background-color: var(--paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--red);
  padding: 14px 16px 16px;
}

.ketentuan h2 {
  margin: 0 0 10px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.ketentuan dl { margin: 0; display: grid; gap: 7px; }

.ketentuan div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.ketentuan dt { color: var(--ink-soft); }

.ketentuan dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Lembar pengajuan */
.panel {
  background-color: var(--paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--red);
  padding: clamp(18px, 2.4vw, 26px);
}

.panel-head { margin-bottom: 18px; }

.panel-kicker {
  margin: 0 0 4px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.panel-head h2 {
  margin: 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.01em;
}

.form { display: flex; flex-direction: column; gap: 16px; }

.row-2 { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 14px; }

/* Field bergaya kolom buku kas */
.fld-label {
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.fld-unit { font-weight: 500; }

.fld-req { color: var(--red); }

.fld-input {
  border: 1px solid var(--line-strong);
  border-bottom: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 10px 12px;
  min-height: 44px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: border-color .15s ease, background-color .15s ease;
}

.fld-input:hover { border-color: var(--accent); background: #FFFFFF; }

.fld-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.fld-hint {
  font-size: 11.5px;
  color: var(--ink-soft);
  letter-spacing: .01em;
}

.fld-error { font-size: 12px; color: var(--red); }

.fld.is-error .fld-input {
  border-color: var(--red);
  background: var(--red-wash);
}

.opt-check {
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
}

.opt-check:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.opt-check input { accent-color: var(--accent-ink); width: 17px; height: 17px; }

.btn {
  appearance: none;
  border: 1px solid var(--accent-ink);
  border-radius: var(--radius);
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  padding: 13px 18px;
  min-height: 48px;
  transition: background-color .15s ease;
}

.btn:hover { background: var(--accent-ink); }

.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.form-note {
  margin: -4px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.alert {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid #D9AFA5;
  border-left: 3px solid var(--red);
  background: var(--red-wash);
  color: #7A2318;
  font-size: 13.5px;
}

/* Lembar hasil */
.rail { display: flex; flex-direction: column; gap: 24px; }

.sheet {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--red);
  padding: clamp(18px, 2.4vw, 26px);
}

.sheet-head {
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-strong);
}

.sheet-kicker {
  margin: 0 0 4px;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.code {
  letter-spacing: .1em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

.sheet-title {
  margin: 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.25;
}

/* Angsuran — jawaban utama, satu baris tebal */
.angsuran {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 15px;
  margin-bottom: 18px;
  background: var(--accent-wash);
  border: 1px solid #C2D2E1;
  border-left: 3px solid var(--accent);
}

.angsuran span {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 600;
}

.angsuran strong {
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 700;
  font-size: clamp(21px, 2.6vw, 26px);
  line-height: 1.1;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

/* Tabel ledger 3 kolom */
.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.ledger thead th {
  text-align: left;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--line-strong);
}

.ledger .ta-r { text-align: right; }

.ledger tbody th,
.ledger tbody td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

.ledger tbody th { font-weight: 500; padding-right: 10px; }

.lg-qty {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.lg-hit {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  padding-left: 8px;
}

.lg-num {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-left: 10px;
}

.ledger tfoot th,
.ledger tfoot td {
  padding: 9px 0;
  text-align: left;
  border-top: 1px solid var(--ink);
  border-bottom: 3px double var(--ink);
}

.ledger tfoot th { font-weight: 700; }

.ledger tfoot .lg-hit { color: var(--ink-soft); }

.ledger tfoot .lg-num { font-size: 16px; }

/* Meta hasil */
.sim-meta {
  display: grid;
  gap: 7px;
  margin: 18px 0 0;
  padding-top: 13px;
  border-top: 1px dashed var(--line-strong);
}

.sim-meta div { display: flex; justify-content: space-between; gap: 14px; }

.sim-meta dt { font-size: 12.5px; color: var(--ink-soft); }

.sim-meta dd {
  margin: 0;
  max-width: 66%;
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sim-msg {
  margin: 15px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--line-strong);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.sheet-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.again {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.again:hover { color: var(--accent); }

.again:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.stamp {
  margin: 0;
  padding: 6px 9px 5px;
  border: 2px double var(--red);
  color: var(--red);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  transform: rotate(-7deg);
  white-space: nowrap;
}

/* Lembar kosong */
.sheet-empty { border-left-color: var(--line-strong); }

.steps {
  list-style: none;
  counter-reset: langkah;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.steps li {
  counter-increment: langkah;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
}

.steps li::before {
  content: counter(langkah);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-ink);
  border: 1px solid var(--line-strong);
  font-variant-numeric: tabular-nums;
}

/* Riwayat */
.recent h2 {
  margin: 0 0 8px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.recent ul { list-style: none; margin: 0; padding: 0; }

.recent li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.recent li:first-child { border-top: 1px solid var(--line-strong); }

.recent-sum { font-size: 13px; }

.recent-total {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.recent-ago {
  grid-column: 1 / -1;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--ink-soft);
}

.recent-empty,
.recent-count {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}

/* Kaki */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 16px clamp(16px, 4vw, 48px);
  border-top: 1px solid var(--line-strong);
  background: var(--paper);
  font-size: 12px;
  color: var(--ink-soft);
}

.foot p { margin: 0; }

.foot-credit { color: var(--ink); font-weight: 600; }

/* Responsif */
@media (min-width: 1081px) {
  .rail { position: sticky; top: 18px; }
}

@media (max-width: 1080px) {
  .shell { grid-template-columns: 1fr; }
  .intro { grid-template-columns: 1fr; }
  .rail { position: static; }
}

@media (max-width: 720px) {
  .row-2 { grid-template-columns: 1fr; }
  .top-right { font-size: 11.5px; }
  .top-sep { display: none; }
  .intro { padding-top: 24px; }

  /* Tabel ledger jadi kartu bertumpuk */
  .ledger { display: block; }
  .ledger thead { display: none; }
  .ledger tbody,
  .ledger tfoot { display: block; }

  .ledger tbody tr {
    display: block;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--line-strong);
    background: #FFFFFF;
  }

  .ledger tbody th,
  .ledger tbody td {
    display: block;
    padding: 0;
    border: 0;
  }

  .ledger tbody th {
    font-size: 14px;
    padding-right: 0;
  }

  .ledger tbody td.lg-hit {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
    font-size: 12px;
  }

  .ledger tbody td.lg-num {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding-top: 6px;
    padding-left: 0;
    border-top: 1px dashed var(--line);
    font-size: 15px;
  }

  .ledger td.lg-hit::before,
  .ledger td.lg-num::before {
    content: attr(data-label);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
  }

  .ledger tfoot tr {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--ink);
    border-top: 3px double var(--ink);
    background: var(--accent-wash);
  }

  .ledger tfoot th,
  .ledger tfoot td {
    display: block;
    padding: 0;
    border: 0;
  }

  .ledger tfoot th { font-size: 14px; }

  .ledger tfoot td.lg-num {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-top: 6px;
    font-size: 17px;
  }

  .ledger tfoot td.lg-hit { padding-top: 2px; font-size: 12px; }
}

@media (max-width: 430px) {
  .brand { font-size: 14.5px; padding-left: 10px; }
  .demo-badge { font-size: 10.5px; letter-spacing: .1em; }
  .top { padding: 11px 16px; }
  .angsuran strong { font-size: 21px; }
  .sim-meta dd { max-width: 60%; }
}