/* Custom CSS untuk Berita Aceh Terkini */
body {
    font-family: 'Inter', sans-serif;
    /* Menggunakan font Inter */
    background-color: #f8f9fa;
}

.navbar {
    background-color: #007bff !important;
    /* Warna biru Bootstrap */
}

.navbar-brand,
.nav-link {
    color: #fff !important;
}

.navbar-brand:hover,
.nav-link:hover {
    color: #f0f0f0 !important;
}

.card {
    border-radius: 0.5rem;
    /* Sudut membulat */
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-5px);
}

.card-img-top {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    height: 200px;
    /* Tinggi gambar thumbnail */
    object-fit: cover;
    /* Memastikan gambar terisi penuh tanpa distorsi */
}

.card-title a {
    text-decoration: none;
    color: #343a40;
    font-weight: bold;
}

.card-title a:hover {
    color: #007bff;
}

.badge {
    border-radius: 0.25rem;
    padding: 0.4em 0.6em;
}

.sidebar .list-group-item {
    border: none;
    border-bottom: 1px solid #eee;
    padding: 0.75rem 0;
}

.sidebar .list-group-item:last-child {
    border-bottom: none;
}

.sidebar a {
    color: #343a40;
    text-decoration: none;
}

.sidebar a:hover {
    color: #007bff;
}

.footer {
    background-color: #343a40;
    color: #fff;
    padding: 2rem 0;
    margin-top: 4rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.footer a {
    color: #fff;
    text-decoration: none;
}

.footer a:hover {
    color: #007bff;
}

/* Lazyload placeholder */
img.lazyload {
    background-color: #f0f0f0;
    /* Warna abu-abu saat loading */
    min-height: 50px;
    /* Tinggi minimal agar terlihat */
}

/* Gaya untuk Iklan Dinamis */
.ad-container {
    padding: 15px;
    /* Padding di dalam container iklan */
    text-align: center;
    /* Pusatkan konten iklan */
}

.dynamic-ad {
    margin-bottom: 15px;
    /* Jarak antar iklan */
    /* Tambahkan border atau shadow jika diinginkan */
    /* border: 1px solid #ddd; */
    /* border-radius: 0.5rem; */
    /* overflow: hidden; */
}

.dynamic-ad img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Menghilangkan spasi ekstra di bawah gambar */
    margin: 0 auto;
    /* Pusatkan gambar */
}

/* Gaya untuk Berita Terbaru di Sidebar */
.latest-news-item {
    align-items: flex-start;
    /* Pastikan item sejajar dari atas */
}

.latest-news-thumb {
    width: 60px;
    /* Lebar thumbnail kecil */
    height: 60px;
    /* Tinggi thumbnail kecil */
    object-fit: cover;
    /* Memastikan gambar terpotong rapi */
    flex-shrink: 0;
    /* Jangan biarkan gambar menyusut */
}

.latest-news-item h6 {
    line-height: 1.3;
    /* Sesuaikan tinggi baris untuk judul */
}

.latest-news-item h6 a {
    font-size: 0.95rem;
    /* Ukuran font judul berita terbaru */
    font-weight: 500;
}

.latest-news-item small {
    font-size: 0.8rem;
    /* Ukuran font tanggal */
}

/* Gaya untuk Berita Populer di Sidebar */
.popular-news-card .card-body {
    background-color: #f8f9fa;
    /* Background abu muda untuk card body berita populer */
}

.popular-news-item {
    align-items: flex-start;
    /* Pastikan item sejajar dari atas */
    padding: 5px;
    /* Padding di sekitar setiap item */
    border-radius: 0.25rem;
    /* Sudut membulat untuk item */
    transition: background-color 0.2s ease-in-out;
    /* Efek hover halus */
}

.popular-news-item:hover {
    background-color: #e9ecef;
    /* Warna abu-abu lebih gelap saat hover */
}

.popular-news-thumb {
    width: 60px;
    /* Lebar thumbnail kecil */
    height: 60px;
    /* Tinggi thumbnail kecil */
    object-fit: cover;
    /* Memastikan gambar terpotong rapi */
    flex-shrink: 0;
    /* Jangan biarkan gambar menyusut */
}

.popular-news-item h6 {
    line-height: 1.3;
    /* Sesuaikan tinggi baris untuk judul */
}

.popular-news-item h6 a {
    font-size: 0.95rem;
    /* Ukuran font judul berita populer */
    font-weight: 500;
}

.popular-news-item small {
    font-size: 0.8rem;
    /* Ukuran font tanggal */
}

/* Gaya untuk Kategori di Sidebar */
.category-grid {
    display: grid;
    /* Mengurangi minmax agar lebih fleksibel dan bisa lebih kecil */
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    /* Kolom responsif, min 80px */
    gap: 10px;
    /* Jarak antar kartu */
    padding: 15px;
    /* Padding di dalam card-body */
}

.category-card {
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    text-align: center;
    display: flex;
    /* Untuk memusatkan konten vertikal */
    align-items: center;
    justify-content: center;
    /* Menghilangkan min-height agar tinggi kartu menyesuaikan konten */
    /* min-height: 80px; */
}

.category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.category-card .card-title {
    font-size: 0.9rem;
    /* Ukuran font judul kategori */
    font-weight: bold;
    color: #fff;
    /* Warna teks putih agar kontras dengan background warna-warni */
    word-break: break-word;
    /* Memastikan teks panjang pecah baris */
}

/* Warna-warna acak untuk kategori */
.bg-category-1 {
    background-color: #4CAF50;
}

/* Green */
.bg-category-2 {
    background-color: #2196F3;
}

/* Blue */
.bg-category-3 {
    background-color: #FFC107;
}

/* Amber */
.bg-category-4 {
    background-color: #9C27B0;
}

/* Purple */
.bg-category-5 {
    background-color: #FF5722;
}

/* Deep Orange */
.bg-category-6 {
    background-color: #00BCD4;
}

/* Cyan */
.bg-category-7 {
    background-color: #E91E63;
}

/* Pink */

/* Gaya untuk Tombol Bagikan */
.share-buttons {
    display: flex;
    flex-wrap: wrap;
    /* Memungkinkan tombol pecah baris di layar kecil */
    gap: 8px;
    /* Jarak antar tombol */
    margin-bottom: 15px;
}

.btn-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    /* Lebar dan tinggi tetap untuk bentuk bulat */
    height: 40px;
    padding: 0;
    /* Hapus padding agar ikon mengisi ruang */
    border-radius: 50%;
    /* Membuat tombol bulat */
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
}

.btn-share i {
    font-size: 1.2em;
    /* Ukuran ikon yang lebih besar */
    margin-right: 0;
    /* Hapus margin kanan ikon */
    display: inline-block;
    /* Pastikan ikon terlihat sebagai blok inline */
}

.btn-share.btn-facebook {
    background-color: #1877F2;
    /* Warna Facebook */
}

.btn-share.btn-facebook:hover {
    background-color: #166FE5;
    transform: translateY(-2px);
}

.btn-share.btn-x {
    background-color: #000000;
    /* Warna X (Twitter baru) */
}

.btn-share.btn-x:hover {
    background-color: #333333;
    transform: translateY(-2px);
}

.btn-share.btn-whatsapp {
    background-color: #25D366;
    /* Warna WhatsApp */
}

.btn-share.btn-whatsapp:hover {
    background-color: #1DA851;
    transform: translateY(-2px);
}

/* Penyesuaian untuk layar mobile/ponsel */
@media (max-width: 767.98px) {

    /* Untuk semua ukuran di bawah tablet */
    .share-buttons {
        justify-content: flex-start;
        /* Sejajakkan ke kiri */
        gap: 10px;
        /* Jarak antar tombol */
        margin-left: 0;
        /* Pastikan tidak ada margin kiri yang aneh */
        margin-right: 0;
    }

    .btn-share {
        width: 45px;
        /* Sedikit lebih besar di mobile agar mudah disentuh */
        height: 45px;
    }

    .btn-share i {
        font-size: 1.5em;
        /* Ikon lebih besar di mobile */
    }
}

/* Gaya untuk Iklan di dalam Artikel */
.in-article-ad {
    /* Hapus border, padding, dan rounded */
    /* border: none; */
    /* padding: 0; */
    /* border-radius: 0; */
    /* box-shadow: none; */
    /* Pastikan margin vertikal tetap ada jika diinginkan */
    margin-top: 1.5rem;
    /* Contoh margin atas */
    margin-bottom: 1.5rem;
    /* Contoh margin bawah */
    /* Pastikan konten di dalamnya tetap di tengah */
    text-align: center;
}