@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

 .tab-content {
     display: none;
 }

 .tab-content.active {
     display: block;
 }

 .inter-400 {
     font-family: "Inter", sans-serif;
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
 }

 .inter-600 {
     font-family: "Inter", sans-serif;
     font-optical-sizing: auto;
     font-weight: 600;
     font-style: normal;
 }

 .inter-800 {
     font-family: "Inter", sans-serif;
     font-optical-sizing: auto;
     font-weight: 800;
     font-style: normal;
 }

 body {
     font-family: "Inter", sans-serif;
 }

 /* Glass morphism for form cards */
 .glass-card {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(20px);
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 /* Enhanced tab buttons */
 .tab-button-login {
     position: relative;
     overflow: hidden;
     transform: translateY(0);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
 }

 .tab-button-login.active {
     box-shadow: 0 8px 25px rgba(29, 78, 216, 0.4);
     transform: translateY(-2px);
 }

 .tab-button-login:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 }

 /* Tab content visibility */
 .tab-content-login {
     display: none;
     animation: fadeIn 0.4s ease-in-out;
 }

 .tab-content-login.active {
     display: block;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Input focus effects - Fixed movement issue */
 .input-field {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     border: 2px solid #e5e7eb;
     /* Remove transform to prevent movement */
 }

 .input-field:focus {
     border-color: #3b82f6;
     box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 10px 30px rgba(59, 130, 246, 0.1);
     /* Removed transform: translateY(-1px) to prevent movement */
 }

 /* Button gradient */
 .btn-gradient {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
     transform: translateY(0);
     transition: all 0.3s ease;
 }

 .btn-gradient:hover {
     box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
     transform: translateY(-2px);
 }

 /* Statistik card hover */
 .stat-card {
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
 }

 .stat-card>div {
     transition: all 0.4s ease;
 }

 .stat-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
     opacity: 0;
     transition: opacity 0.4s ease;
     z-index: 0;
 }

 .stat-card:hover::before {
     opacity: 1;
 }

 .stat-card:hover {
     transform: translateY(-8px) scale(1.05);
     box-shadow: 0 25px 50px rgba(59, 130, 246, 0.5);
 }

 .stat-card:hover>div {
     background: transparent !important;
 }

 .stat-card * {
     position: relative;
     z-index: 1;
 }

 /* Warna teks yang lebih kontras saat hover */
 .stat-card:hover .stat-number,
 .stat-card:hover dt {
     color: #ffffff !important;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }

 /* Logo container */
 .logo-container {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     padding: 1rem;
     border-radius: 1rem;
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .logo-container img {
     transition: transform 0.3s ease, filter 0.3s ease;
 }

 /* Logo yang perlu filter putih */
 .logo-container img.logo-white-filter {
     filter: brightness(0) invert(1);
 }

 .logo-container img.logo-white-filter:hover {
     transform: scale(1.05);
     filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
 }

 /* Logo yang tidak perlu filter (tetap warna asli) */
 .logo-container img.logo-original {
     filter: brightness(1.2) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
 }

 .logo-container img.logo-original:hover {
     transform: scale(1.05);
     filter: brightness(1.3) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
 }

 /* Icon animations - Fixed movement issue */
 .input-icon {
     transition: all 0.3s ease;
 }

 .input-field:focus~.input-icon {
     fill: #3b82f6;
     stroke: #3b82f6;
     /* Removed transform: scale(1.1) to prevent movement */
 }

 /* Password toggle - Fixed hover movement */
 .toggle-password {
     transition: all 0.2s ease;
     cursor: pointer;
     /* Ensure stable positioning */
     position: absolute;
     right: 1rem;
     top: 50%;
     transform: translateY(-50%);
     width: 1.25rem;
     height: 1.25rem;
 }
 
 .toggle-password:hover {
     opacity: 0.7;
     /* Keep the same transform to maintain position */
     transform: translateY(-50%);
     /* Removed transform: scale(1.15) to prevent movement */
     /* Removed filter to prevent layout shifts */
 }

 /* Label animations */
 label {
     transition: all 0.3s ease;
 }

 .input-field:focus+label,
 .input-field:not(:placeholder-shown)+label {
     transform: translateY(-0.5rem);
     font-size: 0.75rem;
     color: #3b82f6;
 }

 /* Alert styling */
 .alert-container {
     animation: slideInDown 0.5s ease;
 }

 @keyframes slideInDown {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Number counter animation */
 @keyframes countUp {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .stat-number {
     animation: countUp 0.6s ease;
 }