/* ===== HERO ===== */
.hero-bg{
  position: relative;                /* JANGAN absolute */
  min-height: 100svh;
  background-image: url("https://res.cloudinary.com/dkvpjor0y/image/upload/v1758654703/Group_427320853_2_i5gcmt.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;                /* bikin stacking context sendiri */
  z-index: 0;
}


/* ===== ABOUT (nutup hero) ===== */
.section-about{
  position: absolute;
  background-image: url("https://res.cloudinary.com/dkvpjor0y/image/upload/v1758650054/Frame_427320835_3_xlqrmi.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
  z-index: 20;
  margin-top: -130px;                /* <--- tarik naik nutup hero */
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;  
}

/* Tombol panah */
#anggota-swiper .nav-btn{
  position:absolute !important;
  top:10px !important;
  bottom:auto !important;
  transform:none !important;
  z-index:50;
  display:grid;
  place-items:center;
  width:40px;height:40px;border-radius:9999px;
  background:#d11919ff;
  color:#fff;
  pointer-events:auto;
}


#anggota-swiper .nav-prev{ left:8px !important; }
#anggota-swiper .nav-next{ right:8px !important; }

/* Bullet pagination */
#anggota-swiper .swiper-pagination-bullet{
  background-color:#d1d5db !important; /* abu-abu */
  opacity:1 !important;
}
#anggota-swiper .swiper-pagination-bullet-active{
  background-color:#d11919ff !important; /* aktif (merah contoh) */
}


/* Paksa kanvas HISTORY putih penuh & berdiri sendiri */
.section-history{
  background:#ffffff;
  position:relative;
  isolation:isolate;      /* bikin stacking context baru (hindari overlay dari section sebelumnya) */
  z-index:1;
}

.section-materi {
  background-image: url('https://res.cloudinary.com/dkvpjor0y/image/upload/v1758650054/Frame_427320835_3_xlqrmi.png'); /* sesuaikan lokasi gambarnya */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

:root{
  --materi-accent:#d11919;   /* warna tombol & bullet aktif */
  --nav-size:40px;
}

/* Tombol panah */
.center-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--nav-size); height:var(--nav-size);
  border-radius:9999px; background:var(--materi-accent); color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .15s, filter .15s, opacity .15s;
  border:0;
}
.center-btn svg{ width:20px; height:20px; }

/* Matikan icon default ‹ › dari Swiper agar tidak dobel */
.materi-prev.swiper-button-prev::after,
.materi-next.swiper-button-next::after{ content:'' !important; }

/* Saat disabled (kalau loop:false) */
.swiper-button-disabled{ opacity:.45; cursor:not-allowed; transform:none !important; }

/* Bullet pagination */
.materi-pagination .swiper-pagination-bullet{
  width:8px; height:8px; border-radius:9999px;
  background:#d1d5db !important; opacity:1 !important;
  margin:0 6px !important; transition:transform .15s, opacity .15s;
}
.materi-pagination .swiper-pagination-bullet:hover{ opacity:.6; transform:scale(1.1); }
.materi-pagination .swiper-pagination-bullet-active{
  background:var(--materi-accent) !important; transform:scale(1.15);
}

/* ==== KUNCI: batasi tampilan ke 3 kartu saja ==== */
.materi-swiper{ 
  overflow: hidden;      /* jangan visible, supaya kartu ke-4 tidak terlihat */
  padding-bottom: 6px;   /* sedikit ruang agar shadow bawah tidak terpotong */
}
.swiper-slide{ height:auto; }

/* ===== GALERY (coverflow kipas) ===== */
:root{
  --galeri-accent:#d11919;
  --galeri-muted:#e5e7eb;
}

/* semua slide mempunyai lebar SAMA (jangan override lebar untuk active) */
#galery-swiper .gallery-slide{
  width: clamp(180px, 18vw, 220px);
}
#galery-swiper .gallery-card{
  width: 100%;
  height: clamp(260px, 34vw, 360px);
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* pusat sedikit lebih “pop” via scale, bukan ubah lebar */
#galery-swiper .swiper-slide-active .gallery-card{
  transform: scale(1.06);
  box-shadow: 0 22px 48px rgba(0,0,0,.22);
}

/* kontrol bawah */
#galery-swiper .nav-btn{
  width: 36px; height: 36px; border-radius: 9999px;
  display:grid; place-items:center; border:none;
  background: var(--galeri-muted); color:#111;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
#galery-swiper .nav-btn.nav-primary{ background: var(--galeri-accent); color:#fff; }
#galery-swiper .nav-btn svg{ width:18px; height:18px; }

/* ukuran seragam & ruang untuk tombol/shadow */
#galery-swiper .gallery-slide { width: 210px; }
#galery-swiper .gallery-card {
  width: 100%; height: 340px; object-fit: cover;
  border-radius: 24px; box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
#galery-swiper { overflow: visible; padding-bottom: 64px; }

.nav-btn{
  width:36px;height:36px;border-radius:9999px;border:0;
  display:grid;place-items:center;background:#e5e7eb;color:#111;
  box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:30;
}
.nav-btn.nav-primary{ background:#f59e0b; color:#fff; }


.footer-bg{
  position: relative;
  background-image: url('https://res.cloudinary.com/dkvpjor0y/image/upload/v1758650054/Frame_427320835_3_xlqrmi.png'); /* contoh: assets/img/footer-bg.jpg */
  background-size: cover;
  background-position: center;
}


.section-pembukaan {
  position: absolute;
  background-image: url("https://res.cloudinary.com/dkvpjor0y/image/upload/v1758650054/Frame_427320835_3_xlqrmi.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
  z-index: 20;
  margin-top: -130px;                /* <--- tarik naik nutup hero */
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
}