/* ============================================
   eSPP Login - Versi 1 : "Midnight Emerald Gold"
   Dipakai setiap hari MINGGU
   
   Arsitektur: Meng-override CSS Custom Properties
   yang didefinisikan di inline <style>. Semua
   variabel pakai !important agar selalu menang
   terhadap default, regardless load order.
   ============================================ */

/* =============================
   1. CSS CUSTOM PROPERTIES
   Override warna & radius utama
   ============================= */
:root {
    --es-primary: #10b981 !important;
    --es-primary-light: #34d399 !important;
    --es-primary-dark: #059669 !important;
    --es-primary-rgb: 16, 185, 129 !important;
    --es-text-dark: #f1f5f9 !important;
    --es-text-muted: #94a3b8 !important;
    --es-text-light: #475569 !important;
    --es-border: rgba(255, 255, 255, 0.07) !important;
    --es-card-bg: rgba(15, 23, 42, 0.6) !important;
    --es-card-border: rgba(255, 255, 255, 0.06) !important;
    --es-input-bg: rgba(15, 23, 42, 0.45) !important;
    --es-input-focus-bg: rgba(15, 23, 42, 0.75) !important;
    --es-overlay-bg: rgba(7, 11, 20, 0.4) !important;
    --es-danger: #fca5a5 !important;
    --es-danger-bg: rgba(220, 38, 38, 0.1) !important;
    --es-danger-border: rgba(220, 38, 38, 0.2) !important;
    --es-badge-ip-bg: rgba(16, 185, 129, 0.08) !important;
    --es-badge-ip-border: rgba(16, 185, 129, 0.15) !important;
    --es-badge-ip-color: #34d399 !important;
    --es-radius-sm: 12px !important;
    --es-radius-md: 14px !important;
    --es-radius-lg: 24px !important;
    --es-radius-xl: 28px !important;
}

/* =============================
   2. BODY & BACKGROUND LAYER
   Warna dasar gelap midnight
   ============================= */
body {
    background-color: #070b14 !important;
}

.es-bg-layer {
    background-color: #070b14 !important;
}

/* Gradient warna di atas gambar background
   Emerald glow kiri bawah, Gold glow kanan atas */
.es-bg-layer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 55% at 12% 88%, rgba(16, 185, 129, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 65% 45% at 88% 10%, rgba(245, 158, 11, 0.09) 0%, transparent 50%),
        radial-gradient(ellipse 40% 35% at 55% 55%, rgba(15, 23, 42, 0.25) 0%, transparent 60%);
    animation: v1-gradientBreath 8s ease-in-out infinite alternate;
}

@keyframes v1-gradientBreath {
    0%   { opacity: 0.85; }
    100% { opacity: 1; }
}

/* Grid pattern halus di atas overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 64px 64px;
}

/* =============================
   3. LOGIN WRAPPER / CARD
   Glass morphism gelap + accent line
   ============================= */
.login-wrapper {
    border-radius: var(--es-radius-xl) !important;
    padding: 42px 36px 28px !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(28px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow:
        0 0 0 1px rgba(16, 185, 129, 0.04),
        0 25px 50px rgba(0, 0, 0, 0.45),
        0 8px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Garis accent emerald → gold di atas card */
.login-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 36px;
    right: 36px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #10b981 30%, #f59e0b 50%, #10b981 70%, transparent 100%);
    border-radius: 0 0 2px 2px;
    z-index: 1;
    opacity: 0.75;
}

/* Glow halus di bawah card */
.login-wrapper::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 48px;
    right: 48px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.12), transparent);
    z-index: 1;
    pointer-events: none;
}

/* =============================
   4. BRAND SECTION
   Icon gold dengan ring emerald
   ============================= */
.brand {
    margin-bottom: 34px !important;
}

.brand-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow:
        0 8px 24px rgba(245, 158, 11, 0.28),
        0 0 0 4px rgba(245, 158, 11, 0.08) !important;
    position: relative !important;
    animation: v1-iconPulse 3.5s ease-in-out infinite !important;
}

/* Ring berputar di belakang icon */
.brand-icon::after {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 22px;
    border: 1.5px solid transparent;
    border-top-color: rgba(16, 185, 129, 0.5);
    border-right-color: rgba(16, 185, 129, 0.12);
    animation: v1-ringRotate 4s linear infinite;
    pointer-events: none;
}

.brand h1 {
    color: #f1f5f9 !important;
}

.brand p {
    color: #64748b !important;
    letter-spacing: 0.3px !important;
}

/* =============================
   5. FORM ELEMENTS
   Input gelap, focus emerald
   ============================= */
.form-label {
    color: #546580 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-size: 11px !important;
    margin-bottom: 8px !important;
}

.form-input {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
    border-width: 1.5px !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.form-input::placeholder {
    color: #364458 !important;
    font-weight: 500 !important;
}

.form-input:focus {
    border-color: #10b981 !important;
    box-shadow:
        0 0 0 4px rgba(16, 185, 129, 0.1),
        0 0 28px rgba(16, 185, 129, 0.06) !important;
}

.input-icon-left {
    color: #364458 !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
}

.form-input:focus ~ .input-icon-left,
.input-group:focus-within .input-icon-left {
    color: #10b981 !important;
    transform: scale(1.15) !important;
}

.btn-toggle-pass {
    color: #364458 !important;
}

.btn-toggle-pass:hover,
.btn-toggle-pass:active {
    color: #10b981 !important;
    background: rgba(16, 185, 129, 0.08) !important;
}

.btn-forgot {
    color: #10b981 !important;
    transition: color 0.2s ease !important;
}

.btn-forgot:hover,
.btn-forgot:active {
    color: #34d399 !important;
}

/* =============================
   6. BUTTON LOGIN
   Emerald gradient + shimmer
   ============================= */
.btn-login {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    box-shadow: 0 6px 24px rgba(16, 185, 129, 0.3) !important;
    letter-spacing: 0.3px !important;
    border-radius: var(--es-radius-md) !important;
}

/* Efek shimmer bergerak di atas button */
.btn-login::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    animation: v1-btnShimmer 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.btn-login:hover {
    box-shadow:
        0 10px 36px rgba(16, 185, 129, 0.38),
        0 0 0 1px rgba(16, 185, 129, 0.12) !important;
    transform: translateY(-2px) !important;
}

.btn-login:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25) !important;
}

.btn-login:disabled {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important;
}

/* =============================
   7. SOCIAL ICONS
   Gelap dengan hover emerald
   ============================= */
.social-icon {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #465a72 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.social-icon:hover,
.social-icon:active {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 22px rgba(16, 185, 129, 0.35) !important;
    transform: translateY(-3px) scale(1.1) !important;
}

/* =============================
   8. DIVIDER
   ============================= */
.divider-line {
    margin: 26px 0 0 !important;
}

.divider-line::before,
.divider-line::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent) !important;
}

.divider-line span {
    color: #283548 !important;
}

/* =============================
   9. INFO BADGES
   ============================= */
.info-badges {
    margin-top: 16px !important;
}

.info-badge {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    color: #465a72 !important;
}

.info-badge i {
    color: #10b981 !important;
}

.info-badge--ip {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

.info-badge--ip i {
    color: #10b981 !important;
}

/* =============================
   10. FOOTER
   ============================= */
.footer-text {
    color: #243042 !important;
    margin-top: 10px !important;
}

/* =============================
   11. MODAL LUPA PASSWORD
   Dark glass morphism
   ============================= */
.lp-modal {
    background: rgba(7, 11, 20, 0.7) !important;
}

.lp-card {
    background: rgba(15, 23, 42, 0.9) !important;
    backdrop-filter: blur(24px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.3) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(16, 185, 129, 0.05) !important;
}

.lp-title {
    color: #f1f5f9 !important;
}

.lp-text {
    color: #94a3b8 !important;
    line-height: 1.75 !important;
}

.lp-text strong {
    color: #e2e8f0 !important;
}

.lp-wa-box {
    background: rgba(16, 185, 129, 0.06) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
    color: #a7f3d0 !important;
}

.lp-wa-box a {
    color: #34d399 !important;
}

.lp-wa-box a:hover {
    color: #6ee7b7 !important;
}

.lp-timer {
    color: #2d3d52 !important;
}

/* =============================
   12. LOADING OVERLAY
   ============================= */
.login-loading-overlay {
    background: rgba(7, 11, 20, 0.72) !important;
}

.login-spinner {
    border-color: rgba(255, 255, 255, 0.06) !important;
    border-top-color: #10b981 !important;
}

/* =============================
   13. ERROR ALERT
   ============================= */
.alert-error {
    background: rgba(220, 38, 38, 0.08) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(220, 38, 38, 0.15) !important;
    border-left: 4px solid rgba(239, 68, 68, 0.55) !important;
}

/* =============================
   14. KEYFRAME ANIMATIONS
   Nama di-prefix v1- agar unik
   ============================= */
@keyframes v1-iconPulse {
    0%, 100% {
        box-shadow:
            0 8px 24px rgba(245, 158, 11, 0.28),
            0 0 0 4px rgba(245, 158, 11, 0.08);
    }
    50% {
        box-shadow:
            0 12px 36px rgba(245, 158, 11, 0.38),
            0 0 0 8px rgba(245, 158, 11, 0.03);
    }
}

@keyframes v1-ringRotate {
    to { transform: rotate(360deg); }
}

@keyframes v1-btnShimmer {
    0%, 60%, 100% { left: -100%; }
    78% { left: 130%; }
}

/* =============================
   15. RESPONSIF
   ============================= */

/* HP standar */
@media (max-width: 440px) {
    .login-wrapper {
        padding: 30px 22px 22px !important;
    }
    .login-wrapper::before {
        left: 28px;
        right: 28px;
    }
    .login-wrapper::after {
        left: 40px;
        right: 40px;
    }
    .brand-icon::after {
        inset: -6px;
        border-radius: 19px;
    }
}

/* HP kecil */
@media (max-width: 380px) {
    .login-wrapper {
        padding: 26px 18px 20px !important;
    }
    .login-wrapper::before {
        left: 22px;
        right: 22px;
    }
    .login-wrapper::after {
        left: 32px;
        right: 32px;
    }
    .brand-icon::after {
        inset: -5px;
        border-radius: 16px;
    }
    .brand {
        margin-bottom: 24px !important;
    }
}

/* HP sangat kecil */
@media (max-width: 320px) {
    .login-wrapper::before {
        left: 18px;
        right: 18px;
    }
    .login-wrapper::after {
        left: 28px;
        right: 28px;
    }
    .brand-icon::after {
        inset: -4px;
        border-radius: 14px;
    }
}

/* Landscape */
@media (max-height: 500px) and (orientation: landscape) {
    .brand {
        margin-bottom: 16px !important;
    }
    /* Sembunyikan ring di landscape agar hemat space */
    .brand-icon::after {
        display: none;
    }
    .login-wrapper::before {
        left: 28px;
        right: 28px;
    }
}

/* =============================
   16. REDUCED MOTION
   ============================= */
@media (prefers-reduced-motion: reduce) {
    .brand-icon,
    .brand-icon::after,
    .btn-login::before,
    .es-bg-layer::before {
        animation: none !important;
    }
}

/* =============================
   17. DARK MODE OVERRIDE
   Inline CSS punya @media dark mode
   yang bisa override variabel kita.
   Kita override lagi di sini agar
   tema tetap konsisten.
   ============================= */
@media (prefers-color-scheme: dark) {
    :root {
        --es-card-bg: rgba(15, 23, 42, 0.6) !important;
        --es-card-border: rgba(255, 255, 255, 0.06) !important;
        --es-input-bg: rgba(15, 23, 42, 0.45) !important;
        --es-input-focus-bg: rgba(15, 23, 42, 0.75) !important;
        --es-border: rgba(255, 255, 255, 0.07) !important;
        --es-text-dark: #f1f5f9 !important;
        --es-text-muted: #94a3b8 !important;
        --es-text-light: #475569 !important;
        --es-overlay-bg: rgba(7, 11, 20, 0.4) !important;
        --es-danger-bg: rgba(220, 38, 38, 0.1) !important;
        --es-danger-border: rgba(220, 38, 38, 0.2) !important;
        --es-badge-ip-bg: rgba(16, 185, 129, 0.08) !important;
        --es-badge-ip-border: rgba(16, 185, 129, 0.15) !important;
    }

    .social-icon {
        background: rgba(255, 255, 255, 0.035) !important;
        border-color: rgba(255, 255, 255, 0.06) !important;
    }

    .info-badge {
        background: rgba(255, 255, 255, 0.03) !important;
        border-color: rgba(255, 255, 255, 0.04) !important;
    }

    .lp-card {
        background: rgba(15, 23, 42, 0.9) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    .login-loading-overlay {
        background: rgba(7, 11, 20, 0.72) !important;
    }

    .login-spinner {
        border-color: rgba(255, 255, 255, 0.06) !important;
        border-top-color: #10b981 !important;
    }
}