.dosmos-banner-section{padding:18px 0 0;background:var(--theme-bg,#070707)}
.dosmos-banner-slider{position:relative;overflow:hidden;width:min(1600px,calc(100% - 32px));margin:auto;border:1px solid rgba(246,199,68,.28);border-radius:22px;background:#090909;box-shadow:0 22px 70px rgba(0,0,0,.45)}
.dosmos-banner-track{display:flex;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.dosmos-banner-slide{position:relative;min-width:100%;aspect-ratio:16/5.2;overflow:hidden;background:#111}
.dosmos-banner-picture,.dosmos-banner-picture img{display:block;width:100%;height:100%}
.dosmos-banner-picture img{object-fit:cover;object-position:center}
.dosmos-banner-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,var(--banner-overlay,.58)) 0%,rgba(0,0,0,.18) 56%,rgba(0,0,0,.04) 100%)}
.dosmos-banner-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(24px,5vw,82px);max-width:760px;z-index:2}
.dosmos-banner-content h2{margin:0;color:#fff;font-family:"Sora",serif;font-size:clamp(28px,4vw,62px);line-height:1.05;text-shadow:0 6px 26px #000}
.dosmos-banner-content p{margin:14px 0 0;color:rgba(255,255,255,.84);font-size:clamp(14px,1.25vw,19px);line-height:1.6;max-width:640px;text-shadow:0 3px 12px #000}
.dosmos-banner-cta{display:inline-flex;margin-top:24px;padding:12px 22px;border:1px solid rgba(246,199,68,.7);border-radius:999px;background:linear-gradient(135deg,#f8d568,#b98814);color:#111;font-weight:800;text-decoration:none;box-shadow:0 10px 28px rgba(246,199,68,.22)}
.dosmos-banner-nav{position:absolute;top:50%;z-index:4;transform:translateY(-50%);width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(0,0,0,.52);color:#fff;font-size:31px;line-height:1;cursor:pointer;backdrop-filter:blur(8px)}
.dosmos-banner-prev{left:16px}.dosmos-banner-next{right:16px}
.dosmos-banner-dots{position:absolute;left:50%;bottom:16px;z-index:4;display:flex;gap:8px;transform:translateX(-50%)}
.dosmos-banner-dot{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.42);cursor:pointer;transition:.25s}
.dosmos-banner-dot.active{width:26px;background:#f6c744}
.dosmos-banner-slider.is-single .dosmos-banner-nav,.dosmos-banner-slider.is-single .dosmos-banner-dots{display:none}
@media(max-width:760px){
 .dosmos-banner-section{padding-top:10px}
 .dosmos-banner-slider{width:calc(100% - 18px);border-radius:16px}
 .dosmos-banner-slide{aspect-ratio:4/3}
 .dosmos-banner-content{justify-content:flex-end;padding:24px 22px 38px;background:linear-gradient(0deg,rgba(0,0,0,.82),transparent 72%)}
 .dosmos-banner-content h2{font-size:clamp(24px,8vw,38px)}
 .dosmos-banner-content p{font-size:14px;line-height:1.45;margin-top:8px}
 .dosmos-banner-cta{margin-top:14px;padding:10px 18px}
 .dosmos-banner-nav{width:36px;height:36px;font-size:25px}.dosmos-banner-prev{left:8px}.dosmos-banner-next{right:8px}
 .dosmos-banner-dots{bottom:10px}
}
@media(prefers-reduced-motion:reduce){.dosmos-banner-track{transition:none}}
/* DOSMOS V24.2.1 — Swipe/Drag Slider */
.dosmos-banner-slider{
  cursor:grab;
  touch-action:pan-y pinch-zoom;
  user-select:none;
  -webkit-user-select:none;
}
.dosmos-banner-slider.is-dragging{
  cursor:grabbing;
}
.dosmos-banner-slider.is-dragging .dosmos-banner-track{
  pointer-events:none;
}
.dosmos-banner-track{will-change:auto}
.dosmos-banner-slider.is-dragging .dosmos-banner-track{will-change:transform}
.dosmos-banner-picture img{
  -webkit-user-drag:none;
  user-drag:none;
  pointer-events:none;
}
.dosmos-banner-slider:focus-visible{
  outline:2px solid rgba(246,199,68,.85);
  outline-offset:4px;
}


/* =========================================================
   DOSMOS V29.0.20 — BANNER TEXT SAFE LAYOUT
   Hanya merapikan overlay teks. Slider, swipe, autoplay,
   navigasi, gambar desktop/mobile, CTA, dan database tetap.
========================================================= */

.dosmos-banner-content{
  inset:auto auto clamp(22px,3vw,42px) clamp(52px,6vw,92px);
  width:min(420px,44%);
  max-width:none;
  padding:clamp(16px,2vw,24px);
  justify-content:flex-start;
  align-items:flex-start;
  border:1px solid rgba(246,199,68,.16);
  border-radius:16px;
  background:linear-gradient(
    135deg,
    rgba(5,5,5,.78),
    rgba(5,5,5,.52)
  );
  box-shadow:0 16px 45px rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.dosmos-banner-content h2{
  max-width:100%;
  margin:0;
  color:#fff;
  font-size:clamp(22px,2.45vw,38px);
  line-height:1.08;
  letter-spacing:-.025em;
  text-wrap:balance;
  text-shadow:0 4px 18px rgba(0,0,0,.95);
}

.dosmos-banner-content p{
  display:-webkit-box;
  max-width:100%;
  margin:10px 0 0;
  overflow:hidden;
  color:rgba(255,255,255,.86);
  font-size:clamp(11px,.95vw,14px);
  line-height:1.55;
  text-shadow:0 2px 10px rgba(0,0,0,.95);
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

.dosmos-banner-cta{
  margin-top:14px;
  padding:9px 16px;
  font-size:11px;
}

/* Konten tidak lagi memenuhi seluruh banner. */
.dosmos-banner-overlay{
  background:linear-gradient(
    90deg,
    rgba(0,0,0,calc(var(--banner-overlay,.58) * .60)) 0%,
    rgba(0,0,0,.10) 36%,
    rgba(0,0,0,.02) 72%
  );
}

@media(max-width:980px){
  .dosmos-banner-content{
    left:52px;
    bottom:24px;
    width:min(390px,52%);
  }

  .dosmos-banner-content h2{
    font-size:clamp(20px,3vw,31px);
  }
}

@media(max-width:760px){
  .dosmos-banner-content{
    inset:auto 14px 18px 14px;
    width:auto;
    padding:14px 15px;
    border-radius:13px;
    background:linear-gradient(
      135deg,
      rgba(5,5,5,.82),
      rgba(5,5,5,.60)
    );
  }

  .dosmos-banner-content h2{
    font-size:clamp(20px,6vw,28px);
    line-height:1.1;
  }

  .dosmos-banner-content p{
    margin-top:7px;
    font-size:11px;
    line-height:1.45;
    -webkit-line-clamp:2;
  }

  .dosmos-banner-cta{
    margin-top:10px;
    padding:8px 14px;
    font-size:10px;
  }

  .dosmos-banner-overlay{
    background:linear-gradient(
      0deg,
      rgba(0,0,0,.66) 0%,
      rgba(0,0,0,.12) 55%,
      rgba(0,0,0,.02) 100%
    );
  }
}

@media(max-width:420px){
  .dosmos-banner-content{
    right:11px;
    bottom:14px;
    left:11px;
    padding:12px 13px;
  }

  .dosmos-banner-content h2{
    font-size:20px;
  }

  .dosmos-banner-content p{
    font-size:10px;
  }
}


/* =========================================================
   DOSMOS V29.0.21 — BANNER IMAGE FIRST
   Desktop: overlay sangat kecil.
   HP/Tablet kecil: teks overlay disembunyikan total agar
   artwork banner terlihat penuh.
========================================================= */

.dosmos-banner-content{
  left:clamp(44px,5vw,76px);
  bottom:clamp(18px,2vw,28px);
  width:min(285px,32%);
  padding:14px 16px;
  border-radius:12px;
  background:rgba(5,5,5,.66);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.dosmos-banner-content h2{
  font-size:clamp(18px,1.75vw,25px);
  line-height:1.08;
}

.dosmos-banner-content p{
  margin-top:7px;
  font-size:10px;
  line-height:1.4;
  -webkit-line-clamp:2;
}

.dosmos-banner-cta{
  margin-top:9px;
  padding:7px 12px;
  font-size:9px;
}

.dosmos-banner-overlay{
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.24) 0%,
    rgba(0,0,0,.06) 28%,
    transparent 58%
  );
}

/* Banner tetap bersih pada tablet dan HP. */
@media(max-width:820px){
  .dosmos-banner-content{
    display:none!important;
  }

  .dosmos-banner-overlay{
    background:linear-gradient(
      0deg,
      rgba(0,0,0,.12) 0%,
      transparent 30%
    );
  }

  .dosmos-banner-slide::after{
    display:none!important;
  }
}

/* Desktop sempit: hanya judul, tanpa paragraf dan CTA. */
@media(min-width:821px) and (max-width:1050px){
  .dosmos-banner-content{
    width:min(235px,28%);
    padding:11px 13px;
  }

  .dosmos-banner-content h2{
    font-size:18px;
  }

  .dosmos-banner-content p,
  .dosmos-banner-cta{
    display:none!important;
  }
}

/* DOSMOS V31.9 — artwork memakai warna asli pada setiap slide. */
.dosmos-banner-picture img{opacity:1!important;filter:none!important;mix-blend-mode:normal!important}
.dosmos-banner-overlay{background:transparent!important;opacity:0!important;pointer-events:none!important}

/* =========================================================
   DOSMOS V38.1 — BANNER ARTWORK SAFE / NO CROP
   Menjaga seluruh artwork terlihat pada desktop, Android,
   iPhone dan tablet. Tidak mengubah slider/database/banner JS.
========================================================= */
.dosmos-banner-slide{
  background:#050505;
}
.dosmos-banner-picture{
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  background:#050505;
}
.dosmos-banner-picture img{
  width:100%;
  height:100%;
  object-fit:contain!important;
  object-position:center center!important;
}

/* Desktop mengikuti format banner panel 860x310 agar artwork utuh. */
@media (min-width:821px){
  .dosmos-banner-slide{aspect-ratio:860/310;}
}

/* Tablet/HP mempertahankan ruang 4:3 untuk mobile artwork,
   tetapi contain memastikan sisi atas/bawah tidak pernah terpotong. */
@media (max-width:820px){
  .dosmos-banner-slide{aspect-ratio:4/3;}
  .dosmos-banner-slider{overflow:hidden;}
}

/* iPhone/Android sempit: jangan ada transform/crop tambahan. */
@media (max-width:480px){
  .dosmos-banner-picture,
  .dosmos-banner-picture img{
    transform:none!important;
  }
}

/* =========================================================
   DOSMOS V38.2 — MOBILE BANNER BOTTOM SAFE AREA
   Adds a small internal safe area so artwork edges never sit
   underneath the slider clipping boundary on iOS/Android.
========================================================= */
@media (max-width:820px){
  .dosmos-banner-slide{
    aspect-ratio:4/3!important;
    padding:0 0 8px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    background:#050505!important;
  }
  .dosmos-banner-picture{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  .dosmos-banner-picture img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
  }
  .dosmos-banner-dots{bottom:12px!important;}
}
@media (max-width:480px){
  .dosmos-banner-slide{padding-bottom:10px!important;}
}


/* =========================================================
   DOSMOS V38.3 — EXACT ARTWORK RATIO / FULL BOTTOM EDGE
   Rasio slider mengikuti file banner yang benar-benar dipakai
   browser (desktop/mobile). Tidak ada padding/crop buatan.
========================================================= */
.dosmos-banner-slider{
  --dosmos-banner-ratio:860 / 310;
}
.dosmos-banner-track{
  align-items:flex-start;
}
.dosmos-banner-slide{
  aspect-ratio:var(--dosmos-banner-ratio)!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  background:#050505!important;
}
.dosmos-banner-picture{
  display:block!important;
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:#050505!important;
}
.dosmos-banner-picture img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
}
/* Dots tetap overlay di atas artwork, tanpa mengambil/crop area bawah. */
@media(max-width:820px){
  .dosmos-banner-slide{aspect-ratio:var(--dosmos-banner-ratio)!important;padding:0!important;}
  .dosmos-banner-dots{bottom:10px!important;}
}
@media(max-width:480px){
  .dosmos-banner-slide{padding:0!important;}
}

/* =========================================================
   DOSMOS V38.4 — NATURAL IMAGE HEIGHT / ZERO VERTICAL CROP
   Jangan pakai aspect-ratio untuk tinggi banner. Tinggi slider
   dihitung dari naturalWidth/naturalHeight gambar aktif sehingga
   seluruh artwork, termasuk garis paling bawah, selalu terlihat.
========================================================= */
.dosmos-banner-slider{
  --dosmos-banner-active-height:auto;
  overflow:hidden!important;
}
.dosmos-banner-track{
  align-items:flex-start!important;
  height:var(--dosmos-banner-active-height)!important;
  transition:transform .55s cubic-bezier(.22,.61,.36,1),height .18s ease!important;
}
.dosmos-banner-slide{
  flex:0 0 100%!important;
  min-width:100%!important;
  width:100%!important;
  height:var(--dosmos-banner-active-height)!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.dosmos-banner-picture{
  display:block!important;
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  line-height:0!important;
}
.dosmos-banner-picture img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  vertical-align:top!important;
}
@media(max-width:820px){
  .dosmos-banner-slider,
  .dosmos-banner-track,
  .dosmos-banner-slide,
  .dosmos-banner-picture,
  .dosmos-banner-picture img{
    aspect-ratio:auto!important;
  }
}

/* DOSMOS PUBLIC V56 — fluid banner width while browser zoom is reduced */
@media (min-width:1800px){
  .dosmos-banner-slider{
    width:calc(100% - clamp(44px,5vw,110px))!important;
    max-width:1800px!important;
  }
}
@media (min-width:2200px){
  .dosmos-banner-slider{max-width:2200px!important}
}
@media (min-width:2800px){
  .dosmos-banner-slider{max-width:2750px!important}
}
@media (min-width:3350px){
  .dosmos-banner-slider{max-width:3100px!important}
}

/* =========================================================
   DOSMOS PUBLIC V57 — TRUE VIEWPORT-FLUID BANNER
   Avoid fixed px max-widths so browser zoom does not shrink the
   banner into a narrow centered island.
   ========================================================= */
@media (min-width:981px){
  body[data-page="home"] .dosmos-banner-slider{
    width:76vw !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}
@media (min-width:1800px){
  body[data-page="home"] .dosmos-banner-slider{width:80vw !important;}
}
@media (min-width:2400px){
  body[data-page="home"] .dosmos-banner-slider{width:84vw !important;}
}


/* =========================================================
   DOSMOS V97 — STABLE REFRESH / NO BANNER LAYOUT SHIFT
   Reserve the exact banner area before Supabase responds so
   Hero/Acara never jump upward and look like another page.
========================================================= */
body[data-page="home"] #dosmosBannerSection[aria-busy="true"]{
  display:block!important;
  visibility:visible!important;
}
body[data-page="home"] #dosmosBannerSlider.is-banner-placeholder,
body[data-page="home"] #dosmosBannerSection[aria-busy="true"] #dosmosBannerSlider{
  aspect-ratio:40/13!important;
  min-height:0!important;
  background:linear-gradient(110deg,#080808 8%,#111 18%,#080808 33%);
  background-size:220% 100%;
  animation:dosmosBannerPlaceholder 1.2s linear infinite;
}
body[data-page="home"] #dosmosBannerSlider.is-banner-placeholder .dosmos-banner-track,
body[data-page="home"] #dosmosBannerSection[aria-busy="true"] .dosmos-banner-track{
  height:100%!important;
  min-height:100%!important;
}
body[data-page="home"] #dosmosBannerSlider.is-banner-placeholder .dosmos-banner-slide,
body[data-page="home"] #dosmosBannerSection[aria-busy="true"] .v6-banner-skeleton{
  height:100%!important;
  min-height:100%!important;
}
@media(max-width:820px){
  body[data-page="home"] #dosmosBannerSlider.is-banner-placeholder,
  body[data-page="home"] #dosmosBannerSection[aria-busy="true"] #dosmosBannerSlider{
    aspect-ratio:4/3!important;
  }
}
@keyframes dosmosBannerPlaceholder{to{background-position:-220% 0}}
@media(prefers-reduced-motion:reduce){
  body[data-page="home"] #dosmosBannerSlider.is-banner-placeholder,
  body[data-page="home"] #dosmosBannerSection[aria-busy="true"] #dosmosBannerSlider{animation:none!important}
}