/* General Body Styles */
body {
    background-color: #1a1a1a; /* Warna latar belakang diubah menjadi hitam gelap */
    color: #fff; /* Warna teks default */
    font-family: Arial, sans-serif; /* Font umum */
}

.container {
    max-width: 1200px; /* Lebar maksimum konten */
}

/* Header Area */
.header-area {
    padding: 10px 0;
    flex-wrap: wrap; /* Agar responsif pada ukuran kecil */
    gap: 15px; /* Jarak antar elemen di header */
}

.logo-img {
    max-width: 180px; /* Ukuran logo */
    height: auto;
}

.custom-logo { /* Class yang diberikan WordPress untuk logo kustom */
    max-width: 180px;
    height: auto;
}

.search-bar {
    flex-grow: 1; /* Biarkan search bar mengisi ruang yang tersedia */
    max-width: 400px; /* Batasi lebar search bar */
}

.search-bar .form-control {
    background-color: #4a4a4a;
    border: 1px solid #666;
    color: #fff;
    border-radius: 0.25rem; /* Bootstrap default */
}

.search-bar .form-control::placeholder {
    color: #bbb;
}

.search-bar .btn-info {
    background-color: #17a2b8; /* Warna biru Bootstrap info */
    border-color: #17a2b8;
    color: #fff;
    border-radius: 0.25rem; /* Bootstrap default */
}

.search-bar .btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
}

/* Title Home & Marquee */
#title-home {
    background-color: #2c2c2c; /* Latar belakang untuk area judul dan marquee */
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #444; /* Border tipis */
}

.title-home-text {
    color: #ffc107; /* Warna kuning Bootstrap warning */
    margin-bottom: 10px;
}

.teks-berjaalan {
    color: #fff;
    font-size: 0.95em;
    padding: 5px 0;
    white-space: nowrap; /* Penting untuk marquee */
    overflow: hidden; /* Penting untuk marquee */
}

/* Card Post Styles */
.card-post {
    background-color: #2c2c2c; /* Warna latar belakang kartu */
    border: 1px solid #444; /* Border kartu */
    border-radius: 8px;
    overflow: hidden; /* Pastikan gambar tidak keluar dari sudut kartu */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Tambahkan transisi untuk border dan shadow */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Bayangan default yang halus */
}

.card-post:hover {
    transform: translateY(-5px); /* Geser sedikit ke atas saat hover */
    /* Menambahkan warna pada box-shadow dan border saat hover */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 193, 7, 0.7); /* Bayangan lebih gelap + glow kuning */
    border-color: #ffc107; /* Border berubah warna kuning saat hover */
}

.img-post {
    width: 100%;
    height: 180px; /* Tinggi gambar post */
    object-fit: cover; /* Pastikan gambar terisi penuh tanpa distorsi */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.card-body {
    padding: 15px;
    color: #eee;
}

.card-body h5 {
    font-size: 1.1em;
    margin-bottom: 8px;
    color: #fff; /* Warna judul post */
    line-height: 1.3;
}

.time-post {
    font-size: 0.8em;
    color: #bbb; /* Warna teks tanggal */
    margin-bottom: 5px;
}

.time-post i {
    margin-right: 5px;
}

.category-post {
    font-size: 0.9em;
    color: #aaa; /* Warna teks kategori */
    margin-bottom: 15px;
}

.card-post .btn-primary {
    background-color: #0d6efd; /* Warna biru Bootstrap primary */
    border-color: #0d6efd;
    font-size: 0.9em;
    padding: 8px 15px;
    border-radius: 5px;
    width: 100%; /* Agar tombol memenuhi lebar card-body */
}

.card-post .btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.card-post .btn-primary i {
    margin-right: 5px;
}

/* Pagination Styles */
.pagination {
    --bs-pagination-color: #17a2b8;
    --bs-pagination-active-bg: #17a2b8;
    --bs-pagination-active-border-color: #17a2b8;
    --bs-pagination-hover-color: #0b5ed7;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(23, 162, 184, 0.25);
    justify-content: center; /* Tengahkan pagination */
}

.page-item .page-link {
    background-color: #4a4a4a;
    border: 1px solid #666;
    color: #fff;
    transition: all 0.2s ease-in-out;
}

.page-item.active .page-link {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
}

.page-item .page-link:hover {
    background-color: #5a5a5a;
    border-color: #777;
    color: #fff;
}

/* Single Post Specific Styles */
.card-single-post {
    background-color: #2c2c2c; /* Warna latar belakang kartu */
    border: 1px solid #444; /* Border kartu */
    border-radius: 8px;
    color: #eee;
}

.card-single-post .entry-title {
    color: #ffc107; /* Warna kuning untuk judul postingan tunggal */
}

.card-single-post .entry-meta {
    color: #bbb;
}

.card-single-post .entry-meta i {
    margin-right: 5px;
}

.card-single-post .post-thumbnail img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Copyright Footer */
.copyright {
    text-align: center;
    font-size: 0.8em;
    color: #888;
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid #444; /* Garis pemisah */
}

/* Responsive Adjustments for smaller screens */
@media (max-width: 768px) {
    .header-area {
        flex-direction: column;
        text-align: center;
    }
    .search-bar {
        width: 90%; /* Atur lebar search bar di layar kecil */
        margin: 0 auto;
    }
    .logo {
        margin-bottom: 15px;
    }
    .img-post {
        height: 150px; /* Atur tinggi gambar agar lebih kecil di ponsel */
    }
    .card-body h5 {
        font-size: 1em;
    }
}

@media (max-width: 576px) {
    .search-bar {
        width: 100%;
    }
    /* Di layar sangat kecil, setiap kartu mengambil lebar penuh */
    .col-lg-3.col-md-4.col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}