/* =====================================================================
   BX3 HERO — banner utama gaya CHAGEE (foto/video, tulisan opsional per slide)
   Mode "ratio" (Ikuti ukuran banner): foto utuh tanpa zoom. Desktop & tablet = bentuk Foto desktop slide pertama
   (--bx3-ar, cadangan 1728 × 643). HP (3.4.1) = bentuk Foto HP slide pertama (--bx3-ar-m, cadangan 2:1 = 2400 × 1200);
   sama dengan desktop bila "Tetap melebar di HP". Bingkai ≤300 px tinggi: tulisan ringkas (container query).
   Mode "full": setinggi layar (maks. 1080 px), foto dipotong mengikuti Fokus.
   ===================================================================== */

.bx3.bx3-hero{position:relative;display:block;overflow:hidden;background:var(--bx3-choc);color:var(--bx3-white);touch-action:pan-y;line-height:1;container:bx3hero/size}
.bx3.bx3-hero--ratio{aspect-ratio:var(--bx3-ar,1728/643)}
.bx3.bx3-hero--full{height:100vh;height:100svh;min-height:560px;max-height:1080px}
@media (max-width:767px){
  .bx3.bx3-hero--ratio{aspect-ratio:var(--bx3-ar-m,2/1)}
}
/* 3.3.3 "Tetap melebar di HP": bentuk desktop juga di HP (foto utuh, lebih pendek). Header HP putih (bx3-top-flat),
   jadi bayangan atas tidak perlu. */
@media (max-width:767px){
  .bx3.bx3-hero--flat,.bx3.bx3-hero--ratio.bx3-hero--flat{aspect-ratio:var(--bx3-ar,1728/643);height:auto;min-height:0;max-height:none}
  .bx3.bx3-hero--flat.bx3-hero--shade::before{display:none}
}

/* Bayangan tipis di atas: logo & menu putih tetap terbaca */
.bx3.bx3-hero--shade::before{content:"";position:absolute;inset:0 0 auto 0;height:28%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(40,22,12,.38),rgba(40,22,12,0))}

.bx3 .bx3-hero__slides{position:absolute;inset:0}
.bx3 .bx3-hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s var(--bx3-ease),visibility 0s linear 1s}
.bx3 .bx3-hero__slide.is-active{opacity:1;visibility:visible;z-index:1;transition:opacity 1s var(--bx3-ease)}
/* Slide lama tetap tampil di bawah sampai slide baru selesai muncul (tanpa kedip gelap) */
.bx3 .bx3-hero__slide.is-leaving{visibility:visible;opacity:1;z-index:0;transition:none}
.bx3 .bx3-hero__link{position:absolute;inset:0;display:block;color:inherit}
.bx3 .bx3-hero__media{position:absolute;inset:0;background:var(--bx3-choc)}
.bx3.bx3-hero--ratio .bx3-hero__media img{object-fit:cover}
.bx3 .bx3-hero__media>.bx3-hero__video{z-index:1}

/* ---------- Tulisan di atas foto (3.4.0) ---------- */
/* Foto bertulisan digelapkan tipis (--bx3-ov) supaya tulisan terbaca; di atas video juga */
.bx3 .bx3-hero__slide.has-text .bx3-hero__media::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(40,22,12,var(--bx3-ov,.3));pointer-events:none}
.bx3.bx3-hero--dark .bx3-hero__slide.has-text .bx3-hero__media::after{background:rgba(254,244,229,var(--bx3-ov,.3))}
.bx3 .bx3-hero__body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:calc(var(--bx3-top,0px) + var(--bx3-nav-h) + 24px) var(--bx3-wrap-x) clamp(40px,4.4vw,84px);pointer-events:none;color:var(--bx3-white);line-height:1.2}
.bx3.bx3-hero--dark .bx3-hero__body{color:var(--bx3-ink)}
.bx3 .bx3-hero__body>*{max-width:min(46em,100%);pointer-events:auto}
.bx3 .bx3-hero__title{margin:0;font-family:var(--bx3-font);font-size:clamp(2rem,4vw,3.75rem);font-weight:700;line-height:1.05;letter-spacing:.01em;text-transform:uppercase;color:inherit;text-wrap:balance}
.bx3 .bx3-hero__text{margin:clamp(12px,1.4vw,22px) 0 0;max-width:min(36em,100%);font-size:var(--bx3-fs-body);line-height:1.7;color:inherit;opacity:.92;text-wrap:pretty}
.bx3 .bx3-hero__body a.bx3-hero__cta[href]{margin-top:clamp(20px,2.2vw,36px)}
.bx3 .bx3-hero__title+a.bx3-hero__cta[href]{margin-top:clamp(24px,2.6vw,40px)}
/* Posisi */
.bx3.bx3-hero--at-left .bx3-hero__body{align-items:flex-start;text-align:left}
.bx3.bx3-hero--at-right .bx3-hero__body{align-items:flex-end;text-align:right}
.bx3.bx3-hero--at-bottom-left .bx3-hero__body{justify-content:flex-end;align-items:flex-start;text-align:left}
.bx3.bx3-hero--at-bottom .bx3-hero__body{justify-content:flex-end}
/* Banyak slide: beri ruang untuk panah (kiri/kanan) dan tombol jeda (bawah) */
.bx3.bx3-hero--text:not(.bx3-hero--single) .bx3-hero__body{padding-left:max(var(--bx3-wrap-x),96px);padding-right:max(var(--bx3-wrap-x),96px);padding-bottom:calc(clamp(40px,4.4vw,84px) + 52px)}
/* Tulisan slide yang baru muncul: naik halus */
.bx3 .bx3-hero__slide .bx3-hero__body>*{opacity:0;transform:translate3d(0,16px,0);transition:opacity .8s var(--bx3-ease),transform .8s var(--bx3-ease)}
.bx3 .bx3-hero__slide.is-active .bx3-hero__body>*{opacity:1;transform:none}
.bx3 .bx3-hero__slide.is-active .bx3-hero__body>:nth-child(1){transition-delay:.25s}
.bx3 .bx3-hero__slide.is-active .bx3-hero__body>:nth-child(2){transition-delay:.35s}
.bx3 .bx3-hero__slide.is-active .bx3-hero__body>:nth-child(3){transition-delay:.45s}
@media (max-width:767px){
  /* HP: kiri/kanan tengah jadi rata kiri; panah disembunyikan bila ada tulisan (geser tetap bisa) */
  .bx3.bx3-hero--at-right .bx3-hero__body{align-items:flex-start;text-align:left}
  .bx3.bx3-hero--text:not(.bx3-hero--single) .bx3-hero__body{padding-left:var(--bx3-wrap-x);padding-right:var(--bx3-wrap-x)}
  .bx3.bx3-hero--text button.bx3-hero__arrow{display:none}
  .bx3 .bx3-hero__title{font-size:clamp(1.75rem,8vw,2.5rem)}
  /* "Tetap melebar di HP": header putih di atas, tulisan tidak perlu jarak header */
  .bx3.bx3-hero--flat .bx3-hero__body{padding-top:20px;padding-bottom:20px}
  .bx3.bx3-hero--flat .bx3-hero__title{font-size:clamp(1.5rem,7vw,2rem)}
  .bx3.bx3-hero--flat .bx3-hero__text{display:none}
  .bx3.bx3-hero--flat .bx3-hero__body a.bx3-hero__cta[href]{margin-top:12px}
}

/* 3.4.1 Bingkai pendek (≤300 px, mis. HP 2:1 = ±195 px): tulisan ringkas supaya muat: judul lebih kecil,
   kalimat disembunyikan, tombol jeda pindah ke kanan bawah. Header transparan tetap di atas (jarak atas = header). */
@container bx3hero (max-height:300px){
  .bx3 .bx3-hero__body,.bx3.bx3-hero--text:not(.bx3-hero--single) .bx3-hero__body{padding:calc(var(--bx3-top,0px) + var(--bx3-nav-h) + 8px) var(--bx3-wrap-x) 16px}
  .bx3.bx3-hero--text:not(.bx3-hero--single) .bx3-hero__body{padding-right:64px}
  .bx3.bx3-hero--flat .bx3-hero__body{padding-top:14px}
  .bx3 .bx3-hero__title{font-size:clamp(1.375rem,6.4vw,1.875rem)}
  .bx3 .bx3-hero__text{display:none}
  .bx3 .bx3-hero__body a.bx3-hero__cta[href]{margin-top:10px;padding-top:.7em;padding-bottom:.7em}
  .bx3.bx3-hero--text .bx3-hero__ctrl{left:auto;right:14px;bottom:14px;transform:none}
}

/* Panah kiri/kanan */
.bx3 button.bx3-hero__arrow{position:absolute;top:50%;z-index:3;width:48px;height:48px;margin-top:-24px;display:grid;place-items:center;color:var(--bx3-white);opacity:.85;transition:opacity var(--bx3-t) var(--bx3-ease)}
.bx3 button.bx3-hero__arrow:is(:hover,:focus-visible){opacity:1;color:var(--bx3-white)}
.bx3 .bx3-hero__arrow--prev{left:clamp(4px,1.4vw,28px)}
.bx3 .bx3-hero__arrow--next{right:clamp(4px,1.4vw,28px)}

/* Tombol jeda & suara: bulat bergaris putih, bawah tengah */
.bx3 .bx3-hero__ctrl{position:absolute;left:50%;bottom:clamp(16px,2.4vw,46px);z-index:3;display:flex;gap:12px;transform:translateX(-50%)}
.bx3 button.bx3-hero__btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.85);border-radius:50%;color:var(--bx3-white);transition:background-color var(--bx3-t) var(--bx3-ease),color var(--bx3-t) var(--bx3-ease)}
.bx3 button.bx3-hero__btn:is(:hover,:focus-visible){background-color:var(--bx3-white);color:var(--bx3-choc);border-color:var(--bx3-white)}
.bx3 .bx3-hero__btn .i-play,.bx3 .bx3-hero__btn .i-sound{display:none}
.bx3 .bx3-hero__pause[aria-pressed="true"] .i-play{display:block}
.bx3 .bx3-hero__pause[aria-pressed="true"] .i-pause{display:none}
.bx3 .bx3-hero__mute[aria-pressed="true"] .i-sound{display:block}
.bx3 .bx3-hero__mute[aria-pressed="true"] .i-muted{display:none}

@media (max-width:767px){
  .bx3 button.bx3-hero__arrow{width:40px;height:40px;margin-top:-20px}
  .bx3 button.bx3-hero__btn{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){
  .bx3 .bx3-hero__slide,.bx3 .bx3-hero__slide.is-active,.bx3 .bx3-hero__slide .bx3-hero__body>*{transition:none}
}