/* =====================================================================
   BX3 HEADER — logo kiri, menu tengah, "Temukan Gerai" kanan (gaya CHAGEE)
   Transparan di atas hero → putih saat scroll / saat kursor di header. Dropdown = panel putih.
   ===================================================================== */

.bx3.bx3-header{position:relative;display:block;width:100%;height:0;z-index:1000;--bx3-top:0px;line-height:1.4}
/* Putih sejak awal: beri ruang setinggi header agar konten pertama tidak tertutup */
.bx3.bx3-header--white{height:var(--bx3-nav-h)}

/* Admin bar WordPress (hanya terlihat saat login) */
body.admin-bar .bx3.bx3-header{--bx3-top:32px}
@media screen and (max-width:782px){body.admin-bar .bx3.bx3-header{--bx3-top:46px}}
@media screen and (max-width:600px){body.admin-bar .bx3.bx3-header{--bx3-top:0px}}

/* Lewati ke konten (muncul saat Tab pertama) */
.bx3 a.bx3-skip[href]{position:fixed;left:16px;top:-80px;z-index:1003;padding:10px 16px;background-color:var(--bx3-choc);color:var(--bx3-white);font-size:var(--bx3-fs-sm);transition:top var(--bx3-t) var(--bx3-ease)}
.bx3 a.bx3-skip[href]:focus{top:calc(var(--bx3-top) + 12px)}

/* ---------- Bar ---------- */
.bx3 .bx3-nav{
  position:fixed;left:0;right:0;top:var(--bx3-top);z-index:1001;
  height:var(--bx3-nav-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:0 calc(var(--bx3-wrap-x) + var(--bx3-sbw,0px)) 0 var(--bx3-wrap-x);
  margin:0;border:0;color:var(--bx3-white);background:transparent;
  transition:background-color var(--bx3-t) var(--bx3-ease),color var(--bx3-t) var(--bx3-ease),box-shadow var(--bx3-t) var(--bx3-ease);
}
.bx3 .bx3-nav[data-solid="true"],.bx3 .bx3-nav.is-hover,.bx3 .bx3-nav.is-drop,.bx3 .bx3-nav.is-open{background:var(--bx3-white);color:var(--bx3-ink);box-shadow:0 1px 0 var(--bx3-line)}

.bx3 a.bx3-nav__brand[href]{display:block;justify-self:start}
.bx3 .bx3-logo{position:relative;display:block;width:clamp(120px,8vw,156px);aspect-ratio:600/129}
.bx3 .bx3-logo__img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:left center;transition:opacity var(--bx3-t) var(--bx3-ease)}
.bx3 .bx3-logo__img--orange{opacity:0}
.bx3 .bx3-nav:is([data-solid="true"],.is-hover,.is-drop,.is-open) .bx3-logo__img--white{opacity:0}
.bx3 .bx3-nav:is([data-solid="true"],.is-hover,.is-drop,.is-open) .bx3-logo__img--orange{opacity:1}

/* ---------- Menu tengah ---------- */
.bx3 .bx3-nav__menu{height:100%}
.bx3 .bx3-nav__list{display:flex;height:100%;gap:clamp(24px,3.3vw,64px)}
.bx3 .bx3-nav__item{position:relative;display:flex;align-items:center;height:100%}
.bx3 a.bx3-nav__link[href]{position:relative;display:inline-flex;align-items:center;padding:.6em 0;font-size:var(--bx3-fs-sm);line-height:1;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;transition:color var(--bx3-t) var(--bx3-ease)}
.bx3 .bx3-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--bx3-t) var(--bx3-ease)}
.bx3 .bx3-nav__item:is(:hover,.is-open)>.bx3-nav__link::after,.bx3 .bx3-nav__link[aria-current="page"]::after,.bx3 .bx3-nav__link:focus-visible::after{transform:scaleX(1)}

/* Dropdown: daftar di bawah item, di atas panel putih selebar layar */
.bx3 .bx3-nav__sub{
  position:absolute;top:100%;left:50%;z-index:2;
  min-width:max-content;padding:20px 0 30px;text-align:center;
  opacity:0;visibility:hidden;transform:translate3d(-50%,-6px,0);
  transition:opacity var(--bx3-t) var(--bx3-ease),transform var(--bx3-t) var(--bx3-ease),visibility 0s linear var(--bx3-t);
}
.bx3 .bx3-nav__item.is-open>.bx3-nav__sub{opacity:1;visibility:visible;transform:translate3d(-50%,0,0);transition:opacity var(--bx3-t) var(--bx3-ease),transform var(--bx3-t) var(--bx3-ease)}
/* Tanpa JS: buka dengan hover / fokus keyboard */
html:not(.bx3-js) .bx3 .bx3-nav__item:is(:hover,:focus-within)>.bx3-nav__sub{opacity:1;visibility:visible;transform:translate3d(-50%,0,0)}
.bx3 .bx3-nav__sub a[href]{display:block;padding:.6em 0;font-size:var(--bx3-fs-xs);line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--bx3-ink-soft);white-space:nowrap;transition:color var(--bx3-t) var(--bx3-ease)}
.bx3 .bx3-nav__sub a[href]:is(:hover,:focus-visible),.bx3 .bx3-nav__sub a[href][aria-current="page"]{color:var(--bx3-orange)}
.bx3 .bx3-nav__mask{position:absolute;left:0;right:0;top:100%;z-index:1;height:var(--bx3-drop-h,0px);background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--bx3-line);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--bx3-t) var(--bx3-ease),height var(--bx3-t) var(--bx3-ease),visibility 0s linear var(--bx3-t)}
.bx3 .bx3-nav.is-drop .bx3-nav__mask{opacity:1;visibility:visible;transition:opacity var(--bx3-t) var(--bx3-ease),height var(--bx3-t) var(--bx3-ease)}

/* ---------- Kanan ---------- */
.bx3 .bx3-nav__end{justify-self:end;display:flex;align-items:center;gap:20px}
.bx3 a.bx3-nav__cta[href]{display:inline-flex;align-items:center;gap:8px;padding:.6em 0;font-size:var(--bx3-fs-sm);line-height:1;white-space:nowrap;transition:color var(--bx3-t) var(--bx3-ease)}
.bx3 a.bx3-nav__cta[href]:is(:hover,:focus-visible){color:var(--bx3-orange)}

.bx3 button.bx3-burger{display:none;position:relative;width:40px;height:40px;flex:none;border:0}
.bx3 .bx3-burger span{position:absolute;left:9px;right:9px;height:1.5px;background:currentColor;transition:transform var(--bx3-t) var(--bx3-ease),top var(--bx3-t) var(--bx3-ease),opacity var(--bx3-t) var(--bx3-ease)}
.bx3 .bx3-burger span:nth-child(1){top:14px}
.bx3 .bx3-burger span:nth-child(2){top:20px}
.bx3 .bx3-burger span:nth-child(3){top:26px}
.bx3 .bx3-nav.is-open .bx3-burger span:nth-child(1){top:20px;transform:rotate(45deg)}
.bx3 .bx3-nav.is-open .bx3-burger span:nth-child(2){opacity:0}
.bx3 .bx3-nav.is-open .bx3-burger span:nth-child(3){top:20px;transform:rotate(-45deg)}

/* ---------- Panel menu HP / tablet ---------- */
.bx3 .bx3-panel{
  position:fixed;left:0;right:0;bottom:0;top:calc(var(--bx3-top) + var(--bx3-nav-h));z-index:999;
  background:var(--bx3-white);padding:8px var(--bx3-pad-x) 40px;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translate3d(0,-8px,0);
  transition:opacity var(--bx3-t) var(--bx3-ease),transform var(--bx3-t) var(--bx3-ease),visibility 0s linear var(--bx3-t);
}
.bx3 .bx3-panel.is-open{opacity:1;visibility:visible;transform:none;transition:opacity var(--bx3-t) var(--bx3-ease),transform var(--bx3-t) var(--bx3-ease)}
.bx3 .bx3-panel__item{border-bottom:1px solid var(--bx3-line)}
.bx3 .bx3-panel__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bx3 a.bx3-panel__link[href]{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;font-size:var(--bx3-fs-sm);font-weight:700;line-height:1.4;letter-spacing:.02em;text-transform:uppercase;color:var(--bx3-ink)}
.bx3 a.bx3-panel__link[href][aria-current="page"]{color:var(--bx3-orange)}
.bx3 button.bx3-panel__toggle{position:relative;flex:none;width:40px;height:40px;margin-right:-10px;color:var(--bx3-ink)}
.bx3 .bx3-panel__toggle span::before,.bx3 .bx3-panel__toggle span::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:currentColor;transition:transform var(--bx3-t) var(--bx3-ease)}
.bx3 .bx3-panel__toggle span::after{transform:rotate(90deg)}
.bx3 .bx3-panel__toggle[aria-expanded="true"] span::after{transform:rotate(0deg)}
.bx3 .bx3-panel__sub{padding:0 0 16px}
.bx3 .bx3-panel__sub a[href]{display:block;padding:9px 0;font-size:var(--bx3-fs-xs);line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--bx3-ink-soft)}
.bx3 .bx3-panel__sub a[href][aria-current="page"]{color:var(--bx3-orange)}

@media (max-width:1024px){
  .bx3 .bx3-nav{grid-template-columns:1fr auto}
  .bx3 .bx3-nav__menu,.bx3 a.bx3-nav__cta[href]{display:none}
  .bx3 button.bx3-burger{display:block}
}
@media (min-width:1025px){.bx3 .bx3-panel{display:none}}

/* Ikon & logo di tablet/HP */
@media (max-width:767px){.bx3 .bx3-logo{width:112px}}

@media (prefers-reduced-motion:reduce){
  .bx3 .bx3-nav,.bx3 .bx3-nav__sub,.bx3 .bx3-nav__mask,.bx3 .bx3-panel,.bx3 .bx3-burger span{transition-duration:.01ms!important}
}