/* Custom styles pelengkap Tailwind (loaded via CDN di header.php) */
html { scroll-behavior: smooth; }

/* ---- Bug fix: link di header (nav desktop maupun drawer mobile) menuju
   #produk / #cara-langganan / #benefit / #faq sebelumnya membuat bagian
   atas section itu "ketutupan" header yang sticky (position: sticky,
   top: 0), karena browser cuma menempatkan target pas di y=0 viewport.
   scroll-margin-top memberi jarak aman itu, berlaku baik untuk navigasi
   anchor native (href="#...") maupun scrollIntoView() dari JS. Nilai
   dilebihkan sedikit dari tinggi header (~64-72px) supaya ada jarak
   napas visual. ---- */
#produk,
#cara-langganan,
#benefit,
#faq {
  scroll-margin-top: 96px;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- accordion (FAQ): struktur collapse/expand HARUS selalu aktif,
   terlepas dari preferensi reduced-motion — hanya kecepatan animasinya
   yang berbeda (lihat media query di bawah). overflow+visibility dipasang
   di beberapa lapis supaya body teks benar-benar tidak "bocor" sebelum
   diklik, di semua browser. ---- */
.pn-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  visibility: hidden;
  transition: grid-template-rows .4s cubic-bezier(.22,1,.36,1), visibility .4s;
}
.pn-accordion-panel.pn-open {
  grid-template-rows: 1fr;
  visibility: visible;
}
.pn-accordion-panel > div {
  min-height: 0;
  overflow: hidden;
}

/* ---- mobile nav (situs publik): panel slide-down di bawah header,
   pola sama dengan accordion FAQ di atas supaya konsisten & tetap
   accessible (link tidak "bocor" sebelum dibuka, transisi halus). ---- */
.pn-mobile-nav {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  visibility: hidden;
  transition: grid-template-rows .35s cubic-bezier(.22,1,.36,1), visibility .35s;
}
.pn-mobile-nav.pn-open {
  grid-template-rows: 1fr;
  visibility: visible;
}
.pn-mobile-nav > div {
  min-height: 0;
  overflow: hidden;
}

/* ==========================================================================
   MOTION SYSTEM — keyframes, scroll-reveal, micro-interactions
   Semua bersifat presentasional; tidak ada perubahan alur/logic.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ---- base page-load fade ---- */
  body { animation: pn-body-in .5s ease both; }
  @keyframes pn-body-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* ---- scroll reveal ---- */
  .reveal {
    opacity: 0;
    transform: translateY(22px) translateZ(0);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0) translateZ(0);
    /* Lepas hint GPU setelah animasi kelar: kalau dibiarkan permanen di halaman
       dengan banyak kartu (katalog produk dsb), browser tetap menyimpan tiap
       elemen sebagai layer terkomposit sendiri — makin banyak layer, makin berat
       & scroll jadi terasa berat/kurang smooth walau animasinya sudah beres. */
    will-change: auto;
  }
  .reveal-scale {
    opacity: 0;
    transform: scale(.94) translateZ(0);
    transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
  }
  .reveal-scale.is-visible { opacity: 1; transform: scale(1) translateZ(0); will-change: auto; }
  .reveal-left {
    opacity: 0;
    transform: translateX(-24px) translateZ(0);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
  }
  .reveal-left.is-visible { opacity: 1; transform: translateX(0) translateZ(0); will-change: auto; }
  .reveal-right {
    opacity: 0;
    transform: translateX(24px) translateZ(0);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
  }
  .reveal-right.is-visible { opacity: 1; transform: translateX(0) translateZ(0); will-change: auto; }

  /* stagger children helper: set --d (ms) inline per item */
  .reveal, .reveal-scale, .reveal-left, .reveal-right {
    transition-delay: var(--d, 0ms);
  }

  /* ---- floating gradient blobs (hero) ---- */
  .pn-blob {
    animation: pn-float 9s ease-in-out infinite;
  }
  .pn-blob-slow { animation: pn-float 13s ease-in-out infinite; }
  @keyframes pn-float {
    0%, 100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(18px,-24px) scale(1.08); }
  }

  /* ---- floating provider logo badges (hero) ---- */
  .pn-logo-float {
    animation: pn-bob 5s ease-in-out infinite;
  }
  @keyframes pn-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
  }

  /* ---- animated gradient text/bg shimmer ---- */
  .pn-gradient-shift {
    background-size: 200% 200%;
    animation: pn-gradient-move 8s ease infinite;
  }
  @keyframes pn-gradient-move {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* ---- hero badge pulse ---- */
  .pn-pulse-dot {
    position: relative;
  }
  .pn-pulse-dot::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 9999px;
    border: 1px solid currentColor;
    opacity: .5;
    animation: pn-ring 2.2s ease-out infinite;
  }
  @keyframes pn-ring {
    0% { transform: scale(.85); opacity: .6; }
    100% { transform: scale(1.5); opacity: 0; }
  }

  /* ---- card lift + glow (augments existing hover:-translate-y-1) ---- */
  .pn-card {
    transform: translateZ(0);
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .35s cubic-bezier(.22,1,.36,1);
  }
  .pn-card:hover {
    box-shadow: 0 20px 40px -12px rgba(37,99,235,.25);
  }
  .pn-card:active { transform: translateY(-2px) scale(.995); }

  /* ---- icon pop on hover ---- */
  .pn-icon-pop { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
  .group:hover .pn-icon-pop { transform: scale(1.15) rotate(-4deg); }

  /* ---- buttons: press feedback + ripple ---- */
  .pn-btn {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1), background-color .25s cubic-bezier(.22,1,.36,1);
  }
  .pn-btn:hover { transform: translateY(-2px) translateZ(0); }
  .pn-btn:active { transform: translateY(0) scale(.97) translateZ(0); transition-duration: .12s; }
  .pn-ripple {
    position: absolute;
    border-radius: 9999px;
    background: rgba(255,255,255,.55);
    transform: scale(0);
    animation: pn-ripple-anim .6s ease-out forwards;
    pointer-events: none;
  }
  @keyframes pn-ripple-anim {
    to { transform: scale(2.6); opacity: 0; }
  }

  /* ---- nav link underline sweep ---- */
  .pn-nav-link { position: relative; }
  .pn-nav-link::after {
    content: '';
    position: absolute; left: 0; bottom: -4px;
    width: 100%; height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s cubic-bezier(.22,1,.36,1);
  }
  .pn-nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

  /* ---- sticky header shadow on scroll ---- */
  #pn-header { transform: translateZ(0); transition: box-shadow .35s cubic-bezier(.22,1,.36,1), background-color .35s cubic-bezier(.22,1,.36,1); }
  #pn-header.pn-scrolled { box-shadow: 0 8px 24px -12px rgba(15,23,42,.12); }

  /* ---- category filter pill press ---- */
  .pn-pill { transition: transform .2s cubic-bezier(.34,1.56,.64,1), background-color .25s ease, color .25s ease, border-color .25s ease; }
  .pn-pill:active { transform: scale(.94); }

  /* ---- katalog: geser keluar/masuk saat ganti kategori (AJAX swap) ---- */
  #pn-cat-results {
    --pn-cat-dir: 1;
    transform: translateZ(0);
    transition: opacity .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
  }
  #pn-cat-results.pn-cat-out {
    opacity: 0;
    transform: translateX(calc(var(--pn-cat-dir) * -18px)) scale(.985) translateZ(0);
  }
  #pn-cat-results.pn-cat-in {
    animation: pn-cat-slide-in .42s cubic-bezier(.22,1,.36,1);
  }
  @keyframes pn-cat-slide-in {
    from { opacity: 0; transform: translateX(calc(var(--pn-cat-dir) * 18px)) scale(.985); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
  }

  /* ---- price count-up flicker guard (used with JS number animation) ---- */
  .pn-count { display: inline-block; }

  /* ---- accordion (FAQ) icon + button feedback ---- */
  .pn-accordion-icon { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
  .pn-accordion-icon.pn-open { transform: rotate(45deg); }
  .pn-accordion-btn { transition: background-color .25s ease; }

  /* ---- star rating pop-in ---- */
  .pn-stars span {
    display: inline-block;
    opacity: 0;
    animation: pn-star-pop .4s cubic-bezier(.34,1.56,.64,1) forwards;
  }
  @keyframes pn-star-pop {
    from { opacity: 0; transform: scale(0) rotate(-30deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
  }

  /* ---- form input focus grow ---- */
  .pn-input { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .pn-input:focus { transform: translateY(-1px); }

  /* ---- spinner ---- */
  .pn-spinner {
    width: 1.1em; height: 1.1em;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: pn-spin .7s linear infinite;
  }
  @keyframes pn-spin { to { transform: rotate(360deg); } }

  /* ---- QR pulse border while awaiting payment ---- */
  .pn-qr-pulse {
    animation: pn-qr-pulse-ring 2.4s ease-in-out infinite;
  }
  @keyframes pn-qr-pulse-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,.28); }
    50% { box-shadow: 0 0 0 10px rgba(59,130,246,0); }
  }

  /* ---- live "checking" dot ---- */
  .pn-live-dot {
    width: 7px; height: 7px; border-radius: 9999px;
    background: currentColor;
    display: inline-block;
    animation: pn-live-blink 1.4s ease-in-out infinite;
  }
  @keyframes pn-live-blink {
    0%, 100% { opacity: .3; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.1); }
  }

  /* ---- status badge entrance ---- */
  .pn-badge-in { animation: pn-badge-pop .45s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes pn-badge-pop {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* ---- success checkmark draw ----
     Pakai atribut SVG `pathLength="100"` di elemen <circle>/<path> (lihat
     payment_status.php) supaya browser menormalkan keliling/panjang path
     jadi 100 unit, TIDAK PEDULI bentuk/ukuran aslinya.
     Dasharray sengaja dibuat SEDIKIT LEBIH dari 100 (102) — kalau pas 100
     persis, titik awal & akhir garis bisa ketemu dengan celah sangat tipis
     akibat pembulatan render browser (terlihat seperti garis putus-putus
     kecil di sambungan). Overlap tipis + stroke-linecap round di SVG
     menutup celah itu sepenuhnya tanpa terlihat berlebih. */
  .pn-check-circle {
    stroke-dasharray: 102;
    stroke-dashoffset: 102;
    animation: pn-draw .6s ease forwards .1s;
  }
  .pn-check-tick {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: pn-draw .35s ease forwards .55s;
  }
  @keyframes pn-draw { to { stroke-dashoffset: 0; } }

  /* ---- table row stagger (admin) ---- */
  .pn-row-in {
    opacity: 0;
    transform: translateX(-8px);
    animation: pn-row-in .45s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay: var(--d, 0ms);
  }
  @keyframes pn-row-in {
    to { opacity: 1; transform: translateX(0); }
  }

  /* ---- admin stat card ---- */
  .pn-stat-card {
    transform: translateZ(0);
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
  }
  .pn-stat-card:hover { transform: translateY(-3px) translateZ(0); box-shadow: 0 16px 32px -16px rgba(29,78,216,.28); }

  /* ---- admin sidebar link slide ---- */
  .pn-side-link { transform: translateZ(0); transition: transform .25s cubic-bezier(.22,1,.36,1), background-color .25s cubic-bezier(.22,1,.36,1), color .25s cubic-bezier(.22,1,.36,1); }
  .pn-side-link:hover { transform: translateX(4px) translateZ(0); }

  /* ---- skeleton shimmer (optional loading placeholders) ---- */
  .pn-skeleton {
    background: linear-gradient(90deg, #eef0f6 25%, #f7f7fb 37%, #eef0f6 63%);
    background-size: 400% 100%;
    animation: pn-shimmer 1.4s ease infinite;
  }
  @keyframes pn-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
  }

  /* ---- page transition overlay ---- */
  #pn-page-transition {
    position: fixed; inset: 0; z-index: 9999;
    background: linear-gradient(135deg,#1d4ed8,#f97316);
    transform: scaleY(0);
    transform-origin: top;
    pointer-events: none;
  }
  #pn-page-transition.pn-leaving {
    animation: pn-curtain-down .45s cubic-bezier(.76,0,.24,1) forwards;
  }
  @keyframes pn-curtain-down {
    to { transform: scaleY(1); }
  }
}

/* Respect reduced motion preference: disable all custom motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal, .reveal-scale, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
}