/* ================ AUTH PAGE SPECIFIC STYLES ================ */

.btn-wa { 
    background: linear-gradient(135deg, #25D366, #128C7E); 
    transition: 0.3s; 
}
.btn-wa:hover { 
    transform: scale(1.02); 
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.4); 
}
.btn-tele { 
    background: linear-gradient(135deg, #0088cc, #0077b5); 
    transition: 0.3s; 
}
.btn-tele:hover { 
    transform: scale(1.02); 
    box-shadow: 0 0 20px rgba(0, 136, 204, 0.4); 
}
.btn-security { 
    background: linear-gradient(135deg, #8b5cf6, #6366f1); 
    transition: 0.3s; 
}
.btn-security:hover { 
    transform: scale(1.02); 
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4); 
}

.security-badge {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #a78bfa;
}

/* ================ ANIMASI USERNAME CHECK ================ */

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-4px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(4px);
  }
}

.username-check-animation {
  animation: slideDown 0.3s ease-out forwards;
}

.username-unavailable-animation {
  animation: shake 0.5s ease-in-out;
}

.username-check-icon {
  transition: all 0.3s ease;
}

.username-check-icon.available {
  filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.5));
}

.username-check-icon.unavailable {
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5));
}

/* Efek pulse untuk loading */
@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.username-loading-pulse {
  animation: pulse 1.5s ease-in-out infinite;
}