/* ============================================================
   🎨 ROOT COLORS
============================================================ */
:root {
  --accentred: #b22222;
  --accentblue: #0a74da;
}


/* ============================================================
   ✨ SLIDE ANIMATION
============================================================ */
.slide {
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.6s;
  display: none;
}
.slide.active {
  opacity: 1;
  transform: translateY(0);
  display: block;
}


/* ============================================================
   🔵 CUSTOM DOTS
============================================================ */
#dots button {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  border: none;
  transition: .3s;
}
#dots button.active {
  background: linear-gradient(90deg, var(--accentred), var(--accentblue));
}


/* ============================================================
   🌫 PARALLAX
============================================================ */
.parallax-bg { background-attachment: fixed; }


/* ============================================================
   ❌ CLOSE BUTTON ALIGN
============================================================ */
.close-promo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================
   🌈 BACKGROUND MOVEMENT
============================================================ */
@keyframes bgMove {
  0% { background-position: 0 0; }
  100% { background-position: 1000px 1000px; }
}
.animate-bgMove { animation: bgMove 60s linear infinite; }


/* ============================================================
   🎈 FLOAT ANIMATION
============================================================ */
@keyframes float-slow {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}
.animate-float-slow {
  animation: float-slow 12s ease-in-out infinite;
}


/* ============================================================
   🔘 SWIPER PAGINATION (Perbaikan)
============================================================ */
.mySlide-pagination {
  position: absolute !important;
  bottom: 75px !important; /* dinaikkan */
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 50 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
}

.mySlide-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: white;
  opacity: 0.4;
  transition: 0.3s;
}
.mySlide-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: #ff4400;
}


/* ============================================================
   🟧 PATTERN BACKGROUND
============================================================ */
.pattern-background {
  background-color: #FF4800;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 10px,
    rgba(0,0,0,0.15) 10px,
    rgba(0,0,0,0.15) 12px
  );
}

.mySlide,
.mySlide .swiper-wrapper,
.mySlide .swiper-slide {
  width: 100vw !important;
  max-width: 100% !important;
}

.mySlide img {
  width: 100vw !important;
  max-width: 100% !important;
}

/* ============================================================
   🚫 HIDE BUTTON ON MOBILE
============================================================ */
@media (max-width: 640px) {
  .btn-bergabung,
  #btnBergabung,
  .menu-bergabung {
    display: none !important;
  }
}


/* ============================================================
   📱 MOBILE OPTIMIZATION
============================================================ */
@media (max-width: 640px) {

  section {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }

  .mySlide { 
    min-height: 350px !important;
  }

.mySlide .swiper-slide picture img {
  width: 100% !important;
 
  object-fit: cover !important;
}


  /* Filter */
  #filter { padding: 1rem !important; }
  #filter form {
    display: flex !important;
    flex-direction: column !important;
    gap: .8rem !important;
  }
  #filter input,
  #filter select {
    padding: .75rem !important;
    font-size: .9rem !important;
  }
  #filter button {
    width: 100%;
    padding: .85rem !important;
    font-size: .95rem !important;
  }

  .testimonial-card {
    max-width: 90% !important;
    padding: 22px !important;
  }
}


/* ============================================================
   📱 FILTER 768px
============================================================ */
@media (max-width: 768px) {
  #filterWrapper { width: 100% !important; max-width: 100% !important; }
  #filterWrapper form {
    display: flex !important;
    flex-direction: column !important;
  }
  #filterWrapper input,
  #filterWrapper select,
  #filterWrapper button,
  #filterWrapper .relative {
    width: 100% !important;
  }
  #filterWrapper .col-span-2 {
    grid-column: span 1 / span 1 !important;
  }
}


/* ============================================================
   🖥 DESKTOP FIXES
============================================================ */
@media (min-width: 768px) {
  .testimonial-card {
    max-width: 580px !important;
    padding: 20px 80px !important;
  }
  .mySwiper .swiper-wrapper { gap: 0px !important; }
  .swiper-slide { padding: 0 !important; }
}

/* Hide mobile swiper on desktop */
@media (min-width: 768px) {
  .infoSwiper { display: none !important; }
}