/* --- 1. GLOBAL & VARIABLES --- */
:root {
    --primary: #363466;
    --primary-dark: #130b7e;
    --secondary: #0ea5e9;
    --accent: #f59e0b;
    --dark: #0f172a;
    --gray: #64748b;
    --light-bg: #f8fafc;
    --white: #ffffff;
    --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    color: var(--dark); 
    line-height: 1.6; 
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-padding { padding: 0px 0; }
.text-center { text-align: center; }
.text-primary { color: var(--primary); }
.mb-4 { margin-bottom: 2.5rem; }

.section-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; }
.section-title-sm { font-size: 2rem; font-weight: 800; margin-bottom: 1.5rem; }

/* --- 2. BUTTONS --- */
.btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 700;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    border: none;
}
.btn-primary {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4);
}
.btn-primary:hover { transform: translateY(-3px); background: var(--primary-dark); }
.btn-outline { border: 2px solid var(--primary); color: var(--primary); background: transparent; }
.btn-outline:hover { background: var(--primary); color: var(--white); }
.btn-full { width: 100%; text-align: center; margin-top: 20px; }
.btn-nav { padding: 10px 20px; }

/* --- 3. NAVBAR --- */
.navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    padding: 20px 0;
    border-bottom: 1px solid #e2e8f0;
}
.nav-content { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.5rem; font-weight: 800; color: var(--primary); text-decoration: none; display: flex; align-items: center; gap: 10px; }
.nav-links { display: flex; gap: 30px; align-items: center; list-style: none; }
.nav-links a { font-weight: 600; color: #b1b1b1; text-decoration: none; transition: 0.3s; }
.nav-links a:hover { color: var(--primary); }
.hamburger { display: none; font-size: 1.5rem; cursor: pointer; color: var(--primary); }

/* --- 4. HERO --- */
.hero { padding-top: 160px; padding-bottom: 100px; background: radial-gradient(circle at 90% 10%, #eef2ff 0%, #ffffff 50%); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.hero-text h1 { font-size: 2.8rem; line-height: 1.2; margin-bottom: 20px; font-weight: 800; }
.hero-btns { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 20px; }
.hero-image img { width: 100%; border-radius: 24px; box-shadow: var(--shadow-lg); }

/* --- 5. PAIN POINTS --- */
.pain-section { background-color: var(--light-bg); }
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
.pain-card { background: var(--white); padding: 40px; border-radius: 20px; box-shadow: var(--shadow); border-bottom: 4px solid #ef4444; }
.pain-card i { font-size: 2.5rem; color: #ef4444; margin-bottom: 0px; }

/* --- 6. FEATURES --- */
.feature-row { display: flex; align-items: center; justify-content: space-between; gap: 50px; margin-bottom: 80px; }
.feature-row:nth-child(even) { flex-direction: row-reverse; }
.feature-content, .feature-image { flex: 1; }
.feature-image img { width: 100%; border-radius: 20px; box-shadow: var(--shadow); }
.feature-icon { width: 60px; height: 60px; background: #e0e7ff; color: var(--primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 20px; }

/* Update Bagian 7. PRICING agar Cerdas & Responsif */
.pricing-grid { 
    display: flex; 
    justify-content: center; 
    gap: 60px; 
    flex-wrap: nowrap; /* KUNCI: Izinkan turun ke bawah kalau sempit */
    margin-top: 20px; 
}

.pricing-card { 
    background: var(--white); 
    border-radius: 24px; 
    padding: 40px; 
    
    /* LOGIKA BARU: */
    flex: 1 1 300px; /* Lebar ideal 300px, tapi bisa melar */
    max-width: 380px; /* Jangan lebih besar dari ini */
    width: 100%; /* Agar aman di HP */
    
    border: 1px solid #e2e8f0; 
    position: relative; 
    transition: 0.3s; 
}
.pricing-card.popular { border: 2px solid var(--primary); transform: scale(1.05); box-shadow: var(--shadow-lg); }
.price { font-size: 2.5rem; font-weight: 800; margin: 10px 0; }
.price span { font-size: 1rem; color: var(--gray); font-weight: 400; }
.badge-promo { background: var(--accent); color: white; padding: 4px 12px; border-radius: 50px; font-size: 0.8rem; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-weight: 700; }
.pricing-list { list-style: none; color: var(--gray); }
.pricing-list li { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.pricing-list li i { color: var(--primary); }

/* --- 8. TRUST & FAQ --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.trust-item { display: flex; gap: 20px; margin-bottom: 10px; }
.trust-icon-box { width: 50px; height: 50px; background: #dbeafe; color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.faq-item { background: var(--white); border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 15px; overflow: hidden; }
.faq-item summary { padding: 20px; cursor: pointer; font-weight: 700; display: flex; justify-content: space-between; align-items: center; list-style: none; }
.faq-item p { padding: 0 20px 20px; color: var(--gray); border-top: 1px solid #f1f5f9; padding-top: 15px; }

/* --- 9. FOOTER --- */
footer { background: var(--dark); color: #94a3b8; padding: 80px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.logo-white { color: var(--white); margin-bottom: 15px; }
.footer-links h4 { color: var(--white); margin-bottom: 20px; }
.footer-links ul { list-style: none; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: inherit; text-decoration: none; transition: 0.3s; }
.footer-links a:hover { color: var(--white); }
.footer-bottom { text-align: center; border-top: 1px solid #334155; padding-top: 20px; font-size: 0.9rem; }

/* --- 10. OPTIMASI MOBILE (PRO VERSION) --- */

/* Pengaturan untuk Tablet & HP */
@media (max-width: 992px) {
    .hero-grid, .footer-grid, .grid-2 { 
        grid-template-columns: 1fr; 
        text-align: center; 
    }
    
    .hero-text h1 { font-size: 2.8rem; }
    
    .feature-row { 
        flex-direction: column !important; 
        text-align: center;
        gap: 30px;
    }
    
    .feature-icon { margin: 0 auto 20px; }
}


/* --- OPTIMASI TOTAL TAMPILAN HP (GABUNGAN) --- */
@media (max-width: 768px) {
    
    /* 1. Pengaturan Dasar & Spasi */
    .section-padding { padding: 40px 0; } /* Mengurangi scroll panjang */
    .container { padding: 0 15px; }

    /* Pastikan tombol hamburger tetap di tengah secara vertikal */
    .hamburger {
        display: block !important; 
        font-size: 1.2rem;
        padding: 5px;
        margin-top: 0;
    }

    /* --- Merampingkan Navbar di HP --- */
    .navbar {
        padding: 5px 0 !important; /* Mengurangi padding dari 20px menjadi 10px */
        border-bottom: 1px solid #f1f5f9;
    }

    .nav-links {
        display: none; /* Sembunyikan menu tulisan asli */
        position: absolute;
        top: 70px;
        left: 15px;
        right: 15px;
        background: var(--white);
        flex-direction: column;
        padding: 25px;
        border-radius: 15px;
        box-shadow: var(--shadow-lg);
        border: 1px solid #eee;
        z-index: 1000;
    }

    .nav-links.active {
        display: block; /* Muncul saat tombol diklik */
    }

    /* 3. Hero Section (Pusatkan teks agar rapi) */
    .hero { padding-top: 100px; padding-bottom: 40px; }
    .hero-text h1 { 
        font-size: 1.8rem; 
        line-height: 1.2; 
        text-align: center; 
    }
    .hero-text p { 
        text-align: center; 
        font-size: 0.9rem; 
        margin-bottom: 20px; 
    }
    .hero-btns { justify-content: center; }

    /* 4. Sistem Slider Horizontal (Masalah, Harga, Testimoni) */
    /* Solusi agar tidak scroll panjang & kartu tidak kurus/tercekik */
    .pain-grid, .pricing-grid, .testimonial-grid {
        display: flex !important;
        overflow-x: auto;
        gap: 15px;
        padding: 10px 5px 30px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none; /* Hilangkan garis scroll di Firefox */
    }

    /* Hilangkan garis scroll di Chrome/Safari */
    .pain-grid::-webkit-scrollbar, 
    .pricing-grid::-webkit-scrollbar, 
    .testimonial-grid::-webkit-scrollbar {
        display: none;
    }

    /* Atur Ukuran Kartu dalam Slider */
    .pain-card, .pricing-card, .testimonial-card {
        flex: 0 0 85%; /* Kartu lebar & lega (85% layar) */
        min-width: 270px;
        scroll-snap-align: center;
        margin: 0;
        padding: 25px !important;
    }

    /* 5. Optimasi Gambar Fitur */
    .feature-image img {
        max-height: 200px; /* Agar gambar tidak memenuhi layar */
        width: auto;
        margin: 0 auto;
        object-fit: contain;
    }

    /* 6. FAQ & Keamanan Data */
    .faq-item summary { padding: 15px; font-size: 0.9rem; text-align: left; }
    .faq-item p { font-size: 0.85rem; text-align: left; }
    .grid-2 { gap: 30px; }

    /* 7. Footer & Tombol WA */
    .footer-grid { text-align: center; gap: 30px; }
    .footer-links ul { padding: 0; }
    
    /* --- Tombol WA: Hanya Ikon & Bulat di HP --- */
    .whatsapp-btn {
        bottom: 20px !important;
        right: 20px !important;
        width: 60px !important;      /* Lebar tetap agar bulat */
        height: 60px !important;     /* Tinggi tetap agar bulat */
        padding: 0 !important;       /* Hapus padding agar ikon di tengah */
        border-radius: 50% !important; /* Buat jadi bulat sempurna */
        justify-content: center !important; /* Ikon ke tengah horizontal */
        align-items: center !important;    /* Ikon ke tengah vertikal */
        display: flex !important;
    }

    .whatsapp-btn span {
        display: none !important;    /* Hilangkan tulisan "Tanya Admin" */
    }

    .whatsapp-btn i {
        font-size: 32px !important;  /* Perbesar sedikit ukuran ikonnya */
        margin: 0 !important;
    }

    /* --- Perbaikan Akhir Slider Harga --- */
    #pricing .pricing-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        /* KUNCI UTAMA: Ubah center menjadi flex-start */
        justify-content: flex-start !important; 
        gap: 20px !important;
        padding: 20px 5px 40px !important; /* Beri ruang di kiri agar Paket Nur muncul */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }

    #pricing .pricing-grid::-webkit-scrollbar {
        display: none !important;
    }

    #pricing .pricing-card {
        /* flex-shrink: 0 memastikan kartu tidak mengkerut/gepeng */
        flex: 0 0 82% !important; 
        flex-shrink: 0 !important; 
        scroll-snap-align: center;
        padding: 30px !important;
        margin: 0 !important;
        min-width: 280px !important;
    }

    footer .logo img {
        height: 45px !important;    /* Logo footer juga menyesuaikan di HP */
        
    }

     .nav-content {
        height: 50px !important; /* Mengunci tinggi maksimal navbar agar ramping */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Menyeimbangkan Logo & Tulisan agar muat di baris yang ramping */
    .logo img {
        height: 28px !important; /* Kecilkan sedikit logo agar bar tidak terdorong melebar */
        width: auto;
    }

    .logo span {
        font-size: 1.3rem !important; /* Perkecil sedikit teks agar seimbang dengan logo kecil */
        white-space: nowrap; /* Mencegah tulisan turun ke bawah (patah) */
    }

}

/*Batas bawah tampilan HP*/

/* --- WHATSAPP FLOATING BUTTON --- */
.whatsapp-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366; /* Warna khas WhatsApp */
    color: white;
    padding: 12px 20px;
    border-radius: 50px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transition: all 0.3s ease;
}

.whatsapp-btn:hover {
    transform: scale(1.1); /* Sedikit membesar saat disentuh */
    background-color: #128c7e;
}


/* --- TESTIMONIALS --- */
.testimonial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
}

.testimonial-card {
    background: var(--light-bg);
    padding: 30px;
    border-radius: 20px;
    border-left: 5px solid var(--primary);
    font-style: italic;
}

.user-info {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    font-style: normal;
}

.user-info strong { color: var(--dark); }
.user-info span { font-size: 0.9rem; color: var(--gray); }


/* Menata Logo dan Tulisan agar sejajar horizontal */
.logo {
    display: flex;
    align-items: center;
    gap: 12px; /* Jarak antara gambar logo dan tulisan */
    text-decoration: none;
    font-weight: 800;
    color: var(--primary); /* Warna tulisan judul */
}

.logo img {
    height: 40px; /* Ukuran gambar logo */
    width: auto;
}

/* Tulisan judul di Footer agar tetap putih */
.logo-white {
    color: var(--white) !important;
}


/* --- APP SHOWCASE SLIDER --- */
.app-slider {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    padding: 20px 0 50px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Hilangkan scrollbar */
}

.app-slider::-webkit-scrollbar {
    display: none;
}

.app-card {
    flex: 0 0 70%; /* Di layar besar, kartu terlihat 70% */
    scroll-snap-align: center;
    background: var(--white);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.app-card img {
    width: 100%;
    height: auto;
    display: block;
}

.app-caption {
    padding: 20px;
    text-align: center;
}

/* --- RESPONSIVE UNTUK HP --- */
@media (max-width: 768px) {
    .app-card {
        flex: 0 0 90%; /* Di HP, gambar hampir memenuhi lebar layar */
    }
    
    .app-slider {
        gap: 15px;
    }

    /* Menyesuaikan gambar aplikasi agar tetap jelas di HP */
    .app-card img {
        height: 220px; /* Batasi tinggi agar tidak terlalu panjang */
        object-fit: cover; /* Gambar tetap rapi meski dipotong sedikit */
        object-position: top left; /* Fokuskan pada area menu dashboard */
    }

    .app-card {
        flex: 0 0 92% !important; /* Buat kartu hampir selebar layar HP */
        border: 1px solid #eee;
    }
}

/* Style saat navbar di-scroll */
.navbar.navbar-scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 10px 0 !important; /* Otomatis ramping di desktop maupun HP */
}


/* --- COMPARISON SECTION --- */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 50px;
}

.comp-card {
    padding: 40px;
    border-radius: 24px;
    transition: transform 0.3s ease;
}

/* Sisi Manual (Warna Merah Halus) */
.comp-card.manual {
    background: #fff1f2;
    border: 1px solid #fecdd3;
}

/* Sisi Bayyina (Warna Hijau/Teal Cerah) */
.comp-card.digital {
    background: #f0fdf4;
    border: 2px solid var(--primary);
    box-shadow: var(--shadow-lg);
}

.comp-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.comp-header i { font-size: 2rem; }
.manual .comp-header i { color: #e11d48; }
.digital .comp-header i { color: var(--primary); }

.comp-list { list-style: none; }
.comp-list li {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1.05rem;
}

.manual .comp-list li i { color: #fb7185; margin-top: 5px; }
.digital .comp-list li i { color: var(--primary); margin-top: 5px; }

/* Responsif Layar HP */
@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr; /* Tumpuk ke bawah di HP */
    }
    .comp-card {
        padding: 30px 20px;
    }
    .comp-list li {
        font-size: 0.95rem;
    }
    /* --- CSS PERBANDINGAN BERSEBELAHAN DI HP --- */
    .comp-slider {
        display: flex !important;           /* Ubah grid jadi flex agar menyamping */
        overflow-x: auto !important;        /* Aktifkan fungsi geser */
        gap: 15px !important;               /* Jarak antar kartu */
        padding: 10px 5px 30px !important; 
        scroll-snap-type: x mandatory;      /* Efek magnet saat digeser */
        scrollbar-width: none;              /* Hilangkan garis scroll */
    }

    .comp-slider::-webkit-scrollbar {
        display: none;                      /* Hilangkan garis scroll di Chrome/Safari */
    }

    .comp-card {
        flex: 0 0 85% !important;           /* Kartu memenuhi 85% lebar layar */
        scroll-snap-align: center;          /* Berhenti di tengah saat digeser */
        min-width: 280px;
    }

    /* Memperkecil teks sedikit agar muat di kartu HP */
    .comp-list li {
        font-size: 0.9rem !important;
        line-height: 1.4;
    }
}

/* --- CTA TRANSFORMATION --- */
.cta-transformation {
    text-align: center;
    margin-top: 50px;
    padding: 0 20px;
}

.btn-cta-large {
    padding: 18px 40px !important;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border-radius: 50px !important; /* Membuat tombol lebih lonjong/modern */
}

.cta-note {
    margin-top: 15px;
    font-size: 0.85rem;
    color: var(--gray);
    font-style: italic;
}

/* Penyesuaian untuk Layar HP */
@media (max-width: 768px) {
    .cta-transformation {
        margin-top: 30px;
    }
    
    .btn-cta-large {
        width: 100%; /* Tombol memenuhi lebar layar di HP agar mudah diklik */
        justify-content: center;
        font-size: 1rem;
        padding: 15px 25px !important;
    }
}


/* Membuat gambar fitur memiliki kedalaman */
.feature-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(79, 70, 229, 0.1); /* Bayangan biru tipis */
    transition: transform 0.4s ease;
}

.feature-image img:hover {
    transform: scale(1.03); /* Efek zoom halus saat disentuh */
}

/* Responsif HP: Pastikan gambar tidak terlalu raksasa */
@media (max-width: 768px) {
    .feature-image {
        margin-top: 20px;
    }
    .feature-image img {
        max-height: 250px;
        object-fit: cover; /* Agar potongan screenshot tetap rapi */
    }
}



/* --- PAIN SECTION ELEGANT VERSION --- */
.pain-section {
    background-color: #ffffff; /* Putih bersih */
}

.badge-danger {
    background: #fff1f2;
    color: #e11d48;
    padding: 8px 20px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: inline-block;
    margin-bottom: 20px;
    border: 1px solid #ffe4e6;
}

.section-subtitle {
    color: #64748b;
    max-width: 600px;
    margin: 0 auto 50px;
    font-size: 1.1rem;
}

.pain-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.pain-card {
    background: #f1f5f9;
    padding: 50px 35px;
    border-radius: 30px;
    border: 1px solid #f1f5f9;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    z-index: 1;
}

.pain-icon-wrapper {
    width: 70px;
    height: 70px;
    background: #fff1f2;
    color: #e11d48;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    font-size: 2rem;
    margin-bottom: 30px;
    transition: all 0.4s ease;
}

.pain-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: #1e293b;
}

.pain-card p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.8;
}

/* --- EFEK HOVER PREMIUM --- */
.pain-card:hover {
    transform: translateY(-12px);
    border-color: #ffe4e6;
    box-shadow: 0 25px 50px -12px rgba(225, 29, 72, 0.08);
}

/* FIX: Agar ikon tidak hilang dan tetap kontras */
.pain-card:hover .pain-icon-wrapper {
    background: #e11d48; /* Background jadi merah */
    box-shadow: 0 10px 20px rgba(225, 29, 72, 0.3);
}

.pain-card:hover .pain-icon-wrapper i {
    color: #ffffff !important; /* Paksa ikon menjadi putih bersih */
    transform: scale(1.1);
}

/* Responsive Mobile */
@media (max-width: 992px) {
    .pain-grid { grid-template-columns: 1fr; }
    .pain-card { text-align: center; }
    .pain-icon-wrapper { margin: 0 auto 25px; }
}


/* --- HERO OPTIMIZATION --- */

/* 1. Badge di atas Judul */
.hero-badge {
    display: inline-block;
    background: rgba(79, 70, 229, 0.1); /* Latar Biru Transparan (Elegan) */
    color: var(--primary); /* Teks & Ikon Biru */
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px 16px;
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(79, 70, 229, 0.2);
}

.hero-badge i {
    margin-right: 6px;
    /* Tidak perlu set warna lagi, otomatis ikut warna teks (Biru) */
}

/* 2. Fokus pada kalimat Branding di paragraf */
.hero-text p strong {
    color: var(--dark);
    font-weight: 600;
}

/* 3. Note kecil di bawah tombol */
.trust-note {
    margin-top: 0px;
    font-size: 0.85rem;
    color: var(--gray);
    opacity: 0.8;
}
.text-success { color: #10b981; }

/* 4. Animasi Halus pada Gambar Utama */
.hero-image img {
    animation: float 6s ease-in-out infinite; /* Efek melayang perlahan */
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); } /* Bergerak ke atas sedikit */
    100% { transform: translateY(0px); }
}


/* --- Tambahan Efek Interaktif Pain Section --- */

/* 1. Definisikan Animasi Getar (Shake) */
@keyframes worry-shake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); } /* Miring kiri dikit */
    75% { transform: rotate(10deg); }  /* Miring kanan dikit */
    100% { transform: rotate(0deg); }
}

/* 2. Terapkan saat Mouse Hover di Kartu */
.pain-card:hover .pain-icon-wrapper i {
    animation: worry-shake 0.5s ease-in-out; /* Bergetar selama 0.5 detik */
    color: #ffffff !important; /* Pastikan tetap putih */
}

/* 3. Perhalus Bayangan Kartu */
.pain-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pain-card:hover {
    transform: translateY(-10px); /* Kartu naik ke atas */
    box-shadow: 0 20px 40px rgba(225, 29, 72, 0.15); /* Bayangan merah halus */
    border-color: #ffe4e6;
}


/* Membuat Kartu Bayyina Sedikit Lebih Menonjol (Dominan) */
.comp-card.digital {
    transform: scale(1.03); /* Memperbesar 3% agar terlihat lebih 'superior' */
    box-shadow: 0 15px 30px rgba(16, 185, 129, 0.15); /* Bayangan hijau lembut */
    border: 2px solid #10b981; /* Border hijau tegas */
    z-index: 2; /* Memastikan dia di atas */
    position: relative;
}

/* Responsif: Kembalikan normal di HP agar tidak melebar keluar layar */
@media (max-width: 768px) {
    .comp-card.digital {
        transform: none;
    }
}


/* Animasi Denyut Jantung untuk Tombol CTA Utama */
@keyframes pulse-purple {
    0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(79, 70, 229, 0); }
    100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}

.btn-cta-large {
    animation: pulse-purple 2s infinite; /* Berdenyut selamanya */
}


.badge-premium {
    background: linear-gradient(135deg, #fcd34d, #f59e0b); /* Warna Emas */
    color: #78350f; /* Coklat tua agar kontras */
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 10px;
    box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
}


/* --- UPDATE: BINGKAI LEBIH TEGAS --- */

.window-frame {
    border-radius: 12px;
    /* Ganti border jadi lebih abu-abu agar terlihat garisnya */
    border: 1px solid #cbd5e1; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    background: white;
    overflow: hidden;
    transition: transform 0.4s ease;
}

.window-frame::before {
    content: '';
    display: block;
    height: 36px;
    /* Ganti background jadi abu-abu yang lebih gelap (kontras) */
    background-color: #e2e8f0; 
    border-bottom: 1px solid #cbd5e1;
    
    /* Titik Mac Style */
    background-image: radial-gradient(circle, #ff5f56 5px, transparent 6px),
                      radial-gradient(circle, #ffbd2e 5px, transparent 6px),
                      radial-gradient(circle, #27c93f 5px, transparent 6px);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* Posisikan titik di KIRI (Standar Internasional) agar lebih rapi */
    background-position: 15px center, 35px center, 55px center; 
}

/* --- BINGKAI RESPONSIF (CERDAS) --- */

.window-frame {
    /* 1. Settingan Dasar (Untuk HP) */
    width: 100%; /* Di HP wajib Full agar tidak kekecilan */
    max-width: 100%; 
    margin: 0 auto;
    
    /* Dekorasi Cantik (Tetap Sama) */
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Shadow di HP lebih tipis */
    background: white;
    overflow: hidden;
    transition: transform 0.4s ease;
}

/* 2. Settingan Khusus Laptop/PC (Layar Besar) */
@media (min-width: 992px) {
    .window-frame {
        max-width: 85%; /* Baru mengecil jadi 85% kalau layarnya lebar */
        box-shadow: 0 20px 50px rgba(0,0,0,0.1); /* Shadow di Laptop lebih tebal */
    }
}

/* --- BAGIAN HEADER & TITIK (TETAP SAMA) --- */
.window-frame::before {
    content: '';
    display: block;
    height: 30px; /* Di HP header barnya agak tipis biar hemat tempat */
    background-color: #e2e8f0; 
    border-bottom: 1px solid #cbd5e1;
    background-image: radial-gradient(circle, #ff5f56 5px, transparent 6px),
                      radial-gradient(circle, #ffbd2e 5px, transparent 6px),
                      radial-gradient(circle, #27c93f 5px, transparent 6px);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 10px center, 25px center, 40px center; /* Titik dirapatkan dikit */
}

@media (min-width: 992px) {
    .window-frame::before {
        height: 36px; /* Di Laptop balik normal (lebih tinggi) */
        background-position: -20px center, 0px center, 20px center;
    }
}


/* --- PRICING OPTIMIZATION --- */

.price-container {
    margin: 10px 0;
}

.old-price {
    font-size: 1rem;
    color: #94a3b8; /* Warna abu-abu pudar */
    text-decoration: line-through; /* Efek coret */
    font-weight: 500;
    margin-bottom: -5px; /* Rapatkan dengan harga baru */
}

.current-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--dark);
}

.current-price span {
    font-size: 1rem;
    color: var(--gray);
    font-weight: 400;
}

/* Update Tombol agar lebih Menggigit */
.btn-full {
    width: 100%;
    display: block;
    padding: 12px;
    border-radius: 12px;
    font-weight: 700;
    text-align: center;
}


/* --- FAQ & TRUST STYLING --- */

/* 1. Styling Item FAQ (Kotak Putih) */
.faq-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    overflow: hidden; /* Agar isi tidak keluar */
}

.faq-item:hover {
    border-color: var(--primary); /* Berubah warna saat disentuh */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 2. Bagian Judul (Pertanyaan) */
.faq-item summary {
    padding: 15px 20px;
    cursor: pointer;
    font-weight: 600;
    color: var(--dark);
    list-style: none; /* Hilangkan panah default browser */
    display: flex;
    justify-content: space-between; /* Teks di kiri, panah di kanan */
    align-items: center;
}

/* Hilangkan marker default di beberapa browser */
.faq-item summary::-webkit-details-marker {
    display: none;
}

/* 3. Animasi Panah Berputar */
.faq-item summary i {
    transition: transform 0.3s ease;
    color: var(--primary);
}

/* Saat FAQ dibuka, panah nunduk */
.faq-item details[open] summary i {
    transform: rotate(180deg); 
}

/* 4. Bagian Isi (Jawaban) */
.faq-item p {
    padding: 0 20px 20px; /* Spasi di kiri kanan bawah */
    margin: 0;
    color: var(--gray);
    font-size: 0.95rem;
    line-height: 1.6;
    border-top: 1px solid #f1f5f9; /* Garis pemisah tipis */
    padding-top: 15px;
}


/* Styling Ikon Keamanan */
.trust-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    text-align: left;
}

.trust-icon-box {
    min-width: 50px;
    height: 50px;
    background: #ecfdf5; /* Hijau muda segar */
    color: #10b981; /* Ikon Hijau */
    border-radius: 50%; /* Bulat penuh */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-right: 15px;
}


/* --- UPDATE TAMPILAN KARTU TARGET (Class tetap testimonial-card) --- */

.testimonial-card {
    background: #ffffff; /* Kartu tetap putih */
    padding: 40px 30px;
    border-radius: 16px; /* Sudut melengkung */
    
    /* Agar terlihat terpisah dari background, kita beri garis & bayangan */
    border: 3px solid #e2e8f0; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.02); /* Bayangan tipis */
    
    height: 100%; /* Agar tinggi kedua kartu sama */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efek saat disentuh mouse */
.testimonial-card:hover {
    transform: translateY(-5px); /* Naik sedikit */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* Bayangan menebal */
    border-color: var(--primary); /* Garis tepi jadi biru */
}

/* Merapikan Ikon di dalam kartu */
.testimonial-card i {
    /* Pastikan warna ikon biru utama */
    color: var(--primary); 
}

/* Merapikan teks deskripsi */
.testimonial-card p {
    color: #64748b; /* Warna abu-abu teks */
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: 15px;
}


/* --- FOOTER STYLING --- */

footer {
    background: #0f172a; /* Warna Navy Sangat Gelap (Premium) */
    color: #cbd5e1; /* Warna Teks Abu Terang */
    padding: 60px 0 20px;
    margin-top: 50px;
}

.footer-grid {
    display: grid;
    /* Membuat 3 kolom: Kolom 1 agak lebar (2 bagian), sisanya 1 bagian */
    grid-template-columns: 2fr 1fr 1fr; 
    gap: 50px;
    margin-bottom: 40px;
}

/* Logo di Footer */
.logo-white {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.footer-brand p {
    line-height: 1.6;
    opacity: 0.8;
}

/* Judul Kolom (Menu/Kontak) */
.footer-links h4 {
    color: white;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

/* Styling Link Footer */
.footer-links a {
    color: #cbd5e1;
    text-decoration: none;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Jarak antara ikon dan teks */
}

.footer-links a:hover {
    color: var(--secondary); /* Berubah jadi Emas/Kuning saat disentuh */
    transform: translateX(5px); /* Bergerak ke kanan sedikit */
}

/* Copyright Section */
.footer-bottom {
    border-top: 1px solid #1e293b; /* Garis pemisah tipis */
    padding-top: 20px;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.6;
}

/* Responsif untuk HP (Jadi 1 Kolom ke bawah) */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Tumpuk ke bawah */
        gap: 30px;
        text-align: center;
    }
    
    .logo-white, .footer-links a {
        justify-content: center; /* Tengahkan konten */
    }

    .window-frame::before {
        height: 36px; /* Di Laptop balik normal (lebih tinggi) */
        background-position: -20px center, 0px center, 20px center;
    }
}


@media (max-width: 768px) {
    /* ... kode tombol full-width yang tadi ... */

    /* 1. Judul H2 Lebih Ringkas di HP */
    .section-title {
        font-size: 1.75rem; /* Sebelumnya mungkin 2.5rem, kita kecilkan */
        line-height: 1.3;   /* Jarak antar baris diperpadat */
        margin-bottom: 15px;
    }

    /* 2. Sub-judul (Paragraf) Jangan Terlalu Lebar */
    .hero-text p, .text-center p {
        font-size: 0.95rem; /* Ukuran standar HP */
        padding: 0 10px;    /* Beri napas kiri-kanan */
    }

    /* 3. Atur Margin Container agar tidak mepet layar */
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}


@media (max-width: 768px) {
    /* ... kode sebelumnya ... */

    /* 1. Paksa Grid menjadi 1 Kolom (Tumpuk ke Bawah) */
    .grid-2, .comparison-grid { 
        grid-template-columns: 1fr !important; /* 1 Kolom penuh */
        gap: 30px; /* Jarak antar kartu atas-bawah */
    }

    /* 2. Rapikan Tombol CTA Ungu di Bawah */
    .btn-cta-large {
        width: 100%; /* Tombol jadi lebar penuh */
        margin-top: 20px;
        font-size: 0.98rem; /* Ukuran font disesuaikan */
        padding: 15px;
    }
    
    /* 3. Atasi Tombol WA yang Menutupi Tombol CTA */
    /* Kita beri jarak kosong di bawah tombol ungu agar tidak ketutup WA */
    #transformation-section {
        padding-bottom: 80px; 
    }
}


/* --- CSS KHUSUS MOBILE (Biar Kartu Hijau Turun ke Bawah) --- */
@media (max-width: 768px) {
    .stack-on-mobile {
        display: flex !important;          /* Ubah dari Grid jadi Flexbox */
        flex-direction: column !important; /* Paksa susun ke bawah (Vertikal) */
        gap: 30px !important;              /* Jarak antar kartu */
    }
    
    /* Paksa lebar kartu jadi 100% layar HP */
    .stack-on-mobile > div {
        width: 100% !important;
        margin: 0 !important;
    }
}


/* --- APP SHOWCASE MOBILE (Tumpuk Gambar) --- */
@media (max-width: 768px) {
    
    /* 1. Ubah slider samping menjadi tumpukan ke bawah */
    .app-slider {
        display: flex;
        flex-direction: column; /* Wajib: Susun ke bawah */
        gap: 50px; /* Beri jarak agak jauh biar napas */
    }

    /* 2. Pastikan lebar kartu 100% layar */
    .app-card {
        width: 100%; 
        margin-bottom: 20px;
    }

    /* 3. Teks Keterangan (Caption) */
    .app-caption h4 {
        font-size: 1.2rem;
        margin-top: 15px;
    }
    
    .app-caption p {
        font-size: 0.9rem;
        padding: 0 10px;
    }
}


/* --- JURUS ANTI GAMBAR TERPOTONG DI HP --- */
@media (max-width: 768px) {
    
    /* Targetkan gambar di dalam bingkai jendela */
    .window-frame img {
        /* 1. Paksa lebarnya maksimal 100% dari layar HP */
        max-width: 100% !important; 
        
        /* 2. Tingginya "auto" agar gambar tidak gepeng/terdistorsi */
        height: auto !important; 
        
        /* 3. Pastikan dia tampil sebagai blok agar tidak ada celah aneh di bawahnya */
        display: block;
    }

    /* Pastikan bingkainya juga nurut */
    .window-frame {
        max-width: 100% !important;
        box-sizing: border-box; /* Agar garis tepi tidak menambah lebar */
    }
}


/* --- PRICING MODE GESER (HORIZONTAL SWIPE) --- */
@media (max-width: 768px) {
    
    .pricing-grid {
        display: flex !important;       /* Baris ke samping */
        flex-direction: row !important; /* Paksa arah horizontal */
        overflow-x: auto;               /* Izinkan scroll samping */
        scroll-snap-type: x mandatory;  /* Efek magnet saat digeser */
        gap: 20px;
        padding: 10px 5px 30px 5px;     /* Padding bawah agak lebar biar bayangan kartu tidak kepotong */
        
        /* Sembunyikan Scrollbar Kasar */
        -ms-overflow-style: none;  
        scrollbar-width: none;  
    }
    
    .pricing-grid::-webkit-scrollbar {
        display: none;
    }

    /* Ukuran Kartu di HP */
    .pricing-card {
        min-width: 85vw; /* Lebar 85% dari layar HP */
        margin: 0 !important;
        scroll-snap-align: center; /* Posisi kartu pas di tengah saat berhenti */
    }
}


/* Animasi Panah Bergerak (Bounce Right) */
@keyframes bounceRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

.bounce-arrow {
    animation: bounceRight 1s infinite; /* Gerak terus menerus */
    color: var(--primary);
}


/* --- TRUST CARD (Biar Kelihatan Kokoh) --- */

.trust-card {
    background: #f0fdf4; /* Hijau yang saaangat muda (sejuk) */
    border: 1px solid #bbf7d0; /* Garis tepi hijau muda */
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 15px; /* Jarak antar kartu */
    display: flex;
    align-items: center; /* Ikon dan teks sejajar di tengah */
    gap: 10px;
    position: relative;
    transition: transform 0.3s;
    padding-left: 10px;
}

.trust-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* Ikon Utama (Kiri) */
.trust-icon {
    width: 45px;
    height: 45px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16a34a; /* Hijau daun */
    font-size: 1.2rem;
    flex-shrink: 0; /* Biar ikon gak gepeng */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Teks */
.trust-text h4 {
    margin: 0 0 5px 0;
    font-size: 1rem;
    font-weight: 700;
    color: #14532d; /* Hijau tua banget */
}

.trust-text p {
    margin: 0;
    font-size: 0.85rem;
    color: #166534; /* Hijau sedang */
    line-height: 1.4;
}

/* Badge Centang (Kanan) - Biar kayak 'Verified' */
.check-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #22c55e;
    opacity: 0.5; /* Agak transparan biar gak ganggu */
}


/* --- FIX BAGIAN TARGET USER (SOLUSI TEPAT) DI MOBILE --- */
@media (max-width: 768px) {
    
    .testimonial-grid {
        /* 1. Ubah susunan jadi 1 kolom (atas-bawah) */
        grid-template-columns: 1fr !important; 
        
        /* 2. Beri jarak antar kartu atas-bawah */
        gap: 30px !important; 
        
        /* 3. Pastikan grid tampil sebagai blok penuh */
        display: grid !important; 
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .testimonial-card {
        /* 4. Pastikan lebar kartu pol mentok layar */
        width: 100% !important;
        margin: 0 !important;
    }
}


/* --- FINISHING FOOTER DI MOBILE --- */
@media (max-width: 768px) {
    
    .footer-grid {
        display: flex;
        flex-direction: column; /* Susun ke bawah */
        gap: 40px; /* Beri jarak LEGA antar kelompok (Logo - Menu - Kontak) */
        text-align: center; /* Rata tengah semua teks */
    }

    /* Tengahkan Logo dan Ikon Sosmed */
    .logo-white, .social-icons {
        justify-content: center;
    }
    
    /* Tengahkan Link agar ikon dan teks pas di tengah */
    .footer-links a {
        justify-content: center;
    }

    /* Perbesar jarak antar list agar mudah dipencet jempol */
    .footer-links li {
        margin-bottom: 15px;
    }
    
    /* Copyright di bawah */
    .footer-bottom {
        margin-top: 30px;
        font-size: 0.8rem;
    }
}


/* =========================================
   DESAIN TABEL HARGA (PRICING) PREMIUM
   ========================================= */

/* 1. Container Kartu */
.pricing-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Efek Hover (Melayang saat disentuh mouse) */
.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--primary); /* Pastikan var(--primary) ada, atau ganti kode warna hex */
}

/* 2. Kartu Populer (Paket PRO) */
.pricing-card.popular {
    border: 2px solid #4f46e5; /* Warna biru/ungu utama */
    background: #f8fafc;
    transform: scale(1.05); /* Sedikit lebih besar */
    z-index: 2;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Supaya hover di kartu populer tetap smooth */
.pricing-card.popular:hover {
    transform: scale(1.05) translateY(-5px);
}

/* 3. Badge Promo (Basic, Paling Laris, Eksklusif) */
.badge-promo {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Warna-warni Badge */
.pricing-card:nth-child(1) .badge-promo { /* Lite */
    background: #94a3b8; 
    color: white;
}
.pricing-card:nth-child(2) .badge-promo { /* Pro */
    background: #f59e0b; /* Warna Emas/Kuning */
    color: white;
    font-size: 0.728rem;
}
.pricing-card:nth-child(3) .badge-promo { /* Elite */
    background: #1e293b; 
    color: white;
}

/* 4. Tipografi Harga */
.pricing-card h4 {
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 1rem;
    margin-top: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.current-price {
    font-size: 1.92rem; /* Angka Sangat Besar */
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.current-price span {
    font-size: 1rem;
    color: #94a3b8;
    font-weight: 500;
}

/* 5. List Fitur */
.pricing-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    flex-grow: 1; /* Agar tombol selalu sejajar di bawah */
    text-align: left;
}

.pricing-list li {
    margin-bottom: 0.8rem;
    color: #334155;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Ikon di dalam list */
.pricing-list li i {
    font-size: 1.1rem;
    flex-shrink: 0; /* Agar ikon tidak gepeng */
}

/* Warna Ikon Centang */
.pricing-list li .fa-check {
    color: #10b981; /* Hijau Sukses */
}

/* Warna Ikon Silang/Gembok (Untuk Lite) */
.pricing-list li .fa-times, 
.pricing-list li .fa-lock {
    opacity: 0.7;
}

/* Text Coret (Del) */
.pricing-list li del {
    color: #cbd5e1;
}

/* 6. Tombol (Button) */
.pricing-card .btn {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s;
}

/* Tombol Outline (Lite & Elite) */
.btn-outline {
    background: transparent;
    border: 2px solid #0f172a;
    color: #0f172a;
}

.btn-outline:hover {
    background: #0f172a;
    color: white;
}

/* Tombol Primary (Pro) */
.btn-primary {
    background: #4f46e5; /* Sesuaikan dengan warna brand Anda */
    color: white;
    border: none;
    box-shadow: 0 4px 14px 0 rgba(79, 70, 229, 0.39);
}

.btn-primary:hover {
    background: #4338ca;
    transform: translateY(-2px);
}

/* Responsive di HP */
@media (max-width: 768px) {
    .pricing-card.popular {
        transform: scale(1); /* Di HP ukurannya disamakan */
        margin: 20px 0;
    }
}


/* =========================================
   MOBILE MENU: SIDE DRAWER (ELEGAN & RINGKAS)
   ========================================= */
@media screen and (max-width: 768px) {
    
    /* 1. Container Menu (Laci Samping) */
    .nav-links {
        position: fixed;
        right: 0;
        top: 0;
        height: 100vh; /* Tinggi penuh */
        width: 100%;    /* Lebar cuma 75% layar (Ringkas) */
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Teks rata kiri */
        justify-content: flex-start; /* Mulai dari atas */
        padding: 50px 50px 40px; /* Spasi dalam */
        transform: translateX(100%); /* Sembunyi di kanan layar */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Animasi geser halus */
        box-shadow: -10px 0 30px rgba(0,0,0,0.15); /* Bayangan mewah di kiri */
        z-index: 998;
        gap: 10px;
    }

    /* 2. Saat Menu Aktif (Muncul) */
    .nav-links.nav-active {
        transform: translateX(0%); /* Geser masuk */
    }

    /* 3. Teks Menu */
    .nav-links li {
        width: 100%;
        margin-bottom: 25px; /* Jarak antar menu */
        opacity: 0; /* Animasi fade in */
    }

    /* Animasi teks muncul satu per satu saat dibuka */
    .nav-links.nav-active li {
        animation: navLinkFade 0.5s ease forwards 0.2s;
    }

    .nav-links li a {
        font-size: 1.1rem;
        font-weight: 500;
        color: #334155;
        display: block;
        padding-bottom: 10px;
        border-bottom: 1px solid #f1f5f9; /* Garis tipis pemisah */
        width: 90%;
        text-align: center;
    }

    /* 4. Tombol Utama di Menu Mobile */
    .btn-nav {
        margin-top: 20px;
        width: 100%;
        text-align: center;
        border-radius: 8px;
    }

    /* 5. Hamburger Icon (Tetap di atas) */
    .hamburger {
        display: block;
        cursor: pointer;
        z-index: 999; /* Harus lebih tinggi dari menu */
    }
}

/* Animasi kecil untuk teks */
@keyframes navLinkFade {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}


/* Mencegah scroll saat menu HP terbuka */
body.no-scroll {
    overflow: hidden;
}


/* =========================================
   FOOTER RESPONSIVE (LAYOUT HP RAPI)
   ========================================= */
@media screen and (max-width: 768px) {
    
    footer {
        padding: 40px 0 20px; /* Kurangi padding atas-bawah biar tidak boros tempat */
    }

    /* Grid Utama Footer di HP */
    .footer-grid {
        display: grid;
        /* Buat layout: Logo di atas sendirian, Menu & Kontak sebelahan */
        grid-template-areas: 
            "brand brand"
            "links1 links2";
        grid-template-columns: 1fr 1fr; /* Dua kolom sama lebar */
        gap: 30px 15px; /* Jarak antar baris 30px, antar kolom 15px */
        text-align: left; /* Wajib rata kiri biar rapi */
    }

    /* 1. Bagian Brand (Logo & Sosmed) */
    .footer-brand {
        grid-area: brand;
        border-bottom: 1px solid rgba(255,255,255,0.1); /* Garis pemisah halus */
        padding-bottom: 20px;
        margin-bottom: 0;
    }

    .footer-brand p {
        font-size: 0.9rem;
        max-width: 100%;
        margin-bottom: 15px;
        color: #cbd5e1;
        text-align: center;
    }

    /* 2. Bagian Menu (Sebelah Kiri) */
    .footer-links:nth-child(2) {
        grid-area: links1;
        margin-bottom: 20px;
    }

    /* 3. Bagian Kontak (Sebelah Kanan) */
    .footer-links:nth-child(3) {
        grid-area: links2;
    }

    /* Styling Judul Menu (H4) */
    .footer-links h4 {
        font-size: 1rem;
        margin-bottom: 15px;
        color: #fff;
        border-left: 3px solid #4f46e5; /* Aksen garis kecil di kiri judul */
        padding-left: 10px;
    }

    /* Styling List Link */
    .footer-links ul li {
        margin-bottom: 10px;
    }

    .footer-links ul li a, 
    .footer-links ul li span {
        font-size: 0.85rem; /* Font agak dikecilkan biar muat */
        line-height: 1.4;
    }

    /* Ikon Sosmed */
    .social-icons {
        justify-content: flex-start; /* Geser ikon sosmed ke kiri */
        margin-top: 10px;
        text-align: center;
    }

    /* Copyright di bawah */
    .footer-bottom {
        margin-top: 30px;
        padding-top: 20px;
        text-align: center; /* Copyright tetap tengah gak apa-apa */
        font-size: 0.8rem;
    }
}


/* =========================================
   PRICING CARD MOBILE (DIET VERSION)
   ========================================= */
@media screen and (max-width: 768px) {
    
    /* 1. Container Scroll */
    .pricing-grid {
        gap: 15px; /* Jarak antar kartu dirapatkan */
        padding: 10px 5px 40px; /* Beri ruang bawah biar tidak kepotong */
    }

    /* 2. Kartu Harga (Slimming) */
    .pricing-card {
        flex: 0 0 85%; /* Lebar kartu 85% layar (Pas, tidak kekecilan) */
        max-width: 320px; /* Batas maksimal biar gak kegedean di HP besar */
        padding: 25px 20px !important; /* Padding Dikecilkan (Atas/Bawah 25, Kiri/Kanan 20) */
        border-radius: 16px; /* Sudut lebih manis */
    }

    /* 3. Badge (Basic/Pro/Elite) */
    .pricing-badge {
        font-size: 0.75rem; /* Ukuran font badge diperkecil */
        padding: 6px 16px;
        margin-bottom: 15px; /* Jarak ke harga dirapatkan */
    }

    /* 4. Harga (Angka Besar) */
    .price-tag h3 {
        font-size: 2.2rem; /* Dikecilkan dari ukuran desktop */
        margin-bottom: 5px;
    }

    .price-tag .period {
        font-size: 0.85rem; /* Teks "per bulan" dikecilkan */
    }
    
    .price-tag p {
        font-size: 0.8rem; /* Teks "Ditagih per 3 bulan" lebih ringkas */
        margin-top: 5px;
        opacity: 0.8;
    }

    /* 5. List Fitur */
    .pricing-features {
        margin: 20px 0; /* Kurangi margin atas bawah */
    }

    .pricing-features li {
        font-size: 0.9rem; /* Font fitur lebih kecil dikit biar muat banyak */
        margin-bottom: 12px; /* Jarak antar fitur dirapatkan */
        line-height: 1.4;
    }

    /* 6. Tombol Pilih */
    .pricing-card .btn {
        width: 100%;
        padding: 12px;
        font-size: 0.95rem;
    }

    .current-price {
        font-size: 1.818rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1;
    }
    .pricing-list {
        list-style: none;
        padding: 0;
        margin: 0.5rem 0;
        flex-grow: 1;
        text-align: left;
    }

    .pricing-card h4 {
        font-size: 1.1rem;
        color: #64748b;
        margin-bottom: 0rem;
        margin-top: 1.5rem;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .badge-promo {
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        padding: 0.5rem 1.5rem;
        border-radius: 50px;
        font-size: 0.728rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
}


/* =========================================
   STYLE TAMBAHAN (HARGA HARIAN & STRUK)
   ========================================= */

/* 1. Stiker Harga Harian (Reframing) */
.daily-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: #16a34a;          /* Hijau Sukses */
    background: #dcfce7;     /* Background Hijau Muda */
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    margin: 10px 0 10px;      /* Jarak atas bawah */
}

/* 2. Kotak Ringkasan (Struk Mini) */
.billing-summary {
    background-color: #f8fafc;  /* Abu sangat muda (Slate-50) */
    border: 1px dashed #cbd5e1; /* Garis putus-putus */
    border-radius: 8px;
    padding: 12px 15px;
    margin: 15px 0 20px;        /* Jarak dari list ke tombol */
    text-align: left;
}

/* Khusus Paket Pro (Popular) Backgroundnya agak beda dikit biar nyatu */
.pricing-card.popular .billing-summary {
    background-color: #4f46e59c; /* Transparan */
    border-color: rgba(255, 255, 255, 0.123);
}
.pricing-card.popular .billing-summary span,
.pricing-card.popular .billing-summary p {
    color: #94a3b8; /* Teks jadi putih/terang */
}
.pricing-card.popular .billing-total {
    border-top-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.pricing-card.popular .billing-total .amount {
    color: #fbbf24; /* Angka total jadi Kuning Emas */
}

/* Isi dalam Struk */
.billing-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 4px;
}

.billing-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e2e8f0;
    padding-top: 8px;
    margin-top: 5px;
    font-weight: 700;
    color: #334155;
}

.billing-total .amount {
    font-size: 1rem;
    color: #4f46e5;
}

.billing-note {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 8px;
    text-align: center;
    font-style: italic;
    margin-bottom: 0;
}



/* =========================================
   SEMBUNYIKAN HINT GESER DI DESKTOP
   ========================================= */
/* Jika layar lebih lebar dari laptop standar (992px ke atas), sembunyikan hint */
@media screen and (min-width: 992px) {
    .swipe-hint {
        display: none !important;
    }
}


/* =========================================
   PRIVACY TOAST (NOTIFIKASI PRIVASI)
   ========================================= */
.privacy-toast {
    position: fixed;
    bottom: -100px; /* Sembunyi dulu di bawah layar */
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 15px 20px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 9999;
    width: 90%;
    max-width: 550px;
    transition: bottom 0.5s ease-in-out; /* Efek muncul pelan */
    border: 1px solid #e2e8f0;
}

/* Biar muncul ke atas */
.privacy-toast.show {
    bottom: 30px;
}

.privacy-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    font-size: 0.9rem;
    color: #334155;
    text-align: left;
}

.privacy-content a {
    color: #4f46e5;
    text-decoration: underline;
    font-weight: 600;
}

.shield-icon {
    font-size: 1.5rem;
    color: #16a34a; /* Hijau Aman */
}

.btn-close-privacy {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 5px;
}

.btn-close-privacy:hover {
    color: #ef4444;
}

/* Responsif HP */
@media screen and (max-width: 480px) {
    .privacy-toast {
        border-radius: 12px; /* Di HP jadi kotak membulat dikit */
        padding: 12px;
        bottom: -150px;
        flex-direction: row;
        width: 95%;
    }
    .privacy-toast.show {
        bottom: 15px;
    }
    .privacy-content {
        font-size: 0.8rem;
    }
    .shield-icon {
        font-size: 1.2rem;
    }
}

/* =========================================
   RESPONSIF UNTUK SEMUA HP & TABLET (UP TO 768PX)
   ========================================= */
@media screen and (max-width: 768px) {
    .privacy-toast {
        width: 90%; /* Lebar aman */
        border-radius: 12px; /* Kotak membulat */
        padding: 12px 15px;
        flex-direction: row; /* Tetap menyamping biar hemat tempat vertikal */
        left: 50%;
        transform: translateX(-50%);
    }

    /* PENTING: Posisi Muncul Lebih Tinggi */
    /* Supaya tidak ketutupan tombol WhatsApp atau Navigasi HP */
    .privacy-toast.show {
        bottom: 90px; 
    }

    .privacy-content {
        font-size: 0.85rem; /* Font sedikit mengecil agar muat */
    }
    
    .shield-icon {
        font-size: 1.4rem;
    }
    
    /* Tombol close agak dibesarkan area sentuhnya */
    .btn-close-privacy {
        width: 35px;
        height: 35px;
    }
}


/* === PRICING DISCOUNT STYLES === */
.price-strike {
    text-decoration: line-through;
    color: #94a3b8; /* Abu-abu */
    font-size: 0.9rem;
    margin-right: 5px;
}

.save-badge {
    background-color: #dcfce7; /* Hijau muda lembut */
    color: #166534; /* Hijau tua */
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-block;
    margin-left: 5px;
}

.total-highlight {
    color: #ef4444; /* Merah untuk harga coret di total */
    text-decoration: line-through;
    font-size: 0.9rem;
    display: block; /* Biar nangkring di atas harga asli */
    margin-bottom: -5px;
}

.final-amount {
    color: #0f172a;
    font-size: 1.3rem;
    font-weight: 800;
}



/* =========================================
   FIX TAMPILAN TABLET & IPAD (768px - 1200px)
   AGAR TETAP SLIDER SAMPING (ANTI GEPENG)
   ========================================= */
@media screen and (min-width: 768px) and (max-width: 1200px) {
    
    .pricing-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        gap: 20px !important;
        
        /* --- TAMBAHKAN BARIS INI (SOLUSINYA) --- */
        padding-top: 35px !important;  /* Kasih ruang buat badge di atas */
        padding-bottom: 40px !important; /* Ruang bawah buat bayangan */
        padding-left: 20px !important;   /* Ruang kiri biar gak mepet layar */
        
        -ms-overflow-style: none;  
        scrollbar-width: none;  
    }
    
    .pricing-grid::-webkit-scrollbar {
        display: none;
    }

    .pricing-card {
        /* INI KUNCINYA AGAR TIDAK MENCIUT/GEPENG */
        min-width: 300px !important; /* Paksa lebar minimal 300px per kartu */
        flex: 0 0 auto !important;   /* Jangan mau disusutkan browser */
        width: 300px !important;     /* Kunci lebar */
        
        margin: 0 !important;
    }
}


/* =========================================
   STYLE BADGE PEMBAYARAN (NETRAL)
   ========================================= */
.payment-badges-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.payment-label {
    font-size: 0.85rem;
    color: #94a3b8; /* Warna abu-abu soft */
    font-weight: 500;
}

.payment-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.p-badge {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #475569;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* Bayangan tipis banget */
}

.p-badge i {
    color: #64748b; /* Warna ikon abu tua */
}


/* Update agar Grid muat 4 kolom */
.footer-grid {
    display: grid;
    /* Laptop: 4 kolom sama rata, Tablet: 2 kolom, HP: 1 kolom */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 40px;
    margin-bottom: 40px;
}

/* Biar warna tombol teknis tetap kuning mas/emas saat dihover */
.footer-links a[href*="Tim Support"]:hover {
    color: #f59e0b !important; /* Kuning lebih gelap sedikit */
    text-decoration: underline;
}



/* SECURITY LAYERS STYLE */
.security-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.security-card {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.security-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-color: #cbd5e1;
}

.sec-icon-bg {
    width: 60px;
    height: 60px;
    background: #f0fdf4;
    color: #16a34a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 20px auto;
    transition: 0.3s;
}

.security-card:hover .sec-icon-bg {
    background: #16a34a;
    color: #ffffff;
    transform: rotateY(180deg);
}

.security-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
}

.security-card p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
}

/* Responsif di HP */
@media screen and (max-width: 768px) {
    .security-grid {
        grid-template-columns: 1fr;
    }
}



/* =========================================
   RESPONSIVE SECURITY SECTION
   ========================================= */

/* 1. KHUSUS HP (Lebar di bawah 768px) -> JADI SLIDER GESER */
@media screen and (max-width: 767px) {
    .security-grid {
        display: flex !important;
        grid-template-columns: none;
        overflow-x: auto;
        gap: 15px;
        padding: 10px 5px 30px 5px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    .security-grid::-webkit-scrollbar { display: none; /* Chrome */ }

    .security-card {
        min-width: 85%; /* Di HP kartu lebar biar enak dibaca */
        scroll-snap-align: center;
    }
    
    /* Spacer biar kartu pertama & terakhir gak mepet pinggir */
    .security-card:nth-child(1) { margin-left: 10px; }
    .security-card:last-child { margin-right: 10px; }
}

/* 2. KHUSUS TABLET/IPAD (Lebar 768px - 1024px) -> JADI GRID 2 KOLOM */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .security-grid {
        display: grid;
        /* Paksa jadi 2 kolom rata */
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px;
    }
    
    /* Sembunyikan petunjuk geser di Tablet (karena bentuknya grid) */
    .d-md-none {
        display: none !important;
    }
}


/* =========================================
   FIX FOOTER HP (RATA KIRI RAPI)
   ========================================= */
@media screen and (max-width: 768px) {
    
    .footer-grid {
        /* Susun ke bawah (1 kolom) */
        grid-template-columns: 1fr !important; 
        
        /* PENTING: Paksa semua teks rata kiri */
        text-align: left !important; 
        
        /* Jarak antar kelompok */
        gap: 0px; 
    }

    /* Pastikan Logo tidak di tengah */
    .footer-brand {
        margin: 0; 
        align-items: flex-start;
    }
    
    /* Pastikan Ikon Sosmed mulai dari kiri */
    .social-icons {
        justify-content: flex-start !important;
    }

    /* Pastikan item list (Menu) mulai dari kiri */
    .footer-links ul li {
        justify-content: flex-start !important;
    }
    
    /* Pastikan Link dan Ikon di dalamnya rata kiri */
    .footer-links ul li a {
        display: flex;
        align-items: center; /* Vertikal tengah */
        justify-content: flex-start !important; /* Horizontal kiri */
        text-align: left;
        width: 100%;
    }

    /* Khusus Tombol "Hubungi Tim Teknis" */
    .footer-links a[href*="Tim Support"] {
        background: rgba(251, 191, 36, 0.1); 
        padding: 12px 15px; /* Padding biar tombolnya 'gendut' enak dipencet */
        border-radius: 8px;
        width: 100%;
        
        /* Biar teks di tombol tetap di tengah (opsional) atau kiri */
        /* Kalau mau kiri, hapus baris di bawah ini */
        justify-content: center !important; 
        font-weight: 700;
    }
    
    /* Garis pemisah tipis antar menu (Opsional, biar makin rapi) */
    .footer-links h4 {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 10px;
        margin-bottom: 15px;
        width: 100%; /* Garis memanjang penuh */
    }
}


/* =========================================
   STYLE MODAL ALUR ORDER
   ========================================= */
/* Latar Belakang Gelap */
.modal-overlay {
    display: none; /* Default sembunyi */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Gelap transparan */
    z-index: 9999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px); /* Efek blur dikit biar fokus */
    padding: 20px;
}

/* Munculkan saat aktif */
.modal-overlay.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

/* Kotak Putihnya */
.modal-content {
    background: white;
    width: 100%;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    overflow: hidden;
}

/* Tombol Close X */
.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #f1f5f9;
    border: none;
    width: 35px; height: 35px;
    border-radius: 50%;
    cursor: pointer;
    color: #64748b;
    font-size: 1.1rem;
    transition: 0.2s;
}
.modal-close:hover {
    background: #ef4444;
    color: white;
}

.modal-header {
    text-align: center;
    padding: 25px 20px 10px 20px;
    border-bottom: 1px solid #f1f5f9;
}

/* Style Langkah-langkah (1, 2, 3) */
.step-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: flex-start;
    text-align: left;
}

.step-number {
    background: #e0f2fe;
    color: #0284c7;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
    font-size: 0.9rem;
    margin-top: 2px;
}

.step-text strong {
    display: block;
    color: #334155;
    margin-bottom: 3px;
    font-size: 0.95rem;
}

.step-text p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* Animasi Muncul Halus */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}


/* =========================================
   FIX: Huruf Tebal di dalam Paragraf Modal
   Agar tidak turun baris (Inline)
   ========================================= */
.step-text p strong {
    display: inline !important; /* Paksa sejajar */
    margin-bottom: 0;
    color: #1e293b; /* Warna teks tebal (Hitam Abu) */
}


/* =========================================
   STYLE TAG METODE MENGAJI (REVISI BIRU)
   ========================================= */
.method-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.method-tag {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #64748b; /* Abu-abu default */
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.3s;
    cursor: default;
}

.method-tag i {
    color: #10b981; /* Tetap Hijau (Centang) */
    font-size: 0.8rem;
}

/* Efek Hover: Jadi Biru Utama */
.method-tag:hover {
    border-color: var(--primary); /* Biru Navy */
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(54, 52, 102, 0.15); /* Bayangan biru */
}

/* Tag Custom: Paling Spesial (Biru Muda) */
.method-tag.badge-custom {
    background: #eff6ff; /* Biru sangat muda */
    color: #2563eb;      /* Biru terang */
    border-color: #bfdbfe;
}

/* Biar ikon plus di custom tag warnanya biru juga */
.method-tag.badge-custom i {
    color: #2563eb;
}

@media screen and (max-width: 768px) {
    .method-tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 20px;
        justify-content: center;
    }
}


/* =========================================
   CSS RESPONSIF (MODE SLIDE / SWIPE)
   ========================================= */

@media (max-width: 768px) {
    
    .pricing-grid {
        display: flex;
        flex-direction: row;          /* Tetap berjejer ke samping */
        overflow-x: auto;             /* Aktifkan scroll horizontal */
        scroll-snap-type: x mandatory; /* Efek "Magnet" (Snap) saat berhenti scroll */
        gap: 20px;                    /* Jarak antar kartu */
        padding: 20px 20px 40px 20px; /* Padding bawah agak besar buat bayangan */
        
        /* Sembunyikan Scrollbar (biar rapi seperti aplikasi) */
        scrollbar-width: none;        /* Firefox */
        -ms-overflow-style: none;     /* IE/Edge */
        -webkit-overflow-scrolling: touch; /* Scroll halus di iPhone */
    }

    /* Sembunyikan scrollbar di Chrome/Safari/Android */
    .pricing-grid::-webkit-scrollbar {
        display: none;
    }

    .pricing-card {
        min-width: 85%;               /* Lebar kartu 85% layar (biar kartu sebelahnya "ngintip" dikit) */
        scroll-snap-align: center;    /* Kartu otomatis berhenti di tengah layar */
        margin: 0;
        
        /* Matikan efek zoom hover biar tidak aneh saat di-swipe */
        transform: none !important;   
    }

    /* Khusus Kartu Popular (PRO) */
    .pricing-card.popular {
        /* Kita kembalikan ukurannya normal, tapi tetap kasih border biar beda */
        transform: none !important;
        border: 2px solid #4f46e5;
        box-shadow: 0 15px 30px rgba(79, 70, 229, 0.15);
        z-index: 1;
    }
}


/* --- PENGATURAN PETUNJUK GESER --- */

/* 1. Default: Sembunyikan di Laptop/PC */
.mobile-hint {
    display: none;
}

/* 2. Definisi Animasi Kedip (Pulse) */
@keyframes pulse-animation {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* 3. Munculkan HANYA di HP/Tablet (Layar < 991px) */
@media (max-width: 991px) {
    .mobile-hint {
        display: block !important; /* Paksa muncul */
        animation: pulse-animation 2s infinite; /* Jalankan animasi */
        margin-top: 10px;
    }
}



/* --- CSS UNTUK OPSI BULANAN (PLAN B) --- */

.monthly-plan-section {
    margin-top: 50px;
    margin-bottom: 0px;
    text-align: center;
    padding: 0 15px; /* Padding aman untuk HP */
    display: flex;
    flex-direction: column;
    align-items: center; /* Kunci agar semua elemen rata tengah */
}

.plan-header p {
    color: #64748b;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.plan-header span {
    font-size: 0.9rem;
    color: #94a3b8;
}

/* Styling Kotak Dropdown */
.monthly-dropdown {
    width: 100%;
    max-width: 500px; /* Lebar maksimal di laptop */
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 20px;
    box-shadow: 0 4px 15px -3px rgba(0,0,0,0.05);
    text-align: left; /* Isi dalam tetap rata kiri */
    transition: all 0.3s ease;
}

.monthly-dropdown[open] {
    border-color: #93c5fd; /* Warna biru saat dibuka */
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.1);
}

.dropdown-header {
    padding: 15px 20px;
    cursor: pointer;
    font-weight: 700;
    color: #334155;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none; /* Hilangkan segitiga bawaan browser */
}

/* Hilangkan marker bawaan di beberapa browser */
.dropdown-header::-webkit-details-marker { display: none; }

.header-left i {
    color: #64748b;
    margin-right: 10px;
}

/* Animasi Panah saat diklik */
.monthly-dropdown[open] .arrow-icon {
    transform: rotate(180deg);
}
.arrow-icon { transition: transform 0.3s; color: #94a3b8; }

.dropdown-content {
    padding: 20px;
    background: #fff;
}

/* Item List Style */
.monthly-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #e2e8f0;
}

.monthly-item.no-border {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.item-info h5 { margin: 0; font-size: 1rem; color: #1e293b; }
.item-info small { color: #64748b; font-size: 0.85rem; }

.item-action { text-align: right; }
.item-action .price { font-weight: 800; color: #1e293b; font-size: 1rem; }

/* Tombol Kecil */
.btn-monthly-lite, .btn-monthly-pro {
    margin-top: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

.btn-monthly-lite {
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #475569;
}
.btn-monthly-lite:hover { background: #f1f5f9; color: #1e293b; }

.btn-monthly-pro {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
}
.btn-monthly-pro:hover { background: #dbeafe; }

/* Badge Garansi */
.guarantee-badge {
    margin-top: 25px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ecfdf5;
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-size: 0.9rem;
    font-weight: 600;
}
.guarantee-badge i { color: #10b981; }

/* =========================================
   RESPONSIVE HP (Mobile Optimization)
   ========================================= */
@media (max-width: 480px) {
    .plan-header p { font-size: 0.95rem; }
    
    .monthly-item {
        flex-direction: column; /* Susun Atas Bawah di HP kecil */
        align-items: flex-start;
        gap: 10px;
    }
    
    .item-action {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f8fafc; /* Sedikit bg biar misah */
        padding: 8px;
        border-radius: 8px;
    }
    
    .item-action .price { font-size: 1.1rem; } /* Harga digedein dikit di HP */
    
    /* Garansi badge font kecil dikit */
    .guarantee-badge {
        font-size: 0.8rem;
        padding: 8px 15px;
        width: 100%;
        justify-content: center;
    }
}


/* MOBILE RESPONSIVE UNTUK TRUST SECTION */
@media (max-width: 600px) {
    .trust-section > div {
        flex-direction: column; /* Susun Poin Garansi ke Bawah */
        gap: 20px !important;
    }
    
    .monthly-item {
        flex-direction: column; 
        align-items: flex-start !important;
        gap: 10px;
    }
    
    .monthly-item > div:last-child {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f8fafc;
        padding: 10px;
        border-radius: 8px;
    }
}



/* --- CSS Browser Mockup (Revisi Anti-Potong) --- */

.browser-mockup {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15); /* Bayangan lembut */
    overflow: hidden; 
    border: 1px solid rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    width: 100%; /* Pastikan lebar penuh container */
}

.browser-mockup:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);
}

.browser-header {
    background: #f8fafc; /* Abu-abu sangat muda */
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.browser-header .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.dot.red { background-color: #ef4444; }
.dot.yellow { background-color: #f59e0b; }
.dot.green { background-color: #22c55e; }

/* Tambahan: URL Bar Palsu biar makin mirip browser */
.browser-url-bar {
    background: white;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-left: 10px;
    flex-grow: 1; /* Biar memanjang */
    border: 1px solid #e2e8f0;
    font-family: monospace;
}

.browser-content {
    width: 100%;
    background: white;
    line-height: 0; /* Menghilangkan gap misterius di bawah gambar */
}

/* KUNCI PERBAIKAN: Memaksa gambar pas 100% lebar & tinggi otomatis */
.fit-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* Pastikan gambar utuh */
}

/* Animasi muncul yang lebih halus (naik ke atas) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}



/* =========================================
   APP SHOWCASE SECTION
   ========================================= */

/* 1. Container Utama Section */
#app-showcase {
    background: var(--light-bg);
    padding-bottom: 120px;
}

/* 2. Sub-judul di Header */
.showcase-subtitle {
    max-width: 700px;
    margin: 0 auto;
    color: var(--gray);
}

/* 3. Container Tombol Navigasi (Pill) */
.showcase-nav-pill {
    border: 1px solid #e2e8f0; /* Memberi border tipis agar terlihat */
    max-width: 100%;
    overflow-x: auto; /* Agar bisa digeser di HP kecil */
    margin-top: 15px;
    /* Flexbox utilities tetap di HTML (d-inline-flex, dll) */
}

/* 4. Tombol Navigasi */
.showcase-btn {
    transition: 0.3s;
    font-size: 0.85rem;
    white-space: nowrap; /* Mencegah teks turun baris */
}

/* 5. Deskripsi (Judul & Teks di atas gambar) */
.showcase-desc-title {
    color: var(--primary); /* Default warna (untuk Guru) */
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 15px;
}

/* Khusus Judul Wali Murid (Warna Hijau) */
.text-wali {
    color: #059669 !important;
}

.showcase-desc-text {
    color: var(--gray);
    margin: 0 auto;
    font-size: 1rem;
}

/* =========================================
   RESPONSIVE (Tampilan HP)
   ========================================= */
@media (max-width: 600px) {
    #app-showcase {
        padding-bottom: 60px; /* Padding bawah lebih kecil di HP */
    }
    
    .showcase-nav-pill {
        border: none;
        max-width: 100%;
        overflow-x: auto;
        margin-top: 15px;
        display: flex;
    }

    .showcase-btn {
        transition: 0.3s;
        font-size: 0.72rem;
        white-space: normal;
    }

    .showcase-desc-title {
        font-size: 1rem;
        margin-top: 10px;
    }

    .showcase-desc-text {
        font-size: 0.9rem;
        padding: 0 10px;
    }

    .mb-4 { margin-bottom: 1rem; }

    .browser-header {
        background: #f8fafc;
        padding: 5px 15px;
        display: flex;
        align-items: center;
        gap: 8px;
        border-bottom: 1px solid #e2e8f0;
    }

    .browser-url-bar {
        background: white;
        border-radius: 4px;
        padding: 4px 10px;
        font-size: 0.55rem;
        color: #94a3b8;
        margin-left: 10px;
        flex-grow: 1;
        border: 1px solid #e2e8f0;
        font-family: monospace;
    }

    .trust-section {
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        border-radius: 16px;
        padding: 30px 20px !important;
        max-width: 100% !important;
        margin: 0 auto 60px auto;
        text-align: center;
    }
}


/* =========================================
   TRUST SECTION (KOMITMEN LAYANAN)
   ========================================= */

/* 1. Wadah Utama */
.trust-section {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 16px;
    padding: 30px 20px;
    max-width: 800px;
    margin: 0 auto 60px auto;
    text-align: center;
}

/* 2. Header Judul */
.trust-header {
    margin: 0 0 25px 0;
    color: #166534;
    font-size: 1.1rem;
    font-weight: 700;
}

/* 3. Layout Grid/Flex */
.trust-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

/* 4. Item Card Individual */
.trust-item {
    flex: 1;
    min-width: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    text-align: left;
}

/* 5. Icon Bulat */
.trust-icon {
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

/* 6. Teks Konten */
.trust-content h5 {
    margin: 0 0 5px 0;
    font-size: 0.95rem;
}

.trust-content p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* --- TEMA WARNA (Agar HTML Bersih) --- */

/* Tema Hijau (Jaminan Sistem) */
.theme-green .trust-icon { color: #16a34a; }
.theme-green h5 { color: #14532d; }
.theme-green p { color: #15803d; }

/* Tema Cyan/Biru (Panduan) */
.theme-cyan .trust-icon { color: #0891b2; }
.theme-cyan h5 { color: #155e75; }
.theme-cyan p { color: #0e7490; }


/* =========================================
   MONTHLY PLAN SECTION (PAKET BULANAN)
   ========================================= */

/* 1. Container Utama */
.monthly-plan-section {
    margin-top: 60px;
    padding: 0 15px;
}

.monthly-container {
    max-width: 600px;
    margin: 0 auto 50px auto;
    text-align: center;
}

/* 2. Teks Pengantar */
.monthly-intro {
    color: #3d4c61;
    font-size: 1.6rem;
    margin-bottom: 20px;
    line-height: 1.5;
    font-weight: 800;
}

.monthly-subtext {
    font-size: 0.9rem;
    color: #94a3b8;
}

/* 3. Dropdown Box (Details) */
.monthly-dropdown {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    text-align: left;
    transition: all 0.3s ease;
}

/* 4. Header Dropdown (Summary) */
.monthly-summary {
    padding: 15px 20px;
    cursor: pointer;
    font-weight: 700;
    color: #334155;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none; /* Hilangkan panah default browser */
}

/* Menghilangkan panah default di Safari/Chrome */
.monthly-summary::-webkit-details-marker {
    display: none;
}

.summary-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Icon & Arrow */
.icon-calendar { color: #64748b; }
.arrow-icon { color: #94a3b8; transition: transform 0.3s ease; }

/* Rotasi Panah saat dibuka */
.monthly-dropdown[open] .arrow-icon {
    transform: rotate(180deg);
}

/* 5. Konten Dalam (Isi Paket) */
.monthly-content {
    padding: 20px;
    background: #fff;
}

/* Item Baris */
.monthly-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Garis putus-putus pemisah item pertama */
.monthly-item.has-border {
    margin-bottom: 15px;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 15px;
}

/* Teks Item */
.item-title { margin: 0; font-size: 1rem; }
.item-desc { color: #64748b; font-size: 0.85rem; }
.item-price { font-weight: 800; font-size: 1rem; }

/* Tombol Aksi */
.btn-monthly {
    margin-top: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

/* Gaya Tombol Lite (Outline) */
.btn-monthly.lite {
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #475569;
}
.btn-monthly.lite:hover { background: #f1f5f9; }

/* Gaya Tombol Pro (Biru Muda) */
.btn-monthly.pro {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
}
.btn-monthly.pro:hover { background: #dbeafe; }

/* Warna Teks Khusus */
.text-dark { color: #1e293b; }
.text-primary { color: #2563eb; }

@media (max-width: 600px) {
    .monthly-intro {
        color: #35465f;
        font-size: 1.4rem;
        margin-bottom: 20px;
        line-height: 1.5;
        font-weight: 900;
    }

    .monthly-subtext {
        font-size: 0.76rem;
        color: #4e5661;
        font-weight: 600;
    }

    .monthly-summary {
        padding: 15px 20px;
        cursor: pointer;
        font-weight: 700;
        color: #334155;
        background: #f8fafc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        list-style: none;
        font-size: 0.9rem;
    }

    .monthly-plan-section {
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
        padding: 0 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}