/* ==========================================================================
   JRTN GLOBAL STYLESHEET
   Journal of Rural and Tropical Nursing
   ========================================================================== */


/* ==========================================================================
   1–2. JRTN HEADER, NAVIGATION, AND ISSN — FINAL REDESIGN
   ========================================================================== */


/* --------------------------------------------------------------------------
   HEADER FOUNDATION
   -------------------------------------------------------------------------- */

.pkp_structure_head {
    position: relative !important;
    z-index: 1000 !important;

    width: 100% !important;

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

    background:
        linear-gradient(
            112deg,
            #183ea8 0%,
            #1766c9 58%,
            #0aa1d8 100%
        ) !important;

    border: 0 !important;
    box-shadow:
        0 6px 22px rgba(15, 45, 92, 0.14) !important;

    font-family: inherit !important;
}

.pkp_structure_head *,
.pkp_structure_head *::before,
.pkp_structure_head *::after {
    box-sizing: border-box !important;
}

.pkp_head_wrapper {
    position: relative !important;

    width: 100% !important;
    max-width: 1160px !important;

    min-height: 166px !important;

    margin: 0 auto !important;
    padding: 0 26px !important;
}


/* --------------------------------------------------------------------------
   DESKTOP BRAND AREA
   -------------------------------------------------------------------------- */

.pkp_site_name_wrapper {
    position: relative !important;

    display: flex !important;

    width: 100% !important;
    height: 112px !important;

    align-items: center !important;

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

.pkp_site_name {
    display: block !important;

    width: auto !important;
    max-width: 310px !important;

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

    text-align: left !important;
}

.pkp_site_name > a,
.pkp_site_name .is_img {
    display: flex !important;

    width: auto !important;

    align-items: center !important;
    justify-content: flex-start !important;

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

.pkp_site_name img {
    display: block !important;

    width: auto !important;
    max-width: 255px !important;
    height: auto !important;
    max-height: 74px !important;

    margin: 0 !important;

    object-fit: contain !important;
}


/* --------------------------------------------------------------------------
   ISSN — DESKTOP
   -------------------------------------------------------------------------- */

.pkp_head_wrapper::after {
    position: absolute !important;
    top: 70px !important;
    right: 26px !important;

    display: inline-flex !important;

    max-width: 58% !important;

    align-items: center !important;
    justify-content: flex-end !important;

    content:
        "E-ISSN: APPLICATION IN PROGRESS  |  P-ISSN: APPLICATION IN PROGRESS"
        !important;

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

    font-family: inherit !important;
    font-size: 0.66rem !important;
    font-weight: 750 !important;
    letter-spacing: 0.025em !important;
    line-height: 1.4 !important;
    text-align: right !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;

    pointer-events: none !important;
}


/* --------------------------------------------------------------------------
   USER NAVIGATION — REGISTER AND LOGIN
   -------------------------------------------------------------------------- */

.pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 10px !important;
    right: 26px !important;

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

.pkp_navigation_user {
    display: flex !important;

    gap: 5px !important;
    align-items: center !important;

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

.pkp_navigation_user > li {
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_user > li > a {
    display: inline-flex !important;

    min-height: 31px !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 6px 10px !important;

    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;

    background: transparent !important;

    border: 1px solid transparent !important;
    border-radius: 5px !important;

    font-family: inherit !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease !important;
}

.pkp_navigation_user > li:first-child > a {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    color: #ffffff !important;

    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}


/* --------------------------------------------------------------------------
   PRIMARY NAVIGATION BAR
   -------------------------------------------------------------------------- */

.pkp_navigation_primary_row {
    position: relative !important;

    width: auto !important;

    margin: 0 -26px !important;
    padding: 0 26px !important;

    background: rgba(7, 31, 96, 0.17) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom: 1px solid rgba(7, 35, 92, 0.08) !important;
}

.pkp_navigation_primary_wrapper {
    display: flex !important;

    width: 100% !important;
    min-height: 54px !important;

    align-items: stretch !important;

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

.pkp_navigation_primary {
    display: flex !important;

    gap: 3px !important;
    align-items: stretch !important;

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

.pkp_navigation_primary > li {
    position: relative !important;

    display: flex !important;
    align-items: stretch !important;

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

.pkp_navigation_primary > li > a {
    position: relative !important;

    display: inline-flex !important;

    min-height: 54px !important;

    align-items: center !important;
    justify-content: center !important;

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

    color: rgba(255, 255, 255, 0.92) !important;
    text-decoration: none !important;

    background: transparent !important;

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

    font-family: inherit !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    transition:
        color 160ms ease,
        background-color 160ms ease !important;
}

.pkp_navigation_primary > li > a::after {
    position: absolute !important;
    right: 13px !important;
    bottom: 0 !important;
    left: 13px !important;

    display: block !important;

    height: 3px !important;

    content: "" !important;

    background: #ffffff !important;
    border-radius: 3px 3px 0 0 !important;

    transform: scaleX(0) !important;
    transform-origin: center !important;

    transition: transform 170ms ease !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: #ffffff !important;

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

.pkp_navigation_primary > li > a:hover::after,
.pkp_navigation_primary > li > a:focus::after,
.pkp_navigation_primary > li.current > a::after,
.pkp_navigation_primary > li > a[aria-current="page"]::after {
    transform: scaleX(1) !important;
}

.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li > a[aria-current="page"] {
    color: #ffffff !important;
    font-weight: 700 !important;
}


/* --------------------------------------------------------------------------
   SUBMIT MANUSCRIPT — PRIMARY CTA
   Akan aktif otomatis setelah link ditambahkan ke Primary Navigation
   -------------------------------------------------------------------------- */

.pkp_navigation_primary
> li
> a[href*="/jrtn/submission"],
.pkp_navigation_primary
> li
> a[href$="/submission"] {
    min-height: 36px !important;

    align-self: center !important;

    margin: 9px 0 9px 9px !important;
    padding: 0 15px !important;

    color: #174f98 !important;

    background: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 6px !important;

    box-shadow:
        0 4px 12px rgba(7, 35, 92, 0.16) !important;

    font-size: 0.8rem !important;
    font-weight: 750 !important;
}

.pkp_navigation_primary
> li
> a[href*="/jrtn/submission"]::after,
.pkp_navigation_primary
> li
> a[href$="/submission"]::after {
    display: none !important;
    content: none !important;
}

.pkp_navigation_primary
> li
> a[href*="/jrtn/submission"]:hover,
.pkp_navigation_primary
> li
> a[href*="/jrtn/submission"]:focus,
.pkp_navigation_primary
> li
> a[href$="/submission"]:hover,
.pkp_navigation_primary
> li
> a[href$="/submission"]:focus {
    color: #123f7c !important;

    background: #f4f8fc !important;
    border-color: #ffffff !important;

    transform: translateY(-1px) !important;
}


/* --------------------------------------------------------------------------
   SEARCH BUTTON
   -------------------------------------------------------------------------- */

.pkp_search {
    display: flex !important;

    align-items: center !important;

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

.pkp_search .search_prompt {
    display: inline-flex !important;

    min-height: 36px !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 9px 0 !important;
    padding: 0 12px !important;

    color: rgba(255, 255, 255, 0.94) !important;
    text-decoration: none !important;

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

    border: 1px solid rgba(255, 255, 255, 0.26) !important;
    border-radius: 6px !important;

    font-family: inherit !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;

    transition:
        background-color 160ms ease,
        border-color 160ms ease !important;
}

.pkp_search .search_prompt:hover,
.pkp_search .search_prompt:focus {
    color: #ffffff !important;

    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
}


/* --------------------------------------------------------------------------
   ABOUT DROPDOWN — STABLE HOVER BRIDGE
   Dropdown sits flush beneath the trigger and remains reachable by mouse
   and keyboard without crossing an inactive empty gap.
   -------------------------------------------------------------------------- */

.pkp_navigation_primary ul {
    min-width: 255px !important;

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

    background: #ffffff !important;

    border: 1px solid #d7e1ea !important;
    border-radius: 8px !important;

    box-shadow:
        0 14px 32px rgba(17, 38, 68, 0.17) !important;
}

.pkp_navigation_primary ul li {
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_primary ul a {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 10px 11px !important;

    color: #24364c !important;
    text-decoration: none !important;

    background: transparent !important;

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

    font-family: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus {
    color: #174f98 !important;
    background: #eef5fb !important;
}

@media (min-width: 992px) {

    .pkp_navigation_primary > li {
        position: relative !important;
    }

    .pkp_navigation_primary > li > ul {
        position: absolute !important;

        /* Overlap the trigger by 1px so there is no inactive gap. */
        top: calc(100% - 1px) !important;
        left: 0 !important;
        z-index: 300 !important;

        margin: 0 !important;

        visibility: hidden !important;
        opacity: 0 !important;

        pointer-events: none !important;

        transform: translateY(3px) !important;

        transition:
            opacity 140ms ease,
            transform 140ms ease,
            visibility 0ms linear 180ms !important;
    }

    /* Invisible bridge extends upward into the About trigger area. */
    .pkp_navigation_primary > li > ul::before {
        position: absolute !important;
        top: -10px !important;
        right: 0 !important;
        left: 0 !important;

        display: block !important;

        height: 10px !important;

        content: "" !important;

        background: transparent !important;

        pointer-events: auto !important;
    }

    .pkp_navigation_primary > li:hover > ul,
    .pkp_navigation_primary > li:focus-within > ul {
        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: auto !important;

        transform: translateY(0) !important;

        transition-delay: 0ms !important;
    }
}


/* --------------------------------------------------------------------------
   KEYBOARD ACCESSIBILITY
   -------------------------------------------------------------------------- */

.pkp_structure_head a:focus-visible,
.pkp_site_nav_toggle:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.48) !important;
    outline-offset: 2px !important;
}


/* ==========================================================================
   MOBILE AND TABLET HEADER
   ========================================================================== */

@media (max-width: 991px) {

    /* ----------------------------------------------------------------------
       MOBILE HEADER FOUNDATION
       ---------------------------------------------------------------------- */

    .pkp_structure_head {
        min-height: 96px !important;

        box-shadow:
            0 5px 18px rgba(15, 45, 92, 0.16) !important;
    }

    .pkp_head_wrapper {
        width: 100% !important;
        max-width: none !important;

        min-height: 96px !important;

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


    /* ----------------------------------------------------------------------
       MOBILE BRANDING BAR — 64PX
       ---------------------------------------------------------------------- */

    .pkp_site_name_wrapper {
        position: relative !important;

        display: flex !important;

        width: 100% !important;
        height: 64px !important;

        align-items: center !important;

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

        background: transparent !important;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.12) !important;
    }

    .pkp_site_name {
        display: block !important;

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

        margin: 0 !important;
        padding: 0 12px 0 56px !important;

        text-align: left !important;
    }

    .pkp_site_name > a,
    .pkp_site_name .is_img {
        display: flex !important;

        width: 100% !important;

        align-items: center !important;
        justify-content: flex-start !important;
    }

    .pkp_site_name img {
        width: auto !important;
        max-width: 166px !important;
        height: auto !important;
        max-height: 42px !important;

        margin: 0 !important;
    }


    /* ----------------------------------------------------------------------
       MOBILE MENU TOGGLE
       ---------------------------------------------------------------------- */

    .pkp_site_nav_toggle {
        position: absolute !important;
        top: 11px !important;
        left: 12px !important;
        z-index: 5 !important;

        display: inline-flex !important;

        width: 42px !important;
        height: 42px !important;

        align-items: center !important;
        justify-content: center !important;

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

        color: #ffffff !important;

        background: rgba(5, 31, 91, 0.24) !important;

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

        box-shadow: none !important;
    }

    .pkp_site_nav_toggle:hover,
    .pkp_site_nav_toggle:focus {
        background: rgba(5, 31, 91, 0.38) !important;
        border-color: rgba(255, 255, 255, 0.45) !important;
    }


    /* ----------------------------------------------------------------------
       MOBILE ISSN BAR — 32PX
       ---------------------------------------------------------------------- */

    .pkp_head_wrapper::after {
        position: absolute !important;
        top: 64px !important;
        right: 0 !important;
        left: 0 !important;

        display: flex !important;

        width: 100% !important;
        max-width: none !important;
        height: 32px !important;

        align-items: center !important;
        justify-content: center !important;

        padding: 0 12px !important;

        content:
            "E-ISSN: APPLICATION IN PROGRESS"
            !important;

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

        background: rgba(5, 30, 86, 0.18) !important;

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

        font-family: inherit !important;
        font-size: 0.58rem !important;
        font-weight: 750 !important;
        letter-spacing: 0.035em !important;
        line-height: 1 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;

        overflow: hidden !important;

        pointer-events: none !important;
    }


    /* ----------------------------------------------------------------------
       MOBILE MENU PANEL
       ---------------------------------------------------------------------- */

    .pkp_site_nav_menu {
        max-height: calc(100vh - 96px) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        background: #ffffff !important;

        border-top: 0 !important;
        box-shadow:
            0 18px 35px rgba(17, 38, 68, 0.2) !important;
    }

    .pkp_navigation_primary_row {
        width: 100% !important;

        margin: 0 !important;
        padding: 9px 14px 13px !important;

        background: #ffffff !important;

        border: 0 !important;
    }

    .pkp_navigation_primary_wrapper {
        display: block !important;

        width: 100% !important;
        min-height: 0 !important;
    }

    .pkp_navigation_primary {
        display: block !important;

        width: 100% !important;

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

    .pkp_navigation_primary > li {
        display: block !important;

        width: 100% !important;

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

    .pkp_navigation_primary > li > a {
        display: flex !important;

        width: 100% !important;
        min-height: 46px !important;

        align-items: center !important;
        justify-content: flex-start !important;

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

        color: #1d2d42 !important;

        background: transparent !important;

        border: 0 !important;
        border-bottom: 1px solid #e2e8ee !important;
        border-radius: 0 !important;

        font-size: 0.9rem !important;
        font-weight: 600 !important;
    }

    .pkp_navigation_primary > li > a::after {
        display: none !important;
        content: none !important;
    }

    .pkp_navigation_primary > li > a:hover,
    .pkp_navigation_primary > li > a:focus {
        color: #174f98 !important;

        background: #f5f8fb !important;
    }


    /* ----------------------------------------------------------------------
       MOBILE SUBMIT BUTTON
       ---------------------------------------------------------------------- */

    .pkp_navigation_primary
    > li
    > a[href*="/jrtn/submission"],
    .pkp_navigation_primary
    > li
    > a[href$="/submission"] {
        min-height: 44px !important;

        justify-content: center !important;

        margin: 11px 0 3px !important;
        padding: 0 15px !important;

        color: #ffffff !important;

        background: #1762b7 !important;

        border: 1px solid #1762b7 !important;
        border-radius: 6px !important;

        box-shadow: none !important;

        font-size: 0.86rem !important;
        font-weight: 700 !important;
    }

    .pkp_navigation_primary
    > li
    > a[href*="/jrtn/submission"]:hover,
    .pkp_navigation_primary
    > li
    > a[href*="/jrtn/submission"]:focus,
    .pkp_navigation_primary
    > li
    > a[href$="/submission"]:hover,
    .pkp_navigation_primary
    > li
    > a[href$="/submission"]:focus {
        color: #ffffff !important;

        background: #124f98 !important;
        border-color: #124f98 !important;

        transform: none !important;
    }


    /* ----------------------------------------------------------------------
       MOBILE DROPDOWN
       ---------------------------------------------------------------------- */

    .pkp_navigation_primary ul {
        position: static !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 4px 0 7px 12px !important;

        background: #f7f9fb !important;

        border: 0 !important;
        border-bottom: 1px solid #e2e8ee !important;
        border-radius: 0 0 6px 6px !important;

        box-shadow: none !important;
    }

    .pkp_navigation_primary ul a {
        padding: 10px 10px !important;

        color: #405066 !important;

        font-size: 0.82rem !important;
    }

    .pkp_navigation_primary ul a:hover,
    .pkp_navigation_primary ul a:focus {
        color: #174f98 !important;

        background: #eaf2f9 !important;
    }


    /* ----------------------------------------------------------------------
       MOBILE SEARCH
       ---------------------------------------------------------------------- */

    .pkp_search {
        display: block !important;

        width: 100% !important;

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

    .pkp_search .search_prompt {
        display: flex !important;

        width: 100% !important;
        min-height: 44px !important;

        align-items: center !important;
        justify-content: center !important;

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

        color: #174f98 !important;

        background: #f2f6fa !important;

        border: 1px solid #d4e0ea !important;
        border-radius: 6px !important;

        font-size: 0.86rem !important;
    }

    .pkp_search .search_prompt:hover,
    .pkp_search .search_prompt:focus {
        color: #123f7c !important;

        background: #e8f0f7 !important;
        border-color: #b9ccdc !important;
    }


    /* ----------------------------------------------------------------------
       MOBILE REGISTER AND LOGIN
       ---------------------------------------------------------------------- */

    .pkp_navigation_user_wrapper {
        position: static !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 12px 14px 16px !important;

        background: #f7f9fb !important;

        border-top: 1px solid #dde5ec !important;
    }

    .pkp_navigation_user {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;

        width: 100% !important;
    }

    .pkp_navigation_user > li {
        display: block !important;

        width: 100% !important;
    }

    .pkp_navigation_user > li > a,
    .pkp_navigation_user > li:first-child > a {
        display: flex !important;

        width: 100% !important;
        min-height: 42px !important;

        align-items: center !important;
        justify-content: center !important;

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

        color: #174f98 !important;

        background: #ffffff !important;

        border: 1px solid #cfdbe6 !important;
        border-radius: 6px !important;

        font-size: 0.82rem !important;
        font-weight: 650 !important;
    }

    .pkp_navigation_user > li > a:hover,
    .pkp_navigation_user > li > a:focus {
        color: #ffffff !important;

        background: #1762b7 !important;
        border-color: #1762b7 !important;
    }
}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 380px) {

    .pkp_site_name {
        padding-right: 6px !important;
        padding-left: 54px !important;
    }

    .pkp_site_name img {
        max-width: 145px !important;
        max-height: 38px !important;
    }

    .pkp_head_wrapper::after {
        padding: 0 7px !important;

        font-size: 0.52rem !important;
        letter-spacing: 0.025em !important;
    }

    .pkp_navigation_user {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .pkp_structure_head *,
    .pkp_structure_head *::before,
    .pkp_structure_head *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   HEADER POSITION FIX
   Memindahkan user navigation dan search ke sisi kanan desktop
   ========================================================================== */

@media (min-width: 992px) {

    /* Pastikan seluruh posisi absolut mengacu ke wrapper header */
    .pkp_head_wrapper {
        position: relative !important;
    }


    /* ----------------------------------------------------------------------
       USER ACCOUNT — TOP RIGHT
       Reset posisi bawaan theme OJS
       ---------------------------------------------------------------------- */

    .pkp_navigation_user_wrapper {
        position: absolute !important;

        top: 15px !important;
        right: 26px !important;
        bottom: auto !important;
        left: auto !important;

        z-index: 20 !important;

        display: block !important;

        width: auto !important;
        max-width: 300px !important;

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

        float: none !important;
        clear: none !important;

        transform: none !important;
    }

    .pkp_navigation_user {
        display: flex !important;

        width: auto !important;

        gap: 6px !important;
        align-items: center !important;
        justify-content: flex-end !important;

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

        float: none !important;
    }

    .pkp_navigation_user > li {
        position: relative !important;

        display: block !important;

        width: auto !important;

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

        float: none !important;
    }

    .pkp_navigation_user > li > a {
        width: auto !important;
        max-width: 260px !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    /* ----------------------------------------------------------------------
       PRIMARY NAVIGATION LAYOUT
       ---------------------------------------------------------------------- */

    .pkp_navigation_primary_row {
        position: relative !important;
    }

    .pkp_navigation_primary_wrapper {
        position: relative !important;

        display: flex !important;

        width: 100% !important;
        min-height: 54px !important;

        align-items: center !important;

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

        float: none !important;
    }

    .pkp_navigation_primary {
        position: static !important;

        display: flex !important;
        flex: 0 1 auto !important;

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

        align-items: stretch !important;

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

        float: none !important;

        transform: none !important;
    }


    /* ----------------------------------------------------------------------
       SEARCH — NAVIGATION RIGHT
       Reset absolute positioning bawaan OJS
       ---------------------------------------------------------------------- */

    .pkp_search {
        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        z-index: 10 !important;

        display: flex !important;
        flex: 0 0 auto !important;

        width: auto !important;

        align-items: center !important;
        justify-content: flex-end !important;

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

        float: none !important;
        clear: none !important;

        transform: none !important;
    }

    .pkp_search .search_prompt {
        position: relative !important;

        display: inline-flex !important;

        width: auto !important;
        min-width: 92px !important;
        min-height: 36px !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

        margin: 9px 0 !important;
        padding: 0 13px !important;

        white-space: nowrap !important;

        transform: none !important;
    }


    /* ----------------------------------------------------------------------
       MENCEGAH DROPDOWN USER TERPOTONG
       ---------------------------------------------------------------------- */

    .pkp_navigation_user ul {
        right: 0 !important;
        left: auto !important;

        min-width: 220px !important;

        transform: none !important;
    }
}

/* ==========================================================================
   SEARCH FIX — ANCHOR TO FAR RIGHT
   Memindahkan Search ke pojok kanan navigation bar
   ========================================================================== */

@media (min-width: 992px) {

    /* Area navigasi menjadi acuan posisi Search */
    .pkp_navigation_primary_row {
        position: relative !important;
    }

    .pkp_navigation_primary_wrapper {
        position: relative !important;

        width: 100% !important;

        /* Sisakan ruang agar menu tidak bertabrakan dengan Search */
        padding-right: 125px !important;
    }

    .pkp_navigation_primary {
        position: relative !important;

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


    /* ----------------------------------------------------------------------
       Jika Search berada sebagai item LI di dalam primary navigation
       ---------------------------------------------------------------------- */

    .pkp_navigation_primary
    > li:has(> .pkp_search),
    .pkp_navigation_primary
    > li:has(> .pkp_search_desktop) {
        position: absolute !important;

        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;

        z-index: 20 !important;

        display: flex !important;

        width: auto !important;
        height: 54px !important;

        align-items: center !important;
        justify-content: flex-end !important;

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

        float: none !important;

        transform: none !important;
    }


    /* ----------------------------------------------------------------------
       Search link bawaan OJS
       ---------------------------------------------------------------------- */

    .pkp_navigation_primary .pkp_search,
    .pkp_navigation_primary .pkp_search_desktop {
        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: inline-flex !important;

        width: auto !important;
        min-width: 94px !important;
        min-height: 36px !important;

        align-items: center !important;
        justify-content: center !important;

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

        color: rgba(255, 255, 255, 0.95) !important;
        text-decoration: none !important;
        white-space: nowrap !important;

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

        border: 1px solid rgba(255, 255, 255, 0.28) !important;
        border-radius: 6px !important;

        font-family: inherit !important;
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;

        float: none !important;

        transform: none !important;

        transition:
            background-color 160ms ease,
            border-color 160ms ease !important;
    }

    .pkp_navigation_primary .pkp_search:hover,
    .pkp_navigation_primary .pkp_search:focus,
    .pkp_navigation_primary .pkp_search_desktop:hover,
    .pkp_navigation_primary .pkp_search_desktop:focus {
        color: #ffffff !important;

        background: rgba(255, 255, 255, 0.16) !important;
        border-color: rgba(255, 255, 255, 0.48) !important;
    }


    /* ----------------------------------------------------------------------
       Fallback jika Search bukan berada di dalam LI
       ---------------------------------------------------------------------- */

    .pkp_navigation_primary_wrapper > .pkp_search,
    .pkp_navigation_primary_wrapper > .pkp_search_desktop,
    .pkp_navigation_primary_wrapper
    > .pkp_navigation_search_wrapper {
        position: absolute !important;

        top: 9px !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;

        z-index: 20 !important;

        width: auto !important;

        margin: 0 !important;

        float: none !important;

        transform: none !important;
    }
}

/* ==========================================================================
   SEARCH POSITION REFINEMENT
   Memberi jarak kanan dan menyelaraskan Search secara vertikal
   ========================================================================== */

@media (min-width: 992px) {

    /* Sisakan ruang yang cukup untuk tombol Search */
    .pkp_navigation_primary_wrapper {
        padding-right: 132px !important;
    }


    /* Search sebagai item di dalam primary navigation */
    .pkp_navigation_primary
    > li:has(> .pkp_search),
    .pkp_navigation_primary
    > li:has(> .pkp_search_desktop) {
        position: absolute !important;

        top: 50% !important;
        right: 18px !important;
        bottom: auto !important;
        left: auto !important;

        width: auto !important;
        height: auto !important;
        min-height: 0 !important;

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

        align-items: center !important;
        justify-content: center !important;

        transform: translateY(-50%) !important;
    }


    /* Wrapper Search */
    .pkp_navigation_primary .pkp_search,
    .pkp_navigation_primary .pkp_search_desktop {
        position: static !important;

        display: inline-flex !important;

        width: auto !important;
        height: 36px !important;
        min-height: 36px !important;

        align-items: center !important;
        justify-content: center !important;

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

        line-height: 1 !important;

        transform: none !important;
    }


    /* Link Search yang sebenarnya */
    .pkp_navigation_primary .pkp_search .search_prompt,
    .pkp_navigation_primary .pkp_search_desktop .search_prompt {
        position: static !important;

        display: inline-flex !important;

        width: auto !important;
        height: 36px !important;
        min-height: 36px !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

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

        line-height: 1 !important;
        white-space: nowrap !important;

        transform: none !important;
    }


    /* Fallback jika Search berada langsung di dalam wrapper */
    .pkp_navigation_primary_wrapper > .pkp_search,
    .pkp_navigation_primary_wrapper > .pkp_search_desktop,
    .pkp_navigation_primary_wrapper
    > .pkp_navigation_search_wrapper {
        position: absolute !important;

        top: 50% !important;
        right: 18px !important;
        bottom: auto !important;
        left: auto !important;

        height: auto !important;

        margin: 0 !important;

        transform: translateY(-50%) !important;
    }
}


/* ==========================================================================
   3. FOOTER JRTN
   ========================================================================== */

.pkp_structure_footer {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 25px 0 10px !important;

    box-sizing: border-box !important;

    background-color: #0f172a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.pkp_footer_content {
    width: 100% !important;
    max-width: 1100px !important;

    margin: 0 auto !important;
    padding: 0 20px !important;

    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hilangkan logo bawaan platform OJS */
.pkp_brand_footer {
    display: none !important;
}


/* ==========================================================================
   4. RESPONSIVE FOOTER
   ========================================================================== */

@media (max-width: 768px) {
    .pkp_footer_content table,
    .pkp_footer_content tbody,
    .pkp_footer_content tr,
    .pkp_footer_content td {
        display: block !important;

        width: 100% !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        border: none !important;

        text-align: center !important;
    }

    .pkp_footer_content td {
        margin-bottom: 25px !important;
    }

    /* Sembunyikan sel pembatas */
    .pkp_footer_content td[width="1"] {
        display: none !important;
    }

    /* Kembalikan tabel logo penerbit menjadi horizontal */
    .pkp_footer_content table table {
        display: table !important;

        width: auto !important;

        margin: 0 auto 15px !important;
    }

    .pkp_footer_content table table tbody {
        display: table-row-group !important;
    }

    .pkp_footer_content table table tr {
        display: table-row !important;
    }

    .pkp_footer_content table table td {
        display: table-cell !important;

        width: auto !important;

        margin-bottom: 0 !important;
        padding-right: 12px !important;

        vertical-align: middle !important;
        text-align: left !important;
    }

    .pkp_footer_content p img {
        display: block !important;

        margin: 0 auto !important;
    }
}


/* ==========================================================================
   5. JRTN CONTENT DESIGN SYSTEM
   Hanya bekerja pada HTML yang dibungkus dengan .jrtn-page
   ========================================================================== */

.jrtn-page {
    --jrtn-ink: #172033;
    --jrtn-muted: #526177;
    --jrtn-accent: #1e4b7a;
    --jrtn-accent-dark: #153a60;
    --jrtn-accent-soft: #eef5fb;
    --jrtn-line: #d5e0ea;
    --jrtn-surface: #f7f9fb;
    --jrtn-white: #ffffff;

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

    color: var(--jrtn-ink) !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    font-size: 16px !important;
    line-height: 1.65 !important;
}

.jrtn-page *,
.jrtn-page *::before,
.jrtn-page *::after {
    box-sizing: border-box;
}

.jrtn-page p,
.jrtn-page h2,
.jrtn-page h3,
.jrtn-page h4,
.jrtn-page ul,
.jrtn-page ol,
.jrtn-page section,
.jrtn-page aside,
.jrtn-page div {
    max-width: none;
}

.jrtn-page p {
    margin-top: 0 !important;
}

.jrtn-page a {
    color: var(--jrtn-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.jrtn-page a:hover {
    color: var(--jrtn-accent-dark);
}

.jrtn-page a:focus-visible {
    outline: 3px solid rgba(30, 75, 122, 0.28);
    outline-offset: 3px;
}


/* ==========================================================================
   6. HERO / PEMBUKA HOME
   Tanpa container, tetapi motif background tetap dipertahankan
   ========================================================================== */

.jrtn-page .jrtn-hero {
    position: relative !important;

    display: block !important;

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

    margin: 0 0 18px !important;
    padding: 24px 14px 30px 0 !important;

    overflow: hidden !important;

    background: transparent !important;

    border: 0 !important;
    border-bottom: 1px solid var(--jrtn-line) !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}

/* Motif lingkaran utama */
.jrtn-page .jrtn-hero::after {
    position: absolute !important;
    right: -78px !important;
    bottom: -94px !important;
    z-index: 0 !important;

    display: block !important;

    width: 240px !important;
    height: 240px !important;

    content: "" !important;

    border: 34px solid rgba(30, 75, 122, 0.055) !important;
    border-radius: 50% !important;

    pointer-events: none !important;
}

/* Motif lingkaran tambahan */
.jrtn-page .jrtn-hero::before {
    position: absolute !important;
    right: 72px !important;
    bottom: -76px !important;
    z-index: 0 !important;

    display: block !important;

    width: 120px !important;
    height: 120px !important;

    content: "" !important;

    border: 20px solid rgba(14, 165, 233, 0.035) !important;
    border-radius: 50% !important;

    pointer-events: none !important;
}

.jrtn-page .jrtn-meta {
    position: relative !important;
    z-index: 1 !important;

    display: block !important;

    width: 100% !important;

    margin: 0 0 12px !important;

    color: var(--jrtn-accent-dark) !important;

    font-size: 0.75rem !important;
    font-weight: 750 !important;
    letter-spacing: 0.055em !important;
    line-height: 1.45 !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-meta-separator {
    margin: 0 8px !important;

    color: #8496a8 !important;
}

.jrtn-page .jrtn-hero-title {
    position: relative !important;
    z-index: 1 !important;

    display: block !important;

    width: 100% !important;
    max-width: 860px !important;
    min-width: 0 !important;

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

    color: var(--jrtn-ink) !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    font-size: clamp(1.9rem, 3.6vw, 2.7rem) !important;
    font-weight: 760 !important;
    letter-spacing: -0.022em !important;
    line-height: 1.14 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    hyphens: none !important;
}

.jrtn-page .jrtn-hero-lead {
    position: relative !important;
    z-index: 1 !important;

    display: block !important;

    width: 100% !important;
    max-width: 840px !important;
    min-width: 0 !important;

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

    color: var(--jrtn-muted) !important;

    font-size: 1rem !important;
    line-height: 1.7 !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.jrtn-page .jrtn-actions {
    position: relative !important;
    z-index: 1 !important;

    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;

    width: 100% !important;

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


/* ==========================================================================
   7. BUTTONS
   ========================================================================== */

.jrtn-page .jrtn-button {
    display: inline-flex !important;

    min-height: 42px !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 9px 18px !important;

    border: 1px solid var(--jrtn-accent) !important;
    border-radius: 5px !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    text-decoration: none !important;

    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        color 140ms ease !important;
}

.jrtn-page .jrtn-button-primary {
    background: var(--jrtn-accent) !important;
    color: var(--jrtn-white) !important;
}

.jrtn-page .jrtn-button-primary:hover {
    background: var(--jrtn-accent-dark) !important;
    border-color: var(--jrtn-accent-dark) !important;
    color: var(--jrtn-white) !important;
}

.jrtn-page .jrtn-button-secondary {
    background: var(--jrtn-white) !important;
    color: var(--jrtn-accent) !important;
}

.jrtn-page .jrtn-button-secondary:hover {
    background: #f1f6fa !important;
    color: var(--jrtn-accent-dark) !important;
}


/* ==========================================================================
   8. JOURNAL FACTS
   ========================================================================== */

.jrtn-page .jrtn-facts {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;

    width: 100% !important;

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

.jrtn-page .jrtn-fact {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 13px 15px !important;

    background: var(--jrtn-white) !important;

    border: 1px solid var(--jrtn-line) !important;
    border-radius: 6px !important;

    box-shadow: 0 1px 2px rgba(18, 38, 63, 0.035) !important;
}

.jrtn-page .jrtn-fact-label {
    display: block !important;

    width: 100% !important;

    margin: 0 0 4px !important;

    color: var(--jrtn-muted) !important;

    font-size: 0.69rem !important;
    font-weight: 750 !important;
    letter-spacing: 0.055em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-fact-value {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    color: var(--jrtn-ink) !important;

    font-size: 0.93rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
}


/* ==========================================================================
   9. SECTION CONTAINERS
   ========================================================================== */

.jrtn-page .jrtn-section {
    display: block !important;

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

    margin: 0 0 18px !important;
    padding: 24px 26px !important;

    background: var(--jrtn-white) !important;

    border: 1px solid var(--jrtn-line) !important;
    border-radius: 8px !important;

    box-shadow: none !important;
}

.jrtn-page .jrtn-section-soft {
    background:
        linear-gradient(
            135deg,
            rgba(238, 245, 251, 0.9),
            rgba(247, 249, 251, 0.95)
        ) !important;
}


/* ==========================================================================
   10. SECTION HEADERS
   Label, judul, dan isi sejajar pada margin kiri yang sama
   ========================================================================== */

.jrtn-page .jrtn-section-header {
    position: relative !important;

    display: block !important;
    float: none !important;
    clear: both !important;

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

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

.jrtn-page .jrtn-section-header > div {
    display: block !important;
    float: none !important;
    clear: both !important;

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

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

/*
 * Marker diubah menjadi garis horizontal kecil.
 * Tidak lagi mengambil ruang di sebelah kiri teks.
 */
.jrtn-page .jrtn-section-marker {
    position: static !important;

    display: block !important;

    width: 32px !important;
    height: 3px !important;
    min-height: 0 !important;

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

    background: var(--jrtn-accent) !important;

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

.jrtn-page .jrtn-eyebrow {
    display: block !important;

    width: 100% !important;

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

    color: var(--jrtn-accent) !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.07em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-section-title {
    display: block !important;
    float: none !important;
    clear: both !important;

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

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

    color: var(--jrtn-ink) !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    font-size: clamp(1.35rem, 2.2vw, 1.8rem) !important;
    font-weight: 740 !important;
    letter-spacing: -0.012em !important;
    line-height: 1.28 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    hyphens: none !important;
}

.jrtn-page .jrtn-section-intro {
    display: block !important;
    float: none !important;
    clear: both !important;

    width: 100% !important;
    max-width: 860px !important;
    min-width: 0 !important;

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

    color: var(--jrtn-muted) !important;

    font-size: 0.96rem !important;
    line-height: 1.68 !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* Alignment tetap sama pada mobile */
@media (max-width: 680px) {
    .jrtn-page .jrtn-section-header {
        padding-left: 0 !important;
    }

    .jrtn-page .jrtn-section-marker {
        width: 28px !important;
        margin-bottom: 8px !important;
    }

    .jrtn-page .jrtn-section-title {
        font-size: 1.38rem !important;
        line-height: 1.3 !important;
    }
}

/* ==========================================================================
   11. CORE SCOPE CARDS
   ========================================================================== */

.jrtn-page .jrtn-scope-list {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;

    width: 100% !important;

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

    list-style: none !important;
}

.jrtn-page .jrtn-scope-list > li::before {
    display: none !important;

    content: none !important;
}

.jrtn-page .jrtn-scope-item {
    display: grid !important;

    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 11px !important;
    align-items: start !important;

    width: 100% !important;
    min-width: 0 !important;

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

    background: var(--jrtn-white) !important;

    border: 1px solid var(--jrtn-line) !important;
    border-radius: 6px !important;
}

.jrtn-page .jrtn-scope-number {
    display: inline-flex !important;

    width: 30px !important;
    height: 30px !important;

    align-items: center !important;
    justify-content: center !important;

    background: var(--jrtn-accent-soft) !important;

    border: 1px solid #b9ccde !important;
    border-radius: 4px !important;

    color: var(--jrtn-accent-dark) !important;

    font-size: 0.71rem !important;
    font-weight: 800 !important;
}

.jrtn-page .jrtn-scope-item > div {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

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

.jrtn-page .jrtn-scope-item h4 {
    display: block !important;

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

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

    color: var(--jrtn-ink) !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    font-size: 0.98rem !important;
    font-weight: 750 !important;
    line-height: 1.4 !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.jrtn-page .jrtn-scope-item p {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    color: var(--jrtn-muted) !important;

    font-size: 0.9rem !important;
    line-height: 1.58 !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.jrtn-page .jrtn-section-link {
    margin: 16px 0 0 !important;
}

.jrtn-page .jrtn-text-link {
    font-weight: 700 !important;
    text-decoration: none !important;
}

.jrtn-page .jrtn-text-link:hover {
    text-decoration: underline !important;
}


/* ==========================================================================
   12. MANUSCRIPT TYPES DAN ISSUE NOTICE
   ========================================================================== */

.jrtn-page .jrtn-split {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(245px, 0.65fr) !important;

    gap: 18px !important;
    align-items: stretch !important;

    width: 100% !important;

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

.jrtn-page .jrtn-panel {
    display: block !important;

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

    margin: 0 !important;
    padding: 23px 25px !important;

    background: var(--jrtn-white) !important;

    border: 1px solid var(--jrtn-line) !important;
    border-radius: 8px !important;
}

.jrtn-page .jrtn-manuscript-list {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 20px !important;

    width: 100% !important;

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

    list-style: none !important;
}

.jrtn-page .jrtn-manuscript-list > li {
    position: relative !important;

    width: 100% !important;

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

    color: var(--jrtn-ink) !important;

    border-bottom: 1px solid #e3e9ef !important;

    font-size: 0.92rem !important;
    line-height: 1.45 !important;
}

.jrtn-page .jrtn-manuscript-list > li::before {
    position: absolute !important;
    top: 16px !important;
    left: 2px !important;

    display: block !important;

    width: 5px !important;
    height: 5px !important;

    content: "" !important;

    background: var(--jrtn-accent) !important;

    border-radius: 50% !important;
}

.jrtn-page .jrtn-notice {
    display: block !important;

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

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

    background:
        linear-gradient(
            150deg,
            rgba(238, 245, 251, 1),
            rgba(247, 250, 252, 1)
        ) !important;

    border: 1px solid #b9ccde !important;
    border-top: 4px solid var(--jrtn-accent) !important;
    border-radius: 8px !important;
}

.jrtn-page .jrtn-notice-label {
    margin: 0 0 7px !important;

    color: var(--jrtn-accent) !important;

    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.07em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-notice h3 {
    display: block !important;

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

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

    color: var(--jrtn-ink) !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    font-size: 1.18rem !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.jrtn-page .jrtn-notice p {
    margin: 0 0 14px !important;

    color: var(--jrtn-muted) !important;

    font-size: 0.91rem !important;
    line-height: 1.58 !important;
}


/* ==========================================================================
   13. TABLET
   ========================================================================== */

@media (max-width: 900px) {
    .jrtn-page .jrtn-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .jrtn-page .jrtn-split {
        grid-template-columns: 1fr !important;
    }
}


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

@media (max-width: 680px) {
    .jrtn-page .jrtn-hero {
        padding: 18px 0 23px !important;
    }

    .jrtn-page .jrtn-hero::after {
        right: -110px !important;
        bottom: -120px !important;

        width: 225px !important;
        height: 225px !important;
    }

    .jrtn-page .jrtn-hero::before {
        right: 28px !important;
        bottom: -85px !important;
    }

    .jrtn-page .jrtn-hero-title {
        max-width: 92% !important;

        font-size: 1.78rem !important;
        line-height: 1.18 !important;
    }

    .jrtn-page .jrtn-hero-lead {
        max-width: 94% !important;
    }

    .jrtn-page .jrtn-section,
    .jrtn-page .jrtn-panel,
    .jrtn-page .jrtn-notice {
        padding: 18px !important;
    }

    .jrtn-page .jrtn-section-header {
        padding-left: 13px !important;
    }

    .jrtn-page .jrtn-section-title {
        font-size: 1.38rem !important;
        line-height: 1.3 !important;
    }

    .jrtn-page .jrtn-scope-list,
    .jrtn-page .jrtn-manuscript-list {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================================
   15. MOBILE KECIL
   ========================================================================== */

@media (max-width: 480px) {
    .jrtn-page .jrtn-actions {
        display: grid !important;

        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-button {
        width: 100% !important;
    }

    .jrtn-page .jrtn-facts {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-meta {
        padding-right: 70px !important;
    }

    .jrtn-page .jrtn-meta-separator {
        display: none !important;
    }

    .jrtn-page .jrtn-hero-title {
        max-width: 100% !important;
    }

    .jrtn-page .jrtn-hero-lead {
        max-width: 100% !important;
    }
}


/* ==========================================================================
   16. ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .jrtn-page .jrtn-button {
        transition: none !important;
    }
}

/* ==========================================================================
   17. ABOUT THE JOURNAL PAGE
   Tambahkan pada bagian paling bawah stylesheet JRTN
   ========================================================================== */

.jrtn-page.jrtn-about-page {
    width: 100% !important;
    max-width: none !important;
}


/* --------------------------------------------------------------------------
   ABOUT INTRO
   Pembuka terbuka tanpa card, dengan motif yang konsisten dengan HOME
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-about-hero {
    position: relative !important;

    display: block !important;

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

    margin: 0 0 18px !important;
    padding: 22px 150px 27px 0 !important;

    overflow: hidden !important;

    background: transparent !important;

    border: 0 !important;
    border-bottom: 1px solid var(--jrtn-line) !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}

/* Motif lingkaran besar */
.jrtn-page .jrtn-about-hero::after {
    position: absolute !important;
    right: -72px !important;
    bottom: -92px !important;
    z-index: 0 !important;

    display: block !important;

    width: 225px !important;
    height: 225px !important;

    content: "" !important;

    border: 32px solid rgba(30, 75, 122, 0.055) !important;
    border-radius: 50% !important;

    pointer-events: none !important;
}

/* Motif lingkaran kecil */
.jrtn-page .jrtn-about-hero::before {
    position: absolute !important;
    right: 65px !important;
    bottom: -62px !important;
    z-index: 0 !important;

    display: block !important;

    width: 112px !important;
    height: 112px !important;

    content: "" !important;

    border: 18px solid rgba(14, 165, 233, 0.04) !important;
    border-radius: 50% !important;

    pointer-events: none !important;
}

.jrtn-page .jrtn-about-kicker {
    position: relative !important;
    z-index: 1 !important;

    display: block !important;

    margin: 0 0 7px !important;

    color: var(--jrtn-accent) !important;

    font-size: 0.73rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.075em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-about-title {
    position: relative !important;
    z-index: 1 !important;

    display: block !important;

    width: 100% !important;
    max-width: 810px !important;

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

    color: var(--jrtn-ink) !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    font-size: clamp(1.9rem, 3.4vw, 2.55rem) !important;
    font-weight: 760 !important;
    letter-spacing: -0.021em !important;
    line-height: 1.16 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    hyphens: none !important;
}

.jrtn-page .jrtn-about-lead {
    position: relative !important;
    z-index: 1 !important;

    display: block !important;

    width: 100% !important;
    max-width: 850px !important;

    margin: 0 !important;

    color: var(--jrtn-muted) !important;

    font-size: 1rem !important;
    line-height: 1.72 !important;
}


/* --------------------------------------------------------------------------
   ABOUT PROFILE FACTS
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-about-facts {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;

    width: 100% !important;

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

.jrtn-page .jrtn-about-fact {
    display: block !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 13px 15px !important;

    background: var(--jrtn-white) !important;

    border: 1px solid var(--jrtn-line) !important;
    border-radius: 6px !important;
}

.jrtn-page .jrtn-about-fact-label {
    display: block !important;

    margin: 0 0 4px !important;

    color: var(--jrtn-muted) !important;

    font-size: 0.68rem !important;
    font-weight: 750 !important;
    letter-spacing: 0.055em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-about-fact-value {
    display: block !important;

    margin: 0 !important;

    color: var(--jrtn-ink) !important;

    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
}


/* --------------------------------------------------------------------------
   TWO-COLUMN ABOUT CONTENT
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-about-columns {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;

    width: 100% !important;

    margin: 0 0 18px !important;
}

.jrtn-page .jrtn-about-panel {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 23px 25px !important;

    background: var(--jrtn-white) !important;

    border: 1px solid var(--jrtn-line) !important;
    border-radius: 8px !important;
}

.jrtn-page .jrtn-about-panel-soft {
    background:
        linear-gradient(
            140deg,
            rgba(238, 245, 251, 0.88),
            rgba(248, 250, 252, 0.96)
        ) !important;
}


/* --------------------------------------------------------------------------
   EDITORIAL PURPOSE POINTS
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-purpose-list {
    display: grid !important;

    grid-template-columns: 1fr !important;
    gap: 0 !important;

    width: 100% !important;

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

    list-style: none !important;
}

.jrtn-page .jrtn-purpose-list > li {
    display: grid !important;

    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 11px !important;

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

    border-top: 1px solid var(--jrtn-line) !important;
}

.jrtn-page .jrtn-purpose-list > li::before {
    display: none !important;
    content: none !important;
}

.jrtn-page .jrtn-purpose-index {
    display: inline-flex !important;

    width: 28px !important;
    height: 28px !important;

    align-items: center !important;
    justify-content: center !important;

    background: var(--jrtn-accent-soft) !important;

    border: 1px solid #bed0df !important;
    border-radius: 4px !important;

    color: var(--jrtn-accent-dark) !important;

    font-size: 0.7rem !important;
    font-weight: 800 !important;
}

.jrtn-page .jrtn-purpose-list h4 {
    display: block !important;

    width: 100% !important;

    margin: 0 0 4px !important;

    color: var(--jrtn-ink) !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    font-size: 0.96rem !important;
    font-weight: 750 !important;
    line-height: 1.4 !important;
}

.jrtn-page .jrtn-purpose-list p {
    margin: 0 !important;

    color: var(--jrtn-muted) !important;

    font-size: 0.9rem !important;
    line-height: 1.58 !important;
}


/* --------------------------------------------------------------------------
   FULL FOCUS AND SCOPE LIST
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-about-scope-list {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;

    width: 100% !important;

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

    list-style: none !important;
}

.jrtn-page .jrtn-about-scope-list > li {
    position: relative !important;

    display: block !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 17px 17px 16px 48px !important;

    background: var(--jrtn-white) !important;

    border: 1px solid var(--jrtn-line) !important;
    border-radius: 6px !important;
}

.jrtn-page .jrtn-about-scope-list > li::before {
    position: absolute !important;
    top: 17px !important;
    left: 15px !important;

    display: inline-flex !important;

    width: 25px !important;
    height: 25px !important;

    align-items: center !important;
    justify-content: center !important;

    content: attr(data-number) !important;

    background: var(--jrtn-accent-soft) !important;

    border: 1px solid #bed0df !important;
    border-radius: 4px !important;

    color: var(--jrtn-accent-dark) !important;

    font-size: 0.66rem !important;
    font-weight: 800 !important;
}

.jrtn-page .jrtn-about-scope-list h4 {
    display: block !important;

    width: 100% !important;

    margin: 0 0 5px !important;

    color: var(--jrtn-ink) !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    font-size: 0.97rem !important;
    font-weight: 750 !important;
    line-height: 1.42 !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.jrtn-page .jrtn-about-scope-list p {
    margin: 0 !important;

    color: var(--jrtn-muted) !important;

    font-size: 0.89rem !important;
    line-height: 1.58 !important;
}


/* --------------------------------------------------------------------------
   ADDITIONAL TOPICS
   Simple list, bukan chips/pills
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-topic-grid {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 22px !important;

    width: 100% !important;

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

    list-style: none !important;

    border-top: 1px solid var(--jrtn-line) !important;
}

.jrtn-page .jrtn-topic-grid > li {
    position: relative !important;

    margin: 0 !important;
    padding: 10px 4px 10px 16px !important;

    color: var(--jrtn-ink) !important;

    border-bottom: 1px solid var(--jrtn-line) !important;

    font-size: 0.89rem !important;
    line-height: 1.45 !important;
}

.jrtn-page .jrtn-topic-grid > li::before {
    position: absolute !important;
    top: 18px !important;
    left: 2px !important;

    display: block !important;

    width: 5px !important;
    height: 5px !important;

    content: "" !important;

    background: var(--jrtn-accent) !important;

    border-radius: 50% !important;
}


/* --------------------------------------------------------------------------
   READERSHIP AND MANUSCRIPT LISTS
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-simple-list {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px 22px !important;

    width: 100% !important;

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

    list-style: none !important;
}

.jrtn-page .jrtn-simple-list > li {
    position: relative !important;

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

    color: var(--jrtn-ink) !important;

    border-bottom: 1px solid #e3e9ef !important;

    font-size: 0.9rem !important;
    line-height: 1.45 !important;
}

.jrtn-page .jrtn-simple-list > li::before {
    position: absolute !important;
    top: 16px !important;
    left: 2px !important;

    display: block !important;

    width: 5px !important;
    height: 5px !important;

    content: "" !important;

    background: var(--jrtn-accent) !important;

    border-radius: 50% !important;
}


/* --------------------------------------------------------------------------
   PUBLISHER AND HISTORY
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-publisher-box {
    display: grid !important;

    grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.7fr) !important;
    gap: 24px !important;

    width: 100% !important;

    margin: 0 0 18px !important;
    padding: 23px 25px !important;

    background:
        linear-gradient(
            145deg,
            rgba(238, 245, 251, 0.8),
            rgba(255, 255, 255, 1)
        ) !important;

    border: 1px solid var(--jrtn-line) !important;
    border-left: 4px solid var(--jrtn-accent) !important;
    border-radius: 8px !important;
}

.jrtn-page .jrtn-publisher-box p {
    margin: 0 0 10px !important;

    color: var(--jrtn-muted) !important;

    font-size: 0.92rem !important;
    line-height: 1.62 !important;
}

.jrtn-page .jrtn-publisher-box p:last-child {
    margin-bottom: 0 !important;
}

.jrtn-page .jrtn-publisher-meta {
    padding-left: 21px !important;

    border-left: 1px solid var(--jrtn-line) !important;
}

.jrtn-page .jrtn-publisher-meta-row {
    margin: 0 0 12px !important;
}

.jrtn-page .jrtn-publisher-meta-row:last-child {
    margin-bottom: 0 !important;
}

.jrtn-page .jrtn-publisher-meta-label {
    display: block !important;

    margin: 0 0 2px !important;

    color: var(--jrtn-muted) !important;

    font-size: 0.67rem !important;
    font-weight: 750 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-publisher-meta-value {
    display: block !important;

    color: var(--jrtn-ink) !important;

    font-size: 0.91rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}


/* --------------------------------------------------------------------------
   RESPONSIVE ABOUT PAGE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .jrtn-page .jrtn-about-facts,
    .jrtn-page .jrtn-topic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .jrtn-page .jrtn-about-columns,
    .jrtn-page .jrtn-publisher-box {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-publisher-meta {
        padding-top: 18px !important;
        padding-left: 0 !important;

        border-top: 1px solid var(--jrtn-line) !important;
        border-left: 0 !important;
    }
}

@media (max-width: 680px) {
    .jrtn-page .jrtn-about-hero {
        padding: 18px 30px 23px 0 !important;
    }

    .jrtn-page .jrtn-about-hero::after {
        right: -125px !important;
        bottom: -125px !important;
    }

    .jrtn-page .jrtn-about-hero::before {
        right: 12px !important;
        bottom: -75px !important;
    }

    .jrtn-page .jrtn-about-title {
        max-width: 94% !important;

        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }

    .jrtn-page .jrtn-about-scope-list,
    .jrtn-page .jrtn-simple-list {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-about-panel,
    .jrtn-page .jrtn-publisher-box {
        padding: 18px !important;
    }
}

@media (max-width: 480px) {
    .jrtn-page .jrtn-about-facts,
    .jrtn-page .jrtn-topic-grid {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-about-hero {
        padding-right: 0 !important;
    }

    .jrtn-page .jrtn-about-title,
    .jrtn-page .jrtn-about-lead {
        max-width: 100% !important;
    }
}
/* ==========================================================================
   18. TYPOGRAPHY SYNC WITH OJS
   Menyamakan tipografi custom HTML dengan theme aktif OJS
   ========================================================================== */

/*
 * Root halaman custom mengikuti font yang digunakan
 * oleh container dan theme OJS.
 */
.jrtn-page {
    font-family: inherit !important;
}

/*
 * Timpa seluruh font-family yang sebelumnya dipaksakan
 * pada elemen custom JRTN.
 */
.jrtn-page p,
.jrtn-page a,
.jrtn-page span,
.jrtn-page strong,
.jrtn-page li,
.jrtn-page h2,
.jrtn-page h3,
.jrtn-page h4,
.jrtn-page button,
.jrtn-page .jrtn-meta,
.jrtn-page .jrtn-button,
.jrtn-page .jrtn-hero-title,
.jrtn-page .jrtn-section-title,
.jrtn-page .jrtn-about-title,
.jrtn-page .jrtn-scope-item h4,
.jrtn-page .jrtn-about-scope-list h4,
.jrtn-page .jrtn-purpose-list h4,
.jrtn-page .jrtn-notice h3 {
    font-family: inherit !important;
}


/* --------------------------------------------------------------------------
   NORMALISASI HEADING
   Menggunakan weight standar agar tidak terasa seperti font sintetis
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-hero-title,
.jrtn-page .jrtn-about-title {
    font-weight: 700 !important;
    letter-spacing: -0.012em !important;
}

.jrtn-page .jrtn-section-title {
    font-weight: 700 !important;
    letter-spacing: -0.008em !important;
}

.jrtn-page .jrtn-scope-item h4,
.jrtn-page .jrtn-about-scope-list h4,
.jrtn-page .jrtn-purpose-list h4,
.jrtn-page .jrtn-notice h3 {
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}


/* --------------------------------------------------------------------------
   LABEL DAN METADATA
   Tetap memiliki hierarki, tetapi tidak terlalu mekanis
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-eyebrow,
.jrtn-page .jrtn-about-kicker,
.jrtn-page .jrtn-meta,
.jrtn-page .jrtn-fact-label,
.jrtn-page .jrtn-about-fact-label,
.jrtn-page .jrtn-notice-label,
.jrtn-page .jrtn-publisher-meta-label {
    font-weight: 700 !important;
    letter-spacing: 0.045em !important;
}


/* --------------------------------------------------------------------------
   BODY COPY
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-hero-lead,
.jrtn-page .jrtn-about-lead,
.jrtn-page .jrtn-section-intro,
.jrtn-page .jrtn-scope-item p,
.jrtn-page .jrtn-about-scope-list p,
.jrtn-page .jrtn-purpose-list p,
.jrtn-page .jrtn-notice p,
.jrtn-page .jrtn-publisher-box p {
    font-weight: 400 !important;
    letter-spacing: normal !important;
}


/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-button {
    font-family: inherit !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
}
/* ==========================================================================
   19. KEY INFORMATION SECTION HEADERS
   Heading besar untuk informasi yang paling sering dicari author dan reader
   ========================================================================== */

.jrtn-page .jrtn-key-section-header {
    position: relative !important;

    display: block !important;

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

    margin: 0 0 18px !important;
    padding: 0 0 14px !important;

    border-bottom: 1px solid var(--jrtn-line) !important;
}

/* Aksen pendek di atas heading */
.jrtn-page .jrtn-key-section-header::before {
    display: block !important;

    width: 38px !important;
    height: 3px !important;

    margin: 0 0 10px !important;

    background: var(--jrtn-accent) !important;

    border-radius: 3px !important;

    content: "" !important;
}

/* Nama section utama */
.jrtn-page .jrtn-key-section-title {
    display: block !important;

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

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

    color: var(--jrtn-ink) !important;

    font-family: inherit !important;
    font-size: clamp(1.5rem, 2.5vw, 1.9rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
}

/* Penjelasan singkat di bawah nama section */
.jrtn-page .jrtn-key-section-description {
    display: block !important;

    width: 100% !important;
    max-width: 820px !important;

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

    color: var(--jrtn-muted) !important;

    font-family: inherit !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

/*
 * Versi compact untuk heading yang berada
 * di dalam panel dua kolom.
 */
.jrtn-page .jrtn-key-section-header-compact {
    margin-bottom: 14px !important;
    padding-bottom: 11px !important;
}

.jrtn-page .jrtn-key-section-header-compact::before {
    width: 30px !important;
    margin-bottom: 8px !important;
}

.jrtn-page .jrtn-key-section-header-compact
.jrtn-key-section-title {
    font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
}

.jrtn-page .jrtn-key-section-header-compact
.jrtn-key-section-description {
    margin-top: 5px !important;
    font-size: 0.9rem !important;
}

/* Memudahkan anchor link berhenti di posisi yang nyaman */
.jrtn-page section[id],
.jrtn-page div[id] {
    scroll-margin-top: 90px;
}

@media (max-width: 680px) {
    .jrtn-page .jrtn-key-section-header {
        margin-bottom: 15px !important;
        padding-bottom: 12px !important;
    }

    .jrtn-page .jrtn-key-section-title {
        font-size: 1.45rem !important;
        line-height: 1.28 !important;
    }

    .jrtn-page .jrtn-key-section-description {
        font-size: 0.92rem !important;
    }
}
	/* ==========================================================================
   20. AIMS, FOCUS AND SCOPE PAGE
   Tambahkan pada bagian paling bawah stylesheet JRTN
   ========================================================================== */


/* --------------------------------------------------------------------------
   CONTEXTUAL REQUIREMENT BOX
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-scope-note {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 18px 0 0 !important;
    padding: 20px 22px 20px 58px !important;

    background:
        linear-gradient(
            140deg,
            rgba(238, 245, 251, 0.95),
            rgba(248, 250, 252, 1)
        ) !important;

    border: 1px solid #bfd0df !important;
    border-left: 4px solid var(--jrtn-accent) !important;
    border-radius: 7px !important;
}

.jrtn-page .jrtn-scope-note::before {
    position: absolute !important;
    top: 20px !important;
    left: 19px !important;

    display: inline-flex !important;

    width: 25px !important;
    height: 25px !important;

    align-items: center !important;
    justify-content: center !important;

    content: "i" !important;

    background: var(--jrtn-accent) !important;
    color: var(--jrtn-white) !important;

    border-radius: 50% !important;

    font-family: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.jrtn-page .jrtn-scope-note h4 {
    display: block !important;

    width: 100% !important;

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

    color: var(--jrtn-ink) !important;

    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.jrtn-page .jrtn-scope-note p {
    margin: 0 !important;

    color: var(--jrtn-muted) !important;

    font-size: 0.92rem !important;
    line-height: 1.62 !important;
}


/* --------------------------------------------------------------------------
   SUITABILITY CHECKLIST
   Centang hijau untuk indikator manuskrip yang sesuai dengan scope
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-fit-list {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;

    width: 100% !important;

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

    list-style: none !important;
}

.jrtn-page .jrtn-fit-list > li {
    position: relative !important;

    display: block !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 14px 15px 14px 47px !important;

    background: #fbfefc !important;

    border: 1px solid #cfe4d5 !important;
    border-radius: 6px !important;

    color: var(--jrtn-ink) !important;

    font-size: 0.9rem !important;
    line-height: 1.52 !important;
}

/* Hilangkan marker list bawaan theme OJS */
.jrtn-page .jrtn-fit-list > li::marker {
    content: none !important;
}

/* Centang hijau */
.jrtn-page .jrtn-fit-list > li::before {
    position: absolute !important;
    top: 14px !important;
    left: 15px !important;

    display: inline-flex !important;

    width: 22px !important;
    height: 22px !important;

    align-items: center !important;
    justify-content: center !important;

    content: "✓" !important;

    background: #e6f4ea !important;
    color: #247a3d !important;

    border: 1px solid #9fceac !important;
    border-radius: 50% !important;

    font-family: inherit !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}


/* --------------------------------------------------------------------------
   OUT-OF-SCOPE LIST
   Silang merah untuk kondisi yang berada di luar scope jurnal
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-exclusion-list {
    display: grid !important;

    grid-template-columns: 1fr !important;
    gap: 9px !important;

    width: 100% !important;

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

    list-style: none !important;

    border-top: 0 !important;
}

.jrtn-page .jrtn-exclusion-list > li {
    position: relative !important;

    display: block !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 14px 15px 14px 47px !important;

    background: #fffafa !important;

    border: 1px solid #ebd1d1 !important;
    border-radius: 6px !important;

    color: var(--jrtn-muted) !important;

    font-size: 0.91rem !important;
    line-height: 1.55 !important;
}

/* Hilangkan marker bawaan theme */
.jrtn-page .jrtn-exclusion-list > li::marker {
    content: none !important;
}

/* Silang merah */
.jrtn-page .jrtn-exclusion-list > li::before {
    position: absolute !important;
    top: 14px !important;
    left: 15px !important;

    display: inline-flex !important;

    width: 22px !important;
    height: 22px !important;

    align-items: center !important;
    justify-content: center !important;

    content: "×" !important;

    background: #fbeaea !important;
    color: #a33a3a !important;

    border: 1px solid #dfadad !important;
    border-radius: 50% !important;

    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* --------------------------------------------------------------------------
   BOTTOM SUBMISSION PANEL
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-scope-action {
    position: relative !important;

    display: grid !important;

    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 24px !important;
    align-items: center !important;

    width: 100% !important;

    margin: 0 0 18px !important;
    padding: 22px 24px !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            140deg,
            rgba(238, 245, 251, 0.92),
            rgba(255, 255, 255, 1)
        ) !important;

    border: 1px solid var(--jrtn-line) !important;
    border-left: 4px solid var(--jrtn-accent) !important;
    border-radius: 8px !important;
}

.jrtn-page .jrtn-scope-action h3 {
    display: block !important;

    width: 100% !important;

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

    color: var(--jrtn-ink) !important;

    font-family: inherit !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.jrtn-page .jrtn-scope-action p {
    margin: 0 !important;

    color: var(--jrtn-muted) !important;

    font-size: 0.91rem !important;
    line-height: 1.58 !important;
}

.jrtn-page .jrtn-scope-action-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    justify-content: flex-end !important;
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 780px) {
    .jrtn-page .jrtn-fit-list {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-scope-action {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-scope-action-buttons {
        justify-content: flex-start !important;
    }
}

@media (max-width: 480px) {
    .jrtn-page .jrtn-scope-note {
        padding: 50px 17px 17px !important;
    }

    .jrtn-page .jrtn-scope-note::before {
        top: 16px !important;
        left: 17px !important;
    }

    .jrtn-page .jrtn-scope-action {
        padding: 18px !important;
    }

    .jrtn-page .jrtn-scope-action-buttons {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================================
   21. PUBLISHER, OWNERSHIP, AND CONTACT PAGES
   ========================================================================== */


/* --------------------------------------------------------------------------
   PUBLISHER IDENTITY
   Accent line memiliki ruang sendiri dan tidak menutupi label
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-publisher-identity {
    position: relative !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 24px !important;

    width: 100% !important;

    margin: 18px 0 0 !important;
    padding: 0 18px 0 22px !important;

    overflow: hidden !important;

    background: var(--jrtn-white) !important;

    border: 1px solid var(--jrtn-line) !important;
    border-left: 1px solid var(--jrtn-line) !important;
    border-radius: 8px !important;

    box-shadow: none !important;
}

/* Accent line terpisah dari area teks */
.jrtn-page .jrtn-publisher-identity::before {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: block !important;

    width: 4px !important;

    content: "" !important;

    background: var(--jrtn-accent) !important;

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

    pointer-events: none !important;
}

.jrtn-page .jrtn-publisher-identity-row {
    display: grid !important;
    grid-template-columns:
        minmax(128px, 0.38fr)
        minmax(0, 0.62fr) !important;

    gap: 14px !important;
    align-items: start !important;

    min-width: 0 !important;

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

    border-bottom: 1px solid var(--jrtn-line) !important;
}

/* Hilangkan garis bawah pada dua item terakhir */
.jrtn-page .jrtn-publisher-identity-row:nth-last-child(-n + 2) {
    border-bottom: 0 !important;
}

.jrtn-page .jrtn-publisher-identity-label {
    display: block !important;

    min-width: 0 !important;

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

    color: var(--jrtn-muted) !important;

    font-family: inherit !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.045em !important;
    line-height: 1.45 !important;
    text-transform: uppercase !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.jrtn-page .jrtn-publisher-identity-value {
    display: block !important;

    min-width: 0 !important;

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

    color: var(--jrtn-ink) !important;

    font-family: inherit !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    line-height: 1.52 !important;

    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

.jrtn-page .jrtn-publisher-identity-value a {
    color: var(--jrtn-accent) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
}

@media (max-width: 900px) {
    .jrtn-page .jrtn-publisher-identity {
        grid-template-columns: 1fr !important;

        padding-right: 17px !important;
        padding-left: 21px !important;
    }

    .jrtn-page .jrtn-publisher-identity-row:nth-last-child(-n + 2) {
        border-bottom: 1px solid var(--jrtn-line) !important;
    }

    .jrtn-page .jrtn-publisher-identity-row:last-child {
        border-bottom: 0 !important;
    }
}

@media (max-width: 560px) {
    .jrtn-page .jrtn-publisher-identity-row {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
}


/* --------------------------------------------------------------------------
   PUBLISHER RESPONSIBILITIES
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-responsibility-list {
    display: grid !important;

    grid-template-columns: 1fr !important;
    gap: 0 !important;

    width: 100% !important;

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

    list-style: none !important;

    border-top: 1px solid var(--jrtn-line) !important;
}

.jrtn-page .jrtn-responsibility-list > li {
    position: relative !important;

    margin: 0 !important;
    padding: 11px 4px 11px 21px !important;

    color: var(--jrtn-muted) !important;

    border-bottom: 1px solid var(--jrtn-line) !important;

    font-family: inherit !important;
    font-size: 0.91rem !important;
    line-height: 1.58 !important;
}

.jrtn-page .jrtn-responsibility-list > li::before {
    position: absolute !important;
    top: 20px !important;
    left: 3px !important;

    display: block !important;

    width: 6px !important;
    height: 6px !important;

    content: "" !important;

    background: var(--jrtn-accent) !important;
    border-radius: 50% !important;
}


/* --------------------------------------------------------------------------
   EDITORIAL INDEPENDENCE
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-independence-box {
    display: block !important;

    width: 100% !important;

    margin: 17px 0 0 !important;
    padding: 18px 20px !important;

    background:
        linear-gradient(
            145deg,
            rgba(238, 245, 251, 0.92),
            rgba(250, 252, 253, 1)
        ) !important;

    border: 1px solid #bfd0df !important;
    border-left: 4px solid var(--jrtn-accent) !important;
    border-radius: 7px !important;
}

.jrtn-page .jrtn-independence-box h4 {
    margin: 0 0 6px !important;

    color: var(--jrtn-ink) !important;

    font-family: inherit !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.jrtn-page .jrtn-independence-box p {
    margin: 0 !important;

    color: var(--jrtn-muted) !important;

    font-family: inherit !important;
    font-size: 0.91rem !important;
    line-height: 1.62 !important;
}


/* --------------------------------------------------------------------------
   PUBLISHER QUICK CONTACT
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-publisher-contact-strip {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;

    width: 100% !important;

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

    overflow: hidden !important;

    background: var(--jrtn-white) !important;

    border: 1px solid var(--jrtn-line) !important;
    border-radius: 8px !important;
}

.jrtn-page .jrtn-publisher-contact-item {
    display: block !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 16px 18px !important;
}

.jrtn-page .jrtn-publisher-contact-item + .jrtn-publisher-contact-item {
    border-left: 1px solid var(--jrtn-line) !important;
}

.jrtn-page .jrtn-publisher-contact-label {
    display: block !important;

    margin: 0 0 4px !important;

    color: var(--jrtn-muted) !important;

    font-family: inherit !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-publisher-contact-value {
    display: block !important;

    color: var(--jrtn-ink) !important;

    font-family: inherit !important;
    font-size: 0.91rem !important;
    font-weight: 600 !important;
    line-height: 1.48 !important;

    overflow-wrap: anywhere !important;
}


/* --------------------------------------------------------------------------
   CONTACT ROUTING GUIDE
   Diletakkan di atas kontak bawaan OJS
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-contact-routing {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 11px !important;

    width: 100% !important;

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

.jrtn-page .jrtn-contact-route {
    display: block !important;

    min-width: 0 !important;

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

    background: var(--jrtn-white) !important;

    border: 1px solid var(--jrtn-line) !important;
    border-top: 3px solid var(--jrtn-accent) !important;
    border-radius: 6px !important;
}

.jrtn-page .jrtn-contact-route-label {
    display: block !important;

    margin: 0 0 5px !important;

    color: var(--jrtn-accent) !important;

    font-family: inherit !important;
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-contact-route h4 {
    margin: 0 0 6px !important;

    color: var(--jrtn-ink) !important;

    font-family: inherit !important;
    font-size: 0.96rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
}

.jrtn-page .jrtn-contact-route p {
    margin: 0 !important;

    color: var(--jrtn-muted) !important;

    font-family: inherit !important;
    font-size: 0.88rem !important;
    line-height: 1.56 !important;
}


/* --------------------------------------------------------------------------
   CONTACT NOTICE
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-contact-notice {
    display: block !important;

    width: 100% !important;

    margin: 0 0 18px !important;
    padding: 15px 17px !important;

    background: var(--jrtn-accent-soft) !important;

    border: 1px solid #c2d3e1 !important;
    border-radius: 6px !important;
}

.jrtn-page .jrtn-contact-notice p {
    margin: 0 !important;

    color: var(--jrtn-muted) !important;

    font-family: inherit !important;
    font-size: 0.89rem !important;
    line-height: 1.58 !important;
}


/* --------------------------------------------------------------------------
   CONTACT DETAILS
   Digunakan jika kontak ditampilkan melalui HTML custom
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-contact-cards {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;

    width: 100% !important;

    margin: 0 0 18px !important;
}

.jrtn-page .jrtn-contact-card {
    display: block !important;

    min-width: 0 !important;

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

    background: var(--jrtn-white) !important;

    border: 1px solid var(--jrtn-line) !important;
    border-radius: 8px !important;
}

.jrtn-page .jrtn-contact-card-role {
    display: block !important;

    margin: 0 0 6px !important;

    color: var(--jrtn-accent) !important;

    font-family: inherit !important;
    font-size: 0.69rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-contact-card h3 {
    margin: 0 0 4px !important;

    color: var(--jrtn-ink) !important;

    font-family: inherit !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.jrtn-page .jrtn-contact-affiliation {
    margin: 0 0 15px !important;

    color: var(--jrtn-muted) !important;

    font-family: inherit !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
}

.jrtn-page .jrtn-contact-details {
    display: grid !important;

    grid-template-columns: 1fr !important;
    gap: 0 !important;

    width: 100% !important;

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

    border-top: 1px solid var(--jrtn-line) !important;
}

.jrtn-page .jrtn-contact-detail {
    display: grid !important;

    grid-template-columns: 75px minmax(0, 1fr) !important;
    gap: 12px !important;

    padding: 9px 0 !important;

    border-bottom: 1px solid var(--jrtn-line) !important;
}

.jrtn-page .jrtn-contact-detail-label {
    color: var(--jrtn-muted) !important;

    font-family: inherit !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-contact-detail-value {
    color: var(--jrtn-ink) !important;

    font-family: inherit !important;
    font-size: 0.89rem !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;

    overflow-wrap: anywhere !important;
}


/* --------------------------------------------------------------------------
   OPTIONAL: PENYESUAIAN KONTAK BAWAAN OJS
   Selector ini aman jika struktur theme menggunakan .page_contact
   -------------------------------------------------------------------------- */

.page_contact .address,
.page_contact .contact {
    margin-bottom: 16px !important;
    padding: 18px !important;

    background: #ffffff !important;

    border: 1px solid #d5e0ea !important;
    border-radius: 7px !important;
}

.page_contact .contact h2,
.page_contact .contact h3,
.page_contact .address h2,
.page_contact .address h3 {
    margin-top: 0 !important;

    font-family: inherit !important;
    font-weight: 700 !important;
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .jrtn-page .jrtn-publisher-identity,
    .jrtn-page .jrtn-contact-routing {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-publisher-contact-strip {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-publisher-contact-item
    + .jrtn-publisher-contact-item {
        border-top: 1px solid var(--jrtn-line) !important;
        border-left: 0 !important;
    }
}

@media (max-width: 680px) {
    .jrtn-page .jrtn-publisher-identity-row {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    .jrtn-page .jrtn-contact-cards {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .jrtn-page .jrtn-contact-detail {
        grid-template-columns: 1fr !important;
        gap: 3px !important;
    }
}

/* ==========================================================================
   22. CUSTOM CONTACT PAGE
   Journal of Rural and Tropical Nursing
   ========================================================================== */

.jrtn-page.jrtn-contact-page {
    width: 100% !important;
    max-width: none !important;
}


/* --------------------------------------------------------------------------
   CONTACT ROUTING
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-contact-routing-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 11px !important;

    width: 100% !important;

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

.jrtn-page .jrtn-contact-route-card {
    position: relative !important;

    display: block !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 17px 17px 17px 50px !important;

    background: var(--jrtn-white) !important;

    border: 1px solid var(--jrtn-line) !important;
    border-radius: 7px !important;
}

.jrtn-page .jrtn-contact-route-index {
    position: absolute !important;
    top: 17px !important;
    left: 15px !important;

    display: inline-flex !important;

    width: 25px !important;
    height: 25px !important;

    align-items: center !important;
    justify-content: center !important;

    background: var(--jrtn-accent-soft) !important;
    color: var(--jrtn-accent-dark) !important;

    border: 1px solid #b9ccdd !important;
    border-radius: 4px !important;

    font-family: inherit !important;
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.jrtn-page .jrtn-contact-route-card h4 {
    display: block !important;

    width: 100% !important;

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

    color: var(--jrtn-ink) !important;

    font-family: inherit !important;
    font-size: 0.96rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
}

.jrtn-page .jrtn-contact-route-card p {
    margin: 0 !important;

    color: var(--jrtn-muted) !important;

    font-family: inherit !important;
    font-size: 0.88rem !important;
    line-height: 1.57 !important;
}


/* --------------------------------------------------------------------------
   CONTACT PERSON DIRECTORY
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-contact-directory {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;

    width: 100% !important;

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

.jrtn-page .jrtn-contact-person-card {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;

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

    overflow: hidden !important;

    background: var(--jrtn-white) !important;

    border: 1px solid var(--jrtn-line) !important;
    border-radius: 8px !important;

    box-shadow: none !important;
}

/* Accent berbeda tipis untuk membedakan fungsi */
.jrtn-page .jrtn-contact-person-card::before {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    display: block !important;

    height: 4px !important;

    content: "" !important;

    background: var(--jrtn-accent) !important;
}

.jrtn-page .jrtn-contact-person-card-technical::before {
    background: #47748f !important;
}

.jrtn-page .jrtn-contact-role {
    display: block !important;

    margin: 2px 0 7px !important;

    color: var(--jrtn-accent) !important;

    font-family: inherit !important;
    font-size: 0.69rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.055em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-contact-person-name {
    display: block !important;

    width: 100% !important;

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

    color: var(--jrtn-ink) !important;

    font-family: inherit !important;
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.jrtn-page .jrtn-contact-person-affiliation {
    margin: 0 0 14px !important;

    color: var(--jrtn-muted) !important;

    font-family: inherit !important;
    font-size: 0.88rem !important;
    line-height: 1.57 !important;
}

.jrtn-page .jrtn-contact-person-purpose {
    margin: 0 0 15px !important;
    padding: 12px 14px !important;

    background: var(--jrtn-surface) !important;

    border-left: 3px solid var(--jrtn-accent) !important;
    border-radius: 0 5px 5px 0 !important;

    color: var(--jrtn-muted) !important;

    font-family: inherit !important;
    font-size: 0.87rem !important;
    line-height: 1.56 !important;
}


/* --------------------------------------------------------------------------
   CONTACT DETAIL ROWS
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-contact-meta {
    display: block !important;

    width: 100% !important;

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

    border-top: 1px solid var(--jrtn-line) !important;
}

.jrtn-page .jrtn-contact-meta-row {
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;

    width: 100% !important;

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

    border-bottom: 1px solid var(--jrtn-line) !important;
}

.jrtn-page .jrtn-contact-meta-row:last-child {
    border-bottom: 0 !important;
}

.jrtn-page .jrtn-contact-meta-label {
    display: block !important;

    margin: 0 !important;

    color: var(--jrtn-muted) !important;

    font-family: inherit !important;
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.045em !important;
    line-height: 1.5 !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-contact-meta-value {
    display: block !important;

    min-width: 0 !important;

    margin: 0 !important;

    color: var(--jrtn-ink) !important;

    font-family: inherit !important;
    font-size: 0.89rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;

    overflow-wrap: anywhere !important;
}

.jrtn-page .jrtn-contact-meta-value a {
    color: var(--jrtn-accent) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
}


/* --------------------------------------------------------------------------
   PUBLISHER AND MAILING ADDRESS
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-contact-office {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(250px, 0.85fr) !important;

    gap: 25px !important;
    align-items: start !important;

    width: 100% !important;

    margin: 0 0 18px !important;
    padding: 23px 25px !important;

    background:
        linear-gradient(
            145deg,
            rgba(238, 245, 251, 0.82),
            rgba(255, 255, 255, 1)
        ) !important;

    border: 1px solid var(--jrtn-line) !important;
    border-left: 4px solid var(--jrtn-accent) !important;
    border-radius: 8px !important;
}

.jrtn-page .jrtn-contact-office-description {
    margin: 0 !important;

    color: var(--jrtn-muted) !important;

    font-family: inherit !important;
    font-size: 0.92rem !important;
    line-height: 1.63 !important;
}

.jrtn-page .jrtn-contact-office-details {
    display: block !important;

    min-width: 0 !important;

    padding-left: 22px !important;

    border-left: 1px solid var(--jrtn-line) !important;
}

.jrtn-page .jrtn-contact-office-row {
    margin: 0 0 13px !important;
}

.jrtn-page .jrtn-contact-office-row:last-child {
    margin-bottom: 0 !important;
}

.jrtn-page .jrtn-contact-office-label {
    display: block !important;

    margin: 0 0 3px !important;

    color: var(--jrtn-muted) !important;

    font-family: inherit !important;
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.045em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-contact-office-value {
    display: block !important;

    min-width: 0 !important;

    color: var(--jrtn-ink) !important;

    font-family: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.52 !important;

    overflow-wrap: anywhere !important;
}


/* --------------------------------------------------------------------------
   CONTACT GUIDANCE
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-contact-guidance {
    display: block !important;

    width: 100% !important;

    margin: 0 0 18px !important;
    padding: 18px 20px !important;

    background: var(--jrtn-accent-soft) !important;

    border: 1px solid #bfd0df !important;
    border-radius: 7px !important;
}

.jrtn-page .jrtn-contact-guidance h3 {
    display: block !important;

    width: 100% !important;

    margin: 0 0 7px !important;

    color: var(--jrtn-ink) !important;

    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
}

.jrtn-page .jrtn-contact-guidance-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px 24px !important;

    width: 100% !important;

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

    list-style: none !important;
}

.jrtn-page .jrtn-contact-guidance-list > li {
    position: relative !important;

    margin: 0 !important;
    padding: 7px 2px 7px 17px !important;

    color: var(--jrtn-muted) !important;

    font-family: inherit !important;
    font-size: 0.88rem !important;
    line-height: 1.52 !important;
}

.jrtn-page .jrtn-contact-guidance-list > li::before {
    position: absolute !important;
    top: 15px !important;
    left: 2px !important;

    display: block !important;

    width: 5px !important;
    height: 5px !important;

    content: "" !important;

    background: var(--jrtn-accent) !important;
    border-radius: 50% !important;
}


/* --------------------------------------------------------------------------
   RESPONSIVE CONTACT PAGE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .jrtn-page .jrtn-contact-routing-grid {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-contact-office {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-contact-office-details {
        padding-top: 18px !important;
        padding-left: 0 !important;

        border-top: 1px solid var(--jrtn-line) !important;
        border-left: 0 !important;
    }
}

@media (max-width: 760px) {
    .jrtn-page .jrtn-contact-directory {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-contact-guidance-list {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .jrtn-page .jrtn-contact-person-card,
    .jrtn-page .jrtn-contact-office {
        padding: 18px !important;
    }

    .jrtn-page .jrtn-contact-meta-row {
        grid-template-columns: 1fr !important;
        gap: 3px !important;
    }

    .jrtn-page .jrtn-contact-route-card {
        padding-right: 15px !important;
        padding-left: 48px !important;
    }
}

/* ==========================================================================
   CONTACT PAGE — SECTION SPACING
   Memberi jarak vertikal konsisten antarbagian utama
   ========================================================================== */

/* Hilangkan margin bawah lama pada elemen utama */
.jrtn-page.jrtn-contact-page > .jrtn-about-hero,
.jrtn-page.jrtn-contact-page > section,
.jrtn-page.jrtn-contact-page > .jrtn-contact-office,
.jrtn-page.jrtn-contact-page > .jrtn-contact-guidance {
    margin-bottom: 0 !important;
}

/* Beri jarak pada setiap elemen utama setelah elemen pertama */
.jrtn-page.jrtn-contact-page > * + * {
    margin-top: 28px !important;
}

/* Jarak sedikit lebih ringkas pada mobile */
@media (max-width: 680px) {
    .jrtn-page.jrtn-contact-page > * + * {
        margin-top: 20px !important;
    }
}

.jrtn-page > * + * {
    margin-top: 28px !important;
}

@media (max-width: 680px) {
    .jrtn-page > * + * {
        margin-top: 20px !important;
    }
}

/* ==========================================================================
   23. JRTN RIGHT SIDEBAR
   ========================================================================== */

.jrtn-sidebar {
    --jrtn-sidebar-ink: #172033;
    --jrtn-sidebar-muted: #637083;
    --jrtn-sidebar-line: #d9e2ea;
    --jrtn-sidebar-surface: #f7f9fb;
    --jrtn-sidebar-blue: #1e4b7a;
    --jrtn-sidebar-blue-dark: #163a5d;
    --jrtn-sidebar-blue-soft: #eef5fb;
    --jrtn-sidebar-green: #3d7452;
    --jrtn-sidebar-brown: #80643e;
    --jrtn-sidebar-slate: #526b7a;
    --jrtn-sidebar-purple: #705383;

    display: block !important;
    width: 100% !important;

    color: var(--jrtn-sidebar-ink) !important;
    font-family: inherit !important;
}

.jrtn-sidebar *,
.jrtn-sidebar *::before,
.jrtn-sidebar *::after {
    box-sizing: border-box;
}

.jrtn-sidebar a {
    color: var(--jrtn-sidebar-blue) !important;
}

.jrtn-sidebar a:focus-visible {
    outline: 3px solid rgba(30, 75, 122, 0.25);
    outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   SHARED BLOCK
   -------------------------------------------------------------------------- */

.jrtn-sidebar-block {
    display: block !important;
    width: 100% !important;

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

    background: #ffffff !important;

    border: 1px solid var(--jrtn-sidebar-line) !important;
    border-radius: 7px !important;

    box-shadow: none !important;
}

.jrtn-sidebar-heading {
    position: relative !important;

    display: block !important;

    margin: 0 0 13px !important;
    padding: 0 0 0 12px !important;
}

.jrtn-sidebar-heading::before {
    position: absolute !important;
    top: 1px !important;
    bottom: 1px !important;
    left: 0 !important;

    display: block !important;

    width: 3px !important;

    content: "" !important;

    background: var(--jrtn-sidebar-blue) !important;
    border-radius: 3px !important;
}

.jrtn-sidebar-block-downloads .jrtn-sidebar-heading::before {
    background: var(--jrtn-sidebar-green) !important;
}

.jrtn-sidebar-block-policies .jrtn-sidebar-heading::before {
    background: var(--jrtn-sidebar-brown) !important;
}

.jrtn-sidebar-block-rights .jrtn-sidebar-heading::before {
    background: var(--jrtn-sidebar-slate) !important;
}

.jrtn-sidebar-block-services .jrtn-sidebar-heading::before {
    background: #607d8b !important;
}

.jrtn-sidebar-block-visitors .jrtn-sidebar-heading::before {
    background: var(--jrtn-sidebar-purple) !important;
}

.jrtn-sidebar-eyebrow {
    display: block !important;

    margin: 0 0 2px !important;

    color: var(--jrtn-sidebar-muted) !important;

    font-family: inherit !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

.jrtn-sidebar-title {
    display: block !important;

    margin: 0 !important;

    color: var(--jrtn-sidebar-ink) !important;

    font-family: inherit !important;
    font-size: 1.06rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}


/* --------------------------------------------------------------------------
   DOWNLOAD CARDS
   -------------------------------------------------------------------------- */

.jrtn-sidebar-downloads {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;

    margin: 0 !important;
}

.jrtn-sidebar-download {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 11px !important;
    align-items: center !important;

    min-width: 0 !important;

    padding: 10px 11px !important;

    color: var(--jrtn-sidebar-ink) !important;
    text-decoration: none !important;

    background: var(--jrtn-sidebar-surface) !important;

    border: 1px solid var(--jrtn-sidebar-line) !important;
    border-radius: 6px !important;
}

.jrtn-sidebar-download:hover {
    background: var(--jrtn-sidebar-blue-soft) !important;
    border-color: #b7cbdc !important;
}

.jrtn-sidebar-download-icon {
    display: flex !important;

    width: 44px !important;
    height: 44px !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid var(--jrtn-sidebar-line) !important;
    border-radius: 5px !important;
}

.jrtn-sidebar-download-icon img {
    display: block !important;

    width: 34px !important;
    height: 34px !important;

    object-fit: contain !important;
}

.jrtn-sidebar-download-text {
    display: block !important;
    min-width: 0 !important;
}

.jrtn-sidebar-download-title {
    display: block !important;

    margin: 0 0 2px !important;

    color: var(--jrtn-sidebar-ink) !important;

    font-family: inherit !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.jrtn-sidebar-download-meta {
    display: block !important;

    color: var(--jrtn-sidebar-muted) !important;

    font-family: inherit !important;
    font-size: 0.73rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}


/* --------------------------------------------------------------------------
   SUBMIT CTA
   -------------------------------------------------------------------------- */

.jrtn-sidebar-submit {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    margin: 0 0 16px !important;
    padding: 17px !important;

    overflow: hidden !important;

    background: var(--jrtn-sidebar-blue) !important;

    border: 1px solid var(--jrtn-sidebar-blue) !important;
    border-radius: 7px !important;
}

.jrtn-sidebar-submit::after {
    position: absolute !important;
    right: -44px !important;
    bottom: -56px !important;

    display: block !important;

    width: 120px !important;
    height: 120px !important;

    content: "" !important;

    border: 19px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 50% !important;

    pointer-events: none !important;
}

.jrtn-sidebar-submit-label,
.jrtn-sidebar-submit-title,
.jrtn-sidebar-submit-text,
.jrtn-sidebar-submit-button {
    position: relative !important;
    z-index: 1 !important;
}

.jrtn-sidebar-submit-label {
    display: block !important;

    margin: 0 0 4px !important;

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

    font-family: inherit !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
}

.jrtn-sidebar-submit-title {
    display: block !important;

    margin: 0 0 6px !important;

    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.jrtn-sidebar-submit-text {
    margin: 0 0 13px !important;

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

    font-family: inherit !important;
    font-size: 0.79rem !important;
    line-height: 1.5 !important;
}

.jrtn-sidebar-submit-button {
    display: inline-flex !important;

    min-height: 38px !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 8px 13px !important;

    color: var(--jrtn-sidebar-blue-dark) !important;
    text-decoration: none !important;

    background: #ffffff !important;

    border: 1px solid #ffffff !important;
    border-radius: 5px !important;

    font-family: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
}

.jrtn-sidebar-submit-button:hover {
    color: var(--jrtn-sidebar-blue-dark) !important;
    background: #f1f5f9 !important;
}


/* --------------------------------------------------------------------------
   SIDEBAR LINK LIST
   -------------------------------------------------------------------------- */

.jrtn-sidebar-links {
    display: block !important;

    width: 100% !important;

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

    border-top: 1px solid var(--jrtn-sidebar-line) !important;
}

.jrtn-sidebar-link {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 10px 20px 10px 0 !important;

    color: var(--jrtn-sidebar-ink) !important;
    text-decoration: none !important;

    border-bottom: 1px solid var(--jrtn-sidebar-line) !important;

    font-family: inherit !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    line-height: 1.42 !important;
}

.jrtn-sidebar-link:last-child {
    border-bottom: 0 !important;
}

.jrtn-sidebar-link::after {
    position: absolute !important;
    top: 50% !important;
    right: 2px !important;

    display: block !important;

    content: "›" !important;

    color: #8b98a8 !important;

    font-size: 1rem !important;
    line-height: 1 !important;

    transform: translateY(-50%) !important;
}

.jrtn-sidebar-link:hover {
    color: var(--jrtn-sidebar-blue) !important;
}

.jrtn-sidebar-link:hover::after {
    color: var(--jrtn-sidebar-blue) !important;
}


/* --------------------------------------------------------------------------
   JOURNAL INFORMATION
   -------------------------------------------------------------------------- */

.jrtn-sidebar-facts {
    display: block !important;

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

    border-top: 1px solid var(--jrtn-sidebar-line) !important;
}

.jrtn-sidebar-fact {
    display: grid !important;
    grid-template-columns: minmax(0, 0.43fr) minmax(0, 0.57fr) !important;
    gap: 10px !important;

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

    border-bottom: 1px solid var(--jrtn-sidebar-line) !important;
}

.jrtn-sidebar-fact:last-child {
    border-bottom: 0 !important;
}

.jrtn-sidebar-fact-label {
    color: var(--jrtn-sidebar-muted) !important;

    font-family: inherit !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.45 !important;
    text-transform: uppercase !important;
}

.jrtn-sidebar-fact-value {
    color: var(--jrtn-sidebar-ink) !important;

    font-family: inherit !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;

    overflow-wrap: break-word !important;
}


/* --------------------------------------------------------------------------
   VISITORS
   -------------------------------------------------------------------------- */

.jrtn-sidebar-visitor-intro {
    margin: 0 0 13px !important;

    color: var(--jrtn-sidebar-muted) !important;

    font-family: inherit !important;
    font-size: 0.79rem !important;
    line-height: 1.55 !important;
}

.jrtn-sidebar-counter {
    display: block !important;

    width: 100% !important;

    margin: 0 0 14px !important;
    padding: 10px !important;

    text-align: center !important;

    background: var(--jrtn-sidebar-surface) !important;

    border: 1px solid var(--jrtn-sidebar-line) !important;
    border-radius: 6px !important;
}

.jrtn-sidebar-counter img {
    display: block !important;

    max-width: 100% !important;
    height: auto !important;

    margin: 0 auto !important;

    border: 0 !important;
}

.jrtn-sidebar-visitor-map-label {
    display: block !important;

    margin: 0 0 7px !important;

    color: var(--jrtn-sidebar-muted) !important;

    font-family: inherit !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.jrtn-sidebar-visitor-frame {
    display: block !important;

    width: 100% !important;
    height: 110px !important;

    overflow: hidden !important;

    border: 1px solid var(--jrtn-sidebar-line) !important;
    border-radius: 6px !important;
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
    .jrtn-sidebar-block {
        padding: 14px !important;
    }

    .jrtn-sidebar-fact {
        grid-template-columns: 1fr !important;
        gap: 2px !important;
    }
}

/* ==========================================================================
   SIDEBAR — PENDING LINKS
   Hapus class .jrtn-sidebar-link-pending setelah halaman sudah aktif
   ========================================================================== */

.jrtn-sidebar-link-pending {
    color: #718096 !important;
    cursor: default !important;
    pointer-events: none !important;
}

.jrtn-sidebar-link-pending::after {
    content: "–" !important;
    color: #a0aab6 !important;
}

.jrtn-sidebar-link-pending:hover {
    color: #718096 !important;
}

/* ==========================================================================
   24. SIDEBAR PUBLICATION SCHEDULE
   Tiga tingkat bulan penerbitan
   ========================================================================== */

.jrtn-sidebar-block-schedule
.jrtn-sidebar-heading::before {
    background: #356f91 !important;
}

.jrtn-sidebar-schedule-intro {
    margin: 0 0 12px !important;

    color: var(--jrtn-sidebar-muted) !important;

    font-family: inherit !important;
    font-size: 0.78rem !important;
    line-height: 1.52 !important;
}


/* --------------------------------------------------------------------------
   THREE-LEVEL MONTH BLOCK
   -------------------------------------------------------------------------- */

.jrtn-sidebar-schedule {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;

    width: 100% !important;

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

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid var(--jrtn-sidebar-line) !important;
    border-radius: 7px !important;
}

.jrtn-sidebar-month {
    position: relative !important;

    display: grid !important;
    grid-template-columns:
        32px
        minmax(0, 1fr)
        auto !important;

    gap: 10px !important;
    align-items: center !important;

    min-width: 0 !important;

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

    border-bottom: 1px solid var(--jrtn-sidebar-line) !important;

    animation:
        jrtn-sidebar-month-reveal
        320ms
        ease-out
        both;
}

.jrtn-sidebar-month:last-child {
    border-bottom: 0 !important;
}

.jrtn-sidebar-month:nth-child(1) {
    animation-delay: 40ms;
}

.jrtn-sidebar-month:nth-child(2) {
    animation-delay: 100ms;
}

.jrtn-sidebar-month:nth-child(3) {
    animation-delay: 160ms;
}


/* Tingkatan warna masih dalam satu keluarga visual */

.jrtn-sidebar-month-april {
    background: #f4f8fc !important;
}

.jrtn-sidebar-month-august {
    background: #eaf2f9 !important;
}

.jrtn-sidebar-month-december {
    background: #dfeaf4 !important;
}


/* Nomor urut bulan */

.jrtn-sidebar-month-index {
    display: inline-flex !important;

    width: 28px !important;
    height: 28px !important;

    align-items: center !important;
    justify-content: center !important;

    background: #ffffff !important;
    color: var(--jrtn-sidebar-blue-dark) !important;

    border: 1px solid #b9ccdc !important;
    border-radius: 5px !important;

    font-family: inherit !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}


/* Nama dan deskripsi bulan */

.jrtn-sidebar-month-content {
    display: block !important;

    min-width: 0 !important;
}

.jrtn-sidebar-month-name {
    display: block !important;

    margin: 0 0 1px !important;

    color: var(--jrtn-sidebar-ink) !important;

    font-family: inherit !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.jrtn-sidebar-month-meta {
    display: block !important;

    color: var(--jrtn-sidebar-muted) !important;

    font-family: inherit !important;
    font-size: 0.68rem !important;
    line-height: 1.35 !important;
}


/* Label nomor issue */

.jrtn-sidebar-month-status {
    display: inline-block !important;

    padding: 3px 6px !important;

    background: rgba(255, 255, 255, 0.72) !important;
    color: var(--jrtn-sidebar-blue-dark) !important;

    border: 1px solid rgba(30, 75, 122, 0.16) !important;
    border-radius: 4px !important;

    font-family: inherit !important;
    font-size: 0.61rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.025em !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}


/* --------------------------------------------------------------------------
   LANGUAGE INFORMATION
   -------------------------------------------------------------------------- */

.jrtn-sidebar-language {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;

    gap: 10px !important;
    align-items: center !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 10px 1px 0 !important;

    border-top: 1px solid var(--jrtn-sidebar-line) !important;
}

.jrtn-sidebar-language-label {
    color: var(--jrtn-sidebar-muted) !important;

    font-family: inherit !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

.jrtn-sidebar-language-value {
    color: var(--jrtn-sidebar-ink) !important;

    font-family: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}


/* --------------------------------------------------------------------------
   SUBTLE ONE-TIME ANIMATION
   -------------------------------------------------------------------------- */

@keyframes jrtn-sidebar-month-reveal {
    from {
        opacity: 0;
        transform: translateX(-5px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .jrtn-sidebar-month {
        animation: none !important;
    }
}

@media (max-width: 480px) {
    .jrtn-sidebar-month {
        grid-template-columns:
            30px
            minmax(0, 1fr) !important;
    }

    .jrtn-sidebar-month-status {
        grid-column: 2 !important;

        justify-self: start !important;

        margin-top: 3px !important;
    }
}

/* ==========================================================================
   25. SIDEBAR PRIORITY LINKS
   Hanya menggunakan badge KEY berwarna gold
   ========================================================================== */

.jrtn-sidebar-link-key {
    margin: 0 !important;
    padding: 10px 46px 10px 0 !important;

    background: transparent !important;
    color: var(--jrtn-sidebar-ink) !important;

    border: 0 !important;
    border-bottom: 1px solid var(--jrtn-sidebar-line) !important;
    border-radius: 0 !important;

    font-weight: 500 !important;
}


/* Badge KEY berwarna gold */

.jrtn-sidebar-link-key::before {
    position: absolute !important;
    top: 50% !important;
    right: 18px !important;

    display: inline-flex !important;

    min-width: 26px !important;
    height: 15px !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 0 5px !important;

    content: "KEY" !important;

    color: #765100 !important;

    background:
        linear-gradient(
            135deg,
            #fff7c7 0%,
            #f8d96b 48%,
            #fff0a6 100%
        ) !important;

    border: 1px solid #ddb94d !important;
    border-radius: 3px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 1px 2px rgba(113, 79, 0, 0.12) !important;

    font-family: inherit !important;
    font-size: 0.46rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.055em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;

    transform: translateY(-50%) !important;

    pointer-events: none !important;
}


/* Panah berada di sisi paling kanan */

.jrtn-sidebar-link-key::after {
    right: 2px !important;

    color: #8b98a8 !important;
}


/* Hover tetap sama seperti link biasa */

.jrtn-sidebar-link-key:hover {
    padding-left: 0 !important;

    background: transparent !important;
    color: var(--jrtn-sidebar-blue) !important;

    border-left: 0 !important;
}


/* Badge sedikit lebih terang ketika link diarahkan */

.jrtn-sidebar-link-key:hover::before {
    color: #674500 !important;

    background:
        linear-gradient(
            135deg,
            #fff9d8 0%,
            #f5cf4c 48%,
            #fff1a4 100%
        ) !important;

    border-color: #cda333 !important;
}


/* --------------------------------------------------------------------------
   PRIORITY LINK YANG MASIH PENDING
   Tidak menampilkan badge KEY sampai halaman aktif
   -------------------------------------------------------------------------- */

.jrtn-sidebar-link-pending.jrtn-sidebar-link-key {
    margin: 0 !important;
    padding: 10px 20px 10px 0 !important;

    background: transparent !important;
    color: #718096 !important;

    border: 0 !important;
    border-bottom: 1px solid var(--jrtn-sidebar-line) !important;
    border-radius: 0 !important;

    font-weight: 500 !important;
}

.jrtn-sidebar-link-pending.jrtn-sidebar-link-key::before {
    display: none !important;

    content: none !important;
}

.jrtn-sidebar-link-pending.jrtn-sidebar-link-key::after {
    right: 2px !important;

    content: "–" !important;

    color: #a0aab6 !important;
}

/* --------------------------------------------------------------------------
   INAUGURAL PUBLICATION CYCLE
   -------------------------------------------------------------------------- */

.jrtn-sidebar-inaugural-note {
    margin: 10px 0 13px !important;
    padding: 10px 11px !important;

    background: var(--jrtn-sidebar-blue-soft) !important;
    color: var(--jrtn-sidebar-muted) !important;

    border: 1px solid #c7d8e5 !important;
    border-radius: 5px !important;

    font-family: inherit !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
}

.jrtn-sidebar-inaugural-note strong {
    color: var(--jrtn-sidebar-blue-dark) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   26. AUTHOR GUIDELINES PAGE — FINAL
   Journal of Rural and Tropical Nursing
   ========================================================================== */

.jrtn-page.jrtn-author-guidelines-page {
    width: 100% !important;
    max-width: none !important;

    font-family: inherit !important;
}


/* --------------------------------------------------------------------------
   PAGE SPACING
   -------------------------------------------------------------------------- */

.jrtn-page.jrtn-author-guidelines-page > * + * {
    margin-top: 30px !important;
}


/* --------------------------------------------------------------------------
   HERO ACTIONS
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-author-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;

    width: 100% !important;

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


/* --------------------------------------------------------------------------
   IMPORTANT NOTICE
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-author-notice {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 18px 20px !important;

    background: var(--jrtn-accent-soft, #eef5fb) !important;

    border: 1px solid #bfd1df !important;
    border-radius: 7px !important;
}

.jrtn-page .jrtn-author-notice-mark {
    display: inline-flex !important;

    width: 38px !important;
    height: 38px !important;

    align-items: center !important;
    justify-content: center !important;

    background: var(--jrtn-white, #ffffff) !important;
    color: var(--jrtn-accent, #1e4b7a) !important;

    border: 1px solid #b9ccdc !important;
    border-radius: 50% !important;

    font-family: inherit !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.jrtn-page .jrtn-author-notice h3 {
    margin: 0 0 5px !important;

    color: var(--jrtn-ink, #172033) !important;

    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
}

.jrtn-page .jrtn-author-notice p {
    margin: 0 !important;

    color: var(--jrtn-muted, #637083) !important;

    font-family: inherit !important;
    font-size: 0.91rem !important;
    line-height: 1.62 !important;
}

.jrtn-page .jrtn-author-notice p + p {
    margin-top: 8px !important;
}


/* --------------------------------------------------------------------------
   PRE-SUBMISSION CHECKS
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-author-precheck {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 24px !important;

    width: 100% !important;

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

    border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
}

.jrtn-page .jrtn-author-check {
    position: relative !important;

    margin: 0 !important;
    padding: 13px 3px 13px 31px !important;

    color: var(--jrtn-muted, #637083) !important;

    border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;

    font-family: inherit !important;
    font-size: 0.9rem !important;
    line-height: 1.56 !important;
}

.jrtn-page .jrtn-author-check::before {
    position: absolute !important;
    top: 14px !important;
    left: 2px !important;

    display: inline-flex !important;

    width: 20px !important;
    height: 20px !important;

    align-items: center !important;
    justify-content: center !important;

    content: "✓" !important;

    background: #e8f4eb !important;
    color: #287642 !important;

    border: 1px solid #afd1b8 !important;
    border-radius: 50% !important;

    font-family: inherit !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.jrtn-page .jrtn-author-check strong {
    color: var(--jrtn-ink, #172033) !important;
    font-weight: 700 !important;
}


/* --------------------------------------------------------------------------
   REQUIRED FILES
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-author-file-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;

    width: 100% !important;

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

    list-style: none !important;

    border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
}

.jrtn-page .jrtn-author-file-item {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;

    margin: 0 !important;
    padding: 16px 2px !important;

    border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;
}

.jrtn-page .jrtn-author-file-number {
    display: inline-flex !important;

    width: 34px !important;
    height: 34px !important;

    align-items: center !important;
    justify-content: center !important;

    background: var(--jrtn-accent-soft, #eef5fb) !important;
    color: var(--jrtn-accent, #1e4b7a) !important;

    border: 1px solid #bfd1df !important;
    border-radius: 5px !important;

    font-family: inherit !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.jrtn-page .jrtn-author-file-content {
    min-width: 0 !important;
}

.jrtn-page .jrtn-author-file-content h4 {
    margin: 0 0 5px !important;

    color: var(--jrtn-ink, #172033) !important;

    font-family: inherit !important;
    font-size: 0.97rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
}

.jrtn-page .jrtn-author-file-content p {
    margin: 0 !important;

    color: var(--jrtn-muted, #637083) !important;

    font-family: inherit !important;
    font-size: 0.89rem !important;
    line-height: 1.59 !important;
}

.jrtn-page .jrtn-author-file-content p + p {
    margin-top: 8px !important;
}


/* --------------------------------------------------------------------------
   TWO-COLUMN GUIDANCE
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-author-guidance-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;

    width: 100% !important;

    margin: 18px 0 0 !important;
}

.jrtn-page .jrtn-author-guidance-panel {
    min-width: 0 !important;

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

.jrtn-page .jrtn-author-guidance-panel h4 {
    margin: 0 0 9px !important;
    padding: 0 0 9px !important;

    color: var(--jrtn-ink, #172033) !important;

    border-bottom: 2px solid var(--jrtn-accent, #1e4b7a) !important;

    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
}

.jrtn-page .jrtn-author-list {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.jrtn-page .jrtn-author-list > li {
    position: relative !important;

    margin: 0 !important;
    padding: 10px 2px 10px 18px !important;

    color: var(--jrtn-muted, #637083) !important;

    border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;

    font-family: inherit !important;
    font-size: 0.89rem !important;
    line-height: 1.56 !important;
}

.jrtn-page .jrtn-author-list > li::before {
    position: absolute !important;
    top: 18px !important;
    left: 2px !important;

    display: block !important;

    width: 5px !important;
    height: 5px !important;

    content: "" !important;

    background: var(--jrtn-accent, #1e4b7a) !important;
    border-radius: 50% !important;
}


/* --------------------------------------------------------------------------
   MANUSCRIPT STRUCTURE
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-author-structure {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;

    width: 100% !important;

    margin: 18px 0 0 !important;

    border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
}

.jrtn-page .jrtn-author-structure-row {
    display: grid !important;
    grid-template-columns:
        minmax(150px, 0.29fr)
        minmax(0, 0.71fr) !important;

    gap: 22px !important;

    margin: 0 !important;
    padding: 13px 2px !important;

    border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;
}

.jrtn-page .jrtn-author-structure-name {
    color: var(--jrtn-ink, #172033) !important;

    font-family: inherit !important;
    font-size: 0.89rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}

.jrtn-page .jrtn-author-structure-description {
    color: var(--jrtn-muted, #637083) !important;

    font-family: inherit !important;
    font-size: 0.89rem !important;
    line-height: 1.58 !important;
}


/* --------------------------------------------------------------------------
   EQUATOR ACTION BOX
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-equator-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.36fr) !important;
    gap: 24px !important;
    align-items: center !important;

    width: 100% !important;

    margin: 18px 0 !important;
    padding: 20px 22px !important;

    background: var(--jrtn-accent-soft, #eef5fb) !important;

    border: 1px solid #bfd1df !important;
    border-left: 4px solid var(--jrtn-accent, #1e4b7a) !important;
    border-radius: 7px !important;
}

.jrtn-page .jrtn-equator-box h4 {
    margin: 0 0 5px !important;

    color: var(--jrtn-ink, #172033) !important;

    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
}

.jrtn-page .jrtn-equator-box p {
    margin: 0 !important;

    color: var(--jrtn-muted, #637083) !important;

    font-family: inherit !important;
    font-size: 0.89rem !important;
    line-height: 1.59 !important;
}

.jrtn-page .jrtn-equator-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;

    width: 100% !important;
}

.jrtn-page .jrtn-equator-actions .jrtn-button {
    width: 100% !important;

    justify-content: center !important;

    text-align: center !important;
}


/* --------------------------------------------------------------------------
   EQUATOR TABLE
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-equator-table-wrap {
    width: 100% !important;

    margin: 0 !important;

    overflow-x: auto !important;

    border: 1px solid var(--jrtn-line, #d9e2ea) !important;
    border-radius: 7px !important;
}

.jrtn-page .jrtn-equator-table {
    width: 100% !important;
    min-width: 720px !important;

    margin: 0 !important;

    border-collapse: collapse !important;
    border-spacing: 0 !important;

    background: var(--jrtn-white, #ffffff) !important;
}

.jrtn-page .jrtn-equator-table th {
    padding: 11px 13px !important;

    background: var(--jrtn-accent-soft, #eef5fb) !important;
    color: var(--jrtn-ink, #172033) !important;

    border-bottom: 1px solid #bfd1df !important;

    text-align: left !important;
    vertical-align: bottom !important;

    font-family: inherit !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-equator-table td {
    padding: 12px 13px !important;

    color: var(--jrtn-muted, #637083) !important;

    border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;

    vertical-align: top !important;

    font-family: inherit !important;
    font-size: 0.85rem !important;
    line-height: 1.53 !important;
}

.jrtn-page .jrtn-equator-table tr:last-child td {
    border-bottom: 0 !important;
}

.jrtn-page .jrtn-equator-table td:first-child {
    width: 32% !important;

    color: var(--jrtn-ink, #172033) !important;
    font-weight: 650 !important;
}

.jrtn-page .jrtn-equator-table td:nth-child(2) {
    width: 24% !important;
}

.jrtn-page .jrtn-equator-table a {
    color: var(--jrtn-accent, #1e4b7a) !important;

    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
}


/* --------------------------------------------------------------------------
   REPORTING STEPS
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-reporting-steps {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;

    width: 100% !important;

    margin: 18px 0 0 !important;
}

.jrtn-page .jrtn-reporting-step {
    min-width: 0 !important;

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

    background: var(--jrtn-white, #ffffff) !important;

    border: 1px solid var(--jrtn-line, #d9e2ea) !important;
    border-top: 3px solid var(--jrtn-accent, #1e4b7a) !important;
    border-radius: 6px !important;
}

.jrtn-page .jrtn-reporting-step-number {
    display: block !important;

    margin: 0 0 5px !important;

    color: var(--jrtn-accent, #1e4b7a) !important;

    font-family: inherit !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-reporting-step strong {
    display: block !important;

    margin: 0 0 4px !important;

    color: var(--jrtn-ink, #172033) !important;

    font-family: inherit !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
}

.jrtn-page .jrtn-reporting-step p {
    margin: 0 !important;

    color: var(--jrtn-muted, #637083) !important;

    font-family: inherit !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
}


/* --------------------------------------------------------------------------
   DECLARATION GRID
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-declaration-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 24px !important;

    width: 100% !important;

    margin: 18px 0 0 !important;

    border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
}

.jrtn-page .jrtn-declaration-item {
    margin: 0 !important;
    padding: 12px 2px !important;

    border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;
}

.jrtn-page .jrtn-declaration-item strong {
    display: block !important;

    margin: 0 0 3px !important;

    color: var(--jrtn-ink, #172033) !important;

    font-family: inherit !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

.jrtn-page .jrtn-declaration-item span {
    display: block !important;

    color: var(--jrtn-muted, #637083) !important;

    font-family: inherit !important;
    font-size: 0.84rem !important;
    line-height: 1.53 !important;
}


/* --------------------------------------------------------------------------
   ACCEPTANCE WORKFLOW
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-acceptance-flow {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 11px !important;

    width: 100% !important;

    margin: 18px 0 0 !important;
}

.jrtn-page .jrtn-acceptance-item {
    min-width: 0 !important;

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

    background: var(--jrtn-white, #ffffff) !important;

    border: 1px solid var(--jrtn-line, #d9e2ea) !important;
    border-top: 3px solid var(--jrtn-accent, #1e4b7a) !important;
    border-radius: 6px !important;
}

.jrtn-page .jrtn-acceptance-item-number {
    display: block !important;

    margin: 0 0 5px !important;

    color: var(--jrtn-accent, #1e4b7a) !important;

    font-family: inherit !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-acceptance-item h4 {
    margin: 0 0 5px !important;

    color: var(--jrtn-ink, #172033) !important;

    font-family: inherit !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
}

.jrtn-page .jrtn-acceptance-item p {
    margin: 0 !important;

    color: var(--jrtn-muted, #637083) !important;

    font-family: inherit !important;
    font-size: 0.83rem !important;
    line-height: 1.52 !important;
}


/* --------------------------------------------------------------------------
   INLINE NOTE
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-author-inline-note {
    margin: 17px 0 0 !important;
    padding: 13px 15px !important;

    background: var(--jrtn-surface, #f7f9fb) !important;

    border: 1px solid var(--jrtn-line, #d9e2ea) !important;
    border-left: 3px solid var(--jrtn-accent, #1e4b7a) !important;
    border-radius: 0 6px 6px 0 !important;

    color: var(--jrtn-muted, #637083) !important;

    font-family: inherit !important;
    font-size: 0.87rem !important;
    line-height: 1.57 !important;
}

.jrtn-page .jrtn-author-inline-note strong {
    color: var(--jrtn-ink, #172033) !important;
}


/* --------------------------------------------------------------------------
   FINAL ACTION
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-author-final-action {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 22px !important;
    align-items: center !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 22px 24px !important;

    background: var(--jrtn-accent-soft, #eef5fb) !important;

    border: 1px solid #bfd1df !important;
    border-radius: 8px !important;
}

.jrtn-page .jrtn-author-final-action h3 {
    margin: 0 0 5px !important;

    color: var(--jrtn-ink, #172033) !important;

    font-family: inherit !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
}

.jrtn-page .jrtn-author-final-action p {
    margin: 0 !important;

    color: var(--jrtn-muted, #637083) !important;

    font-family: inherit !important;
    font-size: 0.9rem !important;
    line-height: 1.58 !important;
}

.jrtn-page .jrtn-author-final-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;

    justify-content: flex-end !important;
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
    .jrtn-page .jrtn-reporting-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .jrtn-page .jrtn-acceptance-flow {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-equator-box,
    .jrtn-page .jrtn-author-final-action {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-author-final-buttons {
        justify-content: flex-start !important;
    }
}

@media (max-width: 720px) {
    .jrtn-page .jrtn-author-precheck,
    .jrtn-page .jrtn-author-guidance-grid,
    .jrtn-page .jrtn-declaration-grid {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-author-structure-row {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    .jrtn-page.jrtn-author-guidelines-page > * + * {
        margin-top: 22px !important;
    }
}

@media (max-width: 500px) {
    .jrtn-page .jrtn-author-notice {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-reporting-steps {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-author-file-item {
        grid-template-columns: 34px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .jrtn-page .jrtn-author-actions,
    .jrtn-page .jrtn-author-final-buttons {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-author-actions .jrtn-button,
    .jrtn-page .jrtn-author-final-buttons .jrtn-button {
        width: 100% !important;

        justify-content: center !important;

        text-align: center !important;
    }
}

/* ==========================================================================
   27. ARTICLE TYPES PAGE
   Journal of Rural and Tropical Nursing
   ========================================================================== */

.jrtn-page.jrtn-article-types-page {
    width: 100% !important;
    max-width: none !important;

    font-family: inherit !important;
}


/* --------------------------------------------------------------------------
   PAGE SPACING
   -------------------------------------------------------------------------- */

.jrtn-page.jrtn-article-types-page > * + * {
    margin-top: 30px !important;
}


/* --------------------------------------------------------------------------
   ARTICLE TYPE QUICK NAVIGATION
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-types-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 22px !important;

    width: 100% !important;

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

    border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
}

.jrtn-page .jrtn-types-nav-link {
    position: relative !important;

    display: block !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 11px 25px 11px 2px !important;

    color: var(--jrtn-ink, #172033) !important;
    text-decoration: none !important;

    border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;

    font-family: inherit !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

.jrtn-page .jrtn-types-nav-link::after {
    position: absolute !important;
    top: 50% !important;
    right: 3px !important;

    content: "↓" !important;

    color: #8190a0 !important;

    font-size: 0.82rem !important;
    line-height: 1 !important;

    transform: translateY(-50%) !important;
}

.jrtn-page .jrtn-types-nav-link:hover,
.jrtn-page .jrtn-types-nav-link:focus {
    color: var(--jrtn-accent, #1e4b7a) !important;
}


/* --------------------------------------------------------------------------
   GENERAL WORD COUNT NOTICE
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-types-count-note {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 13px !important;
    align-items: start !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 17px 19px !important;

    background: var(--jrtn-accent-soft, #eef5fb) !important;

    border: 1px solid #bfd1df !important;
    border-radius: 7px !important;
}

.jrtn-page .jrtn-types-count-mark {
    display: inline-flex !important;

    width: 34px !important;
    height: 34px !important;

    align-items: center !important;
    justify-content: center !important;

    background: #ffffff !important;
    color: var(--jrtn-accent, #1e4b7a) !important;

    border: 1px solid #b9ccdc !important;
    border-radius: 50% !important;

    font-family: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.jrtn-page .jrtn-types-count-note h3 {
    margin: 0 0 5px !important;

    color: var(--jrtn-ink, #172033) !important;

    font-family: inherit !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
}

.jrtn-page .jrtn-types-count-note p {
    margin: 0 !important;

    color: var(--jrtn-muted, #637083) !important;

    font-family: inherit !important;
    font-size: 0.89rem !important;
    line-height: 1.6 !important;
}


/* --------------------------------------------------------------------------
   ARTICLE TYPE SUMMARY TABLE
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-types-table-wrap {
    width: 100% !important;

    margin: 18px 0 0 !important;

    overflow-x: auto !important;

    border: 1px solid var(--jrtn-line, #d9e2ea) !important;
    border-radius: 7px !important;
}

.jrtn-page .jrtn-types-table {
    width: 100% !important;
    min-width: 50px !important;

    margin: 0 !important;

    border-collapse: collapse !important;
    border-spacing: 0 !important;

    background: var(--jrtn-white, #ffffff) !important;
}

.jrtn-page .jrtn-types-table th {
    padding: 11px 13px !important;

    background: var(--jrtn-accent-soft, #eef5fb) !important;
    color: var(--jrtn-ink, #172033) !important;

    border-bottom: 1px solid #bfd1df !important;

    text-align: left !important;
    vertical-align: bottom !important;

    font-family: inherit !important;
    font-size: 0.67rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-types-table td {
    padding: 11px 13px !important;

    color: var(--jrtn-muted, #637083) !important;

    border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;

    vertical-align: top !important;

    font-family: inherit !important;
    font-size: 0.84rem !important;
    line-height: 1.5 !important;
}

.jrtn-page .jrtn-types-table tr:last-child td {
    border-bottom: 0 !important;
}

.jrtn-page .jrtn-types-table td:first-child {
    width: 32% !important;

    color: var(--jrtn-ink, #172033) !important;
    font-weight: 650 !important;
}

.jrtn-page .jrtn-types-table td:nth-child(2),
.jrtn-page .jrtn-types-table td:nth-child(3),
.jrtn-page .jrtn-types-table td:nth-child(4) {
    white-space: nowrap !important;
}

.jrtn-page .jrtn-types-table a {
    color: var(--jrtn-accent, #1e4b7a) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.jrtn-page .jrtn-types-table a:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}


/* --------------------------------------------------------------------------
   INDIVIDUAL ARTICLE TYPE
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-article-type {
    position: relative !important;

    width: 100% !important;

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

    scroll-margin-top: 120px !important;
}

.jrtn-page .jrtn-article-type + .jrtn-article-type {
    margin-top: 34px !important;
    padding-top: 34px !important;

    border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
}

.jrtn-page .jrtn-type-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 20px !important;
    align-items: start !important;

    width: 100% !important;

    margin: 0 0 16px !important;
}

.jrtn-page .jrtn-type-number {
    display: block !important;

    margin: 0 0 5px !important;

    color: var(--jrtn-accent, #1e4b7a) !important;

    font-family: inherit !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.055em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-type-title {
    margin: 0 0 6px !important;

    color: var(--jrtn-ink, #172033) !important;

    font-family: inherit !important;
    font-size: clamp(1.28rem, 2.1vw, 1.72rem) !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
}

.jrtn-page .jrtn-type-description {
    max-width: 760px !important;

    margin: 0 !important;

    color: var(--jrtn-muted, #637083) !important;

    font-family: inherit !important;
    font-size: 0.91rem !important;
    line-height: 1.62 !important;
}

.jrtn-page .jrtn-type-word-limit {
    display: block !important;

    min-width: 112px !important;

    margin: 2px 0 0 !important;
    padding: 10px 12px !important;

    background: var(--jrtn-accent-soft, #eef5fb) !important;

    border: 1px solid #bfd1df !important;
    border-radius: 6px !important;

    text-align: center !important;
}

.jrtn-page .jrtn-type-word-number {
    display: block !important;

    margin: 0 0 1px !important;

    color: var(--jrtn-accent, #1e4b7a) !important;

    font-family: inherit !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.jrtn-page .jrtn-type-word-label {
    display: block !important;

    color: var(--jrtn-muted, #637083) !important;

    font-family: inherit !important;
    font-size: 0.61rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.045em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
}


/* --------------------------------------------------------------------------
   TYPE REQUIREMENT STRIP
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-type-facts {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;

    width: 100% !important;

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

    overflow: hidden !important;

    background: var(--jrtn-white, #ffffff) !important;

    border: 1px solid var(--jrtn-line, #d9e2ea) !important;
    border-radius: 7px !important;
}

.jrtn-page .jrtn-type-fact {
    min-width: 0 !important;

    margin: 0 !important;
    padding: 12px 14px !important;
}

.jrtn-page .jrtn-type-fact + .jrtn-type-fact {
    border-left: 1px solid var(--jrtn-line, #d9e2ea) !important;
}

.jrtn-page .jrtn-type-fact-label {
    display: block !important;

    margin: 0 0 3px !important;

    color: var(--jrtn-muted, #637083) !important;

    font-family: inherit !important;
    font-size: 0.62rem !important;
    font-weight: 750 !important;
    letter-spacing: 0.045em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

.jrtn-page .jrtn-type-fact-value {
    display: block !important;

    color: var(--jrtn-ink, #172033) !important;

    font-family: inherit !important;
    font-size: 0.83rem !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;

    overflow-wrap: anywhere !important;
}


/* --------------------------------------------------------------------------
   TYPE CONTENT COLUMNS
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-type-content {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(250px, 0.94fr) !important;

    gap: 28px !important;
    align-items: start !important;

    width: 100% !important;
}

.jrtn-page .jrtn-type-column {
    min-width: 0 !important;
}

.jrtn-page .jrtn-type-subtitle {
    margin: 0 0 8px !important;
    padding: 0 0 8px !important;

    color: var(--jrtn-ink, #172033) !important;

    border-bottom: 2px solid var(--jrtn-accent, #1e4b7a) !important;

    font-family: inherit !important;
    font-size: 0.96rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.jrtn-page .jrtn-type-list {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.jrtn-page .jrtn-type-list > li {
    position: relative !important;

    margin: 0 !important;
    padding: 9px 2px 9px 18px !important;

    color: var(--jrtn-muted, #637083) !important;

    border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;

    font-family: inherit !important;
    font-size: 0.87rem !important;
    line-height: 1.56 !important;
}

.jrtn-page .jrtn-type-list > li::before {
    position: absolute !important;
    top: 17px !important;
    left: 2px !important;

    width: 5px !important;
    height: 5px !important;

    content: "" !important;

    background: var(--jrtn-accent, #1e4b7a) !important;
    border-radius: 50% !important;
}

.jrtn-page .jrtn-type-list strong {
    color: var(--jrtn-ink, #172033) !important;
    font-weight: 700 !important;
}


/* --------------------------------------------------------------------------
   REPORTING GUIDELINE NOTE
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-type-reporting {
    margin: 16px 0 0 !important;
    padding: 12px 14px !important;

    background: var(--jrtn-surface, #f7f9fb) !important;

    border: 1px solid var(--jrtn-line, #d9e2ea) !important;
    border-left: 3px solid var(--jrtn-accent, #1e4b7a) !important;
    border-radius: 0 6px 6px 0 !important;

    color: var(--jrtn-muted, #637083) !important;

    font-family: inherit !important;
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
}

.jrtn-page .jrtn-type-reporting strong {
    color: var(--jrtn-ink, #172033) !important;
}

.jrtn-page .jrtn-type-reporting a {
    color: var(--jrtn-accent, #1e4b7a) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}


/* --------------------------------------------------------------------------
   INVITATION NOTE
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-types-invitation {
    margin: 18px 0 0 !important;
    padding: 15px 17px !important;

    background: #fffaf0 !important;

    border: 1px solid #e7d9b5 !important;
    border-left: 3px solid #b38a2f !important;
    border-radius: 0 6px 6px 0 !important;

    color: #655b47 !important;

    font-family: inherit !important;
    font-size: 0.88rem !important;
    line-height: 1.58 !important;
}

.jrtn-page .jrtn-types-invitation strong {
    color: #4d422e !important;
}


/* --------------------------------------------------------------------------
   FINAL ACTION
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-types-final-action {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 22px !important;
    align-items: center !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 22px 24px !important;

    background: var(--jrtn-accent-soft, #eef5fb) !important;

    border: 1px solid #bfd1df !important;
    border-radius: 8px !important;
}

.jrtn-page .jrtn-types-final-action h3 {
    margin: 0 0 5px !important;

    color: var(--jrtn-ink, #172033) !important;

    font-family: inherit !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
}

.jrtn-page .jrtn-types-final-action p {
    margin: 0 !important;

    color: var(--jrtn-muted, #637083) !important;

    font-family: inherit !important;
    font-size: 0.89rem !important;
    line-height: 1.58 !important;
}

.jrtn-page .jrtn-types-final-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;

    justify-content: flex-end !important;
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .jrtn-page .jrtn-type-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .jrtn-page .jrtn-type-fact:nth-child(3) {
        border-left: 0 !important;
        border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
    }

    .jrtn-page .jrtn-type-fact:nth-child(4) {
        border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
    }

    .jrtn-page .jrtn-type-content {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .jrtn-page .jrtn-types-final-action {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-types-final-buttons {
        justify-content: flex-start !important;
    }
}

@media (max-width: 680px) {
    .jrtn-page .jrtn-types-nav {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-type-heading {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .jrtn-page .jrtn-type-word-limit {
        width: 118px !important;
    }

    .jrtn-page.jrtn-article-types-page > * + * {
        margin-top: 22px !important;
    }
}

@media (max-width: 480px) {
    .jrtn-page .jrtn-types-count-note {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-type-facts {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-type-fact + .jrtn-type-fact {
        border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
        border-left: 0 !important;
    }

    .jrtn-page .jrtn-types-final-buttons {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-types-final-buttons .jrtn-button {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   28. ARTICLE TYPE NAVIGATION — CSS ONLY
   Smooth scrolling, target highlight, and selection notification
   ========================================================================== */


/* --------------------------------------------------------------------------
   SMOOTH SCROLL
   Berlaku untuk link internal seperti href="#jrtn-original-research"
   -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth !important;
}


/* --------------------------------------------------------------------------
   SCROLL OFFSET
   Mencegah judul article type tertutup header
   -------------------------------------------------------------------------- */

.jrtn-page.jrtn-article-types-page .jrtn-article-type {
    position: relative !important;

    scroll-margin-top: 145px !important;
}


/* --------------------------------------------------------------------------
   NAVIGATION LINK INTERACTION
   -------------------------------------------------------------------------- */

.jrtn-page.jrtn-article-types-page .jrtn-types-nav-link {
    transition:
        color 160ms ease,
        background-color 160ms ease,
        padding-left 160ms ease !important;
}

.jrtn-page.jrtn-article-types-page .jrtn-types-nav-link:hover,
.jrtn-page.jrtn-article-types-page .jrtn-types-nav-link:focus {
    padding-left: 8px !important;

    color: var(--jrtn-accent, #1e4b7a) !important;

    background: rgba(238, 245, 251, 0.72) !important;
}


/* --------------------------------------------------------------------------
   TARGET SECTION HIGHLIGHT
   Aktif ketika URL mengandung ID section yang dipilih
   -------------------------------------------------------------------------- */

.jrtn-page.jrtn-article-types-page
.jrtn-article-type:target {
    border-radius: 8px !important;

    animation:
        jrtn-article-target-highlight
        1900ms
        cubic-bezier(0.22, 1, 0.36, 1)
        both !important;
}

@keyframes jrtn-article-target-highlight {
    0% {
        background-color: rgba(30, 75, 122, 0);

        box-shadow:
            0 0 0 0 rgba(30, 75, 122, 0);
    }

    18% {
        background-color: rgba(238, 245, 251, 0.96);

        box-shadow:
            0 0 0 5px rgba(30, 75, 122, 0.12);
    }

    58% {
        background-color: rgba(238, 245, 251, 0.6);

        box-shadow:
            0 0 0 3px rgba(30, 75, 122, 0.07);
    }

    100% {
        background-color: rgba(30, 75, 122, 0);

        box-shadow:
            0 0 0 0 rgba(30, 75, 122, 0);
    }
}


/* --------------------------------------------------------------------------
   SELECTED INDICATOR BESIDE ARTICLE TYPE NUMBER
   -------------------------------------------------------------------------- */

.jrtn-page.jrtn-article-types-page
.jrtn-article-type:target
.jrtn-type-number::after {
    display: inline-flex !important;

    min-height: 17px !important;

    align-items: center !important;
    justify-content: center !important;

    margin-left: 8px !important;
    padding: 2px 6px !important;

    content: "Selected" !important;

    color: #23683a !important;

    background: #e8f4eb !important;

    border: 1px solid #afd1b8 !important;
    border-radius: 3px !important;

    font-family: inherit !important;
    font-size: 0.49rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.045em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;

    vertical-align: middle !important;

    animation:
        jrtn-selected-label-reveal
        420ms
        ease-out
        both !important;
}

@keyframes jrtn-selected-label-reveal {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* --------------------------------------------------------------------------
   FIXED SELECTION NOTIFICATION
   Pseudo-element dibuat dari section yang sedang menjadi :target
   -------------------------------------------------------------------------- */

.jrtn-page.jrtn-article-types-page
.jrtn-article-type:target::before {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 9999 !important;

    display: flex !important;

    width: min(390px, calc(100vw - 32px)) !important;
    min-height: 52px !important;

    align-items: center !important;

    margin: 0 !important;
    padding: 13px 16px 13px 47px !important;

    color: var(--jrtn-ink, #172033) !important;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f6f9fc 100%
        ) !important;

    border: 1px solid #c5d6e4 !important;
    border-left: 4px solid var(--jrtn-accent, #1e4b7a) !important;
    border-radius: 7px !important;

    box-shadow:
        0 13px 32px rgba(17, 38, 68, 0.2) !important;

    font-family: inherit !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.005em !important;
    line-height: 1.45 !important;

    pointer-events: none !important;

    animation:
        jrtn-article-selection-toast
        2800ms
        ease
        both !important;
}


/* Ikon centang pada notification */

.jrtn-page.jrtn-article-types-page
.jrtn-article-type:target::after {
    position: fixed !important;
    right: calc(min(390px, calc(100vw - 32px)) - 15px) !important;
    bottom: 34px !important;
    z-index: 10000 !important;

    display: inline-flex !important;

    width: 28px !important;
    height: 28px !important;

    align-items: center !important;
    justify-content: center !important;

    content: "✓" !important;

    color: #287642 !important;

    background: #e8f4eb !important;

    border: 1px solid #afd1b8 !important;
    border-radius: 50% !important;

    font-family: inherit !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    pointer-events: none !important;

    animation:
        jrtn-article-selection-toast
        2800ms
        ease
        both !important;
}

@keyframes jrtn-article-selection-toast {
    0% {
        visibility: visible;
        opacity: 0;

        transform: translateY(14px);
    }

    12% {
        visibility: visible;
        opacity: 1;

        transform: translateY(0);
    }

    76% {
        visibility: visible;
        opacity: 1;

        transform: translateY(0);
    }

    100% {
        visibility: hidden;
        opacity: 0;

        transform: translateY(8px);
    }
}


/* --------------------------------------------------------------------------
   NOTIFICATION TEXT FOR EACH ARTICLE TYPE
   Tidak memerlukan perubahan HTML
   -------------------------------------------------------------------------- */

#jrtn-original-research:target::before {
    content:
        "ARTICLE TYPE 01 SELECTED — Original Research Article"
        !important;
}

#jrtn-systematic-review:target::before {
    content:
        "ARTICLE TYPE 02 SELECTED — Systematic Review and Meta-analysis"
        !important;
}

#jrtn-scoping-review:target::before {
    content:
        "ARTICLE TYPE 03 SELECTED — Scoping Review and Evidence Synthesis"
        !important;
}

#jrtn-study-protocol:target::before {
    content:
        "ARTICLE TYPE 04 SELECTED — Study Protocol"
        !important;
}

#jrtn-instrument-study:target::before {
    content:
        "ARTICLE TYPE 05 SELECTED — Instrument Development and Validation Study"
        !important;
}

#jrtn-case-report:target::before {
    content:
        "ARTICLE TYPE 06 SELECTED — Clinical or Community Case Report"
        !important;
}

#jrtn-quality-improvement:target::before {
    content:
        "ARTICLE TYPE 07 SELECTED — Quality Improvement and Implementation Report"
        !important;
}

#jrtn-short-communication:target::before {
    content:
        "ARTICLE TYPE 08 SELECTED — Short Communication"
        !important;
}

#jrtn-perspective:target::before {
    content:
        "ARTICLE TYPE 09 SELECTED — Perspective, Policy, Practice, or Education Article"
        !important;
}

#jrtn-commentary:target::before {
    content:
        "ARTICLE TYPE 10 SELECTED — Commentary"
        !important;
}

#jrtn-letter:target::before {
    content:
        "ARTICLE TYPE 11 SELECTED — Letter to the Editor"
        !important;
}


/* --------------------------------------------------------------------------
   MOBILE ADJUSTMENTS
   -------------------------------------------------------------------------- */

@media (max-width: 680px) {

    .jrtn-page.jrtn-article-types-page .jrtn-article-type {
        scroll-margin-top: 118px !important;
    }

    .jrtn-page.jrtn-article-types-page
    .jrtn-article-type:target::before {
        right: 14px !important;
        bottom: 14px !important;
        left: 14px !important;

        width: auto !important;
        min-height: 56px !important;

        padding:
            12px
            14px
            12px
            47px !important;

        font-size: 0.78rem !important;
    }

    .jrtn-page.jrtn-article-types-page
    .jrtn-article-type:target::after {
        right: auto !important;
        bottom: 28px !important;
        left: 27px !important;
    }
}


/* --------------------------------------------------------------------------
   REDUCED MOTION
   Mengikuti preferensi aksesibilitas perangkat
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto !important;
    }

    .jrtn-page.jrtn-article-types-page
    .jrtn-article-type:target {
        animation: none !important;

        background: var(--jrtn-accent-soft, #eef5fb) !important;

        box-shadow:
            0 0 0 3px rgba(30, 75, 122, 0.1) !important;
    }

    .jrtn-page.jrtn-article-types-page
    .jrtn-article-type:target::before,
    .jrtn-page.jrtn-article-types-page
    .jrtn-article-type:target::after {
        animation-duration: 1ms !important;
    }

    .jrtn-page.jrtn-article-types-page
    .jrtn-types-nav-link {
        transition: none !important;
    }
}

/* ==========================================================================
   29. SHARED DESIGN SYSTEM — UNIFIED BASE CLASSES
   Kelas dasar yang digunakan oleh beberapa halaman sekaligus.
   Menggantikan deklarasi berulang per halaman.
   ========================================================================== */


/* --------------------------------------------------------------------------
   PAGE HERO TITLE
   Digunakan oleh: jrtn-hero-title (homepage), jrtn-about-title (about)
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-page-hero-title {
    position: relative !important;
    z-index: 1 !important;

    display: block !important;

    width: 100% !important;
    max-width: 860px !important;
    min-width: 0 !important;

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

    color: var(--jrtn-ink) !important;

    font-family: inherit !important;
    font-size: clamp(1.9rem, 3.5vw, 2.65rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.018em !important;
    line-height: 1.15 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    hyphens: none !important;
}

@media (max-width: 680px) {
    .jrtn-page .jrtn-page-hero-title {
        font-size: 1.78rem !important;
        line-height: 1.18 !important;
    }
}

@media (max-width: 480px) {
    .jrtn-page .jrtn-page-hero-title {
        max-width: 100% !important;
    }
}


/* --------------------------------------------------------------------------
   PAGE LEAD / INTRO PARAGRAPH
   Digunakan oleh: jrtn-hero-lead, jrtn-about-lead, jrtn-section-intro
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-page-lead {
    position: relative !important;
    z-index: 1 !important;

    display: block !important;

    width: 100% !important;
    max-width: 860px !important;
    min-width: 0 !important;

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

    color: var(--jrtn-muted) !important;

    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    letter-spacing: normal !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
}

@media (max-width: 480px) {
    .jrtn-page .jrtn-page-lead {
        max-width: 100% !important;
    }
}


/* --------------------------------------------------------------------------
   PAGE ACTION PANEL
   Panel dua-kolom di bagian bawah halaman dengan tombol aksi.
   Digunakan oleh: jrtn-scope-action, jrtn-author-final-action,
                   jrtn-types-final-action
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-page-action {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 24px !important;
    align-items: center !important;

    width: 100% !important;

    margin: 0 0 18px !important;
    padding: 22px 24px !important;

    background:
        linear-gradient(
            140deg,
            rgba(238, 245, 251, 0.92),
            rgba(255, 255, 255, 1)
        ) !important;

    border: 1px solid var(--jrtn-line) !important;
    border-left: 4px solid var(--jrtn-accent) !important;
    border-radius: 8px !important;
}

.jrtn-page .jrtn-page-action h3 {
    display: block !important;

    width: 100% !important;

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

    color: var(--jrtn-ink) !important;

    font-family: inherit !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.jrtn-page .jrtn-page-action p {
    margin: 0 !important;

    color: var(--jrtn-muted) !important;

    font-family: inherit !important;
    font-size: 0.91rem !important;
    line-height: 1.58 !important;
}

.jrtn-page .jrtn-page-action-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;

    justify-content: flex-end !important;
}

@media (max-width: 780px) {
    .jrtn-page .jrtn-page-action {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-page-action-buttons {
        justify-content: flex-start !important;
    }
}

@media (max-width: 480px) {
    .jrtn-page .jrtn-page-action {
        padding: 18px !important;
    }

    .jrtn-page .jrtn-page-action-buttons {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-page-action-buttons .jrtn-button {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}


/* --------------------------------------------------------------------------
   PAGE EYEBROW / KICKER
   Label kategori kecil di atas judul section.
   Digunakan oleh: jrtn-eyebrow, jrtn-about-kicker, jrtn-scope-action label,
                   jrtn-type-number, dll.
   -------------------------------------------------------------------------- */

.jrtn-page .jrtn-page-eyebrow {
    display: block !important;

    margin: 0 0 5px !important;

    color: var(--jrtn-accent) !important;

    font-family: inherit !important;
    font-size: 0.71rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}


/* --------------------------------------------------------------------------
   ALIASES — kelas lama diarahkan ke nilai yang sama dengan base class
   Mempertahankan backward compatibility dengan halaman yang sudah di OJS
   -------------------------------------------------------------------------- */

/* jrtn-hero-title dan jrtn-about-title → nilai kunci dari jrtn-page-hero-title */
.jrtn-page .jrtn-hero-title,
.jrtn-page .jrtn-about-title {
    font-size: clamp(1.9rem, 3.5vw, 2.65rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.018em !important;
    line-height: 1.15 !important;
}

/* jrtn-hero-lead dan jrtn-about-lead → nilai kunci dari jrtn-page-lead */
.jrtn-page .jrtn-hero-lead,
.jrtn-page .jrtn-about-lead {
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    letter-spacing: normal !important;
}


/* jrtn-author-final-action, jrtn-types-final-action → shared CTA variant (no left border, solid bg) */
.jrtn-page .jrtn-author-final-action,
.jrtn-page .jrtn-types-final-action {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 22px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 22px 24px !important;
    background: var(--jrtn-accent-soft, #eef5fb) !important;
    border: 1px solid #bfd1df !important;
    border-radius: 8px !important;
}


/* ==========================================================================
   LOCAL PREVIEW INDEX — DEVELOPMENT ONLY (NOT FOR OJS)
   Scoped exclusively to `jrtn-preview-` selectors so it never affects
   production JRTN page styles. Safe to ignore when copying content into OJS.
   ========================================================================== */

.jrtn-preview-body {
    margin: 0;
    padding: 0;
    background: #f4f6f9;
    color: #1c2430;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.6;
}

.jrtn-preview-main {
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 1.25rem 4rem;
    box-sizing: border-box;
}

.jrtn-preview-header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #d9dee6;
}

.jrtn-preview-eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5a6b80;
}

.jrtn-preview-title {
    margin: 0 0 0.75rem;
    font-size: 1.75rem;
    line-height: 1.25;
    color: #123;
}

.jrtn-preview-lead {
    margin: 0;
    max-width: 60ch;
    color: #46566a;
}

.jrtn-preview-group {
    margin-bottom: 2.25rem;
}

.jrtn-preview-group-title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    color: #1e4b7a;
}

.jrtn-preview-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.jrtn-preview-item {
    margin: 0;
}

.jrtn-preview-link {
    display: block;
    padding: 0.85rem 1rem;
    background: #ffffff;
    border: 1px solid #d9dee6;
    border-radius: 8px;
    color: #1e4b7a;
    text-decoration: none;
    font-weight: 500;
    word-break: break-word;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.jrtn-preview-link:hover {
    background: #f0f5fb;
    border-color: #1e4b7a;
}

.jrtn-preview-link:focus-visible {
    outline: 3px solid #1766c9;
    outline-offset: 2px;
}

@media (max-width: 480px) {

    .jrtn-preview-main {
        padding: 2rem 1rem 3rem;
    }

    .jrtn-preview-title {
        font-size: 1.4rem;
    }
}


/* ==========================================================================
   LOCAL OJS PAGE SHELL PREVIEW
   Development only — requires .jrtn-preview-ojs-body
   Recreates the OJS content/sidebar layout that the default theme would
   normally supply, so the preview shell (preview.html) matches production
   proportions. All selectors are scoped under .jrtn-preview-ojs-body or use
   the jrtn-preview- prefix, so nothing here affects the real OJS site.
   ========================================================================== */

.jrtn-preview-ojs-body {
    margin: 0;
    padding: 0;
    background: #f4f6f9;
    box-sizing: border-box;
    overflow-x: hidden;
}

.jrtn-preview-ojs-body *,
.jrtn-preview-ojs-body *::before,
.jrtn-preview-ojs-body *::after {
    box-sizing: border-box;
}

/* Content wrapper: main + sidebar side by side on desktop. */
.jrtn-preview-ojs-body .pkp_structure_content {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 20px 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}

/* Main content column — wider than the sidebar. */
.jrtn-preview-ojs-body .pkp_structure_main {
    flex: 1 1 0;
    min-width: 0;
}

/* Sidebar column — fixed, narrower, on the right. */
.jrtn-preview-ojs-body .pkp_structure_sidebar {
    flex: 0 0 310px;
    max-width: 310px;
    min-width: 0;
    /* Ensure the aside inside has no conflicting left margin */
}

/* Strip any default margin OJS applies to the aside inside the sidebar */
.jrtn-preview-ojs-body .pkp_structure_sidebar aside,
.jrtn-preview-ojs-body .pkp_structure_sidebar > * {
    margin-left: 0;
    padding-left: 0;
}

/* Loading and error states. */
.jrtn-preview-loading {
    padding: 2rem 0;
    color: #5a6b80;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.jrtn-preview-error {
    margin: 1rem 0;
    padding: 1.25rem 1.5rem;
    background: #fff5f5;
    border: 1px solid #f0c2c2;
    border-radius: 8px;
    color: #6b1f1f;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.jrtn-preview-error-title {
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.jrtn-preview-error-detail {
    margin: 0 0 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    word-break: break-word;
}

.jrtn-preview-error-hint {
    margin: 0;
    font-size: 0.9rem;
    color: #8a4a4a;
}

/* Tablet / mobile: sidebar drops below the content. */
@media (max-width: 768px) {

    .jrtn-preview-ojs-body .pkp_structure_content {
        flex-direction: column;
        gap: 24px;
        padding: 20px 16px 32px;
    }

    .jrtn-preview-ojs-body .pkp_structure_main {
        flex: 1 1 100%;
        width: 100%;
        order: 1;
    }

    .jrtn-preview-ojs-body .pkp_structure_sidebar {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
        order: 2;
    }
}

/* --------------------------------------------------------------------------
   PREVIEW INDEX — local-server notice and raw-fragment list additions
   -------------------------------------------------------------------------- */

.jrtn-preview-notice {
    margin: 0 0 2rem;
    padding: 1rem 1.25rem;
    background: #eef5fb;
    border: 1px solid #cfe0ef;
    border-radius: 8px;
    color: #22405f;
}

.jrtn-preview-notice-title {
    margin: 0 0 0.4rem;
    font-weight: 700;
}

.jrtn-preview-notice p {
    margin: 0;
}

.jrtn-preview-notice code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: #dceafb;
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

.jrtn-preview-group-note {
    margin: 0 0 1rem;
    color: #5a6b80;
    font-size: 0.9rem;
    max-width: 60ch;
}

.jrtn-preview-list-compact .jrtn-preview-link {
    padding: 0.55rem 0.85rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    font-weight: 400;
}


/* ==========================================================================
   PREVIEW INDEX PAGE
   Development only — styles for index.html, the local workspace landing page.
   All selectors use the jrtn-preview-index- prefix and are scoped to
   .jrtn-preview-index-body so they never affect the OJS site.
   ========================================================================== */

.jrtn-preview-index-body {
    min-height: 100vh;

    margin: 0;
    padding: 0;

    background: #f4f7fa;
    color: #172033;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */

.jrtn-preview-index-header {
    width: 100%;

    background:
        linear-gradient(
            118deg,
            #183ea8 0%,
            #1766c9 62%,
            #0a9ed2 100%
        );

    color: #ffffff;

    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.jrtn-preview-index-header-inner {
    display: flex;

    width: min(1120px, calc(100% - 48px));
    min-height: 240px;

    align-items: center;
    justify-content: space-between;
    gap: 36px;

    margin: 0 auto;
    padding: 42px 0;
}

.jrtn-preview-index-kicker {
    margin: 0 0 10px;

    color: rgba(255, 255, 255, 0.76);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.jrtn-preview-index-title {
    max-width: 760px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(2rem, 5vw, 3.7rem);
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1.06;
}

.jrtn-preview-index-lead {
    max-width: 700px;

    margin: 18px 0 0;

    color: rgba(255, 255, 255, 0.85);

    font-size: 1rem;
    line-height: 1.65;
}

.jrtn-preview-index-status {
    display: inline-flex;

    flex: 0 0 auto;

    align-items: center;
    gap: 8px;

    padding: 9px 12px;

    color: #ffffff;

    background: rgba(7, 31, 96, 0.2);

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;

    font-size: 0.77rem;
    font-weight: 700;
    white-space: nowrap;
}

.jrtn-preview-index-status-dot {
    width: 8px;
    height: 8px;

    background: #94efab;
    border-radius: 50%;

    box-shadow: 0 0 0 4px rgba(148, 239, 171, 0.15);
}


/* --------------------------------------------------------------------------
   MAIN CONTENT
   -------------------------------------------------------------------------- */

.jrtn-preview-index-main {
    width: min(1120px, calc(100% - 48px));

    margin: 0 auto;
    padding: 46px 0 64px;
}

.jrtn-preview-index-main > * + * {
    margin-top: 42px;
}


/* --------------------------------------------------------------------------
   INTRODUCTION
   -------------------------------------------------------------------------- */

.jrtn-preview-index-intro {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;

    padding-bottom: 22px;

    border-bottom: 1px solid #ced9e3;
}

.jrtn-preview-index-intro h2 {
    margin: 0 0 7px;

    color: #172033;

    font-size: 1.5rem;
    line-height: 1.3;
}

.jrtn-preview-index-intro p {
    max-width: 680px;

    margin: 0;

    color: #637083;

    font-size: 0.93rem;
    line-height: 1.6;
}

.jrtn-preview-index-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    justify-content: flex-end;
}

.jrtn-preview-index-meta span {
    padding: 5px 8px;

    color: #435268;

    background: #ffffff;

    border: 1px solid #d2dde7;
    border-radius: 4px;

    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   PAGE GROUP
   -------------------------------------------------------------------------- */

.jrtn-preview-page-group {
    display: grid;
    grid-template-columns: minmax(220px, 0.32fr) minmax(0, 0.68fr);
    gap: 42px;
    align-items: start;
}

.jrtn-preview-group-heading {
    position: sticky;
    top: 24px;
}

.jrtn-preview-group-number {
    margin: 0 0 6px;

    color: #1762b7;

    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1.4;
    text-transform: uppercase;
}

.jrtn-preview-group-heading h2,
.jrtn-preview-production h2 {
    margin: 0 0 8px;

    color: #172033;

    font-size: 1.3rem;
    line-height: 1.35;
}

.jrtn-preview-group-heading p,
.jrtn-preview-production p {
    margin: 0;

    color: #637083;

    font-size: 0.88rem;
    line-height: 1.6;
}


/* --------------------------------------------------------------------------
   PAGE LIST
   -------------------------------------------------------------------------- */

.jrtn-preview-page-list {
    display: block;

    margin: 0;
    padding: 0;

    background: #ffffff;

    border: 1px solid #d3dee8;
    border-radius: 8px;
}

.jrtn-preview-page-link {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;

    min-height: 76px;

    padding: 13px 16px;

    color: #172033;
    text-decoration: none;

    border-bottom: 1px solid #e0e7ed;

    transition:
        background-color 150ms ease,
        padding-left 150ms ease;
}

.jrtn-preview-page-link:first-child {
    border-radius: 8px 8px 0 0;
}

.jrtn-preview-page-link:last-child {
    border-bottom: 0;
    border-radius: 0 0 8px 8px;
}

.jrtn-preview-page-link:hover,
.jrtn-preview-page-link:focus-visible {
    padding-left: 21px;

    background: #f3f7fa;
}

.jrtn-preview-page-link:focus-visible {
    outline: 3px solid rgba(23, 98, 183, 0.22);
    outline-offset: 2px;
}

.jrtn-preview-page-number {
    display: inline-flex;

    width: 34px;
    height: 34px;

    align-items: center;
    justify-content: center;

    color: #1762b7;

    background: #edf4fa;

    border: 1px solid #c7d8e7;
    border-radius: 5px;

    font-size: 0.67rem;
    font-weight: 800;
}

.jrtn-preview-page-content {
    display: block;

    min-width: 0;
}

.jrtn-preview-page-content strong {
    display: block;

    margin: 0 0 3px;

    color: #172033;

    font-size: 0.93rem;
    line-height: 1.4;
}

.jrtn-preview-page-content small {
    display: block;

    color: #6a7789;

    font-size: 0.78rem;
    line-height: 1.45;
}

.jrtn-preview-page-state {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 4px 7px;

    border-radius: 4px;

    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    line-height: 1.2;
    text-transform: uppercase;
}

.jrtn-preview-state-complete {
    color: #28683d;

    background: #e9f4ec;

    border: 1px solid #bbd9c3;
}

.jrtn-preview-state-review {
    color: #70551e;

    background: #fff7e7;

    border: 1px solid #e7d4a5;
}

.jrtn-preview-state-planned {
    color: #667487;

    background: #f1f4f7;

    border: 1px solid #d7dfe7;
}


/* --------------------------------------------------------------------------
   PRODUCTION LINKS
   -------------------------------------------------------------------------- */

.jrtn-preview-production {
    display: grid;
    grid-template-columns: minmax(220px, 0.32fr) minmax(0, 0.68fr);
    gap: 42px;
    align-items: start;

    padding-top: 36px;

    border-top: 1px solid #ced9e3;
}

.jrtn-preview-production-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.jrtn-preview-production-links a {
    display: flex;

    min-height: 48px;

    align-items: center;
    justify-content: center;

    padding: 10px 12px;

    color: #1762b7;
    text-align: center;
    text-decoration: none;

    background: #ffffff;

    border: 1px solid #cfdbe6;
    border-radius: 6px;

    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
}

.jrtn-preview-production-links a:hover,
.jrtn-preview-production-links a:focus-visible {
    color: #ffffff;

    background: #1762b7;
    border-color: #1762b7;
}


/* --------------------------------------------------------------------------
   WORKFLOW NOTE
   -------------------------------------------------------------------------- */

.jrtn-preview-workflow-note {
    display: grid;
    grid-template-columns: minmax(180px, 0.28fr) minmax(0, 0.72fr);
    gap: 24px;

    padding: 17px 19px;

    background: #edf4fa;

    border: 1px solid #c7d8e7;
    border-left: 4px solid #1762b7;
    border-radius: 0 7px 7px 0;
}

.jrtn-preview-workflow-note strong {
    color: #172033;

    font-size: 0.88rem;
    line-height: 1.5;
}

.jrtn-preview-workflow-note span {
    color: #637083;

    font-size: 0.86rem;
    line-height: 1.58;
}


/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.jrtn-preview-index-footer {
    display: flex;

    width: min(1120px, calc(100% - 48px));

    justify-content: space-between;
    gap: 24px;

    margin: 0 auto;
    padding: 22px 0 34px;

    border-top: 1px solid #ced9e3;

    color: #728094;

    font-size: 0.74rem;
    line-height: 1.5;
}

.jrtn-preview-index-footer p {
    margin: 0;
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {

    .jrtn-preview-index-header-inner {
        min-height: 220px;

        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 22px;
    }

    .jrtn-preview-index-intro,
    .jrtn-preview-page-group,
    .jrtn-preview-production {
        grid-template-columns: 1fr;
    }

    .jrtn-preview-index-intro {
        align-items: flex-start;
        flex-direction: column;
    }

    .jrtn-preview-index-meta {
        justify-content: flex-start;
    }

    .jrtn-preview-group-heading {
        position: static;
    }

    .jrtn-preview-production-links {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {

    .jrtn-preview-index-header-inner,
    .jrtn-preview-index-main,
    .jrtn-preview-index-footer {
        width: min(100% - 30px, 1120px);
    }

    .jrtn-preview-index-header-inner {
        padding: 32px 0;
    }

    .jrtn-preview-index-main {
        padding-top: 32px;
    }

    .jrtn-preview-index-main > * + * {
        margin-top: 34px;
    }

    .jrtn-preview-page-link {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .jrtn-preview-page-state {
        grid-column: 2;
        justify-self: start;
    }

    .jrtn-preview-workflow-note {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .jrtn-preview-index-footer {
        flex-direction: column;
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .jrtn-preview-page-link,
    .jrtn-preview-production-links a {
        transition: none;
    }
}

/* ==========================================================================
   30. APC ZERO-FEE BANNER
   ========================================================================== */

.jrtn-page .jrtn-apc-zero-banner {
    background:
        linear-gradient(
            140deg,
            rgba(238, 245, 251, 0.96),
            rgba(255, 255, 255, 1)
        ) !important;
    border: 1px solid #bfd1df !important;
    border-top: 4px solid var(--jrtn-accent, #1e4b7a) !important;
}

.jrtn-page .jrtn-apc-zero-inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 32px !important;
    align-items: center !important;
    margin: 0 0 18px !important;
}

.jrtn-page .jrtn-apc-zero-amount {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 130px !important;
    padding: 18px 20px !important;
    background: var(--jrtn-accent, #1e4b7a) !important;
    border-radius: 10px !important;
    text-align: center !important;
}

.jrtn-page .jrtn-apc-zero-currency {
    display: block !important;
    color: rgba(255,255,255,0.72) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    margin: 0 0 2px !important;
}

.jrtn-page .jrtn-apc-zero-number {
    display: block !important;
    color: #ffffff !important;
    font-size: 3.8rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
}

.jrtn-page .jrtn-apc-zero-label {
    display: block !important;
    color: rgba(255,255,255,0.82) !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin-top: 4px !important;
}

.jrtn-page .jrtn-apc-zero-stages {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.jrtn-page .jrtn-apc-zero-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 12px 8px !important;
    background: #ffffff !important;
    border: 1px solid var(--jrtn-line, #d9e2ea) !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--jrtn-ink, #172033) !important;
    text-align: center !important;
}

.jrtn-page .jrtn-apc-zero-stage-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    background: #e8f4eb !important;
    color: #287642 !important;
    border: 1px solid #afd1b8 !important;
    border-radius: 50% !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
}

.jrtn-page .jrtn-apc-zero-note {
    margin: 0 !important;
    color: var(--jrtn-muted, #637083) !important;
    font-size: 0.89rem !important;
    line-height: 1.6 !important;
}

@media (max-width: 780px) {
    .jrtn-page .jrtn-apc-zero-inner {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    .jrtn-page .jrtn-apc-zero-amount {
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 14px 18px !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    .jrtn-page .jrtn-apc-zero-number {
        font-size: 2.8rem !important;
    }
}

@media (max-width: 480px) {
    .jrtn-page .jrtn-apc-zero-stages {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ==========================================================================
   31. ARCHIVING INFRASTRUCTURE GRID
   ========================================================================== */

.jrtn-page .jrtn-archiving-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 18px 0 0 !important;
}

.jrtn-page .jrtn-archiving-node {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 16px !important;
    background: var(--jrtn-white, #ffffff) !important;
    border: 1px solid var(--jrtn-line, #d9e2ea) !important;
    border-radius: 7px !important;
}

.jrtn-page .jrtn-archiving-node-primary {
    background: var(--jrtn-accent-soft, #eef5fb) !important;
    border-color: #bfd1df !important;
    border-top: 3px solid var(--jrtn-accent, #1e4b7a) !important;
}

.jrtn-page .jrtn-archiving-node-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    color: var(--jrtn-accent, #1e4b7a) !important;
    font-size: 0.55rem !important;
    margin-top: 2px !important;
}

.jrtn-page .jrtn-archiving-node-name {
    display: block !important;
    color: var(--jrtn-ink, #172033) !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 3px !important;
}

.jrtn-page .jrtn-archiving-node-type {
    display: inline-block !important;
    padding: 2px 7px !important;
    background: rgba(30, 75, 122, 0.07) !important;
    border: 1px solid rgba(30, 75, 122, 0.14) !important;
    border-radius: 3px !important;
    color: var(--jrtn-accent-dark, #153a60) !important;
    font-size: 0.63rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin: 0 0 8px !important;
}

.jrtn-page .jrtn-archiving-node-desc {
    margin: 0 !important;
    color: var(--jrtn-muted, #637083) !important;
    font-size: 0.84rem !important;
    line-height: 1.56 !important;
}

@media (max-width: 900px) {
    .jrtn-page .jrtn-archiving-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .jrtn-page .jrtn-archiving-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   32. PLAGIARISM — TURNITIN BLOCK AND THRESHOLD CARDS
   ========================================================================== */

.jrtn-page .jrtn-plagiarism-tool-block {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
    margin: 18px 0 0 !important;
    padding: 22px !important;
    background: var(--jrtn-white, #ffffff) !important;
    border: 1px solid var(--jrtn-line, #d9e2ea) !important;
    border-radius: 8px !important;
}

.jrtn-page .jrtn-plagiarism-tool-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 80px !important;
    background: #1d6fa4 !important;
    border-radius: 7px !important;
}

.jrtn-page .jrtn-plagiarism-tool-logo-text {
    color: #ffffff !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.jrtn-page .jrtn-plagiarism-tool-info p {
    margin: 0 0 10px !important;
    color: var(--jrtn-muted, #637083) !important;
    font-size: 0.91rem !important;
    line-height: 1.62 !important;
}

.jrtn-page .jrtn-plagiarism-tool-info p:last-child {
    margin-bottom: 0 !important;
}

/* Threshold cards */
.jrtn-page .jrtn-plagiarism-thresholds {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 18px 0 0 !important;
}

.jrtn-page .jrtn-plagiarism-threshold {
    padding: 18px !important;
    border: 1px solid var(--jrtn-line, #d9e2ea) !important;
    border-radius: 7px !important;
    border-top-width: 4px !important;
}

.jrtn-page .jrtn-plagiarism-threshold-pass {
    background: #f9fefc !important;
    border-color: #9fcdb0 !important;
    border-top-color: #2e8049 !important;
}

.jrtn-page .jrtn-plagiarism-threshold-review {
    background: #fffdf5 !important;
    border-color: #e0cc8a !important;
    border-top-color: #b38a2f !important;
}

.jrtn-page .jrtn-plagiarism-threshold-reject {
    background: #fffafa !important;
    border-color: #e0b0b0 !important;
    border-top-color: #a33a3a !important;
}

.jrtn-page .jrtn-plagiarism-threshold-range {
    display: block !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
    color: var(--jrtn-ink, #172033) !important;
}

.jrtn-page .jrtn-plagiarism-threshold-label {
    display: block !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin: 0 0 10px !important;
    color: var(--jrtn-muted, #637083) !important;
}

.jrtn-page .jrtn-plagiarism-threshold-pass .jrtn-plagiarism-threshold-label {
    color: #2e8049 !important;
}

.jrtn-page .jrtn-plagiarism-threshold-review .jrtn-plagiarism-threshold-label {
    color: #8a6100 !important;
}

.jrtn-page .jrtn-plagiarism-threshold-reject .jrtn-plagiarism-threshold-label {
    color: #a33a3a !important;
}

.jrtn-page .jrtn-plagiarism-threshold-desc {
    margin: 0 !important;
    color: var(--jrtn-muted, #637083) !important;
    font-size: 0.87rem !important;
    line-height: 1.58 !important;
}

@media (max-width: 780px) {
    .jrtn-page .jrtn-plagiarism-tool-block {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .jrtn-page .jrtn-plagiarism-tool-logo {
        height: 60px !important;
    }
    .jrtn-page .jrtn-plagiarism-thresholds {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   33. OPEN ACCESS POLICY — STATEMENT BLOCK AND LICENSE BADGE
   ========================================================================== */

/* OA statement block */
.jrtn-page .jrtn-oa-statement-block {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
    margin: 0 0 22px !important;
    padding: 22px !important;
    background: var(--jrtn-accent, #1e4b7a) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}

.jrtn-page .jrtn-oa-statement-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 50% !important;
}

.jrtn-page .jrtn-oa-dot {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: inset 0 0 0 5px var(--jrtn-accent, #1e4b7a) !important;
    border: 3px solid rgba(255,255,255,0.9) !important;
}

.jrtn-page .jrtn-oa-statement-title {
    margin: 0 0 8px !important;
    color: #ffffff !important;
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.jrtn-page .jrtn-oa-statement-body p {
    margin: 0 !important;
    color: rgba(255,255,255,0.88) !important;
    font-size: 0.92rem !important;
    line-height: 1.62 !important;
}

/* OA pillars */
.jrtn-page .jrtn-oa-pillars {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
}

.jrtn-page .jrtn-oa-pillar {
    padding: 16px !important;
    background: var(--jrtn-white, #ffffff) !important;
    border: 1px solid var(--jrtn-line, #d9e2ea) !important;
    border-radius: 6px !important;
}

.jrtn-page .jrtn-oa-pillar-icon {
    display: block !important;
    color: var(--jrtn-accent, #1e4b7a) !important;
    font-size: 0.6rem !important;
    margin: 0 0 6px !important;
}

.jrtn-page .jrtn-oa-pillar-label {
    display: block !important;
    color: var(--jrtn-ink, #172033) !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
    line-height: 1.35 !important;
}

.jrtn-page .jrtn-oa-pillar-desc {
    margin: 0 !important;
    color: var(--jrtn-muted, #637083) !important;
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
}

/* CC license badge */
.jrtn-page .jrtn-oa-license-block {
    display: grid !important;
    grid-template-columns: 200px minmax(0, 1fr) !important;
    gap: 28px !important;
    align-items: start !important;
    margin: 18px 0 0 !important;
}

.jrtn-page .jrtn-oa-license-badge-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
}

.jrtn-page .jrtn-oa-license-badge {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 14px !important;
    background: #f5f9fc !important;
    border: 2px solid #9fb5c5 !important;
    border-radius: 7px !important;
}

.jrtn-page .jrtn-oa-license-badge-cc {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: #252525 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
}

.jrtn-page .jrtn-oa-license-badge-type {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--jrtn-ink, #172033) !important;
    letter-spacing: -0.01em !important;
}

.jrtn-page .jrtn-oa-license-badge-version {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: var(--jrtn-muted, #637083) !important;
}

.jrtn-page .jrtn-oa-license-badge-caption {
    margin: 0 !important;
    color: var(--jrtn-muted, #637083) !important;
    font-size: 0.73rem !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

.jrtn-page .jrtn-oa-license-details p {
    margin: 0 0 10px !important;
    color: var(--jrtn-muted, #637083) !important;
    font-size: 0.91rem !important;
    line-height: 1.62 !important;
}

.jrtn-page .jrtn-oa-license-details p:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 780px) {
    .jrtn-page .jrtn-oa-statement-block {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .jrtn-page .jrtn-oa-pillars {
        grid-template-columns: 1fr !important;
    }
    .jrtn-page .jrtn-oa-license-block {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    .jrtn-page .jrtn-oa-license-badge-wrap {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    .jrtn-page .jrtn-oa-license-badge-caption {
        text-align: left !important;
    }
}

/* ==========================================================================
   SECTION 13 — FOR AUTHORS: BATCH 1 PAGES
   Article Processing Charges, Submission Checklist, Reporting Guidelines
   Page-specific components that extend shared patterns.
   ========================================================================== */

/* --------------------------------------------------------------------------
   APC STATEMENT — zero-fee callout on the Article Processing Charges page
   -------------------------------------------------------------------------- */
.jrtn-page .jrtn-apc-statement {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
    padding: 24px !important;
    background: var(--jrtn-accent-soft, #eef5fb) !important;
    border: 1px solid #bfd1df !important;
    border-left: 4px solid var(--jrtn-accent, #1e4b7a) !important;
    border-radius: 8px !important;
}

.jrtn-page .jrtn-apc-statement-mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: var(--jrtn-accent, #1e4b7a) !important;
    color: #fff !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.jrtn-page .jrtn-apc-statement-body h4 {
    display: block !important;
    margin: 0 0 8px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--jrtn-ink, #172033) !important;
}

.jrtn-page .jrtn-apc-statement-body p {
    margin: 0 !important;
    font-size: 0.94rem !important;
}

.jrtn-page .jrtn-apc-statement-body p + p {
    margin-top: 8px !important;
}

@media (max-width: 480px) {

    .jrtn-page .jrtn-apc-statement {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 18px !important;
    }
}

/* ==========================================================================
   OJS MAIN CONTENT / RIGHT SIDEBAR GAP FIX
   Keeps a deliberate gutter between the main article column and sidebar.
   Also fixes the local preview loader wrapper (#jrtn-preview-sidebar).
   ========================================================================== */

@media (min-width: 992px) {

    .pkp_structure_content {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        column-gap: 32px !important;
    }

    .pkp_structure_main {
        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;

        margin: 0 !important;

        float: none !important;
    }

    .pkp_structure_sidebar {
        flex: 0 0 310px !important;

        width: 310px !important;
        max-width: 310px !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding-left: 0 !important;

        float: none !important;
    }

    /* In preview.html the loader slot, not the inserted aside, is the flex item. */
    .jrtn-preview-ojs-body #jrtn-preview-sidebar {
        flex: 0 0 310px !important;

        width: 310px !important;
        max-width: 310px !important;
        min-width: 0 !important;

        margin: 0 !important;
    }

    .jrtn-preview-ojs-body
    #jrtn-preview-sidebar
    > .pkp_structure_sidebar {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
    }
}

@media (max-width: 991px) {

    .pkp_structure_content {
        display: block !important;
    }

    .pkp_structure_main,
    .pkp_structure_sidebar,
    .jrtn-preview-ojs-body #jrtn-preview-sidebar {
        width: 100% !important;
        max-width: none !important;

        margin-right: 0 !important;
        margin-left: 0 !important;

        float: none !important;
    }

    .pkp_structure_sidebar,
    .jrtn-preview-ojs-body #jrtn-preview-sidebar {
        margin-top: 28px !important;
    }
}


/* ==========================================================================
   OJS EMBEDDED CONTENT WIDTH FIX
   Removes duplicate horizontal padding from homepage Additional Content.
   ========================================================================== */

.page_index_journal .additional_content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.page_index_journal .additional_content > .jrtn-page {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}
/* ==========================================================================
   34. MOBILE RESPONSIVENESS HARDENING — APPEND AT THE VERY END
   Corrects late cascade overrides and improves narrow-screen layouts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLET AND NARROW DESKTOP
   -------------------------------------------------------------------------- */

@media (max-width: 780px) {

    /* Prevent nested grid/flex children from forcing horizontal overflow. */
    .jrtn-page,
    .jrtn-page > *,
    .jrtn-page section,
    .jrtn-page article,
    .jrtn-page aside,
    .jrtn-page div {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .jrtn-page img,
    .jrtn-page svg {
        max-width: 100% !important;
        height: auto !important;
    }

    .jrtn-page a,
    .jrtn-page code,
    .jrtn-page .jrtn-contact-detail-value,
    .jrtn-page .jrtn-publisher-identity-value {
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /* Keep wide data tables readable by scrolling instead of crushing columns. */
    .jrtn-page [class*="table-wrap"] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

    .jrtn-page .jrtn-types-table {
        min-width: 680px !important;
    }

    /* Section 29 aliases are declared after earlier mobile rules.
       Reassert the one-column CTA layout at the end of the stylesheet. */
    .jrtn-page .jrtn-author-final-action,
    .jrtn-page .jrtn-types-final-action {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .jrtn-page .jrtn-author-final-buttons,
    .jrtn-page .jrtn-types-final-buttons {
        justify-content: flex-start !important;
    }

    /* APC and policy-specific layouts. */
    .jrtn-page .jrtn-apc-zero-inner,
    .jrtn-page .jrtn-oa-license-block {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-apc-zero-inner {
        gap: 16px !important;
    }

    .jrtn-page .jrtn-apc-zero-amount {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 680px) {

    /* Section 29's late aliases otherwise restore desktop title sizing. */
    .jrtn-page .jrtn-page-hero-title,
    .jrtn-page .jrtn-hero-title,
    .jrtn-page .jrtn-about-title {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(1.65rem, 7vw, 1.78rem) !important;
        line-height: 1.18 !important;
        overflow-wrap: break-word !important;
    }

    .jrtn-page .jrtn-page-lead,
    .jrtn-page .jrtn-hero-lead,
    .jrtn-page .jrtn-about-lead {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Slightly tighter cards without making the page feel cramped. */
    .jrtn-page .jrtn-section,
    .jrtn-page .jrtn-panel,
    .jrtn-page .jrtn-notice,
    .jrtn-page .jrtn-about-panel,
    .jrtn-page .jrtn-contact-card,
    .jrtn-page .jrtn-page-action,
    .jrtn-page .jrtn-author-final-action,
    .jrtn-page .jrtn-types-final-action {
        padding: 17px !important;
    }

    /* APC stages remain compact but readable on ordinary mobile screens. */
    .jrtn-page .jrtn-apc-zero-stages {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .jrtn-page .jrtn-apc-zero-stage {
        min-width: 0 !important;
        padding: 11px 7px !important;
        overflow-wrap: anywhere !important;
    }

    /* Avoid fixed two-column content surviving in newer policy pages. */
    .jrtn-page .jrtn-archiving-grid,
    .jrtn-page .jrtn-plagiarism-thresholds,
    .jrtn-page .jrtn-oa-pillars {
        grid-template-columns: 1fr !important;
    }
}


/* --------------------------------------------------------------------------
   SMALL MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

    /* APC: the horizontal amount strip and two stage columns are too tight
       inside OJS's mobile content padding. */
    .jrtn-page .jrtn-apc-zero-amount {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        padding: 15px 16px !important;
        text-align: center !important;
    }

    .jrtn-page .jrtn-apc-zero-number {
        font-size: 2.55rem !important;
    }

    .jrtn-page .jrtn-apc-zero-stages {
        grid-template-columns: 1fr !important;
    }

    .jrtn-page .jrtn-apc-zero-stage {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 11px 12px !important;
        text-align: left !important;
    }

    .jrtn-page .jrtn-apc-statement,
    .jrtn-page .jrtn-plagiarism-tool-block,
    .jrtn-page .jrtn-oa-statement-block {
        padding: 16px !important;
    }

    /* Open Access: undo the tablet row layout on very narrow screens. */
    .jrtn-page .jrtn-oa-license-badge-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .jrtn-page .jrtn-oa-license-badge {
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }

    .jrtn-page .jrtn-oa-license-badge-caption {
        width: 100% !important;
        text-align: left !important;
    }

    /* Buttons and CTA panels become full-width touch targets. */
    .jrtn-page .jrtn-author-final-buttons,
    .jrtn-page .jrtn-types-final-buttons,
    .jrtn-page .jrtn-page-action-buttons {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .jrtn-page .jrtn-author-final-buttons .jrtn-button,
    .jrtn-page .jrtn-types-final-buttons .jrtn-button,
    .jrtn-page .jrtn-page-action-buttons .jrtn-button {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .jrtn-page .jrtn-type-word-limit {
        width: 100% !important;
        max-width: 170px !important;
    }

    .jrtn-page pre {
        max-width: 100% !important;
        overflow-x: auto !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
    }
}


/* --------------------------------------------------------------------------
   VERY SMALL MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 380px) {

    /* The original 70px right reserve can leave too little room for metadata. */
    .jrtn-page .jrtn-meta {
        padding-right: 0 !important;
    }

    .jrtn-page .jrtn-section,
    .jrtn-page .jrtn-panel,
    .jrtn-page .jrtn-notice,
    .jrtn-page .jrtn-about-panel,
    .jrtn-page .jrtn-contact-card,
    .jrtn-page .jrtn-page-action,
    .jrtn-page .jrtn-author-final-action,
    .jrtn-page .jrtn-types-final-action {
        padding: 15px !important;
    }
}

/* ==========================================================================
   35. EMBEDDED JRTN PAGE WIDTH — PRODUCTION OJS DESKTOP FIX
   Removes the remaining right-side dead space created by the OJS main-column
   flex basis, main padding, and nested page/additional-content wrappers.
   Scoped only to production pages that actually contain .jrtn-page.
   ========================================================================== */

@media (min-width: 992px) {

    body:not(.jrtn-preview-ojs-body):has(.jrtn-page)
    .pkp_structure_content {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        column-gap: 32px !important;
    }

    body:not(.jrtn-preview-ojs-body):has(.jrtn-page)
    .pkp_structure_main {
        flex: 1 1 0 !important;

        width: 0 !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding-right: 0 !important;

        float: none !important;
        box-sizing: border-box !important;
    }

    body:not(.jrtn-preview-ojs-body):has(.jrtn-page)
    .pkp_structure_sidebar {
        flex: 0 0 310px !important;

        width: 310px !important;
        max-width: 310px !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding-left: 0 !important;

        float: none !important;
        box-sizing: border-box !important;
    }

    body:not(.jrtn-preview-ojs-body):has(.jrtn-page)
    .pkp_structure_main > .page:has(.jrtn-page),
    body:not(.jrtn-preview-ojs-body):has(.jrtn-page)
    .pkp_structure_main .additional_content,
    body:not(.jrtn-preview-ojs-body):has(.jrtn-page)
    .pkp_structure_main .jrtn-page {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin-right: 0 !important;
        margin-left: 0 !important;

        box-sizing: border-box !important;
    }

    body:not(.jrtn-preview-ojs-body):has(.jrtn-page)
    .pkp_structure_main > .page:has(.jrtn-page),
    body:not(.jrtn-preview-ojs-body):has(.jrtn-page)
    .pkp_structure_main .additional_content {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}


/* =========================================================
   JRTN EDITORIAL DIRECTORY — FINAL
   Two primary sections:
   1. Editorial Team
   2. Reviewers
   ========================================================= */

.jrtn-directory {
  width: 100%;
  margin: 0;
  color: #172033;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

.jrtn-directory,
.jrtn-directory * {
  box-sizing: border-box;
}

.jrtn-directory a {
  color: inherit;
  text-decoration: none;
}

.jrtn-directory-intro {
  max-width: 860px;
  margin: 0 0 34px !important;
  padding: 0 !important;
  color: #5b6473;
  font-size: 14.5px;
  line-height: 1.65;
}

/* =========================================================
   PRIMARY SECTION
   ========================================================= */

.jrtn-directory-group {
  margin: 0 !important;
  padding: 0 !important;
}

.jrtn-directory-group + .jrtn-directory-group {
  margin-top: 52px !important;
}

.jrtn-directory-heading {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 0 !important;
  padding: 15px 17px !important;
  border: 1px solid #d7e0ec;
  border-left: 5px solid #174a8b;
  background: #f5f8fc;
}

.jrtn-directory-heading-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #174a8b;
  border-right: 1px solid #cbd7e6;
}

.jrtn-directory-heading-icon svg {
  display: block;
  width: 25px;
  height: 25px;
}

.jrtn-directory-heading-copy {
  min-width: 0;
}

.jrtn-directory-title {
  margin: 0 !important;
  padding: 0 !important;
  color: #153d73;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.3;
}

.jrtn-directory-description {
  margin: 3px 0 0 !important;
  padding: 0 !important;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

/* =========================================================
   NUMBERED PERSON LIST
   ========================================================= */

.jrtn-directory-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  counter-reset: jrtn-directory-item;
}

.jrtn-directory-person {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 16px;
  margin: 0 !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid #e6ebf1;
  counter-increment: jrtn-directory-item;
}

.jrtn-directory-person::before {
  content: counter(jrtn-directory-item, decimal-leading-zero);
  display: block;
  padding-top: 1px;
  color: #768397;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.jrtn-directory-person:last-child {
  padding-bottom: 0 !important;
  border-bottom: 0;
}

.jrtn-directory-person-body {
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid #dfe6ef;
}

.jrtn-directory-role {
  display: block;
  margin: 0 0 3px !important;
  padding: 0 !important;
  color: #174a8b;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.45px;
  line-height: 1.4;
  text-transform: uppercase;
}

.jrtn-directory-name {
  margin: 0 !important;
  padding: 0 !important;
  color: #101828;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.38;
}

.jrtn-directory-affiliation {
  max-width: 980px;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  color: #667085;
  font-size: 13.5px;
  line-height: 1.55;
}

/* =========================================================
   ACADEMIC IDENTITIES
   ========================================================= */

.jrtn-directory-identities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 15px;
  margin: 12px 0 0 !important;
  padding: 0 !important;
}

.jrtn-directory-identity {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  color: #344054;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
}

.jrtn-directory-identity:hover,
.jrtn-directory-identity:focus {
  color: #174a8b;
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: 0;
}

.jrtn-directory-identity:focus-visible {
  border-radius: 3px;
  box-shadow: 0 0 0 3px rgba(23, 74, 139, 0.14);
}

.jrtn-directory-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 7px;
  overflow: hidden;
  flex: 0 0 24px;
}

.jrtn-directory-icon {
  display: block;
  max-width: 21px;
  max-height: 21px;
  object-fit: contain;
}

.jrtn-directory-icon-scopus {
  width: 19px;
  height: 19px;
}

.jrtn-directory-icon-sinta {
  max-width: 24px;
  max-height: 15px;
}

.jrtn-directory-identity-value {
  overflow-wrap: anywhere;
}

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

@media (max-width: 640px) {
  .jrtn-directory-group + .jrtn-directory-group {
    margin-top: 40px !important;
  }

  .jrtn-directory-heading {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
    padding: 12px !important;
  }

  .jrtn-directory-heading-icon {
    width: 36px;
    height: 38px;
  }

  .jrtn-directory-heading-icon svg {
    width: 22px;
    height: 22px;
  }

  .jrtn-directory-title {
    font-size: 18px;
  }

  .jrtn-directory-person {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding: 18px 0 !important;
  }

  .jrtn-directory-person-body {
    padding-left: 12px;
  }

  .jrtn-directory-identities {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .jrtn-directory-person {
    break-inside: avoid;
  }

  .jrtn-directory-heading {
    background: #ffffff;
  }
}