            body {
                font-family: 'Inter', sans-serif;
                background-color: #0a0a0b;
                color: #ffffff;
            }
            .glass-nav {
                background: rgba(10, 10, 11, 0.8);
                backdrop-filter: blur(12px);
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }
            .product-card {
                background: linear-gradient(145deg, #161618, #0f0f10);
                border: 1px solid rgba(255, 255, 255, 0.05);
                transition: all 0.3s ease;
            }
            .product-card:hover {
                transform: translateY(-10px);
                border-color: #3b82f6;
                box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
            }
            .gradient-text {
                background: linear-gradient(90deg, #3b82f6, #60a5fa);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            /* Custom Select Styling */
            .custom-select {
                appearance: none;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right 1rem center;
                background-size: 1.5em;
                padding-right: 3rem;
            }

            /* Gaya untuk dropdown select (custom-select) */
.custom-select {
    /* Warna latar belakang saat tidak fokus */
    background-color: #1f2937; /* bg-gray-800/50 */
    border-color: #374151; /* border-gray-700 */
    color: #ffffff; /* text-white */

    /* Efek hover */
    transition: all 0.3s ease;
}

.custom-select:hover {
    background-color: #374151; /* bg-gray-700/50 */
    border-color: #4b5563; /* border-gray-600 */
}

.custom-select:focus {
    background-color: #1f2937; /* bg-gray-800/50 */
    border-color: #3b82f6; /* focus:border-blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); /* focus:ring-2 focus:ring-blue-500/20 */
}

/* Gaya untuk opsi dropdown (option) */
.custom-select option {
    background-color: #111827; /* bg-gray-900 */
    color: #ffffff; /* text-white */
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

/* Gaya untuk opsi yang dipilih (selected) */
.custom-select option:checked {
    background-color: #3b82f6; /* bg-blue-500 */
    color: #ffffff; /* text-white */
}

/* Gaya untuk opsi saat dihover */
.custom-select option:hover {
    background-color: #1e40af; /* bg-blue-800 */
    color: #ffffff; /* text-white */
}

/* Gaya untuk dropdown saat terbuka (untuk browser modern) */
.custom-select::-ms-expand {
    display: none;
}

/* Gaya untuk tombol Cari & Reset */
#searchBtn {
    background: linear-gradient(90deg, #2563eb, #6d28d9); /* from-blue-600 to-purple-600 */
    color: white;
    border-radius: 1rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

#searchBtn:hover {
    background: linear-gradient(90deg, #1d4ed8, #5b21b6); /* hover:from-blue-700 hover:to-purple-700 */
    transform: scale(1.05);
}

#resetBtn {
    background-color: #374151; /* bg-gray-700 */
    color: white;
    border-radius: 1rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

#resetBtn:hover {
    background-color: #4b5563; /* hover:bg-gray-600 */
}
            