/* BijakDana explainer pages (cara-kira-nilai, cara-padan-dana) — "how it works + FAQ".
   RESKINNED to v5.1 (design of record 2026-10-02, docs/briefs/2026-10-02-v51-system-design.md).
   Loaded ALONGSIDE /css/v5.css (tokens + base come from there). This file only styles the
   .k-* scaffold these two pages use — reskin, not rewrite: the markup and the frozen
   padan-data block are untouched.

   The pattern: a NIGHT band (.k-top nav + .k-hero) with the H1 and a one-line summary, then a
   DAY body of reading sections, then a NIGHT close. Night grid, --lift the only shadow, brass
   = action, green = verified/done. No gradient but the night grid; no radius >=99px.

   Legacy var aliases: the old .k-* rules (and a few inline styles in the HTML) reference the
   Mineral token names. Alias them to v5.1 values here so nothing drifts and the guard stays green. */
:root{
  --gold:var(--brass);            /* brass fill — used ON NIGHT only (hero/close) */
  --gold-ink:var(--brass-ink);    /* brass text/links on day (AA) */
  --gold-tint:#F6EEDD;            /* faint brass wash for day bars/fills (neutral, no gradient) */
  --green:var(--ok-fill);
  --green-ink:var(--ok);
  --font:var(--sans);
  --surface:var(--day);
  --line-solid:var(--line);
  --ink-soft:var(--muted);
  --r:var(--r-ctl);
  --bd-max:1120px;
  --lav-tint:#EEF1F5;             /* neutral info wash (was lavender) */
}

html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--sans);background:var(--day);color:var(--ink);-webkit-font-smoothing:antialiased;}
[x-cloak]{display:none!important;}
body.is-en .l-bm, body.is-bm .l-en{display:none!important;}

/* ── NIGHT band: top nav ─────────────────────────────────────────────── */
.k-top{
  display:flex;align-items:center;justify-content:space-between;
  max-width:var(--bd-max);margin:0 auto;
  padding:16px clamp(1rem, .6rem + 2vw, 1.6rem);
}
.k-mark{font-weight:600;font-size:1.2rem;color:#F2F5FA;text-decoration:none;letter-spacing:-.02em;}
.k-mark b{color:var(--brass);font-weight:600;}
.k-nav{display:flex;gap:22px;align-items:center;}
.k-nav a{color:var(--muted-night);text-decoration:none;font-size:.92rem;font-weight:500;}
.k-nav a:hover{color:#F2F5FA;}
.k-lang{background:none;border:0;color:var(--muted-night);font-weight:500;font-size:.9rem;cursor:pointer;padding:8px;font-family:inherit;}
.k-lang:hover{color:#F2F5FA;}
@media(max-width:640px){ .k-nav a{display:none;} }

.k-wrap{max-width:var(--bd-max);margin:0 auto;padding:0 clamp(1rem, .6rem + 2vw, 1.6rem);}

/* ── NIGHT band: hero (kicker + H1 + one-line summary) ────────────────── */
.k-kick{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 .6rem;}
.k-hero{
  padding:clamp(1.6rem, 1rem + 3vw, 3rem) 0 clamp(2.4rem, 1.6rem + 3vw, 4rem);
  display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1.5rem, 1rem + 3vw, 4rem);align-items:end;
}
.k-hero h1{font-weight:600;font-size:clamp(2rem, 1.4rem + 3.2vw, 3.4rem);line-height:1.08;letter-spacing:-.03em;margin:0;text-wrap:balance;color:#F2F5FA;}
.k-lede{font-size:clamp(1rem, .96rem + .3vw, 1.18rem);line-height:1.55;margin:0 0 1.4rem;max-width:46ch;color:var(--muted-night);}
.k-ctas{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;}
.k-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  background:var(--brass);color:var(--night);font-weight:500;font-size:1rem;
  padding:12px 20px;border-radius:var(--r-ctl);text-decoration:none;border:1px solid var(--brass);
}
.k-btn:hover{background:var(--brass-soft);}
.k-link{color:var(--brass);font-weight:500;text-decoration:underline;text-underline-offset:3px;}
.k-top + main .k-hero .k-link,.k-hero .k-link{color:var(--brass);}
@media(max-width:820px){ .k-hero{grid-template-columns:minmax(0, 1fr);align-items:start;} }

/* ── DAY facts strip (sits just under the night band) ─────────────────── */
.k-facts{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);background:var(--day);}
.k-fact{padding:22px 20px 22px 0;}
.k-fact + .k-fact{border-left:1px solid var(--line);padding-left:20px;}
.k-fact b{display:block;font-family:var(--mono);font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);}
.k-fact > span{color:var(--muted);font-size:.92rem;line-height:1.45;}
@media(max-width:640px){ .k-facts{grid-template-columns:1fr;} .k-fact + .k-fact{border-left:0;border-top:1px solid var(--line);padding-left:0;} }

/* ── DAY reading sections ─────────────────────────────────────────────── */
.k-sec{display:grid;grid-template-columns:minmax(0, 240px) minmax(0, 1fr);gap:clamp(1rem, .5rem + 3vw, 3.5rem);padding:clamp(2.2rem, 1.6rem + 3vw, 4rem) 0;border-bottom:1px solid var(--line);}
.k-sec-h .k-num{font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.08em;}
.k-sec-h h2{font-weight:600;font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2rem);line-height:1.12;letter-spacing:-.03em;margin:.4rem 0 0;text-wrap:balance;color:var(--ink);}
.k-body > p, .k-body li{font-size:1rem;line-height:1.6;max-width:66ch;color:var(--ink);}
.k-body > p:first-child{margin-top:0;}
.k-body h3{font-size:1.05rem;font-weight:600;margin:1.8rem 0 .5rem;color:var(--ink);}
@media(max-width:820px){ .k-sec{grid-template-columns:minmax(0, 1fr);} }

/* two-column do/don't */
.k-two{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);margin-top:1.2rem;}
.k-two > div{padding:16px 18px 6px 0;}
.k-two > div + div{border-left:1px solid var(--line);padding-left:18px;}
.k-two h4,.k-two h3{margin:0 0 .4rem;font-size:.95rem;font-weight:600;}
.k-two ul{margin:0;padding-left:1.1rem;} .k-two li{font-size:.95rem;line-height:1.55;margin:.35rem 0;}
.k-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:1px;}
@media(max-width:640px){ .k-two{grid-template-columns:1fr;} .k-two > div + div{border-left:0;border-top:1px solid var(--line);padding-left:0;} }

/* inputs grid */
.k-inputs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);margin:1.2rem 0 2rem;}
.k-in{padding:16px 16px 16px 0;}
.k-in + .k-in{border-left:1px solid var(--line);padding-left:16px;}
.k-in i{font-style:normal;font-size:.75rem;font-weight:600;color:var(--brass-ink);letter-spacing:.08em;text-transform:uppercase;}
.k-in h4,.k-in h3{margin:.3rem 0 .4rem;font-size:1rem;font-weight:600;}
.k-in p{margin:0;font-size:.9rem;line-height:1.5;color:var(--muted);}
@media(max-width:820px){ .k-inputs{grid-template-columns:1fr 1fr;} .k-in:nth-child(3){border-left:0;padding-left:0;} .k-in:nth-child(n+3){border-top:1px solid var(--line);} }
@media(max-width:480px){ .k-inputs{grid-template-columns:1fr;} .k-in + .k-in{border-left:0;padding-left:0;border-top:1px solid var(--line);} }

/* flow boxes */
.k-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0;margin:1rem 0 0;}
.k-box{border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;background:var(--card);}
.k-box small{display:block;font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.k-box b{display:block;font-size:1.05rem;margin-top:4px;line-height:1.3;font-weight:600;}
.k-box span{display:block;font-size:.85rem;color:var(--muted);margin-top:4px;line-height:1.4;}
.k-box.out{background:var(--night);color:#F2F5FA;border-color:var(--night);} .k-box.out small{color:var(--brass);} .k-box.out span{color:var(--muted-night);}
.k-op{display:flex;align-items:center;justify-content:center;padding:0 10px;font-size:1.4rem;font-weight:300;color:var(--muted);}
@media(max-width:720px){ .k-flow{grid-template-columns:1fr;} .k-op{padding:4px 0;} }

/* calculator */
.k-calc{display:grid;grid-template-columns:minmax(0, 320px) minmax(0, 1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-card);margin-top:1.2rem;background:var(--card);box-shadow:var(--lift);overflow:hidden;}
.k-form{padding:20px;border-right:1px solid var(--line);display:grid;gap:14px;align-content:start;}
.k-form label{display:grid;gap:6px;font-size:.8rem;font-weight:600;color:var(--muted);}
.k-form input,.k-form select{font:inherit;font-size:1rem;color:var(--ink);background:var(--day);border:1px solid var(--line);border-radius:var(--r-ctl);padding:10px 12px;width:100%;}
.k-form input:focus,.k-form select:focus{outline:2px solid var(--brass-ink);outline-offset:1px;}
.k-seg{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden;}
.k-seg button{font:inherit;font-size:.78rem;font-weight:500;padding:9px 4px;border:0;background:var(--card);color:var(--ink);cursor:pointer;line-height:1.2;min-height:44px;}
.k-seg button + button{border-left:1px solid var(--line);}
.k-seg button.on{background:var(--ink);color:#fff;}
.k-lab{font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:6px;}
.k-opt{font-size:.78rem;color:var(--muted);font-weight:500;}
.k-private{font-size:.8rem;color:var(--muted);line-height:1.45;margin:0;border-top:1px solid var(--line);padding-top:12px;}
.k-rcpt{padding:20px 22px;font-family:var(--mono);font-variant-numeric:tabular-nums;}
.k-row{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:14px;padding:9px 0;border-bottom:1px dotted var(--line);font-size:.95rem;line-height:1.4;align-items:baseline;font-family:var(--sans);}
.k-row .v{font-family:var(--mono);font-weight:500;text-align:right;white-space:nowrap;}
.k-row .why{display:block;font-size:.8rem;color:var(--muted);margin-top:2px;}
.k-row.sub{padding-left:14px;} .k-row.sub .v.neg{color:#9A3412;} .k-row.sub .v.pos{color:var(--ok);}
.k-row.head{border-bottom:1px solid var(--ink);font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:18px;font-family:var(--sans);}
.k-row.head:first-child{padding-top:0;}
.k-total{display:grid;gap:4px;padding:14px 0 6px;border-top:2px solid var(--ink);margin-top:6px;}
.k-total .v{font-family:var(--mono);font-weight:500;font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);letter-spacing:-.02em;line-height:1.1;}
.k-warn{margin:12px 0 0;padding:10px 12px;border-left:3px solid var(--brass);background:var(--lav-tint);font-size:.88rem;line-height:1.5;border-radius:0 var(--r-ctl) var(--r-ctl) 0;}
.k-empty{color:var(--muted);font-size:.95rem;}
@media(max-width:820px){ .k-calc{grid-template-columns:minmax(0, 1fr);} .k-form{border-right:0;border-bottom:1px solid var(--line);} }
@media(max-width:420px){ .k-row{grid-template-columns:1fr;gap:2px;} .k-row .v{text-align:left;} }

/* tables */
.k-tbl-wrap{overflow-x:auto;margin-top:1rem;-webkit-overflow-scrolling:touch;}
table.k-tbl{width:100%;border-collapse:collapse;font-size:.93rem;font-variant-numeric:tabular-nums;min-width:460px;}
.k-tbl th{text-align:left;font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 12px 10px 0;border-bottom:1px solid var(--ink);}
.k-tbl td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45;}
.k-tbl td.n, .k-tbl th.n{text-align:right;white-space:nowrap;font-family:var(--mono);}
.k-tbl tr.hl td{background:var(--gold-tint);}
.k-tbl .pos{color:var(--ok);font-weight:600;} .k-tbl .neg{color:#9A3412;font-weight:600;}
.k-acc{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:16px 0;margin:1.2rem 0;}
.k-acc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.k-acc-grid b{display:block;font-family:var(--mono);font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.k-acc-grid span{color:var(--muted);font-size:.88rem;line-height:1.4;}
.k-prog{height:10px;border:1px solid var(--line);border-radius:var(--r-chip);background:var(--gold-tint);overflow:hidden;}
.k-prog i{display:block;height:100%;background:var(--ink);}
@media(max-width:560px){ .k-acc-grid{grid-template-columns:1fr;} }
.k-note{font-size:.88rem;color:var(--muted);line-height:1.55;margin-top:.9rem;max-width:66ch;}

.k-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));border-top:1px solid var(--ink);margin-top:1.2rem;}
.k-type{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);}
.k-type h4,.k-type h3{margin:0 0 .3rem;font-size:1rem;font-weight:600;}
.k-type p{margin:0 0 .5rem;font-size:.9rem;line-height:1.5;color:var(--muted);}
.k-type a{font-size:.88rem;}

.k-weights{display:grid;gap:10px;margin-top:1.1rem;max-width:560px;}
.k-w{display:grid;grid-template-columns:minmax(0, 200px) 1fr 44px;gap:12px;align-items:center;font-size:.93rem;}
.k-bar{height:10px;background:var(--gold-tint);border:1px solid var(--line);border-radius:var(--r-chip);overflow:hidden;}
.k-bar i{display:block;height:100%;background:var(--ink);}
.k-w b{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;}
@media(max-width:480px){ .k-w{grid-template-columns:1fr 44px;} .k-w .k-bar{grid-column:1/-1;grid-row:2;} }

/* FAQ */
.k-faq{border-top:1px solid var(--ink);}
.k-faq details{border-bottom:1px solid var(--line);}
.k-faq summary{list-style:none;cursor:pointer;padding:18px 36px 18px 0;font-weight:600;font-size:1.05rem;line-height:1.4;position:relative;min-height:44px;}
.k-faq summary::-webkit-details-marker{display:none;}
.k-faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-family:var(--mono);font-size:1.3rem;font-weight:400;color:var(--muted);}
.k-faq details[open] summary::after{content:"\2212";}
.k-faq summary:focus-visible{outline:2px solid var(--brass-ink);outline-offset:2px;}
.k-faq .a{padding:0 0 18px;max-width:68ch;}
.k-faq .a p{margin:0 0 .7rem;line-height:1.6;font-size:1rem;}
.k-faq .a ul{margin:0 0 .7rem;padding-left:1.2rem;} .k-faq .a li{line-height:1.6;}
.k-faq-tools{display:flex;justify-content:flex-end;margin:-.2rem 0 .6rem;}
.k-faq-tools button{font:inherit;font-size:.82rem;font-weight:500;background:none;border:0;color:var(--brass-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px 0;}

/* ── NIGHT close ──────────────────────────────────────────────────────── */
.k-close{background:var(--night);color:#F2F5FA;margin-top:clamp(2.5rem, 2rem + 3vw, 4.5rem);}
.k-close .k-wrap{padding-top:clamp(2.5rem, 2rem + 3vw, 4.5rem);padding-bottom:clamp(2.5rem, 2rem + 3vw, 4.5rem);display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:end;}
.k-close h2{font-size:clamp(1.8rem, 1.3rem + 2.4vw, 3rem);line-height:1.08;letter-spacing:-.03em;margin:0;font-weight:600;color:#F2F5FA;}
.k-close p{color:var(--muted-night);line-height:1.6;margin:0 0 1.2rem;}
.k-close .k-link{color:var(--brass);}
@media(max-width:720px){ .k-close .k-wrap{grid-template-columns:1fr;} }

.k-foot{max-width:var(--bd-max);margin:0 auto;padding:20px clamp(1rem, .6rem + 2vw, 1.6rem) 40px;font-size:.82rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;}
.k-foot a{color:var(--muted);}
a{color:var(--brass-ink);}
.k-body a, .k-faq a, .k-note a{font-weight:500;text-underline-offset:3px;}