/* =====================================================================
   BX3 KONSEP STORE - judul & tombol pilihan (Reguler / Mall / Mini) di tengah,
   lalu satu foto lebar 21:9 dengan nama + kalimat di bawahnya.
   Tablet 16:9, HP 4:3. Tampilan "Utuh" (3.4.3, 3.5.1): render / PNG transparan tampil utuh langsung di atas latar section
   (tanpa bingkai), bentuk area = bentuk PNG (dari ukuran gambar), sama di semua layar. Tanpa JS: tombol pilihan disembunyikan, semua konsep tampil berurutan.
   ===================================================================== */

.bx3.bx3-concept{--bx3-max:var(--bx3-wide);display:block;background:var(--bx3-white);padding:var(--bx3-sec-y) var(--bx3-pad-x)}
.bx3.bx3-concept--cream{background:var(--bx3-cream)}
.bx3 .bx3-con__in{max-width:var(--bx3-max);margin:0 auto}
.bx3 .bx3-con__head{display:flex;flex-direction:column;align-items:center;text-align:center}
.bx3 .bx3-con__intro{display:flex;flex-direction:column;align-items:center}
.bx3 .bx3-con__head .bx3-text{max-width:30em;text-wrap:pretty}
.bx3 .bx3-con__tabs{margin-top:clamp(28px,2.8vw,44px)}
.bx3 .bx3-con__tabs[hidden]{display:none!important}
.bx3 button.bx3-chip[role="tab"][aria-selected="true"],.bx3 button.bx3-chip[role="tab"][aria-selected="true"]:is(:hover,:focus-visible){background-color:var(--bx3-choc);border-color:var(--bx3-choc);color:var(--bx3-white)}
.bx3 button.bx3-chip[role="tab"]:active{transform:scale(.98)}

.bx3 .bx3-con__panels{margin-top:clamp(36px,3.6vw,64px)}
.bx3 .bx3-con__panel{display:block;outline-offset:6px}
.bx3 .bx3-con__panel+.bx3-con__panel{margin-top:clamp(56px,6vw,96px)}
.bx3.bx3-concept.is-js .bx3-con__panel+.bx3-con__panel{margin-top:0}
.bx3 .bx3-con__panel[hidden]{display:none!important}
.bx3 .bx3-con__img{aspect-ratio:21/9;border-radius:var(--bx3-r);isolation:isolate}
/* Tampilan "Utuh" (3.5.1): tanpa bingkai & tanpa latar sendiri, PNG transparan langsung di atas latar section.
   Bentuk area = --bx3-con-ar (dari PNG paling tinggi, diisi PHP; cadangan 2:1), sama di semua layar sehingga
   tidak ada ruang kosong di tablet / HP. Gambar utuh (contain), duduk di dasar area supaya semua konsep sejajar. */
.bx3.bx3-concept--contain .bx3-con__img{aspect-ratio:var(--bx3-con-ar,2);background:none;border-radius:0}
.bx3.bx3-concept--contain .bx3-con__img>img,.bx3.bx3-concept--contain .bx3-con__img>picture>img{inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.bx3 .bx3-con__cap{display:flex;flex-direction:column;align-items:flex-start;margin-top:clamp(24px,2.4vw,40px)}
.bx3 .bx3-con__name{font-size:clamp(1.25rem,1.7vw,1.75rem);font-weight:700;line-height:1.25;letter-spacing:.01em;text-transform:uppercase;color:var(--bx3-ink)}
.bx3 .bx3-con__text{margin-top:10px;max-width:34em;font-size:var(--bx3-fs-body);line-height:1.8;color:var(--bx3-ink-soft)}

/* Ganti konsep: foto & teks muncul halus (400 ms), menandai isi berganti */
@keyframes bx3-con-in{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
.bx3.bx3-concept.is-js .bx3-con__panel.is-shown{animation:bx3-con-in .4s var(--bx3-ease) both}

/* 3.5.2 Desktop: area Utuh dibatasi tingginya (±52% tinggi layar, maks. 500 px) supaya section tidak terlalu panjang;
   lebar ikut bentuk PNG, di tengah, nama & kalimat rata kiri dengan gambar. Tablet & HP tidak berubah (selebar layar). */
@media (min-width:1025px){
  .bx3.bx3-concept--contain .bx3-con__panels{max-width:min(100%, calc(var(--bx3-con-ar,2) * min(52vh, 500px)));margin-left:auto;margin-right:auto}
}
@media (max-width:1024px){
  .bx3.bx3-concept:not(.bx3-concept--contain) .bx3-con__img{aspect-ratio:16/9}
}
@media (max-width:767px){
  .bx3 .bx3-con__tabs{justify-content:center}
  .bx3.bx3-concept:not(.bx3-concept--contain) .bx3-con__img{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){.bx3.bx3-concept.is-js .bx3-con__panel.is-shown{animation:none}}