/* Cinematic Auth Portals (Model 15: Role-Specific) */
:root {
    --primary: #60a5fa;
    --primary-glow: rgba(96, 165, 250, 0.4);
    --bg-dark: #020617;
    --bg-slate: #0f172a;
    --text-white: #f8fafc;
    --glass-bg: rgba(255, 255, 255, 0.04);
}

/* Management Theme */
body.theme-management {
    --primary: #60a5fa;
    --bg-dark: #020617;
    --bg-slate: #0f172a;
}

/* Guru Theme */
body.theme-guru {
    --primary: #10b981;
    /* Emerald */
    --bg-dark: #022c22;
    --bg-slate: #064e3b;
}

/* Siswa Theme */
body.theme-siswa {
    --primary: #f59e0b;
    /* Amber/Orange */
    --bg-dark: #451a03;
    --bg-slate: #78350f;
}

/* Ortu Theme */
body.theme-ortu {
    --primary: #ec4899;
    /* Pink/Magenta */
    --bg-dark: #500724;
    --bg-slate: #831843;
}

/* Pegawai Theme */
body.theme-pegawai {
    --primary: #64748b;
    /* Slate */
    --bg-dark: #0f172a;
    --bg-slate: #1e293b;
}

body.auth-gate {
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    color: var(--text-white);
    min-height: 100vh;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* --- Shared Cinematic BG --- */
.cinematic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(circle at center, var(--bg-slate), var(--bg-dark));
}

.aura-bloom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--primary), transparent 70%);
    filter: blur(100px);
    opacity: 0.15;
    animation: bloomPulse 8s infinite alternate ease-in-out;
}

@keyframes bloomPulse {
    from {
        opacity: 0.1;
        scale: 1;
    }

    to {
        opacity: 0.25;
        scale: 1.4;
    }
}

.flying-symbols {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.symbol-item {
    position: absolute;
    color: var(--primary);
    opacity: 0.08;
    font-size: 4rem;
    filter: blur(2px);
    animation: symbolDrift 30s infinite linear;
}

@keyframes symbolDrift {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(60px, 30px) rotate(10deg);
    }

    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}

/* --- Login Form Glassmorphism --- */
.auth-container {
    width: 100%;
    max-width: 450px;
    padding: 20px;
    z-index: 10;
}

.auth-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 40px;
    padding: 50px 40px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.auth-card .logo-area {
    margin-bottom: 35px;
}

.auth-card .logo-area i {
    font-size: 3.5rem;
    color: var(--primary);
    filter: drop-shadow(0 0 20px var(--primary));
}

.auth-card .logo-area img {
    max-height: 80px;
    filter: drop-shadow(0 0 20px var(--primary));
}

.auth-card h2 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.auth-card p {
    color: #94a3b8;
    font-size: 0.95rem;
    margin-bottom: 30px;
}

/* Form Elements */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-control-cinematic {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    color: #fff;
    padding: 15px 20px;
    font-weight: 600;
    width: 100%;
    transition: all 0.3s;
}

.form-control-cinematic:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary);
    box-shadow: 0 0 15px var(--primary-glow);
    outline: none;
}

.btn-cinematic {
    background: var(--primary);
    border: none;
    border-radius: 18px;
    color: #fff;
    padding: 15px;
    width: 100%;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.4s;
    box-shadow: 0 15px 30px var(--primary-glow);
}

.btn-cinematic:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px var(--primary-glow);
    filter: brightness(1.2);
}

.btn-cinematic:active {
    transform: translateY(0);
}

@media (max-width: 576px) {
    .auth-card {
        padding: 40px 25px;
    }

    .auth-card h2 {
        font-size: 1.5rem;
    }
}

/* --- Floating Messages (.pesan) --- */
.pesan {
    position: fixed !important;
    bottom: -100px;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 2px solid var(--primary) !important;
    color: #fff !important;
    padding: 16px 32px !important;
    border-radius: 50px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    box-shadow: 0 0 30px var(--primary-glow), 0 10px 40px rgba(0, 0, 0, 0.8) !important;
    z-index: 9999999 !important;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
    white-space: nowrap !important;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pesan.active {
    bottom: 50px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Theme-specific glow colors for messages */
body.theme-siswa .pesan {
    border-color: #f59e0b !important;
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.4), 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}

body.theme-guru .pesan {
    border-color: #10b981 !important;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.4), 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}

body.theme-ortu .pesan {
    border-color: #ec4899 !important;
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.4), 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}