/* BACKGROUND HIJAU MATTE FUTURISTIK */
    body {
        background: radial-gradient(
        circle at center,
        #147a67 0%,     /* lebih terang dari #0E4F42 */
        #0d5e50 55%,    /* lebih terang dari #0A3D34 */
        #09483d 100%    /* lebih terang dari #072E27 */
    );

        background-attachment: fixed;
        position: relative;
        overflow: hidden;
    }

    /* ================================
        PREMIUM ANIMATED GRID (ULTRA HALUS)
       ================================ */

    /* Layer grid utama */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image:
            linear-gradient(rgba(0, 255, 180, 0.08) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 255, 180, 0.08) 1px, transparent 1px);
        background-size: 45px 45px;
        opacity: 0.18;
        animation: gridMove 18s linear infinite;
        z-index: 1;
    }
    /* Layer grid kedua (lebih tipis & sedikit offset) */
    body::after {
        content: "";
        position: fixed;
        inset: 0;
        background-image:
            linear-gradient(rgba(0, 255, 180, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 255, 180, 0.05) 1px, transparent 1px);
        background-size: 35px 35px;
        opacity: 0.12;
        animation: gridMove2 32s linear infinite reverse;
        z-index: 1;
    }
    /* Gerakan grid sangat halus */
    @keyframes gridMove {
        0%   { transform: translate(0, 0); }
        100% { transform: translate(-45px, -45px); }
    }

    @keyframes gridMove2 {
        0%   { transform: translate(0, 0); }
        100% { transform: translate(35px, 35px); }
    }
    /* ======================================
       LAYER KONTEN DI ATAS SEMUA ANIMASI
       ====================================== */
    .auth-page-wrapper {
        position: relative;
        z-index: 3;
    }
    /* ======================================
       UI ELEMENT ENHANCEMENTS
       ====================================== */

    /* Card login premium */
    .card {
        background: rgba(255, 255, 255, 0.92);
        border-radius: 8px;
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255,255,255,0.18);
        box-shadow: 0 4px 22px rgba(0, 0, 0, 0.22);
    }

    /* Logo text neon matte */
    .logo-text {
        color: #f7b84b !important;
        letter-spacing: 2.5px;
    }

    /* Subjudul */
    .text-muted {
        color: #C5EDE1 !important;
    }

    /* Tombol login */
    .btn-success {
        background-color: #0F7C65 !important;
        border-color: #0F7C65 !important;
    }
    .btn-success:hover {
        background-color: #0C6854 !important;
    }

    /* Input form */
    .form-control {
        border-radius: 8px;
        border: 1px solid #A9D5C8;
    }
    .form-control:focus {
        border-color: #13A383;
        box-shadow: 0 0 0 3px rgba(34, 182, 151, 0.28);
    }