/* assets/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

:root {
  --ajaib: #f59932;
  --ajaibgray: #626262;
}

body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #ffffff;
}

/* hero shapes */
.hero-section { position: relative; overflow: visible; }
.parallax-layer { position: absolute; inset: 0; pointer-events: none; }
.parallax-layer div { will-change: transform; }

/* swiper */
.hero-section .swiper { max-width: 460px; margin-left: auto; }

/* popup */
#joinPopup { transition: transform 300ms ease, opacity 300ms ease; }
#joinPopup.show { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* small responsive tweaks */
@media (max-width: 767px) {
  nav .max-w-6xl { padding-left: 1rem; padding-right: 1rem; }
  .swiper { max-width: 100%; margin-left: 0; }
  .hero-section { padding-left: 1rem; padding-right: 1rem; }
}

/* utility colors */
.text-ajaib { color: var(--ajaib); }
.bg-ajaib { background-color: var(--ajaib); }
.text-ajaibgray { color: var(--ajaibgray); }


.client-popup {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #fff;
  border-left: 4px solid #f59932;
  color: #333;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
  z-index: 9999;
  font-size: 14px;
}
.client-popup.show {
  opacity: 1;
  transform: translateY(0);
}





/* FIX: Full width Swiper stabil di dalam container */
.testimonial-wrapper {
  width: 100vw;             /* Penuh selebar layar */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;       /* Tarik keluar dari layout tengah */
  margin-right: -50vw;
  background: #f9fafb;      /* Warna sama dengan section */
  padding-left: 10vw;        /* Biar gak terlalu mepet kiri */
  padding-right: 10vw;
  box-sizing: border-box;
}

/* Styling Swiper */
#testimonial .swiper {
    max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

#testimonial .swiper-slide {
  display: flex;
  justify-content: center;
}

#testimonial .swiper-slide > div {
  width: 100%;
  max-width: 640px; /* dua kali lebih besar dari max-w-sm (384px) */
}


#testimonial .swiper-pagination-bullet {
  background-color: #f59932;
  opacity: 0.4;
}

#testimonial .swiper-pagination-bullet-active {
  opacity: 1;
}


#why .hover\:shadow-lg:hover {
  transform: translateY(-6px);
}

#why svg {
  transition: transform 0.3s ease, color 0.3s ease;
}

#why .p-8:hover svg {
  transform: scale(1.1);
  color: #f59932;
}



#pricing .hover\:shadow-lg:hover {
  transform: translateY(-6px);
}

#pricing .border-ajaib {
  border-color: #f59932 !important;
}

#pricing ul li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#pricing ul li::before {
  content: '';
}


/* Animasi halus saat muncul */
.pricing-card {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease-out;
}

/* Saat muncul di viewport */
.pricing-card.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* Hover efek lembut */
.pricing-card:hover {
  transform: translateY(-6px);
  transition: transform 0.3s ease;
}




#cta {
  background: linear-gradient(135deg, #f59932 0%, #f5b23a 100%);
  position: relative;
}

#cta img {
  transition: transform 0.3s ease;
}

#cta img:hover {
  transform: scale(1.05);
}

#cta .bg-white\/10:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}



footer a {
  transition: color 0.3s ease;
}

footer a:hover {
  color: #f59932;
}

footer svg {
  transition: transform 0.3s ease, color 0.3s ease;
}

footer svg:hover {
  transform: scale(1.1);
  color: #f59932;
}


footer [data-aos] {
  transition-timing-function: ease-out;
}