/* 1. RESET GLOBAL & SCROLL FIX (MUTLAK) */
html, body { 
    overflow-x: hidden !important; 
    min-height: 100vh;
    width: 100%;
}

/* 2. BASE BACKGROUND (Pure Light vs Pure Dark) */
body { 
    background-color: #f8fafc; /* Light Mode: Putih kebiruan bersih (Slate 50) */
    color: #0f172a;
    transition: background-color 0.4s ease, color 0.4s ease;
}
.dark body { 
    background-color: #0b1120; /* Dark Mode: Biru pekat sangat gelap ala referensi */
    color: #f8fafc;
}

/* 3. KARTU SOLID MODERN (Menggantikan Glassmorphism transparan) */
.glass-panel {
    background: #ffffff; /* Putih solid */
    border: 1px solid #f1f5f9;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}
.dark .glass-panel {
    background: #111827; /* Abu-abu sangat gelap (Gray 900) */
    border: 1px solid #1f2937;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
}

/* 4. INPUT FORM SAAS */
.input-modern {
    background: #f1f5f9;
    border: 1px solid transparent;
    color: #0f172a;
    transition: all 0.2s;
}
.dark .input-modern {
    background: #1f2937;
    border: 1px solid transparent;
    color: #f8fafc;
}
.input-modern:focus {
    background: #ffffff;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
    transform: translateY(-1px);
    outline: none;
}
.dark .input-modern:focus {
    background: #0b1120;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25);
    outline: none;
}

/* 5. TOMBOL GLOW & FLOAT */
.btn-glow-float {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-glow-float:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.4);
}
.dark .btn-glow-float:hover {
    box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.6);
}
.btn-glow-float:active {
    transform: translateY(0);
}

/* 6. TECH GRID (Pattern tipis di latar belakang) */
.tech-grid { 
    background-size: 50px 50px; 
    background-image: 
        linear-gradient(to right, rgba(15, 23, 42, 0.03) 1px, transparent 1px), 
        linear-gradient(to bottom, rgba(15, 23, 42, 0.03) 1px, transparent 1px); 
    position: fixed; inset: 0; z-index: -2; 
    pointer-events: none; 
}
.dark .tech-grid { 
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px), 
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px); 
}

/* Utility untuk Gradient Text ala Digital Corner */
.text-gradient {
    background: linear-gradient(to right, #0ea5e9, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 7. CUSTOM SCROLLBAR UNTUK PANEL TABEL */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.dark ::-webkit-scrollbar-thumb {
    background: #334155;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}