.sgp-gallery{
  --card-w: 450px;
  --card-h: 380px;
  --gap: 34px;

  position: relative;
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  overflow:hidden;
}


.sgp-title{
  position:relative;
  z-index:1;
  color:#fff; 
  font-weight:700;
  letter-spacing:.3px;
  margin: 0 0 150px 0; 
  font-size: clamp(22px,2.6vw,34px);
}

/* ====== stage ====== */
.sgp-stage{
  position:relative; z-index:1;
  width:100%;
  max-width:1100px;
  display:flex; 
  justify-content:center;
  perspective:1200px;
}

/* penting: beri tinggi tetap karena anak-anak absolut */
.sgp-cards{
  position:relative;
  height: var(--card-h);
  display:flex; 
  align-items:center; 
  justify-content:center;
  transform: translateY(-180px);
}

/* ====== card ====== */
.sgp-card{
  position:absolute;           /* stack di tengah */
  left:50%; top:0;
  width:var(--card-w); height:var(--card-h);
  border-radius:24px; overflow:hidden;
  transform-style:preserve-3d;
  transition:
    transform .6s ease,
    opacity .6s ease,
    filter .6s ease,
    box-shadow .6s ease,
    border-color .6s ease;
  opacity:0; pointer-events:none;
  transform:translateX(-50%) scale(.6) translateZ(-250px);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  border:3px solid transparent;
  z-index:1;
}

.sgp-card video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ====== 3 posisi yang tampil ====== */
.sgp-card.sgp-prev{
  opacity:.75; z-index:2;
  transform:translateX(calc(-50% - (var(--card-w) + var(--gap))))
            rotateY(18deg) scale(.95) translateZ(0);
  filter:brightness(.9) saturate(.95);
}
.sgp-card.sgp-active{
  opacity:1; z-index:3;
  transform:translateX(-50%) rotateY(0) scale(1.15) translateZ(110px);
  border-color:#222526;
  box-shadow:0 28px 70px rgba(0,0,0,.55);
  pointer-events:auto;
}
.sgp-card.sgp-next{
  opacity:.75; z-index:2;
  transform:translateX(calc(-50% + (var(--card-w) + var(--gap))))
            rotateY(-18deg) scale(.95) translateZ(0);
  filter:brightness(.9) saturate(.95);
}

/* sisanya disembunyikan */
.sgp-card.sgp-hidden{
  opacity:0; z-index:1;
  pointer-events:none;
  transform:translateX(-50%) scale(.6) translateZ(-250px);
}

/* ====== indikator ====== */
.sgp-indicators{
  position:relative; 
  z-index:1; 
  margin-top:-120px;
  display:flex; 
  gap:8px; 
  align-items:center;
  justify-content:center;
}
.sgp-indicators .sgp-bullet{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.55); cursor:pointer;
  transition:transform .2s, background .2s;
}
.sgp-indicators .sgp-bullet.sgp-on{
  background:#fff; transform:scale(1.15);
}

/* ====== responsif: ubah variable agar offset ikut ====== */
@media (max-width: 900px){
  .sgp-gallery{ --card-w:300px; --card-h:220px; --gap:28px; }
}
@media (max-width: 640px){
  .sgp-gallery{ --card-w:260px; --card-h:190px; --gap:22px; }
}

/* ====== Stats bawah galeri ====== */
.sgp-stats{
  position: relative;
  z-index: 1;
  margin-top: 20px;
  width: 100%;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
  color: #fff;
}
.sgp-stat h3{
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 700;
  margin-bottom: 8px;
  color: red;
}
.sgp-stat p{
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 400;
  opacity: 0.9;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px){
  .sgp-stats{
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
  }
}
@media (max-width: 480px){
  .sgp-stats{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* end */

/* ====== CTA (kalau kamu pakai) ====== */
.sgp-cta-section{
  background-color:#e0dcdc;
  padding:50px 40px 20px;
  min-height:25vh;
}
.sgp-cta-container{
  max-width:1200px; margin:0 auto;
  display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:center; gap:20px;
}
.sgp-cta-text h3{
  font-size:30px; font-weight:700; line-height:1.4; margin:0; color:#111;
}
.sgp-btn-hubungi{
  background-color:#111; color:#fff;
  padding:16px 36px; border-radius:8px; text-decoration:none;
  font-weight:600; transition:background-color .3s; font-size:18px;
}
.sgp-btn-hubungi:hover{ background-color:#333; }

@media (max-width:768px){
  .sgp-cta-container{ flex-direction:column; align-items:center; text-align:center; }
  .sgp-cta-text h3{ font-size:24px; }
  .sgp-btn-hubungi{ padding:14px 28px; font-size:16px; }
}