/* ================================================= */
/* == EFEK HOVER GAMBAR UNTUK KARTU ARTIKEL & BERITA == */
/* ================================================= */

/* Container untuk efek hover (berlaku untuk .course dan .item) */
.course .image,
.item .image {
    height: 250px;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    background-color: #f0f0f0;
}

/* Gambar di dalam container */
.course .image img,
.item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-out;
}

/* Efek zoom saat hover */
.course .image:hover img,
.item .image:hover img {
    transform: scale(1.1);
}


/* ============================================================== */
/* == STYLE UNTUK NAVIGASI PREVIOUS/NEXT POST DI HALAMAN ARTIKEL == */
/* ============================================================== */

/* Container utama (menggunakan Flexbox untuk perataan) */
.blog_newest {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Blok teks (dibuat fleksibel agar mengisi ruang) */
.blog_newest .text {
    flex-grow: 1;
}

/* Bingkai gambar thumbnail */
.blog_newest .post_img {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    vertical-align: middle;
    flex-shrink: 0; /* Mencegah gambar 'gepeng' jika ruang sempit */
}

/* Gambar di dalam bingkai thumbnail */
.blog_newest .post_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Memberi jarak antara teks dan gambar */
.blog_newest.text-left .post_img {
    margin-right: 15px; /* Jarak untuk Previous Post (gambar di kiri) */
}

.blog_newest.text-right .post_img {
    margin-left: 15px;  /* Jarak untuk Next Post (gambar di kanan) */
}