/* ============================================================
   BURSA PANEL - LANDING PAGE CSS (Reseller Focus, Clean & Elegant)
   Dominan Putih Bersih, Tipografi Tajam & Aksen Biru Profesional.
   Dioptimalkan 100% untuk Mobile, Tablet, dan Desktop.
   ============================================================ */

:root {
    --bp-bg: #ffffff;
    --bp-bg-alt: #f8fafc;
    --bp-bg-blue-tint: #f0f7ff;
    --bp-bg-card: #ffffff;
    
    --bp-blue: #0052cc;
    --bp-blue-hover: #0043a8;
    --bp-blue-light: #e6f0ff;
    --bp-blue-border: #bfdbfe;
    
    --bp-green: #16a34a;
    --bp-green-bg: #f0fdf4;
    --bp-green-border: #bbf7d0;
    
    --bp-text-dark: #0f172a;
    --bp-text-body: #334155;
    --bp-text-muted: #64748b;
    --bp-text-light: #94a3b8;
    
    --bp-border: #e2e8f0;
    --bp-border-subtle: #f1f5f9;
    
    --bp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --bp-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    --bp-shadow-lg: 0 10px 30px rgba(0, 82, 204, 0.1);
    
    --bp-radius: 10px;
    --bp-radius-sm: 6px;
    --bp-radius-pill: 9999px;
}

/* Base */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    /* [FIX GESER-HORIZONTAL] Track scrollbar dipaksa selalu tampil.
       Tanpa ini, halaman panjang punya scrollbar sedangkan halaman
       pendek tidak -> lebar area konten beda ±15px -> header & semua
       konten center ikut bergeser tiap pindah halaman. */
    overflow-y: scroll;
}

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bp-bg);
    color: var(--bp-text-body);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    -webkit-font-smoothing: antialiased;

    /* STICKY FOOTER: body minimal setinggi layar & disusun sebagai
       kolom flex, sehingga .mp-footer (dengan margin-top:auto di bawah)
       selalu terdorong ke dasar viewport meski konten halaman pendek
       (mis. page/contact). Kalau konten lebih panjang dari layar,
       perilaku normal - tetap scroll seperti biasa. */
    min-height: 100vh;
    min-height: 100svh; /* akurat di mobile saat URL bar muncul/hilang */
    display: flex;
    flex-direction: column;
}

/* Pasangan sticky footer: serap semua sisa ruang kosong di atas footer.
   Catatan: menjadikan body flex menghilangkan margin collapsing antar
   elemen - pola CSS landing ini memisahkan section dengan PADDING
   (.mp-section dll.), jadi tidak ada layout yang bergantung pada itu. */
.mp-footer {
    margin-top: auto;
}

#mp-landing {
    background-color: var(--bp-bg);
    color: var(--bp-text-body);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
}

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

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

/* Navbar (Mempertahankan header.php) */
.mp-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 16px 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bp-border);
    transition: all 0.2s ease;
}

/* [FASE-1 REFACTOR] Rule .mp-navbar.scrolled (padding 12px) dihapus -
   tinggi navbar kini KONSTAN di semua halaman & posisi scroll apa pun,
   tidak ada lagi lompatan menyempit/melebar saat pindah halaman.
   Class "scrolled" memang tidak pernah dipasang lagi (event-nya juga
   sudah dibuang dari header.php). */

.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%;
}

.mp-brand {
    color: var(--bp-text-dark) !important;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mp-brand img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: none !important;
}

.nav-menu {
    display: flex;
    gap: 26px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-menu a:not(.btn-login) {
    color: var(--bp-text-body) !important;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.15s ease;
}
.nav-menu a:not(.btn-login):hover {
    color: var(--bp-blue) !important;
}

.btn-login {
    background: var(--bp-blue) !important;
    color: #ffffff !important;
    padding: 8px 20px;
    border-radius: var(--bp-radius-sm);
    font-weight: 600 !important;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    transition: background-color 0.15s ease;
}
.btn-login:hover {
    background: var(--bp-blue-hover) !important;
    color: #ffffff !important;
}

.navbar-toggler {
    border: 1px solid var(--bp-border);
    padding: 6px 10px;
    color: var(--bp-text-dark);
    background: transparent;
    border-radius: var(--bp-radius-sm);
    cursor: pointer;
    font-size: 16px;
}

@media (max-width: 991px) {
    .mp-navbar {
        padding: 12px 0 !important;
        background: #ffffff !important;
    }
    .nav-menu {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 16px 20px 24px !important;
        gap: 6px !important;
        background: #ffffff !important;
        border-bottom: 1px solid var(--bp-border);
        box-shadow: 0 10px 20px rgba(0,0,0,0.06) !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: all 0.2s ease;
    }
    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .nav-menu li {
        width: 100%;
    }
    .nav-menu a:not(.btn-login) {
        padding: 8px 0 !important;
        display: block;
        border-bottom: 1px solid var(--bp-border-subtle);
    }
    .nav-menu a.btn-login {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
        padding: 10px !important;
    }
}

/* Buttons */
.mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14.5px;
    font-weight: 600;
    border-radius: var(--bp-radius-sm);
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    text-align: center;
    white-space: nowrap;
}

.mp-btn-primary {
    background: var(--bp-blue);
    color: #ffffff !important;
}
.mp-btn-primary:hover {
    background: var(--bp-blue-hover);
}

.mp-btn-secondary {
    background: #ffffff;
    color: var(--bp-text-dark) !important;
    border-color: var(--bp-border);
}
.mp-btn-secondary:hover {
    background: var(--bp-bg-alt);
    border-color: #cbd5e1;
}

/* Section Common */
.mp-section {
    padding: 76px 0;
    position: relative;
}
.mp-section-alt {
    background-color: var(--bp-bg-alt);
    border-top: 1px solid var(--bp-border);
    border-bottom: 1px solid var(--bp-border);
}

.mp-section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 46px;
}
.mp-section-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--bp-text-dark);
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0 0 12px;
}
.mp-section-desc {
    font-size: 15px;
    color: var(--bp-text-muted);
    margin: 0;
    line-height: 1.6;
}

/* 1. HERO SECTION (Reseller Focused) */
.mp-hero-section {
    padding: 124px 0 64px;
    background: #ffffff;
    border-bottom: 1px solid var(--bp-border);
}

.mp-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 44px;
    align-items: center;
    min-width: 0;
}

.mp-hero-content {
    min-width: 0;
}

.mp-hero-preview {
    min-width: 0;
}

.mp-hero-title {
    font-size: 38px;
    font-weight: 800;
    color: var(--bp-text-dark);
    line-height: 1.25;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
}
.mp-hero-title span {
    color: var(--bp-blue);
}

.mp-hero-desc {
    font-size: 16px;
    color: var(--bp-text-body);
    line-height: 1.7;
    margin: 0 0 28px;
}

.mp-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.mp-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding-top: 20px;
    border-top: 1px solid var(--bp-border-subtle);
}
.mp-point-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bp-text-muted);
}
.mp-point-item i {
    color: var(--bp-green);
    flex-shrink: 0;
}

/* Hero Reseller Profit Table Showcase */
.mp-profit-showcase {
    background: #ffffff;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    box-shadow: var(--bp-shadow);
    overflow: hidden;
    width: 100%;
}

.mp-profit-head {
    padding: 14px 18px;
    background: var(--bp-bg-blue-tint);
    border-bottom: 1px solid var(--bp-blue-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mp-profit-head-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--bp-blue);
    display: flex;
    align-items: center;
    gap: 8px;
}
.mp-table-wrap {
    padding: 0;
    width: 100%;
}
.mp-profit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
    font-variant-numeric: tabular-nums; /* angka sejajar vertikal antar baris */
}
.mp-profit-table th {
    padding: 10px 14px;
    background: #f8fafc;
    color: var(--bp-text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--bp-border);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.mp-profit-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--bp-border-subtle);
    color: var(--bp-text-dark);
}
.mp-profit-table tr:last-child td {
    border-bottom: none;
}
.mp-td-service {
    font-weight: 600;
}
.mp-td-modal {
    color: var(--bp-text-muted);
}
.mp-td-jual {
    color: var(--bp-text-dark);
}
.mp-td-untung {
    color: var(--bp-green);
    font-weight: 700;
}

/* Mobile Profit List View (Khusus Tampilan HP) */
.mp-mobile-profit-list {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mp-mprofit-item {
    background: var(--bp-bg-alt);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-sm);
    padding: 10px 12px;
}
.mp-mprofit-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.mp-mprofit-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--bp-text-dark);
}
.mp-mprofit-badge {
    /* Opsi C: samakan dgn kolom untung tabel PC (mp-td-untung) - hijau tebal tanpa pil */
    font-size: 12px;
    font-weight: 700;
    color: var(--bp-green);
}
.mp-mprofit-details {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--bp-text-muted);
}
.mp-mprofit-details b {
    color: var(--bp-text-dark);
}
.mp-mprofit-details i {
    font-size: 10px;
    color: var(--bp-text-light);
}

.mp-profit-foot {
    padding: 12px 16px;
    background: #ffffff;
    border-top: 1px solid var(--bp-border);
    font-size: 12px;
    color: var(--bp-text-body);
    display: flex;
    align-items: center;
    gap: 8px;
}
.mp-profit-foot i {
    color: var(--bp-blue);
    font-size: 14px;
    flex-shrink: 0;
}

/* 2. STATS STRIP */
.mp-stats-strip {
    background: #ffffff;
    padding: 32px 0;
    border-bottom: 1px solid var(--bp-border);
}
.mp-stats-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}
.mp-stat-item {
    padding: 0 12px;
}
.mp-stat-item:not(:last-child) {
    border-right: 1px solid var(--bp-border);
}
.mp-stat-num {
    font-size: 32px;
    font-weight: 800;
    color: var(--bp-text-dark);
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}
.mp-stat-lbl {
    font-size: 13.5px;
    color: var(--bp-text-muted);
    font-weight: 500;
}

/* 3. CARA KERJA RESELLER (3 Step Horizontal Cards) */
.mp-workflow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.mp-work-card {
    background: #ffffff;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    padding: 26px 22px;
    box-shadow: var(--bp-shadow-sm);
    position: relative;
}
.mp-work-num {
    width: 34px;
    height: 34px;
    border-radius: var(--bp-radius-sm);
    background: var(--bp-bg-blue-tint);
    border: 1px solid var(--bp-blue-border);
    color: var(--bp-blue);
    font-weight: 800;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.mp-work-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--bp-text-dark);
    margin: 0 0 8px;
}
.mp-work-desc {
    font-size: 14px;
    color: var(--bp-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* 4. KEUNGGULAN RESELLER (4 Grid) */
.mp-reseller-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.mp-benefit-card {
    background: #ffffff;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    padding: 24px 20px;
    box-shadow: var(--bp-shadow-sm);
}
.mp-benefit-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--bp-radius-sm);
    background: var(--bp-bg-blue-tint);
    color: var(--bp-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}
.mp-benefit-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--bp-text-dark);
    margin: 0 0 8px;
}
.mp-benefit-text {
    font-size: 13.5px;
    color: var(--bp-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* 5. TESTIMONI RESELLER */
.mp-testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.mp-testi-card {
    background: #ffffff;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--bp-shadow-sm);
}
.mp-testi-stars {
    color: #eab308;
    font-size: 13px;
    margin-bottom: 12px;
}
.mp-testi-text {
    font-size: 14px;
    color: var(--bp-text-body);
    line-height: 1.65;
    margin: 0 0 20px;
}
.mp-testi-author {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--bp-border-subtle);
}
.mp-author-initial {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bp-bg-blue-tint);
    color: var(--bp-blue);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bp-blue-border);
}
.mp-author-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bp-text-dark);
}
.mp-author-role {
    font-size: 12px;
    color: var(--bp-green);
    font-weight: 600;
}

/* 6. FAQ RESELLER */
.mp-faq-wrap {
    max-width: 740px;
    margin: 0 auto;
}
.mp-faq-item {
    background: #ffffff;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-sm);
    margin-bottom: 10px;
    overflow: hidden;
}
.mp-faq-item.active {
    border-color: var(--bp-blue-border);
}
.mp-faq-q {
    width: 100%;
    padding: 16px 20px;
    text-align: left;
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--bp-text-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.mp-faq-q:focus {
    outline: none !important;
}
.mp-faq-q i {
    color: var(--bp-text-muted);
    font-size: 13px;
    transition: transform 0.2s ease;
}
.mp-faq-item.active .mp-faq-q {
    color: var(--bp-blue);
}
.mp-faq-item.active .mp-faq-q i {
    transform: rotate(180deg);
    color: var(--bp-blue);
}
.mp-faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}
.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 18px;
    font-size: 14px;
    color: var(--bp-text-body);
    line-height: 1.65;
    margin: 0;
}

/* 7. METODE PEMBAYARAN */
.mp-pay-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    max-width: 900px;
    margin: 0 auto;
}
.mp-pay-badge {
    width: 100px;
    height: 56px;
    background: #ffffff;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
}
.mp-pay-badge img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Footer */
.mp-footer {
    background: #ffffff;
    color: var(--bp-text-body);
    padding: 60px 0 24px;
    border-top: 1px solid var(--bp-border);
}
.mp-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}
.mp-footer-brand {
    font-size: 18px;
    font-weight: 800;
    color: var(--bp-text-dark);
    text-decoration: none !important;
    display: inline-block;
    margin-bottom: 12px;
}
.mp-footer-desc {
    font-size: 13.5px;
    color: var(--bp-text-muted);
    line-height: 1.65;
    margin: 0;
    max-width: 360px;
}
.mp-footer-col h4 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bp-text-dark);
    margin: 0 0 14px;
}
.mp-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mp-footer-col ul li {
    margin-bottom: 10px;
}
.mp-footer-col ul a {
    color: var(--bp-text-muted);
    text-decoration: none !important;
    font-size: 13.5px;
    transition: color 0.15s ease;
}
.mp-footer-col ul a:hover {
    color: var(--bp-blue);
}
.mp-footer-bottom {
    padding-top: 20px;
    border-top: 1px solid var(--bp-border-subtle);
    text-align: center;
    font-size: 13px;
    color: var(--bp-text-light);
}

/* ============================================================
   MOTION SYSTEM — SCROLL REVEAL & MICRO-INTERACTIONS
   Ditingkatkan dari versi lama (fade 14px/0.35s yang nyaris tak
   terlihat) menjadi sistem lengkap:

     - .mp-reveal            elemen tersembunyi sampai dapat class
                             "active", lalu memakai CSS ANIMATION
                             (bukan transition) supaya reveal-delay
                             TIDAK menular ke transisi hover elemen
                             yang sama.
     - --reveal-delay        delay custom per elemen via inline style,
                             contoh: style="--reveal-delay:.25s"
     - .mp-delay-1..4        utilitas delay (kompatibel pemakaian lama)
     - .mp-reveal-scale / -left / -right   varian arah masuk
     - .mp-stagger           dipasang di parent grid; anak-anaknya
                             muncul berurutan mengikuti --stagger-i
                             yang di-set JS (landing/home.php).

   Trigger "active" ditambahkan IntersectionObserver di
   landing/home.php. Tanpa JS, <noscript> memaksa semua tampil.
   Guard prefers-reduced-motion ada di akhir bagian ini.
   ============================================================ */
.mp-reveal { opacity: 0; }
.mp-reveal.active {
    animation: mpRevealUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--reveal-delay, 0s);
}
.mp-reveal-scale.active { animation-name: mpRevealScale; }
.mp-reveal-left.active  { animation-name: mpRevealLeft; }
.mp-reveal-right.active { animation-name: mpRevealRight; }

@keyframes mpRevealUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mpRevealScale {
    from { opacity: 0; transform: scale(0.95) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes mpRevealLeft {
    from { opacity: 0; transform: translateX(-32px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes mpRevealRight {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Delay utilitas — pakai custom property untuk animation-delay,
   BUKAN transition-delay, agar hover tetap responsif setelahnya. */
.mp-delay-1 { --reveal-delay: 0.1s; }
.mp-delay-2 { --reveal-delay: 0.2s; }
.mp-delay-3 { --reveal-delay: 0.3s; }
.mp-delay-4 { --reveal-delay: 0.4s; }

/* Grid ber-stagger: anak-anak baru tampak setelah parent aktif,
   muncul satu per satu (75ms per anak, indeks dari JS). */
.mp-stagger > * { opacity: 0; }
.mp-stagger.active > * {
    animation: mpRevealUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--stagger-i, 0) * 75ms);
}

/* ------------------------------------------------------------
   MICRO-INTERACTIONS (umpan balik hover/tekan).
   Hanya animasikan transform / box-shadow / border-color agar
   tetap mulus 60fps dan tidak memicu layout shift.
   ------------------------------------------------------------ */

/* Tombol CTA: terangkat tipis saat hover, "ditekan" saat klik */
.mp-btn-primary { box-shadow: 0 4px 14px rgba(0, 82, 204, 0.22); }
.mp-btn-primary:hover {
    box-shadow: 0 8px 22px rgba(0, 82, 204, 0.3);
    transform: translateY(-2px);
}
.mp-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.mp-btn:active {
    transform: translateY(0) scale(0.97);
    box-shadow: none;
}
.mp-btn i { transition: transform 0.2s ease; }
.mp-btn-primary:hover i:first-child { transform: translateX(2px); }

/* Link navbar (desktop): garis bawah meluncur saat hover.
   Mobile sengaja dikecualikan - menunya berupa baris penuh. */
@media (min-width: 992px) {
    .nav-menu a:not(.btn-login) { position: relative; }
    .nav-menu a:not(.btn-login)::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 100%;
        height: 2px;
        background: var(--bp-blue);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.22s ease;
    }
    .nav-menu a:not(.btn-login):hover::after { transform: scaleX(1); }
}

/* Kartu cara kerja / keunggulan / testimoni: terangkat halus */
.mp-work-card,
.mp-benefit-card,
.mp-testi-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.mp-work-card:hover,
.mp-benefit-card:hover,
.mp-testi-card:hover {
    transform: translateY(-4px);
    border-color: var(--bp-blue-border);
    box-shadow: var(--bp-shadow-lg);
}

/* Ikon kartu keunggulan ikut "hidup" saat kartunya di-hover */
.mp-benefit-icon { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mp-benefit-card:hover .mp-benefit-icon { transform: scale(1.08); }

/* Nomor langkah cara kerja membesar tipis */
.mp-work-num { transition: transform 0.25s ease; }
.mp-work-card:hover .mp-work-num { transform: scale(1.1); }

/* Badge metode pembayaran: terangkat kecil + bayangan biru lembut */
.mp-pay-badge {
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.mp-pay-badge:hover {
    transform: translateY(-3px);
    border-color: var(--bp-blue-border);
    box-shadow: 0 8px 18px rgba(0, 82, 204, 0.12);
}

/* Item FAQ: penanda hover lembut (accordion-nya sudah smooth) */
.mp-faq-item { transition: border-color 0.2s ease; }
.mp-faq-item:hover { border-color: #cbd9f7; }

/* Kartu blog: zoom thumbnail tipis + panah "Baca Selengkapnya"
   bergeser. Kartu sengaja TIDAK terangkat (lihat catatan sejarah
   permintaan pemilik di blok .mp-blog-card di bawah). */
.mp-blog-thumb img { transition: transform 0.4s ease; }
.mp-blog-card:hover .mp-blog-thumb img { transform: scale(1.04); }
.mp-blog-more i { display: inline-block; transition: transform 0.2s ease; }
.mp-blog-card:hover .mp-blog-more i { transform: translateX(3px); }

/* ------------------------------------------------------------
   AKSESIBILITAS: hormati preferensi "kurangi gerak" pengguna.
   Semua animasi/transisi dimatikan & konten langsung tampil.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .mp-reveal,
    .mp-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* ============================================================
   RESPONSIVE BREAKPOINTS (Tablet & Mobile Optimization)
   ============================================================ */

@media (min-width: 768px) {
    .mp-mobile-profit-list {
        display: none !important;
    }
    .mp-table-wrap {
        display: block !important;
    }
}

@media (max-width: 991px) {
    .mp-container {
        padding: 0 16px;
    }
    .mp-hero-section {
        padding: 105px 0 50px;
    }
    .mp-hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .mp-hero-title {
        font-size: 30px;
    }
    .mp-workflow-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .mp-reseller-benefits {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .mp-testi-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .mp-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 767px) {
    .mp-table-wrap {
        display: none !important;
    }
    .mp-mobile-profit-list {
        display: flex !important;
    }
}

@media (max-width: 640px) {
    .mp-section {
        padding: 52px 0;
    }
    .mp-section-head {
        margin-bottom: 30px;
    }
    .mp-section-title {
        font-size: 22px;
    }
    .mp-section-desc {
        font-size: 13.5px;
    }

    .mp-hero-section {
        padding: 85px 0 40px;
    }
    .mp-hero-title {
        font-size: 24px;
        line-height: 1.3;
        margin-bottom: 12px;
    }
    .mp-hero-desc {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 22px;
    }
    .mp-hero-actions {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 22px;
    }
    .mp-hero-actions .mp-btn {
        width: 100%;
        padding: 12px 18px;
        font-size: 14px;
    }

    .mp-hero-points {
        flex-direction: column;
        gap: 8px;
        padding-top: 16px;
    }

    .mp-stats-strip {
        padding: 24px 0;
    }
    .mp-stats-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .mp-stat-item {
        padding: 0;
    }
    .mp-stat-item:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid var(--bp-border);
        padding-bottom: 16px;
    }
    .mp-stat-num {
        font-size: 28px;
    }
    .mp-stat-lbl {
        font-size: 12.5px;
    }

    .mp-work-card {
        padding: 20px 18px;
    }
    .mp-reseller-benefits {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .mp-benefit-card {
        padding: 20px 18px;
    }

    .mp-testi-card {
        padding: 20px 18px;
    }

    .mp-faq-q {
        padding: 14px 16px;
        font-size: 14px;
    }
    .mp-faq-a-inner p {
        padding: 0 16px 14px;
        font-size: 13px;
    }

    .mp-pay-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .mp-pay-badge {
        width: 100%;
        height: 48px;
        padding: 6px;
    }

    .mp-footer {
        padding: 40px 0 20px;
    }
}

/* ============================================================
   BLOG (page/blog.php) — grid kartu, artikel detail, pagination.
   Mengikuti design token di atas (putih bersih + aksen --bp-blue).
   ============================================================ */
.mp-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mp-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--bp-bg-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    /* Riwayat: dulu benar-benar TANPA animasi hover apa pun (permintaan
       lama pemilik). Sekarang kartu tetap TIDAK terangkat, tapi diberi
       kedalaman halus (bayangan + zoom thumbnail + panah bergeser, lihat
       bagian Motion System di atas file ini) supaya landing tidak kaku.
       Mau kembali datar penuh? Hapus box-shadow di :hover + rule
       .mp-blog-card:hover .mp-blog-thumb img / .mp-blog-more i. */
    transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

.mp-blog-card:hover {
    border-color: var(--bp-blue-border);
    box-shadow: var(--bp-shadow);
}

.mp-blog-thumb {
    aspect-ratio: 16 / 9;
    background: var(--bp-bg-blue-tint);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-blog-thumb.empty i {
    font-size: 30px;
    color: var(--bp-blue);
    opacity: 0.45;
}

.mp-blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mp-blog-body {
    padding: 15px 17px 17px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}

.mp-blog-date {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bp-text-muted);
}

.mp-blog-title {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--bp-text-dark);
    line-height: 1.35;
    margin: 0;
}

.mp-blog-excerpt {
    font-size: 13.5px;
    color: var(--bp-text-body);
    line-height: 1.6;
    margin: 0;
    /* Potong maksimal 2 baris supaya tinggi kartu rapi/sejajar
       (terutama di grid 3 kolom di halaman depan) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mp-blog-more {
    margin-top: auto;
    padding-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bp-blue);
}

.mp-blog-more i {
    font-size: 11px;
}

/* --- Halaman detail artikel (FLAT tanpa border - permintaan pemilik) --- */
.blog-article {
    padding: 0;
}

.blog-article-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--bp-text-dark);
    line-height: 1.3;
    margin: 8px 0 18px;
}

.blog-article-img {
    width: 100%;
    border-radius: var(--bp-radius-sm);
    margin-bottom: 18px;
    display: block;
}

.blog-article-body {
    font-size: 15px;
    line-height: 1.75;
    color: var(--bp-text-body);
    word-wrap: break-word;
}

.blog-article-body h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bp-text-dark);
    margin: 26px 0 10px;
}

.blog-article-body h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--bp-text-dark);
    margin: 20px 0 8px;
}

.blog-article-body p {
    margin: 0 0 14px;
}

.blog-article-body ul,
.blog-article-body ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.blog-article-body li {
    margin-bottom: 6px;
}

.blog-article-body strong {
    color: var(--bp-text-dark);
}

.blog-article-body a {
    color: var(--bp-blue);
    font-weight: 600;
}

.blog-article-body img {
    max-width: 100%;
    border-radius: var(--bp-radius-sm);
    margin: 6px 0 14px;
}

.blog-article-back {
    margin: 22px 0 34px;
}

.blog-article-back a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--bp-text-muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.blog-article-back a:hover {
    color: var(--bp-blue);
}

/* --- Pagination blog --- */
.blog-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
}

.blog-page {
    min-width: 37px;
    height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-sm);
    background: #fff;
    color: var(--bp-text-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.blog-page:hover {
    border-color: var(--bp-blue);
    color: var(--bp-blue);
}

.blog-page.active {
    background: var(--bp-blue);
    border-color: var(--bp-blue);
    color: #ffffff;
}

@media (max-width: 900px) {
    .mp-blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .mp-blog-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .blog-article {
        padding: 20px 16px;
    }

    .blog-article-title {
        font-size: 22px;
    }

    .blog-article-body {
        font-size: 14.5px;
    }
}

/* ============================================================
   DETAIL ARTIKEL - grid 2 kolom: artikel kiri + sidebar kanan.
   Sidebar "MENU POST" berisi semua artikel Published urut ID,
   sticky mengikuti scroll, dan kolaps jadi 1 kolom di layar kecil.
   ============================================================ */
.blog-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    align-items: start;
}

/* Versi MINIMALIS (permintaan pemilik): tanpa kotak/kartu - cukup label
   kecil "Menu Post", daftar judul dengan pemisah tipis antar baris,
   artikel yang sedang dibaca = biru + tebal. */
.blog-side-box {
    position: sticky;
    top: 86px; /* di bawah navbar fixed */
}

.blog-side-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 10px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--bp-border);
    color: var(--bp-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.blog-side-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-side-link {
    display: block;
    padding: 9px 2px;
    color: var(--bp-text-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none !important;
    border-bottom: 1px solid var(--bp-border-subtle);
    transition: color 0.15s ease;
}

/* Item terakhir tanpa garis biar rapi */
.blog-side-list li:last-child .blog-side-link {
    border-bottom: 0;
}

.blog-side-link:hover {
    color: var(--bp-blue);
}

.blog-side-link.active {
    color: var(--bp-blue);
    font-weight: 700;
}

/* ============================================================
   BYLINE PENULIS (By Admin) - avatar inisial bulat + nama + tanggal
   di halaman detail artikel.
   ============================================================ */
.blog-article-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

/* Avatar penulis memakai IKON FONTAWESOME - gaya soft: lingkaran biru
   muda + ikon orang biru, senada badges/tombol soft di seluruh panel. */
.blog-author-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bp-blue-light);
    color: var(--bp-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: 0 0 auto;
}

.blog-author-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bp-text-dark);
}

.blog-meta-sep {
    color: var(--bp-text-light);
}

/* ============================================================
   FAQ - link "MORE INFO..." di ujung jawaban. Penulis halaman
   cukup mengetik [MORE INFO...](url) lewat admin -> dirender
   jadi link klik biru kapital bergaya soft + panah.
   ============================================================ */
.faq-more-info {
    display: inline-block;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--bp-blue);
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.faq-more-info:hover {
    text-decoration: underline;
}

.faq-more-info i {
    font-size: 11px;
    margin-left: 2px;
}

/* ============================================================
   REGISTER V2 — simple, elegan, profesional.
   Grid 2 kolom: kiri branding ringkas, kanan kartu form putih.
   Backend pendaftaran tidak berubah sama sekali.
   ============================================================ */
.regv2-wrap {
    max-width: 1060px;
    margin: 0 auto;
    padding: 118px 20px 70px; /* ruang atas ekstra: navbar fixed */
}

.regv2-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 48px;
    align-items: start;
}

/* --- Kiri: branding ringkas --- */
.regv2-title {
    font-size: 34px;
    font-weight: 800;
    color: var(--bp-text-dark);
    line-height: 1.25;
    margin: 0 0 14px;
}

.regv2-title span {
    color: var(--bp-blue);
}

.regv2-sub {
    font-size: 15px;
    color: var(--bp-text-body);
    line-height: 1.7;
    margin: 0 0 26px;
}

.regv2-promo {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bp-bg-blue-tint);
    border: 1px solid var(--bp-blue-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 22px;
}

.regv2-promo-badge {
    background: var(--bp-blue);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 6px;
    flex: 0 0 auto;
}

.regv2-promo-price .old {
    color: var(--bp-text-muted);
    text-decoration: line-through;
    font-size: 13px;
    margin-right: 8px;
}

.regv2-promo-price .new {
    color: var(--bp-blue);
    font-size: 19px;
    font-weight: 800;
}

.regv2-promo-price .note {
    display: block;
    font-size: 11.5px;
    color: var(--bp-text-muted);
    margin-top: 2px;
}

.regv2-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
}

.regv2-benefits li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--bp-text-body);
    padding: 7px 0;
}

.regv2-benefits i {
    color: var(--bp-green);
    font-size: 15px;
    flex: 0 0 auto;
}

/* --- Kanan: kartu form --- */
.regv2-card {
    background: #ffffff;
    border: 1px solid var(--bp-border);
    border-radius: 16px;
    padding: 30px 28px;
    box-shadow: 0 10px 30px rgba(0, 82, 204, 0.08);
}

.regv2-card-title {
    font-size: 21px;
    font-weight: 800;
    color: var(--bp-text-dark);
    margin: 0 0 4px;
}

.regv2-card-sub {
    font-size: 13px;
    color: var(--bp-text-muted);
    margin: 0 0 18px;
}

.regv2-field {
    margin-bottom: 14px;
}

.regv2-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bp-text-dark);
    margin-bottom: 6px;
}

.regv2-field input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--bp-border);
    border-radius: 9px;
    font-size: 14px;
    font-family: inherit;
    color: var(--bp-text-dark);
    background: #ffffff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.regv2-field input::placeholder {
    color: var(--bp-text-light);
}

.regv2-field input:focus {
    border-color: var(--bp-blue);
    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.12);
}

.regv2-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.regv2-submit {
    width: 100%;
    margin-top: 6px;
    padding: 13px;
    background: var(--bp-blue);
    color: #ffffff;
    border: none;
    border-radius: 9px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.regv2-submit:hover {
    background: var(--bp-blue-hover);
}

.regv2-login {
    text-align: center;
    font-size: 13.5px;
    color: var(--bp-text-muted);
    margin: 16px 0 0;
}

.regv2-login a {
    color: var(--bp-blue);
    font-weight: 700;
    text-decoration: none;
}

.regv2-login a:hover {
    text-decoration: underline;
}

/* Label "(opsional)" & teks bantu di form register */
.regv2-opt {
    color: var(--bp-text-muted);
    font-weight: 500;
    font-size: 11px;
}

.regv2-hint {
    display: block;
    font-size: 11.5px;
    color: var(--bp-text-muted);
    margin-top: 5px;
}

/* ============================================================
   LOGIN — memakai gaya Register V2 yang sama (regv2-*),
   plus: wrapper password + tombol mata & baris "Lupa sandi?".
   ============================================================ */
.regv2-pass-wrap {
    position: relative;
}

.regv2-pass-wrap input {
    padding-right: 40px;
}

.regv2-eye {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    color: var(--bp-text-muted);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}

.regv2-eye:hover {
    color: var(--bp-blue);
}

.regv2-options {
    text-align: right;
    margin: -4px 0 14px;
}

.regv2-options a {
    color: var(--bp-blue);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.regv2-options a:hover {
    text-decoration: underline;
}

/* ============================================================
   DAFTAR HARGA / SERVICES V2 — sederhana & elegan,
   satu kartu putih berisi filter + tabel harga.
   ============================================================ */
.svc2-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 118px 20px 70px; /* ruang atas ekstra: navbar fixed */
}

.svc2-head {
    margin-bottom: 22px;
}

.svc2-head h1 {
    font-size: 30px;
    font-weight: 800;
    color: var(--bp-text-dark);
    margin: 0 0 6px;
}

.svc2-head h1 span {
    color: var(--bp-blue);
}

.svc2-head p {
    font-size: 14.5px;
    color: var(--bp-text-muted);
    margin: 0;
}

.svc2-card {
    background: #ffffff;
    border: 1px solid var(--bp-border);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(0, 82, 204, 0.06);
}

.svc2-filter {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.svc2-filter .fg label {
    display: block;
    /* 12px -> 14px: seragam dengan standar label panel & seimbang
       dengan isian dropdown (13.5px) - sebelumnya terlalu kecil. */
    font-size: 14px;
    font-weight: 600;
    color: var(--bp-text-dark);
    margin-bottom: 5px;
}

.svc2-filter .fg-cat {
    width: 230px;
}

.svc2-filter .fg-cari {
    flex: 1 1 200px;
}

.svc2-filter select,
.svc2-filter input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bp-border);
    border-radius: 9px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--bp-text-dark);
    background: #ffffff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.svc2-filter select:focus,
.svc2-filter input:focus {
    border-color: var(--bp-blue);
    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.12);
}

.svc2-filter button {
    padding: 10px 18px;
    background: var(--bp-blue);
    color: #ffffff;
    border: none;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.svc2-filter button:hover {
    background: var(--bp-blue-hover);
}

.svc2-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* [FIX MOBILE] Penguatan konteks scroll: tanpa batasan eksplisit ini,
       di sebagian browser HP kontainer bisa ikut melebar mengikuti tabel
       sehingga scrollbar internal tidak pernah muncul (kolom kanan
       terpotong tak terlihat). */
    display: block;
    width: 100%;
    max-width: 100%;
}

.svc2-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 14px;
}

.svc2-table th {
    text-align: left;
    padding: 10px 12px;
    background: #f8fafc;
    color: var(--bp-text-muted);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--bp-border);
    white-space: nowrap;
}

.svc2-table td {
    padding: 12px;
    border-bottom: 1px solid var(--bp-border-subtle);
    color: var(--bp-text-body);
    vertical-align: top;
}

.svc2-table tbody tr:hover td {
    background: #f0f7ff;
}

/* EMPTY-STATE pencarian tanpa hasil — VERSSI SEDERHANA */
.svc2-empty td {
    padding: 32px 16px;
    text-align: center;
}
.svc2-empty .msg {
    font-size: 14px;
    color: var(--bp-text-muted);
}

/* ============================================================
   SVC2 PAGINATION — dipindah dari inline <style> services/index.php
   (Fase-1 refactor 2026-08-25). Lebar kolom tabel sengaja tetap
   inline di file tsb sesuai catatan pemilik.
   (teks info di kiri, deret tombol nomor di kanan)
   ============================================================ */
.saas-pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.saas-pagination-info {
    font-size: 13px;
    color: var(--bp-text-muted);
}

.svc2-card .pagination {
    margin-top: 0;
}

.svc2-card .page-link {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bp-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--bp-text-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.svc2-card a.page-link:hover {
    border-color: var(--bp-blue);
    color: var(--bp-blue);
}

.svc2-card .page-item.active .page-link {
    background: var(--bp-blue);
    border-color: var(--bp-blue);
    color: #ffffff;
}

.svc2-card .page-item.disabled .page-link {
    opacity: 0.45;
    cursor: not-allowed;
}

/* KHUSUS MOBILE: layar sempit -> tombol diperkecil, deret boleh
   melipat & dibuat tengah supaya tidak menembus tepi kartu */
@media (max-width: 768px) {
    .saas-pagination-wrap {
        width: 100%;
        justify-content: center;
    }

    .svc2-card .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .svc2-card .page-link {
        min-width: 30px;
        height: 30px;
        padding: 0 6px;
        font-size: 12.5px;
    }
}

/* [FIX MOBILE] Kunci lebar wrap di layar sempit: tanpa ini, .svc2-wrap
   mengembang mengikuti tabel (766px di layar 407px) sehingga kolom kanan
   terpotong oleh overflow-x:hidden dan scroll internal tak berfungsi. */
@media (max-width: 991px) {
    .svc2-wrap {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 991px) {
    .regv2-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .regv2-wrap {
        padding-top: 104px;
    }

    .regv2-title {
        font-size: 27px;
    }

    .regv2-card {
        padding: 24px 20px;
    }
}

@media (max-width: 991px) {
    .blog-detail-grid {
        grid-template-columns: 1fr;
    }

    /* Di HP/tablet sidebar tidak perlu sticky (menempel di bawah artikel) */
    .blog-side-box {
        position: static;
    }
}



/* ============================================================
   FONT OVERRIDE - Roboto utk komponen Bootstrap yg membawa stack
   font sendiri (body, tooltip & popover di vendor CSS). File ini
   dimuat SETELAH vendor/bootstrap-landing.min.css -> menang.
   ============================================================ */
body,
.tooltip,
.popover {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}