/* =========================================================
   EKOSISTEM JOURNAL - OJS 3.5
   FULL CUSTOM CSS + IKON MENU
   BLUE • DARK BLUE • GOLD
   ========================================================= */

/* =========================================================
   1. WARNA UTAMA
   ========================================================= */
:root {
    --eko-blue: #3b6e94;
    --eko-blue-dark: #25465f;
    --eko-dark: #17364d;
    --eko-text: #263746;
    --eko-light: #f1f6fa;
    --eko-border: #d7e2eb;
    --eko-gold: #d9a441;
    --eko-gold-light: #fff5dc;
    --eko-white: #ffffff;
}

/* =========================================================
   2. BODY
   ========================================================= */
html,
body {
    background: #edf1f5 !important;
    color: var(--eko-text) !important;
}

/* =========================================================
   3. CONTAINER UTAMA
   ========================================================= */
.pkp_structure_page {
    margin: 0 auto !important;
    padding: 0 0 0 !important;
    background: #ffffff !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
}

/* =========================================================
   4. HEADER
   ========================================================= */
.pkp_structure_head {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--eko-blue) !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

.pkp_site_name_wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

.pkp_site_name {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
}

.pkp_site_name>a,
.pkp_site_name>a.is_img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    background: transparent !important;
}

.pkp_site_name img,
.pkp_site_name .is_img img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    box-shadow: none !important;
}

.pkp_site_name h1,
.pkp_site_name h2,
.pkp_site_name p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* =========================================================
   5. ADMIN / USER MENU
   ========================================================= */
.pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 12px !important;
    right: 22px !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.pkp_navigation_user_wrapper>ul {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    list-style: none !important;
}

.pkp_navigation_user_wrapper>ul>li {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.pkp_navigation_user_wrapper>ul>li>a,
.pkp_navigation_user_wrapper>ul>li>a:link,
.pkp_navigation_user_wrapper>ul>li>a:visited {
    display: inline-block !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    background: transparent !important;
    color: #17364d !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, .95) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.pkp_navigation_user_wrapper>ul>li>a:hover {
    background: rgba(255, 255, 255, .35) !important;
    color: var(--eko-dark) !important;
    border-radius: 5px !important;
    text-shadow: 0 1px 2px #ffffff !important;
}

/* LOGIN & REGISTER */
.pkp_navigation_user_wrapper a,
.pkp_navigation_user_wrapper a:link,
.pkp_navigation_user_wrapper a:visited,
.pkp_navigation_user .login a,
.pkp_navigation_user .register a {
    color: #17364d !important;
    background: transparent !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, .95) !important;
}

.pkp_navigation_user_wrapper a:hover,
.pkp_navigation_user .login a:hover,
.pkp_navigation_user .register a:hover {
    color: var(--eko-dark) !important;
    background: rgba(255, 255, 255, .35) !important;
    border-radius: 5px !important;
    text-shadow: 0 1px 2px #ffffff !important;
}

.pkp_navigation_user .login,
.pkp_navigation_user .register {
    color: #17364d !important;
}

/* IKON USER */
.pkp_navigation_user_wrapper svg,
.pkp_navigation_user_wrapper .fa,
.pkp_navigation_user_wrapper .fa-solid,
.pkp_navigation_user_wrapper .fa-user {
    color: #17364d !important;
    fill: #17364d !important;
}

/* DROPDOWN USER */
.pkp_navigation_user_wrapper ul li ul,
.pkp_navigation_user_wrapper .dropdown-menu,
.pkp_dropdown__content {
    background: var(--eko-blue-dark) !important;
    border: 0 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15) !important;
    border-radius: 0 0 8px 8px !important;
}

.pkp_navigation_user_wrapper ul li ul a,
.pkp_navigation_user_wrapper ul li ul a:link,
.pkp_navigation_user_wrapper ul li ul a:visited,
.pkp_dropdown__content a {
    display: block !important;
    background: var(--eko-blue-dark) !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

.pkp_navigation_user_wrapper ul li ul a:hover,
.pkp_dropdown__content a:hover {
    background: var(--eko-dark) !important;
    color: #ffffff !important;
}

/* =========================================================
   6. NAVBAR
   ========================================================= */
.pkp_site_nav_menu {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--eko-blue) !important;
    border-top: 3px solid var(--eko-gold) !important;
    box-shadow: none !important;
}

.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background: var(--eko-blue) !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

.pkp_navigation_primary_row {
    padding-left: 25px !important;
    padding-right: 25px !important;
}

.pkp_navigation_primary_wrapper a,
.pkp_navigation_primary_wrapper a:link,
.pkp_navigation_primary_wrapper a:visited {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

.pkp_navigation_primary_wrapper a:hover {
    color: #ffffff !important;
    background: var(--eko-blue-dark) !important;
}

/* DROPDOWN NAVBAR */
.pkp_navigation_primary_wrapper ul li ul {
    background: var(--eko-blue-dark) !important;
    border: 0 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15) !important;
}

.pkp_navigation_primary_wrapper ul li ul a,
.pkp_navigation_primary_wrapper ul li ul a:link,
.pkp_navigation_primary_wrapper ul li ul a:visited {
    background: var(--eko-blue-dark) !important;
    color: #ffffff !important;
}

.pkp_navigation_primary_wrapper ul li ul a:hover {
    background: var(--eko-dark) !important;
    color: #ffffff !important;
}

/* =========================================================
   7. IKON MENU NAVBAR
   ========================================================= */
#navigationPrimary>li>a::before {
    font-family: FontAwesome;
    display: inline-block;
    margin-right: 7px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

/* HOME */
#navigationPrimary>li:nth-child(1)>a::before {
    content: "\f015";
}

/* CURRENT */
#navigationPrimary>li:nth-child(2)>a::before {
    content: "\f02d";
}

/* ARCHIVES */
#navigationPrimary>li:nth-child(3)>a::before {
    content: "\f187";
}

/* SUBMISSIONS */
#navigationPrimary>li:nth-child(4)>a::before {
    content: "\f044";
}

/* CONTACT */
#navigationPrimary>li:nth-child(5)>a::before {
    content: "\f0e0";
}

/* ABOUT */
#navigationPrimary>li:nth-child(6)>a::before {
    content: "\f05a";
}

/* IKON SEARCH */
.pkp_navigation_search_wrapper .fa-search {
    margin-right: 5px;
}

/* =========================================================
   8. AREA KONTEN
   ========================================================= */
.pkp_structure_content {
    background: #ffffff !important;
    margin: 0 !important;
    padding-top: 0 !important;
}

/* =========================================================
   9. ARTICLE CARD — UKURAN COMPACT
   ========================================================= */
.obj_article_summary {
    box-sizing: border-box !important;
    position: relative !important;
    padding: 13px 15px !important;
    margin: 0 0 13px 0 !important;

    background: #ffffff !important;

    /* Garis pinggir semua sisi */
    border: 1px solid #cbdce8 !important;
    border-top: 2px solid var(--eko-blue) !important;
    border-right: 1px solid #cbdce8 !important;
    border-bottom: 2px solid var(--eko-gold) !important;
    border-left: 4px solid var(--eko-blue) !important;

    border-radius: 7px !important;
    box-shadow: 0 2px 7px rgba(39, 77, 106, .06) !important;

    transition: border-color .2s ease, box-shadow .2s ease !important;
}

/* HOVER CARD */
.obj_article_summary:hover {
    border-top-color: var(--eko-gold) !important;
    border-right-color: var(--eko-blue) !important;
    border-bottom-color: var(--eko-gold) !important;
    border-left-color: var(--eko-gold) !important;
    box-shadow: 0 4px 12px rgba(39, 77, 106, .11) !important;
    background: #ffffff !important;
    transform: none !important;
}

/* =========================================================
   10. JUDUL ARTIKEL
   ========================================================= */
.obj_article_summary .title {
    margin: 0 0 7px !important;
    padding-bottom: 7px !important;
    border-bottom: 1px solid #e3ebf1 !important;

    font-size: 15px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    color: var(--eko-blue-dark) !important;
}

.obj_article_summary .title a {
    color: var(--eko-blue-dark) !important;
    text-decoration: none !important;
    transition: color .2s ease !important;
}

.obj_article_summary .title a:hover {
    color: var(--eko-blue) !important;
    text-decoration: none !important;
}

/* =========================================================
   11. NAMA PENULIS
   ========================================================= */
.obj_article_summary .authors {
    margin: 0 0 7px !important;
    color: #647789 !important;
    font-size: 11px !important;
    line-height: 1.65 !important;
}

.obj_article_summary .authors a {
    color: var(--eko-blue) !important;
    text-decoration: none !important;
}

.obj_article_summary .authors a:hover {
    color: #a47723 !important;
    text-decoration: underline !important;
}

/* =========================================================
   12. RINGKASAN ARTIKEL
   ========================================================= */
.obj_article_summary .summary,
.obj_article_summary .summary p {
    margin-top: 5px !important;
    margin-bottom: 8px !important;
    color: #465867 !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
    text-align: justify !important;
}

/* =========================================================
   13. METADATA ARTIKEL
   ========================================================= */
.obj_article_summary .meta,
.obj_article_summary .published,
.obj_article_summary .pages,
.obj_article_summary .doi {
    color: #6b7f90 !important;
    font-size: 10px !important;
    line-height: 1.65 !important;
}

/* =========================================================
   14. KEYWORDS — MATCH SIDEBAR BLUE & GOLD
   ========================================================= */

/* Kotak keywords */
.obj_article_summary .keywords,
.obj_article_summary .item.keywords,
.obj_article_summary .item.keywords .value {
    box-sizing: border-box !important;
    margin-top: 9px !important;
    padding: 7px 9px !important;

    background: var(--eko-light) !important;
    border: 1px solid #cbdce8 !important;
    border-left: 3px solid var(--eko-gold) !important;
    border-radius: 5px !important;

    color: var(--eko-blue-dark) !important;
    font-size: 11px !important;
    line-height: 1.8 !important;
}

/* Label Keywords */
.obj_article_summary .keywords strong,
.obj_article_summary .keywords b,
.obj_article_summary .item.keywords .label {
    color: var(--eko-blue-dark) !important;
    font-weight: 700 !important;
}

/* Keyword berbentuk tag */
.obj_article_summary .keywords a,
.obj_article_summary .item.keywords a,
.obj_article_summary .item.keywords .value a {
    display: inline-block !important;
    width: auto !important;
    margin: 2px 3px 2px 0 !important;
    padding: 3px 7px !important;

    background: #ffffff !important;
    border: 1px solid #cbdce8 !important;
    border-radius: 4px !important;

    color: var(--eko-blue-dark) !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;

    transition: background .2s ease, border-color .2s ease,
        color .2s ease !important;
}

/* Hover keyword */
.obj_article_summary .keywords a:hover,
.obj_article_summary .item.keywords a:hover,
.obj_article_summary .item.keywords .value a:hover {
    background: var(--eko-blue) !important;
    border-color: var(--eko-gold) !important;
    color: #ffffff !important;
}

/* =========================================================
   15. DOI DAN TAUTAN LAIN
   ========================================================= */
.obj_article_summary .doi a,
.obj_article_summary .meta a {
    color: var(--eko-blue) !important;
    overflow-wrap: anywhere !important;
}

.obj_article_summary .doi a:hover,
.obj_article_summary .meta a:hover {
    color: #a47723 !important;
}

/* =========================================================
   16. TOMBOL PDF / GALLEY
   ========================================================= */
.obj_article_summary .galleys_links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 9px !important;
}

.obj_article_summary .galleys_links a,
.obj_article_summary .obj_galley_link {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 5px 10px !important;

    background: var(--eko-blue) !important;
    border: 1px solid var(--eko-blue) !important;
    border-radius: 5px !important;

    color: #ffffff !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    text-decoration: none !important;

    transition: background .2s ease, border-color .2s ease !important;
}

.obj_article_summary .galleys_links a:hover,
.obj_article_summary .obj_galley_link:hover {
    background: var(--eko-blue-dark) !important;
    border-color: var(--eko-gold) !important;
    color: #ffffff !important;
}

/* =========================================================
   17. JARAK ANTARARTIKEL
   ========================================================= */
ul.issues_archive>li,
ul.articles>li {
    margin-bottom: 11px !important;
}

ul.issues_archive,
ul.articles {
    list-style: none !important;
}

/* =========================================================
   18. FOOTER
   ========================================================= */
.pkp_structure_footer,
.pkp_structure_footer_wrapper,
.pkp_footer_content {
    background: var(--eko-blue) !important;
    color: #ffffff !important;
}

.pkp_structure_footer {
    margin-top: 30px !important;
    border: 0 !important;
}

.pkp_structure_footer a,
.pkp_structure_footer a:link,
.pkp_structure_footer a:visited {
    color: #ffffff !important;
}

.pkp_structure_footer a:hover {
    color: #f1d69b !important;
}

.pkp_footer_content {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

/* =========================================================
   19. LOGIN PAGE
   ========================================================= */
.pkp_form .buttons button,
.pkp_form .buttons input[type="submit"] {
    background: var(--eko-blue) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 6px !important;
}

.pkp_form .buttons button:hover,
.pkp_form .buttons input[type="submit"]:hover {
    background: var(--eko-blue-dark) !important;
    color: #ffffff !important;
}

/* =========================================================
   20. FORM FOCUS
   ========================================================= */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--eko-blue) !important;
    box-shadow: 0 0 0 2px rgba(59, 110, 148, .15) !important;
    outline: none !important;
}

/* =========================================================
   21. TABLE
   ========================================================= */
table {
    border-color: var(--eko-border) !important;
}

table th {
    background: var(--eko-blue) !important;
    color: #ffffff !important;
}

table td {
    border-color: var(--eko-border) !important;
}

/* =========================================================
   22. BUTTON UMUM
   ========================================================= */
button,
.button,
a.button {
    border-radius: 6px !important;
}

/* =========================================================
   23. STRUKTUR HALAMAN
   ========================================================= */
.pkp_structure_page {
    padding-bottom: 0 !important;
}

.pkp_structure_head *,
.pkp_site_name_wrapper *,
.pkp_site_name * {
    box-sizing: border-box !important;
}

/* =========================================================
   24. RESPONSIVE MOBILE
   ========================================================= */
@media (max-width: 768px) {
    .pkp_structure_head {
        padding: 0 !important;
    }

    .pkp_site_name img,
    .pkp_site_name .is_img img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    .pkp_navigation_user_wrapper {
        top: 5px !important;
        right: 5px !important;
    }

    .pkp_navigation_user_wrapper>ul>li>a {
        padding: 5px 6px !important;
        font-size: 10px !important;
    }

    .pkp_navigation_primary_row {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .obj_article_summary {
        padding: 11px 12px !important;
        margin-bottom: 10px !important;
    }

    .obj_article_summary .title {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

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

    .obj_article_summary .summary,
    .obj_article_summary .summary p {
        font-size: 11px !important;
        line-height: 1.65 !important;
    }

    .obj_article_summary .keywords,
    .obj_article_summary .item.keywords,
    .obj_article_summary .item.keywords .value {
        padding: 6px 7px !important;
    }

    .obj_article_summary .galleys_links a,
    .obj_article_summary .obj_galley_link {
        padding: 5px 8px !important;
    }
}