/* Go Home Early (Indonesia): latar putih, teks biru tua, satu warna aksen biru. Hanya memakai font sistem, tidak memuat font pihak ketiga.
   Diturunkan dari lembar gaya versi Vietnam dan dijadikan berkas terpisah agar antarversi tidak saling merusak. */
:root {
  --bg: #ffffff;
  --surface: #f5f6f8;
  --line: #e3e6ec;
  --fg: #0f1b33;
  --muted: #566176;
  --accent: #1c4fd6;
  --on-accent: #ffffff;
  --danger: #c4231c;
  --radius: 16px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1220;
    --surface: #151c2f;
    --line: #28324d;
    --fg: #eef1f7;
    --muted: #9ba6bc;
    --accent: #8fb0ff;
    --on-accent: #0d1220;
    --danger: #ff9a92;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.8; overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); }
h1, h2, h3 { color: var(--fg); line-height: 1.35; letter-spacing: -0.01em; }

/* Header */
header.site { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 5; }
header.site .bar { max-width: 720px; margin: 0 auto; padding: 0 20px; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
header.site .logo { color: var(--fg); text-decoration: none; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
header.site .logo .mark { color: var(--accent); flex: none; }
header.site nav { display: flex; gap: 0; margin-right: -10px; }
header.site nav a { color: var(--muted); text-decoration: none; font-size: .95rem; font-weight: 500; padding: 0 10px; min-height: 44px; display: inline-flex; align-items: center; }
header.site nav a:hover { color: var(--fg); }

/* Main */
main { max-width: 720px; margin: 0 auto; padding: 32px 20px 24px; }
h1 { font-size: 1.75rem; font-weight: 800; margin: 0 0 8px; }
.lead { color: var(--muted); margin: 0 0 28px; font-size: 1rem; }
h2 { font-size: 1.2rem; font-weight: 700; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; margin-bottom: 20px; }
.card h2 { margin: 0 0 12px; }
.card h2 ~ h2 { margin-top: 22px; }

/* Inputs */
label { display: block; font-weight: 600; margin: 18px 0 8px; font-size: .95rem; }
form label:first-child, .row label { margin-top: 0; }
form label.check:first-child { margin-top: 0; }
.row + label { margin-top: 18px; }
.row + .check { margin-top: 6px; }
.hint { font-weight: 400; color: var(--muted); font-size: .85rem; }
input, select {
  width: 100%; height: 52px; font: inherit; font-size: 1.125rem; font-weight: 500; color: var(--fg);
  padding: 0 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  font-variant-numeric: tabular-nums; appearance: none; -webkit-appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
input::placeholder { color: var(--muted); opacity: .7; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.field { position: relative; }
.field input { padding-right: 62px; }
.field .suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .95rem; pointer-events: none; }
.row { display: flex; gap: 12px; }
.row > div { flex: 1; min-width: 0; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 400; margin: 12px 0 0; min-height: 44px; cursor: pointer; }
.check input { width: 22px; height: 22px; flex: none; appearance: auto; -webkit-appearance: checkbox; accent-color: var(--accent); }
button.primary {
  width: 100%; height: 54px; margin-top: 24px; font: inherit; font-size: 1.05rem; font-weight: 700;
  color: var(--on-accent); background: var(--accent); border: 0; border-radius: 12px; cursor: pointer;
}
button.primary:hover { filter: brightness(1.06); }
button.primary:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }

/* Result */
.result { background: var(--surface); border-color: var(--line); }
.result > div:first-child { color: var(--muted); font-size: .95rem; font-weight: 500; }
.result .big { white-space: nowrap; font-size: clamp(2rem, 9vw, 2.6rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--accent); margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.result details.detail { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 4px; }
.result details.detail summary { cursor: pointer; font-weight: 600; font-size: .95rem; padding: 12px 0; color: var(--fg); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.result details.detail summary::-webkit-details-marker { display: none; }
.result details.detail summary::after { content: "Hide"; color: var(--muted); font-weight: 400; font-size: .85rem; }
.result details.detail:not([open]) summary::after { content: "Show"; }
.result table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.result td, .result th { padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.result tr:last-child td { border-bottom: 0; }
.result td:first-child { min-width: 6.5em; padding-right: 10px; }
.result td:last-child { text-align: right; font-variant-numeric: tabular-nums; padding-left: 8px; }
.result th { text-align: left; font-weight: 600; font-size: .88rem; color: var(--muted); }
.result th.num, .result td.num { text-align: right; white-space: nowrap; padding-left: 8px; }
.result table.cols3 { font-size: .9rem; }
.result table.cols3 td:last-child { text-align: right; }
.result tr.sum td { font-weight: 700; }
.result h2 { margin-top: 24px; font-size: 1.05rem; }
.result .tablewrap { margin-top: 4px; }
.warn, .result .note { background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 12px 14px; font-size: .9rem; margin: 16px 0 0; color: var(--fg); }
.trust { color: var(--muted); font-size: .85rem; margin: 16px 0 0; line-height: 1.6; }
.trust a { color: var(--muted); }
.note { font-size: .9rem; color: var(--muted); margin: 12px 0 0; }

/* Notes, FAQ, related */
.faq h3 { font-size: 1rem; margin: 18px 0 4px; }
.faq h3:first-of-type { margin-top: 8px; }
.faq p { margin: 0 0 8px; font-size: .95rem; color: var(--fg); }
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.related li + li { padding-top: 0; }
.related li:last-child { border-bottom: 0; padding-bottom: 0; }
.related a { display: block; padding: 9px 0 8px; color: var(--fg); text-decoration: none; font-weight: 600; }
.related a:hover { color: var(--accent); }
.related span { display: block; color: var(--muted); font-size: .88rem; font-weight: 400; }
.disclaimer { font-size: .82rem; color: var(--muted); margin: 24px 0 0; }

/* Home lists */
.hero { padding: 8px 0 28px; }
.hero h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); margin-bottom: 10px; }
.group-title { font-size: .9rem; font-weight: 700; color: var(--fg); margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--fg); letter-spacing: 0; line-height: 1.4; }
.tool-groups { display: grid; gap: 32px; }
.tool-groups ul.tools { border-top: 0; }
.more { margin: 12px 0 0; font-weight: 600; font-size: .95rem; }
.more a { text-decoration: none; }
.more a::after { content: " ›"; }
.more a:hover { text-decoration: underline; }
ul.tools { list-style: none; padding: 0; margin: 0; }
ul.tools li { border-bottom: 1px solid var(--line); }
ul.tools li a { display: block; position: relative; padding: 16px 28px 16px 0; color: var(--fg); text-decoration: none; font-weight: 600; font-size: 1.05rem; }
ul.tools li a::after { content: "›"; position: absolute; right: 4px; top: 50%; transform: translateY(-52%); color: var(--muted); font-size: 1.5rem; font-weight: 300; }
ul.tools li a:hover { color: var(--accent); }
ul.tools li span { display: block; font-weight: 400; color: var(--muted); font-size: .9rem; margin-top: 2px; }
.section-title { font-size: .9rem; font-weight: 700; margin: 48px 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--fg); line-height: 1.4; }
table.ratebox { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.ratebox td { padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.ratebox tr:last-child td { border-bottom: 0; }
table.ratebox td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }

/* Legal and about */
.legal h2 { font-size: 1.05rem; margin: 22px 0 6px; }
.legal p, .legal li { font-size: .95rem; }
.legal ol, .legal ul { padding-left: 20px; }

/* Guides */
.article { max-width: 680px; margin-left: auto; margin-right: auto; border: 0; padding: 0; background: transparent; }
.article h1 { font-size: 1.7rem; margin-bottom: 6px; }
.article h2 { font-size: 1.25rem; margin: 40px 0 10px; padding-top: 4px; }
.article p, .article li { font-size: 1.02rem; line-height: 1.8; }
.article ul, .article ol { padding-left: 22px; }
.article li { margin: 4px 0; }
.article .meta { color: var(--muted); font-size: .88rem; margin: 0 0 20px; }
.article .formula { background: var(--surface); border-radius: 12px; padding: 14px 16px; font-weight: 600; font-size: 1rem; border: 1px solid var(--line); }
.article .sources { font-size: .88rem; overflow-wrap: anywhere; }
.article .sources li { font-size: .88rem; line-height: 1.6; }
.article .disclaimer { border-top: 1px solid var(--line); padding-top: 16px; }
.article .byline { font-size: .85rem; color: var(--muted); margin: 10px 0 0; }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 0; }
table.data th, table.data td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data th { color: var(--muted); font-weight: 600; font-size: .84rem; background: var(--surface); white-space: nowrap; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.num { white-space: nowrap; }
table.data tr.sum td { font-weight: 700; background: var(--surface); }
a.cta { display: block; text-align: center; margin: 32px 0 8px; padding: 16px; font-weight: 700; color: var(--on-accent); background: var(--accent); border-radius: 12px; text-decoration: none; }
a.cta:hover { filter: brightness(1.06); }

/* Footer */
footer.site { border-top: 1px solid var(--line); margin-top: 48px; background: var(--surface); }
footer.site .foot { max-width: 720px; margin: 0 auto; padding: 32px 20px 48px; font-size: .9rem; color: var(--muted); }
footer.site .brand { font-weight: 800; color: var(--fg); font-size: 1rem; margin: 0 0 6px; }
footer.site .principle { margin: 0 0 28px; line-height: 1.8; }
footer.site .fgroups { display: grid; gap: 28px; }
footer.site nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
footer.site .ftitle { grid-column: 1 / -1; margin: 0 0 4px; font-weight: 700; font-size: .85rem; color: var(--fg); }
footer.site a { color: var(--muted); text-decoration: none; display: flex; align-items: center; min-height: 44px; line-height: 1.4; }
footer.site a:hover { color: var(--fg); text-decoration: underline; }

[hidden] { display: none !important; }
#out { scroll-margin-top: 72px; }
.field-error { color: var(--danger); font-size: .88rem; font-weight: 500; line-height: 1.45; margin: 6px 0 0; }
input[aria-invalid=true], select[aria-invalid=true] { border-color: var(--danger); outline: 1px solid var(--danger); }
@media (max-width: 400px) {
  main { padding: 24px 16px 16px; }
  .card { padding: 18px 16px; }
  header.site .bar, footer.site .foot { padding-left: 16px; padding-right: 16px; }
  .row { gap: 10px; }
}
@media (min-width: 720px) {
  footer.site .fgroups { grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
  footer.site nav { column-gap: 24px; align-content: start; }
  footer.site nav[aria-label="Calculators"] { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 821px) { footer.site a { min-height: 34px; } }
@media (min-width: 960px) {
  body.home header.site .bar, body.home main, body.home footer.site .foot { max-width: 1000px; }
  body.home .hero { max-width: 720px; }
  .tool-groups { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Sources page */
table.srctable { min-width: 760px; }
table.srctable td { font-size: .88rem; line-height: 1.6; }
table.srctable td:first-child { min-width: 8.5em; }
table.srctable tr.grp th { background: var(--bg); color: var(--fg); font-size: .95rem; padding-top: 18px; }
.src-list { margin: 6px 0 4px; padding-left: 16px; font-size: .82rem; overflow-wrap: anywhere; }
.src-list li { margin: 2px 0; }
.st { display: inline-block; margin-top: 4px; font-size: .78rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }
main.wide { max-width: 1040px; }
main.wide .lead { max-width: 720px; }
main.wide .card { max-width: 720px; }
table.srctable { min-width: 0; }
table.srctable td:nth-child(3) { min-width: 18em; }
@media (max-width: 800px) { table.srctable { min-width: 760px; } }
input[type=date] { min-width: 0; text-align: left; }
@media (max-width: 480px) { .row.stack { flex-direction: column; gap: 0; } .row.stack > div + div label { margin-top: 18px; } }
form > * + .row { margin-top: 18px; }

/* How this is calculated (collapsible) */
details.faq { padding: 0; }
details.faq > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; font-weight: 700; font-size: 1rem; color: var(--fg); }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::after { content: "Show"; color: var(--muted); font-weight: 400; font-size: .85rem; }
details.faq[open] > summary::after { content: "Hide"; }
details.faq > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
details.faq[open] > summary { border-bottom: 1px solid var(--line); }
details.faq .faq-body { padding: 4px 20px 20px; }
@media (max-width: 400px) { details.faq > summary { padding: 16px; } details.faq .faq-body { padding: 4px 16px 18px; } }

#graceBox { margin-top: 18px; }
#graceBox label { margin-top: 0; }

/* Source links: easy to tap */
@media (max-width: 820px) {
  .article .sources a, .src-list a, table.srctable a { display: inline-block; padding: 12px 0; }
  .article .sources li, .src-list li { margin: 0; }
}

/* Sub-headings inside the collapsible */
.faq .faq-body h2 { font-size: 1rem; font-weight: 700; margin: 18px 0 4px; }
.faq .faq-body h2:first-of-type { margin-top: 8px; }

/* Grouped inputs and optional details */
form h2.grp { font-size: 1.05rem; margin: 30px 0 4px; padding-top: 20px; border-top: 1px solid var(--line); }
form h2.grp:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
form .grpnote { color: var(--muted); font-size: .88rem; margin: 0 0 14px; }
form h2.grp + .grpnote + label, form h2.grp + label, form .grpnote + .row { margin-top: 0; }
details.opt { margin-top: 28px; border-top: 1px solid var(--line); }
details.opt > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 12px 0; font-weight: 700; font-size: 1rem; color: var(--fg); }
details.opt > summary::-webkit-details-marker { display: none; }
details.opt > summary::after { content: "Show"; color: var(--muted); font-weight: 400; font-size: .85rem; }
details.opt[open] > summary::after { content: "Hide"; }
details.opt > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.result table + .grpnote { margin-top: 10px; }
.result .warn p { margin: 0 0 6px; }
.result .warn p:last-child { margin-bottom: 0; }
.result td small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.5; font-weight: 400; }
.result tr.grpr th { color: var(--fg); font-size: .92rem; padding-top: 16px; border-bottom: 2px solid var(--line); }

/* UK additions */
.field .prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 1.05rem; pointer-events: none; }
.field.has-prefix input { padding-left: 30px; }
.result table.pertbl { font-size: .9rem; }
.result table.pertbl td, .result table.pertbl th { text-align: right; padding-left: 8px; }
.result table.pertbl td:first-child, .result table.pertbl th:first-child { text-align: left; padding-left: 0; }
.logo-sub { font-weight: 500; font-size: .8rem; color: var(--muted); margin-left: 2px; }
@media (max-width: 420px) { .logo-sub { display: none; } }
header.site .logo span { white-space: nowrap; }
.article .eg { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: .98rem; }
@media (max-width: 360px) { header.site .logo { font-size: 1rem; gap: 6px; } header.site nav a { padding: 0 6px; font-size: .88rem; } header.site nav { margin-right: -6px; } }

/* Indonesia: awalan "Rp" lebih lebar dari satu simbol */
.field.has-prefix input { padding-left: 46px; }
.field.has-prefix .prefix { font-size: .95rem; }