/* ============================================================
   SENTUHAN 3D RINGAN — mobile-first
   Hanya transform/opacity/translate (tanpa library, tanpa gambar).
   Semua efek mati otomatis bila perangkat memakai "kurangi gerakan".
   ============================================================ */

/* ---------- Tombol emas "tebal" yang menekan ke bawah ---------- */
.btn-gold {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 0 #8F7428, 0 14px 22px -8px rgba(0,0,0,.5);
  transition: transform .12s ease, box-shadow .12s ease, background .2s;
}
.btn-gold:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 #8F7428, 0 4px 8px -4px rgba(0,0,0,.45); }
.btn-ghost { box-shadow: 0 3px 0 rgba(0,0,0,.28); transition: transform .12s ease, box-shadow .12s ease, background .2s; }
.btn-ghost:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }
.search-card .btn-cek { box-shadow: 0 4px 0 #051a3d; transition: transform .12s ease, box-shadow .12s ease, background .2s; }
.search-card .btn-cek:active { transform: translateY(3px); box-shadow: 0 1px 0 #051a3d; }

/* ---------- Maskot melayang + miring ---------- */
@keyframes fx-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes fx-pop { 0% { scale: 1; } 40% { scale: .88; } 70% { scale: 1.08; } 100% { scale: 1; } }
.mascot-mini {
  transform: perspective(260px) rotateX(var(--mrx, 0deg)) rotateY(var(--mry, 0deg));
  transition: transform .25s ease-out;
  animation: fx-float 4.5s ease-in-out infinite;
  box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 0 0 5px rgba(200,169,81,.18);
}
.mascot-mini.is-pop { animation: fx-float 4.5s ease-in-out infinite, fx-pop .45s ease-out; }
.hero-art .mascot {
  transform: perspective(900px) rotate(2deg) rotateX(var(--mrx, 0deg)) rotateY(var(--mry, 0deg));
  transition: transform .25s ease-out;
}
.hero-art .chip-a { animation: fx-float 5s ease-in-out infinite; }
.hero-art .chip-b { animation: fx-float 6s ease-in-out -2.2s infinite; }

/* ---------- Kartu: miring mengikuti titik sentuh, memantul saat dilepas ---------- */
.tilt {
  transform: perspective(700px) translateY(var(--ty, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
  transition: transform .45s cubic-bezier(.2, .9, .25, 1.25), box-shadow .3s, border-color .3s;
  -webkit-tap-highlight-color: transparent;
}
.tilt.is-live { --sc: .985; transition-duration: .08s, .3s, .3s; box-shadow: 0 18px 30px -14px rgba(11,37,69,.35); }
@media (hover: hover) { .service.tilt:hover { --ty: -3px; } }

/* ---------- Muncul berlapis saat di-scroll (diaktifkan JS lewat .fx-ready) ---------- */
.fx-ready .reveal {
  transition: opacity .6s ease, translate .7s cubic-bezier(.2, .8, .2, 1), scale .7s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--d, 0ms);
}
.fx-ready .tilt.reveal {
  transition: opacity .6s ease, translate .7s cubic-bezier(.2, .8, .2, 1), scale .7s cubic-bezier(.2, .8, .2, 1), transform .45s cubic-bezier(.2, .9, .25, 1.25), box-shadow .3s, border-color .3s;
  transition-delay: var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), 0ms, 0ms, 0ms;
}
.fx-ready .reveal:not(.in) { opacity: 0; translate: 0 26px; scale: .96; }

/* ---------- Amplop 3D di layar sukses ---------- */
.notification .notif-check {
  width: auto; height: auto; background: none; box-shadow: none; border-radius: 0;
  display: block; margin: 22px auto 22px; perspective: 700px;
}
.env { position: relative; width: 92px; height: 62px; margin: 0 auto; animation: env-in .6s cubic-bezier(.2, .9, .25, 1.3) both; }
.env > * { position: absolute; }
.env-back { inset: 0; background: #1E5AAE; border-radius: 8px; box-shadow: 0 14px 22px -8px rgba(11,37,69,.45); }
.env-letter {
  left: 9px; right: 9px; top: 6px; height: 44px; background: #fff; border-radius: 5px;
  box-shadow: 0 2px 6px rgba(11,37,69,.18); display: grid; place-items: center; color: #15803D; font-size: 22px;
  animation: env-letter .7s cubic-bezier(.2, .9, .25, 1.2) .75s both;
}
.env-front { inset: 0; background: #2F6FC8; border-radius: 8px; clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); }
.env-flap {
  left: 0; right: 0; top: 0; height: 36px; background: #134074; border-radius: 8px 8px 0 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; backface-visibility: hidden;
  animation: env-flap .55s ease-in-out .35s both;
}
@keyframes env-in { from { opacity: 0; transform: scale(.55) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes env-flap { from { transform: rotateX(0); } to { transform: rotateX(180deg); } }
@keyframes env-letter { from { transform: translateY(0); } to { transform: translateY(-26px); } }

/* ---------- Hormati "kurangi gerakan" ---------- */
@media (prefers-reduced-motion: reduce) {
  .mascot-mini, .hero-art .chip, .env, .env-letter, .env-flap { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .tilt, .btn-gold, .btn-ghost, .search-card .btn-cek { transition: none !important; }
}

/* kartu "Nomor referensi" tidak lagi menutup tulisan di papan maskot (desktop) */
.hero-art .chip-a { left: -34px; top: 1%; }
.hero-art .chip-b { right: -26px; bottom: 8%; }

/* ===== Popup pembuka form: selaras popup "Pengajuan terkirim" ===== */
.popup-content { gap: 0; scrollbar-width: none; }
.popup-content::-webkit-scrollbar { display: none; }
.popup-welcome-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; letter-spacing: .2px; padding: 5px 13px; }
.popup-welcome-badge.is-sub { margin-bottom: 10px; }
.popup-link-back { align-self: flex-start; background: none; border: 0; cursor: pointer; color: #475569; font: 600 13px/1 inherit; display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px 8px 0; margin-bottom: 4px; min-height: 36px; }
#popupPerpanjanganView, #popupRefView, #popupInfoPerpanjanganView, #popupTipeView { width: 100%; display: flex; flex-direction: column; align-items: center; }
#popupPerpanjanganView[style*="none"], #popupRefView[style*="none"], #popupInfoPerpanjanganView[style*="none"], #popupTipeView[style*="none"] { display: none !important; }
#popupPerpanjanganView > div:first-child, #popupRefView > div:first-child, #popupInfoPerpanjanganView > div:first-child { align-self: flex-start; }
.popup-pilihan-btn { background: #fff !important; border: 1.5px solid #E2E8F0; border-radius: 16px; box-shadow: 0 3px 0 #E2E8F0; transition: transform .12s, box-shadow .12s, border-color .15s; -webkit-tap-highlight-color: transparent; }
.popup-pilihan-btn:hover { transform: none; box-shadow: 0 3px 0 #CBD5E1; border-color: #94A3B8; background: #fff !important; }
.popup-pilihan-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #E2E8F0; }
.popup-pilihan-icon { font-size: 20px; width: 44px; height: 44px; border-radius: 14px; background: #E8F0FB; color: #1d4f9a; }
.popup-pilihan-btn:nth-of-type(2) .popup-pilihan-icon { background: #FBF3D9; color: #8F6F10; }
#popupPerpanjanganView .popup-pilihan-btn:nth-of-type(1) .popup-pilihan-icon { background: #DDF5E7; color: #167a47; }
#popupPerpanjanganView .popup-pilihan-btn:nth-of-type(2) .popup-pilihan-icon { background: #EEE7FD; color: #6d32d6; }
.popup-pilihan-text small { color: #475569; }
.popup-back { background: none !important; border: 0 !important; box-shadow: none !important; color: #475569 !important; font-weight: 600; font-size: 13px; margin-top: 4px; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.popup-ok { border-radius: 14px; box-shadow: 0 4px 0 #0f2744; transition: transform .12s, box-shadow .12s; }
.popup-ok:hover { box-shadow: 0 4px 0 #0f2744; }
.popup-ok:active { transform: translateY(3px); box-shadow: 0 1px 0 #0f2744; }
.popup-tips { background: #F8FAFC; padding: 12px; margin-bottom: 8px !important; }
.popup-tip-icon { width: 30px; height: 30px; border-radius: 10px; background: #E8F0FB; color: #1d4f9a; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; margin-top: 0; }
.popup-tip-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; line-height: 1.6; }
.popup-tip-list li::before { content: "\F26B"; font-family: "bootstrap-icons"; color: #167a47; margin-right: 6px; font-size: 12px; }
#popupInfoBaru .popup-image { height: 56px; width: 56px; border-radius: 16px; margin-bottom: 8px; }
#popupInfoBaru .popup-divider { margin: 6px auto 10px; }
@media (max-width: 576px) {
  #popupModal .popup-image { height: 64px; width: 64px; border-radius: 18px; }
  .popup-tips, .popup-tip-item { font-size: 12.5px; }
  .popup-tip-list { font-size: 12.5px; }
  .popup-pilihan-btn { padding: 12px; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .popup-pilihan-btn, .popup-ok { transition: none; } }
.popup-pilihan-btn, #popupPerpanjanganView .popup-pilihan-btn:first-of-type, #popupPerpanjanganView .popup-pilihan-btn:last-of-type { border-color: #E2E8F0 !important; background: #fff !important; box-shadow: 0 3px 0 #E2E8F0; }
.popup-pilihan-btn:active { box-shadow: 0 0 0 #E2E8F0 !important; }
#infoPerpanjanganList .popup-tip-list { grid-template-columns: 1fr; }