@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

/* =========================================
   GLOBAL STYLES (Dipakai di semua halaman)
   ========================================= */

/* --- STYLE DASAR --- */
body { font-family: 'Roboto', sans-serif; background-color: #fcfcfc; color: #333; overflow-x: hidden; }

/* --- NAVBAR (Versi Double Logo) --- */
.navbar-custom { 
    background-color: #000000; 
    padding: 10px 0; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
}

.navbar-brand { 
    font-weight: 700; 
    letter-spacing: 1px; 
    font-size: 1.2rem; 
    color: #ffffff !important; 
    display: flex; 
    align-items: center;
    max-width: none !important; /* Dihilangkan agar muat dua logo */
}

/* Styling Logo 55 Tahun */
.anniversary-logo-img {
    height: 40px; 
    width: auto;
    object-fit: contain;
}

/* Styling Garis Pemisah Vertikal */
.logo-divider {
    width: 1.5px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.4); 
}

/* Styling Logo Utama Mitsubishi */
.main-logo-img {
    height: 35px;
    width: auto;
    object-fit: contain;
}

.navbar-toggler { border: 1px solid rgba(255,255,255,0.3); padding: 4px 8px; font-size: 1.1rem; }
.navbar-toggler:focus { box-shadow: none; border-color: #E60012; }

.nav-link { color: #cccccc !important; text-transform: uppercase; font-size: 0.9rem; font-weight: 500; margin-left: 20px; transition: 0.3s; }
.nav-link:hover { color: #E60012 !important; }
.nav-link.active { color: #E60012 !important; font-weight: 700; }

@media (max-width: 991px) { .navbar-collapse { display: none !important; } }

/* Responsif Mobile untuk Logo */
@media (max-width: 768px) {
    .anniversary-logo-img { height: 32px; }
    .logo-divider { height: 22px; margin-left: 10px !important; margin-right: 10px !important; }
    .main-logo-img { height: 28px; }
}

/* --- BOTTOM BAR MOBILE --- */
.mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background-color: #ffffff; z-index: 1040; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); padding: 8px 0; border-top: 3px solid #E60012; display: flex; justify-content: space-around; align-items: center; }
.bottom-nav-item { color: #777777; text-align: center; text-decoration: none; font-size: 0.65rem; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; }
.bottom-nav-item i { font-size: 1.3rem; margin-bottom: 4px; transition: 0.2s; }
.bottom-nav-item:hover, .bottom-nav-item.active { color: #000000; }
.bottom-nav-item.active i { color: #E60012; transform: translateY(-2px); }
@media (max-width: 768px) { body { padding-bottom: 70px; } }

/* --- SECTION TITLE (Judul Section Global) --- */
.section-title { text-align: center; margin: 0 0 40px; text-transform: none; font-weight: 900; letter-spacing: 1px; position: relative; font-size: 24px; color: #333; }
.section-title:after { content: ''; display: block; width: 60px; height: 4px; background: #E60012; margin: 15px auto 0; }

/* --- LABEL BARU (UNTUK HOME DAN MODEL) --- */
.badge-home-new, .badge-new { position: absolute; top: 15px; left: 0; right: auto; background: linear-gradient(to right, #c00000, #E60012); color: white; padding: 6px 25px 6px 12px; font-size: 0.8rem; font-weight: 900; text-transform: uppercase; border-radius: 0 4px 4px 0; z-index: 5; clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%); filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.3)); }

/* --- GAYA TOMBOL MODERN KOTAK (Global) --- */
.btn-mitsubishi, .btn-outline-dark, .btn-detail-mobile, .btn-outline-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600 !important; border-radius: 5px !important; padding: 10px 20px !important; transition: all 0.3s ease; text-transform: none !important; font-size: 0.9rem !important; text-decoration: none; }
.btn-outline-dark, .btn-outline-danger, .btn-detail-mobile { background-color: #ffffff !important; color: #333333 !important; border: 1px solid #dddddd !important; }
.btn-outline-dark:hover, .btn-outline-danger:hover, .btn-detail-mobile:hover { background-color: #E60012 !important; border-color: #E60012 !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(230, 0, 18, 0.2); }
.btn-mitsubishi { background-color: #E60012 !important; color: #ffffff !important; border: 1px solid #E60012 !important; }
.btn-mitsubishi:hover { background-color: #cc0010 !important; border-color: #cc0010 !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(230,0,18,0.2); color: #ffffff !important; }
.btn-mitsubishi i, .btn-outline-dark i, .btn-detail-mobile i, .btn-outline-danger i { font-size: 1.1rem; }

/* --- MEDIA QUERY GLOBAL (Tombol & Badge) --- */
@media (max-width: 768px) {
    .badge-home-new, .badge-new { top: 10px !important; left: 0 !important; font-size: 0.65rem !important; padding: 4px 18px 4px 8px !important; clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%) !important; }
    .btn-mitsubishi, .btn-outline-dark, .btn-detail-mobile, .btn-outline-danger { padding: 8px 16px !important; font-size: 0.8rem !important; gap: 6px; }
}

/* --- FOOTER --- */
footer { background-color: #111; color: #777; padding: 60px 0 30px; margin-top: 0; }
footer h5 { color: white; text-transform: uppercase; margin-bottom: 20px; font-size: 1rem; letter-spacing: 1px; }

/* Mengatur warna dasar link dan efek transisi */
.footer-link, footer a { 
    color: #aaaaaa; 
    text-decoration: none; 
    display: inline-block; 
    margin-bottom: 10px;
    font-size: 0.9rem; 
    transition: all 0.3s ease; /* Membuat perubahan warnanya jadi halus, tidak kaku */
}

/* Mengatur warna teks menjadi MERAH saat mouse diarahkan (hover) */
.footer-link:hover, footer a:hover { 
    color: #E60012 !important; 
    transform: translateX(5px); /* Tambahan efek geser kanan sedikit biar terasa interaktif */
}

/* Floating WA */
.floating-wa { position: fixed; bottom: 30px; right: 30px; background-color: #25D366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 1000; transition: 0.3s; text-decoration: none; }
.floating-wa:hover { transform: scale(1.1); background-color: #128C7E; color: white; }
@media (max-width: 768px) { .floating-wa { bottom: 85px; width: 50px; height: 50px; font-size: 25px; right: 20px; } }

/* --- DELIVERY CARD (Global/Gallery) --- */
.delivery-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.08); transition: 0.3s ease; height: 100%; }
.delivery-card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,0.12); }
.delivery-img-wrapper { width: 100%; height: 260px; overflow: hidden; }
.delivery-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.delivery-card-body { padding: 16px 12px 20px; }
.delivery-name { font-weight: 700; margin-bottom: 6px; }
.delivery-desc { font-size: 14px; color: #666; margin: 0; }

/* === PAGE KHUSUS GALLERY === */
.gallery-card { transition: transform 0.3s ease; background: #fff; }
.gallery-card:hover { transform: translateY(-5px); }
.gallery-img-wrapper { aspect-ratio: 1/1; width: 100%; overflow: hidden; background-color: #f8f9fa; }
.gallery-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.gallery-card:hover .gallery-img-wrapper img { transform: scale(1.05); }
.gallery-caption { text-align: center; padding: 1rem !important; }
.gallery-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; color: #333; }
.gallery-desc { font-size: 0.85rem; color: #666; line-height: 1.4; margin-bottom: 0; }