/* ============================================================
   BijakDana — BDC-system layer  (RESKINNED 2026-09-27 → Mineral Swiss-editorial "deslop")
   Same .bd-* class contract; only the SKIN changed.
   WHY: warm-via-gradients/rounding/pastels reads as AI-built (see
   design-memory/anti-references.md, LOCKED 2026-09-26). Warmth now comes
   from CRAFT not chrome: a human Swiss grotesque (Helvetica), bone paper,
   hairline rules + flat fills, tight 3px radius, real photography.
   KILLED on sight: Google webfonts, pill radii, box-shadow glows,
   gradients, radial orbs, pastel section washes.
   Type: Helvetica Neue (system) — display = 700 tight tracking; body = 400/500.
   Palette: bone paper / warm near-black ink / rust accent / mineral foil on dark.
   Prefix: .bd-*   — reusable across the whole funnel.
   ============================================================ */

:root{
  /* Mineral base palette. Token NAMES kept (--purple/--gold etc) so every
     .bd-* rule and every page that reads these tokens flips at once; VALUES
     re-mapped to the mineral system. :root stays lower specificity than .cx. */
  /* ── Re-pointed to v5.1 values (2026-10-02, brief 2026-10-02-v51-system-design.md).
     Token NAMES kept so every .bd-* rule + legacy page flips to v5.1 colours before
     its phase (P1–P5) rebuilds it onto v5.css. Transitional. ── */
  --surface:#F5F6F8;                 /* v5.1 day — the main field */
  --ink:#0B1220;                     /* v5.1 ink — text & dark (night) blocks */
  --muted:#5B6576;                   /* v5.1 muted — AA on day */
  --line:#E3E6EC;                    /* v5.1 hairline rule */
  --line-solid:#0B1220;              /* strong rule / photo border */

  /* "purple" token re-mapped to v5.1 NIGHT ink (no purple in v5.1). */
  --purple:#0B1220; --purple-deep:#070C16; --purple-tint:#EEF1F5;
  /* accent. --gold = v5.1 brass (on night only); --gold-ink = brass-ink,
     AA-safe as small TEXT on light (5.9:1). */
  --gold:#D8AE6A; --gold-ink:#8A5A14;
  --bone-2:#FFFFFF;                  /* raised card / callout fill */
  --green:#1F8A5B;                   /* v5.1 ok-fill — verified/done */
  --green-ink:#16673F;               /* v5.1 ok — green as small TEXT on light */

  /* quiet zoning tints → v5.1 neutrals (never candy pastel) */
  --gold-tint:#EEF1F5;               /* quiet grouped surface */
  --lav-tint:#EEF1F5;                /* second quiet surface */
  --ink-soft:rgba(11,18,32,.72);

  --r:8px;                           /* v5.1 chip radius — the pill is dead */

  /* ── Design system v2 (journey-v2 brief 2026-09-30, "unlock with restraint") ──
     Mirror of proto.css :root. Four relaxations only: tonal page depth, raised card
     surfaces, softer radii, and gradients that MEAN something. Colour = meaning
     (rust = act on · green = safe/verified/done/progress · dark slab = paid layer).
     The ONLY gradients/shadows the funnel may use are the four --grad-*/--card-shadow
     tokens (+ inset underlines) — enforced by worker/src/gradient-guard.test.ts. */
  --paper-hi:#F5F6F8; --paper-lo:#F5F6F8;    /* v5.1 day field (flat) */
  --card:#FFFFFF;                            /* raised surface */
  --card-shadow:0 1px 1px rgba(11,18,32,.04), 0 24px 48px -24px rgba(11,18,32,.28); /* = v5.1 --lift */
  --tint:#EEF1F5;                            /* quiet grouped surface */
  --rust-tint:#F3D9A8; --rust-deep:#8A5A14;  /* brass-soft / brass-ink on light */
  --safe-bg:#E7F4EC; --safe-ink:#16673F;     /* refund / verified cap / done */
  --r-card:16px; --r-ctl:12px; --r-chip:8px; /* v5.1 radii */
  --grad-page:linear-gradient(180deg,var(--paper-hi) 0,var(--paper-lo) 360px);
  --grad-progress:linear-gradient(90deg,#1F8A5B 0%,var(--green) 100%);
  --grad-slab:radial-gradient(120% 90% at 0% 0%,#101A2E 0%,#0B1220 62%);

  /* fluid breathing scale (calm preserved; chrome removed) */
  --bd-band:clamp(4.5rem, 3.2rem + 6vw, 9rem);
  --bd-lg:clamp(2rem, 1.4rem + 3vw, 4rem);
  --bd-max:1120px;

  --font:"Geist","Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
}

/* ---------- v2 funnel stepper (Cerita → Pilihan → Pelan) — mirror of proto.css .steps
   so pages on this system (peta-dana) share one definition. done=green check ·
   current=ink disc · future=outline. ---------- */
.steps{display:flex;align-items:center;list-style:none;margin:0 0 22px;padding:0;font-size:.82rem;font-weight:700;letter-spacing:.01em;}
.steps li{display:flex;align-items:center;gap:8px;color:var(--muted);white-space:nowrap;}
.steps li+li{flex:1;min-width:0;}
.steps li+li::before{content:"";flex:1;height:1px;background:var(--line);margin:0 10px;}
.steps .dot{width:23px;height:23px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:.74rem;color:var(--muted);background:transparent;flex:none;font-variant-numeric:tabular-nums;}
.steps [aria-current="step"]{color:var(--ink);}
.steps [aria-current="step"] .dot{background:var(--ink);border-color:var(--ink);color:var(--surface);}
.steps .done{color:var(--green);}
.steps .done .dot{background:var(--safe-bg);border-color:var(--green);color:var(--safe-ink);}
@media(max-width:520px){.steps .lbl{display:none;}.steps [aria-current="step"] .lbl{display:inline;}}

/* ---------- type: one human grotesque, editorial discipline ---------- */
.bd-display{font-family:var(--font);font-weight:700;letter-spacing:-.03em;line-height:1.03;color:var(--ink);}
.bd-kick{font-family:var(--font);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}

.bd-wrap{max-width:var(--bd-max);margin:0 auto;padding:0 clamp(1.25rem,.6rem + 3vw,3rem);}

/* ---------- buttons — solid ink slab, flat, tight radius ---------- */
.bd-btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--ink);color:var(--surface);font-family:var(--font);font-weight:600;font-size:1rem;letter-spacing:-.01em;padding:.95rem 1.5rem;border-radius:var(--r);text-decoration:none;border:1px solid var(--ink);cursor:pointer;transition:background .16s,color .16s;}
.bd-btn:hover{background:#2C2620;color:#fff;}
.bd-btn .arw{color:var(--gold);transition:transform .16s;}
.bd-btn:hover .arw{transform:translateX(3px);}
.bd-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-solid);}
.bd-btn.ghost:hover{background:var(--ink);color:var(--surface);}
.bd-btn.on-dark{background:var(--surface);color:var(--ink);border-color:var(--surface);}
.bd-btn.on-dark:hover{background:#fff;color:var(--ink);}

/* ---------- sections — flat mineral fields, separated by hairline rules ---------- */
.bd-band{padding:var(--bd-band) 0;}
.bd-band-gold{background:var(--gold-tint);}
.bd-band-lav{background:var(--lav-tint);}
.bd-band-white{background:var(--surface);}
/* the weighty "later / serious" step (private marketplace door) — palette drops
   to ink, the room goes quiet. Flat, no glow. */
.bd-band-ink{background:var(--ink);}
.bd-band-ink .bd-kick{color:var(--gold);}
.bd-band.bd-band-ink h2{color:#fff;}
.bd-band.bd-band-ink .bd-lead{color:rgba(237,231,218,.74);}
.bd-band h2{font-family:var(--font);font-weight:700;letter-spacing:-.025em;line-height:1.06;font-size:clamp(1.9rem,1.25rem + 2.7vw,3.1rem);max-width:22ch;color:var(--ink);}
.bd-band .bd-lead{color:var(--ink-soft);margin-top:1rem;max-width:52ch;font-size:1.06rem;line-height:1.6;}
/* a quiet door, not a loud button — restrained underlined link that warms to gold */
.bd-doorlink{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;padding:12px 2px;color:#fff;font-family:var(--font);font-weight:600;font-size:1rem;text-decoration:underline;text-decoration-color:rgba(237,231,218,.4);text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .2s,color .2s;}
.bd-doorlink:hover{color:var(--gold);text-decoration-color:var(--gold);}

/* ---------- hero — big-type editorial authority, left-aligned ---------- */
.bd-hero{padding:var(--bd-band) 0 calc(var(--bd-band) - 1rem);}
.bd-hero .bd-kick{color:var(--gold-ink);}
.bd-hero h1{margin-top:1.1rem;font-family:var(--font);font-weight:700;letter-spacing:-.035em;line-height:1.02;font-size:clamp(2.6rem,1.5rem + 6vw,5.6rem);max-width:16ch;color:var(--ink);}
/* emphasis = a hand-drawn ink underline (2px solid), not a coloured highlight */
.bd-hero h1 em{font-style:normal;color:var(--ink);position:relative;padding-bottom:1px;box-shadow:inset 0 -.09em 0 var(--gold-ink);}
.bd-hero .bd-sub{margin-top:1.5rem;font-size:clamp(1.05rem,.95rem + .5vw,1.24rem);color:var(--ink-soft);max-width:44ch;line-height:1.55;}
.bd-cta{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;}
.bd-hero .bd-cta{margin-top:2.1rem;}
.bd-trust{margin-top:1.6rem;color:var(--ink-soft);font-size:.88rem;display:flex;gap:1.4rem;flex-wrap:wrap;}
.bd-trust b{color:var(--ink);font-weight:700;}

/* ---------- number-as-hero — flat ink slab, tight radius, no glow ---------- */
.bd-numberband{background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(1.8rem,1.2rem + 2vw,3rem);margin-top:var(--bd-lg);position:relative;}
.bd-numberband .bd-kick{color:rgba(237,231,218,.72);}
.bd-numberband .bd-num{font-family:var(--font);font-weight:700;letter-spacing:-.03em;line-height:1;font-size:clamp(2.9rem,1.6rem + 6vw,5.4rem);margin-top:.6rem;}
.bd-numberband .bd-num small{font-size:.32em;font-weight:600;letter-spacing:0;color:rgba(237,231,218,.72);margin-left:.4rem;}
.bd-numberband .bd-row{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1.6rem;}
.bd-numberband .bd-cell .k{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(237,231,218,.62);}
.bd-numberband .bd-cell .v{font-family:var(--font);font-weight:700;font-size:1.4rem;margin-top:.25rem;letter-spacing:-.01em;}
.bd-gapline{margin-top:1.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16);font-size:.95rem;color:rgba(237,231,218,.84);line-height:1.55;}
.bd-gapline b{color:var(--gold);font-weight:700;}

/* ---------- two-column split with a real photo (the trust lever) ---------- */
.bd-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center;}
@media(max-width:760px){.bd-split{grid-template-columns:1fr;}}
.bd-photo{margin:0;border-radius:var(--r);overflow:hidden;position:relative;border:1px solid var(--line-solid);}
.bd-photo img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;}
.bd-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.2rem 1.1rem .9rem;background:linear-gradient(to top,rgba(26,21,18,.78),transparent);color:#fff;font-size:.82rem;font-weight:500;letter-spacing:.02em;}

/* ---------- lanes (sell / buy / fundraise) — bordered flat cards ---------- */
.bd-lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:var(--bd-lg);}
.bd-lane{background:var(--surface);border:1px solid var(--line-solid);border-radius:var(--r);padding:1.6rem;text-decoration:none;transition:background .16s;display:block;}
.bd-lane:hover{background:var(--gold-tint);}
.bd-lane .bd-dot{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;font-family:var(--font);font-weight:700;color:var(--surface);background:var(--ink);font-size:1rem;}
.bd-lane h3{font-family:var(--font);font-weight:700;letter-spacing:-.02em;font-size:1.3rem;margin:1rem 0 0;color:var(--ink);}
.bd-lane p{color:var(--ink-soft);margin-top:.4rem;font-size:.95rem;line-height:1.5;}
.bd-lane .go{margin-top:1rem;color:var(--gold-ink);font-weight:700;font-size:.9rem;display:inline-flex;gap:.35rem;}

/* ---------- dark closing CTA — flat ink, no gradient/glow ---------- */
.bd-closer{background:var(--ink);border-radius:var(--r);padding:clamp(3rem,2rem + 4vw,5rem) 2rem;text-align:center;position:relative;}
.bd-closer h2{font-family:var(--font);font-weight:700;letter-spacing:-.03em;line-height:1.05;font-size:clamp(2rem,1.25rem + 3vw,3.3rem);color:#fff;margin:0;}
.bd-closer p{color:rgba(237,231,218,.7);margin:1.1rem auto 2rem;max-width:42ch;font-size:1.08rem;}

/* ============ the fat, navigable sitemap footer ============ */
.bd-footer{background:var(--ink);color:#fff;padding:var(--bd-band) 0 2.5rem;}
.bd-foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.2rem;}
@media(max-width:760px){.bd-foot-top{grid-template-columns:1fr 1fr;gap:2rem;}}
@media(max-width:460px){.bd-foot-top{grid-template-columns:1fr;}}
.bd-foot-brand .logo{font-family:var(--font);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;color:#fff;}
.bd-foot-brand .logo b{color:var(--gold);font-weight:700;}
.bd-foot-brand p{color:rgba(237,231,218,.64);margin-top:.9rem;max-width:32ch;font-size:.92rem;line-height:1.6;}
.bd-foot-col h3{font-family:var(--font);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,231,218,.72);margin:0 0 1rem;}
.bd-foot-col a{display:block;color:rgba(237,231,218,.86);text-decoration:none;font-size:.98rem;padding:.4rem 0;transition:color .15s;}
.bd-foot-col a:hover{color:var(--gold);}
.bd-foot-bar{margin-top:var(--bd-lg);padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:rgba(237,231,218,.54);font-size:.85rem;}
.bd-foot-bar a{color:rgba(237,231,218,.64);text-decoration:none;}
.bd-foot-bar a:hover{color:#fff;}
.bd-foot-bar .bd-lang{color:rgba(237,231,218,.64);}
.bd-foot-bar .bd-lang:hover{color:#fff;}

/* micro-interactions: a tactile press + an elegant keyboard focus ring (site-wide chrome) */
.bd-btn:active{transform:translateY(1px);}
.bd-btn:focus-visible,.bd-lane:focus-visible,.bd-doorlink:focus-visible,.bd-foot-col a:focus-visible{
  outline:2px solid var(--gold-ink);outline-offset:3px;border-radius:var(--r);
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bd-btn,.bd-btn .arw,.bd-lane{transition:none;}
  .bd-btn:active{transform:none;}
}

/* "Apa maksudnya?" inline term explainer (js/istilah.js, brief 2026-09-30 D2):
   dashed-rust button → a bone-2 panel in place. Flat, 3px, no glow. */
.ist{display:block;margin-top:8px;}
.ist-btn{background:none;border:0;padding:0;font:inherit;font-size:.9rem;color:var(--gold-ink);font-weight:700;cursor:pointer;border-bottom:1px dashed var(--gold-ink);line-height:1.2;}
.ist-panel{display:block;margin-top:8px;background:var(--bone-2);border-left:3px solid var(--gold-ink);border-radius:3px;padding:12px 14px;font-size:.95rem;line-height:1.55;color:var(--ink);max-width:56ch;}
.ist-panel .ist-eg{display:block;margin-top:6px;color:var(--muted);font-size:.9rem;}
[x-cloak]{display:none!important;}

/* WhatsApp v1 (js/wa.js, brief 2026-09-30 D5): floating help button — flat mineral green, 3px, no glow.
   Hidden until WA_NUMBER is configured (the button is only mounted then). */
.bd-wa{position:fixed;right:16px;bottom:16px;z-index:60;display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;border:1px solid var(--green-ink);border-radius:3px;padding:11px 15px;font-family:var(--font);font-weight:700;font-size:.92rem;text-decoration:none;}
.bd-wa:hover{background:var(--green-ink);}
.bd-wa:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px;}
/* report share row (peta-dana) */
.m-share{display:flex;flex-wrap:wrap;gap:10px;margin:1rem 0;}
.m-share button{display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#fff;border:1px solid var(--green-ink);border-radius:3px;padding:10px 14px;font:600 .92rem var(--font);cursor:pointer;}
.m-share button.alt{background:transparent;color:var(--ink);border-color:var(--line-solid);}