body {





    background: #f8f9fa;





    font-family: 'Poppins', sans-serif;





    margin: 0;





    padding: 0;





    overflow-x: hidden;





    height: 100vh;





}











/* Particles Background */





.particles-container {





    position: fixed;





    top: 0;





    left: 0;





    width: 100%;





    height: 100%;





    z-index: -2;





    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);





}











/* BKK Bandung Logo Styling with enhanced animation */





.bkk-logo {





    position: fixed;





    top: 20px;





    left: 20px;





    z-index: 10;





}











.bkk-logo img {





    height: 70px;





    width: auto;





    filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.4));





    transition: transform 0.3s ease, filter 0.3s ease;





}











.bkk-logo img:hover {





    transform: scale(1.1) rotate(5deg);





    filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.6));





}











.pulse-animation {





    animation: pulse 2s infinite;





}











@keyframes pulse {





    0% {





        transform: scale(1);





    }





    50% {





        transform: scale(1.05);





    }





    100% {





        transform: scale(1);





    }





}











/* Social Media Animation Background */





.social-media-background {





    position: fixed;





    top: 0;





    left: 0;





    width: 100%;





    height: 100%;





    z-index: -1;





    background: transparent;





    overflow: hidden;





}











.social-icons {





    position: absolute;





    width: 100%;





    height: 100%;





}











.icon {





    position: absolute;





    color: rgba(255, 255, 255, 0.3);





    animation: float 8s infinite ease-in-out;





    opacity: 0;





    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);





}











@keyframes float {





    0% {





        transform: translateY(100vh) scale(0.5);





        opacity: 0;





    }





    10% {





        opacity: 0.8;





    }





    90% {





        opacity: 0.6;





    }





    100% {





        transform: translateY(-20vh) scale(1.2) rotate(360deg);





        opacity: 0;





    }





}











/* Login Container */





.login-container {





    min-height: 100vh;





    display: flex;





    align-items: center;





    justify-content: center;





    padding: 20px;





    position: relative;





    z-index: 1;





}











.login-card {





    background: rgba(255, 255, 255, 0.9);





    border-radius: 20px;





    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);





    width: 100%;





    max-width: 450px;





    padding: 2.5rem;





    backdrop-filter: blur(15px);





    border: 1px solid rgba(255, 255, 255, 0.2);





    transform: translateY(0);





    transition: all 0.5s ease;





    animation: cardAppear 1s forwards;





}











@keyframes cardAppear {





    from {





        opacity: 0;





        transform: translateY(30px);





    }





    to {





        opacity: 1;





        transform: translateY(0);





    }





}











.login-card:hover {





    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);





    transform: translateY(-5px);





}











/* Login Header */





.login-header {





    text-align: center;





    margin-bottom: 2rem;





    animation: fadeIn 1s ease;





}











@keyframes fadeIn {





    from { opacity: 0; }





    to { opacity: 1; }





}











.login-header h1 {





    color: #1a1a1a;





    font-size: 28px;





    font-weight: 700;





    margin-bottom: 0.5rem;





}











.text-gradient {





    background: linear-gradient(90deg, #007AFF, #6610f2);





    -webkit-background-clip: text;





    background-clip: text;





    -webkit-text-fill-color: transparent;





    text-fill-color: transparent;





}











/* Form Controls */





.form-control {





    border-radius: 10px;





    padding: 12px 15px;





    border: 1px solid #e0e0e0;





    margin-bottom: 1rem;





    transition: all 0.3s ease;





    font-size: 14px;





}











.form-control:focus {





    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);





    border-color: #007AFF;





}











.input-group-hover {





    transition: all 0.3s ease;





}











.input-group-hover:hover {





    transform: translateY(-2px);





}











.input-group-text {





    border-radius: 10px 0 0 10px;





    transition: all 0.3s ease;





}











/* Buttons */





.btn-primary {





    background: linear-gradient(45deg, #007AFF, #6610f2);





    border: none;





    border-radius: 10px;





    padding: 12px 15px;





    font-weight: 600;





    width: 100%;





    margin-top: 1rem;





    transition: all 0.3s ease;





    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);





}











.btn-primary:hover {





    background: linear-gradient(45deg, #0056b3, #5e0ae6);





    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);





    transform: translateY(-2px);





}











.btn-animated {





    position: relative;





    overflow: hidden;





}











.btn-animated:after {





    content: '';





    position: absolute;





    top: 50%;





    left: 50%;





    width: 5px;





    height: 5px;





    background: rgba(255, 255, 255, 0.5);





    opacity: 0;





    border-radius: 100%;





    transform: scale(1, 1) translate(-50%);





    transform-origin: 50% 50%;





}











.btn-animated:hover:after {





    animation: ripple 1s ease-out;





}











@keyframes ripple {





    0% {





        transform: scale(0, 0);





        opacity: 0.5;





    }





    100% {





        transform: scale(20, 20);





        opacity: 0;





    }





}











/* Social Login */





.social-login {





    margin-top: 1.5rem;





}











.social-buttons {





    display: flex;





    justify-content: center;





    gap: 15px;





    margin-top: 10px;





}











.btn-social {





    display: flex;





    align-items: center;





    justify-content: center;





    width: 40px;





    height: 40px;





    border-radius: 50%;





    color: white;





    transition: all 0.3s ease;





    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);





}











.btn-social:hover {





    transform: translateY(-3px);





    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);





}











.btn-google {





    background: #DB4437;





}











.btn-facebook {





    background: #4267B2;





}











.btn-twitter {





    background: #1DA1F2;





}











/* Register Link */





.register-link {





    text-align: center;





    margin-top: 1.5rem;





    color: #666;





    font-size: 14px;





}











.register-link a {





    color: #007AFF;





    text-decoration: none;





    font-weight: 600;





    transition: all 0.3s ease;





    position: relative;





}











.register-link-animated {





    display: inline-block;





}











.register-link-animated:after {





    content: '';





    position: absolute;





    width: 100%;





    transform: scaleX(0);





    height: 2px;





    bottom: -2px;





    left: 0;





    background: linear-gradient(90deg, #007AFF, #6610f2);





    transform-origin: bottom right;





    transition: transform 0.3s ease-out;





}











.register-link-animated:hover:after {





    transform: scaleX(1);





    transform-origin: bottom left;





}











/* Modal Styling */





.modal-content {





    background: rgba(255, 255, 255, 0.95);





    backdrop-filter: blur(15px);





    border-radius: 20px;





    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);





    border: 1px solid rgba(255, 255, 255, 0.2);





    overflow: hidden;





}











.modal-header {





    border-bottom: 1px solid rgba(0, 0, 0, 0.1);





    padding: 1.5rem;





}











.modal-body {





    padding: 1.5rem;





}











.modal-footer {





    border-top: 1px solid rgba(0, 0, 0, 0.1);





    padding: 1.5rem;





}











/* Alert Animations */





.animated-alert {





    animation: alertSlideIn 0.5s forwards, alertFadeOut 0.5s 4.5s forwards;





    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);





    border-radius: 10px;





}











@keyframes alertSlideIn {





    from {





        transform: translateY(-20px) translateX(-50%);





        opacity: 0;





    }





    to {





        transform: translateY(0) translateX(-50%);





        opacity: 1;





    }





}











@keyframes alertFadeOut {





    from {





        opacity: 1;





    }





    to {





        opacity: 0;





        visibility: hidden;





    }





}











/* Copyright text with transparent background */





.copyright-text {





    position: fixed;





    bottom: 5px;





    left: 0;





    width: 100%;





    text-align: center;





    padding: 1rem;





    font-size: 0.9rem;





    color: rgba(255, 255, 255, 0.8);





    display: flex;





    justify-content: center;





    align-items: center;





    z-index: 1000;





    background-color: rgba(0, 0, 0, 0.3) !important;





    backdrop-filter: blur(5px);





    border-top: 1px solid rgba(255, 255, 255, 0.1);





}