@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

body { 
    /* Mengganti font ke kombinasi yang lebih modern, fallback ke Poppins */
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif; 
    -webkit-tap-highlight-color: transparent; 
    color: #1e293b; /* Slate-800 yang lebih tegas */
}

html, body {
    height: 100%;
    overflow: hidden;
    position: fixed;
    width: 100%;
}

.app-container { 
    height: 100vh; /* Fallback */
    height: var(--app-height, 100vh);
    width: 100%;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
}

.content-area {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 80px; /* Memberi ruang untuk navigasi bawah */
}
.content-area::-webkit-scrollbar { display: none; }

/* --- REDESIGN: Dari Neumorphism ke Modern Glass/Flat --- */

/* 1. Base Background: Kita ganti abu-abu kusam dengan Gradient segar */
.neumorphic-base {
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
    position: relative;
}
/* Opsional: Menambahkan aksen background blob agar terlihat modern */
.neumorphic-base::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(37,99,235,0.1) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

/* 2. Cards: Menjadi Putih Bersih dengan Bayangan Halus (Elevation) */
.neumorphic-card {
    background: rgba(255, 255, 255, 0.85); /* Sedikit transparan */
    backdrop-filter: blur(12px); /* Efek kaca */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); /* Soft shadow */
    border-radius: 24px; /* Lebih bulat */
    position: relative;
    z-index: 1;
}

/* Khusus untuk kartu yang butuh penekanan lebih */
.neumorphic-card.light-shadow {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}

/* 3. Buttons & Inputs: Modern Pill Shape */
.neumorphic-button {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efek Active/Pressed (Gantikan efek cekung neumorphism dengan scale/darken) */
.neumorphic-button:active, 
.neumorphic-button.pressed {
    transform: scale(0.98);
    background-color: #f8fafc;
    border-color: #cbd5e1;
    box-shadow: none;
}

/* Khusus Input Field agar terlihat seperti input modern */
.neumorphic-button input {
    font-weight: 500;
}

/* --- Navigation Styling --- */
/* Membuat navigasi bawah melayang (Floating) */
nav .neumorphic-card {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.5);
}

.tab-btn {
    transition: all 0.3s ease;
    border-radius: 16px;
}

.tab-btn.active {
    color: #2563EB; /* Biru Primer */
    background-color: #EFF6FF; /* Biru sangat muda */
    transform: translateY(-2px);
}
.tab-btn.active svg { 
    filter: drop-shadow(0 2px 4px rgba(37,99,235,0.2));
}

/* --- Animations (Dipertahankan tapi diperhalus) --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUp {
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}
.animate-fadeOut {
    animation: fadeOut 0.2s ease-out forwards;
}

/* Modal Animations */
@keyframes modalScaleUp {
    from { transform: scale(0.9) translateY(10px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
.modal.show .modal-content { animation-name: modalScaleUp; animation-duration: 0.3s; }

/* Skeleton Loading Modern */
.skeleton-box {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* --- Tambahan Penting: Animasi Tutup Modal --- */
/* Tanpa ini, modal tidak akan bisa ditutup karena JS menunggu animasi selesai */

@keyframes modalScaleDown {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.9) translateY(10px); opacity: 0; }
}

.modal.hide .modal-content {
    animation-name: modalScaleDown;
    animation-duration: 0.2s; /* Cepat */
    animation-fill-mode: forwards;
}

.modal.hide .modal-bg {
    animation: fadeOut 0.2s forwards;
}
/* --- Animasi Scanner --- */
@keyframes scanMove {
    0%, 100% { top: 5%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    50% { top: 95%; }
}

.animate-scan {
    animation: scanMove 2.5s infinite linear;
    width: 100%;
}
/* --- ANTI COPY-PASTE & SELECTION --- */

/* 1. Matikan seleksi di seluruh aplikasi */
* {
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* Standar Modern */
    
    /* 2. Matikan menu pop-up saat tekan lama di Android/iOS */
    -webkit-touch-callout: none; 
}

/* 3. PENGECUALIAN: Izinkan input form agar tetap bisa diketik */
input, textarea {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}