/* Tailwind CSS Build */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Custom animations */
@keyframes pulse-fast {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

.animate-pulse-fast {
  animation: pulse-fast 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-scanline {
  animation: scanline 3s linear infinite;
}

/* Custom Styles for Visage Metrics */

/* Neural Grid Background */
.neural-grid {
    position: fixed;
    inset: 0;
    background-image: linear-gradient(rgba(14, 165, 233, 0.08) 1px, transparent 1px), 
                      linear-gradient(90deg, rgba(14, 165, 233, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: -1;
}

/* Glassmorphism Card */
.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(226, 232, 240, 1);
    box-shadow: 0 40px 100px -20px rgba(14, 165, 233, 0.15);
}

/* Shimmer Text Effect */
.shimmer-text {
    background: linear-gradient(90deg, #0f172a, #0ea5e9, #0f172a);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

/* Animasi Blob Lembut untuk Latar Belakang */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    50% { transform: translate(50px, -50px) scale(1.2); }
    100% { transform: translate(-50px, 20px) scale(0.9); }
}

/* Tambahan: Pastikan teks gradient terbaca global */
.text-gradient {
    background: linear-gradient(to right, #0ea5e9, #2563eb);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes shimmer { to { background-position: 200% center; } }

/* Scanner UI Visuals */
.scanner-ui {
    background: linear-gradient(to right, #0ea5e9 4px, transparent 4px) 0 0, 
                linear-gradient(to bottom, #0ea5e9 4px, transparent 4px) 0 0, 
                linear-gradient(to left, #0ea5e9 4px, transparent 4px) 100% 0, 
                linear-gradient(to bottom, #0ea5e9 4px, transparent 4px) 100% 0, 
                linear-gradient(to right, #0ea5e9 4px, transparent 4px) 0 100%, 
                linear-gradient(to top, #0ea5e9 4px, transparent 4px) 0 100%, 
                linear-gradient(to left, #0ea5e9 4px, transparent 4px) 100% 100%, 
                linear-gradient(to top, #0ea5e9 4px, transparent 4px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    border-radius: 20px;
}

.scanner-ui::before { content: ''; position: absolute; top: 50%; left: -30px; right: -30px; height: 1px; background: rgba(14, 165, 233, 0.2); }
.scanner-ui::after { content: ''; position: absolute; left: 50%; top: -30px; bottom: -30px; width: 1px; background: rgba(14, 165, 233, 0.2); }

/* Biometric Text Simulation */
.biometric-data::before {
    content: 'BIOMETRIC STREAM\A----------------\AEAR RATIO : 0.32\ASTATUS    : NORMAL\APUPIL TRK : CENTER\AFATIGUE   : LOW\A \AAcquiring points...\A[ OK ]';
    position: absolute; top: 20%; right: -120px; font-family: monospace; font-size: 10px; line-height: 1.6; color: #0ea5e9; font-weight: 700; white-space: pre; text-align: left; text-shadow: 0 0 10px rgba(14, 165, 233, 0.4); pointer-events: none; opacity: 0.8; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(4px); padding: 10px; border-radius: 8px; border: 1px solid rgba(14, 165, 233, 0.2);
}

.glowing-eye { filter: drop-shadow(0 0 15px rgba(14, 165, 233, 0.4)); }

/* Animations */
@keyframes scan { 
    0% { top: '10%'; opacity: '0' } 10% { opacity: '1' } 90% { opacity: '1' } 100% { top: '90%'; opacity: '0' } 
}
@keyframes blink { 
    0%, 90%, 100% { transform: scaleY(1); opacity: 1; } 95% { transform: scaleY(0.1); opacity: 0.4; } 
}
@keyframes float { 
    0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } 
}

/* Custom Styles for Landing Page */

.bg-cyber {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: radial-gradient(circle at 15% 50%, #ffffff, transparent 60%),
                radial-gradient(circle at 85% 30%, #f0f9ff, transparent 60%);
}

.bg-grid, .neural-grid {
    position: fixed;
    inset: 0;
    z-index: -1;
    /* Hapus bagian linear-gradient yang ada di sini sebelumnya */
    background-image: none; 
    /* Gunakan background warna solid atau radial gradient saja agar tetap estetik */
    background-color: #f8fafc; 
    pointer-events: none;
}

.glass-pill {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 1);
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.05);
}

.text-gradient {
    background: linear-gradient(to right, #0ea5e9, #2563eb);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.radar-ring {
    border: 3px solid transparent;
    border-top-color: #ef4444;
    border-bottom-color: #ef4444;
    border-radius: 50%;
}

.no-scrollbar::-webkit-scrollbar { display: none; }

/* Keyframes */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    50% { transform: translate(50px, -50px) scale(1.2); }
    100% { transform: translate(-50px, 20px) scale(0.9); }
}

@keyframes floatLarge {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.02); }
}

@keyframes scanV {
    0% { transform: translateY(-100%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(500%); opacity: 0; }
}

@keyframes pulseWarning {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 40px 20px rgba(239, 68, 68, 0.1); }
}

/* Style Khusus Form Pengguna */
.glass-card-form {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 1);
    box-shadow: 0 40px 100px -20px rgba(14, 165, 233, 0.15), 0 0 0 1px rgba(226, 232, 240, 0.8);
}

select option {
    background-color: #ffffff;
    color: #1e293b;
}

.input-with-icon {
    padding-left: 3.2rem;
}

input:invalid:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 1px #ef4444;
}

/* Gaya Khusus Area Deteksi Sistem */
.glass-panel {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 1);
    box-shadow: 0 40px 100px -20px rgba(14, 165, 233, 0.15), 0 0 0 1px rgba(226, 232, 240, 0.8);
}

.video-overlay {
    background: 
        linear-gradient(90deg, rgba(14,165,233,0.5) 2px, transparent 2px) 0 0,
        linear-gradient(180deg, rgba(14,165,233,0.5) 2px, transparent 2px) 0 0,
        linear-gradient(270deg, rgba(14,165,233,0.5) 2px, transparent 2px) 100% 0,
        linear-gradient(0deg, rgba(14,165,233,0.5) 2px, transparent 2px) 100% 0,
        linear-gradient(90deg, rgba(14,165,233,0.5) 2px, transparent 2px) 0 100%,
        linear-gradient(180deg, rgba(14,165,233,0.5) 2px, transparent 2px) 0 100%,
        linear-gradient(270deg, rgba(14,165,233,0.5) 2px, transparent 2px) 100% 100%,
        linear-gradient(0deg, rgba(14,165,233,0.5) 2px, transparent 2px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

/* STYLING KHUSUS ADMIN PANEL */
.glass-panel-admin {
    background: #ffffff; 
    border: 1px solid rgba(226, 232, 240, 1);
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.05);
}

.sidebar-item { 
    transition: all 0.3s ease; 
}

.sidebar-item:hover, .sidebar-item.active {
    background-color: #f0f9ff;
    color: #0284c7;
    border-right: 4px solid #0284c7;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }