/* =========================================================
   JOURNAL CUSTOM CSS - CLEAN & LIGHT
   Warna utama: Navy #000080
   ========================================================= */

:root {
    --navy: #000080;
    --black: #000000;
    --white: #ffffff;
    --light: #f4f4f4;
    --border: #d7d7d7;
}


/* =========================================================
   1. GLOBAL
   ========================================================= */

html {
    padding: 20px 0;
    background-color: var(--navy);
    background-image: url('https://i.pinimg.com/736x/b1/c6/ba/b1c6ba18ab09c45e9469985a20ae8698.jpg');
    background-size: 300px;
}

body,
button,
input,
select,
textarea {
    font-family: Arial, Helvetica, sans-serif !important;
    color: var(--black) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
td,
th,
label,
legend {
    color: var(--black);
}

.title {
    font-family: Arial, Helvetica, sans-serif !important;
}


/* =========================================================
   2. PAGE STRUCTURE
   ========================================================= */

.pkp_structure_page {
    background: var(--white);
    border: 0;
    box-shadow: 2px 2px rgba(128,128,128,.31);
}

.pkp_structure_head {
    background: var(--white) !important;
    height: auto;
    width: auto;
}


/* =========================================================
   3. SITE LOGO / NAME
   ========================================================= */

.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name > a,
.pkp_site_name .is_img {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.pkp_site_name_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.pkp_site_name,
.pkp_site_name > a {
    color: var(--navy) !important;
}

.pkp_site_name .is_img img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: none !important;
}


/* =========================================================
   4. USER NAVIGATION - REGISTER / LOGIN
   PUTIH + TEKS HITAM
   ========================================================= */

#headerNavigationContainer .pkp_navigation_user_wrapper,
#headerNavigationContainer .pkp_navigation_user,
#headerNavigationContainer #navigationUser,
.pkp_navigation_user_wrapper,
.pkp_navigation_user,
#navigationUser {
    background: var(--white) !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

#headerNavigationContainer .pkp_navigation_user_wrapper a,
#headerNavigationContainer .pkp_navigation_user a,
#headerNavigationContainer #navigationUser a,
.pkp_navigation_user_wrapper a,
.pkp_navigation_user a,
#navigationUser a {
    background: var(--white) !important;
    color: var(--black) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 0 !important;
}

#headerNavigationContainer .pkp_navigation_user_wrapper a:hover,
#headerNavigationContainer .pkp_navigation_user a:hover,
#headerNavigationContainer #navigationUser a:hover {
    background: var(--white) !important;
    color: var(--black) !important;
    text-decoration: underline !important;
}


/* =========================================================
   5. PRIMARY NAVIGATION
   FULL SATU WARNA NAVY
   ========================================================= */

/* Area luar navigasi */
#headerNavigationContainer .pkp_site_nav_menu,
.pkp_site_nav_menu {
    background: var(--white) !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* Seluruh bar navigasi */
#headerNavigationContainer .pkp_navigation_primary_row,
#headerNavigationContainer .pkp_navigation_primary_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
    display: block !important;
    float: none !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    background: var(--navy) !important;
    background-color: var(--navy) !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
}


/* Isi menu */
#headerNavigationContainer #navigationPrimary,
#headerNavigationContainer .pkp_navigation_primary,
#navigationPrimary,
.pkp_navigation_primary {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 2px !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 8px !important;

    box-sizing: border-box !important;

    background: var(--navy) !important;
    background-image: none !important;
}


/* Setiap menu */
#navigationPrimary > li,
.pkp_navigation_primary > li,
.item_menu {
    background: var(--navy) !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Tulisan menu */
#navigationPrimary > li > a,
.pkp_navigation_primary > li > a,
.item_menu > a {
    display: block !important;

    background: var(--navy) !important;
    color: var(--white) !important;

    font-size: 13.5px !important;
    font-weight: 600 !important;

    line-height: 18px !important;

    /* ramping atas-bawah */
    padding: 8px 12px !important;

    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    text-decoration: none !important;
}


/* Hover tetap satu warna */
#navigationPrimary > li > a:hover,
#navigationPrimary > li > a:focus,
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.item_menu > a:hover,
.item_menu > a:focus,
#navigationPrimary > li > a[aria-current="page"],
.pkp_navigation_primary > li > a[aria-current="page"] {
    background: var(--navy) !important;
    color: var(--white) !important;

    border: 0 !important;
    box-shadow: none !important;

    text-decoration: underline !important;
    text-underline-offset: 3px;
}


/* Antisipasi warna tema lama */
#headerNavigationContainer .pkp_navigation_primary_row::before,
#headerNavigationContainer .pkp_navigation_primary_row::after,
#headerNavigationContainer .pkp_navigation_primary_wrapper::before,
#headerNavigationContainer .pkp_navigation_primary_wrapper::after {
    background: var(--navy) !important;
    background-image: none !important;

    border: 0 !important;
}


/* =========================================================
   6. DROPDOWN NAVIGATION
   ========================================================= */

#navigationPrimary ul,
.pkp_navigation_primary ul {
    background: var(--white) !important;

    border: 0 !important;
    border-top: 2px solid var(--navy) !important;

    border-radius: 0 0 4px 4px !important;

    box-shadow: 0 4px 10px rgba(0,0,0,.14) !important;

    padding: 4px 0 !important;
}

#navigationPrimary ul li,
.pkp_navigation_primary ul li {
    background: var(--white) !important;
}

#navigationPrimary ul li a,
.pkp_navigation_primary ul li a {
    display: block !important;

    background: var(--white) !important;

    color: var(--black) !important;

    font-size: 13px !important;

    padding: 8px 14px !important;

    border: 0 !important;
    border-radius: 0 !important;
}

#navigationPrimary ul li a:hover,
#navigationPrimary ul li a:focus,
.pkp_navigation_primary ul li a:hover,
.pkp_navigation_primary ul li a:focus {
    background: #f2f2f2 !important;
    color: var(--black) !important;
}


/* =========================================================
   7. BREADCRUMB
   ========================================================= */

.cmp_breadcrumbs {
    display: block;

    background: #eeeeee;

    border: 0;
    border-radius: 3px;

    box-shadow: 1px 1px #aaaaaa;

    padding: 0 10px;

    margin: 10px 0 30px;

    color: var(--black) !important;
}

.cmp_breadcrumbs ol {
    margin-bottom: 0;
}

.cmp_breadcrumbs a,
.cmp_breadcrumbs li {
    color: var(--black) !important;
}


/* =========================================================
   8. ARTICLE / ISSUE TOC
   ========================================================= */

.item.abstract {
    text-align: justify;
    color: var(--black) !important;
}


/* Judul artikel */
.obj_article_summary .title,
.obj_article_summary .title a,
.obj_issue_toc .title,
.obj_issue_toc .title a,
.cmp_article_list .title,
.cmp_article_list .title a {
    color: var(--black) !important;
    font-weight: 700 !important;
}


/* =========================================================
   NAMA PENULIS - DIPERBESAR
   ========================================================= */

.obj_article_summary .authors,
.cmp_article_list .authors,
.obj_issue_toc .authors,
.obj_article_details .authors,
.obj_article_summary .authors .name,
.cmp_article_list .authors .name,
.obj_issue_toc .authors .name,
.obj_article_details .authors .name {
    color: var(--black) !important;

    font-size: 16px !important;

    line-height: 1.55 !important;
}


/* Icon penulis */
.authors::before {
    content: '\f007';
    font-family: FontAwesome;
}

.item.authors::before,
ul.authors::before {
    content: '';
}

.name::before {
    content: '\f007';
    font-family: FontAwesome;
}


/* Pages */
.pages::before {
    content: '\f0f6';
    font-family: FontAwesome;
}

.pages {
    color: var(--black) !important;
}


/* Daftar artikel */
.cmp_article_list > li,
.obj_issue_toc .articles > li,
.obj_issue_toc .sections > .section > ul > li {
    border-left: 3px solid var(--navy) !important;
    border-bottom: 1px solid var(--border) !important;

    padding: 8px 10px 10px 12px !important;

    margin-bottom: 7px !important;

    border-radius: 4px !important;

    color: var(--black) !important;
}


/* Jangan beri border pada list PDF */
.galleys_links li,
.cmp_article_list .galleys_links li {
    border: 0 !important;

    padding: 0 !important;
    margin: 0 !important;
}


/* =========================================================
   9. PDF BUTTON
   WARNA SAMA PERSIS DENGAN NAVIGASI
   ========================================================= */

a.obj_galley_link,
.obj_galley_link,
.galleys_links a,
.galleys_links .obj_galley_link,
.obj_article_summary .galleys_links a,
.obj_article_summary .galleys_links .obj_galley_link,
.cmp_article_list .galleys_links a,
.obj_issue_toc .galleys_links a,
.obj_issue_toc .obj_article_summary .galleys_links a,
.pkp_page_issue .obj_galley_link,
.pkp_page_index .obj_galley_link {
    display: inline-block !important;

    background: var(--navy) !important;

    color: var(--white) !important;

    border: 1px solid var(--navy) !important;

    border-radius: 4px !important;

    padding: 3px 8px !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    line-height: 18px !important;

    text-decoration: none !important;

    box-shadow: none !important;
}


/* Pastikan icon/text PDF putih */
a.obj_galley_link *,
.obj_galley_link *,
.galleys_links a *,
.obj_article_summary .galleys_links a *,
.cmp_article_list .galleys_links a *,
.obj_issue_toc .galleys_links a * {
    color: var(--white) !important;
}


/* Hover PDF tetap navy */
a.obj_galley_link:hover,
a.obj_galley_link:focus,
.obj_galley_link:hover,
.obj_galley_link:focus,
.galleys_links a:hover,
.galleys_links a:focus,
.obj_article_summary .galleys_links a:hover,
.obj_article_summary .galleys_links a:focus,
.cmp_article_list .galleys_links a:hover,
.cmp_article_list .galleys_links a:focus {
    background: var(--navy) !important;

    color: var(--white) !important;

    border-color: var(--navy) !important;

    text-decoration: underline !important;
}


/* =========================================================
   10. SIDEBAR / QUICK MENU
   ========================================================= */

.pkp_block {
    padding: 5px !important;
    color: var(--black) !important;
}


/* Header sidebar */
.pkp_block .title,
.pkp_structure_sidebar .pkp_block .title,
aside .pkp_block .title {
    display: block !important;

    background: var(--navy) !important;

    color: var(--white) !important;

    padding: 7px 10px !important;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    font-weight: 700 !important;

    text-transform: none !important;
}


/* Tulisan Quick Menu putih */
.pkp_block .title,
.pkp_block .title a,
.pkp_block .title span,
.pkp_block .title strong {
    color: var(--white) !important;
}


/* Isi sidebar */
.pkp_block .content,
.pkp_block .content p,
.pkp_block .content li {
    color: var(--black) !important;
}


/* Link sidebar */
.pkp_block .content a {
    color: var(--navy) !important;
}


/* =========================================================
   HEADER BLOCK LAIN
   ========================================================= */

.head_block {
    background: var(--navy) !important;

    color: var(--white) !important;

    border: 0 !important;

    border-radius: 4px 4px 0 0;

    padding: 7px 10px;
}

.head_block,
.head_block a,
.head_block span {
    color: var(--white) !important;
}


/* =========================================================
   MAKE SUBMISSION
   ========================================================= */

.block_make_submission_link {
    width: 100%;

    text-align: center;

    padding: 5px 0 !important;
}


/* =========================================================
   11. HOMEPAGE / MISC
   ========================================================= */

.homepage_about > h2 {
    display: none;
}

.pkp_page_index .homepage_about {
    padding-top: 0;

    padding-bottom: 2.143rem;
}


/* Columns */
.column {
    float: left;

    width: 33.33%;
}


/* Data box */
.data {
    background: #f0f0f0;

    border: 1px solid #d7d6d6;

    border-radius: 5px;

    padding: 5px 10px;

    color: var(--black);
}


/* Logo details */
.logo-details {
    border-bottom: 5px solid #b5b2b2;

    font-size: 1.5em;

    padding-bottom: 10px;

    color: var(--black);
}


/* Index image */
.index_list img {
    width: 180px;

    margin: 0 5px 0 0;

    border: 1px solid gray;

    border-radius: 5px;

    padding: 10px;
}


/* Announcement */
.obj_announcement_summary .summary {
    font-size: 11pt !important;

    color: var(--black) !important;
}


/* =========================================================
   12. FOOTER
   ========================================================= */

.pkp_structure_footer_wrapper {
    background: #f0f0f0 !important;
}


/* Hilangkan logo PKP */
.pkp_brand_footer {
    display: none !important;
}


/* Footer columns */
footer .content .link-boxes {
    width: 100%;

    display: flex;

    justify-content: space-between;
}

footer .content .link-boxes .box {
    width: calc(100% / 5 - 10px);
}

.content .link-boxes .box .link_name {
    color: var(--black);

    font-size: 11pt;

    font-weight: 400;

    margin-bottom: 10px;

    position: relative;
}

.content .link-boxes .box li {
    margin: 6px 0;

    list-style: none;

    color: var(--black);
}

.link-boxes .box .link_name::before {
    content: '';

    position: absolute;

    left: 0;

    bottom: -2px;

    height: 2px;

    width: 35px;

    background: var(--navy);
}

ul.box {
    padding: 0 5px 0 0;
}


/* Footer query */
.fquery {
    padding: 7px 10px;

    border: 1px solid gray;

    border-radius: 5px;

    color: var(--black);
}

.policy_terms {
    float: right;
}


/* Bottom footer */
.bottom-details {
    background: var(--navy);

    margin: 0 -30px -30px;

    padding: 10px 15px;

    color: var(--white) !important;
}

.bottom-details a,
.bottom-details p,
.bottom-details span,
.bottom-details li {
    color: var(--white) !important;
}


/* =========================================================
   13. DESKTOP
   ========================================================= */

@media (min-width: 992px) {

    body {
        width: 1162px;

        margin: auto;
    }


    .pkp_structure_content {
        padding-top: 0 !important;
    }


    .pkp_navigation_user_wrapper {
        padding-left: 0 !important;

        padding-right: 5px !important;
    }


    .pages {
        border: 1px solid #d2d2d2;

        border-radius: 4px;

        padding: 0 6px;

        background: var(--light);
    }


    .pkp_navigation_search_wrapper {
        display: none;
    }


    .pkp_page_index .homepage_image {
        margin-top: 0;
    }
}


/* =========================================================
   14. TABLET / MOBILE
   ========================================================= */

@media (max-width: 991px) {

    #navigationPrimary,
    .pkp_navigation_primary {
        display: block !important;

        padding: 0 !important;
    }


    #navigationPrimary > li > a,
    .pkp_navigation_primary > li > a {
        font-size: 13px !important;

        padding: 8px 11px !important;
    }
}