/* ==========================================================
   JINSENG PROFESSIONAL THEME
   Journal of Industrial Innovation and Safety Engineering
   OJS 3.3.0.21

   Version : 2.0
==========================================================*/


/* ==========================================================
   GENERAL
==========================================================*/

body{

    background:#f6f8fb;

    font-family:
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;

    color:#333;

}


a{

    transition:.25s ease;

}

/* ==========================================================
   USER MENU
==========================================================*/


.pkp_navigation_user > li > a{


    color:#0B5CAD !important;


    font-weight:600;


}



/* SEARCH */

.pkp_navigation_search_wrapper a{


    color:#0B5CAD !important;


}



/* ==========================================================
   ARTICLE CARD
==========================================================*/


.obj_article_summary{


    background:#FFFFFF;


    padding:18px;


    margin-bottom:20px;


    border-radius:12px;


    border:

    1px solid #e5e5e5;


    box-shadow:

    0 3px 10px rgba(0,0,0,.06);


    transition:.3s;


}



.obj_article_summary:hover{


    transform:

    translateY(-3px);


    box-shadow:

    0 8px 20px rgba(0,0,0,.12);


}



/* ARTICLE TITLE */

.obj_article_summary .title a{


    color:#0B5CAD !important;


    font-size:18px;


    font-weight:700;


    line-height:1.4;


}



/* AUTHORS */

.obj_article_summary .authors{


    font-size:14px;


    color:#555;


}



/* META */

.obj_article_summary .meta{


    font-size:13px;


    margin-top:8px;


}



/* DESCRIPTION */

.obj_article_summary .description{


    font-size:14px;


    line-height:1.6;


}



/* ==========================================================
   ISSUE PAGE
==========================================================*/


.obj_issue_toc article{


    background:#FFFFFF;


    border-radius:12px;


    padding:18px;


}



/* ==========================================================
   SIDEBAR
==========================================================*/


.pkp_block{


    background:#FFFFFF;


    border-radius:12px;


    overflow:hidden;


    box-shadow:

    0 3px 10px rgba(0,0,0,.08);


    margin-bottom:22px;


}



.pkp_block .title{


    background:#0B5CAD;


    color:#FFFFFF;


    padding:14px;


    font-size:15px;


    font-weight:700;


}



/* ==========================================================
   ARTICLE DETAIL PAGE
==========================================================*/


.page_article .obj_article_details{


    background:#FFFFFF;


    padding:30px;


    border-radius:15px;


    box-shadow:

    0 5px 20px rgba(0,0,0,.08);


}



/* DOI */

.obj_article_details .doi{


    background:#eef6ff;


    border-left:

    5px solid #0B5CAD;


    padding:12px;


    border-radius:8px;


}



/* ==========================================================
   BUTTON
==========================================================*/


.cmp_button{


    background:#0B5CAD;


    color:#FFFFFF !important;


    border:none;


    border-radius:25px;


    padding:

    12px 24px;


}



.cmp_button:hover{


    background:#003F7D;


}



/* ==========================================================
   FOOTER
==========================================================*/


.pkp_structure_footer_wrapper{


    background:#003F7D;


    color:#FFFFFF;


    margin-top:40px;


    padding:35px;


}



.pkp_structure_footer_wrapper a{


    color:#FFFFFF !important;


}



/* ==========================================================
   MOBILE
==========================================================*/


@media(max-width:768px){


.pkp_navigation_primary{


    flex-direction:column;


}



.pkp_navigation_primary > li > a{


    padding:

    10px 15px !important;


}



.pkp_site_name img{


    max-height:70px;


}



.obj_article_summary{


    padding:15px;


}


}

/* ==========================================================
   JINSENG HEADER & NAVIGATION FINAL FIX
   OJS 3.3.0.21
==========================================================*/


/* ==========================
   HEADER
==========================*/


.pkp_structure_head{

    background:#FFFFFF !important;

    border:none !important;

    box-shadow:

    0 3px 12px rgba(0,0,0,.10);

}



.pkp_head_wrapper{

    background:#FFFFFF !important;

    padding:

    25px 0 15px 0 !important;

}



.pkp_site_name{

    margin:0 !important;

}



.pkp_site_name img{

    max-height:80px !important;

    width:auto;

}



/* ==========================
   PRIMARY NAVIGATION BAR
==========================*/


.pkp_navigation_primary_wrapper{


    background:#f2f4f7 !important;


    border-radius:14px;


    margin:

    10px 0 20px 0;


    padding:

    0 15px;


    box-shadow:

    0 3px 10px rgba(0,0,0,.08);


}




/* MAIN ROW */

.pkp_navigation_primary_row{

    display:flex !important;

    justify-content:space-between !important;

    align-items:center !important;

    min-height:50px !important;

}






/* MENU */

.pkp_navigation_primary{


    display:flex !important;


    align-items:center !important;


    gap:4px;


}



/* MENU ITEM */


.pkp_navigation_primary > li > a{


    color:#333333 !important;


    font-size:14px;


    font-weight:600;


    padding:

    10px 20px !important;


    border-radius:8px;


    line-height:1.2;


}



/* HOVER */


.pkp_navigation_primary > li > a:hover{


    background:#0B5CAD !important;


    color:#FFFFFF !important;


}



/* ACTIVE */


.pkp_navigation_primary > li.current > a{


    background:#0B5CAD !important;


    color:#FFFFFF !important;


}



/* ==========================
   DROPDOWN
==========================*/


.pkp_navigation_primary ul ul{


    background:#FFFFFF;


    border-radius:12px;


    padding:8px;


    box-shadow:

    0 10px 25px rgba(0,0,0,.15);


}



.pkp_navigation_primary ul ul a{


    color:#333 !important;


    padding:

    10px 15px !important;


    border-radius:6px;


}



.pkp_navigation_primary ul ul a:hover{


    background:#0B5CAD !important;


    color:#FFFFFF !important;


}



/* ==========================
   USER MENU
==========================*/


.pkp_navigation_user_wrapper{

    display:flex !important;

    align-items:center !important;

    margin-left:auto !important;

}



.pkp_navigation_user{

    display:flex !important;

    align-items:center !important;

    justify-content:flex-end !important;

    margin-left:auto !important;

}


.pkp_navigation_user > li > a{


    color:#333 !important;


    font-size:14px;


    font-weight:600;


    padding:

    10px 14px !important;


    border-radius:8px;


}



.pkp_navigation_user > li > a:hover{


    background:#e7ebef;


}



/* SEARCH */


.pkp_navigation_search_wrapper{


    margin-left:10px;


}



.pkp_navigation_search_wrapper a{


    color:#0B5CAD !important;


}

/* ==========================================================
   NAVIGATION MENU CENTER ALIGNMENT
==========================================================*/

/* Membuat wrapper navigasi menjadi flex container dengan konten di tengah */
.pkp_navigation_primary_wrapper {
    display: flex !important;
    justify-content: center !important; /* Ini kunci utama untuk meratakan menu di tengah */
    align-items: center !important;
}

/* Menimpa gaya .pkp_navigation_primary_row sebelumnya agar tidak mengganggu */
.pkp_navigation_primary_row {
    display: flex !important;
    justify-content: center !important; /* Pastikan baris juga di tengah */
    align-items: center !important;
    width: 100% !important; /* Pastikan memenuhi lebar wrapper */
}

/* Memastikan menu utama dan user menu berada dalam satu baris di tengah */
.pkp_navigation_primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Ratakan item menu di tengah */
    gap: 4px;
    flex-wrap: wrap; /* Agar membungkus jika layar sempit */
}

/* Menempatkan user menu (seperti 'davito') di sisi kanan namun tetap dalam satu baris */
.pkp_navigation_user_wrapper {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important; /* Ini akan mendorong user menu ke kanan */
}

.pkp_navigation_user {
    display: flex !important;
    align-items: center !important;
}

/* Menyesuaikan posisi search icon */
.pkp_navigation_search_wrapper {
    margin-left: 10px;
}

/* ==========================================================
   FIX: MENU WRAPPING ISSUE
   Mencegah menu Contact turun ke baris baru
==========================================================*/

/* 1. Kurangi padding item menu agar lebih hemat ruang */
.pkp_navigation_primary > li > a {
    padding: 8px 12px !important; /* Ubah dari 10px 20px menjadi lebih kecil */
    font-size: 13px !important; /* Sedikit perkecil font jika perlu */
}

/* 2. Pastikan wrapper tidak memaksa wrap */
.pkp_navigation_primary {
    flex-wrap: nowrap !important; /* Cegah pembungkusan item */
    gap: 2px !important; /* Kurangi jarak antar item */
}

/* 3. Jika masih kurang, perkecil gap pada row */
.pkp_navigation_primary_row {
    gap: 0 !important;
}

/* 4. Opsional: Buat wrapper lebih lebar jika ada ruang */
.pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* ==========================================================
   FIX: NAVIGATION MENU PADDING & SIZE
   Memperbaiki padding biru muda agar tidak terlalu panjang
==========================================================*/

/* Atur ulang padding item menu agar proporsional */
.pkp_navigation_primary > li > a {
    padding: 6px 14px !important; /* Kurangi padding vertikal, pertahankan horizontal */
    font-size: 13.5px !important; /* Ukuran font yang nyaman */
    font-weight: 600;
    border-radius: 6px !important; /* Sudut membulat tapi tidak terlalu besar */
    line-height: 1.4;
    display: inline-block;
    white-space: nowrap;
}

/* Saat hover atau aktif, background biru tidak boleh terlalu besar */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li.current > a {
    background: #0B5CAD !important;
    color: #FFFFFF !important;
    padding: 6px 14px !important; /* Pastikan padding tetap sama saat hover/active */
}

/* Atur ulang wrapper dan row */
.pkp_navigation_primary_wrapper {
    padding: 4px 15px !important; /* Kurangi padding wrapper */
}

.pkp_navigation_primary_row {
    min-height: 44px !important; /* Tinggi baris yang proporsional */
}

/* Menu dalam satu baris tanpa wrap */
.pkp_navigation_primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
}

/* User menu tetap di kanan */
.pkp_navigation_user_wrapper {
    margin-left: auto !important;
}

.pkp_navigation_user > li > a {
    padding: 6px 12px !important;
    font-size: 13px !important;
}

/* Search icon */
.pkp_navigation_search_wrapper {
    margin-left: 8px !important;
}

/* ==========================================================
   MOBILE: Penyesuaian untuk layar kecil
==========================================================*/
@media (max-width: 992px) {
    .pkp_navigation_primary > li > a {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }
    
    .pkp_navigation_primary {
        gap: 2px !important;
    }
}

@media (max-width: 768px) {
    .pkp_navigation_primary {
        flex-wrap: wrap !important; /* Izinkan wrap di mobile */
        justify-content: center !important;
    }
    
    .pkp_navigation_primary > li > a {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}

/* ==========================================================
   FIX: NAVIGATION MENU PADDING & SIZE
   Memperbaiki padding biru muda agar tidak terlalu panjang
==========================================================*/

/* Atur ulang padding item menu agar proporsional */
.pkp_navigation_primary > li > a {
    padding: 6px 14px !important; /* Kurangi padding vertikal, pertahankan horizontal */
    font-size: 13.5px !important; /* Ukuran font yang nyaman */
    font-weight: 600;
    border-radius: 6px !important; /* Sudut membulat tapi tidak terlalu besar */
    line-height: 1.4;
    display: inline-block;
    white-space: nowrap;
}

/* Saat hover atau aktif, background biru tidak boleh terlalu besar */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li.current > a {
    background: #0B5CAD !important;
    color: #FFFFFF !important;
    padding: 6px 14px !important; /* Pastikan padding tetap sama saat hover/active */
}

/* Atur ulang wrapper dan row */
.pkp_navigation_primary_wrapper {
    padding: 4px 15px !important; /* Kurangi padding wrapper */
}

.pkp_navigation_primary_row {
    min-height: 44px !important; /* Tinggi baris yang proporsional */
}

/* Menu dalam satu baris tanpa wrap */
.pkp_navigation_primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
}

/* User menu tetap di kanan */
.pkp_navigation_user_wrapper {
    margin-left: auto !important;
}

.pkp_navigation_user > li > a {
    padding: 6px 12px !important;
    font-size: 13px !important;
}

/* Search icon */
.pkp_navigation_search_wrapper {
    margin-left: 8px !important;
}

/* ==========================================================
   MOBILE: Penyesuaian untuk layar kecil
==========================================================*/
@media (max-width: 992px) {
    .pkp_navigation_primary > li > a {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }
    
    .pkp_navigation_primary {
        gap: 2px !important;
    }
}

@media (max-width: 768px) {
    .pkp_navigation_primary {
        flex-wrap: wrap !important; /* Izinkan wrap di mobile */
        justify-content: center !important;
    }
    
    .pkp_navigation_primary > li > a {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}

/* ==========================================================
   FINAL FIX: NAVIGATION MENU
   Memperbaiki padding, ukuran, dan wrapping
==========================================================*/

/* 1. Reset total untuk navigasi primary */
.pkp_navigation_primary_wrapper {
    background: #f2f4f7 !important;
    border-radius: 14px;
    margin: 10px 0 20px 0;
    padding: 0 !important; /* Hapus padding berlebih */
    box-shadow: 0 3px 10px rgba(0,0,0,.08);
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
}

.pkp_navigation_primary_row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 10px !important;
    gap: 0 !important;
}

/* 2. Menu utama - atur agar tidak wrap dan padding proporsional */
.pkp_navigation_primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important; /* Mencegah wrap */
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Item menu - padding yang proporsional */
.pkp_navigation_primary > li {
    display: inline-block !important;
    margin: 0 !important;
}

.pkp_navigation_primary > li > a {
    color: #333333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important; /* Padding vertikal kecil, horizontal sedang */
    border-radius: 6px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    display: inline-block !important;
    transition: all 0.25s ease !important;
}

/* 4. Hover dan Active - padding tetap sama */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li.current > a {
    background: #0B5CAD !important;
    color: #FFFFFF !important;
    padding: 6px 12px !important; /* SAMA dengan padding normal */
}

/* 5. User menu - tetap di kanan */
.pkp_navigation_user_wrapper {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

.pkp_navigation_user {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_user > li > a {
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    line-height: 1.3 !important;
}

.pkp_navigation_user > li > a:hover {
    background: #e7ebef !important;
}

/* 6. Search icon */
.pkp_navigation_search_wrapper {
    margin-left: 5px !important;
    flex-shrink: 0 !important;
}

.pkp_navigation_search_wrapper a {
    color: #0B5CAD !important;
    font-size: 14px !important;
    padding: 4px 8px !important;
    display: inline-block !important;
}

/* 7. Pastikan semua dalam satu baris */
.pkp_navigation_primary_row > * {
    flex-shrink: 0 !important;
}

/* 8. Untuk layar yang lebih kecil */
@media (max-width: 1024px) {
    .pkp_navigation_primary > li > a {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }
    
    .pkp_navigation_primary {
        gap: 1px !important;
    }
}

@media (max-width: 900px) {
    .pkp_navigation_primary > li > a {
        font-size: 11.5px !important;
        padding: 4px 8px !important;
    }
    
    .pkp_navigation_user > li > a {
        font-size: 11.5px !important;
        padding: 4px 8px !important;
    }
}

/* 9. Khusus untuk mobile - izinkan wrap */
@media (max-width: 768px) {
    .pkp_navigation_primary {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 3px !important;
    }
    
    .pkp_navigation_primary_wrapper {
        min-height: auto !important;
        padding: 8px 5px !important;
    }
    
    .pkp_navigation_primary_row {
        flex-wrap: wrap !important;
        min-height: auto !important;
        gap: 5px !important;
    }
    
    .pkp_navigation_user_wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: center !important;
        margin-top: 5px !important;
    }
}