/* KARTINIMEDIA STORE STYLES - Modern Dribbble Inspired */

/* Global Styles */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f8fafc; 
    color: #1e293b;
}

/* --- DYNAMIC THEME UTILITIES --- */
/* Note: Variabel --primary dan --secondary didefinisikan di head index.php */

.text-green-600, .text-theme-600 { color: var(--primary) !important; }
.bg-green-600, .bg-theme-600 { background-color: var(--primary) !important; }
.hover\:bg-green-700:hover, .hover\:bg-theme-700:hover { background-color: var(--secondary) !important; }
.focus\:ring-green-500:focus, .focus\:ring-theme-500:focus { --tw-ring-color: var(--primary) !important; }

.cat-btn.active { 
    background-color: var(--primary); 
    color: white; 
    border-color: transparent; 
}

/* Header Slider Styles (FIXED: FORCE ROUNDED CORNERS WITH MASKING) */
.slider-container {
    position: relative;
    overflow: hidden;
    /* Paksa border radius */
    border-radius: 2rem !important; 
    
    /* FIX UTAMA: Memaksa browser memotong konten (image/slide) yang keluar dari border radius */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    
    /* Membuat stacking context baru */
    z-index: 1; 
    
    /* Responsive Height */
    height: 200px; /* Tinggi di HP */
    margin-bottom: 2.5rem; 
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Tinggi slider untuk Tablet & Desktop */
@media (min-width: 640px) {
    .slider-container {
        height: 300px;
    }
}

@media (min-width: 1024px) {
    .slider-container {
        height: 380px; 
    }
}

/* --- PERBAIKAN SLIDER (ANTI-FLICKER) --- */
/* Mengganti animasi slide/geser dengan Fade (transparansi) agar lebih mulus */
.slide {
    width: 100%;
    height: 100%;
    position: absolute; 
    top: 0;
    left: 0;
    
    /* Gunakan Opacity untuk transisi */
    opacity: 0;
    pointer-events: none; /* Saat slide mati, tidak bisa diklik */
    
    transition: opacity 1s ease-in-out; /* Animasi fade 1 detik */
    z-index: 0;
    
    background-size: cover;
    background-position: center;
    border-radius: inherit; 
    display: flex !important; /* Pastikan konten teks selalu di-render */
}

.slide.active-slide {
    opacity: 1;
    pointer-events: auto; /* Saat aktif, bisa interaksi */
    z-index: 10;
}

/* Pastikan gambar di dalam slide juga mengikuti rounded parent */
.slide img {
    border-radius: 2rem !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Slider Dots Style */
.slider-dots {
    position: absolute;
    bottom: 1.5rem; 
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem; 
    z-index: 20; /* Z-index dinaikkan agar di atas slide */
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.2); 
    border-radius: 9999px; 
    backdrop-filter: blur(4px);
}

/* Loading Spinner Animation */
.loader { 
    border: 3px solid #f3f3f3; 
    border-top: 3px solid #16a34a; 
    border-top-color: var(--primary); /* Use dynamic color */
    border-radius: 50%; 
    width: 20px; 
    height: 20px; 
    animation: spin 1s linear infinite; 
}

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

/* Modal Scroll Fix */
.modal-scroll, .modal-body { 
    max-height: 85vh; 
    overflow-y: auto; 
    border-radius: 1.5rem; 
}

/* Scrollbar Styling */
.modal-body::-webkit-scrollbar, .modal-scroll::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-track, .modal-scroll::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.modal-body::-webkit-scrollbar-thumb, .modal-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.modal-body::-webkit-scrollbar-thumb:hover, .modal-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Price Update Animation */
.price-update { 
    animation: highlight 0.5s ease-in-out; 
}

@keyframes highlight { 
    0% { color: var(--primary); transform: scale(1); } 
    50% { color: var(--secondary); transform: scale(1.1); } 
    100% { color: var(--primary); transform: scale(1); } 
}

/* Product Card Custom Styles */
.product-card, .product-card * {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #f1f5f9;
    cursor: pointer !important; /* FIX: Pastikan kursor berubah jadi tangan */
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.01);
    border-color: #dcfce7; 
}

/* Modern Button Hover Effect */
.btn-primary {
    transition: all 0.2s;
}
.btn-primary:active {
    transform: scale(0.95);
}

/* Custom Input Focus Ring */
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.1); 
    border-color: var(--primary);
}