* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; overflow-x: hidden; background-color: #fcfdfd; color: #1e293b; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #16a34a; border-radius: 10px; }

.hero-gradient { background: radial-gradient(circle at 50% 15%, #ecfdf5 0%, #f8fafc 55%, #ffffff 100%); }
.section-gradient { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); }

.islamic-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L35 15L45 15L37 22L40 32L30 26L20 32L23 22L15 15L25 15Z' fill='none' stroke='%23059669' stroke-opacity='0.045' stroke-width='0.5'/%3E%3C/svg%3E");
}

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

@keyframes pulse-glow { 0%,100%{box-shadow:0 0 20px rgba(22,163,74,0.15)} 50%{box-shadow:0 0 40px rgba(22,163,74,0.35)} }
.pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }

@keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
.shimmer-text {
    background: linear-gradient(90deg, #15803d, #b45309, #d97706, #15803d);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
}

.glass-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
    transition: all 0.4s ease;
}
.glass-card:hover {
    background: #ffffff;
    border-color: rgba(22, 163, 74, 0.35);
    box-shadow: 0 16px 32px -4px rgba(22, 163, 74, 0.12);
    transform: translateY(-5px);
}

.cta-primary {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #ffffff;
    position: relative; overflow: hidden; transition: all 0.4s ease;
    box-shadow: 0 10px 25px -4px rgba(22, 163, 74, 0.35);
}
.cta-primary::before {
    content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.6s ease;
}
.cta-primary:hover::before { left: 100%; }
.cta-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 35px -4px rgba(22, 163, 74, 0.45); }

.cta-gold {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #0f172a;
    position: relative; overflow: hidden; transition: all 0.4s ease;
    box-shadow: 0 10px 25px -4px rgba(217, 119, 6, 0.3);
}
.cta-gold::before {
    content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transition: left 0.6s ease;
}
.cta-gold:hover::before { left: 100%; }
.cta-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 35px -4px rgba(217, 119, 6, 0.45); }

.cta-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); color: #ffffff; transition: all 0.4s ease; box-shadow: 0 10px 25px -4px rgba(37,211,102,0.35); }
.cta-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 16px 35px -4px rgba(37,211,102,0.45); }

.cta-outline { border: 2px solid #16a34a; color: #16a34a; transition: all 0.4s ease; }
.cta-outline:hover { background: #16a34a; color: white; transform: translateY(-2px); }

.counter-box {
    background: #ffffff;
    border: 1px solid rgba(22, 163, 74, 0.2);
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.05);
}

.pricing-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
    transition: all 0.5s ease;
}
.pricing-card:hover { border-color: rgba(234, 179, 8, 0.5); transform: translateY(-6px); box-shadow: 0 20px 35px -5px rgba(234, 179, 8, 0.15); }
.pricing-popular {
    background: #ffffff;
    border: 2px solid rgba(234, 179, 8, 0.6); transform: scale(1.05);
}
.pricing-popular:hover { transform: scale(1.05) translateY(-6px); }

.testimonial-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
    transition: all 0.4s ease;
}
.testimonial-card:hover {
    border-color: rgba(22, 163, 74, 0.35);
    box-shadow: 0 16px 32px -4px rgba(22, 163, 74, 0.1);
    transform: translateY(-4px);
}

.gallery-item { transition: all 0.5s ease; }
.gallery-item:hover { transform: scale(1.03); }
.gallery-item:hover .gallery-overlay { opacity: 1; }

.faq-item { border-bottom: 1px solid rgba(226, 232, 240, 0.85); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-item.active .faq-answer { max-height: 300px; }
.faq-item.active .faq-icon { transform: rotate(180deg); }

.mobile-menu { transform: translateX(100%); transition: transform 0.3s ease; }
.mobile-menu.active { transform: translateX(0); }

/* Desktop Navbar Dropdown */
.nav-dropdown .nav-dropdown-menu { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translate(-50%, 0) !important; }
.nav-dropdown:hover .nav-dropdown-arrow,
.nav-dropdown.is-open .nav-dropdown-arrow { transform: rotate(180deg); }
.nav-dropdown.is-open #produkDropdownBtn { color: #047857 !important; }

/* Mobile Accordion Submenu */
.mobile-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.mobile-accordion.active .mobile-accordion-content { max-height: 120px; }
.mobile-accordion.active .mobile-accordion-arrow { transform: rotate(180deg); }

.navbar-scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

.wave-divider { position:absolute; bottom:0; left:0; width:100%; overflow:hidden; line-height:0; }
.wave-divider svg { position:relative; display:block; width:calc(100% + 1.3px); height:60px; }

.wa-float { position:fixed; bottom:30px; right:30px; z-index:999; animation: float 3s ease-in-out infinite; }

.section-title::after {
    display: none !important;
}

.hero-product-glow {
    filter: drop-shadow(0 0 30px rgba(22,163,74,0.3)) drop-shadow(0 10px 40px rgba(0,0,0,0.4));
}

.particle {
    position:absolute; width:4px; height:4px;
    background: rgba(22,163,74,0.3); border-radius:50%;
    animation: float 8s ease-in-out infinite;
}

/* Hero Product Responsive Layout & Floating Cards */
.hero-product-container {
    width: 290px;
    height: 290px;
}
@media (min-width: 640px) {
    .hero-product-container {
        width: 420px;
        height: 420px;
    }
}
@media (min-width: 1024px) {
    .hero-product-container {
        width: 520px;
        height: 520px;
    }
}

.hero-card {
    position: absolute;
    padding: 0.5rem 0.75rem;
    z-index: 20;
}
@media (min-width: 640px) {
    .hero-card {
        padding: 0.875rem;
    }
}

.hero-card-1 {
    top: 5px;
    left: -15px;
    transform: rotate(-6deg);
    animation-delay: 0.3s;
}
@media (min-width: 640px) {
    .hero-card-1 {
        top: 10px;
        left: -30px;
    }
}
@media (min-width: 1024px) {
    .hero-card-1 {
        top: 10px;
        left: -50px;
    }
}

.hero-card-2 {
    top: 10px;
    right: -15px;
    transform: rotate(5deg);
    animation-delay: 1.7s;
}
@media (min-width: 640px) {
    .hero-card-2 {
        top: 15px;
        right: -25px;
    }
}
@media (min-width: 1024px) {
    .hero-card-2 {
        top: 15px;
        right: -40px;
    }
}

.hero-card-3 {
    top: 48%;
    right: -20px;
    transform: rotate(-3deg);
    animation-delay: 0.9s;
}
@media (min-width: 640px) {
    .hero-card-3 {
        top: 50%;
        right: -45px;
    }
}
@media (min-width: 1024px) {
    .hero-card-3 {
        top: 50%;
        right: -70px;
    }
}

.hero-card-4 {
    bottom: -20px;
    right: -5px;
    transform: rotate(7deg);
    animation-delay: 2.4s;
}
@media (min-width: 640px) {
    .hero-card-4 {
        bottom: -30px;
        right: -10px;
    }
}
@media (min-width: 1024px) {
    .hero-card-4 {
        bottom: -35px;
        right: -15px;
    }

}

.hero-card-5 {
    bottom: 10px;
    left: -15px;
    transform: rotate(-4deg);
    animation-delay: 3.1s;
}
@media (min-width: 640px) {
    .hero-card-5 {
        bottom: 15px;
        left: -35px;
    }
}
@media (min-width: 1024px) {
    .hero-card-5 {
        bottom: 20px;
        left: -60px;
    }
}


/* ========================================================
   UNIVERSAL BRIGHT PROFESSIONAL THEME (DESKTOP & MOBILE)
   ======================================================== */

body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* Sections Backgrounds */
body section:not(#hero):not(#cta-banner),
section.bg-dark,
section.section-gradient {
    background-color: #ffffff !important;
}

section:nth-of-type(even):not(#hero):not(#cta-banner) {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
}

/* Hero Section */
#hero {
    padding-top: 5rem;
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 55%, #fefce8 100%) !important;
}
#hero > .absolute[style*="heromasjid"] {
    opacity: 0.08 !important;
}
#hero .wave-divider path {
    fill: #ffffff !important;
}

/* General Text Contrast Across Light Sections */
section:not(#cta-banner) .text-white,
section:not(#cta-banner) h1.text-white,
section:not(#cta-banner) h2.text-white,
section:not(#cta-banner) h3.text-white,
section:not(#cta-banner) h4.text-white {
    color: #0f172a !important;
}

section:not(#cta-banner) .text-gray-300,
section:not(#cta-banner) .text-gray-400,
section:not(#cta-banner) .text-gray-500 {
    color: #475569 !important;
}

section:not(#cta-banner) .text-primary-400,
section:not(#cta-banner) .text-primary-300 {
    color: #047857 !important;
}

section:not(#cta-banner) .text-gold-400,
section:not(#cta-banner) .text-gold-300 {
    color: #b45309 !important;
}

/* Buttons Contrast */
#navbar .cta-primary,
.cta-primary,
.cta-whatsapp,
section:not(#cta-banner) .cta-primary,
section:not(#cta-banner) .cta-whatsapp {
    color: #ffffff !important;
}

.cta-gold,
section:not(#cta-banner) .cta-gold {
    color: #0f172a !important;
}

/* Cards & Glassmorphism */
.glass-card,
.counter-box,
.pricing-card,
.testimonial-card,
#diagram .glass-card,
#kegiatan .glass-card,
#stats .glass-card,
.hero-card.glass-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.07) !important;
}

.hero-card.glass-card {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Mobile & Desktop Navbar */
#navbar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
}

#mobileToggle,
#mobileClose {
    color: #0f172a !important;
}

#mobileMenu {
    background: #ffffff !important;
    border-left: 1px solid #e2e8f0 !important;
    box-shadow: -10px 0 40px rgba(15, 23, 42, 0.15) !important;
}

#mobileMenu .mobile-link,
#mobileMenu button span {
    color: #1e293b !important;
}

#mobileMenu .mobile-link:hover,
#mobileMenu button:hover span {
    color: #047857 !important;
}

#mobileMenu .mobile-accordion-arrow {
    color: #64748b !important;
}

/* Perbandingan Section */
#perbandingan .card-dark-header h3,
#perbandingan .card-dark-header p {
    color: #ffffff !important;
}

#perbandingan .promo-price-box,
#perbandingan .promo-price-box .promo-price {
    color: #ffffff !important;
}

#perbandingan .promo-tag {
    color: #dc2626 !important;
    background-color: #ffffff !important;
}

section:not(#cta-banner) .text-gold-500,
section:not(#cta-banner) .text-gold-400,
section:not(#cta-banner) .text-gold-300 {
    color: #d97706 !important;
}

#perbandingan .rounded-3xl {
    box-shadow: 0 15px 35px -10px rgba(15, 23, 42, 0.1) !important;
}

/* Diagram Highlights & Software Tabs */
#diagram .bg-dark\/60 {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04) !important;
}

#diagram .software-tab-btn:not(.active) {
    background: #ffffff !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}

#diagram .software-tab-btn:not(.active):hover {
    background: #ecfdf5 !important;
    color: #047857 !important;
}

/* FAQ Items */
.faq-item {
    border-bottom: 1px solid #e2e8f0 !important;
}

.faq-question h4 {
    color: #0f172a !important;
}

/* Footer Section */
footer#kontak {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}

footer#kontak .text-white {
    color: #0f172a !important;
}

footer#kontak .text-gray-400,
footer#kontak .text-gray-500 {
    color: #475569 !important;
}

footer#kontak a.text-gray-400:hover,
footer#kontak a.text-gray-500:hover {
    color: #047857 !important;
}

footer#kontak .border-primary-500\/10 {
    border-color: #e2e8f0 !important;
}

/* CTA Banner (Preserved high impact dark emerald) */
#cta-banner {
    background: linear-gradient(135deg, #064e3b 0%, #047857 55%, #14532d 100%) !important;
}
#cta-banner .font-arabic,
#cta-banner p.font-arabic,
#cta-banner .text-white,
#cta-banner h2,
#cta-banner a[href^="tel:"] {
    color: #ffffff !important;
}
#cta-banner .text-primary-100 {
    color: #d1fae5 !important;
}
#cta-banner .text-gold-300,
#cta-banner span.text-gold-300,
#cta-banner i.text-gold-300 {
    color: #fde047 !important;
}