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;







    }







}











/* Public Links Styling */
.public-links {
    position: fixed;
    bottom: 50px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 1000;
    padding: 1rem;
}

.public-links .btn {
    background-color: rgba(46, 49, 146, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    font-weight: 600;
}

.public-links .btn:hover {
    background-color: rgba(46, 49, 146, 1);
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* 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);
}