/* Universal Base */
body { 
    font-family: 'Quicksand', sans-serif; 
    background-color: #f8fafc; 
}
.dark body { 
    background-color: #0B1120; 
}

/* Utilities */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ================= NEW: STRICT 1:1 IMAGE RATIO ================= */
/* Class ini menjamin rasio gambar 1:1 sempurna di semua ukuran layar */
.aspect-square { 
    aspect-ratio: 1 / 1 !important; 
}

.ratio-1-1-container {
    aspect-ratio: 1 / 1 !important;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.ratio-1-1-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Animations */
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}
.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }

@keyframes toastSlide { 
    0% { transform: translate(-50%, 100%); opacity: 0; } 
    10% { transform: translate(-50%, 0); opacity: 1; } 
    90% { transform: translate(-50%, 0); opacity: 1; } 
    100% { transform: translate(-50%, 10px); opacity: 0; } 
}
.animate-toast { animation: toastSlide 3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }

/* Wobble / Shake Product Animation */
@keyframes softWobble {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    20% { transform: translateY(-4px) rotate(-1.5deg); }
    40% { transform: translateY(2px) rotate(1deg); }
    60% { transform: translateY(-2px) rotate(-0.5deg); }
    80% { transform: translateY(1px) rotate(0.5deg); }
}
.animate-wobble { animation: softWobble 3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* Theme / Icons Animation */
.theme-toggle-btn:active svg { transform: scale(0.8); transition: transform 0.1s; }
.dark .theme-toggle-btn svg.moon-icon { animation: swing 3s infinite ease-in-out; }
.theme-toggle-btn svg.sun-icon { animation: rotate-slow 10s linear infinite; }

@keyframes swing { 
    0%, 100% { transform: rotate(-15deg); } 
    50% { transform: rotate(15deg); } 
}
@keyframes rotate-slow { 
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); } 
}

.star-icon { transition: color 0.2s ease, transform 0.2s ease; }
.star-icon:hover { transform: scale(1.15); }

/* Glass Header Optimization */
.glass-header { background: rgba(255, 255, 255, 0.98); }
.dark .glass-header { background: rgba(17, 24, 39, 0.98); }

/* Admin Specific Overrides */
.admin-checkbox:checked { background-color: #2563eb; border-color: #2563eb; }
.table-row-hover:hover { background-color: #f1f5f9; }

/* Dropdown Animation */
.dropdown-content {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
.dropdown-content.open {
    max-height: 200px; 
    opacity: 1;
}

/* Arrow Rotation */
.arrow-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.arrow-icon.open {
    transform: rotate(180deg);
}

/* ================= LYNK.ID STYLE PRODUCT CARDS ================= */
/* Kotak produk neo brutalism: border tegas + bayangan solid offset.
   Bagian isi produk tetap dari JS, yang diubah cuma kulit/card-nya. */
#product-grid {
    gap: 1.35rem !important;
    padding-right: 8px;
    padding-bottom: 1.5rem;
}

.product-card-anim {
    --product-card-accent: #3f9b8a;
    background: #ffffff !important;
    border: 2px solid var(--product-card-accent) !important;
    border-radius: 4px !important;
    box-shadow: 7px 7px 0 var(--product-card-accent) !important;
    overflow: hidden;
    transform: translate(0, 0);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease !important;
}

.dark .product-card-anim {
    --product-card-accent: #58b8a8;
    background: #111827 !important;
    border-color: var(--product-card-accent) !important;
    box-shadow: 7px 7px 0 var(--product-card-accent) !important;
}

.product-card-anim:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 9px 9px 0 var(--product-card-accent) !important;
}

.product-card-anim:active {
    transform: translate(5px, 5px) !important;
    box-shadow: 2px 2px 0 var(--product-card-accent) !important;
}

.product-card-anim > .ratio-1-1-container {
    border-radius: 0 !important;
    box-shadow: none !important;
    border-color: rgba(63, 155, 138, 0.28) !important;
}

.product-card-anim img {
    display: block;
}

.premium-card {
    border-radius: 4px !important;
}

@media (max-width: 520px) {
    #product-grid {
        gap: 1.2rem !important;
        padding-right: 6px;
    }

    .product-card-anim {
        box-shadow: 6px 6px 0 var(--product-card-accent) !important;
    }

    .product-card-anim:hover {
        transform: translate(0, 0) !important;
        box-shadow: 6px 6px 0 var(--product-card-accent) !important;
    }

    .product-card-anim:active {
        transform: translate(4px, 4px) !important;
        box-shadow: 2px 2px 0 var(--product-card-accent) !important;
    }
}

/* ================= PRODUCT IMAGE SLIDER ================= */
.product-slider-shell {
    position: relative;
    display: flex;
    flex-direction: column;
}

.product-slider-image-wrap {
    position: relative;
    width: 100%;
}

.product-slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
    border: 1px solid rgba(0,0,0,0.05);
}
.dark .product-slider-nav-btn {
    background: rgba(30, 41, 59, 0.85);
    color: #e2e8f0;
    border-color: rgba(255,255,255,0.05);
}
.product-slider-nav-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.05);
}
.dark .product-slider-nav-btn:hover {
    background: rgba(30, 41, 59, 1);
}
.product-slider-nav-btn:active {
    transform: translateY(-50%) scale(0.95);
}
.product-slider-nav-btn.left {
    left: 12px;
}
.product-slider-nav-btn.right {
    right: 12px;
}

.product-slider-indicators {
    position: relative;
    margin-top: 14px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.product-slider-indicator {
    width: 24px;
    height: 4px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
    cursor: pointer;
}
.dark .product-slider-indicator {
    background: #475569;
}
.product-slider-indicator.active {
    background: #475569;
    width: 32px;
}
.dark .product-slider-indicator.active {
    background: #e2e8f0;
    width: 32px;
}