body {
        font-family: "Inter", sans-serif;
        height: 100vh;
        overflow: hidden;
        background-color: #fff;
      }

      /* 1. BACKGROUND DEEP DARK */
      .login-brand-side {
        background: linear-gradient(-45deg, #020617, #0f172a, #1e293b, #000000);
        background-size: 400% 400%;
        color: white;
        position: relative;
        overflow: hidden;
        animation: gradientBG 15s ease infinite;
      }

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

      /* Hiasan Lingkaran */
      .circle-decoration {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.02);
        backdrop-filter: blur(2px);
        animation: floatShape 8s ease-in-out infinite;
      }
      @keyframes floatShape {
        0%, 100% { transform: translateY(0px) scale(1); }
        50% { transform: translateY(-20px) scale(1.05); }
      }

      /* --- 2. KOMBINASI ANIMASI (Jatuh Berulang + Putar) --- */

      /* A. Wrapper: Menangani gerakan Jatuh (ZoomInDown) yang berulang */
      @keyframes repeatedZoomDrop {
        0% {
          opacity: 0;
          transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
          animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        }
        20% {
          opacity: 1;
          transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        }
        30% {
            /* Mendarat di posisi normal */
            transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        }
        85% {
            /* Diam sejenak (biar user bisa lihat) */
            opacity: 1;
            transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        }
        100% {
            /* Menghilang sedikit membesar sebelum loop ulang */
            opacity: 0;
            transform: scale3d(1.5, 1.5, 1.5); 
        }
      }

      .falling-wrapper {
        display: inline-block;
        /* Durasi 4 detik: Jatuh -> Diam -> Hilang -> Ulang */
        animation: repeatedZoomDrop 4s ease-in-out infinite; 
      }

      /* B. Ikon: Menangani gerakan Putar (Spin) terus menerus */
      @keyframes fastSpin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }

      .spinning-icon {
        display: inline-block; /* Wajib agar transform rotate jalan */
        animation: fastSpin 2s linear infinite; /* Putaran cepat (2 detik) */
        /* Efek Glow */
        text-shadow: 0 0 30px rgba(13, 202, 240, 1); 
      }


      /* --- 3. ANIMASI TEKS (Tetap Masuk Sekali) --- */
      @keyframes zoomInDownText {
        0% {
          opacity: 0;
          transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        }
        60% {
          opacity: 1;
          transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        }
        100% { opacity: 1; transform: none; }
      }

      .text-entrance {
        opacity: 0;
        animation: zoomInDownText 1s ease-out 0.2s forwards; 
      }

      .super-bright {
        color: #ffffff !important;
        text-shadow: 0 5px 15px rgba(0,0,0, 1);
      }

      /* SISI KANAN (FORM) */
      .login-form-side {
        background: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 50px;
        animation: fadeInUp 0.8s ease-out;
      }
      @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
      }

      .form-control { padding: 12px 15px; border-radius: 10px; border: 1px solid #e2e8f0; background-color: #f8fafc; font-size: 0.95rem; }
      .form-control:focus { background-color: #fff; border-color: #0dcaf0; box-shadow: 0 0 0 4px rgba(13, 202, 240, 0.1); }
      .btn-primary { background-color: #0f172a; border: none; padding: 12px; border-radius: 10px; font-weight: 600; transition: all 0.3s; }
      .btn-primary:hover { background-color: #1e293b; transform: translateY(-2px); }

      @media (max-width: 992px) {
        .login-brand-side { display: none; }
        .login-form-side { padding: 30px; }
        body { overflow-y: auto; }
      }
   

      /* --- STYLING KHUSUS INPUT 6 KOTAK (CAPTCHA) --- */
        .otp-input {
            width: 100%; /* Flexible width */
            height: 50px;
            font-size: 1.5rem;
            font-weight: 700;
            text-align: center;
            border: 1px solid #ced4da;
            border-radius: 8px;
            background-color: #f8f9fa;
            transition: all 0.2s ease;
            color: #333;
        }
        
        .otp-input:focus {
            background-color: #fff;
            border-color: #0dcaf0;
            box-shadow: 0 0 0 4px rgba(13, 202, 240, 0.1);
            outline: none;
            transform: translateY(-2px);
        }

        .captcha-container {
            background-color: #f1f3f5;
            border: 1px dashed #ced4da;
            border-radius: 8px;
            padding: 8px;
            display: inline-block;
            position: relative;
        }

        button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        background-color: #ccc !important; /* Warna abu-abu */
        border-color: #ccc !important;
    }