/* Rumah Jurnal UIN Jambi
Upgrade and Custom by : Ahmad Nasukha */
/* 1. CSS Kustom untuk Daftar Jurnal di Homepage */

/* Container utama untuk daftar jurnal - DIBUAT JADI 2 KOLOM untuk DESKTOP */
@import url('https://fonts.googleapis.com/css?family=Sunflower:300');
html, body, * {font-family: Sunflower, helvetica, calibri; }
html, body {background-image: url(https://www.toptal.com/designers/subtlepatterns/uploads/webb.png);}

/* Primary Navigation (navigasi menu) */
.pkp_navigation_primary_row {
  background:linear-gradient(to bottom, #fff 0%, #f3f3f3 50%, #ededed 51%, #fff 100%);
  padding-left:20px;
  font-size:1.12em;
  padding-top:5px;
  border-top:1px solid #eaeaea;
  border-left:1px solid #eaeaea;
  border-right:1px solid #eaeaea;
  position:relative;
  height:46px
}
#navigationPrimary a {
  font-family:"Baloo Tamma 2",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
  font-size:.93rem;
  font-weight:700;
  text-transform:uppercase
}
#navigationPrimary>li>a {
  padding-bottom:6px
}
#navigationPrimary>li>a:hover,
#navigationPrimary>li>a:focus {
  border:unset;
  background-color:transparent
}
#navigationPrimary>[aria-haspopup]>a:hover,
#navigationPrimary>[aria-haspopup]>a:focus {
  border-color:transparent
}
#navigationPrimary [aria-expanded="true"]:before {
  border-bottom-color:#1e6292;
}
@media (min-width:992px) {
  #navigationPrimary a {
    color:rgba(0,0,0,0.54)
  }
  #navigationPrimary a:hover,
  #navigationPrimary a:focus {
    color:#1e6292
  }
  #navigationPrimary ul {
    background:#3d7e6a !important
  }
  #navigationPrimary ul a {
    color:#fff
  }
  #navigationPrimary ul a:hover,
  #navigationPrimary ul a:focus {
    border-color:transparent
  }
}
/* ldsafds */
.page_index_site .journals > ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 15px;
    display: grid; /* Mengaktifkan CSS Grid */
    grid-template-columns: repeat(2, 1fr); /* Membuat 2 kolom dengan lebar yang sama */
    gap: 15px; /* Jarak antar kartu jurnal (antar kolom dan antar baris) */
}

/* Style untuk setiap item jurnal (<li>) - Tampilan Desktop */
.page_index_site .journals > ul > li {
    display: flex; /* Mengatur thumbnail dan detail bersebelahan */
    flex-wrap: nowrap; /* Agar tidak wrap jika tidak perlu di dalam kartu */
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s ease;
    overflow: hidden; /* Mencegah konten anak meluber */
}

.page_index_site .journals > ul > li:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}

/* Style untuk bagian thumbnail - Tampilan Desktop */
.page_index_site .journals > ul > li .thumb {
    flex: 0 0 160px; /* Lebar area thumbnail desktop */
    margin-right: 8px; /* Jarak thumbnail dengan detail di desktop */
}

.page_index_site .journals > ul > li .thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 2/2.8;
    object-fit: cover;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    /* TRANSISI UNTUK ANIMASI HALUS */
    /* Kita akan menganimasikan transform (untuk skala & angkat) dan border-color */
    transition: transform 0.3s ease-out, border-color 0.3s ease-out;
}

/* Efek hover kombinasi pada gambar thumbnail */
.page_index_site .journals > ul > li .thumb img:hover {
    transform: scale(1.05) translateY(-5px); /* Membesar 5% dan terangkat 5px ke atas */

    /* GANTI #KODE_WARNA_PRIMER_UIN_JAMBI dengan warna primer Anda */
    border-color: #007bff; /* Contoh warna biru, ganti dengan warna primer UIN Jambi Anda */

    /* Opsional: Anda bisa menambahkan sedikit box-shadow langsung ke gambar jika diinginkan,
       tapi hati-hati agar tidak terlalu ramai karena kartu <li> mungkin sudah punya shadow.
       Contoh: box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    */
}

/* Style untuk bagian detail jurnal (body) - Tampilan Desktop */
.page_index_site .journals > ul > li .body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.page_index_site .journals > ul > li .body h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
    line-height: 1.3;
    word-break: break-word;
}

.page_index_site .journals > ul > li .body h3 a {
    text-decoration: none;
}

.page_index_site .journals > ul > li .body .description {
    font-size: 0.8em; /* Ukuran font deskripsi sudah dikecilkan */
    color: #555555;
    text-align: justify; /* Deskripsi dibuat rata kiri-kanan untuk keterbacaan */
    line-height: 1.3;
    margin-bottom: 10px;
    flex-grow: 1;
    word-break: break-word;
}

/* Style untuk daftar link (Tombol View Journal & Current Issue) - Tampilan Desktop */
.page_index_site .journals > ul > li .body ul.links {
    list-style-type: none;
    padding-left: 0;
    margin-top: auto;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center; /* Tombol di tengah (horizontal) di dalam .body */
}

.page_index_site .journals > ul > li .body ul.links li {
    /* Aturan spesifik untuk <li> pembungkus tombol jika ada */
}

.page_index_site .journals > ul > li .body ul.links li a {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
    border: none;
}

.page_index_site .journals > ul > li .body ul.links li a:active {
    transform: translateY(1px);
}

/* Style spesifik untuk tombol "View Journal" - Tampilan Desktop */
.page_index_site .journals > ul > li .body ul.links li.view a {
    background-color: #007bff; /* GANTI DENGAN WARNA PRIMER UIN JAMBI */
    color: white;
    box-shadow: 0 3px 0 #0056b3; /* GANTI DENGAN VERSI LEBIH GELAP DARI WARNA PRIMER */
}
.page_index_site .journals > ul > li .body ul.links li.view a:hover {
    background-color: #0056b3; /* GANTI DENGAN WARNA PRIMER UIN JAMBI (LEBIH GELAP) */
}
.page_index_site .journals > ul > li .body ul.links li.view a:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #0056b3; /* GANTI DENGAN VERSI LEBIH GELAP DARI WARNA PRIMER */
    background-color: #0056b3;
}

/* Style spesifik untuk tombol "Current Issue" - Tampilan Desktop */
.page_index_site .journals > ul > li .body ul.links li.current a {
    background-color: #6c757d; /* Warna sekunder atau abu-abu */
    color: white;
    box-shadow: 0 3px 0 #545b62; /* VERSI LEBIH GELAP DARI WARNA BACKGROUND TOMBOL INI */
}
.page_index_site .journals > ul > li .body ul.links li.current a:hover {
    background-color: #545b62; /* Warna sekunder atau abu-abu (lebih gelap) */
}
.page_index_site .journals > ul > li .body ul.links li.current a:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #545b62; /* VERSI LEBIH GELAP DARI WARNA BACKGROUND TOMBOL INI */
    background-color: #545b62;
}

/* Aturan untuk layar besar (jika diperlukan, ini dari CSS Anda sebelumnya) */
@media (min-width: 992px) {
  .pkp_page_index .journals > ul > li { /* Perhatikan class .pkp_page_index, mungkin perlu disamakan dengan .page_index_site jika itu yang utama */
    margin: 0 0rem; /* 0rem tidak ada efek, bisa dihapus atau diberi nilai */
    padding: 0.8rem; /* Ini akan menimpa padding 20px di atas untuk layar >= 992px */
  }
}
.pkp_page_index .journals .thumb {
    padding-right:0.6rem
  }
@media (min-width:720px) {
  .pkp_page_index .journals> ul > li {
    margin:0px 0rem;
    padding:1.43rem;
    border-top:1px solid #ddd
  }
}
/* === Penyesuaian untuk Tampilan Mobile (Layar Kecil) === */
@media (max-width: 768px) {
    /* Daftar jurnal menjadi 1 kolom dan ada padding di sisi kiri-kanan */
    .page_index_site .journals > ul {
        grid-template-columns: 1fr; /* Membuat 1 kolom */
        gap: 15px; /* Jarak vertikal antar kartu di mobile */
        padding-left: 15px;  /* Jarak dari tepi kiri layar ke seluruh daftar */
        padding-right: 15px; /* Jarak dari tepi kanan layar ke seluruh daftar */
    }

    /* Setiap item jurnal (kartu) di mobile */
    .page_index_site .journals > ul > li {
        flex-direction: column; /* Konten di dalam kartu (thumbnail & body) tersusun vertikal */
        align-items: center; /* Semua konten di dalam kartu akan terpusat secara horizontal */
        /* padding: 15px; */ /* Anda bisa sesuaikan padding kartu untuk mobile jika perlu */
    }

    /* Thumbnail di mobile */
    .page_index_site .journals > ul > li .thumb {
        flex-basis: auto; /* Lebar mengikuti konten atau diatur di bawah */
        width: 180px; /* Lebar thumbnail di mobile, bisa disesuaikan (misal: 60% atau 200px) */
        max-width: 100%; /* Pastikan tidak lebih lebar dari kartu */
        margin-right: 0; /* Hapus margin kanan karena sudah vertikal */
        margin-bottom: 10px; /* Jarak thumbnail ke detail body di bawahnya */
    }

    /* Bagian body (detail teks & tombol) di mobile */
    .page_index_site .journals > ul > li .body {
        align-items: center; /* Anak elemen dari .body (h3, .description, ul.links) juga terpusat */
        text-align: center; /* Teks di dalam .body jadi rata tengah */
        width: 100%; /* .body mengambil lebar penuh kartu */
    }

    /* Judul jurnal di mobile */
    .page_index_site .journals > ul > li .body h3 {
        font-size: 1.2em; /* Ukuran font judul sedikit lebih besar di mobile dari sebelumnya */
        /* text-align: center; sudah diatur oleh parent .body */
    }

    /* Deskripsi jurnal di mobile */
    .page_index_site .journals > ul > li .body .description {
        text-align: justify; /* Deskripsi dibuat rata kiri-kanan untuk keterbacaan */
        margin-bottom: 15px; /* Jarak ke tombol disesuaikan dari sebelumnya */
        /* max-width: 90%; */ /* Opsional: jika ingin deskripsi tidak terlalu lebar di tengah */
        /* margin-left: auto; */ /* Opsional: untuk tengahkan jika max-width diset */
        /* margin-right: auto; */ /* Opsional: untuk tengahkan jika max-width diset */
    }

    /* Wadah tombol-tombol di mobile */
    .page_index_site .journals > ul > li .body ul.links {
        flex-direction: column; /* Tombol-tombol bertumpuk vertikal */
        gap: 10px; /* Jarak antar tombol yang bertumpuk */
        width: 100%; /* Wadah tombol mengambil lebar penuh */
        /* align-items: center; */ /* Sudah diatur oleh parent .body */
    }

    /* Setiap item <li> pembungkus tombol di mobile */
    .page_index_site .journals > ul > li .body ul.links li {
        width: 100%; /* Membuat setiap <li> pembungkus tombol mengambil lebar penuh */
        /* margin: 0; */ /* Margin sudah diatur oleh 'gap' pada parent ul.links */
    }
    
    /* Tombol (link <a>) di mobile */
    .page_index_site .journals > ul > li .body ul.links li a {
        width: 100%; /* Membuat link tombolnya full-width */
        box-sizing: border-box; /* Agar padding tidak menambah lebar keluar dari 100% */
        /* padding: 8px 15px; */ /* Anda bisa sesuaikan padding tombol di mobile jika perlu */
    }
}
/* footer */
.pkp_structure_footer .pkp_footer_content {background: #f0f8fb; padding: 10px !important;}
.pkp_structure_footer .pkp_footer_content p {margin: 0}
.pkp_structure_footer .pkp_brand_footer {background:linear-gradient(135deg, #efba5f 7%, #efba5f 3%, #efba5f 3%, #efba5f 12%, #efba5f 54%, #ad6f03 85%, #623f02 120%); height: auto !important; padding: 0;}
.pkp_structure_footer .pkp_brand_footer img {width: 48px !important; height: auto;}

.pkp_structure_footer .pkp_footer_content img {width: 88px; height:31px;}
.pkp_structure_footer .pkp_footer_content div.logo img{width: 65px; height:65px;}
.pkp_structure_footer .pkp_footer_content div.logo2 img{width: 88px; height:31px;}

html, body, * {
    font-family: "Noto Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !important; 
}
.fa {
    font: normal normal normal 14px / 1 FontAwesome !important;
}