* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            overflow-y: auto;
            background: linear-gradient(to bottom, #00aaff 0%, #0072bb 40%, #004c80 100%);
            background-attachment: fixed;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        #matrixCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .speed-control {
            position: fixed;
            top: 50px;
            right: 20px;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 50px;
            padding: 15px 25px;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .speed-icon {
            font-size: 24px;
            color: #fff;
        }

        .speed-slider {
            width: 150px;
            height: 6px;
            border-radius: 3px;
            background: rgba(255, 255, 255, 0.3);
            outline: none;
            -webkit-appearance: none;
        }

        .speed-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .speed-slider::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            border: none;
        }

        .speed-value {
            color: #fff;
            font-weight: 600;
            font-size: 14px;
            min-width: 45px;
            font-family: 'Orbitron', sans-serif;
        }

.container {
    position: relative;
    z-index: 10;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Khusus form DAFTAR (card-back) agak turun */
.card-back {
    transition: padding 0.4s ease;
}
.card-back.active {
    transform: translateY(5px); /* geser turun 50px */
}

        .card {
            width: 100%;
            max-width: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .inner-box {
            position: relative;
            width: 100%;
            max-width: 480px;
        }

        .card-front,
        .card-back,
        .card-forgot {
            width: 100%;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 24px;
            padding: 50px 45px;
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(255, 255, 255, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.3);
            display: none;
        }

        .card-front.active,
        .card-back.active,
        .card-forgot.active {
            display: block;
        }

        /* Shake Animation */
        @keyframes shake {
            0%, 100% { transform: translateX(0) rotate(0deg); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-10px) rotate(-2deg); }
            20%, 40%, 60%, 80% { transform: translateX(10px) rotate(2deg); }
        }

        .inner-box.shake {
            animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
        }

        /* Transition Animations */
        .transition-slide-left-out {
            animation: slideLeftOut 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }

        .transition-slide-left-in {
            animation: slideLeftIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }

        @keyframes slideLeftOut {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(-150%); opacity: 0; }
        }

        @keyframes slideLeftIn {
            from { transform: translateX(150%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        .transition-slide-right-out {
            animation: slideRightOut 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }

        .transition-slide-right-in {
            animation: slideRightIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }

        @keyframes slideRightOut {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(150%); opacity: 0; }
        }

        @keyframes slideRightIn {
            from { transform: translateX(-150%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        .transition-zoom-out {
            animation: zoomOut 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }

        .transition-zoom-in {
            animation: zoomIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }

        @keyframes zoomOut {
            from { transform: scale(1); opacity: 1; }
            to { transform: scale(0); opacity: 0; }
        }

        @keyframes zoomIn {
            from { transform: scale(0); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        .transition-flip-out {
            animation: flipOut 0.6s ease-in-out forwards;
        }

        .transition-flip-in {
            animation: flipIn 0.6s ease-in-out forwards;
        }

        @keyframes flipOut {
            from { transform: rotateY(0deg); opacity: 1; }
            to { transform: rotateY(90deg); opacity: 0; }
        }

        @keyframes flipIn {
            from { transform: rotateY(-90deg); opacity: 0; }
            to { transform: rotateY(0deg); opacity: 1; }
        }

        .transition-fade-out {
            animation: fadeOut 0.4s ease-out forwards;
        }

        .transition-fade-in {
            animation: fadeIn 0.4s ease-in forwards;
        }

        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .transition-rotate-out {
            animation: rotateOut 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }

        .transition-rotate-in {
            animation: rotateIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }

        @keyframes rotateOut {
            from { transform: rotate(0deg) scale(1); opacity: 1; }
            to { transform: rotate(180deg) scale(0); opacity: 0; }
        }

        @keyframes rotateIn {
            from { transform: rotate(-180deg) scale(0); opacity: 0; }
            to { transform: rotate(0deg) scale(1); opacity: 1; }
        }

        .login-box h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 35px;
    text-align: center;
    background: linear-gradient(135deg, #00ffff 0%, #179bd7 40%, #0072ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
    /*animation: glowPulse 3s ease-in-out infinite;*/
        }

/*@keyframes glowPulse {*/
/*    0%, 3000% {*/
/*        text-shadow: 0 0 10px rgba(23,155,215,0.5), 0 0 20px rgba(0,255,255,0.3);*/
/*    }*/
/*    50% {*/
/*        text-shadow: 0 0 20px rgba(0,255,255,0.8), 0 0 40px rgba(23,155,215,0.6);*/
/*    }*/
/*}*/

        .user-box {
            position: relative;
            margin-bottom: 35px;
        }

        .user-box input,
        .user-box select,
        .user-box textarea {
            width: 100%;
            padding: 15px 0;
            font-size: 15px;
            color: #333;
            border: none;
            border-bottom: 2px solid #ddd;
            outline: none;
            background: transparent;
            transition: all 0.3s ease;
            font-family: 'Inter', sans-serif;
        }

        .user-box textarea {
            resize: vertical;
            min-height: 80px;
            padding: 10px 0;
        }

        .user-box label {
            position: absolute;
            top: 15px;
            left: 0;
            padding: 0;
            font-size: 15px;
            color: #999;
            pointer-events: none;
            transition: all 0.3s ease;
        }

        .user-box input:focus,
        .user-box select:focus,
        .user-box textarea:focus {
            border-bottom-color: #667eea;
        }

        .user-box input:focus ~ label,
        .user-box input:valid ~ label,
        .user-box select:focus ~ label,
        .user-box select:valid ~ label,
        .user-box textarea:focus ~ label,
        .user-box textarea:valid ~ label {
            top: -20px;
            left: 0;
            color: #667eea;
            font-size: 12px;
            font-weight: 600;
        }

        .user-box select {
            cursor: pointer;
        }

        .user-box-date {
            position: relative;
            margin-bottom: 35px;
        }

        .user-box-date input {
            width: 100%;
            padding: 15px 0;
            font-size: 15px;
            color: #333;
            border: none;
            border-bottom: 2px solid #ddd;
            outline: none;
            background: transparent;
            transition: all 0.3s ease;
            font-family: 'Inter', sans-serif;
        }

        .user-box-date label {
            position: absolute;
            top: -20px;
            left: 0;
            font-size: 12px;
            color: #667eea;
            font-weight: 600;
        }

        .user-box-date input:focus {
            border-bottom-color: #667eea;
        }

        /* ==== Tombol Neon ala SkillQU Lama ==== */
        button {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            color: #179bd7;
            font-size: 16px;
            text-transform: uppercase;
            font-family: 'Orbitron', sans-serif;
            letter-spacing: 3px;
            background: transparent;
            border: none;
            outline: none;
            cursor: pointer;
            margin: 5px;
            transition: 0.5s;
            overflow: hidden;
        }

        button:hover {
            background: #179bd7;
            color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 5px #179bd7,
                        0 0 25px #179bd7,
                        0 0 50px #179bd7,
                        0 0 100px #179bd7;
        }

        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* garis animasi di sekeliling tombol */
        button span {
            position: absolute;
            display: block;
        }

        button span:nth-child(1) {
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #03e9f4);
            animation: btn-anim1 1s linear infinite;
        }

        @keyframes btn-anim1 {
            0% { left: -100%; }
            50%,100% { left: 100%; }
        }

        button span:nth-child(2) {
            top: -100%;
            right: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, transparent, #03e9f4);
            animation: btn-anim2 1s linear infinite;
            animation-delay: .25s;
        }

        @keyframes btn-anim2 {
            0% { top: -100%; }
            50%,100% { top: 100%; }
        }

        button span:nth-child(3) {
            bottom: 0;
            right: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(270deg, transparent, #03e9f4);
            animation: btn-anim3 1s linear infinite;
            animation-delay: .5s;
        }

        @keyframes btn-anim3 {
            0% { right: -100%; }
            50%,100% { right: 100%; }
        }

        button span:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(360deg, transparent, #03e9f4);
            animation: btn-anim4 1s linear infinite;
            animation-delay: .75s;
        }

        @keyframes btn-anim4 {
            0% { bottom: -100%; }
            50%,100% { bottom: 100%; }
        }

        /* tombol disabled warna merah glow */
        #kirim_otp:disabled {
            background-color: red;
            color: white;
            animation: glow 1.5s infinite alternate;
        }
        @keyframes glow {
            0% { box-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6); }
            50% { box-shadow: 0 0 20px rgba(255, 0, 0, 1), 0 0 30px rgba(255, 0, 0, 0.9); }
            100% { box-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6); }
        }

        @media (max-width: 600px) {
            .inner-box {
                max-width: 100%;
            }

            .card-front,
            .card-back,
            .card-forgot {
                padding: 40px 30px;
            }

            .login-box h2 {
                font-size: 28px;
            }

            .speed-control {
                top: 10px;
                right: 10px;
                padding: 10px 15px;
            }

            .speed-slider {
                width: 100px;
            }
        }

        /* === Gear Auto-hide === */
        .speed-wrapper {
            position: fixed;
            top: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            z-index: 1000;
        }

        .speed-icon {
            font-size: 28px;
            color: #fff;
            cursor: pointer;
            transition: transform 0.4s ease, text-shadow 0.4s ease;
            z-index: 1010; /* pastikan selalu di atas slider */
        }

        .speed-icon:hover {
            text-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
        }

        .speed-icon.spin {
            transform: rotate(180deg);
        }

        .speed-control {
            margin-top: 10px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(12px);
            border-radius: 50px;
            padding: 15px 25px;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: all 0.4s ease;
            transform-origin: top right;
        }

        .speed-control.hidden {
            opacity: 0;
            transform: translateY(-15px) scale(0.9);
            pointer-events: none;
        }
        
/* === Warna teks form jadi biru === */
.login-box h2,
.user-box label,
.user-box-date label,
a,
.speed-value,
.speed-icon,
.optional-toggle {
  color: #179bd7 !important;
}

/* Tambahan efek hover link dan label */
a:hover,
.optional-toggle:hover {
  color: #00ffff !important;
  text-shadow: 0 0 8px #00ffff;
}

/* Warna fokus garis bawah input */
.user-box input:focus,
.user-box select:focus,
.user-box textarea:focus,
.user-box-date input:focus {
  border-bottom-color: #179bd7 !important;
}

/* Warna label saat input aktif atau terisi */
.user-box input:focus ~ label,
.user-box input:valid ~ label,
.user-box select:focus ~ label,
.user-box select:valid ~ label,
.user-box textarea:focus ~ label,
.user-box textarea:valid ~ label {
  color: #179bd7 !important;
}

/* Warna placeholder (kalau ada) */
::placeholder {
  color: #179bd7;
  opacity: 0.8;
}

/* Default link warna biru */
a {
    color: #179bd7 !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Saat di-hover berubah merah neon */
a:hover,
.login-box a:hover,
.card-front a:hover {
    color: #ff4040 !important; /* merah neon */
    text-shadow: 0 0 10px #ff4040 !important;
}