/* ============================================================
   AUTH & HALAMAN STATIS - CSS GABUNGAN
   Dipakai bersama oleh 6 halaman yang selama ini banyak
   copy-paste CSS yang sama persis:
     - auth/login.php
     - auth/register.php
     - page/faq.php
     - page/tos.php
     - page/contact.php
     - services/index.php

   Semua halaman ini di-load lewat landing/header.php +
   landing/footer.php, jadi file ini cukup di-link sekali di
   landing/header.php (setelah variables.css).

   UPDATE: selain CSS yang memang sama persis di banyak halaman
   (bagian 1-6 di bawah), file ini sekarang JUGA menampung CSS
   yang sebelumnya ditulis inline lewat <style> di masing-masing
   login.php / register.php / services/index.php / contact.php
   (bagian 7-10). Isinya TIDAK diubah sama sekali, cuma dipindah
   dari inline <style> ke sini - supaya browser cache filenya
   sekali dan tidak perlu download ulang CSS yang sama setiap
   pindah halaman. Font situs mengikuti stack default Bootstrap (font
   sistem tiap OS, tanpa webfont), dan link font per-halaman yang
   tadinya beda-beda sudah dihapus dari sana.
============================================================ */

/* ------------------------------------------------------------
   1. NAVBAR OVERRIDE
   Sama persis di keenam halaman: navbar dipaksa putih solid
   (tidak transparan seperti di landing page).
------------------------------------------------------------ */
#mp-navbar { background: rgba(255,255,255,0.98) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important; }
#mp-navbar .mp-brand { color: #1e293b !important; }
#mp-navbar .mp-brand img { filter: none !important; }
#mp-navbar .navbar-toggler { color: #1e293b !important; border-color: rgba(0,0,0,0.15) !important; }
#mp-navbar .nav-menu a:not(.btn-login) { color: #475569 !important; }
#mp-navbar .nav-menu a:not(.btn-login):hover { color: #0d6efd !important; }
#mp-navbar .btn-login { background: #0d6efd !important; color: var(--ui-text-invert) !important; }
#mp-navbar .btn-login:hover { background: #0b5ed7 !important; }
@media (max-width: 991px) {
    #mp-navbar .nav-menu { background: var(--ui-bg-card) !important; box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important; }
    #mp-navbar .nav-menu a:not(.btn-login) { color: #1e293b !important; }
    #mp-navbar .nav-menu a.btn-login { background: #0d6efd !important; color: var(--ui-text-invert) !important; }
}

/* ------------------------------------------------------------
   2. BACKGROUND DOT-GRID + EFEK GLOW DEKORATIF
   Pola background titik-titik + 2 lingkaran glow biru di pojok,
   dipakai di semua "section" utama keenam halaman. Ukuran/posisi
   layout (min-height, padding, justify-content, dst) TETAP beda
   per halaman, jadi itu tetap didefinisikan lokal di masing-masing
   file (lihat komentar di tiap file).
------------------------------------------------------------ */
.login-page-section {
    background-color: var(--bg-canvas);
    background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    position: relative;
    overflow: hidden;
}
.login-page-section::before,
.saas-reg-section::before,
.saas-faq-section::before,
.saas-tos-section::before,
.contact-section::before,
.saas-price-section::before {
    content: ''; position: absolute; width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(13,110,253,0.08) 0%, transparent 70%);
    top: -100px; left: -100px; border-radius: 50%; pointer-events: none; z-index: 0;
}
.login-page-section::after {
    content: ''; position: absolute; width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(13,110,253,0.06) 0%, transparent 70%);
    bottom: -50px; right: -50px; border-radius: 50%; pointer-events: none; z-index: 0;
}

/* ------------------------------------------------------------
   3. TOMBOL WHATSAPP FLOATING
   Sama persis di: register, faq, tos, services.
   (contact.php TIDAK pakai ini - dia punya tombol WA sendiri
   yang nempel di dalam card, bukan floating.)
------------------------------------------------------------ */
.wa-floating-btn {
    position: fixed; bottom: 25px; right: 25px;
    background-color: #25d366; color: var(--ui-text-invert);
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; box-shadow: 0 4px 16px rgba(37,211,102,0.3);
    z-index: 9999; text-decoration: none; transition: transform 0.2s;
}
.wa-floating-btn:hover { transform: scale(1.05); background-color: #20ba5a; color: white; }

/* ------------------------------------------------------------
   4. KARTU "CARD" DASAR (.saas-card) — dipakai services & halaman
   publik lainnya.
------------------------------------------------------------ */
.saas-card {
    background: var(--ui-bg-card);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.05);
    padding: 40px 32px;
    border: 1px solid var(--ui-border-soft);
}

/* ------------------------------------------------------------
   7. LOGIN.PHP - LAYOUT & KOMPONEN FORM KHUSUS
------------------------------------------------------------ */
:root {
    /* --mp-primary/--mp-primary-hover, warna teks & bg sudah datang dari
       assets/css/variables.css. Sisa 2 ini khusus dipakai di login.php saja. */
    --mp-white: #ffffff;
    --mp-border: #e2e8f0;
}

/* Navbar override & background dot-grid+glow sudah pindah ke
   assets/css/auth-pages.css. Di sini cukup override layout yang
   beda dari halaman lain (login full 100vh, tanpa gap). */
.login-page-section {
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 120px 20px 60px 20px;
}
.login-wrapper { width: 100%; max-width: 440px; position: relative; z-index: 10; margin: 0 auto; }
.login-card {
    background: var(--mp-white); border-radius: 20px;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid rgba(255,255,255,0.8); padding: 45px 40px; position: relative;
}
.login-brand { text-align: center; margin-bottom: 35px; }
.login-brand h2 { font-size: 26px; font-weight: 800; color: var(--text-heading); letter-spacing: -0.5px; margin-bottom: 8px; }
.login-brand p { font-size: 14.5px; color: var(--text-body); }

.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-heading); margin-bottom: 8px; }
.input-box { position: relative; }
.input-box .fa-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 15px; transition: 0.3s; pointer-events: none; }
.form-control-saas {
    width: 100%; padding: 14px 16px 14px 44px; border: 1.5px solid var(--mp-border);
    border-radius: 12px; font-size: 14.5px; font-weight: 500; color: var(--text-heading);
    background: var(--mp-white); outline: none; transition: all 0.2s ease;
}
.form-control-saas:focus { border-color: var(--mp-primary); box-shadow: 0 0 0 4px rgba(13,110,253,0.12); }

.btn-submit-saas {
    width: 100%; background: var(--mp-primary); color: var(--mp-white); border: none; padding: 15px;
    border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer;
    box-shadow: 0 4px 12px rgba(13,110,253,0.25);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.btn-submit-saas:hover { background: var(--mp-primary-hover); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13,110,253,0.3); }

.alert-wrapper { padding: 14px 16px; border-radius: 12px; font-size: 14px; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
.alert-danger-custom { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.alert-success-custom { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.alert-wrapper i { margin-top: 2px; font-size: 16px; }

.login-footer { margin-top: 30px; text-align: center; font-size: 14px; color: var(--text-body); border-top: 1px solid var(--mp-border); padding-top: 25px; line-height: 1.8; }
.login-footer a { color: var(--mp-primary); font-weight: 600; text-decoration: none; }
.login-footer a:hover { text-decoration: underline; }

@media (max-width: 575px) {
    .login-card { padding: 35px 25px; }
    .login-page-section { padding-top: 100px; }
}

/* ------------------------------------------------------------
   8. REGISTER.PHP - sisa komponen yang masih dipakai lintas halaman
   (layout lama register sudah diganti design system regv2-*)
------------------------------------------------------------ */
.promo-badge { position: absolute; top: -12px; left: 20px; background: #ef4444; color: var(--ui-text-invert); font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 20px; letter-spacing: 0.5px; }

.benefit-icon { width: 48px; height: 48px; background: rgba(13,110,253,0.1); color: var(--mp-primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.benefit-text h4 { font-size: 16px; font-weight: 700; color: var(--text-heading); margin: 0 0 4px 0; }
.benefit-text p { font-size: 14px; color: var(--text-body); margin: 0; line-height: 1.5; }

.saas-card h2 { font-size: 22px; font-weight: 700; color: var(--text-heading); margin-top: 0; margin-bottom: 25px; text-align: center; }

.saas-alert { padding: 12px 16px; border-radius: 10px; font-size: 13.5px; margin-bottom: 10px; display: flex; align-items: flex-start; gap: 10px; }
/* FIX (warna alert hilang): login.php & register.php memakai kelas
   saas-alert-danger/success tapi warnanya tidak pernah didefinisikan
   di CSS mana pun - pesan tampil hitam polos. Palet disamakan dengan
   .alert-danger-custom/.alert-success-custom di atas. */
.saas-alert-danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.saas-alert-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
/* FIX (ikon tidak sejajar): ikon FA perlu kompensasi margin agar segaris
   dengan baris pertama teks - pola sama dengan .saas-alert-info i di core.css
   dan .alert-wrapper i milik forgot/reset password. */
.saas-alert i { flex-shrink: 0; margin-top: 3px; }

/* ------------------------------------------------------------
   9. services/INDEX.PHP - LAYOUT & TABEL HARGA KHUSUS
------------------------------------------------------------ */

/* ========== JUDUL CARD ========== */
.saas-header {
    font-size: 18px; font-weight: 700; color: var(--text-heading);
    margin: 0 0 25px 0; display: flex; align-items: center; gap: 10px;
    padding-bottom: 16px; border-bottom: 1px solid var(--ui-border-soft);
    letter-spacing: -0.3px;
}
.saas-header i { color: var(--mp-primary); font-size: 18px; }

/* ========== FORM FILTER ========== */
.filter-form { margin-bottom: 24px; }
/* ========== TABEL HARGA ========== */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Tabel harga: min-width biar di layar sempit (mobile) tabel tidak menyesak
   jadi kolom sempit — malah scroll horizontal dengan lebar kolom nyaman. */
.saas-price-section .saas-table { min-width: 960px; }
.saas-table { width: 100%; border-collapse: collapse; }
.saas-table thead th {
    text-align: left; padding: 12px 14px; font-size: 11px; text-transform: uppercase;
    color: #94a3b8; border-bottom: 1px solid #e2e8f0; background: var(--ui-bg-subtle);
    font-weight: 700; letter-spacing: 0.8px;
}
.saas-table tbody td {
    padding: 14px 14px; font-size: 13.5px; color: var(--text-heading);
    border-bottom: 1px solid var(--ui-border-soft); vertical-align: middle; line-height: 1.5;
}
.saas-table tbody tr:hover { background-color: var(--ui-bg-subtle); }

/* ========== BADGES ========== */
/* Kolom ID & span badge-price dihapus dari services publik (disamakan
   dengan dashboard.php: sel polos, font-weight 400, tanpa badge/warna biru). */

/* ========== PAGINASI ========== */
.pagination { display: flex; padding-left: 0; list-style: none; border-radius: 10px; gap: 6px; margin-top: 24px; justify-content: center; }
.page-item .page-link {
    border: 1px solid #e2e8f0 !important; border-radius: 8px !important;
    color: var(--text-heading) !important; background-color: var(--ui-text-invert) !important;
    padding: 8px 14px !important; font-size: 13px !important; font-weight: 600 !important;
    transition: all 0.2s ease !important; text-decoration: none;
}
.page-item.active .page-link {
    background-color: var(--mp-primary) !important; border-color: var(--mp-primary) !important;
    color: var(--ui-text-invert) !important; box-shadow: 0 4px 10px rgba(13,110,253,0.15) !important;
}
.page-item .page-link:hover { background-color: var(--ui-bg-subtle) !important; border-color: #cbd5e1 !important; }

/* ========== RESPONSIF MOBILE ========== */
@media (max-width: 991px) {
    .saas-card { padding: 20px 16px; }
}

/* ------------------------------------------------------------
   10. PAGE/CONTACT.PHP — komponen yang masih dipakai:
   .db-content (konten dari database) & .btn-wa (tombol WA di card)
------------------------------------------------------------ */
.db-content {
    font-size: 14.5px;
    color: var(--text-body);
    line-height: 2;
}

.btn-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px;
    background: #25d366;
    color: var(--ui-text-invert);
    font-size: 14.5px;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(37,211,102,0.25);
    margin-top: 22px;
}
.btn-wa:hover {
    background: #1ebe5d;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37,211,102,0.3);
    color: var(--ui-text-invert);
}