/* ============================================================
   SIPUS — Custom styles (Tambahan di atas Tailwind via CDN)
   ============================================================ */

/* Animasi soft in (fallback bila Tailwind animate plugin tidak ada) */
@keyframes softIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-soft-in {
  animation: softIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Bottom nav active indicator pulse */
@keyframes navPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Pattern Islamic geometric untuk hero */
.pattern-islamic {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0);
  background-size: 24px 24px;
}

/* Book spine hover effect */
.book-spine {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.book-spine:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px -10px rgba(4, 120, 87, 0.4);
}
.book-spine:active {
  transform: translateY(-2px) scale(0.98);
  transition-duration: 0.1s;
}

/* Card modern (gradient subtle) */
.card-modern {
  background: linear-gradient(180deg, white, rgb(248 250 249));
  border: 1px solid rgb(231 229 228);
  box-shadow: 0 1px 2px rgba(4, 120, 87, 0.03), 0 4px 16px -4px rgba(4, 120, 87, 0.05);
}
.dark .card-modern {
  background: linear-gradient(180deg, rgb(29 31 28), rgb(23 25 24));
  border: 1px solid rgb(41 44 41);
}

/* Pressable (native app feel) */
.pressable {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
}
.pressable:active {
  transform: scale(0.96);
}

/* Soft shadow */
.shadow-soft {
  box-shadow: 0 1px 2px rgba(4, 120, 87, 0.04), 0 4px 12px -2px rgba(4, 120, 87, 0.06);
}
.shadow-soft-lg {
  box-shadow: 0 2px 4px rgba(4, 120, 87, 0.04), 0 8px 24px -4px rgba(4, 120, 87, 0.08), 0 16px 48px -8px rgba(4, 120, 87, 0.06);
}
.dark .shadow-soft {
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 4px 12px -2px rgb(0 0 0 / 0.3);
}

/* Glass effect */
.glass {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.dark .glass {
  background: rgba(29, 31, 28, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Scrollbar */
.scrollbar-emerald::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.scrollbar-emerald::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-emerald::-webkit-scrollbar-thumb {
  background-color: rgba(5, 150, 105, 0.4);
  border-radius: 4px;
}
.scrollbar-emerald::-webkit-scrollbar-thumb:hover {
  background-color: rgba(5, 150, 105, 0.7);
}

/* No scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Mobile sidebar drawer */
.sidebar-drawer-open {
  transform: translateX(0) !important;
}

/* Body lock scroll saat drawer terbuka */
body.sidebar-open {
  overflow: hidden;
}

/* Smooth page transition (untuk view yang baru load) */
main {
  animation: pageIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Skeleton shimmer */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, rgb(241 239 236) 25%, rgb(231 229 228) 50%, rgb(241 239 236) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.dark .skeleton {
  background: linear-gradient(90deg, rgb(29 31 28) 25%, rgb(38 40 39) 50%, rgb(29 31 28) 75%);
  background-size: 200% 100%;
}

/* Hide print elements */
@media print {
  .no-print { display: none !important; }
}

/* iOS safe area */
.pb-safe {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/* Pulse untuk scan icon */
@keyframes scanPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.scan-pulse {
  animation: scanPulse 1.5s ease-in-out infinite;
}

/* Bouncy success card */
@keyframes bouncy {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.bouncy {
  animation: bouncy 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Shake untuk error */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.shake {
  animation: shake 0.4s ease-in-out;
}

/* Tab transition */
.tab-content {
  animation: softIn 0.25s ease-out;
}