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

/* ==============================================================
   PENGATURAN UMUM & GLOBAL
   ============================================================== */
:root { 
    --color-primary: #2563eb; /* Warna default, ditimpa oleh JS */
} 

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    overscroll-behavior: none; 
    transition: zoom 0.3s ease; 
    /* Menghindari layar terpotong oleh Notch/Navigasi Bawah */
    padding-bottom: env(safe-area-inset-bottom);
}

input, textarea, select { 
    -webkit-user-select: auto !important; 
    -ms-user-select: auto !important; 
    user-select: auto !important; 
}

/* WARNA BRAND DINAMIS */
.bg-brand { background-color: var(--color-primary) !important; }
.text-brand { color: var(--color-primary) !important; }
.border-brand { border-color: var(--color-primary) !important; }
.focus-brand:focus { 
    border-color: var(--color-primary) !important; 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); 
}

/* KUSTOMISASI SCROLLBAR (DESKTOP) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* ==============================================================
   ANIMASI & EFEK SPESIAL
   ============================================================== */
button, a { touch-action: manipulation; }

/* Animasi Muncul dari Bawah */
@keyframes slideUp { 
    from { opacity: 0; transform: translateY(20px); } 
    to { opacity: 1; transform: translateY(0); } 
}
.animate-slide-up { animation: slideUp 0.3s ease-out forwards; }

/* Animasi Mengambang (Floating) */
@keyframes float { 
    0% { transform: translateY(0px); } 
    50% { transform: translateY(-8px); } 
    100% { transform: translateY(0px); } 
}
.animate-float { animation: float 3.5s ease-in-out infinite; }

/* Efek Kaca (Glassmorphism) */
.glass-effect { 
    background: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    border: 1px solid rgba(255, 255, 255, 0.3); 
}

/* Animasi Mesin Tik AI (TaroBot) */
.typing-dot { animation: typing 1.4s infinite ease-in-out; fill: currentColor; }
.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-3px); } 
}

/* ==============================================================
   TAMPILAN SPESIFIK & MEDIA QUERIES
   ============================================================== */

/* Pengaturan Logo Header */
.header-logo-img { max-height: 32px; width: auto; object-fit: contain; border-radius: 4px; }
@media (min-width: 768px) { .header-logo-img { max-height: 42px; } }

/* Pengaman Area Bawah Mobile */
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

/* KHUSUS MOBILE PWA & SPLIT SCREEN (KASIR) */
@media (max-width: 767px) {
    /* Menyembunyikan scrollbar di keranjang HP agar terlihat bersih */
    #cart-items::-webkit-scrollbar { display: none; }
    #cart-items { -ms-overflow-style: none; scrollbar-width: none; }
    
    /* Layout Split Screen: 55% Katalog, 45% Keranjang */
    #app-container { height: 100dvh; display: flex; flex-direction: column; }
    main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    section { flex: 0 0 55%; overflow: hidden; display: flex; flex-direction: column; }
    aside#cart-panel { flex: 0 0 45%; overflow: hidden; display: flex; flex-direction: column; border-top: 2px solid #e2e8f0; }
}

/* PENGATURAN MODE CETAK (PRINT BROWSER) */
@media print {
    body { margin: 0 !important; padding: 0 !important; width: 100% !important; -webkit-print-color-adjust: exact; }
    #app-container, #panel-tarobot, #btn-tarobot { display: none !important; }
    #print-area { display: block !important; width: 100% !important; margin: 0 auto !important; background: white !important; color: black !important; page-break-after: auto; }
    .no-print { display: none !important; }
    @page { margin: 0 !important; size: auto; }
}