/* Di dalam file css/styleindex.css Anda */


/* Tambahkan gaya untuk filter navigasi */
.filter-nav {
 display: flex;
 justify-content: center;
 margin-bottom: 20px;
}


.filter-nav a {
 display: block;
 padding: 10px 15px;
 margin: 0 10px;
 border: 1px solid #ccc;
 border-radius: 5px;
 text-decoration: none;
 color: #333;
 background-color: #f9f9f9;
 font-size: 1em;
}


.filter-nav a.active,
.filter-nav a:hover {
 background-color: #007bff;
 color: white;
 border-color: #007bff;
}


/* Pastikan tata letak promo-grid tetap berfungsi */
.promo-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 20px;
 padding: 20px;
}


.promo-card {
 border: 1px solid #ddd;
 border-radius: 8px;
 overflow: hidden;
 display: block; /* Pastikan kartu mobil ditampilkan secara default */
}


.promo-card img {
 width: 100%;
 height: auto;
 display: block;
}


.promo-card h3 {
 padding: 10px;
 text-align: center;
 font-size: 1.2em;
 margin-top: 0;
}


.promo-card .btn-secondary {
 display: block;
 width: 80%;
 margin: 10px auto;
 padding: 10px 15px;
 text-align: center;
 text-decoration: none;
 color: white;
 background-color: #6c757d;
 border-radius: 5px;
}


.promo-card .btn-secondary:hover {
 background-color: #5a6268;
}
/* Footer Styles */
.main-footer {
    background: #222;
    color: #fff;
    padding: 40px 0 20px;
    font-size: 0.9em;
}

.main-footer .container {
    text-align: left;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.footer-col h4 {
    font-size: 1.2em;
    margin-bottom: 15px;
    color: #eee;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-col ul li a:hover {
    color: #007bff;
}

.social-media a {
    display: inline-block;
    margin-right: 15px;
}

.social-media img {
    width: 28px;
    height: 28px;
    filter: invert(1); /* Untuk ikon putih di background gelap */
    transition: filter 0.3s ease;
}

.social-media img:hover {
    filter: invert(0.5); /* Contoh: sedikit keabuan saat hover */
}

.copyright {
    text-align: center;
    border-top: 1px solid #444;
    padding-top: 20px;
    margin-top: 20px;
    color: #aaa;
}