/* =====================================================================
   BINGXUE V3 — core (gaya CHAGEE)
   Token, reset ber-scope, komponen bersama (judul, teks, tombol pill, bingkai foto),
   animasi muncul, dan pengaman container Elementor.
   Semua selector di-scope ke .bx3 supaya tidak mengubah halaman lama/v2
   dan tidak terganggu CSS tema lama.

   Sistem huruf: SATU keluarga (Satoshi), DUA ketebalan (400, 700), EMPAT ukuran:
   --bx3-fs-h (judul section), --bx3-fs-body (paragraf), --bx3-fs-sm (menu, tombol, nama kartu), --bx3-fs-xs (footer, meta).
   ===================================================================== */

/* ---------- 0. Token ---------- */
.bx3{
  --bx3-orange:#FF6600;
  --bx3-choc:#643B22;
  --bx3-cream:#FEF4E5;
  --bx3-sand:#EDD8B0;
  --bx3-white:#FFFFFF;

  --bx3-ink:var(--bx3-choc);           /* judul */
  --bx3-ink-soft:#7A5A45;              /* teks, kontras 6,2:1 di putih */
  --bx3-line:rgba(100,59,34,.14);
  --bx3-line-btn:rgba(100,59,34,.3);
  --bx3-track:#ECE5DE;

  --bx3-font:"Satoshi","Helvetica Neue",Helvetica,Arial,sans-serif;
  --bx3-fs-h:clamp(1.75rem,2.3vw,2.75rem);   /* 28 → 44px, semua judul section */
  --bx3-fs-body:clamp(1rem,1.05vw,1.25rem);  /* 16 → 20px, semua paragraf */
  --bx3-fs-sm:.875rem;                       /* 14px: menu, tombol, nama kartu */
  --bx3-fs-xs:.75rem;                        /* 12px: footer, meta */
  --bx3-lh-body:2.4;

  --bx3-pad-x:clamp(20px,5.2vw,100px);       /* tepi isi section */
  --bx3-wrap-x:clamp(20px,8.6vw,165px);      /* tepi nav & footer */
  --bx3-sec-y:clamp(80px,9.4vw,180px);       /* ruang atas/bawah section */
  --bx3-full:max(520px,49vw);                /* tinggi Split & Banner */
  --bx3-nav-h:72px;
  --bx3-r:14px;                              /* sudut kartu */

  --bx3-t:300ms;
  --bx3-ease:cubic-bezier(.25,.6,.3,1);

  position:relative;
  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  font-family:var(--bx3-font);
  font-size:var(--bx3-fs-body);
  font-weight:400;
  font-style:normal;
  line-height:var(--bx3-lh-body);
  letter-spacing:normal;
  text-align:left;
  text-transform:none;
  color:var(--bx3-ink-soft);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@media (max-width:767px){.bx3{--bx3-lh-body:2;--bx3-nav-h:60px;--bx3-wrap-x:20px}}

/* ---------- 1. Reset ber-scope (menetralkan CSS tema & Elementor Kit di dalam widget v3) ----------
   Spesifisitas reset 0,2,0 (":where(...)" = 0, ":not(.bx3-n)" = 1 kelas):
   - lebih kuat dari aturan tema/Kit seperti "h2", ".elementor-kit-5 h2" (0,1,1)
   - sama dengan komponen ".bx3 .bx3-..." (0,2,0) yang dimuat sesudahnya, jadi komponen tetap menang.
   Link: reset 0,3,1 → link berkelas ditulis ".bx3 a.bx3-x[href]" (0,3,1) di file yang dimuat sesudahnya. */
.bx3,.bx3 *,.bx3 *::before,.bx3 *::after{box-sizing:border-box}
.bx3 :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,li,dl,dd,picture,article,aside,nav,header,footer,section,time,address):not(.bx3-n){
  margin:0;padding:0;border:0;background:none;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-align:inherit;
}
.bx3 :where(ul,ol):not(.bx3-n){list-style:none}
.bx3 :where(li)::marker{content:none}
.bx3 :where(img,video):not(.bx3-n){display:block;max-width:100%;height:auto;border:0;border-radius:0;box-shadow:none}
.bx3 :where(svg){display:block;flex:none}
.bx3 a[href]:is(:link,:visited,:hover,:focus,:active){color:inherit;font-family:inherit;text-decoration:none;background-color:transparent;box-shadow:none}
.bx3 button[type="button"]{
  -webkit-appearance:none;appearance:none;
  margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;text-decoration:none;
  white-space:normal;min-height:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.bx3 button[type="button"]:is(:hover,:focus,:active){background-color:transparent;color:inherit;border-color:currentColor;box-shadow:none;text-decoration:none}
.bx3 :focus{outline:none}
.bx3 :focus-visible{outline:2px solid var(--bx3-orange);outline-offset:3px}
.bx3 [hidden]{display:none!important}
.bx3 ::selection{background:var(--bx3-orange);color:var(--bx3-white)}
.bx3 .bx3-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 2. Judul, teks, tombol (dipakai semua section) ---------- */
.bx3 .bx3-title{font-family:var(--bx3-font);font-size:var(--bx3-fs-h);font-weight:700;line-height:1.15;letter-spacing:.01em;text-transform:uppercase;color:var(--bx3-ink);overflow-wrap:break-word}
.bx3 .bx3-text{margin-top:clamp(20px,2.6vw,48px);max-width:28em;font-size:var(--bx3-fs-body);line-height:var(--bx3-lh-body);color:var(--bx3-ink-soft);white-space:pre-line}

.bx3 a.bx3-btn[href]{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:clamp(28px,2.8vw,52px);padding:.8em 1.6em;
  border:1px solid var(--bx3-line-btn);border-radius:999px;
  font-family:var(--bx3-font);font-size:var(--bx3-fs-sm);font-weight:400;line-height:1;letter-spacing:0;text-transform:none;
  color:var(--bx3-ink-soft);background-color:transparent;white-space:nowrap;
  transition:background-color var(--bx3-t) var(--bx3-ease),border-color var(--bx3-t) var(--bx3-ease),color var(--bx3-t) var(--bx3-ease);
}
.bx3 a.bx3-btn[href]:is(:hover,:focus-visible){background-color:var(--bx3-choc);border-color:var(--bx3-choc);color:var(--bx3-white)}
.bx3 a.bx3-btn--light[href]{border-color:rgba(255,255,255,.85);color:var(--bx3-white)}
.bx3 a.bx3-btn--light[href]:is(:hover,:focus-visible){background-color:var(--bx3-white);border-color:var(--bx3-white);color:var(--bx3-choc)}

/* Tombol saring (kategori artikel, lokasi lowongan) */
.bx3 .bx3-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.bx3 a.bx3-chip[href],.bx3 button.bx3-chip{display:inline-flex;align-items:center;gap:.5em;padding:.75em 1.4em;border:1px solid var(--bx3-line-btn);border-radius:999px;font-family:var(--bx3-font);font-size:var(--bx3-fs-sm);font-weight:400;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;color:var(--bx3-ink-soft);background-color:transparent;transition:background-color var(--bx3-t) var(--bx3-ease),border-color var(--bx3-t) var(--bx3-ease),color var(--bx3-t) var(--bx3-ease)}
.bx3 a.bx3-chip[href]:is(:hover,:focus-visible),.bx3 button.bx3-chip:is(:hover,:focus-visible){border-color:var(--bx3-choc);color:var(--bx3-choc);background-color:transparent}
.bx3 a.bx3-chip[href][aria-current="page"],.bx3 button.bx3-chip[aria-pressed="true"],.bx3 button.bx3-chip[aria-pressed="true"]:is(:hover,:focus-visible){background-color:var(--bx3-choc);border-color:var(--bx3-choc);color:var(--bx3-white)}
.bx3 .bx3-chip__n{opacity:.6}
@media (max-width:767px){
  .bx3 .bx3-chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--bx3-pad-x) * -1);padding:0 var(--bx3-pad-x)}
  .bx3 .bx3-chips::-webkit-scrollbar{display:none}
  .bx3 a.bx3-chip[href],.bx3 button.bx3-chip{flex:0 0 auto}
}

/* Bingkai foto: warna pasir terlihat selama foto dimuat / bila foto gagal; fokus lewat --bx3-fp */
.bx3 .bx3-img{position:relative;overflow:hidden;margin:0;background:var(--bx3-sand)}
.bx3 .bx3-img>img,.bx3 .bx3-img>video,.bx3 .bx3-img>picture>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--bx3-fp,50% 50%)}
.bx3 .bx3-img>picture{position:absolute;inset:0;display:block}
.bx3 .bx3-img img.is-broken{opacity:0}

/* Catatan khusus editor Elementor */
.bx3 .bx3-note{position:relative;z-index:2;margin:0;padding:10px 14px;background:#fff3cd;color:#5c4400;font-size:13px;line-height:1.4;text-transform:none;letter-spacing:0}
.bx3.bx3-empty{padding:48px 24px;background:var(--bx3-cream);color:var(--bx3-choc);text-align:center;font-size:15px;line-height:1.5}

/* Latar halaman putih di halaman yang memakai widget v3 (mis. saat overscroll) */
body:has(.bx3){background-color:#FFFFFF}

/* ---------- 3. Muncul saat scroll: fade-up halus, sekali (aktif hanya bila JS v3 jalan: .bx3-js di <html>) ---------- */
.bx3-js .bx3 [data-bx3-r]{opacity:0;transform:translate3d(0,24px,0);transition:opacity .9s var(--bx3-ease),transform .9s var(--bx3-ease);transition-delay:var(--bx3-d,0ms)}
.bx3-js .bx3 [data-bx3-r="fade"]{transform:none}
.bx3-js .bx3 [data-bx3-r].is-in{opacity:1;transform:none}

/* ---------- 4. Pengaman Elementor: widget v3 selalu selebar layar, tanpa padding/gap bawaan ---------- */
.elementor-element[class*="elementor-widget-bx3-"]{width:100%;max-width:100%;margin:0!important;padding:0!important}
.elementor-element[class*="elementor-widget-bx3-"]>.elementor-widget-container{margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important}
.e-con:has(>[class*="elementor-widget-bx3-"]:only-child),
.e-con:has(>.e-con-inner>[class*="elementor-widget-bx3-"]:only-child){
  --padding-top:0px!important;--padding-right:0px!important;--padding-bottom:0px!important;--padding-left:0px!important;
  --gap:0px!important;--row-gap:0px!important;--column-gap:0px!important;
  --content-width:100%!important;--width:100%!important;
  padding:0!important;max-width:100%!important;
}
.e-con-inner:has(>[class*="elementor-widget-bx3-"]:only-child){max-width:100%!important;width:100%!important;padding:0!important;gap:0!important}
.elementor-widget-wrap:has(>[class*="elementor-widget-bx3-"]:only-child){padding:0!important}
.elementor-section:has(.elementor-widget-wrap>[class*="elementor-widget-bx3-"]:only-child)>.elementor-container{max-width:100%!important}

/* ---------- 5. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .bx3-js .bx3 [data-bx3-r]{opacity:1!important;transform:none!important;transition:none!important}
}