/**
 * AUTOBAHN® WHEELS - MASTER CSS STYLING 2026
 * Bersih, Optimal, & Bebas Duplikasi
 */

/* ========================================== */
/* 1. CORE UTILITIES & FIXES                  */
/* ========================================== */

/* Mencegah komponen Alpine.js berkedip saat pertama kali dimuat */
[x-cloak] {
    display: none !important;
}

/* Memastikan scroll vertikal utama web tetap smooth */
html {
    overflow-y: scroll;
}

/* Hardware acceleration agar transisi & animasi tidak jitter/patah-patah */
#main-header,
.logo-container {
    will-change: transform, background-color;
    transform: translateZ(0);
}


/* ========================================== */
/* 2. SLIDER SYSTEM (JAWABAN POIN 1.A)        */
/* ========================================== */

/* Menghilangkan scrollbar di semua browser & Mengatur pergerakan geser velg */
.no-scrollbar::-webkit-scrollbar,
.scrollbar-hide::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.no-scrollbar,
.scrollbar-hide {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */

    /* === PINDAHAN DARI INLINE STYLE SLIDER PRE-ORDER (POIN 1.A) === */
    scroll-behavior: smooth;
    /* Biar kalau digeser, velg-nya meluncur halus */
    -webkit-overflow-scrolling: touch;
    /* Biar geser pakai jari di HP super responsive & lancar */
}


/* ========================================== */
/* 3. CUSTOM ELEMENT STYLING                  */
/* ========================================== */

/* Custom Scrollbar untuk area detail/Payment agar tetap estetik */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    /* Sangat tipis */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #db2777;
    /* Warna pink khas AUTOBAHN® */
    border-radius: 10px;
}

.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #db2777 transparent;
}

/* Header safety net untuk mobile setup */
@media (max-width: 1024px) {
    #main-header {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
        transition: background-color 0.15s ease-out;
    }
}


/* ========================================== */
/* 4. ANIMATION SYSTEM (PINDAHAN DASA LAUNCHING) */
/* ========================================== */

/* Efek scan running bar pada live inventory */
@keyframes scan {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}