/* =========================================================
   IIPE 2027 - Halaman B2B
   Dimuat setelah bottom.css (badge, judul pixel, tombol pixel, np-card, np-grid).
   Hero biru, isi checker krem, panel kontak ungu (seperti CTA).
   ========================================================= */

/* ---------------- HERO (biru) ---------------- */
.b2-hero {
  --t: min(7vw, 100px);
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(40px, 6vw, 96px) 6vw calc(var(--t) + clamp(36px, 5vw, 72px));
  background:
    linear-gradient(90deg, #52BEE6 50%, transparent 50%) left bottom / calc(var(--t) * 2) var(--t) repeat-x,
    #2FA8D6;
}
.b2-hero .badge { margin-bottom: 18px; }
.b2-hero .px-title { --oc: #1B7FA3; --pv: .4vw; --pmax: 5px; max-width: 12em; margin: 0 auto; }
.b2-sub {
  max-width: 640px; margin: 22px auto 0;
  font: 400 clamp(16px, 1.5vw, 20px)/1.6 'Funnel Display', system-ui, sans-serif; color: #FFFFDA;
}
.b2-prop { position: absolute; bottom: calc(var(--t) - 2px); width: clamp(64px, 10vw, 150px); pointer-events: none; }
.b2-prop.l { left: 6%; }
.b2-prop.r { right: 6%; }
.b2-prop img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.b2-prop .coin { position: absolute; left: 50%; top: 0; width: 48%; transform: translate(-50%, -58%); animation: bBob 2.4s steps(4) infinite; }
.b2-prop.r .coin { animation-delay: -1.2s; }

/* ---------------- BAR BAHASA ---------------- */
.b2-lang {
  display: flex; justify-content: center; gap: 12px;
  padding: clamp(18px, 2.4vw, 32px) 5vw;
  background: #FFFFDA; border-bottom: 4px solid #4B28A1;
}
.b2-tab {
  --bd: #3B2290; --bg: #FFFFDA; --bgd: #C9C0F5; --tx: #5B3CC4;
  font-size: clamp(18px, 1.8vw, 24px); padding: .5em 1.1em .7em;
  border: 0; cursor: pointer; white-space: nowrap;
}
.b2-tab::after { content: none; }
.b2-tab.active { --bd: #C2F08A; --bg: #44C27B; --bgd: #009880; --tx: #FFFFDA; }

/* bahasa: hanya blok yang cocok yang tampil */
[lang-content] { display: none; }
[lang-content].active { display: block; }
span[lang-content].active { display: inline; }

/* ---------------- ISI (checker krem) ---------------- */
.b2-main {
  --tile: min(5.6vw, 105px);
  padding: clamp(40px, 6vw, 96px) 5vw clamp(56px, 8vw, 120px);
  background: conic-gradient(#FFF3AE 25%, #FFFFDA 0 50%, #FFF3AE 0 75%, #FFFFDA 0)
              0 0 / calc(var(--tile) * 2) calc(var(--tile) * 2);
}
.b2-inner { max-width: 1100px; margin: 0 auto; }
.b2-block { margin: 0 0 clamp(44px, 6vw, 84px); }
.b2-block:last-child { margin-bottom: 0; }
.b2-head { text-align: center; margin: 0 0 clamp(22px, 3vw, 40px); }
.b2-head .px-title { --oc: #4B28A1; --pv: .25vw; --pmax: 3px; }
.b2-head p {
  max-width: 560px; margin: 14px auto 0;
  font: 400 clamp(15px, 1.4vw, 18px)/1.5 'Funnel Display', system-ui, sans-serif; color: #5B3CC4;
}
.b2-head.left { text-align: left; }
.b2-head.left p { margin-left: 0; }

/* ---------------- KARTU "KENAPA" (kotak pixel) ---------------- */
.b2-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.b2-card {
  --o: #4B28A1; --od: #3B2290; --f: #fff;
  position: relative; isolation: isolate;
  background: linear-gradient(var(--o) 0 calc(100% - 6px), var(--od) 0);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px),
                     calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px),
                     0 calc(100% - 6px), 0 6px, 6px 6px);
}
.b2-card::before {
  content: ""; position: absolute; inset: 4px 4px 10px; z-index: -1; background: var(--f);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px),
                     calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px),
                     0 calc(100% - 4px), 0 4px, 4px 4px);
}
.b2-why-item { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 34px; }
.b2-ico {
  display: grid; place-items: center; width: 52px; aspect-ratio: 1; margin-bottom: 4px;
  background: #44C27B; border: 3px solid #009880; border-bottom-width: 6px;
}
.b2-ico svg { width: 26px; height: 26px; stroke: #FFFFDA; fill: none; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.b2-why-item h3 { margin: 0; font: 400 clamp(26px, 2.4vw, 32px)/1 var(--px-font); letter-spacing: .05em; text-transform: uppercase; color: #4B28A1; }
.b2-why-item p { margin: 0; font: 400 clamp(15px, 1.3vw, 17px)/1.55 'Funnel Display', system-ui, sans-serif; color: #2A1670; }

/* ---------------- TRACK RECORD ---------------- */
.b2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 28px); }
/* 1 berita saja: jangan terlalu lebar, taruh di tengah */
.b2-grid:has(> :only-child) { max-width: 560px; margin: 0 auto; }
.b2-state { grid-column: 1 / -1; padding: 32px 16px; text-align: center; font: 400 26px/1.2 var(--px-font); letter-spacing: .05em; color: #5B3CC4; border: 4px dashed #B9A8F5; border-radius: 16px; }

/* ---------------- PANEL KONTAK (ungu, seperti CTA) ---------------- */
.b2-contact {
  --t: min(7vw, 100px);
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(48px, 7vw, 110px) 6vw calc(var(--t) + clamp(28px, 4vw, 56px));
  background:
    linear-gradient(90deg, #7A62E8 50%, transparent 50%) left bottom / calc(var(--t) * 2) var(--t) repeat-x,
    #6741D2;
}
.b2-contact .px-title { --oc: #3B2290; --pv: .3vw; --pmax: 4px; max-width: 14em; margin: 0 auto; }
.b2-contact-sub {
  max-width: 560px; margin: 22px auto 0;
  font: 400 clamp(16px, 1.5vw, 20px)/1.5 'Funnel Display', system-ui, sans-serif; color: #FFFFDA;
}
.b2-contact-btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 28px clamp(24px, 4vw, 56px); margin-top: clamp(24px, 3vw, 40px); }
.b2-contact-item { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.b2-contact-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 0; font: 400 clamp(22px, 2vw, 28px)/1.2 var(--px-font); letter-spacing: .05em; color: #FFFFDA; overflow-wrap: anywhere; }
.b2-contact .cta-coin.l { left: 8%;  top: 18%; }
.b2-contact .cta-coin.r { right: 9%; top: 38%; }

@media (prefers-reduced-motion: reduce) { .b2-prop .coin { animation: none; } }

/* ---------------- MOBILE ---------------- */
@media (max-width: 720px) {
  .b2-hero { --t: 12vw; }
  .b2-hero { padding-bottom: calc(var(--t) + 24vw + 16px); }
  .b2-prop { width: 20vw; }
  .b2-prop.l { left: 3%; }
  .b2-prop.r { right: 3%; }
  .b2-main { --tile: 12vw; }
  .b2-why { grid-template-columns: 1fr; }
  .b2-head.left { text-align: center; }
  .b2-head.left p { margin-left: auto; }
  .b2-contact { --t: 12vw; }
  .b2-contact .cta-coin.l { left: 5%; top: 8%; }
  .b2-contact .cta-coin.r { right: 5%; top: 6%; }
}