/* ==========================================================================
   style_katalog.css - BLUE WHITE GLASSMORPHISM THEME
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

body { 
    font-family: 'Poppins', sans-serif !important; 
    color: #1e293b; /* Teks default menjadi biru gelap / Slate-800 */
    overflow-x: hidden; 
}

/* 1. LAYOUT & GLASS CONTAINERS */
.glass-blue { 
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px); 
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.input-blue-glass {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(226, 232, 240, 1);
    color: #1e293b;
    transition: 0.3s;
}

/* 2. UTILITIES */
.kategori-btn { transition: 0.3s; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.animate-masuk { animation: fadeSlideUp 0.6s ease forwards; }
@keyframes fadeSlideUp { 
    from { opacity: 0; transform: translateY(20px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* =======================================================
   SKELETON LOADING (LIGHT THEME)
   ======================================================= */
.skeleton-card {
    background: rgba(255, 255, 255, 0.6); 
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 32px; 
    overflow: hidden;
    position: relative;
}

.skeleton-img { width: 100%; aspect-ratio: 1/1; background: rgba(0, 0, 0, 0.03); }
.skeleton-body { padding: 24px; } 
.skeleton-text { height: 12px; background: rgba(0, 0, 0, 0.06); border-radius: 4px; margin-bottom: 8px; }
.skeleton-text.title { height: 18px; width: 80%; margin-bottom: 12px; }
.skeleton-text.price { height: 20px; width: 50%; margin-top: 15px; }
.skeleton-button { height: 35px; width: 100%; background: rgba(0, 0, 0, 0.06); border-radius: 12px; margin-top: 10px; }

/* Efek Shimmer (Cahaya Bergerak) */
.shimmer::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 100% { left: 200%; } }

/* =======================================================
   KARTU PRODUK (LIGHT GLASSMORPHISM)
   ======================================================= */
.glass-product-card {
    background: rgba(255, 255, 255, 0.5) !important; 
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 24px !important;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.08) !important; 
}

.glass-product-card:hover {
    transform: translateY(-8px) !important;
    background: rgba(255, 255, 255, 0.8) !important; 
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.15) !important;
}

/* =======================================================
   OPTIMASI AKSELERASI PERANGKAT KERAS (GPU) & PREMIUM EFEK
   ======================================================= */
.card-premium-neon {
    position: relative;
    z-index: 10;
    will-change: transform; 
}
.card-premium-neon::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(45deg, #38bdf8, #3b82f6, #818cf8); /* Pendaran Biru Cyan */
    border-radius: 26px;
    filter: blur(16px);
    opacity: 0;
    transition: opacity 0.4s ease; 
    z-index: -1;
    pointer-events: none;
}
.card-premium-neon:hover::before {
    opacity: 0.3; /* Cahaya lembut saat di-hover */
}

.img-kaca-premium {
    position: relative;
}
.img-kaca-premium::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
    transform: skewX(-25deg);
    z-index: 35;
    pointer-events: none;
    will-change: left; 
    transition: none;
}
.card-premium-neon:hover .img-kaca-premium::after {
    left: 200%;
    transition: left 0.5s ease-in-out; 
}