/* ==========================================
   PAPAN BUNGA MALANG - SHARED STYLE
   ========================================== */

input, select, textarea { font-size: 16px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Animasi Transisi Halus */
.slide-up { animation: slideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.slide-up-bottom { animation: slideUpBottom 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.fade-in { animation: fadeIn 0.3s ease-out; }
.pop-in { animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUpBottom {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes popIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ==========================================
   DESKTOP LAYOUT (>= 1024px)
   Hide mobile app shell, show full website
   ========================================== */
@media (min-width: 1024px) {
    .mobile-only { display: none !important; }
    body {
        background: #fdfbf7 !important;
        display: block !important;
    }
}

/* ==========================================
   MOBILE LAYOUT (< 1024px)
   Hide desktop website, keep mobile app shell
   ========================================== */
@media (max-width: 1023px) {
    .desktop-only { display: none !important; }
}

/* Smooth scroll for anchor links */
html { scroll-behavior: smooth; }

/* Desktop hero gradient overlay */
.hero-overlay {
    background: linear-gradient(135deg, rgba(6,44,29,0.85) 0%, rgba(20,83,45,0.6) 50%, rgba(6,44,29,0.3) 100%);
}

/* Marquee for trust badges */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 30s linear infinite; }

/* Card hover effects for desktop */
.card-hover {
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -10px rgba(20, 83, 45, 0.15);
}

/* Typography improvements for desktop */
@media (min-width: 1024px) {
    .desktop-h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; }
    .desktop-h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.2; }
}