/* Beranda baru (disetujui pemilik 27 Okt 2026). Diturunkan dari catatan/mockup_beranda_baru_20261026.html;
   sesudah ini disunting langsung di sini. Semua aturan dibatasi di bawah .bb supaya tidak bentrok dengan situs.css. */
.bb{--ink:#14304D;--text:#2B3A4A;--muted:#556575;--line:#DCE5EE;--canvas:#F6F8FB;
  --accent:#1570C8;--accent-strong:#0F5BA6;--accent-soft:#EAF3FC;--success:#1F6B42;--success-soft:#E6F4EC;--warn:#8A5A00;--warn-soft:#FFF4DC;
  --deep:#051C2C;--cyan:#00A9F4;
  --grad:radial-gradient(900px 520px at 88% -8%,rgba(0,169,244,.38),transparent 62%),linear-gradient(135deg,#051C2C 0%,#0B2E52 38%,#0F4C8A 74%,#1570C8 100%);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --r-s:8px;--r-m:12px;--r-l:16px;
  --sh-1:0 1px 2px rgba(20,48,77,.06);--sh-2:0 8px 24px rgba(20,48,77,.10);
  --t-fast:150ms;--t-base:250ms;--ease:cubic-bezier(.2,.7,.2,1);
  
  --fs-12:.75rem;--fs-14:.875rem;--fs-16:1rem;--fs-18:1.125rem;--fs-22:1.375rem;--fs-28:1.75rem;--fs-36:clamp(1.75rem,1.2rem + 2vw,2.25rem);--fs-48:clamp(2.25rem,1.4rem + 3.4vw,3rem);
  --bg:#fff;--bg-soft:#F6F8FB;--font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-family:var(--font);font-size:var(--fs-16);line-height:1.6;color:var(--text);background:var(--bg)}
.bb *{box-sizing:border-box}
.bb h1,.bb h2,.bb h3{color:var(--ink);margin:0 0 var(--s3);line-height:1.2;letter-spacing:-.01em}
.bb p{margin:0 0 var(--s4)}
.bb a{color:var(--accent)}
.bb a:focus-visible,.bb button:focus-visible,.bb summary:focus-visible{outline:3px solid #F5A623;outline-offset:2px}
.bb .wrap{max-width:1120px;margin:0 auto;padding:0 var(--s4)}
.bb .eyebrow{font-size:var(--fs-12);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s2);display:block}
.bb .sec{padding:var(--s8) 0}
.bb .sec-alt{background:var(--canvas)}
.bb .head{max-width:700px;margin:0 auto var(--s7);text-align:center}
.bb .head h2{font-size:var(--fs-36);font-weight:800}
.bb .head p{color:var(--muted);font-size:var(--fs-18)}
.bb .ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.bb .ic-lg{width:28px;height:28px}
.bb .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:var(--s3) var(--s5);border-radius:var(--r-m);border:1.5px solid transparent;font:inherit;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;text-align:center;transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.bb .btn-primary{background:var(--accent);color:#fff}
.bb .btn-primary:hover{background:var(--accent-strong)}
.bb .btn-secondary{background:var(--bg);color:var(--accent);border-color:var(--line)}
.bb .btn-secondary:hover{border-color:var(--accent);background:var(--accent-soft)}
.bb .btn-lg{min-height:52px;padding:var(--s4) var(--s6)}
.bb .btn-white{background:var(--bg);color:var(--accent-strong)}
.bb .btn-white:hover{background:var(--accent-soft)}
@media(max-width:820px){.bb .btn-nav{padding:var(--s3) var(--s4)}}
.bb .hero{background:var(--grad);color:#fff;padding:var(--s8) 0 calc(var(--s9) + var(--s6));overflow:hidden}
.bb .hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s7);align-items:center}
.bb .hero h1{color:#fff;font-size:var(--fs-48);font-weight:800;letter-spacing:-.02em}
.bb .hero p.sub{color:#D3E4F5;font-size:var(--fs-18);max-width:46ch}
.bb .hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s5)}
.bb .hero .note{color:#A9C3DC;font-size:var(--fs-14);margin-top:var(--s4);margin-bottom:0}
@media(max-width:900px){.bb .hero .wrap{grid-template-columns:1fr}
.bb .hero{padding:var(--s7) 0 calc(var(--s8) + var(--s6))}}
.bb .frame{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:0 18px 48px rgba(0,0,0,.28);overflow:hidden;color:var(--text)}
.bb .frame-top{display:flex;gap:6px;padding:var(--s3) var(--s4);background:var(--canvas);border-bottom:1px solid var(--line)}
.bb .frame-top i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.bb .mod{padding:var(--s4) var(--s5) var(--s5)}
.bb .mod .kick{font-size:var(--fs-12);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.bb .mod h3{font-size:var(--fs-18);margin:2px 0 var(--s3)}
.bb .prog{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:var(--s4)}
.bb .prog span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--cyan));border-radius:99px;animation:bb-prog 9s var(--ease) infinite}
.bb table.xl{width:100%;border-collapse:collapse;font-size:var(--fs-14)}
.bb table.xl td{border:1px solid var(--line);padding:6px 10px}
.bb table.xl td:first-child{background:var(--canvas);color:var(--muted);width:58%}
.bb table.xl td.v{text-align:right;font-variant-numeric:tabular-nums}
.bb .cell b{font-weight:600;color:var(--ink);display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0;animation:bb-type 9s steps(5) infinite}
.bb .cell.c2 b{animation-delay:.6s}
.bb .cell.sel{background:#FFF8E1;box-shadow:inset 0 0 0 2px #F5C542}
.bb .row-act{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.bb .chk{font-size:var(--fs-14);padding:8px 14px;border-radius:var(--r-s);background:var(--accent);color:#fff;font-weight:600;animation:bb-press 9s infinite}
.bb .okbadge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-14);font-weight:600;color:var(--success);background:var(--success-soft);padding:6px 12px;border-radius:999px;opacity:0;animation:bb-okb 9s infinite}
@keyframes bb-prog{0%{width:12%}45%{width:12%}70%,92%{width:50%}100%{width:12%}}
@keyframes bb-type{0%,8%{width:0}22%,100%{width:3.2em}}
@keyframes bb-press{0%,55%{transform:none}58%{transform:scale(.96)}62%,100%{transform:none}}
@keyframes bb-okb{0%,60%{opacity:0;transform:translateY(4px)}68%,92%{opacity:1;transform:none}100%{opacity:0}}
.bb .stats{margin-top:calc(var(--s8) * -1);position:relative;z-index:2}
.bb .stats .grid{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.bb .stat{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-2);padding:var(--s5);text-align:center}
.bb .stat strong{display:block;font-size:var(--fs-36);font-weight:800;color:var(--accent);line-height:1.1}
.bb .stat span{color:var(--muted);font-size:var(--fs-14)}
@media(max-width:620px){.bb .stats .grid{grid-template-columns:1fr}
.bb .stat{padding:var(--s4)}
.bb .stat strong{font-size:var(--fs-28)}}
.bb .grid{display:grid;gap:var(--s5)}
.bb .g4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.bb .g3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.bb .g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.bb .feat{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-l);background:var(--bg)}
.bb .icbox{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-m);background:var(--accent-soft);color:var(--accent);margin-bottom:var(--s4)}
.bb .feat h3{font-size:var(--fs-18)}
.bb .feat p{color:var(--muted);font-size:var(--fs-14);margin:0}
.bb .pro-tag{display:inline-block;margin-top:var(--s3);font-size:var(--fs-12);font-weight:700;padding:2px var(--s3);border-radius:999px;background:var(--warn-soft);color:var(--warn)}
.bb .vid{max-width:860px;margin:0 auto}
.bb .vid video{display:block;width:100%;aspect-ratio:16/9;background:#051C2C}
.bb .vid .cap{text-align:center;color:var(--muted);font-size:var(--fs-14);margin-top:var(--s3)}
.bb .tabs{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s2);margin-bottom:var(--s5);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.bb .tab{flex:none;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;min-height:44px;padding:0 var(--s5);font:inherit;font-weight:600;font-size:var(--fs-14);cursor:pointer;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
@media(min-width:900px){.bb .tabs{flex-wrap:wrap;overflow:visible}}
.bb .tab[aria-selected="true"]{background:var(--grad);color:#fff;border-color:transparent}
.bb .path{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:var(--s6);align-items:start;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s6);box-shadow:var(--sh-1)}
.bb .path h3{font-size:var(--fs-28);font-weight:800;margin-bottom:var(--s2)}
.bb .path .for{color:var(--muted);font-size:var(--fs-14)}
.bb .path .warn{margin-top:var(--s4);font-size:var(--fs-12);color:var(--muted);border-left:3px solid var(--line);padding-left:var(--s3)}
.bb .steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);counter-reset:s}
.bb .steps li{display:flex;align-items:center;gap:var(--s4);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s3) var(--s4);background:var(--canvas);counter-increment:s}
.bb .steps li::before{content:counter(s);flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-weight:700;font-size:var(--fs-14)}
.bb .steps li b{flex:1;color:var(--ink);font-size:var(--fs-16)}
.bb .steps li.t{background:var(--bg)}
@media(max-width:820px){.bb .path{grid-template-columns:1fr;padding:var(--s5)}}
.bb .card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.bb .card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.bb .cover{aspect-ratio:16/8;background:var(--deep);overflow:hidden}
.bb .cover svg{display:block;width:100%;height:100%}
.bb .card .body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.bb .card h3{font-size:var(--fs-22);margin:0}
.bb .card p{margin:0;color:var(--muted);font-size:var(--fs-14)}
.bb .chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.bb .chip{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-12);font-weight:600;padding:var(--s1) var(--s3);border-radius:999px;background:var(--canvas);color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.bb .chip .ic{width:14px;height:14px}
.bb .chip.ok{background:var(--success-soft);color:var(--success);border-color:transparent}
.bb .chip.chip-warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.bb .meta{display:flex;flex-wrap:wrap;gap:var(--s4);font-size:var(--fs-12);color:var(--muted)}
.bb .meta span{display:inline-flex;align-items:center;gap:6px}
.bb .meta .ic{width:16px;height:16px}
.bb .card .push{margin-top:auto;padding-top:var(--s2)}
.bb .soon{margin-top:var(--s6);text-align:center}
.bb .soon .chips{justify-content:center;margin-top:var(--s3)}
.bb .cover .dash{stroke-dasharray:420;stroke-dashoffset:420;animation:bb-draw 7s var(--ease) infinite}
.bb .cover .dash2{stroke-dasharray:420;stroke-dashoffset:420;animation:bb-draw 7s var(--ease) infinite .5s}
.bb .cover .dot{animation:bb-pulse 3.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.bb .cover .hl{animation:bb-cellmove 8s var(--ease) infinite}
.bb .cover .ring{transform-box:fill-box;transform-origin:center;animation:bb-breathe 6s ease-in-out infinite}
.bb .cover .ring.r2{animation-delay:1s}
.bb .cover .ring.r3{animation-delay:2s}
.bb .cover .orbit{transform-origin:200px 100px;animation:bb-spin 14s linear infinite}
.bb .cover .nd{transform-box:fill-box;transform-origin:center;animation:bb-pulse 4s ease-in-out infinite}
.bb .cover .nd.n2{animation-delay:.8s}
.bb .cover .nd.n3{animation-delay:1.6s}
.bb .cover .nd.n4{animation-delay:2.4s}
.bb .cover .link{stroke-dasharray:160;stroke-dashoffset:160;animation:bb-draw2 6s var(--ease) infinite}
@keyframes bb-draw{0%{stroke-dashoffset:420}55%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:-420}}
@keyframes bb-draw2{0%{stroke-dashoffset:160}50%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:-160}}
@keyframes bb-pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}
@keyframes bb-cellmove{0%,12%{transform:translate(0,0)}25%,37%{transform:translate(70px,0)}50%,62%{transform:translate(70px,30px)}75%,87%{transform:translate(-35px,30px)}100%{transform:translate(0,0)}}
@keyframes bb-breathe{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.8;transform:scale(1.06)}}
@keyframes bb-spin{to{transform:rotate(360deg)}}
.bb .who{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-l);background:var(--bg)}
.bb .who .icbox{margin:0;flex:none}
.bb .who h3{font-size:var(--fs-16);margin:0 0 4px}
.bb .who p{margin:0;color:var(--muted);font-size:var(--fs-14)}
.bb .who.cv{border-color:var(--accent);background:linear-gradient(180deg,#fff,var(--accent-soft))}
.bb .quote{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);margin:0}
.bb .quote blockquote{margin:0;font-size:var(--fs-14);color:var(--text)}
.bb .quote figcaption{margin-top:auto;font-size:var(--fs-14)}
.bb .quote cite{font-style:normal;font-weight:700;color:var(--ink);display:block}
.bb .quote small{color:var(--muted)}
.bb .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s4);max-width:1000px;margin:0 auto}
.bb .plan2{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s6) var(--s5);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s2)}
.bb .plan2 h3{font-size:var(--fs-16);font-weight:700;letter-spacing:.02em;margin:0;color:var(--muted);text-transform:uppercase}
.bb .plan2 .pr{font-size:var(--fs-36);font-weight:800;color:var(--ink);line-height:1.1;margin:var(--s3) 0 0}
.bb .plan2 .per{color:var(--muted);font-size:var(--fs-14);margin:0 0 var(--s4)}
.bb .plan2 .btn{margin-top:auto;width:100%}
.bb .plan2 ul{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;gap:var(--s2);text-align:left;width:100%}
.bb .plan2 li{display:flex;gap:var(--s2);font-size:var(--fs-14);align-items:flex-start}
.bb .plan2 li .ic{color:var(--success);margin-top:2px;width:18px;height:18px}
.bb .plan2.best{border:2px solid var(--accent);box-shadow:var(--sh-2)}
.bb .plan2.best .pr{color:var(--accent)}
.bb .ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:var(--fs-12);font-weight:700;padding:4px var(--s4);border-radius:999px;white-space:nowrap}
.bb .incl{max-width:1000px;margin:var(--s5) auto 0;padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-l);background:var(--canvas)}
.bb .incl-t{display:block;text-align:center;font-weight:700;color:var(--ink);margin-bottom:var(--s4)}
.bb .incl ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s3)}
.bb .incl li{display:flex;gap:var(--s2);font-size:var(--fs-14);align-items:flex-start}
.bb .incl li .ic{color:var(--success);margin-top:2px;width:18px;height:18px}
.bb .plan-note{text-align:center;color:var(--muted);font-size:var(--fs-14);margin:var(--s4) 0 0}
.bb .plan-note a{display:inline-flex;align-items:center;min-height:44px}
.bb .logos{padding:var(--s7) 0 var(--s3)}
.bb .logos h2{text-align:center;font-size:var(--fs-18);font-weight:700;color:var(--muted);margin:0 0 var(--s5);letter-spacing:0}
.bb .logo-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);margin-bottom:var(--s3)}
.bb .logo-slot{display:inline-flex;align-items:center;justify-content:center;min-width:160px;height:56px;padding:0 var(--s5);border:1px dashed #B8C7D6;border-radius:var(--r-m);color:#7C8D9E;font-weight:700;font-size:var(--fs-14);filter:grayscale(1);background:var(--bg)}
.bb .logo-tag{display:block;text-align:center;font-size:var(--fs-12);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7C8D9E;margin:var(--s4) 0 var(--s3)}
.bb .logo-note{text-align:center;color:#7C8D9E;font-size:var(--fs-12);margin:var(--s4) 0 0}
.bb .lg-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s5) var(--s6);margin-bottom:var(--s3)}
.bb .lg-item{display:flex;align-items:center;justify-content:center;width:150px;height:52px}
.bb .lg-item.sq{width:64px;height:64px}
.bb .lg-item.wide{width:210px}
.bb .lg-item img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
@media(max-width:620px){.bb .lg-track .lg-item{margin:0 var(--s4)}
.bb .lg-row{gap:var(--s4) var(--s5)}
.bb .lg-item{width:112px;height:44px}
.bb .lg-item.sq{width:52px;height:52px}
.bb .lg-item.wide{width:150px}}
.bb .lg-marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);margin-bottom:var(--s3)}
.bb .lg-track{display:flex;align-items:center;width:max-content;animation:bb-lgmove var(--dur,40s) linear infinite;will-change:transform}
.bb .lg-track .lg-item{margin:0 var(--s5);flex:none}
.bb .logos:hover .lg-track, .bb .logos:focus-within .lg-track, .bb .logos:active .lg-track{animation-play-state:paused}
@keyframes bb-lgmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bb .lg-marq{-webkit-mask-image:none;mask-image:none}
.bb .lg-track{animation:none!important;width:auto;flex-wrap:wrap;justify-content:center}
.bb .lg-track [aria-hidden="true"]{display:none}}
.bb .plan{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);position:relative}
.bb .plan.pro{border:2px solid var(--accent);box-shadow:var(--sh-2)}
.bb .plan .badge-ic{position:absolute;right:var(--s5);top:var(--s5);width:48px;height:48px;border-radius:var(--r-m);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.bb .plan h3{font-size:var(--fs-22);margin:0;padding-right:64px}
.bb .price{font-size:var(--fs-36);font-weight:800;color:var(--accent);line-height:1.1;margin:var(--s2) 0 0}
.bb .price small{display:block;font-size:var(--fs-16);font-weight:600;color:var(--muted);margin-top:2px}
.bb .plan ul{list-style:none;margin:var(--s2) 0 var(--s3);padding:0;display:grid;gap:var(--s3)}
.bb .plan li{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--fs-14)}
.bb .plan li .ic{color:var(--success);margin-top:2px}
.bb .plan .push{margin-top:auto}
.bb .plan .small{font-size:var(--fs-14);color:var(--muted);margin:var(--s3) 0 0}
.bb .plan .small a{display:inline-flex;align-items:center;min-height:44px}
.bb .vsvid{max-width:860px;margin:var(--s6) auto 0}
.bb .vsvid details{border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg)}
.bb .vsvid summary{cursor:pointer;font-weight:600;color:var(--ink);padding:var(--s4) var(--s5);min-height:52px;display:flex;align-items:center;gap:var(--s3);list-style:none}
.bb .vsvid summary::-webkit-details-marker{display:none}
.bb .vsvid summary .ic{color:var(--accent)}
.bb .vsvid .in{padding:0 var(--s5) var(--s5)}
.bb .vsvid video{display:block;width:100%;aspect-ratio:16/9;background:#051C2C;border-radius:var(--r-m)}
.bb .faq{max-width:760px;margin:0 auto;display:grid;gap:var(--s3)}
.bb .faq details{border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg)}
.bb .faq summary{cursor:pointer;font-weight:600;color:var(--ink);padding:var(--s4) var(--s5);min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);list-style:none}
.bb .faq summary::-webkit-details-marker{display:none}
.bb .faq summary::after{content:"+";font-size:1.4rem;color:var(--accent);line-height:1}
.bb .faq details[open] summary::after{content:"\2212"}
.bb .faq details p{padding:0 var(--s5) var(--s4);margin:0;color:var(--muted)}
.bb .final{background:var(--grad);color:#fff;text-align:center;padding:var(--s8) 0}
.bb .final h2{color:#fff;font-size:var(--fs-36);font-weight:800}
.bb .final p{color:#D3E4F5;font-size:var(--fs-18)}
@media (prefers-reduced-motion:reduce){.bb .prog span{width:50%}
.bb .cell b{width:3.2em}
.bb .okbadge{opacity:1}
.bb .cover .dash, .bb .cover .dash2, .bb .cover .link{stroke-dashoffset:0}}
/* hiasan tambahan di situs */
.bb .chip{text-decoration:none}
.bb a.chip:hover{border-color:var(--accent);color:var(--accent)}
.bb .steps li b a{color:var(--ink);text-decoration:none}
.bb .steps li b a:hover{text-decoration:underline;color:var(--accent)}
.bb .path[hidden]{display:none}
.bb .karier-ajak{margin-top:var(--s4);font-size:var(--fs-14)}
.bb .plan-note a{color:var(--accent)}
.bb video{max-width:100%}
/* mode gelap */
html[data-tema="gelap"] .bb{--bg:#0B0C0F;--canvas:#111317;--line:#2A2E36;--ink:#EEF1F5;--text:#E4E7EB;--muted:#A8AEB9;--accent-soft:#131E2B;--success-soft:#12301F;--success:#6FD6A0;--warn-soft:#3A2D0B;--warn:#F2C46B;--sh-1:0 1px 2px rgba(0,0,0,.5);--sh-2:0 8px 24px rgba(0,0,0,.5)}
html[data-tema="gelap"] .bb a:not(.btn){color:#7CBDF5}
html[data-tema="gelap"] .bb .steps li b a{color:var(--ink)}
html[data-tema="gelap"] .bb .logos{background:#F6F8FB;--muted:#556575}
html[data-tema="gelap"] .bb .logos h2{color:#556575}
html[data-tema="gelap"] .bb .frame{background:#fff;--text:#2B3A4A;--ink:#14304D;--muted:#556575;--line:#DCE5EE;--canvas:#F6F8FB;--bg:#fff}
html[data-tema="gelap"] .bb .plan2.best .pr{color:#7CBDF5}
/* penyesuaian dengan header situs (header transparan di atas hero) */
.bb .hero{margin-top:calc(var(--tinggi-header,68px) * -1);padding:calc(var(--tinggi-header,68px) + var(--s7)) 0 calc(var(--s9) + var(--s6))}
.bb .hero h1{max-width:none}
.bb .card h3 a{color:inherit;text-decoration:none}
.bb .card h3 a:hover{color:var(--accent)}
@media(max-width:900px){.bb .hero{padding:calc(var(--tinggi-header,68px) + var(--s6)) 0 calc(var(--s8) + var(--s6))}}
/* kartu kelas memakai kelas .kelas-kartu (dipakai uji dan halaman lain); netralkan gaya lamanya */
.bb .kelas-kartu,.bb .kelas-kartu-utama{padding:0;gap:0;align-items:stretch;border:1px solid var(--line);box-shadow:var(--sh-1);border-radius:var(--r-l);background:var(--bg)}
.bb .kelas-kartu:hover{box-shadow:var(--sh-2)}
.bb .kelas-kartu h3{margin:0;font-size:var(--fs-22);overflow-wrap:normal}
.bb .kelas-kartu p{margin:0;color:var(--muted)}
.bb .kelas-kartu .btn{margin-top:0}
html[data-tema="gelap"] .bb .kelas-kartu,html[data-tema="gelap"] .bb .kelas-kartu-utama{background:var(--bg);border-color:var(--line)}
html[data-tema="gelap"] .bb .kelas-kartu h3 a,html[data-tema="gelap"] .bb .kelas-tautan{color:var(--ink)}
html[data-tema="gelap"] .bb .kelas-kartu p{color:var(--muted)}
.bb .lg-marq.d42{--dur:42s}
.bb .lg-marq.d29{--dur:29s}
.bb .per-up{margin-top:calc(var(--s4) * -1)}
.bb .soon-t{color:var(--muted)}
.bb .btn-blok{width:100%}
.bb .wrap{max-width:calc(var(--lebar, 1120px) + var(--gutter, 16px) * 2);padding:0 var(--gutter, 16px)}