/* =================================================================
1. HEADER CONTAINER STYLE (Tampilan Keseluruhan)
================================================================= */
/* Memberikan bayangan halus pada navbar agar terpisah dari konten */
#header {
background-color: #ffffff !important;
box-shadow: 0 5px 20px rgba(0,0,0,0.05) !important;
border-bottom: none !important;
}
/* Mengatur padding agar tidak terlalu tebal/tipis */
.header-inner {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
/* =================================================================
2. DESKTOP NAVIGATION (Tampilan Laptop)
================================================================= */
/* Gaya Link Menu (About Us, Marketplace, dll) */
.header-nav-item a {
font-family: 'Poppins', sans-serif !important; /* Gunakan font modern */
font-weight: 500 !important;
color: #333333 !important; /* Warna text abu gelap elegan */
position: relative;
transition: color 0.3s ease;
}
/* Efek Garis Bawah Bergerak saat Hover */
.header-nav-item a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: #0078FF; /* Warna Biru Start Franchise */
transition: width 0.3s ease;
}
.header-nav-item a:hover::after {
width: 100%;
}
.header-nav-item a:hover {
color: #0078FF !important;
}
/* Tombol CTA (Contact) di Desktop - Gaya Premium */
.header-actions .btn {
background-color: #0078FF !important;
color: #ffffff !important;
border: none !important;
border-radius: 50px !important; /* Bentuk Pill (bulat lonjong) */
padding: 12px 30px !important;
font-weight: 600 !important;
box-shadow: 0 4px 15px rgba(0, 120, 255, 0.3) !important; /* Bayangan biru */
transition: all 0.3s ease !important;
}
/* Efek saat tombol Contact di-hover (Naik sedikit) */
.header-actions .btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 120, 255, 0.5) !important;
opacity: 1 !important;
}
/* =================================================================
3. MOBILE MENU FIX (Perbaikan Masalah Menu Tidak Muncul)
================================================================= */
/* Memaksa Menu Mobile Muncul Paling Depan */
body.header--menu-open .header-menu {
opacity: 1 !important;
visibility: visible !important;
z-index: 2147483647 !important; /* Nilai max z-index */
background-color: #FFFFFF !important;
display: block !important;
pointer-events: auto !important; /* Memastikan bisa diklik */
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100vh !important;
}
/* Memperbaiki posisi tombol close (X) agar terlihat */
body.header--menu-open .header-burger {
position: fixed !important; /* Tetap di pojok saat scroll */
top: 20px !important;
right: 5vw !important; /* Sesuaikan dengan margin kanan */
z-index: 2147483647 !important;
}
/* Mengubah warna garis burger menjadi Hitam Tebal */
.burger-inner > div {
background-color: #000000 !important;
height: 2px !important;
width: 25px !important;
border-radius: 2px;
}
/* =================================================================
4. MOBILE MENU CONTENT (Isi Menu Saat Dibuka)
================================================================= */
/* Merapikan List Menu di Mobile */
.header-menu-nav-item a {
font-size: 20px !important;
color: #1a1a1a !important;
font-weight: 600 !important;
margin-bottom: 5px !important;
}
/* Tombol Contact di Mobile (Sesuai Gambar 2 - Hitam) */
.header-menu-cta a.btn {
background-color: #000000 !important;
color: #ffffff !important;
width: 100% !important;
border-radius: 8px !important;
padding: 15px !important;
font-size: 16px !important;
margin-top: 30px !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
}
/* Mengatur jarak background menu */
.header-menu-bg {
background-color: #ffffff !important;
}
/* Sembunyikan elemen duplikat jika ada */
.header--menu-open .header-display-desktop {
display: none !important;
}
