/* =========================================================
   MANTRA JOURNAL
   COMPLETE CUSTOM CSS
   HEADER + COVER + TITLE + NAVIGATION
   BLUE ACADEMIC JOURNAL DESIGN
   RESPONSIVE DESKTOP / TABLET / MOBILE
   ========================================================= */


/* =========================================================
   1. VARIABLES
   ========================================================= */

:root {
    --eco-dark: #032f63;
    --eco-blue: #0756a3;
    --eco-blue-2: #0878d1;
    --eco-sky: #35a9ed;

    --eco-text: #243447;
    --eco-muted: #667085;

    --eco-border: #dbe5ef;
    --eco-light: #f5f8fc;

    --eco-white: #ffffff;
}


/* =========================================================
   2. GLOBAL RESET
   ========================================================= */

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

body {
    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    color:
        var(--eco-text) !important;

    background:
        var(--eco-light) !important;

    line-height:
        1.6 !important;
}

* {
    box-sizing:
        border-box !important;
}


/* =========================================================
   3. OJS HEADER AREA
   ========================================================= */

.pkp_structure_head {

    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    max-width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    overflow:
        visible !important;

    z-index:
        1000 !important;
}


/* =========================================================
   4. MAIN JOURNAL HEADER
   ========================================================= */

.pkp_head_wrapper {

    position:
        relative !important;

    display:
        flex !important;

    align-items:
        center !important;

    width:
        100% !important;

    max-width:
        100% !important;

    height:
        118px !important;

    min-height:
        118px !important;

    margin:
        0 !important;

    padding:
        7px 42px !important;

    background:
        linear-gradient(
            115deg,
            var(--eco-dark) 0%,
            var(--eco-blue) 42%,
            var(--eco-blue-2) 76%,
            var(--eco-sky) 100%
        ) !important;

    border:
        0 !important;

    box-shadow:
        0 4px 12px
        rgba(0, 45, 90, 0.22) !important;

    overflow:
        visible !important;

    z-index:
        1000 !important;
}


/* =========================================================
   5. MANTRA COVER
   ========================================================= */

.pkp_head_wrapper::before {

    content:
        "" !important;

    display:
        block !important;

    flex:
        0 0 88px !important;

    width:
        88px !important;

    height:
        106px !important;

    margin:
        0 24px 0 0 !important;

    background-image:
        url(
            "https://ejournal.hmedupustaka.or.id/public/site/images/icons/MANTRA3D.png"
        ) !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center !important;

    background-size:
        contain !important;

    border-radius:
        4px !important;

    filter:
        drop-shadow(
            0 5px 8px
            rgba(0, 0, 0, 0.30)
        ) !important;

    z-index:
        2 !important;
}


/* =========================================================
   6. JOURNAL NAME CONTAINER
   ========================================================= */

.pkp_site_name {

    position:
        relative !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    flex:
        1 1 auto !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    line-height:
        1.15 !important;
}


/* =========================================================
   7. JOURNAL TITLE
   ========================================================= */

.pkp_site_name a {

    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #ffffff !important;

    font-size:
        clamp(
            16px,
            2.7vw,
            24px
        ) !important;

    font-weight:
        800 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        0.1px !important;

    text-decoration:
        none !important;

    text-shadow:
        0 2px 5px
        rgba(0,0,0,0.22) !important;
}


/* =========================================================
   8. DECORATIVE LINE
   ========================================================= */

.pkp_site_name::before {

    content:
        "" !important;

    display:
        block !important;

    width:
        58px !important;

    height:
        2px !important;

    margin:
        0 0 8px 0 !important;

    background:
        rgba(255,255,255,0.92) !important;
}


/* =========================================================
   9. JOURNAL SUBTITLE
   ========================================================= */

.pkp_site_name::after {

    content:
        "MANTRA • e-ISSN xxxx-xxxx" !important;

    display:
        block !important;

    margin:
        6px 0 0 0 !important;

    color:
        rgba(255,255,255,0.90) !important;

    font-size:
        12px !important;

    font-weight:
        400 !important;

    line-height:
        1.3 !important;

    letter-spacing:
        0.3px !important;
}


/* =========================================================
   10. NAVIGATION BAR
   COMPLETELY SEPARATE FROM HEADER
   ========================================================= */

.pkp_navigation_primary_row {

    position:
        relative !important;

    display:
        block !important;

    clear:
        both !important;

    float:
        none !important;

    width:
        100% !important;

    max-width:
        100% !important;

    height:
        48px !important;

    min-height:
        48px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        linear-gradient(
            90deg,
            var(--eco-dark) 0%,
            var(--eco-blue) 50%,
            var(--eco-blue-2) 100%
        ) !important;

    border-top:
        1px solid
        rgba(255,255,255,0.20) !important;

    border-bottom:
        1px solid
        rgba(0,0,0,0.18) !important;

    box-shadow:
        0 2px 7px
        rgba(0,0,0,0.15) !important;

    z-index:
        9000 !important;
}


/* =========================================================
   11. NAVIGATION WRAPPER
   ========================================================= */

.pkp_navigation_primary_wrapper {

    position:
        relative !important;

    display:
        flex !important;

    align-items:
        center !important;

    width:
        100% !important;

    max-width:
        1220px !important;

    height:
        48px !important;

    min-height:
        48px !important;

    margin:
        0 auto !important;

    padding:
        0 20px !important;

    box-sizing:
        border-box !important;

    overflow:
        visible !important;
}


/* =========================================================
   12. PRIMARY MENU
   ========================================================= */

.pkp_navigation_primary {

    position:
        relative !important;

    display:
        flex !important;

    align-items:
        center !important;

    flex:
        1 1 auto !important;

    width:
        auto !important;

    max-width:
        calc(100% - 65px) !important;

    height:
        48px !important;

    min-height:
        48px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        0 !important;

    overflow:
        visible !important;

    list-style:
        none !important;
}


/* =========================================================
   13. MENU ITEM
   ========================================================= */

.pkp_navigation_primary > li {

    position:
        relative !important;

    display:
        flex !important;

    align-items:
        center !important;

    flex:
        0 0 auto !important;

    height:
        48px !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* =========================================================
   14. MENU LINK
   ========================================================= */

.pkp_navigation_primary > li > a {

    position:
        relative !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    height:
        48px !important;

    margin:
        0 !important;

    padding:
        0 15px !important;

    color:
        #ffffff !important;

    background:
        transparent !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    line-height:
        48px !important;

    white-space:
        nowrap !important;

    text-decoration:
        none !important;

    transition:
        all .25s ease !important;
}


/* =========================================================
   15. MENU HOVER
   ========================================================= */

.pkp_navigation_primary > li > a:hover {

    color:
        #ffffff !important;

    background:
        rgba(255,255,255,0.15) !important;

    text-decoration:
        none !important;
}


/* =========================================================
   16. ACTIVE MENU
   ========================================================= */

.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li.active > a {

    color:
        #ffffff !important;

    background:
        rgba(255,255,255,0.10) !important;

    box-shadow:
        inset 0 -3px 0
        #ffffff !important;
}


/* =========================================================
   17. DROPDOWN PARENT
   ========================================================= */

.pkp_navigation_primary > li.has-dropdown,
.pkp_navigation_primary > li.dropdown {

    position:
        relative !important;
}


/* =========================================================
   18. DROPDOWN ARROW
   ========================================================= */

.pkp_navigation_primary > li.has-dropdown > a::after,
.pkp_navigation_primary > li.dropdown > a::after {

    content:
        "" !important;

    display:
        inline-block !important;

    width:
        6px !important;

    height:
        6px !important;

    margin:
        -3px 0 0 8px !important;

    border-right:
        1.5px solid #ffffff !important;

    border-bottom:
        1.5px solid #ffffff !important;

    transform:
        rotate(45deg) !important;

    transition:
        transform .2s ease !important;
}


/* =========================================================
   19. DROPDOWN MENU
   ========================================================= */

.pkp_navigation_primary .dropdown-menu {

    position:
        absolute !important;

    top:
        48px !important;

    left:
        0 !important;

    display:
        none !important;

    width:
        max-content !important;

    min-width:
        210px !important;

    max-width:
        300px !important;

    margin:
        0 !important;

    padding:
        5px 0 !important;

    background:
        #ffffff !important;

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

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

    box-shadow:
        0 7px 18px
        rgba(0,0,0,0.18) !important;

    z-index:
        99999 !important;

    overflow:
        visible !important;

    list-style:
        none !important;
}


/* =========================================================
   20. SHOW DROPDOWN ON HOVER
   ========================================================= */

.pkp_navigation_primary > li:hover > .dropdown-menu,
.pkp_navigation_primary > li:focus-within > .dropdown-menu {

    display:
        block !important;
}


/* =========================================================
   21. ARROW ROTATION
   ========================================================= */

.pkp_navigation_primary > li.has-dropdown:hover > a::after,
.pkp_navigation_primary > li.dropdown:hover > a::after,
.pkp_navigation_primary > li:focus-within > a::after {

    transform:
        rotate(225deg) !important;
}


/* =========================================================
   22. DROPDOWN ITEM
   ========================================================= */

.pkp_navigation_primary .dropdown-menu li {

    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* =========================================================
   23. DROPDOWN LINK
   ========================================================= */

.pkp_navigation_primary .dropdown-menu a {

    display:
        block !important;

    width:
        100% !important;

    padding:
        9px 18px !important;

    color:
        #164a7a !important;

    background:
        #ffffff !important;

    font-size:
        13px !important;

    line-height:
        1.4 !important;

    font-weight:
        500 !important;

    white-space:
        nowrap !important;

    text-decoration:
        none !important;

    transition:
        all .20s ease !important;
}


/* =========================================================
   24. DROPDOWN HOVER
   ========================================================= */

.pkp_navigation_primary .dropdown-menu a:hover {

    color:
        var(--eco-blue) !important;

    background:
        #eef6ff !important;

    padding-left:
        22px !important;
}


/* =========================================================
   25. NESTED DROPDOWN
   ========================================================= */

.pkp_navigation_primary .dropdown-menu .dropdown-menu {

    top:
        -6px !important;

    left:
        100% !important;

    border-radius:
        6px !important;
}


/* =========================================================
   26. SEARCH AREA
   ========================================================= */

.pkp_navigation_search_wrapper {

    flex:
        0 0 58px !important;

    width:
        58px !important;

    height:
        48px !important;

    min-width:
        58px !important;

    margin:
        0 0 0 auto !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    background:
        transparent !important;

    z-index:
        100 !important;
}


/* =========================================================
   27. SEARCH BUTTON
   ========================================================= */

.pkp_navigation_search_wrapper button,
.pkp_navigation_search_wrapper a {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        38px !important;

    height:
        38px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #ffffff !important;

    background:
        rgba(255,255,255,0.10) !important;

    border:
        1px solid
        rgba(255,255,255,0.25) !important;

    border-radius:
        50% !important;
}


.pkp_navigation_search_wrapper button:hover,
.pkp_navigation_search_wrapper a:hover {

    color:
        #ffffff !important;

    background:
        rgba(255,255,255,0.23) !important;
}


/* =========================================================
   28. CONTENT
   ========================================================= */

.pkp_structure_content {

    width:
        100% !important;

    max-width:
        1220px !important;

    margin:
        0 auto !important;

    padding:
        30px 20px !important;
}


/* =========================================================
   29. ECO PAGE
   ========================================================= */

.eco-page {

    width:
        100% !important;

    max-width:
        1180px !important;

    margin:
        0 auto !important;
}


/* =========================================================
   30. ECO CARD
   ========================================================= */

.eco-card {

    width:
        100% !important;

    padding:
        25px !important;

    background:
        #ffffff !important;

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

    border-radius:
        10px !important;

    box-shadow:
        0 4px 18px
        rgba(0,0,0,0.06) !important;
}


/* =========================================================
   31. PAGE HEADINGS
   ========================================================= */

.eco-page h1,
.eco-page h2,
.eco-page h3 {

    color:
        var(--eco-dark) !important;

    font-weight:
        700 !important;
}


.eco-page h2 {

    position:
        relative !important;

    margin:
        0 0 20px 0 !important;

    padding:
        0 0 10px 0 !important;

    border-bottom:
        2px solid
        #e5edf5 !important;
}


.eco-page h2::after {

    content:
        "" !important;

    position:
        absolute !important;

    left:
        0 !important;

    bottom:
        -2px !important;

    width:
        60px !important;

    height:
        2px !important;

    background:
        var(--eco-blue) !important;
}


/* =========================================================
   32. COVER CONTENT
   ========================================================= */

.eco-info {

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        30px !important;

    width:
        100% !important;
}


.eco-cover {

    flex:
        0 0 320px !important;

    text-align:
        center !important;
}


.eco-cover img {

    display:
        block !important;

    width:
        100% !important;

    max-width:
        320px !important;

    height:
        auto !important;

    margin:
        0 auto !important;

    border-radius:
        5px !important;

    box-shadow:
        0 8px 20px
        rgba(0,0,0,0.16) !important;
}


.eco-details {

    flex:
        1 1 auto !important;

    min-width:
        0 !important;
}


/* =========================================================
   33. BUTTON
   ========================================================= */

.eco-btn {

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        40px !important;

    padding:
        9px 18px !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--eco-blue),
            var(--eco-blue-2)
        ) !important;

    border:
        0 !important;

    border-radius:
        5px !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    text-decoration:
        none !important;

    transition:
        all .25s ease !important;
}


.eco-btn:hover {

    color:
        #ffffff !important;

    transform:
        translateY(-1px) !important;

    box-shadow:
        0 5px 12px
        rgba(7,86,163,0.25) !important;
}


/* =========================================================
   34. TABLE
   ========================================================= */

.eco-page table {

    width:
        100% !important;

    border-collapse:
        collapse !important;

    background:
        #ffffff !important;
}


.eco-page table th {

    padding:
        11px 12px !important;

    color:
        #ffffff !important;

    background:
        var(--eco-blue) !important;

    font-weight:
        600 !important;

    text-align:
        left !important;
}


.eco-page table td {

    padding:
        10px 12px !important;

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


.eco-page table tr:nth-child(even) td {

    background:
        #f7faff !important;
}


/* =========================================================
   35. FOOTER
   ========================================================= */

.pkp_structure_footer_wrapper {

    margin-top:
        40px !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--eco-dark),
            var(--eco-blue)
        ) !important;
}


.pkp_structure_footer {

    width:
        100% !important;

    max-width:
        1220px !important;

    margin:
        0 auto !important;

    padding:
        30px 20px !important;
}


/* =========================================================
   36. TABLET
   ========================================================= */

@media (max-width: 991px) {

    .pkp_head_wrapper {

        height:
            108px !important;

        min-height:
            108px !important;

        padding:
            6px 25px !important;
    }


    .pkp_head_wrapper::before {

        flex-basis:
            76px !important;

        width:
            76px !important;

        height:
            94px !important;

        margin-right:
            18px !important;
    }


    .pkp_site_name a {

        font-size:
            24px !important;
    }


    .pkp_navigation_primary > li > a {

        padding:
            0 10px !important;

        font-size:
            12px !important;
    }


    .eco-info {

        gap:
            20px !important;
    }


    .eco-cover {

        flex-basis:
            250px !important;
    }
}


/* =========================================================
   37. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .pkp_head_wrapper {

        height:
            98px !important;

        min-height:
            98px !important;

        padding:
            5px 14px !important;
    }


    .pkp_head_wrapper::before {

        flex-basis:
            64px !important;

        width:
            64px !important;

        height:
            85px !important;

        margin-right:
            13px !important;
    }


    .pkp_site_name a {

        font-size:
            18px !important;

        line-height:
            1.15 !important;
    }


    .pkp_site_name::before {

        width:
            38px !important;

        margin-bottom:
            5px !important;
    }


    .pkp_site_name::after {

        font-size:
            9px !important;
    }


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

    .pkp_navigation_primary_row {

        height:
            46px !important;

        min-height:
            46px !important;

        overflow:
            visible !important;
    }


    .pkp_navigation_primary_wrapper {

        position:
            relative !important;

        height:
            46px !important;

        min-height:
            46px !important;

        padding:
            0 5px !important;

        overflow:
            visible !important;
    }


    .pkp_navigation_primary {

        max-width:
            calc(100% - 55px) !important;

        height:
            46px !important;

        min-height:
            46px !important;

        overflow-x:
            auto !important;

        overflow-y:
            visible !important;

        scrollbar-width:
            none !important;
    }


    .pkp_navigation_primary::-webkit-scrollbar {

        display:
            none !important;
    }


    .pkp_navigation_primary > li {

        height:
            46px !important;
    }


    .pkp_navigation_primary > li > a {

        height:
            46px !important;

        padding:
            0 10px !important;

        font-size:
            11px !important;
    }


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

    .pkp_navigation_primary .dropdown-menu {

        position:
            absolute !important;

        top:
            46px !important;

        left:
            0 !important;

        min-width:
            190px !important;

        max-width:
            calc(100vw - 20px) !important;

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

        box-shadow:
            0 7px 18px
            rgba(0,0,0,0.22) !important;
    }


    .pkp_navigation_primary > li:hover > .dropdown-menu,
    .pkp_navigation_primary > li:focus-within > .dropdown-menu {

        display:
            block !important;
    }


    .pkp_navigation_primary .dropdown-menu a {

        padding:
            10px 15px !important;

        font-size:
            12px !important;

        white-space:
            normal !important;
    }


    /* =====================================================
       NESTED DROPDOWN MOBILE
       ===================================================== */

    .pkp_navigation_primary .dropdown-menu .dropdown-menu {

        position:
            static !important;

        width:
            100% !important;

        min-width:
            100% !important;

        margin:
            0 !important;

        border:
            0 !important;

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

        border-radius:
            0 !important;

        box-shadow:
            none !important;
    }


    /* =====================================================
       SEARCH
       ===================================================== */

    .pkp_navigation_search_wrapper {

        flex:
            0 0 50px !important;

        width:
            50px !important;

        min-width:
            50px !important;

        height:
            46px !important;
    }


    .pkp_navigation_search_wrapper button,
    .pkp_navigation_search_wrapper a {

        width:
            36px !important;

        height:
            36px !important;
    }


    /* =====================================================
       CONTENT
       ===================================================== */

    .pkp_structure_content {

        padding:
            20px 12px !important;
    }


    .eco-card {

        padding:
            18px !important;
    }


    .eco-info {

        flex-direction:
            column !important;

        align-items:
            center !important;

        gap:
            20px !important;
    }


    .eco-cover {

        flex:
            none !important;

        width:
            100% !important;

        max-width:
            280px !important;
    }


    .eco-cover img {

        max-width:
            280px !important;
    }
}


/* =========================================================
   38. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .pkp_head_wrapper {

        height:
            90px !important;

        min-height:
            90px !important;

        padding:
            4px 10px !important;
    }


    .pkp_head_wrapper::before {

        flex-basis:
            56px !important;

        width:
            56px !important;

        height:
            78px !important;

        margin-right:
            10px !important;
    }


    .pkp_site_name a {

        font-size:
            15px !important;
    }


    .pkp_site_name::after {

        font-size:
            8px !important;
    }


    .pkp_navigation_primary > li > a {

        padding:
            0 8px !important;

        font-size:
            10px !important;
    }


    .pkp_navigation_primary .dropdown-menu {

        min-width:
            175px !important;
    }


    .eco-card {

        padding:
            14px !important;
    }
}


/* =========================================================
   39. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .pkp_head_wrapper {

        height:
            84px !important;

        min-height:
            84px !important;
    }


    .pkp_head_wrapper::before {

        flex-basis:
            50px !important;

        width:
            50px !important;

        height:
            72px !important;
    }


    .pkp_site_name a {

        font-size:
            14px !important;
    }


    .pkp_site_name::after {

        font-size:
            7px !important;
    }
}