/* =========================================================
   ZYNN V30 — SLIDER + DOTS + TAB CLEAN FIX
   ========================================================= */

/* Hapus kotak kecil/artefak di atas tab: pakai real background, bukan pseudo layer */
body .tab-switch .tab-btn,
body .ds-tabs .ds-tab{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  overflow:hidden!important;
  isolation:auto!important;
  min-height:60px!important;
  height:60px!important;
  border-radius:22px!important;
  padding:0 22px!important;
  border:2px solid transparent!important;
  background:
    linear-gradient(180deg, rgba(7,17,32,.96), rgba(4,10,22,.98)) padding-box,
    linear-gradient(90deg, rgba(91,237,255,.42), rgba(101,188,255,.36), rgba(164,118,255,.42), rgba(206,91,255,.36)) border-box!important;
  color:rgba(232,244,255,.72)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 0 18px rgba(89,239,255,.025)!important;
}

/* Matikan semua pseudo tab yang bikin kotak/ikon nyasar */
body .tab-switch .tab-btn::before,
body .tab-switch .tab-btn::after,
body .ds-tabs .ds-tab::before,
body .ds-tabs .ds-tab::after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
  border:0!important;
  mask:none!important;
  -webkit-mask:none!important;
}

body .tab-switch .tab-btn.active,
body .ds-tabs .ds-tab.active,
body .tab-switch .tab-btn[aria-selected="true"],
body .ds-tabs .ds-tab[aria-selected="true"]{
  color:#f0ffff!important;
  background:
    linear-gradient(180deg, rgba(8,18,34,.98), rgba(5,11,24,.98)) padding-box,
    linear-gradient(90deg, rgba(91,237,255,.95), rgba(101,188,255,.88), rgba(164,118,255,.95), rgba(206,91,255,.88)) border-box!important;
  box-shadow:0 0 16px rgba(89,239,255,.14),0 0 26px rgba(163,111,255,.12),inset 0 0 18px rgba(89,239,255,.035)!important;
}

body .tab-switch .tab-btn > i,
body .ds-tabs .ds-tab > i{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  flex:0 0 auto!important;
  color:#59efff!important;
  font-size:16px!important;
  line-height:1!important;
  text-shadow:0 0 12px rgba(89,239,255,.48)!important;
}
body .tab-switch .tab-btn > span,
body .ds-tabs .ds-tab > span{
  position:static!important;
  display:inline-block!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
}

/* Banner slider jalan lagi: jangan kunci transform di CSS lama */
body .banner-track{
  display:flex!important;
  width:100%!important;
  height:100%!important;
  opacity:1!important;
  visibility:visible!important;
  transform:translateX(calc(var(--zynn-banner-index, 0) * -100%))!important;
  transition:transform .55s cubic-bezier(.22,.8,.18,1)!important;
  will-change:transform!important;
}
body .banner-item{
  flex:0 0 100%!important;
  width:100%!important;
  min-width:100%!important;
  height:100%!important;
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
}
body .banner-item img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  opacity:1!important;
  visibility:visible!important;
}

/* Dots aktif */
body .ref-hero-dots{
  position:absolute!important;
  left:50%!important;
  bottom:18px!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  z-index:8!important;
  pointer-events:auto!important;
}
body .ref-hero-dots span{
  display:block!important;
  width:10px!important;
  height:10px!important;
  border-radius:999px!important;
  background:rgba(226,238,255,.26)!important;
  cursor:pointer!important;
  transition:all .25s ease!important;
}
body .ref-hero-dots span.active{
  width:30px!important;
  background:linear-gradient(90deg,#59efff,#a36fff)!important;
  box-shadow:0 0 12px rgba(89,239,255,.35),0 0 18px rgba(163,111,255,.20)!important;
}

/* Pastikan tombol panah tetap klik */
body .banner-arrow{
  z-index:9!important;
}

/* Mobile */
@media(max-width:720px){
  body .tab-switch .tab-btn,
  body .ds-tabs .ds-tab{
    height:54px!important;
    min-height:54px!important;
    border-radius:18px!important;
    padding:0 12px!important;
    gap:8px!important;
    font-size:14px!important;
  }
  body .tab-switch .tab-btn > i,
  body .ds-tabs .ds-tab > i{
    font-size:15px!important;
  }
  body .ref-hero-dots{
    bottom:12px!important;
    gap:7px!important;
  }
  body .ref-hero-dots span{
    width:8px!important;
    height:8px!important;
  }
  body .ref-hero-dots span.active{
    width:24px!important;
  }
}


/* =========================================================
   V31 — BANNER DOTS FINAL FIX
   Fix: CSS lama span:first-child bikin dot pertama selalu aktif.
   Sekarang hanya 1 dot yang aktif sesuai slide.
   ========================================================= */
body .ref-hero-dots{
  position:absolute!important;
  left:50%!important;
  bottom:18px!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  z-index:12!important;
  pointer-events:auto!important;
}

/* Reset semua dots termasuk first-child dari CSS lama */
body .ref-hero-dots span,
body .ref-hero-dots span:first-child,
body .ref-hero-dots span:not(.active),
body .ref-hero-dots span:first-child:not(.active){
  display:block!important;
  width:9px!important;
  min-width:9px!important;
  height:9px!important;
  border-radius:999px!important;
  background:rgba(226,238,255,.28)!important;
  opacity:.78!important;
  box-shadow:0 0 8px rgba(255,255,255,.08)!important;
  cursor:pointer!important;
  transition:width .25s ease, background .25s ease, opacity .25s ease, box-shadow .25s ease!important;
}

/* Hanya dot yang punya class active yang jadi panjang */
body .ref-hero-dots span.active,
body .ref-hero-dots span:first-child.active{
  width:30px!important;
  min-width:30px!important;
  height:9px!important;
  opacity:1!important;
  background:linear-gradient(90deg,#59efff 0%,#7ec8ff 48%,#a36fff 100%)!important;
  box-shadow:0 0 12px rgba(89,239,255,.42),0 0 20px rgba(163,111,255,.24)!important;
}

@media(max-width:720px){
  body .ref-hero-dots{
    bottom:12px!important;
    gap:7px!important;
  }
  body .ref-hero-dots span,
  body .ref-hero-dots span:first-child,
  body .ref-hero-dots span:not(.active),
  body .ref-hero-dots span:first-child:not(.active){
    width:8px!important;
    min-width:8px!important;
    height:8px!important;
  }
  body .ref-hero-dots span.active,
  body .ref-hero-dots span:first-child.active{
    width:24px!important;
    min-width:24px!important;
    height:8px!important;
  }
}