/* ============================================================
   LANDING PAGE - CSS GABUNGAN
   Sebelumnya tersebar di 3 file terpisah (masing-masing punya
   <style> sendiri): landing/header.php, landing/footer.php,
   dan landing/home.php.

   Skema warna landing page ini SENGAJA dibiarkan beda dari tema
   biru SaaS di assets/css/variables.css (dashboard/app & auth) -
   landing page punya identitas visual sendiri (marketing page).
============================================================ */

/* ------------------------------------------------------------
   1. NAVBAR (dari landing/header.php)
------------------------------------------------------------ */
        html {
            overflow-y: scroll;
        }

        /* ✅ Navbar selalu putih, tidak transparan */
        .mp-navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 16px 0;
            z-index: 9999;
            background-color: rgba(255, 255, 255, 0.98);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .mp-navbar .container {
            max-width: 1140px !important;
            padding-left: 20px !important;
            padding-right: 20px !important;
        }

        .mp-nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        /* ✅ Brand selalu gelap (karena background putih) */
        .mp-brand {
            color: #1e293b;
            font-weight: 700;
            font-size: 19px;
            text-decoration: none !important;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: color 0.2s ease;
        }

        .mp-brand:hover {
            color: #0d6efd !important;
            text-decoration: none !important;
        }

        .mp-brand img {
            width: 25px;
            height: 25px;
            object-fit: contain;
            /* ✅ Logo tampil normal (tidak di-invert karena background putih) */
            filter: none;
        }

        /* ✅ Menu link selalu warna gelap */
        .nav-menu {
            display: flex;
            gap: 20px;
            align-items: center;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .nav-menu a:not(.btn-login) {
            color: #475569;
            text-decoration: none !important;
            font-weight: 500;
            font-size: 13.5px;
            transition: color 0.2s ease;
        }

        .nav-menu a:not(.btn-login):hover {
            color: #0d6efd;
            text-decoration: none !important;
        }

        /* ✅ Tombol Login selalu biru */
        .btn-login {
            background: #0d6efd !important;
            color: #fff !important;
            padding: 7px 20px;
            border-radius: 50px;
            text-align: center;
            font-weight: 600 !important;
            font-size: 13.5px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: background-color 0.2s ease;
            text-decoration: none !important;
        }

        .btn-login:hover {
            background: #0b5ed7 !important;
            text-decoration: none !important;
        }

        /* ✅ Hamburger toggler selalu gelap */
        .navbar-toggler {
            border: 1px solid rgba(0, 0, 0, 0.15);
            padding: 6px 12px;
            color: #1e293b;
            cursor: pointer;
            background: transparent;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        .navbar-toggler:focus {
            outline: none;
        }

        /* ✅ RESPONSIVE MOBILE */
        @media (max-width: 991px) {
            .mp-navbar {
                padding: 12px 0 !important;
            }

            .nav-menu {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                padding: 10px 20px 25px 20px !important;
                gap: 2px !important;
                /* ✅ Dropdown mobile juga putih */
                background: #fff !important;
                box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
                margin-top: -1px !important;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-8px);
                transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
            }

            .nav-menu.active {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }

            .nav-menu li {
                width: 100%;
                list-style: none;
            }

            /* ✅ Link mobile warna gelap (karena dropdown putih) */
            .nav-menu a:not(.btn-login) {
                color: #1e293b !important;
                padding: 8px 5px !important;
                width: 100%;
                display: block;
                text-align: left;
                font-weight: 500;
                font-size: 14px !important;
                border: none;
                text-decoration: none !important;
            }

            .nav-menu li:last-child {
                margin-top: 12px !important;
            }

            /* ✅ Tombol login di mobile tetap biru */
            .nav-menu a.btn-login {
                background: #0d6efd !important;
                color: #fff !important;
                padding: 11px 20px !important;
                border-radius: 50px !important;
                text-align: center;
                font-weight: 600;
                font-size: 14px !important;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 6px;
                text-decoration: none !important;
            }
        }

/* ------------------------------------------------------------
   2. KONTEN LANDING PAGE (dari landing/home.php)
------------------------------------------------------------ */
    /* ============================================================
       LANDING PAGE — RESELLER FOCUS
       Flat, Blue & White, Panel-style (bukan glossy gradient)
       Struktur class & hook JS TIDAK diubah — hanya tampilan & copy.
    ============================================================ */

    /* 1. VARIABEL CSS (Design Tokens)
       Nama variabel dipertahankan sama seperti kode asli agar tidak ada yang patah
       jika direferensikan di tempat lain — hanya NILAINYA yang diubah jadi flat. */
    :root {
        --mp-primary: #0052E0;
        --mp-secondary: #0052E0;
        --mp-gradient: linear-gradient(135deg, var(--mp-primary) 0%, var(--mp-secondary) 100%);
        --mp-dark: #0B1B3A;
        --mp-text: #51607C;
        --mp-bg: #F5F8FF;
        --mp-white: #ffffff;
        --mp-line: #D7E2FA;
        --mp-shadow: 0 1px 2px rgba(16, 40, 90, 0.06);
        --mp-radius: 10px;
        --mp-accent: #FFB020;
        --mp-accent-ink: #7A4A00;
        --mp-teal: #00B894;
        --mp-pink: #FF4D8D;
    }

    /* 2. GLOBAL RESET & TYPOGRAPHY */
    #mp-landing {
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        background: var(--mp-bg);
        overflow-x: hidden;
        color: var(--mp-text);
    }

    #mp-landing * {
        box-sizing: border-box;
    }

    #mp-landing a {
        text-decoration: none;
        transition: 0.3s;
    }

    .mp-container {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .mp-title {
        color: var(--mp-dark);
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .mp-subtitle {
        font-size: 16px;
        line-height: 1.7;
        color: var(--mp-text);
        margin-bottom: 30px;
    }

    .text-center {
        text-align: center;
    }

    /* Baris platform yang didukung — versi tenang, monokrom */
    .mp-platform-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 34px;
    }
    .mp-platform-row .mp-plat-label {
        font-size: 12.5px;
        color: rgba(255,255,255,0.6);
        letter-spacing: .02em;
        width: 100%;
        margin: 0 0 12px;
    }
    .mp-plat-icons {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .mp-plat-badge {
        width: 34px; height: 34px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 14px; color: #fff;
        border: 1px solid rgba(255,255,255,0.3);
        background: transparent;
    }

    /* Badge ringkasan "+N Lainnya" — dipakai kalau daftar platform terlalu panjang */
    .mp-plat-badge.mp-plat-more {
        width: auto;
        border-radius: 17px;
        padding: 0 12px;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        border: 1px solid rgba(255,255,255,0.3);
        background: rgba(255,255,255,0.08);
        cursor: default;
    }

    /* 3. TOMBOL (Buttons) — dipertahankan strukturnya, dibuat lebih flat */
    .mp-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 13px 26px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 15px;
        gap: 8px;
        transition: all 0.2s ease;
        border: none;
        cursor: pointer;
    }

    .mp-btn-primary {
        background: var(--mp-white);
        color: var(--mp-primary);
    }
    .mp-btn-primary:hover { background: #EDF3FF; }

    .mp-btn-outline {
        background: transparent;
        color: var(--mp-white);
        border: 1.5px solid rgba(255,255,255,0.45);
    }
    .mp-btn-outline:hover { border-color: rgba(255,255,255,0.8); }

    .mp-btn-dark {
        background: var(--mp-primary);
        color: var(--mp-white);
    }
    .mp-btn-dark:hover { background: #003FB0; }

    /* 4. HERO SECTION — biru solid, tenang, tanpa ornamen dekoratif */
    .mp-hero {
        position: relative;
        background: var(--mp-primary);
        padding: 128px 0 0;
        color: var(--mp-white);
        z-index: 1;
    }
    .mp-hero .mp-container { position: relative; z-index: 1; }

    .mp-hero-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 40px;
        padding-bottom: 70px;
    }

    .mp-hero-text {
        flex: 1;
        min-width: 300px;
        max-width: 560px;
    }

    .mp-hero-text .mp-title {
        color: var(--mp-white);
        font-size: 40px;
    }

    .mp-hero-text .mp-subtitle {
        color: rgba(255,255,255,0.88);
        font-size: 17px;
    }

    .mp-hero-img {
        flex: 1;
        min-width: 300px;
        display: flex;
        justify-content: center;
        position: relative;
    }

    /* Kartu simulasi keuntungan reseller — flat, tanpa blur & tanpa animasi mengambang */
    .mp-profit-card {
        background: var(--mp-white);
        border: 1px solid var(--mp-line);
        padding: 28px;
        border-radius: 12px;
        width: 100%;
        max-width: 400px;
        box-shadow: 0 20px 50px -20px rgba(0,30,90,0.25);
    }

    .mp-profit-card .mp-profit-label {
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--mp-primary);
        margin-bottom: 16px;
        display: block;
    }

    .mp-profit-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid var(--mp-line);
        font-size: 14px;
        color: var(--mp-dark);
    }
    .mp-profit-row:last-of-type { border-bottom: none; }
    .mp-profit-row span:first-child { color: var(--mp-text); }
    .mp-profit-row b { font-weight: 700; }

    .mp-profit-total {
        margin-top: 16px;
        padding: 16px 18px;
        background: var(--mp-bg);
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mp-profit-total span { font-size: 13px; color: var(--mp-text); font-weight: 600; }
    .mp-profit-total b { font-size: 21px; color: var(--mp-primary); font-weight: 800; }
    .mp-profit-note { font-size: 11.5px; color: var(--mp-text); margin-top: 14px; text-align: center; }

    /* 5. STATS SECTION */
    .mp-stats-wrapper {
        position: relative;
        margin-top: -56px;
        z-index: 10;
        padding-bottom: 60px;
    }

    .mp-stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 18px;
    }

    .mp-stat-box {
        background: var(--mp-white);
        padding: 26px 20px;
        border-radius: var(--mp-radius);
        text-align: center;
        border: 1px solid var(--mp-line);
        box-shadow: var(--mp-shadow);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        transition: box-shadow 0.25s ease;
    }
    .mp-stat-box:hover { box-shadow: 0 10px 26px -16px rgba(16,40,90,0.25); }

    .mp-stat-icon {
        width: 52px;
        height: 52px;
        background: var(--mp-bg);
        color: var(--mp-primary);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 21px;
        margin-bottom: 8px;
        border: 1px solid var(--mp-line);
    }

    .mp-stat-num {
        font-size: 30px;
        font-weight: 800;
        color: var(--mp-dark);
        line-height: 1;
    }

    .mp-stat-text {
        font-size: 13px;
        color: var(--mp-text);
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
    }

    /* 5b. LANGKAH JADI RESELLER */
    .mp-steps-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        border: 1px solid var(--mp-line);
        border-radius: var(--mp-radius);
        overflow: hidden;
        background: var(--mp-white);
    }
    .mp-step {
        padding: 34px 26px;
        border-right: 1px solid var(--mp-line);
    }
    .mp-step:last-child { border-right: none; }
    .mp-step-num {
        font-size: 12px;
        font-weight: 700;
        color: var(--mp-primary);
        margin-bottom: 14px;
        display: block;
        letter-spacing: .05em;
    }
    .mp-step h3 { font-size: 16px; color: var(--mp-dark); font-weight: 700; margin-bottom: 8px; }
    .mp-step p { font-size: 13.5px; margin: 0; }

    /* 6. FEATURES SECTION */
    .mp-section {
        padding: 100px 0;
    }

    .mp-section-head {
        text-align: center;
        max-width: 620px;
        margin: 0 auto 56px;
    }

    .mp-section-head .mp-title {
        font-size: 30px;
    }

    .mp-features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 0;
        border: 1px solid var(--mp-line);
        border-radius: var(--mp-radius);
        overflow: hidden;
    }

    .mp-feat-card {
        background: var(--mp-white);
        padding: 42px 32px;
        border-right: 1px solid var(--mp-line);
    }
    .mp-feat-card:last-child { border-right: none; }

    .mp-feat-icon {
        width: 46px;
        height: 46px;
        background: var(--mp-primary);
        color: var(--mp-white);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        margin-bottom: 20px;
    }

    .mp-feat-card h3 {
        font-size: 18px;
        color: var(--mp-dark);
        font-weight: 700;
        margin-bottom: 12px;
    }

    .mp-feat-card p {
        font-size: 14.5px;
        line-height: 1.6;
        margin: 0;
    }

    /* 7. FAQ SECTION — struktur & class dipertahankan 100% untuk JS */
    .mp-faq-bg {
        background: var(--mp-white);
    }

    .mp-faq-wrap {
        max-width: 700px;
        margin: 0 auto;
    }

    .mp-faq-item {
        background: var(--mp-bg);
        border-radius: 10px;
        margin-bottom: 12px;
        border: 1px solid var(--mp-line);
        transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .mp-faq-item.active {
        background: var(--mp-white);
        border-color: var(--mp-primary);
        box-shadow: var(--mp-shadow);
    }

    .mp-faq-q {
        width: 100%;
        padding: 18px 20px;
        text-align: left;
        background: none;
        border: none;
        font-size: 15.5px;
        font-weight: 700;
        color: var(--mp-dark);
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: color 0.3s ease;
    }

    .mp-faq-q:focus, .mp-faq-q:active {
        outline: none !important;
        box-shadow: none !important;
    }

    .mp-faq-q i {
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        color: var(--mp-primary);
    }

    .mp-faq-a {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mp-faq-item.active .mp-faq-a {
        grid-template-rows: 1fr;
    }

    .mp-faq-a-inner {
        overflow: hidden;
    }

    .mp-faq-a-inner p {
        padding: 0 20px 20px 20px;
        font-size: 14.5px;
        line-height: 1.6;
    }

    .mp-faq-item.active .mp-faq-q {
        color: var(--mp-primary);
    }

    .mp-faq-item.active .mp-faq-q i {
        transform: rotate(180deg);
    }

    /* 8. PAYMENT LOGOS SECTION */
    .mp-payment-flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin-top: 30px;
        max-width: 950px;
        margin-left: auto;
        margin-right: auto;
    }

    .mp-pay-badge {
        width: 128px;
        height: 52px;
        padding: 10px 15px;
        background: var(--mp-white);
        border-radius: 8px;
        border: 1px solid var(--mp-line);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: -.01em;
        text-align: center;
    }

    /* 9. FOOTER SECTION — style footer sekarang mandiri di dalam footer.php */

    /* 10. ANIMASI SCROLL REVEAL — tidak diubah, tetap dipakai JS yang sama */
    .mp-reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: all 0.6s ease;
    }

    .mp-reveal.active {
        opacity: 1;
        transform: translateY(0);
    }

    /* 11. MEDIA QUERY (Responsivitas Mobile) */
    @media (max-width: 768px) {
        .mp-hero {
            padding: 90px 0 0;
            text-align: center;
        }

        .mp-hero-text .mp-title {
            font-size: 30px;
        }

        .mp-hero-img {
            display: none;
        }

        .mp-stats-wrapper {
            margin-top: -40px;
        }

        .mp-steps-grid {
            grid-template-columns: 1fr;
        }
        .mp-step {
            border-right: none;
            border-bottom: 1px solid var(--mp-line);
        }
        .mp-step:last-child { border-bottom: none; }

        .mp-features-grid {
            grid-template-columns: 1fr;
        }
        .mp-feat-card {
            border-right: none;
            border-bottom: 1px solid var(--mp-line);
        }
        .mp-feat-card:last-child { border-bottom: none; }

        .mp-footer-grid {
            grid-template-columns: 1fr;
            gap: 30px;
            text-align: center;
        }

        .mp-payment-flex {
            gap: 10px;
        }

        .mp-pay-badge {
            width: 104px;
            height: 46px;
            padding: 8px;
        }

        /* Platform row di mobile: label & icon-icon di-center biar rapi */
        .mp-platform-row {
            justify-content: center;
            text-align: center;
        }
        .mp-plat-icons {
            justify-content: center;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .mp-reveal { transition: none; }
    }

/* ------------------------------------------------------------
   3. FOOTER (dari landing/footer.php)
------------------------------------------------------------ */
    /* Style mandiri untuk footer — supaya tampil konsisten di SEMUA halaman,
       tidak bergantung pada stylesheet halaman utama. */
    .mp-footer {
        background: #ffffff;
        color: #51607C;
        padding: 68px 0 30px;
        border-top: 1px solid #D7E2FA;
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }
    .mp-footer .mp-container {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .mp-footer .mp-footer-grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 40px;
        margin-bottom: 40px;
    }
    .mp-footer .mp-footer-brand {
        font-size: 22px;
        font-weight: 800;
        color: #0B1B3A;
        margin-bottom: 15px;
        display: inline-block;
        text-decoration: none;
    }
    .mp-footer p {
        margin: 0;
    }
    .mp-footer h4 {
        color: #0B1B3A;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin: 0 0 18px;
    }
    .mp-footer ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .mp-footer ul li {
        margin-bottom: 12px;
    }
    .mp-footer ul a {
        color: #51607C;
        font-size: 14px;
        text-decoration: none;
        transition: color .2s;
    }
    .mp-footer ul a:hover {
        color: #0052E0;
    }
    .mp-footer .mp-footer-bottom {
        text-align: center;
        padding-top: 28px;
        border-top: 1px solid #D7E2FA;
        font-size: 13.5px;
        color: #51607C;
    }
    @media (max-width: 768px) {
        .mp-footer .mp-footer-grid {
            grid-template-columns: 1fr;
            gap: 30px;
            text-align: center;
        }
    }