:where([class^="ri-"])::before { content: "\f3c2"; }
body {
    font-family: 'Roboto', sans-serif;
    scroll-behavior: smooth;
}
.hero-section {
    background-image: linear-gradient(to right, rgba(12, 35, 64, 0.9), rgba(12, 35, 64, 0.7)), url('../images/header_top2.png');
    background-size: cover;
    background-position: center;
}        
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #c8102e;
    transition: width 0.3s ease;
}
.nav-link:hover::after {
    width: 100%;
}
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -29px;
    top: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(12, 35, 64, 0.9);
    border: 3px solid #fff;
    z-index: 1;
}
.timeline-line {
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #e5e7eb;
}
.price-blur {
    position: relative;
    filter: blur(2.5px);
    transition: filter 0.3s ease;
}
.price-blur:hover {
    filter: blur(0.2px);
}

.price-blur:hover::after {
    content: '🔍 Check Price';
    position: absolute;
    top: 50%;
    left: 76%;
    transform: translate(-50%, -50%);
    background-color: #181c39;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Dark Mode Styles */
.dark {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity));
}
.dark body {
    background-color: #0f172a;
    color: #f1f5f9;
}
.dark .bg-white {
    background-color: #0d21417d;
}
.dark .bg-gray-50 {
    background-color: #0f172a;
}
.dark .text-primary {
    color: #f1f5f9; /* Ubah warna teks menjadi terang di mode gelap */
}
.dark .text-gray-800,
.dark .text-gray-700,
.dark .text-gray-600 {
    color: #d1d5db;
}
.dark .card:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}
.dark .timeline-line {
    background-color: #374151;
}
.dark .timeline-item::before {
    border-color: #1e293b;
}
/* Hamburger Menu Styles */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 24px;
    height: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hamburger-line {
    width: 100%;
    height: 2px;
    background-color: white;
    transition: all 0.3s ease;
    transform-origin: center;
}

.hamburger.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* User Feedback Fixes */
.dark .bg-gray-100 {
    background-color: #374151;
}
.dark .bg-primary\/10 {
    background-color: #1e293b; /* Warna latar belakang gelap untuk ikon */
}
.dark .bg-primary\/10 > .text-primary {
    color: #f1f5f9 !important; /* Warna ikon terang di mode gelap */
}
/* Hover state untuk tombol di mode gelap */
.dark .hover\:bg-gray-100:hover {
    background-color: #1e293b;
}
.dark .hover\:text-gray-200:hover {
    color: #e5e7eb;
}

/* Dark Mode - Judul Part dan Send Us Message */
.dark h1,
.dark h2,  
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
    color: #ffffff !important;
}

/* Dark Mode - Inventory card titles spesifik */
.dark .inventory-item h4 {
    color: #ffffff !important;
}

/* Dark Mode - Text primary override untuk semua elemen */
.dark .text-primary {
    color: #ffffff !important;
}

/* Dark Mode - Send Us a Message title spesifik */
.dark .text-red-500,
.dark #contactForm h3,
.dark #contact h3,
.dark section h3.text-red-500 {
    color: #ffffff !important;
}

/* Dark Mode - Send Us a Message dengan selector yang lebih kuat */
.dark #contact form h3,
.dark #contact .bg-white h3,
.dark form .text-2xl,
.dark .text-2xl.font-bold.text-primary {
    color: #ffffff !important;
}

/* Dark Mode - Selector paling kuat untuk Send Us a Message */
.dark h3:contains("Send Us a Message"),
.dark *[class*="text-2xl"]:contains("Send Us a Message") {
    color: #ffffff !important;
}

/* Dark Mode - Override Tailwind text-primary di semua konteks */
.dark .text-primary,
.dark .text-primary * {
    color: #ffffff !important;
}

/* Dark Mode - Tambahan selector untuk mengatasi resistensi CSS */
.dark section#contact h3.text-2xl.font-bold.text-primary {
    color: #ffffff !important;
}

.dark form#contactForm h3 {
    color: #ffffff !important;
}

/* Dark Mode - Universal override untuk semua h3 dengan text-primary */
.dark h3.text-primary {
    color: #ffffff !important;
}

/* Dark Mode - News Section */
.dark #news {
    background-color: #0f172a !important;
}

.dark #news .bg-white {
    background-color: #1e293b !important;
}

.dark #news article {
    background-color: #1e293b !important;
    border: 1px solid #374151 !important;
}

.dark #news h3 a {
    color: #ffffff !important;
}

.dark #news h3 a:hover {
    color: #60a5fa !important;
}

.dark #news .text-gray-700 {
    color: #d1d5db !important;
}

.dark #news .text-gray-900 {
    color: #ffffff !important;
}

.dark #news .border-gray-100 {
    border-color: #374151 !important;
}

/* Dark Mode - Footer link hover dengan line putih tipis */
.dark footer a {
    position: relative;
    transition: all 0.3s ease;
    color: #d1d5db;
}

.dark footer a:hover {
    color: #ffffff;
}

.dark footer a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #ffffff;
    transition: width 0.3s ease;
}

.dark footer a:hover::after {
    width: 100%;
}

/* Dark Mode - Inventory card text colors */
.dark .inventory-item .text-gray-900 {
    color: #ffffff !important;
}

.dark .inventory-item .text-primary {
    color: #ffffff !important;
}

/* Dark Mode - Additional inventory card styling */
.dark .inventory-item h4.text-lg {
    color: #ffffff !important;
}

.dark .inventory-item p.text-primary {
    color: #ffffff !important;
}

/* Dark Mode - Footer styling improvements */
.dark footer a,
.dark footer ul li a,
.dark footer .text-gray-300 {
    position: relative !important;
    color: #d1d5db !important;
    transition: all 0.3s ease !important;
}

.dark footer a:hover,
.dark footer ul li a:hover {
    color: #ffffff !important;
}

/* Dark Mode - Footer link hover line - EXCLUDE social media icons */
.dark footer a:not(.w-10):not([class*="bg-white/10"]):not([class*="rounded-full"])::after,
.dark footer ul li a::after {
    content: '' !important;
    position: absolute !important;
    width: 0 !important;
    height: 1px !important;
    bottom: -2px !important;
    left: 0 !important;
    background-color: #ffffff !important;
    transition: width 0.3s ease !important;
}

.dark footer a:not(.w-10):not([class*="bg-white/10"]):not([class*="rounded-full"]):hover::after,
.dark footer ul li a:hover::after {
    width: 100% !important;
}