/* =====================================================================
   superweekend.css - Slideshow promo Super Weekend
   Selaras identitas brand: biru #0F3193 / #0056b3, cyan #00a8e8, merah #CB002D.
   Markup slider dibuat oleh js/superweekend.js.
   ===================================================================== */

:root {
  --sw-blue: var(--brand, #0F3193);
  --sw-blue-mid: #0056b3;
  --sw-cyan: #00a8e8;
  --sw-red: #CB002D;
  --sw-gold: #ffc107;

  --sw-bg: #f4f6fb;
  --sw-surface: #ffffff;
  --sw-text: #1a2138;
  --sw-text-soft: #5c6478;
  --sw-border: #e6e9f2;
  --sw-shadow: 0 10px 30px rgba(15, 49, 147, .08);
  --sw-shadow-lg: 0 24px 60px rgba(15, 49, 147, .18);
  --sw-radius: 20px;
  --sw-radius-sm: 12px;
}

.sw-section {
  font-family: 'Poppins', sans-serif;
  background: var(--sw-bg);
  color: var(--sw-text);
  padding: 56px 0 72px;
}
.sw-section * { box-sizing: border-box; }
.sw-container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* =====================================================================
   BANNER / HERO (versi ringkas)
   Menggantikan .inner_banner_section (banner statis dengan judul hitam).
   Dibuat sebagai band tipis: hanya memuat keterangan promo — judul, periode,
   dan cakupan cabang. Materi promo sendiri tampil di slideshow di bawahnya,
   jadi banner tidak perlu tinggi maupun tombol CTA.
   Gambar promo dipakai sebagai latar, ditimpa gradien brand agar teks putih
   tetap kontras berapa pun terang gambarnya.
   ===================================================================== */
.sw-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  padding: 26px 0 28px;
  background:
    linear-gradient(112deg, rgba(15, 49, 147, .96) 0%, rgba(0, 86, 179, .90) 52%, rgba(0, 168, 232, .82) 100%),
    url('../images/superweekend/s (1).jpg') center/cover no-repeat;
}
.promo-supermurah .sw-hero {
  background-image:
    linear-gradient(112deg, rgba(15, 49, 147, .96) 0%, rgba(0, 86, 179, .90) 52%, rgba(0, 168, 232, .82) 100%),
    url('../images/smd/supermurah.jpg');
}
/* Banner polos: tanpa gambar, hanya gradien. Dipakai saat admin belum
   mengunggah gambar banner halaman di CMS. */
.sw-hero.sw-hero--no-img {
  background-image: linear-gradient(112deg, rgba(15, 49, 147, .96) 0%, rgba(0, 86, 179, .90) 52%, rgba(0, 168, 232, .82) 100%) !important;
}
.sw-hero * { box-sizing: border-box; }

/* Garis aksen tipis sebagai penutup band, menggantikan potongan diagonal
   yang tidak proporsional untuk banner sependek ini. */
.sw-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sw-gold), var(--sw-cyan), var(--sw-gold));
}

/* Sorotan lembut agar sisi teks lebih pekat daripada sisi kanan. */
.sw-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 12, 28, .42) 0%, transparent 62%);
  pointer-events: none;
}

/* Dua kolom: keterangan di kiri, meta promo di kanan. Menumpuk otomatis
   di layar sempit lewat flex-wrap. */
.sw-hero-inner {
  position: relative; z-index: 2;
  max-width: 1080px; margin: 0 auto; padding: 0 20px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 28px;
}
.sw-hero-copy { flex: 1 1 320px; min-width: 0; }

.sw-hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  padding: 4px 12px; border-radius: 30px; margin-bottom: 8px;
  backdrop-filter: blur(4px);
}
.sw-hero-badge i { color: var(--sw-gold); }

.sw-hero h1 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.2;
  margin: 0 0 4px;
  letter-spacing: -.3px;
}
/* Judul banner bisa ditimpa dari CMS lewat js/promo-banner.js, yang menulis
   teks polos. Warna aksen karena itu tidak lagi bergantung pada <span>. */
.sw-hero h1 .sw-hl { color: var(--sw-gold); }

.sw-hero-lead {
  color: rgba(255, 255, 255, .88);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
}

/* ---------- meta promo (periode & cakupan) ---------- */
.sw-hero-meta {
  flex: 0 1 auto;
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.sw-hero-meta li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .24);
  padding: 7px 14px; border-radius: 30px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.sw-hero-meta i { color: var(--sw-gold); font-size: 13px; }

/* ---------- breadcrumb ---------- */
.sw-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 0 0 8px; padding: 0; list-style: none;
  font-size: 12px; color: rgba(255, 255, 255, .78);
}
.sw-crumb a { color: rgba(255, 255, 255, .78); text-decoration: none; transition: color .2s ease; }
.sw-crumb a:hover { color: #fff; }
.sw-crumb li + li::before { content: '\203A'; margin-right: 7px; opacity: .6; }
.sw-crumb .sw-crumb-active { color: #fff; font-weight: 600; }

/* ---------- responsif hero ---------- */
@media (max-width: 767px) {
  .sw-hero { padding: 20px 0 22px; }
  .sw-hero-inner { gap: 12px 18px; }
  .sw-hero-meta li { font-size: 11.5px; padding: 6px 12px; }
}
@media (max-width: 479px) {
  .sw-hero-lead { font-size: 12.5px; }
  /* Cakupan cabang sudah tercantum di halaman Lokasi; di layar sempit
     ruang lebih berguna untuk periode promo. */
  .sw-hero-meta li + li { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-crumb a { transition: none; }
}

/* ---------- judul section ---------- */
.sw-head { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.sw-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--sw-red);
  background: rgba(203, 0, 45, .08); padding: 6px 16px; border-radius: 30px; margin-bottom: 14px;
}
.sw-head h2 { font-size: clamp(24px, 4vw, 34px); font-weight: 800; margin: 0 0 10px; color: var(--sw-text); }
.sw-head p { color: var(--sw-text-soft); font-size: clamp(14px, 1.6vw, 16px); margin: 0; }

/* ---------- panggung utama ---------- */
.sw-stage {
  position: relative;
  background: var(--sw-surface);
  border-radius: var(--sw-radius);
  box-shadow: var(--sw-shadow-lg);
  overflow: hidden;
}

/* Aturan dasar bila CSS Swiper dari CDN gagal dimuat (mis. saat offline pertama
   kali). Tanpa ini slide akan menumpuk vertikal. js/superweekend.js juga
   mengaktifkan mode scroll-snap sebagai gantinya. */
.sw-stage .swiper { position: relative; overflow: hidden; }
.sw-stage .swiper-wrapper { display: flex; height: 100%; }
.sw-thumbs .swiper-wrapper { align-items: center; }

/* Rasio dijaga lewat aspect-ratio supaya tidak ada layout shift saat gambar
   dimuat. Gambar promo umumnya portrait, jadi rasio default mengikuti itu. */
.sw-main.swiper {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 78vh;
  background: #0b1020;
}
.sw-main .swiper-slide {
  display: flex; align-items: center; justify-content: center;
  background: #0b1020;
  overflow: hidden;
}
/* contain: seluruh materi promo harus terlihat utuh, tidak boleh terpotong. */
.sw-main .swiper-slide img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}

/* Latar buram dari gambar yang sama untuk mengisi area kosong di sisi kiri/kanan
   saat rasio gambar tidak sama dengan rasio panggung. */
.sw-slide-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(26px) brightness(.55);
  transform: scale(1.15);
  pointer-events: none;
}
.sw-slide-fig { position: relative; z-index: 1; width: 100%; height: 100%; margin: 0; }

/* ---------- caption ---------- */
.sw-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 46px 24px 20px;
  background: linear-gradient(to top, rgba(8, 12, 28, .92) 12%, rgba(8, 12, 28, .55) 55%, transparent);
  color: #fff;
  pointer-events: none;
}
.sw-caption h3 {
  margin: 0 0 6px; color: #fff; font-weight: 700;
  font-size: clamp(15px, 2.2vw, 20px); line-height: 1.35;
}
.sw-caption-meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  font-size: 13px; color: rgba(255, 255, 255, .9);
}
.sw-caption-meta .sw-period { display: inline-flex; align-items: center; gap: 6px; }
.sw-caption-meta .sw-price { display: inline-flex; align-items: baseline; gap: 8px; }
.sw-caption-meta .sw-price-old { text-decoration: line-through; opacity: .7; font-size: 12px; }
.sw-caption-meta .sw-price-new { color: var(--sw-gold); font-weight: 700; font-size: 15px; }

/* ---------- tombol navigasi ---------- */
.sw-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, .9); color: var(--sw-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.sw-nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.sw-nav.sw-prev { left: 16px; }
.sw-nav.sw-next { right: 16px; }
.sw-nav.swiper-button-disabled { opacity: .35; cursor: default; }
.sw-nav:focus-visible { outline: 3px solid var(--sw-cyan); outline-offset: 2px; }

/* ---------- counter & progress ---------- */
.sw-counter {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  background: rgba(8, 12, 28, .62); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .5px;
  padding: 5px 12px; border-radius: 30px;
  backdrop-filter: blur(4px);
}
.sw-progress {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  height: 3px; background: rgba(255, 255, 255, .18);
}
.sw-progress-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--sw-cyan), var(--sw-gold));
}

/* ---------- tombol putar/jeda ---------- */
.sw-toggle {
  position: absolute; top: 16px; left: 16px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(8, 12, 28, .62); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer; backdrop-filter: blur(4px);
  transition: background .2s ease;
}
.sw-toggle:hover { background: rgba(8, 12, 28, .85); }
.sw-toggle:focus-visible { outline: 3px solid var(--sw-cyan); outline-offset: 2px; }

/* ---------- thumbnail ---------- */
.sw-thumbs.swiper {
  padding: 14px 16px;
  background: var(--sw-surface);
  border-top: 1px solid var(--sw-border);
}
.sw-thumbs .swiper-slide {
  width: 84px; height: 84px;
  border-radius: var(--sw-radius-sm);
  overflow: hidden; cursor: pointer;
  opacity: .5;
  border: 2px solid transparent;
  transition: opacity .25s ease, border-color .25s ease, transform .25s ease;
  background: #eef1f7;
}
.sw-thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-thumbs .swiper-slide:hover { opacity: .85; transform: translateY(-2px); }
.sw-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border-color: var(--sw-blue-mid);
  box-shadow: 0 4px 14px rgba(0, 86, 179, .28);
}

/* ---------- pagination (dipakai saat thumbnail disembunyikan di layar kecil) ---------- */
.sw-pagination { position: static; padding: 14px 0 0; text-align: center; }
.sw-pagination .swiper-pagination-bullet {
  width: 9px; height: 9px; background: #c3ccdd; opacity: 1; margin: 0 4px !important;
  transition: width .25s ease, background .25s ease;
}
.sw-pagination .swiper-pagination-bullet-active {
  width: 26px; border-radius: 5px; background: var(--sw-blue-mid);
}

/* ---------- hint & aksi bawah ---------- */
.sw-foot {
  display: flex; flex-wrap: wrap; gap: 12px 20px;
  align-items: center; justify-content: center;
  margin-top: 22px;
}
.sw-hint { color: var(--sw-text-soft); font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.sw-hint i { color: var(--sw-blue-mid); }

/* ---------- state: loading / kosong ---------- */
.sw-state {
  min-height: 320px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 48px 24px;
  color: var(--sw-text-soft);
}
.sw-spinner {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--sw-border); border-top-color: var(--sw-blue-mid);
  animation: sw-spin .9s linear infinite;
}
@keyframes sw-spin { to { transform: rotate(360deg); } }
.sw-state h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--sw-text); }
.sw-state p { margin: 0; font-size: 14px; max-width: 420px; }
.sw-state .sw-state-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.sw-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 40px; font-size: 14px; font-weight: 600;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.sw-btn:hover { transform: translateY(-2px); }
.sw-btn-primary { background: var(--sw-blue-mid); color: #fff; box-shadow: 0 8px 20px rgba(0, 86, 179, .3); }
.sw-btn-primary:hover { background: var(--sw-blue); color: #fff; }
.sw-btn-ghost { background: var(--sw-surface); color: var(--sw-blue-mid); border-color: var(--sw-border); }
.sw-btn-ghost:hover { border-color: var(--sw-blue-mid); color: var(--sw-blue); }

/* ---------- lightbox ---------- */
.sw-lightbox {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(5, 8, 20, .95);
  display: none; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.sw-lightbox.open { display: flex; }
.sw-lightbox img {
  max-width: 94vw; max-height: 88vh;
  border-radius: 10px; display: block;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.sw-lb-close, .sw-lb-arrow {
  position: absolute; background: rgba(255, 255, 255, .12); border: none; color: #fff;
  cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.sw-lb-close:hover, .sw-lb-arrow:hover { background: rgba(255, 255, 255, .28); }
.sw-lb-close { top: 22px; right: 22px; width: 44px; height: 44px; font-size: 20px; }
.sw-lb-arrow { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 20px; }
.sw-lb-arrow.prev { left: 20px; }
.sw-lb-arrow.next { right: 20px; }
.sw-lb-counter {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, .12); padding: 6px 16px; border-radius: 30px;
}
.sw-lb-close:focus-visible, .sw-lb-arrow:focus-visible { outline: 3px solid var(--sw-cyan); outline-offset: 2px; }

/* Cegah scroll latar saat lightbox terbuka. */
body.sw-lb-open { overflow: hidden; }

/* ---------- responsif ---------- */
@media (max-width: 991px) {
  .sw-main.swiper { max-height: 72vh; }
  .sw-thumbs .swiper-slide { width: 72px; height: 72px; }
}

@media (max-width: 767px) {
  .sw-section { padding: 40px 0 56px; }
  .sw-main.swiper { aspect-ratio: 4 / 5; max-height: 68vh; }
  .sw-nav { width: 38px; height: 38px; font-size: 15px; }
  .sw-nav.sw-prev { left: 10px; }
  .sw-nav.sw-next { right: 10px; }
  .sw-caption { padding: 36px 16px 16px; }
  .sw-thumbs .swiper-slide { width: 60px; height: 60px; }
  .sw-lb-arrow { width: 40px; height: 40px; font-size: 17px; }
  .sw-lb-arrow.prev { left: 8px; }
  .sw-lb-arrow.next { right: 8px; }
}

/* Di layar sangat sempit thumbnail memakan ruang tanpa memberi manfaat;
   navigasi cukup memakai bullet pagination + swipe. */
@media (max-width: 479px) {
  .sw-thumbs.swiper { display: none; }
  .sw-main.swiper { aspect-ratio: 3 / 4; max-height: 64vh; }
  .sw-counter { font-size: 11px; padding: 4px 10px; }
}

/* Hormati preferensi pengurangan animasi: hentikan transisi & spinner. */
@media (prefers-reduced-motion: reduce) {
  .sw-nav, .sw-thumbs .swiper-slide, .sw-btn, .sw-toggle,
  .sw-lb-close, .sw-lb-arrow { transition: none; }
  .sw-nav:hover, .sw-btn:hover, .sw-thumbs .swiper-slide:hover { transform: none; }
  .sw-spinner { animation-duration: 2.4s; }
  .sw-progress-bar { transition: none; }
}