/* =========================================================
CSS Styling: SIDEBAR MENU OJS CUSTOM - FINAL FULL CODE
========================================================= */

:root {
    /* Warna Dasar */
    --color-hitam: #000000;
    --color-custom-hijau: #2D0505; 
    /* WARNA TEKS BARU: #6198ad */
    --color-text-dark: #783136; 
    --color-text-light: #ffffff;
    --color-bg-main: #ffffff; 
    --color-bg-light: #f7f7f7;
    --color-border-gray: #e0e0e0; 
    --border-radius-main: 0px; 
    --group-margin-bottom: 25px;
    
    /* Warna Merah untuk Submission */
    --color-red-main: #d90f0f; 
    --color-red-hover: #b20c0c; 

    /* NILAI PENGURANGAN TINGGI */
    --padding-horizontal: 30px; 
    /* PERMINTAAN 1: Padding Vertikal menjadi 6px */
    --padding-vertical: 6px; 
    
    --padding-header: var(--padding-vertical) var(--padding-horizontal); 
    --padding-bar: var(--padding-vertical) var(--padding-horizontal); 
    
    --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.05); 
}

body {
    font-family: 'Montserrat', sans-serif;
}

/* Container utama menu */
.menu-container {
    width: 100%;
    max-width: 400px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* --- Struktur Grup Menu --- */
.menu-group {
    margin-bottom: var(--group-margin-bottom);
    border-radius: var(--border-radius-main); 
    background-color: var(--color-bg-main);
    box-shadow: var(--shadow-light); 
    overflow: hidden;
}

/* KHUSUS GRUP 1: Hapus background putih */
.menu-group:nth-child(1) {
    background-color: transparent;
    box-shadow: none;
}

/* === Make a Submission (MERAH) === */
.menu-group-header.submission-header {
    background-color: var(--color-red-main);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex; 
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease; 
}

/* ATURAN HOVER/ACTIVE (Warna Gelap) */
.menu-group-header.submission-header:hover,
.menu-group-header.submission-header:active {
    background-color: var(--color-red-hover); 
}

/* Ikon Panah di Make a Submission menjadi Putih */
.menu-group-header.submission-header .action-icon {
    color: var(--color-text-light) !important; 
    display: inline-block !important; 
}

/* ATURAN UNTUK MEMASTIKAN TEKS LINK JUGA PUTIH */
.menu-group-header.submission-header a {
    color: var(--color-text-light) !important; 
    text-decoration: none; 
}


/* Header Lainnya */
.menu-group-header {
    background-color: var(--color-custom-hijau); 
    color: var(--color-text-light);
    padding: var(--padding-header); /* MENGGUNAKAN 6px */
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    box-shadow: var(--shadow-light); 
    position: relative;
    z-index: 5;
    display: flex; 
    justify-content: space-between;
    align-items: center;
}

/* LIST WRAPPER */
.menu-list-wrapper {
    background-color: var(--color-bg-main); 
    /* Padding vertikal diperkecil untuk jarak antar grup yang rapat */
    padding: 5px 0; 
}

/* KHUSUS GRUP 1: Hapus background putih pada wrapper list */
.menu-group:nth-child(1) .menu-list-wrapper {    
    background-color: transparent;
}
/* MODIFIKASI: Grup 6 dan 7 tidak lagi memerlukan penyesuaian padding khusus di sini */
.menu-group:nth-child(6) .menu-list-wrapper { 
    background-color: transparent;
    padding: 0; 
    /* PENAMBAHAN: Rata tengah semua konten di wrapper collaboration */
    text-align: center; 
}
.menu-group:nth-child(7) .menu-list-wrapper { 
    background-color: transparent;
    padding: 15px 0; 
    /* PENAMBAHAN: Rata tengah semua konten di wrapper visitor */
    text-align: center; 
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    /* PENAMBAHAN: Rata tengah untuk semua item list di Visitor */
    text-align: center; 
}

/* PERMINTAAN 2: ITEM LIST - Margin atas/bawah 0 untuk jarak rapat */
.menu-list li {
    border: none;
    margin: 0; 
    overflow: hidden; 
    border-radius: 0;
    background-color: var(--color-bg-main); 
    box-shadow: none; 
    /* Pastikan list item Visitor juga rata tengah */
    text-align: center; 
}

/* Styling khusus untuk item list Accreditation */
.menu-group:nth-child(1) .accreditation-item {
    background-color: transparent !important;
    text-align: center;
}

.menu-group:nth-child(1) .accreditation-item img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
}

/* PERMINTAAN 1, 4, 5: LIST ITEM BAR */
.menu-bar {
    position: relative;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: var(--padding-bar); /* MENGGUNAKAN 6px */
    text-decoration: none;
    color: var(--color-text-dark); /* Warna teks #6198ad */
    font-weight: 500;
    font-size: 0.95em;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    transition: none; 
    background-color: transparent;
    text-transform: none;
    border-bottom: none !important; 
}

.menu-bar.action-bar {
    align-items: center; 
}

/* Ikon Panah pada List Item */
.action-icon {
    font-size: 1em; 
    margin-left: 10px;
    color: var(--color-text-dark); /* Warna ikon #6198ad */ 
    display: inline-block; 
    visibility: visible; 
}

/* PERMINTAAN 4: EISSN (Teks hitam, angka #6198ad) */
.menu-bar.no-swipe {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: var(--color-hitam); /* Warna teks "EISSN online" dibuat hitam */
    font-weight: 500;
    padding: var(--padding-bar); 
    
    display: block; 
    text-align: left; 
}

/* Warna angka EISSN */
.menu-bar.no-swipe a {
    pointer-events: auto; 
    color: var(--color-text-dark); /* Warna angka dibuat #6198ad */
    font-weight: 500; 
    text-decoration: none; 
    display: inline; 
}

/* === GARIS PEMBATAS PUTUS-PUTUS (Tepat di bawah list item karena margin 0) === */
.menu-group:not(:nth-child(1)):not(:nth-child(6)):not(:nth-child(7)) .menu-bar::after {
    content: '';
    position: absolute;
    bottom: 0; 
    left: var(--padding-horizontal); 
    width: calc(100% - (2 * var(--padding-horizontal))); 
    height: 1px;
    
    border-bottom: 1px dashed var(--color-border-gray);
    background-color: transparent; 

    z-index: 2; 
    display: block; 
    transition: opacity 0.3s ease; 
}

.menu-group:not(:nth-child(1)):not(:nth-child(6)):not(:nth-child(7)) .menu-list li:last-child .menu-bar::after {
    display: none;
}

/* LOGIC: HILANGKAN GARIS PEMBATAS SAAT HOVER */
.menu-group:not(:nth-child(1)):not(:nth-child(6)):not(:nth-child(7)) .menu-bar:hover::after { 
    opacity: 0; 
    border: none; 
}

/* --- Efek Swipe ON HOVER --- */
.menu-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; 
    background: var(--color-hitam);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); 
}

.menu-bar:hover:not(.no-swipe) {
    color: var(--color-text-light); 
    font-weight: 600;
}

.menu-bar:hover:not(.no-swipe)::before {
    transform: translateX(0); 
}

.menu-bar:hover:not(.no-swipe) .action-icon {
    color: var(--color-text-light); 
}

/* =========================================== */
/* --- STYLING COLLABORATION (Grup 6) --- */
/* =========================================== */
.logo-container {
    display: flex;
    flex-wrap: wrap; 
    /* PERUBAHAN: Rata Tengah */
    justify-content: center; 
    
    gap: 0; 
    padding: 15px var(--padding-horizontal); 
}

.logo-item {
    /* PERUBAHAN: Item Rata Tengah */
    width: 100%; 
    height: auto; 
    max-width: 100%; 
    margin-bottom: 15px; 
    display: flex;
    flex-direction: column;
    /* Dipastikan rata tengah secara horizontal */
    align-items: center; 
    justify-content: center;
    /* Dipastikan teks (jika ada) rata tengah */
    text-align: center; 
    background-color: var(--color-bg-main);
    border: none; 
    box-shadow: none; 
    border-radius: 0px; 
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.logo-container .logo-item:last-child {
    margin-bottom: 0;
}


.logo {
    /* Aturan umum untuk gambar Collaboration */
    max-width: 80%;
    max-height: 80px;
    height: auto;
    /* Untuk centering gambar di dalam item */
    margin: 0 auto;
    margin-bottom: 0px; 
    transition: transform 0.3s ease;
}

/* PERMINTAAN: Menyesuaikan ukuran gambar ketiga (Kopertais 4) */
.menu-group:nth-child(6) .logo-item:nth-child(3) .logo {
    max-width: 60%; 
    max-height: 50px; 
}

.logo-item:hover .logo {
    transform: scale(1.1);
}

/* =========================================== */
/* --- STYLING VISITORS (Grup 7 - Flag Counter) --- */
/* =========================================== */

/* PENAMBAHAN: Wrapper Visitor sudah diatur text-align: center di .menu-list-wrapper */

.menu-group:nth-child(7) .menu-list li {
    background-color: transparent !important;
    /* PERUBAHAN: List Item Visitor Rata Tengah */
    text-align: center; 
    display: block; /* Pastikan <li> berperilaku seperti block untuk centering */
}

.menu-group:nth-child(7) .menu-bar {
    /* PENYESUAIAN: Pastikan link atau teks rata tengah */
    justify-content: center; 
    display: block; 
    padding: 5px var(--padding-horizontal); 
    text-align: center; /* Rata tengah untuk teks link */
}

/* StatCounter Link padding normal */
.menu-group:nth-child(7) .menu-list li:nth-child(2) .menu-bar { 
    padding: var(--padding-vertical) var(--padding-horizontal); 
}

.menu-group:nth-child(7) .menu-bar img {
    /* PENYESUAIAN: Centering gambar di dalam link */
    display: inline-block; 
    margin: 0 auto; 
}

/* Menonaktifkan Swipe Khusus Grup 7 (VISITOR) */
.menu-group:nth-child(7) .menu-bar:hover::before {
    transform: translateX(100%) !important; 
}

.menu-group:nth-child(7) .menu-bar:hover {
    color: var(--color-text-dark) !important; 
    font-weight: 500 !important; 
    background-color: transparent !important; 
}

.menu-group:nth-child(7) .menu-bar:hover .action-icon {
    color: var(--color-text-dark) !important;
}

.menu-group:nth-child(7) .menu-list li:nth-child(2) .menu-bar { 
    justify-content: center; 
    font-size: 0.95em;
    text-decoration: none; 
    color: var(--color-text-dark); 
}

.menu-group:nth-child(7) .menu-list li:nth-child(2) .menu-bar:hover {
    color: var(--color-text-dark) !important; 
    text-decoration: none; 
}

.logo-item img:not(.logo) { 
    max-width: 100%; 
    max-height: 100%;
    object-fit: contain;
}

/* 1. Import font Montserrat dari Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

/* 2. Terapkan ke seluruh elemen teks */
html, body, p, a, li, span, h1, h2, h3, h4, h5, h6, input, button, select, textarea {
    font-family: 'Montserrat', sans-serif !important;
}

/* 3. Kecualikan elemen yang menggunakan Font Icon agar tidak berubah jadi kotak-kotak */
[class^="fa-"], [class*=" fa-"], 
[class^="glyphicon-"], [class*=" glyphicon-"], 
.font-awesome, 
.fa, 
.fas, 
.far, 
.fab,
.pkp_icon,
[data-icon]:before {
    font-family: 'FontAwesome', 'font-family-icon-ojs', sans-serif !important;
}

/* Khusus untuk tombol search agar ikonnya tetap aman */
button.search_button, 
button[type="submit"] i,
.pkp_search .search_controls button:before {
    font-family: "FontAwesome" !important;
}
body {
	font-family: "Montserrat";
}
/*CONTENT SECTION*/
a.title{
	font-weight:normal; 
	text-decoration:none; 
	font-size:normal 
	font-family: "Montserrat";
	line-height:0px; 
	padding:0px;
}
p{
	padding:0px;
	text-align:justify;!important
	font-family: "Montserrat";!important
}
.pkp_brand_footer {
    display: none !important;
}
/* Membuat seluruh isi (teks, tautan, logo) di footer OJS menjadi rata tengah */
.pkp_structure_footer {
    text-align: center !important;
}

/* Tambahan: Memastikan paragraf dan list di dalam footer juga rata tengah */
.pkp_structure_footer p,
.pkp_structure_footer li {
    text-align: center !important;
}

/* Jika footer menggunakan layout flexbox, ini mungkin membantu meratakan item */
.pkp_structure_footer .pkp_footer_content {
    justify-content: center;
    align-items: center;
}
/* 1. Rata Kiri untuk Semua Teks di Sidebar */
/* Menargetkan kontainer utama sidebar dan semua elemen teks di dalamnya */
.pkp_structure_sidebar,
.pkp_structure_sidebar * {
    text-align: left !important;
}

/* 2. Rata Kiri untuk Gambar dan Elemen Blok di Sidebar */
/* Ini penting untuk mengatasi masalah gambar yang mungkin rata tengah karena margin: auto */
.pkp_structure_sidebar img {
    display: block; /* Memastikan gambar berperilaku sebagai elemen blok */
    margin-left: 0 !important; /* Mengatur margin kiri menjadi 0 */
    margin-right: auto !important; /* Mengatur margin kanan agar gambar merapat ke kiri */
    float: none !important; /* Menghapus float yang mungkin menyebabkan tata letak ganjil */
}

/* 3. Rata Kiri Khusus untuk Daftar dan Judul Sidebar */
.pkp_sidebar_block h2,
.pkp_nav_list, 
.pkp_nav_list li {
    text-align: left !important;
}
/* Menghilangkan garis bawah (underline) pada semua tautan (link) di seluruh halaman OJS */
a {
    text-decoration: none !important;
}

/* Opsional: Mengembalikan garis bawah hanya saat mouse diarahkan ke tautan (hover) */
/* Ini memberikan feedback visual bahwa elemen tersebut bisa diklik */
a:hover,
a:focus {
    text-decoration: underline !important;
}
*,*:before,*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
/* CSS untuk menghapus garis bawah (underline) pada semua tautan/teks yang diklik di OJS */

a,
a:link,
a:visited,
a:hover,
a:active,
.pkp_nav_list li a,
.pkp_nav_list li a:hover,
.obj_article_summary .title a,
.obj_article_details .title {
    /* Menghapus dekorasi teks, termasuk garis bawah */
    text-decoration: none !important;
}

/* Opsional: Jika Anda ingin tautan (link) tetap memiliki garis bawah 
   ketika pengguna mengarahkan kursor (hover), Anda bisa menggunakan ini: */
/*
a:hover,
.pkp_nav_list li a:hover,
.obj_article_summary .title a:hover {
    text-decoration: underline !important;
}
*/
@keyframes pkp_spin {
    0% {
        transform: rotateZ(-360deg);
        -webkit-transform: rotateZ(-360deg);
        -moz-transform: rotateZ(-360deg);
        -o-transform: rotateZ(-360deg)
    }

    100% {
        transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg)
    }
}

@-webkit-keyframes pkp_spin {
    0% {
        transform: rotateZ(-360deg);
        -webkit-transform: rotateZ(-360deg);
        -moz-transform: rotateZ(-360deg);
        -o-transform: rotateZ(-360deg)
    }

    100% {
        transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg)
    }
}

@-moz-keyframes pkp_spin {
    0% {
        transform: rotateZ(-360deg);
        -webkit-transform: rotateZ(-360deg);
        -moz-transform: rotateZ(-360deg);
        -o-transform: rotateZ(-360deg)
    }

    100% {
        transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg)
    }
}

@-o-keyframes pkp_spin {
    0% {
        transform: rotateZ(-360deg);
        -webkit-transform: rotateZ(-360deg);
        -moz-transform: rotateZ(-360deg);
        -o-transform: rotateZ(-360deg)
    }

    100% {
        transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg)
    }
}
/* 1. Menghilangkan background abu-abu dan paksa lebar kontainer menjadi 100% */
.obj_article_details .entry_details .galleys {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 10px 0 25px 0 !important; /* Jarak atas dan bawah agar tidak menempel elemen lain */
    width: 100% !important;
    max-width: 100% !important;
}

/* 2. Mengatur daftar link agar tidak memiliki padding kiri */
.obj_article_details .entry_details .galleys .galleys_links {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: block !important;
    width: 100% !important;
}

/* 3. Membuat tombol memenuhi seluruh lebar area secara horizontal */
.obj_article_details .entry_details .galleys .galleys_links li {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important; /* Jarak antar tombol PDF */
}

.obj_article_details .entry_details .galleys .galleys_links li a {
    display: block !important;
    width: 100% !important; /* Membuat tombol melebar penuh ke samping */
    box-sizing: border-box !important;
    
    /* Ukuran Tinggi (Presisi mengikuti tombol di Homepage) */
    padding: 6px 12px !important; 
    line-height: 1.2 !important;
    
    /* Styling Teks & Font */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-transform: uppercase;
    text-decoration: none !important;
}

/* header atas biar full */
.pkp_site_name .is_img {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0
}
.pkp_site_name .is_img img {
    display: block;
    max-height: none;
    width: auto;
    height: auto;
}
.pkp_site_name_wrapper {
    padding-left: 0;
    padding-right: 0;
}
@media (min-width: 992px) {
    .pkp_site_name {
        margin-left: 0;
        padding-top: 0;
        padding-bottom: 0
}

/* TAMBAHAN FOCUS TEXT SAAT DI KLIK */
.obj_article_summary>.title a {
    text-decoration: none;
    color: var(--color-custom-hijau);
}
.obj_article_summary>.title a:hover,a:focus {
    color: var(--color-hitam)
}

/* TAMBAHAN setting DOi di depan dan Unduh Dowload */
.doi_logo {
    height: 20px !important;
    background: url(http://media.anwardani.id/imgs/icon-doi2.png) no-repeat center left;
    padding: 5px 0 5px 30px;
    font-size: 0.85em;
    color: var(--color-custom-hijau);
    text-decoration: none
}
	.stats {
	padding-top: 5px;
	font-size: 9pt;
  }
  .stats a {
	font-size: 9pt;
  }

  /* menambahkan shadow di article summary */
  .obj_article_summary { 
	box-shadow: var(--shadow-light);
	padding: 15px;
	border: 1px solid #f4f4f4;
	border-radius: 5px;
	transition: all .5s ease-in-out;
	text-align: left;
	margin-bottom: -15px;
}

/* effect grayscale saat image cover di klik*/
.obj_issue_toc img {
	float: none;
	display: inline;
	height: auto;
	margin: 0 auto 15px auto;
	border-radius: 5px;
	transition: all .5s ease-in-out
}
.obj_issue_toc img:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	box-shadow: none
}
.obj_issue_summary img:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	box-shadow: none
}

/* baground linear-gradient di footer*/
.pkp_structure_footer_wrapper {
 background:rgba(0,0,0,0.05);
 border-bottom:20px solid var(--color-custom-hijau);
 background: linear-gradient(22.5deg, rgba(66, 66, 66, .02) 0, rgba(66, 66, 66, .02) 11%, rgba(135, 135, 135, .02) 11%, rgba(135, 135, 135, .02) 24%, rgba(29, 29, 29, .02) 24%, rgba(29, 29, 29, .02) 38%, rgba(15, 15, 15, .02) 38%, rgba(15, 15, 15, .02) 50%, rgba(180, 180, 180, .02) 50%, rgba(180, 180, 180, .02) 77%, rgba(205, 205, 205, .02) 77%, rgba(205, 205, 205, .02) 100%), linear-gradient(67.5deg, rgba(10, 10, 10, .02) 0, rgba(10, 10, 10, .02) 22%, rgba(52, 52, 52, .02) 22%, rgba(52, 52, 52, .02) 29%, rgba(203, 203, 203, .02) 29%, rgba(203, 203, 203, .02) 30%, rgba(69, 69, 69, .02) 30%, rgba(69, 69, 69, .02) 75%, rgba(231, 231, 231, .02) 75%, rgba(231, 231, 231, .02) 95%, rgba(138, 138, 138, .02) 95%, rgba(138, 138, 138, .02) 100%), linear-gradient(112.5deg, rgba(221, 221, 221, .02) 0, rgba(221, 221, 221, .02) 17%, rgba(190, 190, 190, .02) 17%, rgba(190, 190, 190, .02) 39%, rgba(186, 186, 186, .02) 39%, rgba(186, 186, 186, .02) 66%, rgba(191, 191, 191, .02) 66%, rgba(191, 191, 191, .02) 68%, rgba(16, 16, 16, .02) 68%, rgba(16, 16, 16, .02) 70%, rgba(94, 94, 94, .02) 70%, rgba(94, 94, 94, .02) 100%), linear-gradient(90deg, #fff, #fff);
	
}