/* ============================================================
   assets/css/site.css
   Pelengkap custom di luar utility Tailwind (Tailwind di-load via CDN
   langsung di header.php). File ini isinya efek yang gak bisa dibikin
   pakai utility class biasa: glass card, blob animation, marquee,
   ripple effect, FAQ accordion, custom scrollbar.
   ============================================================ */

body {
  background-color: #F8FAFC;
  color: #0F172A;
  overflow-x: hidden;
  width: 100%;
}
html { overflow-x: hidden; }

/* ------------------------------------------------------------
   Fix umum: item langsung di dalam grid/flex (kartu statistik,
   dsb) default browser punya "min-width: auto" yang bisa memaksa
   kolom melebar mengikuti isi kontennya sendiri (angka besar,
   teks tanpa spasi, dll), sehingga di layar HP sempit kartu jadi
   "kepotong" di tepi layar walau class grid-cols-2/3 sudah benar.
   min-width:0 memaksa item ikut lebar kolom yang sudah dihitung
   grid/flexbox, lalu overflow-hidden membungkus sisa konten yang
   kepanjangan supaya tetap rapi (bukan meluber ke luar kartu).
   ------------------------------------------------------------ */
.grid > *, .flex > * { min-width: 0; }

/* ---- Glass surfaces ---- */
.glass-nav {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.glass-card {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 1);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  /* Defensif: cegah konten (angka/teks panjang) mendorong kartu ini melebihi
     lebar kolom grid/flex induknya, yang di HP bisa bikin kartu "kepotong"
     di tepi layar kalau induknya grid-cols-2 dsb. */
  min-width: 0;
  overflow: hidden;
}
.glass-card:hover {
  border-color: rgba(79, 70, 229, 0.3);
  box-shadow: 0 20px 40px -10px rgba(79, 70, 229, 0.15);
}

/* ---- Gradient text ---- */
.text-gradient {
  background: linear-gradient(to right, var(--gold), var(--gold-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Background blobs ---- */
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 7s infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

/* ---- Custom scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Marquee (kategori / metode bayar) ---- */
.marquee-track {
  display: flex; width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-mask {
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.partner-logo { filter: grayscale(100%); opacity: 0.6; transition: all 0.3s ease; }
.partner-logo:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.08); }

/* ---- Ripple button effect ---- */
.ripple-btn { position: relative; overflow: hidden; }
.ripple-span {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,0.6);
  transform: scale(0); animation: ripple-anim 0.6s linear; pointer-events: none;
}
@keyframes ripple-anim { to { transform: scale(3); opacity: 0; } }

/* ---- Animated gradient (CTA section) ---- */
.animated-gradient {
  background: linear-gradient(-45deg, var(--gold), var(--gold-2), var(--gold-soft), var(--gold-2));
  background-size: 400% 400%;
  animation: gradientShift 10s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- FAQ accordion ---- */
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; }
.faq-item.active .faq-content { max-height: 320px; }
.faq-item.active .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform 0.3s ease; }

/* ---- Floating buttons ---- */
.floating-btn { box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.floating-btn:hover { transform: translateY(-3px) scale(1.05); }

/* ---- Sticky bottom mobile nav ---- */
.sticky-mobile-nav { box-shadow: 0 -4px 20px rgba(0,0,0,0.06); }
.sticky-mobile-nav a.active-nav { color: var(--gold); }

/* ---- Hover lift utility (produk/testimoni) ---- */
.lift-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.lift-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -10px rgba(79,70,229,0.15); }

/* ---- Hero visual card floating decor ---- */
.hero-slider { position: relative; border-radius: 1.25rem; overflow: hidden; aspect-ratio: 16/9; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; }
.hero-slide.active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.hero-dots button { width: 7px; height: 7px; border-radius: 50%; border: none; background: rgba(255,255,255,0.5); cursor: pointer; padding: 0; }
.hero-dots button.active { background: #fff; width: 20px; border-radius: 5px; }

/* ---- Focus visibility (a11y) ---- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

@media (max-width: 767px) {
  /* placeholder - reserved for future mobile-only tweaks */
}

@media (prefers-reduced-motion: reduce) {
  .animate-blob, .animate-float, .marquee-track, .hero-slide { animation: none !important; }
}