* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', Roboto, Arial, sans-serif; line-height: 1.7; color: #2d3748; background: #ffffff; overflow-x: hidden; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* Navbar */
.navbar { background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); box-shadow: 0 2px 15px rgba(0,0,0,0.06); position: sticky; top: 0; z-index: 100; }
.nav-flex { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; flex-wrap: wrap; }
.nav-links a { text-decoration: none; color: #333; margin-left: 20px; font-weight: 600; font-size: 14px; transition: color 0.25s; }
.nav-links a.active, .nav-links a:hover { color: #1b6b3a; }

/* Hero Section Modern */
.hero-modern { background: linear-gradient(135deg, #f0f9f3 0%, #e1f3e8 100%); padding: 70px 0; border-bottom: 1px solid #d4eddc; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 40px; align-items: center; }
.badge-syariah { display: inline-block; background: #1b6b3a; color: #fff; font-size: 12px; font-weight: bold; padding: 5px 14px; border-radius: 50px; margin-bottom: 15px; letter-spacing: 0.5px; }
.hero-modern h1 { font-size: 36px; line-height: 1.25; color: #134e2a; margin-bottom: 18px; }
.hero-modern p { font-size: 16px; color: #4a5568; margin-bottom: 25px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-img-modern { width: 100%; border-radius: 16px; box-shadow: 0 15px 35px rgba(27, 107, 58, 0.18); transition: transform 0.4s ease; }
.hero-img-modern:hover { transform: translateY(-6px); }

/* Section & Headings */
.section { padding: 65px 0; }
.bg-light { background: #f8faf9; }
.section-header { text-align: center; margin: 45px 0 30px; }
.section-title { font-size: 28px; color: #134e2a; font-weight: 700; margin-bottom: 10px; }
.title-divider { width: 65px; height: 4px; background: linear-gradient(90deg, #1b6b3a, #f59e0b); margin: 0 auto; border-radius: 2px; }
.text-center { text-align: center; margin-bottom: 25px; }
.content-block { max-width: 850px; margin: 0 auto 25px; font-size: 16px; color: #374151; }
.content-block p { margin-bottom: 15px; }

/* Grid & Cards */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; margin: 25px 0; }
.card, .feature-card, .testi-card {
    background: #fff; border: 1px solid #e5ece8; border-radius: 14px; overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.04); transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover, .feature-card:hover, .testi-card:hover {
    transform: translateY(-6px); box-shadow: 0 14px 30px rgba(27, 107, 58, 0.12);
}
.card img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.4s ease; }
.card:hover img { transform: scale(1.03); }
.card-body { padding: 22px; }
.card-body h3 { margin-bottom: 10px; font-size: 19px; color: #1a202c; }
.post-date { display: block; color: #718096; font-size: 12px; margin-bottom: 6px; }
.price { font-size: 21px; font-weight: 800; color: #d97706; margin-bottom: 10px; }

/* Feature Box (Icon/Image Box Elementor) */
.feature-card { padding: 28px 22px; text-align: center; border-top: 4px solid #1b6b3a; }
.feature-img-wrap img { max-height: 110px; width: auto; margin-bottom: 15px; border-radius: 8px; }
.feature-card h3 { color: #134e2a; font-size: 19px; margin-bottom: 10px; }

/* Promo Banner & Gallery */
.promo-banner { text-align: center; margin: 30px auto; max-width: 920px; }
.promo-banner img { max-width: 100%; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,0.09); }
.gallery-card { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.gallery-card img { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform 0.4s ease; }
.gallery-card:hover img { transform: scale(1.05); }

/* Testimoni */
.testi-card { padding: 26px; background: linear-gradient(180deg, #ffffff 0%, #f4faf6 100%); border-left: 4px solid #1b6b3a; }
.stars { color: #f59e0b; font-size: 18px; margin-bottom: 10px; letter-spacing: 2px; }
.testi-text { font-style: italic; color: #374151; margin-bottom: 14px; }
.testi-author { font-weight: 700; color: #134e2a; }

/* FAQ Accordion */
.faq-item { max-width: 820px; margin: 12px auto; border: 1px solid #dce7e0; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.faq-item summary { padding: 16px 20px; font-weight: 700; cursor: pointer; color: #134e2a; background: #f8fbf9; list-style: none; }
.faq-item summary:hover { background: #edf7f0; }
.faq-answer { padding: 16px 20px; border-top: 1px solid #edf2ef; color: #4a5568; }

/* Buttons & Floating WA */
.cta-center { text-align: center; margin: 28px 0; }
.btn-primary {
    display: inline-block; background: linear-gradient(135deg, #1b6b3a, #248a4c); color: #fff;
    padding: 13px 26px; border-radius: 8px; text-decoration: none; font-weight: 700;
    box-shadow: 0 4px 14px rgba(27, 107, 58, 0.28); transition: all 0.3s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(27, 107, 58, 0.38); }
.btn-outline {
    display: inline-block; border: 2px solid #1b6b3a; color: #1b6b3a;
    padding: 11px 24px; border-radius: 8px; text-decoration: none; font-weight: 700; transition: all 0.3s ease;
}
.btn-outline:hover { background: #1b6b3a; color: #fff; }
.link-more { display: inline-block; margin-top: 12px; color: #1b6b3a; font-weight: 700; text-decoration: none; }

.footer { background: #134e2a; color: #fff; text-align: center; padding: 26px 0; margin-top: 50px; }

.wa-float {
    position: fixed; bottom: 24px; right: 24px; background: #25d366; color: #fff;
    padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); z-index: 999; animation: pulseWA 2s infinite;
}

/* Animasi Scroll (Pengganti Entrance Animation Elementor) */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.15s; }

@keyframes pulseWA {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
    70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media (max-width: 768px) {
    .hero-modern h1 { font-size: 28px; }
    .nav-links { margin-top: 10px; }
    .nav-links a { margin-left: 0; margin-right: 14px; font-size: 13px; }
}