/* =====================================================================
   Bank Bandar Jaya · main.css
   Token dari design handoff (theme-assets/tokens.css). Prefix bbj-.
   ===================================================================== */

/* Inter (OFL), di-host sendiri: subset latin, variable 400–700. */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --bbj-navy:#06366B; --bbj-blue:#0755A5; --bbj-blue-light:#DCE5EF; --bbj-blue-line:#C9D6E6;
  --bbj-green:#1F7A3D; --bbj-green-hover:#17602F; --bbj-lime:#8CC63F;
  --bbj-red:#D71920; /* hanya: garis nav aktif, garis langkah pertama, label kategori, teks galat */
  --bbj-ink:#17324D; --bbj-body:#33475C; --bbj-muted:#52647A; --bbj-placeholder:#AEBBC7;
  --bbj-border:#CAD3DC; --bbj-line:#E7EBEF; --bbj-row-alt:#F7F9FB; --bbj-cream:#F4F1EB; --bbj-white:#FFFFFF;
  --bbj-font:'Inter', Arial, sans-serif;
  --bbj-h1:clamp(36px,4.4vw,52px); --bbj-h2:clamp(32px,3.6vw,44px); --bbj-eyebrow:14px;
  --bbj-container:1240px; --bbj-gutter:32px; --bbj-section-y:104px;
  --bbj-r-sm:10px; --bbj-r-md:16px; --bbj-r-lg:20px; --bbj-r-xl:24px;
  --bbj-r-hero:240px 24px 24px 24px; --bbj-r-pill:999px;
  --bbj-shadow-float:0 12px 40px rgba(6,54,107,.14); --bbj-shadow-seg:0 1px 3px rgba(6,54,107,.12);

  /* Nuansa hijau (Pengaturan Bank). Default = kuat. */
  --bbj-util-bg:var(--bbj-green);
  --bbj-feature-bg:var(--bbj-green);
  --bbj-feature-hover:var(--bbj-green-hover);
  --bbj-accent-op:1;
}
.bbj-green--aksen { --bbj-util-bg:var(--bbj-navy); --bbj-feature-bg:var(--bbj-blue); --bbj-feature-hover:var(--bbj-navy); }
.bbj-green--tanpa { --bbj-util-bg:var(--bbj-navy); --bbj-feature-bg:var(--bbj-blue); --bbj-feature-hover:var(--bbj-navy); --bbj-accent-op:0; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:96px; }
body { margin:0; background:var(--bbj-white); color:var(--bbj-ink); font-family:var(--bbj-font); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img, svg { display:block; max-width:100%; }
img { height:auto; }
a { color:var(--bbj-blue); text-decoration:none; }
a:hover { color:var(--bbj-navy); }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin:0; }
ul, ol { padding:0; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
input[type=range] { accent-color:var(--bbj-blue); }
:focus-visible { outline:3px solid rgba(7,85,165,.45); outline-offset:2px; }
.screen-reader-text, .bbj-sr { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.bbj-skip { position:absolute; left:16px; top:-60px; z-index:100; background:var(--bbj-navy); color:#fff; padding:12px 18px; border-radius:var(--bbj-r-sm); font-weight:600; }
.bbj-skip:focus { top:12px; color:#fff; }
[hidden] { display:none !important; }

/* ---------- Layout ---------- */
.bbj-container { position:relative; max-width:var(--bbj-container); margin:0 auto; padding:0 var(--bbj-gutter); }
.bbj-container--880 { max-width:880px; }
.bbj-container--1080 { max-width:1080px; }
.bbj-section { padding:var(--bbj-section-y) 0; position:relative; }
.bbj-section--cream { background:var(--bbj-cream); }
.bbj-section--navy { background:var(--bbj-navy); color:#fff; overflow:hidden; }
.bbj-section--top0 { padding-top:0; }
.bbj-section--bot0 { padding-bottom:0; }
.bbj-section--96 { padding:96px 0; }
.bbj-section--72 { padding:72px 0; }
.bbj-section--ruled { border-top:1px solid var(--bbj-line); }

.bbj-stack { display:flex; flex-direction:column; }
.bbj-gap-8{gap:8px} .bbj-gap-10{gap:10px} .bbj-gap-12{gap:12px} .bbj-gap-14{gap:14px} .bbj-gap-16{gap:16px} .bbj-gap-20{gap:20px} .bbj-gap-22{gap:22px} .bbj-gap-24{gap:24px} .bbj-gap-28{gap:28px} .bbj-gap-32{gap:32px} .bbj-gap-36{gap:36px} .bbj-gap-40{gap:40px} .bbj-gap-44{gap:44px} .bbj-gap-48{gap:48px}

.bbj-grid { display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,260px)),1fr)); }
.bbj-grid--160{--min:160px} .bbj-grid--180{--min:180px} .bbj-grid--200{--min:200px} .bbj-grid--220{--min:220px} .bbj-grid--260{--min:260px} .bbj-grid--280{--min:280px} .bbj-grid--300{--min:300px} .bbj-grid--320{--min:320px} .bbj-grid--420{--min:420px} .bbj-grid--440{--min:440px}
.bbj-grid.bbj-gap-16{gap:16px} .bbj-grid.bbj-gap-20{gap:20px} .bbj-grid.bbj-gap-28{gap:28px} .bbj-grid.bbj-gap-32{gap:32px}

/* Grid 4/2/1 (kantor, pengurus, kuartal laporan, akses cepat) */
.bbj-grid-4 { display:grid; gap:24px; grid-template-columns:minmax(0,1fr); }
@media (min-width:560px) { .bbj-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px) { .bbj-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* Dua kolom auto-fit (teks + panel) */
.bbj-split { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:48px 80px; align-items:start; }
.bbj-split--440 { grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); }
.bbj-split--center { align-items:center; }
.bbj-split--56 { gap:56px; }
.bbj-split--64 { gap:64px; }

/* Kolom samping + kolom utama (formulir, tabel suku bunga) */
.bbj-aside { display:flex; flex-wrap:wrap; gap:40px 72px; align-items:flex-start; }
.bbj-aside__side { display:flex; flex-direction:column; gap:20px; flex:1 1 300px; max-width:400px; }
.bbj-aside__main { flex:2 1 520px; min-width:0; }
.bbj-aside--64 { gap:32px 64px; }

/* ---------- Tipografi ---------- */
.bbj-eyebrow { font-size:var(--bbj-eyebrow); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--bbj-blue); }
.bbj-eyebrow--light { color:var(--bbj-blue-light); }
.bbj-h1 { font-size:var(--bbj-h1); line-height:1.08; font-weight:700; letter-spacing:-.025em; color:var(--bbj-navy); text-wrap:balance; }
.bbj-h1--product { font-size:clamp(38px,4.8vw,58px); line-height:1.06; }
.bbj-h1--hero { font-size:clamp(40px,5.2vw,64px); line-height:1.05; }
.bbj-h1--detail { font-size:clamp(36px,4.4vw,54px); line-height:1.07; }
.bbj-h1--article { font-size:clamp(34px,4.2vw,50px); line-height:1.1; }
.bbj-h1--light { color:#fff; }
.bbj-h2 { font-size:var(--bbj-h2); line-height:1.12; font-weight:700; letter-spacing:-.02em; color:var(--bbj-navy); text-wrap:balance; }
.bbj-h2--sm { font-size:clamp(28px,3vw,36px); line-height:1.15; }
.bbj-h2--light { color:#fff; }
.bbj-h3 { font-size:24px; font-weight:700; color:var(--bbj-navy); }
.bbj-lead { font-size:18px; line-height:1.6; color:var(--bbj-muted); text-wrap:pretty; }
.bbj-lead--19 { font-size:19px; }
.bbj-lead--light { color:var(--bbj-blue-light); }
.bbj-text { font-size:16px; line-height:1.65; color:var(--bbj-muted); text-wrap:pretty; }
.bbj-text--17 { font-size:17px; line-height:1.6; }
.bbj-text--18 { font-size:18px; line-height:1.7; }
.bbj-small { font-size:13px; line-height:1.6; color:var(--bbj-muted); }
.bbj-mw-480{max-width:480px} .bbj-mw-520{max-width:520px} .bbj-mw-540{max-width:540px} .bbj-mw-620{max-width:620px} .bbj-mw-640{max-width:640px} .bbj-mw-680{max-width:680px} .bbj-mw-720{max-width:720px} .bbj-mw-760{max-width:760px}

.bbj-head { display:flex; flex-direction:column; gap:16px; max-width:620px; }
.bbj-head--wide { max-width:none; }
.bbj-head--14 { gap:14px; }
.bbj-headrow { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }

/* ---------- Tombol & tautan ---------- */
.bbj-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--bbj-blue); color:#fff; font-weight:600; font-size:16px; line-height:1.2; padding:16px 26px; border-radius:var(--bbj-r-sm); border:1px solid transparent; white-space:nowrap; transition:background-color .15s, border-color .15s, color .15s; }
.bbj-btn:hover { background:var(--bbj-navy); color:#fff; }
.bbj-btn--md { padding:14px 24px; }
.bbj-btn--sm { font-size:15px; padding:14px 22px; }
.bbj-btn--xs { font-size:15px; padding:12px 18px; }
.bbj-btn--block { display:flex; width:100%; white-space:normal; text-align:center; }
.bbj-btn--secondary { background:#fff; color:var(--bbj-navy); border-color:var(--bbj-border); }
.bbj-btn--secondary:hover { background:#fff; border-color:var(--bbj-blue); color:var(--bbj-blue); }
.bbj-btn--light { background:#fff; color:var(--bbj-navy); }
.bbj-btn--light:hover { background:var(--bbj-blue-light); color:var(--bbj-navy); }
.bbj-btn--ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.bbj-btn--ghost:hover { background:transparent; border-color:#fff; color:#fff; }
.bbj-btn--wrap { white-space:normal; }
.bbj-btns { display:flex; gap:12px; flex-wrap:wrap; }
.bbj-link { font-weight:600; font-size:16px; color:var(--bbj-blue); display:inline-flex; gap:8px; align-items:center; }
.bbj-link:hover { color:var(--bbj-navy); }
.bbj-link--15 { font-size:15px; }
.bbj-link--light { color:#fff; }
.bbj-link--light:hover { color:var(--bbj-blue-light); }

/* ---------- Badge, chip, ikon ---------- */
.bbj-konf { display:inline-block; font-size:12px; font-weight:600; line-height:1.4; color:var(--bbj-muted); border:1px dashed var(--bbj-placeholder); padding:3px 8px; border-radius:6px; letter-spacing:0; text-transform:none; white-space:nowrap; vertical-align:middle; }
.bbj-konf--dark { color:var(--bbj-blue-light); border-color:rgba(220,229,239,.5); }
.bbj-chip { font-size:14px; font-weight:600; color:var(--bbj-navy); background:var(--bbj-line); padding:8px 14px; border-radius:var(--bbj-r-pill); }
.bbj-chip--white { background:#fff; color:var(--bbj-ink); font-weight:500; display:inline-flex; gap:6px; align-items:center; }
.bbj-chip--cream { background:var(--bbj-cream); color:var(--bbj-body); font-weight:500; }
.bbj-tagpill { font-size:12px; font-weight:700; padding:4px 10px; border-radius:var(--bbj-r-pill); background:var(--bbj-blue); color:#fff; white-space:nowrap; }
.bbj-tagpill--soft { background:var(--bbj-blue-light); color:var(--bbj-navy); }
.bbj-tagpill--white { background:#fff; color:var(--bbj-navy); font-weight:600; }
.bbj-tagpill--muted { background:#fff; color:var(--bbj-muted); }
.bbj-cat { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--bbj-red); }
.bbj-cat--blue { color:var(--bbj-blue); }
.bbj-ic { width:52px; height:52px; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.bbj-ic--blue { background:var(--bbj-blue-light); }
.bbj-ic--cream { background:var(--bbj-cream); }
.bbj-ic--glass { background:rgba(255,255,255,.14); }
.bbj-ic--40 { width:40px; height:40px; }
.bbj-ic--44 { width:44px; height:44px; }
.bbj-ic--48 { width:48px; height:48px; }
.bbj-ic--56 { width:56px; height:56px; }
.bbj-ic--60 { width:60px; height:60px; }
.bbj-ic--sq { border-radius:12px; }

.bbj-checks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:15px; color:var(--bbj-ink); }
.bbj-checks li { display:flex; gap:10px; }
.bbj-checks__m { color:var(--bbj-blue); font-weight:700; flex:none; }
.bbj-checks--12 { gap:12px; } .bbj-checks--12 li { line-height:1.5; }
.bbj-checks--16 { gap:14px; font-size:16px; } .bbj-checks--16 li { gap:12px; line-height:1.55; }
.bbj-checks--light { color:#fff; } .bbj-checks--light .bbj-checks__m { color:#fff; }

.bbj-dots { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.bbj-dots li { position:relative; padding-left:20px; font-size:17px; line-height:1.65; color:var(--bbj-body); }
.bbj-dots li::before { content:""; position:absolute; left:0; top:11px; width:6px; height:6px; border-radius:50%; background:var(--bbj-blue); }
.bbj-dots--16 li { font-size:16px; } .bbj-dots--16 li::before { top:10px; }

/* ---------- Dekorasi lingkaran ---------- */
.bbj-deco-lime, .bbj-deco-dot, .bbj-ring { position:absolute !important; border-radius:50%; pointer-events:none; }
.bbj-deco-lime { width:280px; height:280px; background:var(--bbj-lime); right:-80px; bottom:-150px; opacity:var(--bbj-accent-op); }
.bbj-deco-dot { width:56px; height:56px; background:var(--bbj-green); right:230px; bottom:60px; opacity:var(--bbj-accent-op); }
.bbj-ring { border:2px solid rgba(220,229,239,.12); }
.bbj-ring--white16 { border-color:rgba(255,255,255,.16); }
.bbj-ring--14 { border-color:rgba(220,229,239,.14); }
.bbj-ring--sim { width:680px; height:680px; left:-300px; bottom:-380px; }
.bbj-ring--sim-r { width:680px; height:680px; right:-300px; bottom:-380px; }

/* ---------- Utility bar + header ---------- */
.bbj-util { background:var(--bbj-util-bg); color:#fff; font-size:13px; }
.bbj-util__in { max-width:var(--bbj-container); margin:0 auto; padding:9px var(--bbj-gutter); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; align-items:center; }
.bbj-util__grp { display:flex; gap:20px; flex-wrap:wrap; }
.bbj-util a { color:#fff; }
.bbj-util a.bbj-util__muted { color:#fff; }
.bbj-util a:hover { color:#fff; text-decoration:underline; }

.bbj-header { background:#fff; border-bottom:1px solid var(--bbj-line); position:sticky; top:0; z-index:40; }
.bbj-header__in { max-width:var(--bbj-container); margin:0 auto; padding:16px var(--bbj-gutter); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.bbj-logo { display:flex; align-items:center; flex:none; }
.bbj-logo img { height:44px; width:auto; }
.bbj-nav { display:flex; gap:2px; align-items:center; font-size:15px; font-weight:500; white-space:nowrap; }
.bbj-nav__a, .bbj-nav__btn { position:relative; color:var(--bbj-ink); padding:10px 14px; border-radius:8px; background:transparent; border:0; font:500 15px/1.5 var(--bbj-font); display:flex; align-items:center; gap:6px; }
.bbj-nav__a:hover, .bbj-nav__btn:hover, .bbj-nav__btn[aria-expanded=true] { background:var(--bbj-cream); color:var(--bbj-ink); }
.bbj-nav__a.is-current, .bbj-nav__btn.is-current { color:var(--bbj-blue); font-weight:600; }
.bbj-nav__a.is-current::after, .bbj-nav__btn.is-current::after { content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; background:var(--bbj-red); }
.bbj-nav__btn svg { transition:transform .15s; }
.bbj-nav__btn[aria-expanded=true] svg { transform:rotate(180deg); }
.bbj-nav__dd { position:relative; }
.bbj-dd { position:absolute; top:100%; left:-8px; padding-top:10px; z-index:50; }
.bbj-dd__panel { background:#fff; border:1px solid var(--bbj-line); border-radius:16px; box-shadow:0 20px 48px rgba(6,54,107,.14); padding:10px; width:340px; display:flex; flex-direction:column; gap:2px; white-space:normal; }
.bbj-dd__item { display:flex; gap:14px; padding:14px; border-radius:10px; color:var(--bbj-ink); }
.bbj-dd__item:hover, .bbj-dd__item:focus-visible { background:var(--bbj-cream); color:var(--bbj-ink); }
.bbj-dd__item.is-current .bbj-dd__t { color:var(--bbj-blue); }
.bbj-dd__ic { width:40px; height:40px; border-radius:50%; background:var(--bbj-blue-light); display:flex; align-items:center; justify-content:center; flex:none; }
.bbj-dd__t { display:block; font-weight:600; font-size:15px; color:var(--bbj-navy); }
.bbj-dd__d { display:block; font-size:13px; line-height:1.45; color:var(--bbj-muted); }
.bbj-header__cta { display:flex; gap:10px; align-items:center; }
.bbj-header__cta .bbj-btn { font-size:15px; padding:12px 22px; }
.bbj-burger { width:46px; height:46px; border-radius:10px; border:1px solid var(--bbj-border); background:#fff; display:none; align-items:center; justify-content:center; }
.bbj-drawer { border-top:1px solid var(--bbj-line); background:#fff; max-height:calc(100vh - 80px); overflow:auto; }
.bbj-drawer__in { max-width:var(--bbj-container); margin:0 auto; padding:16px var(--bbj-gutter) 28px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:24px; }
.bbj-drawer__col { display:flex; flex-direction:column; gap:4px; }
.bbj-drawer__h { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--bbj-muted); padding:12px 0 4px; }
.bbj-drawer a { padding:12px 0; font-size:16px; font-weight:500; color:var(--bbj-ink); }
.bbj-drawer a.is-current { color:var(--bbj-blue); font-weight:600; }
@media (max-width:1099.98px) {
  .bbj-nav { display:none; }
  .bbj-burger { display:inline-flex; }
}
@media (min-width:1100px) { .bbj-drawer { display:none !important; } }

/* ---------- Footer ---------- */
.bbj-footer { background:var(--bbj-navy); color:var(--bbj-blue-light); position:relative; overflow:hidden; }
.bbj-footer__band { height:12px; background:var(--bbj-lime); opacity:var(--bbj-accent-op); }
.bbj-footer__in { max-width:var(--bbj-container); margin:0 auto; padding:72px var(--bbj-gutter) 32px; display:flex; flex-direction:column; gap:48px; }
.bbj-footer__cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:40px; }
.bbj-footer__brand { display:flex; flex-direction:column; gap:20px; grid-column:span 2; min-width:0; }
.bbj-footer__brand img { height:44px; width:auto; align-self:flex-start; }
.bbj-footer__tag { font-size:18px; font-weight:600; color:#fff; }
.bbj-footer__col { display:flex; flex-direction:column; gap:12px; font-size:15px; }
.bbj-footer__h { font-weight:600; color:#fff; margin-bottom:4px; font-size:15px; }
.bbj-footer a { color:var(--bbj-blue-light); }
.bbj-footer a:hover { color:#fff; }
.bbj-footer a.bbj-footer__tel { color:#fff; }
.bbj-footer__bottom { border-top:1px solid rgba(220,229,239,.2); padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; line-height:1.6; }
.bbj-footer__legal { display:flex; gap:20px; flex-wrap:wrap; }
@media (max-width:640px) { .bbj-footer__brand { grid-column:auto; } }

/* ---------- Page header ---------- */
.bbj-ph { position:relative; overflow:hidden; background:var(--bbj-cream); }
.bbj-ph__ring { position:absolute; border-radius:50%; border:2px solid var(--bbj-blue-line); pointer-events:none; }
.bbj-ph__ring--sm { width:640px; height:640px; right:-220px; top:-320px; }
.bbj-ph__ring--lg { width:760px; height:760px; right:-260px; top:-300px; }
.bbj-ph__in { position:relative; max-width:var(--bbj-container); margin:0 auto; padding:56px var(--bbj-gutter) 64px; display:flex; flex-direction:column; gap:32px; }
.bbj-ph--product .bbj-ph__in { padding-bottom:88px; gap:40px; }
.bbj-ph--detail .bbj-ph__in { padding-bottom:72px; gap:36px; }
.bbj-ph--kontak .bbj-ph__in { gap:40px; }
.bbj-ph--navy { background:var(--bbj-navy); color:#fff; }
.bbj-ph--navy .bbj-ph__ring { border-color:rgba(220,229,239,.12); }
.bbj-ph--navy .bbj-ph__in { padding-bottom:80px; gap:40px; }
.bbj-ph--plain .bbj-ph__in { padding-bottom:48px; gap:24px; }
.bbj-ph__text { display:flex; flex-direction:column; gap:20px; max-width:720px; }
.bbj-ph__text--24 { gap:24px; max-width:none; }
.bbj-crumb { display:flex; gap:10px; font-size:14px; color:var(--bbj-muted); align-items:center; flex-wrap:wrap; }
.bbj-crumb a { color:var(--bbj-muted); }
.bbj-crumb a:hover { color:var(--bbj-blue); }
.bbj-crumb__cur { color:var(--bbj-ink); font-weight:500; }
.bbj-crumb--dark, .bbj-crumb--dark a { color:var(--bbj-blue-light); }
.bbj-crumb--dark a:hover { color:#fff; }
.bbj-crumb--dark .bbj-crumb__cur { color:#fff; }

/* Media hero bertanda tangan: radius 240 24 24 24 */
.bbj-hero-media { position:relative; }
.bbj-hero-media__img { border-radius:var(--bbj-r-hero); overflow:hidden; aspect-ratio:4/3; background:var(--bbj-blue-light); }
.bbj-hero-media__img img { width:100%; height:100%; object-fit:cover; }
.bbj-float { position:absolute; right:24px; bottom:-28px; background:#fff; border-radius:16px; padding:18px 22px; display:flex; flex-direction:column; gap:2px; box-shadow:var(--bbj-shadow-float); }
.bbj-float--left { right:auto; left:-16px; flex-direction:row; gap:14px; align-items:center; max-width:300px; }
.bbj-float__t { font-weight:600; font-size:15px; color:var(--bbj-navy); }
.bbj-float__d { font-size:13px; line-height:1.4; color:var(--bbj-muted); }
.bbj-float__big { font-size:24px; font-weight:700; color:var(--bbj-navy); }
.bbj-float__s { font-size:12px; color:var(--bbj-muted); }
.bbj-tenor-dots { display:flex; gap:6px; }
.bbj-tenor-dots span { min-width:40px; height:40px; padding:0 8px; border-radius:50%; background:var(--bbj-blue-light); color:var(--bbj-navy); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
.bbj-tenor-dots span.is-on { background:var(--bbj-blue); color:#fff; }
.bbj-tenor-dots em { align-self:center; font-style:normal; font-size:13px; color:var(--bbj-muted); padding-left:4px; }
@media (max-width:600px) { .bbj-float--left { left:12px; } }

/* ---------- Beranda ---------- */
.bbj-hero { position:relative; overflow:hidden; background:var(--bbj-cream); }
.bbj-hero__lime { position:absolute; width:300px; height:300px; border-radius:50%; background:var(--bbj-lime); right:-90px; bottom:-110px; opacity:var(--bbj-accent-op); pointer-events:none; }
.bbj-hero__dot { position:absolute; width:64px; height:64px; border-radius:50%; background:var(--bbj-green); right:240px; bottom:150px; opacity:var(--bbj-accent-op); pointer-events:none; }
.bbj-hero__ring1 { position:absolute; width:760px; height:760px; border-radius:50%; border:2px solid var(--bbj-blue-line); right:-220px; top:-260px; pointer-events:none; }
.bbj-hero__ring2 { position:absolute; width:520px; height:520px; border-radius:50%; border:2px solid var(--bbj-blue-light); right:-100px; top:-140px; pointer-events:none; }
.bbj-hero__in { position:relative; max-width:var(--bbj-container); margin:0 auto; padding:80px var(--bbj-gutter) 120px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:56px; align-items:center; }
.bbj-hero__media { position:relative; min-height:420px; }
.bbj-hero__img { position:relative; border-radius:var(--bbj-r-hero); overflow:hidden; aspect-ratio:4/3.4; background:var(--bbj-blue-light); }
.bbj-hero__img img { width:100%; height:100%; object-fit:cover; }
.bbj-hero__card { position:absolute; left:-24px; bottom:-32px; background:#fff; border-radius:16px; padding:20px 22px; display:flex; gap:16px; align-items:center; box-shadow:var(--bbj-shadow-float); max-width:320px; }
@media (max-width:600px) { .bbj-hero__media { min-height:0; } .bbj-hero__card { left:12px; right:12px; } }

.bbj-qa { position:relative; z-index:2; margin-top:-64px; }
.bbj-qa__grid { border-radius:20px; box-shadow:0 16px 48px rgba(6,54,107,.10); border:1px solid var(--bbj-line); overflow:hidden; display:grid; gap:1px; background:var(--bbj-line); grid-template-columns:minmax(0,1fr); }
@media (min-width:560px) { .bbj-qa__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px) { .bbj-qa__grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.bbj-qa__item { padding:26px 28px; display:flex; gap:16px; align-items:center; color:var(--bbj-ink); background:#fff; }
.bbj-qa__item:hover { background:var(--bbj-row-alt); color:var(--bbj-ink); }
.bbj-qa__t { display:block; font-weight:600; font-size:16px; }
.bbj-qa__d { display:block; font-size:14px; color:var(--bbj-muted); }
.bbj-section--produk { padding:120px 0 104px; }

.bbj-pcard { background:var(--bbj-cream); border-radius:20px; padding:36px; display:flex; flex-direction:column; gap:20px; position:relative; overflow:hidden; }
.bbj-pcard__title { font-size:24px; font-weight:700; color:var(--bbj-navy); }
.bbj-pcard__text { font-size:16px; line-height:1.6; color:var(--bbj-muted); text-wrap:pretty; }
.bbj-pcard__more { margin-top:auto; font-weight:600; font-size:16px; color:var(--bbj-blue); }
.bbj-pcard__more:hover { color:var(--bbj-navy); }
.bbj-pcard__ring { position:absolute; width:280px; height:280px; border-radius:50%; border:2px solid rgba(255,255,255,.16); right:-120px; top:-120px; pointer-events:none; }
.bbj-pcard--feature { background:var(--bbj-feature-bg); color:#fff; }
.bbj-pcard--feature .bbj-pcard__title { color:#fff; }
.bbj-pcard--feature .bbj-pcard__text { color:#fff; }
.bbj-pcard--feature .bbj-checks { color:#fff; }
.bbj-pcard--feature .bbj-checks__m { color:#fff; }
.bbj-pcard--feature .bbj-pcard__more { color:#fff; }
.bbj-pcard--feature .bbj-pcard__more:hover { color:var(--bbj-blue-light); }
.bbj-pcard--feature .bbj-ic { position:relative; }
.bbj-pcard__titlerow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* Simulator (bagian navy) */
.bbj-simsec { background:var(--bbj-navy); color:#fff; position:relative; overflow:hidden; }
.bbj-simsec__in { position:relative; max-width:var(--bbj-container); margin:0 auto; padding:96px var(--bbj-gutter); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:56px; align-items:center; }
.bbj-simcard { background:#fff; color:var(--bbj-ink); border-radius:20px; padding:36px; display:flex; flex-direction:column; gap:28px; }
.bbj-simcard--outline { border:1px solid var(--bbj-line); gap:30px; }
.bbj-sim__row { display:flex; flex-direction:column; gap:14px; }
.bbj-sim__row--12 { gap:12px; }
.bbj-sim__top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.bbj-sim__label { font-size:15px; font-weight:600; color:var(--bbj-muted); }
.bbj-sim__val { font-size:24px; font-weight:700; color:var(--bbj-navy); font-variant-numeric:tabular-nums; }
.bbj-sim__range { width:100%; height:24px; margin:0; }
.bbj-sim__scale { display:flex; justify-content:space-between; font-size:13px; color:var(--bbj-muted); }
.bbj-sim__out { border-top:1px solid var(--bbj-line); padding-top:24px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.bbj-sim__k { font-size:14px; color:var(--bbj-muted); }
.bbj-sim__v { font-size:28px; font-weight:700; color:var(--bbj-navy); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.bbj-sim__v--blue { color:var(--bbj-blue); }
.bbj-sim__v--26 { font-size:26px; }
.bbj-sim__v--24 { font-size:24px; }
.bbj-sim__v--20 { font-size:20px; }
.bbj-sim__note { font-size:13px; line-height:1.5; color:var(--bbj-muted); }
.bbj-sim__big { background:var(--bbj-cream); border-radius:14px; padding:22px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.bbj-sim__big strong { font-size:32px; font-weight:700; color:var(--bbj-blue); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
@media (max-width:480px) { .bbj-simcard { padding:28px 22px; } .bbj-sim__v { font-size:22px; } .bbj-sim__big strong { font-size:26px; } }

/* Pilihan (tenor 48px, pill 44px, segmented) */
.bbj-choices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.bbj-choices--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.bbj-choices--5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.bbj-choice { height:48px; border-radius:10px; font:600 15px var(--bbj-font); background:#fff; color:var(--bbj-ink); border:1px solid var(--bbj-border); padding:0 4px; }
.bbj-choices--3 .bbj-choice { font-size:14px; padding:0 6px; }
.bbj-choice:hover { border-color:var(--bbj-blue); }
.bbj-choice[aria-pressed=true], .bbj-choice.is-on { background:var(--bbj-blue); color:#fff; border-color:var(--bbj-blue); }
@media (max-width:420px) { .bbj-choices--5 { grid-template-columns:repeat(3,minmax(0,1fr)); } }

.bbj-pills { display:flex; gap:8px; flex-wrap:wrap; }
.bbj-pill { height:44px; padding:0 18px; border-radius:var(--bbj-r-pill); font:600 15px var(--bbj-font); background:#fff; color:var(--bbj-ink); border:1px solid var(--bbj-border); display:inline-flex; align-items:center; cursor:pointer; }
.bbj-pill--14 { font-size:14px; }
.bbj-pill:hover { border-color:var(--bbj-blue); }
.bbj-pill[aria-pressed=true], .bbj-pill.is-on, .bbj-pillradio input:checked + .bbj-pill { background:var(--bbj-blue); color:#fff; border-color:var(--bbj-blue); }
.bbj-pillradio { position:relative; }
.bbj-pillradio input { position:absolute; opacity:0; inset:0; margin:0; pointer-events:none; }
.bbj-pillradio input:focus-visible + .bbj-pill { outline:3px solid rgba(7,85,165,.45); outline-offset:2px; }

.bbj-seg { display:flex; gap:4px; background:#fff; border-radius:12px; padding:4px; flex-wrap:wrap; }
.bbj-seg--cream { background:var(--bbj-cream); }
.bbj-seg--self { align-self:flex-start; }
.bbj-seg__btn { border:0; border-radius:9px; padding:10px 16px; font:600 14px var(--bbj-font); background:transparent; color:var(--bbj-muted); display:inline-flex; align-items:center; }
.bbj-seg__btn--18 { padding:10px 18px; }
.bbj-seg__btn:hover { color:var(--bbj-navy); }
.bbj-seg__btn.is-on, .bbj-seg__btn[aria-pressed=true], .bbj-seg__btn[aria-selected=true], .bbj-seg__btn[aria-current=page] { background:var(--bbj-blue); color:#fff; }
.bbj-seg--soft .bbj-seg__btn.is-on, .bbj-seg--soft .bbj-seg__btn[aria-pressed=true], .bbj-seg--soft .bbj-seg__btn[aria-selected=true] { background:#fff; color:var(--bbj-navy); box-shadow:var(--bbj-shadow-seg); }
.bbj-method { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; background:var(--bbj-cream); border-radius:12px; padding:4px; height:52px; }
.bbj-method .bbj-seg__btn { justify-content:center; padding:0; }

/* ---------- Kartu umum ---------- */
.bbj-card { background:var(--bbj-cream); border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:16px; }
.bbj-card--white { background:#fff; }
.bbj-card--outline { background:#fff; border:1px solid var(--bbj-line); }
.bbj-card--32 { padding:32px 36px; }
.bbj-card--24 { padding:24px; }
.bbj-card--22 { padding:22px 24px; gap:12px; border-radius:16px; }
.bbj-card__t { font-weight:700; font-size:19px; color:var(--bbj-navy); }
.bbj-card__t--17 { font-size:17px; } .bbj-card__t--18 { font-size:18px; } .bbj-card__t--16 { font-size:16px; } .bbj-card__t--20 { font-size:20px; }
.bbj-card__d { font-size:15px; line-height:1.6; color:var(--bbj-muted); text-wrap:pretty; }
.bbj-card__bar { width:32px; height:3px; background:var(--bbj-blue); display:block; }
.bbj-card--benefit { border-radius:18px; padding:24px; gap:10px; }

.bbj-band { border-radius:20px; padding:32px 36px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:24px 48px; align-items:center; background:var(--bbj-cream); }
.bbj-band--white { background:#fff; }
.bbj-cta { background:var(--bbj-cream); border-radius:20px; padding:32px 36px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.bbj-cta--white { background:#fff; padding:28px 32px; gap:20px; }
.bbj-cta--navy { background:var(--bbj-navy); color:#fff; position:relative; overflow:hidden; padding:36px 40px; }
.bbj-cta--navy-lg { background:var(--bbj-navy); color:#fff; position:relative; overflow:hidden; border-radius:24px; padding:48px; gap:32px; }
.bbj-cta > * { position:relative; }
.bbj-cta__t { font-weight:700; font-size:19px; color:var(--bbj-navy); }
.bbj-cta--navy .bbj-cta__t, .bbj-cta--navy-lg .bbj-cta__t { color:#fff; font-size:20px; }
.bbj-cta--navy-lg .bbj-cta__t { font-size:clamp(24px,2.6vw,32px); line-height:1.2; }
.bbj-cta__d { font-size:15px; line-height:1.6; color:var(--bbj-muted); }
.bbj-cta--navy .bbj-cta__d, .bbj-cta--navy-lg .bbj-cta__d { color:var(--bbj-blue-light); }
.bbj-cta--navy-lg .bbj-cta__d { font-size:16px; }
@media (max-width:600px) { .bbj-cta--navy-lg { padding:36px 24px; } .bbj-cta--navy { padding:32px 24px; } }

/* Langkah */
.bbj-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:24px; }
.bbj-steps--4 { grid-template-columns:minmax(0,1fr); }
@media (min-width:560px) { .bbj-steps--4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px) { .bbj-steps--4 { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.bbj-step { display:flex; flex-direction:column; gap:14px; border-top:2px solid var(--bbj-blue); padding-top:20px; }
.bbj-step:first-child { border-top-color:var(--bbj-red); }
.bbj-step__n::before { content:attr(data-n); }
.bbj-step__n { font-size:32px; font-weight:700; color:var(--bbj-placeholder); letter-spacing:-.02em; }
.bbj-steps--light .bbj-step__n { color:var(--bbj-blue-line); }
.bbj-step__t { font-weight:700; font-size:18px; color:var(--bbj-navy); }
.bbj-step__d { font-size:15px; line-height:1.6; color:var(--bbj-muted); text-wrap:pretty; }

/* Butir bergaris atas (nilai, persyaratan) */
.bbj-ruled { display:flex; flex-direction:column; gap:8px; border-top:2px solid var(--bbj-blue); padding-top:16px; }
.bbj-ruled--first-red:first-child { border-top-color:var(--bbj-red); }
.bbj-ruled--20 { padding-top:20px; gap:10px; }
.bbj-ruled--24 { padding-top:24px; gap:16px; }
.bbj-ruled__t { font-weight:700; font-size:17px; color:var(--bbj-navy); }
.bbj-ruled__t--18 { font-size:18px; } .bbj-ruled__t--19 { font-size:19px; } .bbj-ruled__t--20 { font-size:20px; }
.bbj-ruled__d { font-size:15px; line-height:1.55; color:var(--bbj-muted); text-wrap:pretty; }

/* Baris spesifikasi */
.bbj-spec { border-top:1px solid var(--bbj-line); }
.bbj-spec--none { border-top:0; }
.bbj-spec__row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--bbj-line); flex-wrap:wrap; }
.bbj-spec__k { font-size:15px; color:var(--bbj-muted); }
.bbj-spec__v { display:flex; gap:10px; align-items:center; font-size:16px; font-weight:600; color:var(--bbj-ink); flex-wrap:wrap; }
.bbj-spec--facts .bbj-spec__row { padding:20px 0; }
.bbj-spec--facts .bbj-spec__v { font-size:18px; font-weight:700; color:var(--bbj-navy); }
.bbj-kv { display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:16px; padding:18px 0; border-bottom:1px solid var(--bbj-line); font-size:15px; }
.bbj-kv--14 { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); padding:16px 0; }
.bbj-kv__k { color:var(--bbj-muted); }
.bbj-kv__v { font-weight:600; color:var(--bbj-ink); overflow-wrap:anywhere; }
@media (max-width:480px) { .bbj-kv { grid-template-columns:minmax(0,1fr); gap:4px; } }

/* FAQ */
.bbj-faq { display:flex; flex-direction:column; gap:12px; }
.bbj-faq__item { background:#fff; border-radius:16px; overflow:hidden; }
.bbj-faq--cream .bbj-faq__item { background:var(--bbj-cream); }
.bbj-faq__h { font-size:inherit; }
.bbj-faq__q { width:100%; text-align:left; background:transparent; border:0; padding:22px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; font:600 17px/1.4 var(--bbj-font); color:var(--bbj-navy); }
.bbj-faq__ic { font-size:22px; font-weight:400; color:var(--bbj-blue); flex:none; line-height:1; }
.bbj-faq__a p { padding:0 24px 22px; font-size:15px; line-height:1.65; color:var(--bbj-muted); }

/* Tabel data */
.bbj-tablewrap { background:#fff; border:1px solid var(--bbj-line); border-radius:16px; overflow:auto; }
.bbj-tablewrap--20 { border:0; border-radius:20px; }
.bbj-table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.bbj-table--min520 { min-width:520px; }
.bbj-table--min640 { min-width:640px; }
.bbj-table th { border:0; background:var(--bbj-navy); color:#fff; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:14px 24px; text-align:left; white-space:nowrap; }
.bbj-table td { padding:18px 24px; border-top:1px solid var(--bbj-line); vertical-align:middle; }
.bbj-table tbody tr:nth-child(even) td { background:var(--bbj-row-alt); }
.bbj-table .is-num { text-align:right; white-space:nowrap; }
.bbj-table__name { display:block; font-size:16px; font-weight:600; color:var(--bbj-ink); }
.bbj-table__sub { display:block; font-size:13px; color:var(--bbj-muted); }
.bbj-table__rate { display:inline-flex; gap:10px; align-items:center; justify-content:flex-end; font-size:18px; font-weight:700; color:var(--bbj-blue); flex-wrap:wrap; }
.bbj-table--sched th { padding:16px 28px; }
.bbj-table--sched td { padding:14px 28px; font-size:15px; color:var(--bbj-ink); border-top:0; border-bottom:1px solid var(--bbj-line); background:#fff !important; }
.bbj-table--sched td:first-child { font-weight:600; color:var(--bbj-muted); width:72px; }
.bbj-table--sched td.is-strong { font-weight:600; color:var(--bbj-navy); }
.bbj-table--simple th { padding:14px 24px; }
.bbj-table--simple td { padding:20px 24px; border-top:0; }
.bbj-table--simple .bbj-table__name { font-size:16px; }

/* Formulir */
.bbj-form { display:flex; flex-direction:column; gap:22px; }
.bbj-field { display:flex; flex-direction:column; gap:8px; min-width:0; }
.bbj-field--10 { gap:10px; }
.bbj-label { font-size:14px; font-weight:600; color:var(--bbj-ink); }
.bbj-label__opt { font-weight:400; color:var(--bbj-muted); }
.bbj-input, .bbj-textarea { width:100%; border:1px solid var(--bbj-border); border-radius:10px; background:#fff; color:var(--bbj-ink); font:400 16px var(--bbj-font); outline:0; }
.bbj-input { height:52px; padding:0 16px; }
.bbj-input--56 { height:56px; }
.bbj-input--ticket { text-transform:uppercase; letter-spacing:.04em; }
.bbj-textarea { padding:14px 16px; line-height:1.5; resize:vertical; }
.bbj-input:focus, .bbj-textarea:focus { border-color:var(--bbj-blue); }
.bbj-input::placeholder, .bbj-textarea::placeholder { color:var(--bbj-placeholder); }
.bbj-input-suffix { display:flex; align-items:center; border:1px solid var(--bbj-border); border-radius:10px; height:52px; padding:0 16px; gap:8px; }
.bbj-input-suffix:focus-within { border-color:var(--bbj-blue); }
.bbj-input-suffix input { border:0; outline:0; flex:1; min-width:0; font:700 18px var(--bbj-font); color:var(--bbj-navy); background:transparent; }
.bbj-input-suffix span { font-size:16px; font-weight:600; color:var(--bbj-muted); }
.bbj-consent { display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.5; color:var(--bbj-muted); cursor:pointer; }
.bbj-consent input { width:20px; height:20px; margin:0; flex:none; accent-color:var(--bbj-blue); }
.bbj-consent a { font-weight:600; }
.bbj-error { font-size:14px; font-weight:500; color:var(--bbj-red); }
.bbj-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.bbj-form .bbj-btn[disabled] { opacity:.7; cursor:progress; }
.bbj-done { display:flex; flex-direction:column; gap:20px; align-items:flex-start; padding:12px 0; }
.bbj-done__t { font-weight:700; font-size:26px; color:var(--bbj-navy); }
.bbj-done__ticket { background:var(--bbj-cream); border-radius:14px; padding:18px 22px; display:flex; flex-direction:column; gap:4px; }
.bbj-done__ticket strong { font-size:22px; font-weight:700; color:var(--bbj-blue); letter-spacing:.04em; }
.bbj-formcard { background:#fff; border:1px solid var(--bbj-line); border-radius:20px; padding:36px; }
.bbj-formcard--plain { border:0; }
@media (max-width:480px) { .bbj-formcard { padding:26px 20px; } }

/* Kantor */
.bbj-office { background:#fff; border-radius:20px; overflow:hidden; display:flex; flex-direction:column; }
.bbj-office__img { aspect-ratio:4/3; background:var(--bbj-blue-light); overflow:hidden; }
.bbj-office__img img { width:100%; height:100%; object-fit:cover; }
.bbj-office__body { padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.bbj-office__type { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--bbj-blue); }
.bbj-office__type--pusat { color:var(--bbj-red); }
.bbj-office__name { font-size:20px; font-weight:700; color:var(--bbj-navy); }
.bbj-office__addr { font-size:14px; line-height:1.55; color:var(--bbj-muted); text-wrap:pretty; }
.bbj-office__tel { margin-top:auto; font-weight:600; font-size:15px; }

/* Pengurus */
.bbj-leader { background:#fff; border-radius:20px; padding:32px 24px 28px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; border:1px solid var(--bbj-line); }
.bbj-leader__ph { position:relative; width:168px; height:168px; }
.bbj-leader__ph::before { content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid var(--bbj-blue-light); }
.bbj-leader__ph img { width:168px; height:168px; border-radius:50%; object-fit:cover; object-position:center 18%; background:var(--bbj-blue-light); }
.bbj-leader__n { font-weight:700; font-size:18px; color:var(--bbj-navy); }
.bbj-leader__j { font-size:14px; color:var(--bbj-muted); }

/* Tautan baris (tata kelola, laporan lain) */
.bbj-rowlink { background:#fff; border-radius:16px; padding:22px 24px; display:flex; gap:16px; align-items:center; color:var(--bbj-ink); border:1px solid var(--bbj-line); }
.bbj-rowlink:hover { border-color:var(--bbj-blue); color:var(--bbj-ink); }
.bbj-rowlink__t { display:block; font-weight:600; font-size:16px; color:var(--bbj-navy); }
.bbj-rowlink__d { display:block; font-size:14px; line-height:1.45; color:var(--bbj-muted); }
.bbj-rowlink__arr { color:var(--bbj-blue); font-weight:600; }
.bbj-list { display:flex; flex-direction:column; background:#fff; border-radius:20px; overflow:hidden; }
.bbj-list__item { display:flex; gap:20px; align-items:center; padding:24px 28px; color:var(--bbj-ink); flex-wrap:wrap; }
.bbj-list__item + .bbj-list__item { border-top:1px solid var(--bbj-line); }
a.bbj-list__item:hover { background:var(--bbj-row-alt); color:var(--bbj-ink); }
.bbj-list__body { display:flex; flex-direction:column; gap:4px; flex:1 1 260px; min-width:0; }
.bbj-list__t { font-weight:700; font-size:18px; color:var(--bbj-navy); }
.bbj-list__d { font-size:15px; color:var(--bbj-muted); }
.bbj-list__act { display:flex; gap:8px; align-items:center; font-weight:600; font-size:15px; color:var(--bbj-blue); }
.bbj-list__act--muted { color:var(--bbj-muted); font-weight:500; }

/* Kartu tautan produk (pilihan tabungan, produk lainnya) */
.bbj-plink { background:#fff; border:1px solid var(--bbj-line); border-radius:20px; padding:32px; display:flex; flex-direction:column; gap:14px; color:var(--bbj-ink); position:relative; overflow:hidden; }
.bbj-plink:hover { border-color:var(--bbj-navy); color:var(--bbj-ink); }
.bbj-plink__t { font-weight:700; font-size:22px; color:var(--bbj-navy); position:relative; }
.bbj-plink__d { font-size:15px; line-height:1.6; color:var(--bbj-muted); position:relative; }
.bbj-plink__more { margin-top:auto; padding-top:8px; font-weight:600; font-size:15px; color:var(--bbj-blue); position:relative; }
.bbj-plink--feature { background:var(--bbj-feature-bg); border-color:var(--bbj-feature-bg); }
.bbj-plink--feature:hover { border-color:var(--bbj-navy); }
.bbj-plink--feature .bbj-plink__t, .bbj-plink--feature .bbj-plink__more { color:#fff; }
.bbj-plink--feature .bbj-plink__d { color:#fff; }
.bbj-plink__ring { position:absolute; width:240px; height:240px; border-radius:50%; border:2px solid rgba(255,255,255,.16); right:-100px; top:-100px; pointer-events:none; }

.bbj-other { background:var(--bbj-cream); border-radius:20px; padding:32px; display:flex; gap:20px; align-items:center; color:var(--bbj-ink); position:relative; overflow:hidden; }
.bbj-other:hover { background:var(--bbj-line); color:var(--bbj-ink); }
.bbj-other__body { display:flex; flex-direction:column; gap:4px; flex:1; position:relative; }
.bbj-other__t { font-weight:700; font-size:20px; color:var(--bbj-navy); }
.bbj-other__d { font-size:15px; color:var(--bbj-muted); }
.bbj-other__arr { font-weight:600; color:var(--bbj-blue); position:relative; }
.bbj-other--feature { background:var(--bbj-feature-bg); color:#fff; }
.bbj-other--feature:hover { background:var(--bbj-feature-hover); color:#fff; }
.bbj-other--feature .bbj-other__t, .bbj-other--feature .bbj-other__arr { color:#fff; }
.bbj-other--feature .bbj-other__d { color:#fff; }
.bbj-other .bbj-ic { position:relative; }
.bbj-other__ring { position:absolute; width:220px; height:220px; border-radius:50%; border:2px solid rgba(255,255,255,.16); right:-90px; top:-90px; pointer-events:none; }

/* Tentang Kami */
.bbj-about-img { position:relative; }
.bbj-about-img__in { border-radius:24px 24px 240px 24px; overflow:hidden; aspect-ratio:4/4.4; background:var(--bbj-blue-light); }
.bbj-about-img__in img { width:100%; height:100%; object-fit:cover; }
.bbj-about-img__tag { position:absolute; left:24px; top:24px; background:#fff; border-radius:var(--bbj-r-pill); padding:10px 18px; font-size:14px; font-weight:600; color:var(--bbj-navy); }
.bbj-timeline-row { display:grid; grid-template-columns:88px minmax(0,1fr); gap:24px; padding:24px 0; border-top:1px solid var(--bbj-line); }
.bbj-timeline-row:last-child { border-bottom:1px solid var(--bbj-line); }
.bbj-timeline-row__y { font-size:24px; font-weight:700; color:var(--bbj-navy); letter-spacing:-.01em; }
.bbj-timeline-row__y.is-key { color:var(--bbj-blue); }
.bbj-timeline-row__t { font-weight:600; font-size:17px; color:var(--bbj-navy); }
.bbj-visi { font-size:clamp(26px,2.6vw,34px); line-height:1.3; font-weight:700; letter-spacing:-.015em; color:#fff; text-wrap:balance; }
.bbj-misi { display:flex; gap:20px; padding:16px 0; border-top:1px solid rgba(220,229,239,.2); }
.bbj-misi__n { font-size:15px; font-weight:600; color:var(--bbj-blue-light); min-width:28px; }
.bbj-misi__t { font-size:17px; line-height:1.55; color:#fff; }

/* Karier banner (beranda) */
.bbj-careers { border-radius:24px; background:var(--bbj-line); position:relative; overflow:hidden; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); }
.bbj-careers__body { padding:56px; display:flex; flex-direction:column; gap:20px; }
.bbj-careers__img { min-height:280px; background:var(--bbj-blue-light); position:relative; overflow:hidden; border-radius:200px 0 0 0; }
.bbj-careers__img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:600px) { .bbj-careers__body { padding:36px 24px; } }

/* Kontak */
.bbj-quick { background:#fff; border-radius:16px; padding:22px 24px; display:flex; gap:16px; align-items:center; color:var(--bbj-ink); border:1px solid transparent; }
.bbj-quick:hover { border-color:var(--bbj-blue); color:var(--bbj-ink); }
.bbj-quick__k { display:block; font-size:14px; color:var(--bbj-muted); }
.bbj-quick__v { display:block; font-weight:700; font-size:17px; color:var(--bbj-navy); overflow-wrap:anywhere; }
.bbj-offices { display:flex; flex-wrap:wrap; gap:24px; align-items:stretch; }
.bbj-offices__list { flex:1 1 340px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.bbj-offices__map { flex:1.6 1 480px; min-width:0; display:flex; flex-direction:column; background:#fff; border:1px solid var(--bbj-line); border-radius:20px; overflow:hidden; }
.bbj-offices__frame { flex:1; min-height:360px; background:var(--bbj-blue-light); }
.bbj-offices__frame iframe { border:0; width:100%; height:100%; min-height:360px; display:block; }
.bbj-offices__foot { padding:24px 28px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; border-top:1px solid var(--bbj-line); }
.bbj-offbtn { text-align:left; display:flex; flex-direction:column; gap:6px; padding:20px 22px; border-radius:16px; font-family:var(--bbj-font); background:var(--bbj-cream); border:2px solid transparent; color:var(--bbj-ink); width:100%; }
.bbj-offbtn[aria-pressed=true] { background:#fff; border-color:var(--bbj-blue); }
.bbj-offbtn__top { display:flex; justify-content:space-between; gap:12px; align-items:center; width:100%; }
.bbj-offbtn__mark { font-size:13px; font-weight:600; color:var(--bbj-blue); }
.bbj-offbtn:not([aria-pressed=true]) .bbj-offbtn__mark { visibility:hidden; }
.bbj-offbtn__n { font-weight:700; font-size:19px; color:var(--bbj-navy); }
.bbj-offbtn__a { font-size:14px; line-height:1.55; color:var(--bbj-muted); }
@media (max-width:600px) { .bbj-offices__map { flex-basis:100%; } .bbj-offices__frame, .bbj-offices__frame iframe { min-height:280px; } }

/* Saluran pengaduan */
.bbj-chan { background:#fff; border:1px solid var(--bbj-line); border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:16px; color:var(--bbj-ink); }
.bbj-chan:hover { border-color:var(--bbj-blue); color:var(--bbj-ink); }
.bbj-chan__t { display:block; font-weight:700; font-size:19px; color:var(--bbj-navy); }
.bbj-chan__v { display:block; font-size:15px; color:var(--bbj-ink); }
.bbj-chan__s { display:block; font-size:14px; color:var(--bbj-muted); }
.bbj-chan__more { margin-top:auto; font-weight:600; font-size:15px; color:var(--bbj-blue); }
.bbj-chan--blue { background:var(--bbj-blue); border-color:var(--bbj-blue); }
.bbj-chan--blue:hover { background:var(--bbj-navy); border-color:var(--bbj-navy); }
.bbj-chan--blue .bbj-chan__t, .bbj-chan--blue .bbj-chan__v, .bbj-chan--blue .bbj-chan__more { color:#fff; }
.bbj-chan--blue .bbj-chan__s { color:#fff; }
.bbj-esc { border-radius:20px; padding:32px; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; background:var(--bbj-cream); color:var(--bbj-ink); }
.bbj-esc:hover { background:var(--bbj-line); color:var(--bbj-ink); }
.bbj-esc__k { font-size:14px; color:var(--bbj-muted); position:relative; }
.bbj-esc__t { font-weight:700; font-size:24px; color:var(--bbj-navy); position:relative; }
.bbj-esc__l { font-size:15px; color:var(--bbj-blue); position:relative; }
.bbj-esc--navy { background:var(--bbj-navy); color:#fff; }
.bbj-esc--navy:hover { background:var(--bbj-blue); color:#fff; }
.bbj-esc--navy .bbj-esc__k, .bbj-esc--navy .bbj-esc__l { color:var(--bbj-blue-light); }
.bbj-esc--navy .bbj-esc__t { color:#fff; }

/* Cek status */
.bbj-statusform { background:#fff; border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:16px; flex:1 1 380px; }
.bbj-empty { border:1px dashed var(--bbj-border); border-radius:20px; padding:56px 32px; display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center; }
.bbj-statuscard { flex:1 1 320px; max-width:420px; background:var(--bbj-navy); color:#fff; border-radius:20px; padding:32px; display:flex; flex-direction:column; gap:20px; position:relative; overflow:hidden; }
.bbj-statuscard > * { position:relative; }
.bbj-statuscard__k { font-size:13px; color:var(--bbj-blue-light); }
.bbj-statuscard__no { font-size:24px; font-weight:700; letter-spacing:.04em; }
.bbj-statuscard__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.bbj-statuscard__grid > span { display:flex; flex-direction:column; gap:4px; }
.bbj-statuscard__grid b { font-weight:600; }
.bbj-tl { flex:2 1 440px; min-width:0; display:flex; flex-direction:column; }
.bbj-tl__row { display:grid; grid-template-columns:28px minmax(0,1fr); gap:20px; }
.bbj-tl__rail { display:flex; flex-direction:column; align-items:center; }
.bbj-tl__dot { width:14px; height:14px; border-radius:50%; flex:none; margin-top:3px; background:#fff; border:2px solid var(--bbj-border); }
.bbj-tl__row.is-done .bbj-tl__dot { background:var(--bbj-blue); border-color:var(--bbj-blue); }
.bbj-tl__row.is-current .bbj-tl__dot { width:20px; height:20px; border:5px solid var(--bbj-red); }
.bbj-tl__line { width:2px; flex:1; margin:4px 0; background:var(--bbj-line); }
.bbj-tl__row.is-done .bbj-tl__line { background:var(--bbj-blue); }
.bbj-tl__row:last-of-type .bbj-tl__line { display:none; }
.bbj-tl__body { display:flex; flex-direction:column; gap:4px; padding-bottom:28px; }
.bbj-tl__t { font-weight:700; font-size:17px; color:var(--bbj-muted); }
.bbj-tl__row.is-done .bbj-tl__t, .bbj-tl__row.is-current .bbj-tl__t { color:var(--bbj-navy); }
.bbj-tl__d { font-size:15px; line-height:1.55; color:var(--bbj-muted); }
.bbj-tl__date { font-size:13px; color:var(--bbj-muted); }

/* Laporan */
.bbj-quarter { background:#fff; border:1px solid var(--bbj-line); border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:20px; }
.bbj-quarter__top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.bbj-quarter__tw { font-size:14px; font-weight:600; color:var(--bbj-blue); }
.bbj-quarter__t { font-weight:700; font-size:20px; color:var(--bbj-navy); }
.bbj-quarter__m { font-size:14px; color:var(--bbj-muted); }
.bbj-quarter__btn { margin-top:auto; }
.bbj-quarter__na { margin-top:auto; display:flex; justify-content:center; background:var(--bbj-cream); color:var(--bbj-muted); font-weight:600; font-size:15px; padding:13px 18px; border-radius:10px; }
.bbj-quarter .bbj-btn { padding:13px 18px; font-size:15px; }
.bbj-trust { display:flex; gap:14px; align-items:center; background:#fff; border-radius:16px; padding:18px 22px; flex:0 1 auto; }

/* Artikel */
.bbj-feat { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); background:#fff; border:1px solid var(--bbj-line); border-radius:24px; overflow:hidden; color:var(--bbj-ink); }
.bbj-feat:hover { border-color:var(--bbj-blue); color:var(--bbj-ink); }
.bbj-feat__img { min-height:280px; background:var(--bbj-blue-light); position:relative; overflow:hidden; }
.bbj-feat__img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bbj-feat__body { padding:40px; display:flex; flex-direction:column; gap:16px; justify-content:center; }
.bbj-feat__t { font-size:clamp(26px,2.8vw,34px); line-height:1.18; font-weight:700; letter-spacing:-.02em; color:var(--bbj-navy); text-wrap:balance; }
@media (max-width:480px) { .bbj-feat__body { padding:28px 22px; } }
.bbj-post { display:flex; flex-direction:column; gap:16px; color:var(--bbj-ink); }
.bbj-post:hover { color:var(--bbj-blue); }
.bbj-post__img { aspect-ratio:16/10; background:var(--bbj-blue-light); border-radius:18px; overflow:hidden; }
.bbj-post__img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.bbj-post:hover .bbj-post__img img { transform:scale(1.03); }
.bbj-post__t { font-weight:700; font-size:20px; line-height:1.3; color:var(--bbj-navy); text-wrap:pretty; }
.bbj-post:hover .bbj-post__t { color:var(--bbj-blue); }
.bbj-post__t--19 { font-size:19px; }
.bbj-post__ex { font-size:15px; line-height:1.6; color:var(--bbj-muted); text-wrap:pretty; }
.bbj-post__meta { font-size:14px; color:var(--bbj-muted); }
.bbj-post--14 { gap:14px; }
.bbj-pager { display:flex; justify-content:center; gap:8px; align-items:center; flex-wrap:wrap; }
.bbj-pager .page-numbers { min-width:44px; height:44px; padding:0 16px; border-radius:10px; border:1px solid var(--bbj-border); color:var(--bbj-ink); display:inline-flex; align-items:center; justify-content:center; font-weight:600; }
.bbj-pager a.page-numbers:hover { border-color:var(--bbj-blue); color:var(--bbj-blue); }
.bbj-pager .page-numbers.current { background:var(--bbj-blue); border-color:var(--bbj-blue); color:#fff; padding:0; }
.bbj-pager .page-numbers.dots { border:0; }

.bbj-art-head { background:var(--bbj-cream); }
.bbj-art-head__in { max-width:880px; margin:0 auto; padding:56px var(--bbj-gutter) 0; display:flex; flex-direction:column; gap:28px; }
.bbj-art-meta { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:20px 0 32px; }
.bbj-author { display:flex; gap:14px; align-items:center; }
.bbj-author__av { width:44px; height:44px; border-radius:50%; background:var(--bbj-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex:none; }
.bbj-share { display:flex; gap:8px; align-items:center; }
.bbj-share__btn { width:44px; height:44px; border-radius:50%; background:#fff; border:0; display:inline-flex; align-items:center; justify-content:center; }
.bbj-share__btn:hover { background:var(--bbj-blue-light); }
.bbj-share__copy { width:auto; padding:0 16px; border-radius:var(--bbj-r-pill); gap:8px; font:600 14px var(--bbj-font); color:var(--bbj-navy); }
.bbj-art-cover { background:linear-gradient(var(--bbj-cream) 50%, #fff 50%); }
.bbj-art-cover__img { aspect-ratio:16/8; border-radius:24px; overflow:hidden; background:var(--bbj-blue-light); }
.bbj-art-cover__img img { width:100%; height:100%; object-fit:cover; }
.bbj-tags { display:flex; gap:8px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--bbj-line); margin-top:16px; }

/* Isi artikel / halaman */
.bbj-prose { display:flex; flex-direction:column; gap:22px; font-size:18px; line-height:1.8; color:var(--bbj-body); }
.bbj-prose > * { margin:0; }
.bbj-prose p { text-wrap:pretty; }
.bbj-prose h2 { margin-top:16px; font-size:clamp(24px,2.4vw,28px); line-height:1.25; font-weight:700; letter-spacing:-.015em; color:var(--bbj-navy); }
.bbj-prose h3 { margin-top:8px; font-size:20px; line-height:1.3; font-weight:700; color:var(--bbj-navy); }
.bbj-prose a { font-weight:600; }
.bbj-prose strong { color:var(--bbj-ink); }
.bbj-prose ul, .bbj-prose ol { display:flex; flex-direction:column; gap:12px; padding-left:0; list-style:none; }
.bbj-prose ul li { position:relative; padding-left:20px; line-height:1.65; }
.bbj-prose ul li::before { content:""; position:absolute; left:0; top:12px; width:6px; height:6px; border-radius:50%; background:var(--bbj-blue); }
.bbj-prose ol { counter-reset:bbj; }
.bbj-prose ol li { position:relative; padding-left:32px; line-height:1.65; counter-increment:bbj; }
.bbj-prose ol li::before { content:counter(bbj, decimal-leading-zero); position:absolute; left:0; font-size:14px; font-weight:700; color:var(--bbj-red); }
.bbj-prose blockquote { margin:12px 0; padding:8px 0 8px 28px; border-left:3px solid var(--bbj-red); font-size:24px; line-height:1.45; font-weight:600; color:var(--bbj-navy); text-wrap:balance; }
.bbj-prose blockquote p { margin:0; }
.bbj-prose img { border-radius:16px; }
.bbj-prose figure figcaption { font-size:14px; color:var(--bbj-muted); margin-top:8px; }
.bbj-prose .bbj-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; }
.bbj-prose .bbj-cards > div { background:var(--bbj-cream); border-radius:16px; padding:22px 24px; display:flex; flex-direction:column; gap:8px; }
.bbj-prose .bbj-cards b { font-size:14px; font-weight:700; color:var(--bbj-red); }
.bbj-prose .bbj-cards strong { font-weight:700; font-size:17px; line-height:1.4; color:var(--bbj-navy); }
.bbj-prose .bbj-cards span { font-size:15px; line-height:1.6; color:var(--bbj-muted); }
.bbj-prose .bbj-note { background:var(--bbj-cream); border-radius:16px; padding:22px 24px; display:flex; flex-direction:column; gap:6px; font-size:16px; line-height:1.6; }
.bbj-prose .bbj-note strong { color:var(--bbj-navy); }
.bbj-prose--doc { gap:18px; font-size:17px; line-height:1.75; }
.bbj-prose--doc ul li { font-size:17px; }
.bbj-prose--doc section { display:flex; flex-direction:column; gap:18px; scroll-margin-top:110px; }

/* Kebijakan privasi: daftar isi + nomor bab */
.bbj-doc { display:flex; flex-wrap:wrap; gap:40px 80px; align-items:flex-start; }
.bbj-toc { flex:1 1 240px; max-width:300px; display:flex; flex-direction:column; gap:14px; }
.bbj-toc__h { font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--bbj-muted); }
.bbj-toc nav { display:flex; flex-direction:column; border-left:2px solid var(--bbj-line); }
.bbj-toc a { padding:9px 0 9px 18px; margin-left:-2px; border-left:2px solid transparent; font-size:15px; color:var(--bbj-body); display:flex; gap:10px; }
.bbj-toc a:hover, .bbj-toc a.is-on { color:var(--bbj-blue); border-left-color:var(--bbj-blue); }
.bbj-toc a span { color:var(--bbj-placeholder); font-weight:600; font-variant-numeric:tabular-nums; }
.bbj-doc__body { flex:3 1 560px; min-width:0; max-width:760px; display:flex; flex-direction:column; gap:56px; }
.bbj-doc__body.bbj-prose { gap:56px; }
.bbj-doc__body h2 { display:flex; gap:16px; align-items:baseline; font-size:clamp(24px,2.4vw,30px); line-height:1.2; font-weight:700; letter-spacing:-.015em; color:var(--bbj-navy); margin:0; }
.bbj-doc__num { font-size:16px; font-weight:600; color:var(--bbj-red); font-variant-numeric:tabular-nums; }
.bbj-doc__contact { border:1px solid var(--bbj-line); border-radius:16px; padding:24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:20px; }
.bbj-doc__contact > span { display:flex; flex-direction:column; gap:4px; min-width:0; }
.bbj-doc__contact small { font-size:14px; color:var(--bbj-muted); }
.bbj-doc__contact b, .bbj-doc__contact a { font-size:16px; font-weight:600; color:var(--bbj-ink); line-height:1.5; overflow-wrap:anywhere; }
.bbj-doc__contact a { color:var(--bbj-blue); }
@media (min-width:1000px) { .bbj-sticky { position:sticky; top:110px; } }
.bbj-updated { display:flex; gap:10px; align-items:center; font-size:14px; color:var(--bbj-muted); flex-wrap:wrap; }
.bbj-updated::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--bbj-blue); }
.bbj-updated strong { color:var(--bbj-ink); font-weight:600; }

/* Karier */
.bbj-job { background:#fff; border:1px solid transparent; border-radius:18px; padding:24px 28px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; color:var(--bbj-ink); }
.bbj-job:hover { border-color:var(--bbj-blue); color:var(--bbj-ink); }
.bbj-job__body { display:flex; flex-direction:column; gap:8px; flex:1 1 320px; min-width:0; }
.bbj-job__dept { font-size:13px; font-weight:600; color:var(--bbj-blue); }
.bbj-job__t { font-weight:700; font-size:20px; color:var(--bbj-navy); }
.bbj-job__meta { display:flex; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--bbj-muted); }
.bbj-job__meta span { display:inline-flex; gap:6px; align-items:center; }
.bbj-job__more { font-weight:600; font-size:15px; color:var(--bbj-blue); white-space:nowrap; }
.bbj-rec { display:flex; flex-direction:column; gap:10px; }
.bbj-rec__n { width:44px; height:44px; border-radius:50%; background:var(--bbj-blue-light); color:var(--bbj-navy); display:flex; align-items:center; justify-content:center; font-weight:700; }
.bbj-rec:first-child .bbj-rec__n { background:var(--bbj-blue); color:#fff; }
.bbj-rec__t { font-weight:700; font-size:17px; color:var(--bbj-navy); }
.bbj-alert { background:var(--bbj-cream); border-radius:20px; padding:28px 32px; display:flex; gap:16px; align-items:flex-start; }
.bbj-sidecard { background:#fff; border:1px solid var(--bbj-line); border-radius:20px; padding:12px 24px 24px; display:flex; flex-direction:column; }
.bbj-sidecard__row { display:flex; flex-direction:column; gap:4px; padding:16px 0; border-bottom:1px solid var(--bbj-line); }
.bbj-sidecard__row small { font-size:13px; color:var(--bbj-muted); }
.bbj-sidecard__row b { font-size:16px; font-weight:600; color:var(--bbj-ink); }
.bbj-sidebar { flex:1 1 280px; max-width:380px; display:flex; flex-direction:column; gap:16px; }
.bbj-sidebar--400 { flex-basis:300px; max-width:400px; }
.bbj-mainbody { flex:3 1 560px; min-width:0; max-width:760px; display:flex; flex-direction:column; gap:40px; }
.bbj-mainbody--wide { max-width:none; }
.bbj-backlink { font-weight:600; font-size:15px; color:var(--bbj-blue); padding-left:4px; }
.bbj-backlink:hover { color:var(--bbj-navy); }

/* Lelang */
.bbj-auc { background:#fff; border:1px solid var(--bbj-line); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; color:var(--bbj-ink); }
.bbj-auc:hover { border-color:var(--bbj-blue); color:var(--bbj-ink); }
.bbj-auc__img { aspect-ratio:16/10; position:relative; background:var(--bbj-blue-light); }
.bbj-auc__img img { width:100%; height:100%; object-fit:cover; }
.bbj-photo-ph { width:100%; height:100%; background:var(--bbj-blue-light); display:flex; align-items:center; justify-content:center; }
.bbj-photo-ph span { background:#fff; border-radius:var(--bbj-r-pill); padding:6px 14px; font-size:13px; font-weight:600; color:var(--bbj-muted); }
.bbj-auc__badge { position:absolute; left:16px; top:16px; font-size:12px; font-weight:700; padding:5px 12px; border-radius:var(--bbj-r-pill); background:var(--bbj-blue); color:#fff; }
.bbj-auc__badge.is-done, .bbj-status-badge.is-done { background:#fff; color:var(--bbj-muted); }
.bbj-status-badge { font-size:12px; font-weight:700; padding:5px 12px; border-radius:var(--bbj-r-pill); background:var(--bbj-blue); color:#fff; }
.bbj-auc__body { padding:24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.bbj-auc__top { display:flex; justify-content:space-between; gap:12px; }
.bbj-auc__code { color:var(--bbj-muted); font-size:12px; font-weight:500; }
.bbj-auc__t { font-weight:700; font-size:20px; color:var(--bbj-navy); }
.bbj-auc__loc { display:flex; gap:6px; align-items:center; font-size:14px; color:var(--bbj-muted); }
.bbj-auc__foot { margin-top:auto; padding-top:16px; border-top:1px solid var(--bbj-line); display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.bbj-auc__limit { display:flex; flex-direction:column; gap:2px; }
.bbj-auc__limit small { font-size:13px; color:var(--bbj-muted); }
.bbj-auc__limit strong { font-size:20px; font-weight:700; color:var(--bbj-blue); }
.bbj-auc__date { display:flex; gap:6px; align-items:center; font-size:14px; font-weight:500; color:var(--bbj-ink); }
.bbj-gallery { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:repeat(2,minmax(0,1fr)); gap:12px; aspect-ratio:16/9; border-radius:20px; overflow:hidden; }
.bbj-gallery > :first-child { grid-row:span 2; }
.bbj-gallery img { width:100%; height:100%; object-fit:cover; }
.bbj-gallery--1 { grid-template-columns:1fr; grid-template-rows:1fr; }
.bbj-pricecard { background:var(--bbj-navy); color:#fff; border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:20px; position:relative; overflow:hidden; }
.bbj-pricecard > * { position:relative; }
.bbj-pricecard small { font-size:14px; color:var(--bbj-blue-light); }
.bbj-pricecard__big { font-size:34px; font-weight:700; letter-spacing:-.02em; }
.bbj-pricecard__mid { font-size:20px; font-weight:700; }
.bbj-pricecard__when { background:rgba(255,255,255,.08); border-radius:14px; padding:16px 18px; display:flex; gap:12px; align-items:center; }

/* Simulasi kredit lengkap */
.bbj-result { background:var(--bbj-navy); color:#fff; border-radius:20px; padding:36px; display:flex; flex-direction:column; gap:28px; position:relative; overflow:hidden; }
.bbj-result > * { position:relative; }
.bbj-result__k { font-size:15px; color:var(--bbj-blue-light); }
.bbj-result__big { font-size:clamp(36px,4vw,48px); font-weight:700; letter-spacing:-.02em; color:#fff; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.bbj-stackbar { display:flex; height:12px; border-radius:var(--bbj-r-pill); overflow:hidden; background:rgba(255,255,255,.12); }
.bbj-stackbar__p { background:#fff; }
.bbj-stackbar__i { flex:1; background:#7FA3C9; }
.bbj-result__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.bbj-result__grid > div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.bbj-result__grid small { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--bbj-blue-light); }
.bbj-result__grid i { width:10px; height:10px; border-radius:50%; background:#fff; display:inline-block; }
.bbj-result__grid i.is-i { background:#7FA3C9; }
.bbj-result__grid strong { font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
@media (max-width:520px) { .bbj-result { padding:28px 22px; } .bbj-result__grid { grid-template-columns:minmax(0,1fr); } }
.bbj-mnote { font-size:14px; line-height:1.6; color:var(--bbj-muted); background:var(--bbj-row-alt); border-radius:12px; padding:16px 18px; }

/* Suku bunga */
.bbj-lps { background:var(--bbj-navy); color:#fff; border-radius:20px; padding:28px 32px; display:flex; flex-direction:column; gap:18px; position:relative; overflow:hidden; }
.bbj-lps > * { position:relative; }
.bbj-lps__big { font-size:40px; font-weight:700; letter-spacing:-.02em; }
.bbj-anchors { display:flex; gap:10px; flex-wrap:wrap; }
.bbj-anchors a { background:#fff; color:var(--bbj-navy); font-weight:600; font-size:15px; padding:12px 20px; border-radius:var(--bbj-r-pill); border:1px solid var(--bbj-border); white-space:nowrap; }
.bbj-anchors a:hover { border-color:var(--bbj-blue); color:var(--bbj-blue); }
.bbj-ratesec__side { display:flex; flex-direction:column; gap:16px; flex:1 1 300px; max-width:400px; }
.bbj-ratesec__main { display:flex; flex-direction:column; gap:14px; flex:2 1 520px; min-width:0; }

/* 404 */
.bbj-404 { padding:120px 0; }

/* Hormati preferensi gerak */
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }

/* Layar kecil */
@media (max-width:600px) {
  :root { --bbj-gutter:24px; --bbj-section-y:80px; }
  .bbj-hero__in { padding:56px var(--bbj-gutter) 104px; }
  .bbj-section--produk { padding:96px 0 80px; }
  .bbj-simsec__in { padding:72px var(--bbj-gutter); }
  .bbj-pcard { padding:28px; }
  .bbj-qa__item { padding:20px 22px; }
  .bbj-header__in { padding:12px var(--bbj-gutter); gap:12px; }
  .bbj-logo img { height:38px; }
  .bbj-util__in { padding:8px var(--bbj-gutter); font-size:12px; }
  .bbj-util__grp { gap:4px 14px; }
  .bbj-util__grp + .bbj-util__grp { display:none; }
  .bbj-deco-lime { width:150px; height:150px; right:-60px; bottom:-90px; }
  .bbj-deco-dot, .bbj-hero__dot { display:none; }
  .bbj-hero__lime { width:180px; height:180px; right:-70px; bottom:-80px; }
  .bbj-header__cta .bbj-btn { padding:11px 16px; }
}