/* ==========================================================================
   METANSI OJS - Refined Responsive Theme v2
   Target: OJS 3.1.x / OJS 3.x
   Fokus:
   - font lebih kecil dan proporsional
   - layout Current Issue lebih rapi
   - cover tidak terlalu besar
   - daftar artikel dimulai penuh di bawah informasi terbitan
   - sidebar/menu lebih kompak
   - responsif desktop, tablet, dan mobile
   ========================================================================== */

/* =========================
   1. RESET & BASE
   ========================= */
html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: inherit;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: #f5f7f9;
    color: #2b3640;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px !important;
    line-height: 1.55;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: #0b5a92;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #073f68;
    text-decoration: underline;
}

/* =========================
   2. HIDE SKIP LINKS
   ========================= */
.cmp_skip_to_content,
.pkp_skip_to_content,
.pkp_screen_reader,
.screen_reader {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.cmp_skip_to_content:focus,
.pkp_skip_to_content:focus {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 99999 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    clip: auto !important;
    overflow: visible !important;
    background: #fff !important;
    border: 2px solid #0b5a92 !important;
}

/* =========================
   3. PAGE STRUCTURE
   ========================= */
.pkp_structure_page {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    background: #fff;
    min-height: 100vh;
}

.pkp_structure_content {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 24px 38px !important;
}

.pkp_structure_main {
    float: left;
    width: calc(100% - 325px) !important;
    padding-right: 34px !important;
}

.pkp_structure_sidebar {
    float: right;
    width: 300px !important;
    padding-top: 0;
}

.pkp_structure_content::after {
    content: "";
    display: table;
    clear: both;
}

/* =========================
   4. HEADER & JOURNAL BANNER
   ========================= */
.pkp_structure_head {
    background: #fff;
    border-bottom: 1px solid #e2e7eb;
}

.pkp_head_wrapper {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

.pkp_site_name {
    margin: 0;
    padding: 10px 0 !important;
    line-height: 1.2;
}

.pkp_site_name .is_text {
    display: block;
    color: #173650;
    font-size: 28px !important;
    font-weight: 700;
}

.pkp_site_name .is_img,
.pkp_site_name .is_img img,
.pkp_site_name img {
    width: 100%;
    max-width: 100%;
}

.pkp_site_name .is_img img,
.pkp_site_name img {
    display: block;
    max-height: 220px !important;
    margin: 0 auto;
    object-fit: contain;
}

/* =========================
   5. NAVIGATION
   ========================= */
.pkp_site_nav_menu {
    background: #123f67;
}

.pkp_navigation_primary_wrapper {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

.pkp_navigation_primary,
.pkp_navigation_user {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pkp_navigation_primary > li,
.pkp_navigation_user > li {
    display: inline-block;
    position: relative;
    margin: 0;
}

.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a {
    display: block;
    padding: 11px 13px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_user > li > a:hover {
    background: rgba(255,255,255,.12);
    text-decoration: none;
}

/* =========================
   6. TYPOGRAPHY
   ========================= */
h1, h2, h3, h4, h5, h6 {
    color: #20384e;
    line-height: 1.3;
    font-weight: 700;
}

h1 { font-size: 25px !important; }
h2 { font-size: 22px !important; }
h3 { font-size: 18px !important; }
h4 { font-size: 16px !important; }

p,
li,
td,
th {
    font-size: 14px;
}

/* Current Issue heading */
.pkp_page_index .current_issue > h2,
.pkp_page_index h2.current_issue_title,
.current_issue > h2 {
    margin: 0 0 18px !important;
    color: #173b5b !important;
    font-size: 25px !important;
    line-height: 1.25 !important;
}

/* Volume/title of current issue */
.current_issue .current_issue_title,
.current_issue .issue_title,
.obj_issue_toc > .heading > .title,
.obj_issue_toc .heading .title {
    margin: 0 0 15px !important;
    color: #253746 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}

/* =========================
   7. CURRENT ISSUE LAYOUT
   ========================= */
.current_issue,
.obj_issue_toc {
    margin-top: 0 !important;
}

/*
   Cover dibuat lebih kecil agar informasi terbitan tampak seimbang.
*/
.obj_issue_toc > .heading,
.obj_issue_toc .heading {
    position: relative;
    min-height: 0;
}

.obj_issue_toc .cover,
.current_issue .cover {
    float: left !important;
    width: 220px !important;
    max-width: 220px !important;
    margin: 0 26px 18px 0 !important;
}

.obj_issue_toc .cover img,
.current_issue .cover img {
    width: 100% !important;
    max-width: 220px !important;
    max-height: 310px !important;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

/* Metadata/description beside cover */
.obj_issue_toc .description,
.obj_issue_toc .published,
.current_issue .description,
.current_issue .published {
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.obj_issue_toc .published {
    margin-top: 8px !important;
}

/*
   Penting:
   Daftar Articles/Sections dimulai penuh di bawah cover + metadata.
   Ini mencegah judul artikel berhimpitan di sebelah cover.
*/
.obj_issue_toc .sections,
.current_issue .sections {
    clear: both !important;
    width: 100% !important;
    padding-top: 14px !important;
}

.obj_issue_toc .section,
.current_issue .section {
    width: 100% !important;
    clear: both !important;
}

.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3,
.current_issue .section > h2,
.current_issue .section > h3 {
    margin: 6px 0 12px !important;
    color: #173b5b !important;
    font-size: 21px !important;
}

/* Jika "Articles" menggunakan heading tanpa class section */
.obj_issue_toc h2,
.current_issue h2 {
    line-height: 1.3;
}

/* =========================
   8. ARTICLE LIST
   ========================= */
.cmp_article_list,
.obj_issue_toc .articles {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.obj_article_summary {
    width: 100%;
    margin: 0 !important;
    padding: 16px 0 18px !important;
    border-bottom: 1px solid #e4e9ed;
}

.obj_article_summary:first-child {
    padding-top: 8px !important;
}

.obj_article_summary .title {
    margin: 0 0 7px !important;
    padding: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
}

.obj_article_summary .title a {
    color: #154f7e !important;
    font-size: 17px !important;
    line-height: 1.42 !important;
    text-decoration: none;
}

.obj_article_summary .title a:hover {
    color: #0b5a92 !important;
    text-decoration: underline;
}

.obj_article_summary .authors {
    margin: 0 0 3px !important;
    color: #5d6f7e !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.obj_article_summary .pages,
.obj_article_summary .meta {
    margin: 0 !important;
    color: #667784 !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
}

/* Hilangkan bullet/list marker yang membuat tampilan berantakan */
.cmp_article_list > li,
.obj_issue_toc .articles > li,
.obj_article_summary {
    list-style: none !important;
}

.cmp_article_list > li::marker,
.obj_issue_toc .articles > li::marker {
    content: "" !important;
}

/* Galley / PDF button */
.obj_galley_link,
.galley-link,
.obj_article_summary .galleys a {
    display: inline-block;
    margin: 9px 6px 0 0 !important;
    padding: 6px 11px !important;
    border: 1px solid #1873b5 !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #0d5f9c !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
}

.obj_galley_link:hover,
.galley-link:hover,
.obj_article_summary .galleys a:hover {
    background: #0d5f9c !important;
    color: #fff !important;
}

/* =========================
   9. SIDEBAR
   ========================= */
.pkp_block {
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 1px solid #e0e7ec;
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
}

.pkp_block .title {
    margin: 0 !important;
    padding: 11px 12px !important;
    background: #13a6ad;
    border: 0 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center;
}

.pkp_block .content {
    padding: 12px !important;
    font-size: 13px !important;
}

.pkp_block ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.pkp_block li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Custom sidebar menu links */
.pkp_block li a,
.pkp_structure_sidebar .pkp_block a {
    font-size: 13px;
    line-height: 1.35;
}

/*
   Jika sidebar dibuat dengan tabel/menu warna cyan,
   dibuat lebih kompak.
*/
.pkp_structure_sidebar table {
    margin: 0 !important;
}

.pkp_structure_sidebar table td,
.pkp_structure_sidebar table th {
    padding: 9px 8px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
}

/* Images in sidebar: template/accreditation, etc. */
.pkp_structure_sidebar img {
    max-width: 100% !important;
    height: auto !important;
}

/* =========================
   10. SEARCH / FORMS
   ========================= */
.pkp_search,
.cmp_search {
    margin: 14px 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
select,
textarea {
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccd6dd;
    border-radius: 4px;
    font-size: 13px;
}

/* =========================
   11. BREADCRUMB
   ========================= */
.cmp_breadcrumbs,
.breadcrumbs {
    margin: 0 0 16px;
    padding: 8px 0;
    border-bottom: 1px solid #e5eaee;
    color: #6a7a86;
    font-size: 12.5px !important;
}

/* =========================
   12. TABLES
   ========================= */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 8px 9px;
    vertical-align: top;
}

/* =========================
   13. FOOTER
   ========================= */
.pkp_structure_footer_wrapper,
.pkp_structure_footer {
    clear: both;
    width: 100%;
    background: #153c5d;
    color: #edf5fa;
}

.pkp_footer_content {
    max-width: 1320px;
    margin: 0 auto;
    padding: 22px 24px;
    font-size: 13px;
    line-height: 1.55;
}

.pkp_footer_content a,
.pkp_structure_footer a {
    color: #fff;
}

/* =========================
   14. TABLET
   ========================= */
@media (max-width: 1024px) {
    .pkp_structure_content,
    .pkp_head_wrapper,
    .pkp_navigation_primary_wrapper,
    .pkp_footer_content {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .pkp_structure_main {
        width: calc(100% - 280px) !important;
        padding-right: 24px !important;
    }

    .pkp_structure_sidebar {
        width: 260px !important;
    }

    .obj_issue_toc .cover,
    .current_issue .cover {
        width: 190px !important;
        max-width: 190px !important;
    }

    .obj_issue_toc .cover img,
    .current_issue .cover img {
        max-width: 190px !important;
        max-height: 270px !important;
    }
}

/* =========================
   15. MOBILE / SMALL TABLET
   ========================= */
@media (max-width: 850px) {
    .pkp_structure_main,
    .pkp_structure_sidebar {
        float: none !important;
        width: 100% !important;
    }

    .pkp_structure_main {
        padding-right: 0 !important;
    }

    .pkp_structure_sidebar {
        margin-top: 28px;
    }

    .obj_issue_toc .cover,
    .current_issue .cover {
        width: 180px !important;
        max-width: 180px !important;
        margin-right: 20px !important;
    }

    .obj_issue_toc .cover img,
    .current_issue .cover img {
        max-width: 180px !important;
        max-height: 255px !important;
    }
}

/* =========================
   16. MOBILE
   ========================= */
@media (max-width: 600px) {
    body {
        font-size: 13.5px !important;
    }

    .pkp_structure_content {
        padding: 16px 13px 28px !important;
    }

    .pkp_head_wrapper,
    .pkp_navigation_primary_wrapper,
    .pkp_footer_content {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    .pkp_page_index .current_issue > h2,
    .current_issue > h2 {
        font-size: 21px !important;
    }

    .current_issue .current_issue_title,
    .obj_issue_toc .heading .title {
        font-size: 14.5px !important;
    }

    .obj_issue_toc .cover,
    .current_issue .cover {
        float: none !important;
        width: 165px !important;
        max-width: 165px !important;
        margin: 0 auto 16px !important;
    }

    .obj_issue_toc .cover img,
    .current_issue .cover img {
        max-width: 165px !important;
        max-height: 235px !important;
    }

    .obj_issue_toc .section > h2,
    .current_issue .section > h2 {
        font-size: 19px !important;
    }

    .obj_article_summary {
        padding: 13px 0 15px !important;
    }

    .obj_article_summary .title,
    .obj_article_summary .title a {
        font-size: 15.5px !important;
        line-height: 1.4 !important;
    }

    .obj_article_summary .authors {
        font-size: 12.5px !important;
    }

    .pkp_block .title {
        font-size: 14px !important;
    }
}

/* =========================
   17. SAFETY OVERRIDES
   ========================= */
.pkp_structure_page img {
    max-width: 100% !important;
    height: auto;
}

.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.current_issue,
.obj_issue_toc {
    max-width: 100%;
}

/* END METANSI OJS REFINED V2 */


/* ==========================================================================
   METANSI OJS - V3 LOGIN + DESKTOP NAVIGATION FIX
   Tambahan khusus untuk:
   1) memaksa menu utama tampil normal pada desktop,
   2) menyembunyikan tombol "Open Menu" pada desktop,
   3) merapikan halaman Login/Register,
   4) merapikan search/menu bar.
   ========================================================================== */

/* =========================
   A. DESKTOP NAVIGATION FIX
   ========================= */
@media (min-width: 769px) {

    /* Tombol Open Menu hanya untuk mobile */
    .pkp_site_nav_toggle,
    button.pkp_site_nav_toggle,
    a.pkp_site_nav_toggle,
    .pkp_navigation_primary_row .pkp_site_nav_toggle {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Paksa wadah menu utama tampil */
    .pkp_site_nav_menu {
        display: block !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
        background: #123f67 !important;
    }

    /* Bar navigasi utama */
    .pkp_navigation_primary_row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 1320px !important;
        min-height: 46px !important;
        margin: 0 auto !important;
        padding: 0 24px !important;
        background: #123f67 !important;
    }

    /* Daftar menu utama */
    .pkp_navigation_primary,
    ul.pkp_navigation_primary,
    .pkp_navigation_primary.pkp_nav_list {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .pkp_navigation_primary > li {
        display: block !important;
        position: relative !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_navigation_primary > li > a {
        display: block !important;
        padding: 14px 13px !important;
        color: #ffffff !important;
        background: transparent !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    .pkp_navigation_primary > li > a:hover,
    .pkp_navigation_primary > li > a:focus {
        background: rgba(255,255,255,.13) !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    /* Search di sisi kanan navigation bar */
    .pkp_navigation_search_wrapper {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-left: auto !important;
        padding: 0 !important;
    }

    .pkp_navigation_search_wrapper a {
        display: block !important;
        padding: 14px 12px !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        text-decoration: none !important;
    }

    .pkp_navigation_search_wrapper a:hover {
        background: rgba(255,255,255,.13) !important;
    }

    /* User navigation bila digunakan */
    .pkp_navigation_user_wrapper,
    .pkp_navigation_user {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Hindari Search tampil seperti teks biru gelap yang tenggelam di bar */
.pkp_site_nav_menu a,
.pkp_navigation_primary_row a {
    text-decoration: none;
}

/* =========================
   B. LOGIN PAGE - LAYOUT
   ========================= */
.pkp_page_login .pkp_structure_main,
.page_login .pkp_structure_main,
body.pkp_page_login .pkp_structure_main {
    padding-top: 0 !important;
}

/* Breadcrumb lebih rapi */
.pkp_page_login .cmp_breadcrumbs,
.page_login .cmp_breadcrumbs {
    margin: 0 0 20px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid #e2e7eb !important;
    font-size: 13px !important;
}

.pkp_page_login .cmp_breadcrumbs ol,
.page_login .cmp_breadcrumbs ol {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.pkp_page_login .cmp_breadcrumbs li,
.page_login .cmp_breadcrumbs li {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
}

/* Judul Login */
.pkp_page_login h1,
.page_login h1 {
    margin: 0 0 8px !important;
    color: #1d3f5d !important;
    font-size: 25px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

/* Form login menjadi card */
.pkp_page_login .cmp_form.login,
.page_login .cmp_form.login,
form.cmp_form.login {
    width: 100% !important;
    max-width: 620px !important;
    margin: 20px 0 30px !important;
    padding: 24px 26px !important;
    border: 1px solid #dfe6eb !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 5px 18px rgba(24, 49, 70, .07) !important;
}

/* Hapus fieldset default yang tampak seperti kotak kasar */
.pkp_page_login .cmp_form.login fieldset,
.page_login .cmp_form.login fieldset,
form.cmp_form.login fieldset {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Sembunyikan legend kosong jika ada */
.pkp_page_login .cmp_form.login legend,
.page_login .cmp_form.login legend,
form.cmp_form.login legend {
    padding: 0 !important;
    border: 0 !important;
}

/* Baris input */
.pkp_page_login .cmp_form.login .fields > div,
.page_login .cmp_form.login .fields > div,
form.cmp_form.login .fields > div,
.pkp_page_login .cmp_form.login > div,
.page_login .cmp_form.login > div {
    margin-bottom: 16px !important;
}

/* Label */
.pkp_page_login .cmp_form.login label,
.page_login .cmp_form.login label,
form.cmp_form.login label {
    display: block !important;
    margin: 0 0 6px !important;
    color: #334a5e !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

/* Username & password */
.pkp_page_login .cmp_form.login input[type="text"],
.pkp_page_login .cmp_form.login input[type="email"],
.pkp_page_login .cmp_form.login input[type="password"],
.page_login .cmp_form.login input[type="text"],
.page_login .cmp_form.login input[type="email"],
.page_login .cmp_form.login input[type="password"],
form.cmp_form.login input[type="text"],
form.cmp_form.login input[type="email"],
form.cmp_form.login input[type="password"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    border: 1px solid #cbd6de !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    color: #263746 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    outline: none !important;
}

.pkp_page_login .cmp_form.login input:focus,
.page_login .cmp_form.login input:focus,
form.cmp_form.login input:focus {
    border-color: #1775aa !important;
    box-shadow: 0 0 0 3px rgba(23,117,170,.10) !important;
}

/* Forgot password */
.pkp_page_login .cmp_form.login a,
.page_login .cmp_form.login a,
form.cmp_form.login a {
    font-size: 13px !important;
}

/* Remember me dibuat horizontal */
.pkp_page_login .cmp_form.login .remember,
.page_login .cmp_form.login .remember,
form.cmp_form.login .remember {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 4px 0 16px !important;
}

.pkp_page_login .cmp_form.login input[type="checkbox"],
.page_login .cmp_form.login input[type="checkbox"],
form.cmp_form.login input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}

/* Tombol Login */
.pkp_page_login .cmp_form.login button,
.pkp_page_login .cmp_form.login input[type="submit"],
.page_login .cmp_form.login button,
.page_login .cmp_form.login input[type="submit"],
form.cmp_form.login button,
form.cmp_form.login input[type="submit"] {
    display: inline-block !important;
    min-width: 92px !important;
    min-height: 38px !important;
    margin: 0 8px 0 0 !important;
    padding: 8px 16px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: #145f8d !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
}

.pkp_page_login .cmp_form.login button:hover,
.pkp_page_login .cmp_form.login input[type="submit"]:hover,
.page_login .cmp_form.login button:hover,
.page_login .cmp_form.login input[type="submit"]:hover {
    background: #0e4c73 !important;
}

/* Register link beside button */
.pkp_page_login .cmp_form.login .register,
.page_login .cmp_form.login .register {
    display: inline-block !important;
    margin-left: 4px !important;
    font-size: 13px !important;
}

/* Required field note */
.pkp_page_login .pkp_structure_main > p,
.page_login .pkp_structure_main > p {
    margin: 0 0 12px !important;
    color: #556571 !important;
    font-size: 13.5px !important;
}

/* =========================
   C. LOGIN PAGE WIDTH BALANCE
   ========================= */
@media (min-width: 1050px) {
    .pkp_page_login .pkp_structure_main,
    .page_login .pkp_structure_main {
        width: calc(100% - 325px) !important;
    }
}

/* =========================
   D. MOBILE NAVIGATION
   ========================= */
@media (max-width: 768px) {

    /* Open Menu boleh tampil di HP */
    .pkp_site_nav_toggle,
    button.pkp_site_nav_toggle,
    a.pkp_site_nav_toggle {
        display: inline-flex !important;
        visibility: visible !important;
        width: auto !important;
        height: auto !important;
        margin: 8px 13px !important;
        padding: 9px 13px !important;
        overflow: visible !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 5px !important;
        background: #123f67 !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
    }

    .pkp_navigation_primary_row {
        display: block !important;
        padding: 0 !important;
    }

    .pkp_navigation_primary {
        display: block !important;
        width: 100% !important;
    }

    .pkp_navigation_primary > li {
        display: block !important;
        width: 100% !important;
    }

    .pkp_navigation_primary > li > a {
        display: block !important;
        padding: 11px 14px !important;
        border-top: 1px solid rgba(255,255,255,.10) !important;
        color: #ffffff !important;
        font-size: 13px !important;
    }

    .pkp_navigation_search_wrapper {
        display: block !important;
        width: 100% !important;
    }

    .pkp_navigation_search_wrapper a {
        display: block !important;
        padding: 11px 14px !important;
        color: #ffffff !important;
    }

    .pkp_page_login .cmp_form.login,
    .page_login .cmp_form.login,
    form.cmp_form.login {
        max-width: 100% !important;
        padding: 18px 16px !important;
    }
}

/* =========================
   E. LAST-RESORT OJS 3.1 OVERRIDES
   ========================= */
/* Beberapa OJS 3.1 menggunakan atribut aria-expanded/classes untuk menyembunyikan menu. */
@media (min-width: 769px) {
    .pkp_site_nav_menu[aria-hidden="true"],
    .pkp_site_nav_menu.is_open,
    .pkp_site_nav_menu.is_closed {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* END V3 LOGIN + NAVIGATION FIX */