/* ======================================================= */
/* 1. KODE DARI PENGGUNA (PENYESUAIAN NAVBAR, GAMBAR & JUDUL) */
/* ======================================================= */

.navbar-brand{
    height:auto !important;
    padding:0px;
}

.navbar-brand img{
    width:100%;
}

.container-fluid>.navbar-header{
    margin-right:0;
    margin-left:0;
}

.media:first-child{
    margin-top: 2em;
}

.journals .media-list .media .media-left img{
    /* Penyesuaian: Mengurangi margin agar tidak memakan ruang horizontal terlalu banyak */
    border: 1px solid #ccc;
    box-shadow: 8px 9px 6px -6px black;
    margin: 0px; 
}

h3.media-title{
    font-size:20px;
    padding-bottom:10px;
    margin-bottom:10px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.desc100{
    height: 135px;
    overflow: hidden;
}

/* ======================================================= */
/* 2. KODE FLEXBOX UNTUK 2 KOLOM (DIPERTAHANKAN)            */
/* ======================================================= */

.media-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; 
    padding: 0;
    list-style: none;
}

.media-list .media {
    width: calc(50% - 10px); 
    box-sizing: border-box;
    margin-bottom: 20px; 
    border: 1px solid #eee; 
    padding: 15px;
    display: flex; /* Flexbox diterapkan di sini */
    flex-direction: row; 
    align-items: flex-start; 
}

/* Penyesuaian Responsif (untuk layar kecil/ponsel) */
@media (max-width: 768px) {
    .media-list .media {
        width: 100%;
        margin-bottom: 15px;
        padding: 10px;
        flex-direction: column; /* Ubah ke 1 kolom vertikal untuk mobile */
    }
}


/* ======================================================= */
/* 3. SOLUSI UNTUK MELEBARKAN AREA TEKS                     */
/* ======================================================= */

/* Mengurangi lebar container cover (media-left) */
.media-list .media .media-left {
    /* Mengurangi lebar cover agar teks mendapat lebih banyak ruang */
    width: 100px; /* Nilai default Bootstrap biasanya 64px, kita coba 100px */
    flex-shrink: 0; /* Pastikan tidak mengecil saat ruang terbatas */
    margin-right: 10px; /* Mengurangi jarak antara cover dan teks */
}

/* Memastikan gambar di dalamnya sesuai lebar container */
.media-list .media .media-left img {
    width: 100%;
    height: auto;
    display: block;
}

/* Memberi ruang penuh pada teks (media-body) */
.media-list .media .media-body {
    /* Memastikan area teks mengisi sisa ruang yang ada */
    width: auto;
    flex-grow: 1; /* Biarkan mengisi ruang yang tersisa */
}

/* Penyesuaian Responsif untuk elemen internal di mobile */
@media (max-width: 768px) {
    .media-list .media .media-left {
        /* Kembali ke layout normal di mobile */
        width: 150px; /* Contoh: Lebarkan sedikit di mobile */
        margin: 0 auto 10px auto; /* Pusatkan gambar */
    }
    .media-list .media .media-body {
        width: 100%;
    }
}

/* Memperlebar tag <dl> (list deskripsi) jika ini yang menyebabkan pemotongan */
.media-list .media .media-body dl {
    /* Pastikan daftar definisi/deskripsi tidak memiliki lebar terbatas */
    margin: 0;
    padding: 0;
}
/* Menyesuaikan jarak antara istilah dan deskripsi di list jurnal */
.media-list .media .media-body dd {
    margin-left: 0; /* Hapus margin default jika ada */
}

/* Penyesuaian lebar kolom di dalam list deskripsi (jika menggunakan <dl>) */
/* Catatan: Di OJS, seringkali list ini adalah <dl> dengan <dt> dan <dd> */
.media-list .media .media-body dt {
    /* Pastikan istilah (misalnya "Jurnal title:") tidak terlalu panjang */
    width: 120px; /* Sesuaikan lebar ini. Coba perlebar jika masih terpotong */
    float: left;
    clear: left;
    font-weight: bold;
    margin-right: 5px;
}
.media-list .media .media-body dd {
    /* Biarkan deskripsi (misalnya "JURNAL BIOSAINSTEK") mengisi sisa baris */
    margin-left: 130px; /* Harus lebih besar dari lebar dt */
}