/* =====================================================================
   BINGXUE V2 — core
   Token warna/tipografi, reset ber-scope, komponen bersama, animasi reveal,
   dan pengaman container Elementor. Semua selector di-scope ke .bx-v2
   supaya tidak mengubah halaman lama, dan tidak terganggu CSS tema lama.
   ===================================================================== */

/* ---------- 0. Token ---------- */
.bx-v2{
  --bx-orange:#FF6600;
  --bx-choc:#643B22;
  --bx-cream:#FEF4E5;
  --bx-sand:#EDD8B0;
  --bx-bronze:#935F25;
  --bx-white:#FFFFFF;

  --bx-ink:var(--bx-choc);
  --bx-ink-soft:#836049;
  --bx-cream-soft:rgba(254,244,229,.82);
  --bx-line:rgba(100,59,34,.2);
  --bx-line-inv:rgba(254,244,229,.26);

  --bx-font:"Satoshi","General Sans","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;

  --bx-gut:clamp(20px,4.2vw,72px);
  --bx-sec:clamp(88px,12vw,192px);
  --bx-nav-h:76px;

  --bx-r-frame:6px;
  --bx-r-round:999px;

  --bx-t:300ms;
  --bx-ease:cubic-bezier(.22,.61,.36,1);
  --bx-ease-out:cubic-bezier(.16,1,.3,1);

  --bx-grade:none;

  position:relative;
  display:block;
  box-sizing:border-box;
  width:100%;
  margin:0;
  font-family:var(--bx-font);
  font-size:1rem;
  font-weight:400;
  font-style:normal;
  line-height:1.55;
  letter-spacing:normal;
  text-align:left;
  text-transform:none;
  color:var(--bx-ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
@media (max-width:767px){.bx-v2{--bx-nav-h:64px}}

/* ---------- 1. Reset ber-scope (menetralkan CSS tema & Elementor Kit di dalam widget v2) ----------
   Spesifisitas reset sengaja 0,2,0 (":where(...)" bernilai 0, ":not(.bx-n)" menambah 1 kelas):
   - lebih kuat dari aturan tema/Kit seperti "h1", "p", ".elementor-kit-5 h1", ".elementor-kit-5 p" (0,1,1)
   - sama dengan aturan komponen ".bx-v2 .bx-..." (0,2,0) yang dimuat sesudahnya, jadi komponen tetap menang. */
.bx-v2,.bx-v2 *,.bx-v2 *::before,.bx-v2 *::after{box-sizing:border-box}
.bx-v2 :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,li,dl,dd,picture,article,aside,nav,header,footer,time):not(.bx-n){
  margin:0;padding:0;border:0;background:none;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-align:inherit;
}
.bx-v2 :where(ul,ol):not(.bx-n){list-style:none}
.bx-v2 :where(img):not(.bx-n){display:block;max-width:100%;height:auto;border:0;border-radius:0;box-shadow:none}
.bx-v2 a[href]:is(:link,:visited,:hover,:focus,:active){color:inherit;font-family:inherit;text-decoration:none;background:none;box-shadow:none}
.bx-v2 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;
  min-height:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
/* Hover/focus dari tema & Kit (mis. latar #c36) dinetralkan; tebal border tetap milik komponen */
.bx-v2 button[type="button"]:is(:hover,:focus,:active){background-color:transparent;color:inherit;border-color:currentColor;box-shadow:none;text-decoration:none}
.bx-v2 :focus{outline:none}
.bx-v2 :focus-visible{outline:2px solid var(--bx-orange);outline-offset:4px}
.bx-v2 [hidden]{display:none!important}
.bx-v2 ::selection{background:var(--bx-orange);color:var(--bx-white)}
.bx-v2 .bx-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. Tipografi ---------- */
.bx-v2 .bx-label{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;line-height:1.3}
.bx-v2 .bx-it{font-style:italic;font-weight:300;letter-spacing:-.035em;text-transform:none}
.bx-v2 .bx-dot{color:var(--bx-orange)}
.bx-v2 .bx-ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.bx-v2 .bx-ln>span{display:block}

/* ---------- 3. Komponen bersama ---------- */
/* Link teks dengan panah (CTA utama v2, tanpa tombol pill) */
.bx-v2 .bx-link{display:inline-flex;align-items:center;gap:.8em;position:relative;padding:.55em 0;font-family:var(--bx-font);font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
.bx-v2 .bx-link::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transition:background-color var(--bx-t) var(--bx-ease)}
.bx-v2 .bx-link .bx-arr{display:inline-block;font-weight:400;font-size:1.25em;letter-spacing:0;transition:transform var(--bx-t) var(--bx-ease)}
.bx-v2 .bx-link:hover .bx-arr,.bx-v2 .bx-link:focus-visible .bx-arr{transform:translateX(.4em)}
.bx-v2 .bx-link:hover::before{background:var(--bx-orange)}
.bx-v2 .bx-link--lg{font-size:clamp(1rem,1.7vw,1.45rem);letter-spacing:.1em}

/* Tombol bulat (panah carousel). Spesifisitas hover 0,4,1 > hover tema/Kit yang dinetralkan reset. */
.bx-v2 button.bx-round{display:inline-grid;place-items:center;flex:0 0 auto;width:52px;height:52px;border:1px solid currentColor;border-radius:var(--bx-r-round);font-family:var(--bx-font);font-size:1.25rem;line-height:1;transition:background-color var(--bx-t) var(--bx-ease),color var(--bx-t) var(--bx-ease),border-color var(--bx-t) var(--bx-ease),opacity var(--bx-t) var(--bx-ease)}
.bx-v2 button.bx-round:not([disabled]):is(:hover,:focus-visible){background-color:var(--bx-choc);color:var(--bx-cream);border-color:var(--bx-choc)}
.bx-v2 button.bx-round[disabled]{opacity:.28;cursor:default}

/* Bingkai foto: gambar apa pun di dalamnya mengisi bingkai, fokus diatur lewat --bx-fp */
.bx-v2 .bx-ph{position:relative;overflow:hidden;margin:0;background:var(--bx-tone,var(--bx-sand));border-radius:var(--bx-r-frame)}
.bx-v2 .bx-ph>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--bx-fp,50% 50%);filter:var(--bx-grade)}

/* Latar halaman krem di halaman yang memakai widget v2 (mis. saat overscroll) */
body:has(.bx-v2){background-color:#FEF4E5}

/* Smooth scroll (Lenis, diaktifkan dari BX Header). Scroll halus CSS dimatikan agar tidak dobel. */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}

/* ---------- 4. Reveal saat scroll (aktif hanya bila JS v2 jalan: kelas .bx-js di <html>) ---------- */
.bx-js .bx-v2 [data-bx-r]{opacity:0;transform:translate3d(0,30px,0);transition:opacity 1s var(--bx-ease-out),transform 1.1s var(--bx-ease-out);transition-delay:var(--bx-d,0ms)}
.bx-js .bx-v2 [data-bx-r].is-in{opacity:1;transform:none}
.bx-js .bx-v2 [data-bx-r="line"]{opacity:1;transform:none;transition:none}
.bx-js .bx-v2 [data-bx-r="line"]>span{transform:translate3d(0,112%,0);transition:transform 1.15s var(--bx-ease-out);transition-delay:var(--bx-d,0ms)}
.bx-js .bx-v2 [data-bx-r="line"].is-in>span{transform:none}
.bx-js .bx-v2 [data-bx-r="img"]{opacity:0;transform:none;transition:opacity .9s var(--bx-ease-out);transition-delay:var(--bx-d,0ms)}
.bx-js .bx-v2 [data-bx-r="img"].is-in{opacity:1}
.bx-js .bx-v2 [data-bx-r="img"]>img{clip-path:inset(0 0 100% 0);transform:scale(1.14);transition:clip-path 1.3s var(--bx-ease-out),transform 1.8s var(--bx-ease-out);transition-delay:calc(var(--bx-d,0ms) + 100ms)}
.bx-js .bx-v2 [data-bx-r="img"].is-in>img{clip-path:inset(0 0 0 0);transform:none}
.bx-js .bx-v2 [data-bx-r="fade"]{transform:none}

/* ---------- 5. Pengaman Elementor: widget v2 selalu selebar layar, tanpa padding/gap bawaan ---------- */
.elementor-element[class*="elementor-widget-bx-"]{width:100%;max-width:100%;margin:0!important;padding:0!important}
.elementor-element[class*="elementor-widget-bx-"]>.elementor-widget-container{margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important}
/* Container (flexbox) yang isinya hanya satu widget v2 */
.e-con:has(>[class*="elementor-widget-bx-"]:only-child),
.e-con:has(>.e-con-inner>[class*="elementor-widget-bx-"]: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-bx-"]:only-child){max-width:100%!important;width:100%!important;padding:0!important;gap:0!important}
/* Section/Column lama */
.elementor-widget-wrap:has(>[class*="elementor-widget-bx-"]:only-child){padding:0!important}
.elementor-section:has(.elementor-widget-wrap>[class*="elementor-widget-bx-"]:only-child)>.elementor-container{max-width:100%!important}

/* Pesan kosong di editor */
.bx-v2.bx-hero-empty{padding:48px 24px;background:var(--bx-cream);color:var(--bx-choc);text-align:center;font-weight:500}

/* ---------- 6. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .bx-js .bx-v2 [data-bx-r],
  .bx-js .bx-v2 [data-bx-r]>span,
  .bx-js .bx-v2 [data-bx-r]>img{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}