/* =========================================================
   OJS MODERN PROFESSIONAL THEME — FINAL CLEAN
   Warna: Hijau Elegan + Kuning Aksen
   Susunan:
   1. Bar Register khusus di paling atas (hanya saat logout)
   2. Gambar header penuh
   3. Navigation Primary di bawah gambar
   4. Konten jurnal
   ========================================================= */


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

:root {
    /* Warna utama sesuai permintaan */
    --primary-color: #296956;
    --secondary-color: #002421;
    --accent-color: #fff006;
    --text-color: #333333;
    --border-color: #e0e0e0;

    /* Turunan warna untuk kebutuhan gradasi dan hover */
    --primary-dark: #002421;
    --primary-light: #3f806c;

    --secondary-dark: #001714;
    --secondary-light: #4f706c;

    --accent-dark: #c8bd00;
    --accent-light: #fff77a;

    --background-color: #f2f7f5;
    --surface-color: #ffffff;
    --surface-soft: #f8fbfa;

    --text-muted: #66716d;
    --text-light: #ffffff;

    --border-accent: rgba(255, 240, 6, 0.55);

    --font-body: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-heading: Georgia, "Times New Roman", serif;

    --border-radius: 10px;
    --border-radius-small: 6px;

    --shadow-small: 0 3px 12px rgba(0, 36, 33, 0.08);
    --shadow-medium: 0 10px 30px rgba(0, 36, 33, 0.14);
    --shadow-large: 0 15px 45px rgba(0, 36, 33, 0.18);

    --transition: all 0.25s ease;
}


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

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

html {
    min-height: 100%;
    scroll-behavior: smooth;

    background-color: #edf4f1;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.82),
            rgba(255, 255, 255, 0.82)
        ),
        url("https://png.pngtree.com/png-clipart/20220921/original/pngtree-batik-jambi-angso-duo-melayu-png-image_8625071.png");

    background-size: 300px;
    background-position: center;
    background-repeat: repeat;
    background-attachment: fixed;
}

body {
    margin: 0;
    padding: 0;

    color: var(--text-color);
    background: transparent;

    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.75;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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


/* =========================================================
   3. LINKS
   ========================================================= */

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

a:hover,
a:focus {
    color: var(--secondary-color);
    text-decoration: none;
}

a:focus-visible {
    outline: 3px solid rgba(255, 240, 6, 0.35);
    outline-offset: 3px;
    border-radius: 3px;
}


/* =========================================================
   4. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 15px;

    color: var(--primary-color);

    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

h1 {
    font-size: clamp(28px, 4vw, 38px);
}

h2 {
    font-size: clamp(24px, 3vw, 31px);
}

h3 {
    font-size: clamp(20px, 2.5vw, 25px);
}

h4 {
    font-size: 19px;
}

h5 {
    font-size: 17px;
}

p {
    margin-top: 0;
    margin-bottom: 16px;

    color: var(--text-color);
    line-height: 1.8;
}

.pkp_structure_main p,
.obj_article_details .abstract,
.obj_article_details .item,
.page_about p,
.page_contact p {
    text-align: justify;
    text-justify: inter-word;
}


/* =========================================================
   5. PAGE STRUCTURE
   ========================================================= */

.pkp_structure_page {
    width: calc(100% - 40px);
    max-width: 1180px;

    margin: 24px auto;
    padding: 0;

    background: var(--surface-color);
    border: 1px solid rgba(41, 105, 86, 0.08);
    border-radius: 14px;

    box-shadow: var(--shadow-large);
    overflow: hidden;
}

.pkp_structure_head {
    position: relative;
    z-index: 20;

    display: block;

    width: 100%;
    margin: 0;
    padding: 0;

    background: var(--surface-color);
    border: 0;
    box-shadow: none;

    overflow: visible;
}

.pkp_structure_content,
.pkp_structure_footer,
.pkp_site_name_wrapper,
.pkp_search_mobile {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.pkp_structure_content {
    padding: 32px 36px 42px;
}

.pkp_structure_main::after {
    display: none;
}


/* =========================================================
   6. MAIN CONTENT DAN SIDEBAR
   ========================================================= */

.has_sidebar {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;

    gap: 28px;
    padding: 0;
}

.pkp_structure_main {
    flex: 1 1 auto;
    min-width: 0;

    margin: 0;
    padding: 0 28px 0 0;

    color: var(--text-color);
    border-right: 1px solid var(--border-accent) !important;
}

.pkp_structure_sidebar {
    flex: 0 0 285px;
    width: 285px;
    min-width: 0;

    margin: 0;
    padding: 0 0 0 2px;
}


/* =========================================================
   7. HEADER + REGISTER FINAL
   Urutan:
   1. Bar Register di atas
   2. Gambar header
   3. Navigation Primary
   ========================================================= */

/* Jadikan pembungkus header sebagai layout berurutan */
.pkp_head_wrapper {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

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

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

    background: transparent !important;
}


/* =========================================================
   8. BAR REGISTER DI ATAS TENGAH
   Tidak memakai pseudo-element dan tidak membuat ruang putih
   ========================================================= */

/* Bar user diposisikan sebagai elemen pertama */
.pkp_navigation_user_wrapper {
    position: relative !important;
    inset: auto !important;

    order: 1 !important;

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

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

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

    background:
        linear-gradient(
            90deg,
            var(--secondary-color) 0%,
            var(--primary-color) 50%,
            var(--secondary-color) 100%
        ) !important;

    border: 0 !important;
    border-bottom: 3px solid var(--accent-color) !important;

    box-shadow:
        0 4px 14px rgba(0, 36, 33, 0.18) !important;

    transform: none !important;
    z-index: 50 !important;
}

/* Gambar header menjadi elemen kedua */
.pkp_site_name_wrapper {
    order: 2 !important;
}

/* Navigation Primary tetap di bawah gambar */
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
    order: 3 !important;
}


/* Isi bar akun */
.pkp_navigation_user {
    position: relative !important;
    inset: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;

    gap: 8px !important;

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

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

    background: transparent !important;

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

    list-style: none !important;
}

.pkp_navigation_user > li {
    position: static !important;

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

    width: auto !important;

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

    border: 0 !important;
}


/* Tombol Register tepat di tengah */
.pkp_navigation_user > li:has(a[href*="register"]) {
    position: static !important;

    order: 1 !important;

    width: auto !important;

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

    transform: none !important;
}

.pkp_navigation_user a[href*="register"] {
    position: relative !important;
    inset: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 164px !important;
    min-height: 40px !important;

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

    color: var(--secondary-color) !important;

    background:
        linear-gradient(
            135deg,
            #fff985 0%,
            var(--accent-color) 50%,
            var(--accent-dark) 100%
        ) !important;

    border: 1px solid var(--accent-color) !important;
    border-radius: 999px !important;

    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.055em !important;

    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;

    box-shadow:
        0 6px 17px rgba(255, 240, 6, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;

    transform: none !important;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease !important;
}

.pkp_navigation_user a[href*="register"]::before {
    content: "+";

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 20px !important;
    height: 20px !important;

    margin-right: 8px !important;

    color: #ffffff !important;
    background: var(--primary-color) !important;

    border-radius: 50% !important;

    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 20px !important;
}

.pkp_navigation_user a[href*="register"]:hover,
.pkp_navigation_user a[href*="register"]:focus {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--primary-light) 0%,
            var(--primary-color) 55%,
            var(--secondary-color) 100%
        ) !important;

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

    box-shadow:
        0 8px 20px rgba(0, 36, 33, 0.30),
        0 0 0 3px rgba(255, 240, 6, 0.17) !important;

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

.pkp_navigation_user a[href*="register"]:hover::before,
.pkp_navigation_user a[href*="register"]:focus::before {
    color: var(--secondary-color) !important;
    background: var(--accent-color) !important;
}


/* Login/menu akun lain tetap di sisi kanan */
.pkp_navigation_user > li:has(a[href*="login"]) {
    position: absolute !important;

    top: 50% !important;
    right: 0 !important;
    left: auto !important;

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

.pkp_navigation_user a[href*="login"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 34px !important;

    padding: 7px 13px !important;

    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;

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

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

    box-shadow: none !important;
}

.pkp_navigation_user a[href*="login"]:hover {
    color: var(--secondary-color) !important;
    background: var(--accent-color) !important;

    border-color: var(--accent-color) !important;
}


/* Menu pengguna selain Register/Login */
.pkp_navigation_user > li > a:not([href*="register"]):not([href*="login"]) {
    display: inline-flex !important;
    align-items: center !important;

    min-height: 34px !important;
    padding: 6px 10px !important;

    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;

    border-radius: 5px !important;

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

.pkp_navigation_user > li > a:not([href*="register"]):not([href*="login"]):hover {
    color: var(--secondary-color) !important;
    background: var(--accent-color) !important;
}


/* Browser lama tanpa dukungan :has() */
@supports not selector(li:has(a)) {

    .pkp_navigation_user {
        justify-content: center !important;
        padding: 7px 18px !important;
    }

    .pkp_navigation_user a[href*="register"] {
        position: static !important;
        transform: none !important;
    }
}


/* =========================================================
   10. HEADER GAMBAR FULL WIDTH
   ========================================================= */

.pkp_site_name_wrapper {
    position: relative !important;

    display: block !important;

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

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

    background: #ffffff !important;

    border: 0 !important;
    border-bottom: 4px solid var(--accent-color) !important;

    overflow: hidden !important;
}

.pkp_site_name,
.pkp_site_name > a,
.pkp_site_name a,
.pkp_site_name .is_img,
.pkp_site_name picture {
    position: static !important;

    display: block !important;

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

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

    background: transparent !important;
    line-height: 0 !important;
}

.pkp_site_name .is_img img,
.pkp_site_name picture img {
    position: static !important;

    display: block !important;

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

    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;

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

    object-fit: contain !important;
    object-position: center center !important;

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

    transform: none !important;
}

.pkp_site_name .is_text {
    display: block;

    padding: 32px 40px !important;

    color: var(--text-light) !important;
    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary-color)
        );

    font-family: var(--font-heading);
    font-size: clamp(25px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-align: center;

    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}


/* =========================================================
   11. PRIMARY NAVIGATION
   Tetap di bawah gambar header
   ========================================================= */

.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
    position: relative !important;

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

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 58px !important;
    height: auto !important;

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

    background:
        linear-gradient(
            90deg,
            var(--primary-dark),
            var(--primary-color),
            var(--primary-dark)
        ) !important;

    border-top: 0 !important;
    border-bottom: 3px solid var(--accent-color) !important;

    box-shadow: 0 5px 14px rgba(0, 36, 33, 0.18) !important;
    transform: none !important;
}

.pkp_navigation_primary {
    position: static !important;

    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    flex-wrap: wrap !important;

    gap: 2px;

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

    list-style: none !important;
}

.pkp_navigation_primary > li {
    position: relative !important;

    display: block !important;

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

.pkp_navigation_primary > li > a {
    position: relative;

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

    min-height: 58px !important;
    height: 58px !important;

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

    color: var(--text-light) !important;
    background: transparent !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.02em;
    text-transform: capitalize;

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

    transition: var(--transition);
}

.pkp_navigation_primary > li > a::after {
    content: "";

    position: absolute;
    right: 17px;
    bottom: 9px;
    left: 17px;

    height: 2px;

    background: var(--accent-color);

    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: var(--accent-light) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

.pkp_navigation_primary > li > a:hover::after,
.pkp_navigation_primary > li > a:focus::after {
    transform: scaleX(1);
}


/* =========================================================
   12. DROPDOWN NAVIGATION
   ========================================================= */

.pkp_navigation_primary ul,
.pkp_nav_list ul {
    min-width: 220px;

    margin: 0;
    padding: 8px;

    background: var(--surface-color);

    border: 1px solid var(--border-color);
    border-top: 3px solid var(--secondary-color);
    border-radius: 0 0 8px 8px;

    box-shadow: var(--shadow-medium);
    overflow: hidden;
}

.pkp_navigation_primary ul li,
.pkp_nav_list ul li {
    margin: 0;
    padding: 0;
}

.pkp_navigation_primary ul a,
.pkp_nav_list ul a {
    display: block;

    padding: 11px 14px;

    color: var(--primary-color) !important;
    background: var(--surface-color) !important;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;

    border: 0;
    border-radius: var(--border-radius-small);

    transition: var(--transition);
}

.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus,
.pkp_nav_list ul a:hover,
.pkp_nav_list ul a:focus {
    padding-left: 18px;

    color: var(--primary-dark) !important;
    background: rgba(255, 240, 6, 0.13) !important;
}


/* =========================================================
   13. SEARCH SEJAJAR DENGAN NAVIGATION PRIMARY
   ========================================================= */

.pkp_navigation_search_wrapper {
    position: static !important;
    inset: auto !important;

    float: none !important;

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

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

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

    background: transparent !important;
    border: 0 !important;
}

.pkp_search,
.pkp_search_desktop {
    position: static !important;
    inset: auto !important;

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

    width: auto !important;
    height: auto !important;

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

    color: #ffffff !important;
    background: transparent !important;
}

.pkp_search_desktop .search_prompt,
.pkp_search .search_prompt,
.pkp_search button,
.pkp_search_desktop button {
    display: flex !important;
    align-items: center !important;

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

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

    color: #ffffff !important;
    background: transparent !important;

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

    font-size: 14px !important;
    font-weight: 500 !important;

    box-shadow: none !important;
    transform: none !important;
}

.pkp_search_desktop .search_prompt:hover,
.pkp_search .search_prompt:hover,
.pkp_search button:hover,
.pkp_search_desktop button:hover {
    color: var(--accent-light) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.pkp_search_mobile {
    padding: 15px 20px;

    background: var(--surface-soft);
    border-bottom: 1px solid var(--border-color);
}


/* =========================================================
   14. PAGE TITLE
   ========================================================= */

.page_title,
.current_issue_title,
.pkp_page_index .current_issue h2,
.pkp_structure_main > h1 {
    position: relative;

    margin: 0 0 28px;
    padding: 18px 22px;

    color: var(--primary-color);
    background:
        linear-gradient(
            90deg,
            rgba(41, 105, 86, 0.08),
            rgba(255, 240, 6, 0.07)
        );

    border-left: 5px solid var(--accent-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: 0 8px 8px 0;

    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.35;
}


/* =========================================================
   15. CURRENT ISSUE
   ========================================================= */

.current_issue {
    margin-bottom: 35px;
    padding-bottom: 30px;

    border-bottom: 1px solid var(--border-color);
}

.current_issue .current_issue_title {
    margin-bottom: 18px;
}

.current_issue .published {
    display: inline-flex;
    align-items: center;

    margin: 0 0 20px;
    padding: 7px 13px;

    color: var(--text-muted);
    background: var(--surface-soft);

    border: 1px solid var(--border-color);
    border-radius: 50px;

    font-size: 13px;
    font-weight: 600;
}

.current_issue .cover {
    overflow: hidden;

    border-radius: var(--border-radius);
    box-shadow: var(--shadow-small);
}

.current_issue .cover img {
    display: block;

    width: 100%;
    height: auto;

    transition: transform 0.35s ease;
}

.current_issue .cover:hover img {
    transform: scale(1.02);
}


/* =========================================================
   16. ARTICLE LIST
   ========================================================= */

.obj_article_summary {
    position: relative;

    margin: 0 0 20px;
    padding: 22px 22px 22px 25px;

    background: var(--surface-color);

    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-color);
    border-radius: var(--border-radius);

    box-shadow: var(--shadow-small);
    transition: var(--transition);
}

.obj_article_summary:hover {
    border-color: rgba(41, 105, 86, 0.22);

    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}

.obj_article_summary .title {
    margin-bottom: 10px;

    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

.obj_article_summary .title a {
    color: var(--primary-color);
}

.obj_article_summary .title a:hover {
    color: var(--secondary-color);
}

.obj_article_summary .meta,
.obj_article_summary .authors,
.obj_article_summary .pages {
    color: var(--text-muted);

    font-size: 13.5px;
    line-height: 1.6;
}


/* =========================================================
   17. SIDEBAR
   ========================================================= */

.pkp_block {
    margin: 0 0 22px;
    padding: 0;

    background: var(--surface-color);

    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);

    box-shadow: var(--shadow-small);
    overflow: hidden;
}

.pkp_block .title {
    display: block;

    margin: 0;
    padding: 13px 16px;

    color: var(--text-light);
    background:
        linear-gradient(
            135deg,
            var(--primary-color),
            var(--primary-dark)
        );

    border-bottom: 3px solid var(--accent-color);

    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.pkp_block .content {
    padding: 16px;

    color: var(--text-color);
    background: var(--surface-color);

    font-size: 14px;
    line-height: 1.7;
}

.pkp_block ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.pkp_block ul li {
    position: relative;

    margin: 0;
    padding: 9px 0 9px 16px;

    border-bottom: 1px solid var(--border-color);
}

.pkp_block ul li:last-child {
    border-bottom: 0;
}

.pkp_block ul li::before {
    content: "";

    position: absolute;
    top: 17px;
    left: 1px;

    width: 6px;
    height: 6px;

    background: var(--accent-color);
    border-radius: 50%;
}

.pkp_block ul li a {
    color: var(--primary-color);
    font-weight: 500;
}

.pkp_block ul li a:hover {
    color: var(--secondary-color);
}


/* =========================================================
   18. BUTTONS
   ========================================================= */

.cmp_button,
button,
input[type="submit"],
input[type="button"],
a.cmp_button,
a.obj_galley_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 9px 18px;

    color: var(--text-light) !important;
    background:
        linear-gradient(
            135deg,
            var(--primary-color),
            var(--primary-dark)
        );

    border: 1px solid var(--primary-color);
    border-radius: 6px;

    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;

    box-shadow: 0 4px 10px rgba(41, 105, 86, 0.16);

    cursor: pointer;
    transition: var(--transition);
}

.cmp_button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.cmp_button:hover,
a.obj_galley_link:hover {
    color: var(--secondary-color) !important;
    background: var(--accent-color);

    border-color: var(--secondary-color);

    box-shadow: 0 6px 15px rgba(255, 240, 6, 0.25);
    transform: translateY(-1px);
}


/* =========================================================
   19. FORM ELEMENTS
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="number"],
select,
textarea {
    width: 100%;
    max-width: 100%;

    padding: 11px 13px;

    color: var(--text-color);
    background: var(--surface-color);

    border: 1px solid #cbd7d2;
    border-radius: 6px;

    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;

    transition: var(--transition);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;

    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(255, 240, 6, 0.16);
}


/* =========================================================
   20. TABLES
   ========================================================= */

table {
    width: 100%;
    margin: 20px 0;

    border-collapse: collapse;
    background: var(--surface-color);

    border: 1px solid var(--border-color);
    border-radius: 8px;

    overflow: hidden;
}

table th {
    padding: 12px 14px;

    color: var(--text-light);
    background: var(--primary-color);

    font-weight: 600;
    text-align: left;
}

table td {
    padding: 11px 14px;

    color: var(--text-color);
    background: var(--surface-color);

    border-bottom: 1px solid var(--border-color);
}

table tr:nth-child(even) td {
    background: var(--surface-soft);
}

table tr:hover td {
    background: rgba(255, 240, 6, 0.08);
}


/* =========================================================
   21. FOOTER
   ========================================================= */

.pkp_structure_footer_wrapper {
    margin: 0;
    padding: 0;

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary-color)
        );

    border-top: 4px solid var(--secondary-color);
}

.pkp_structure_footer {
    padding: 30px 36px;

    color: rgba(255, 255, 255, 0.88);
    background: transparent;
}

.pkp_structure_footer p,
.pkp_structure_footer div,
.pkp_structure_footer span {
    color: rgba(255, 255, 255, 0.88);
}

.pkp_structure_footer a {
    color: var(--accent-light);
    font-weight: 600;
}

.pkp_structure_footer a:hover {
    color: var(--surface-color);
}

.pkp_brand_footer {
    display: none !important;
}


/* =========================================================
   22. TABLET
   ========================================================= */

@media screen and (max-width: 992px) {

    .pkp_structure_page {
        width: calc(100% - 24px);
        margin: 12px auto;

        border-radius: 10px;
    }

    .pkp_structure_content {
        padding: 28px 24px 35px;
    }

    .has_sidebar {
        flex-direction: column;
        gap: 30px;
    }

    .pkp_structure_main {
        width: 100%;
        padding-right: 0;
        padding-bottom: 30px;

        border-right: 0 !important;
        border-bottom: 1px solid var(--border-accent);
    }

    .pkp_structure_sidebar {
        flex: none;

        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper {
        padding: 0 12px !important;
    }

    .pkp_navigation_primary > li > a {
        padding: 0 12px !important;

        font-size: 13px !important;
    }
.pkp_navigation_user a[href*="register"] {
        min-width: 138px !important;

        padding: 9px 15px !important;

        font-size: 11.5px !important;
    }
}


/* =========================================================
   23. MOBILE
   ========================================================= */

@media screen and (max-width: 768px) {

    html {
        background-size: 190px;
        background-attachment: scroll;
    }

    body {
        font-size: 14px;
        line-height: 1.7;
    }

    .pkp_structure_page {
        width: 100%;
        margin: 0;

        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .pkp_structure_content {
        padding: 22px 16px 30px;
    }
.pkp_navigation_user a[href*="register"] {
        min-width: 155px !important;
        min-height: 40px !important;
    }

    .pkp_site_name .is_text {
        padding: 25px 18px !important;

        font-size: 25px;
    }

    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper {
        display: block !important;

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

        padding: 0 !important;
    }

    .pkp_navigation_primary {
        display: block !important;

        width: 100% !important;
    }

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

    .pkp_navigation_primary > li > a {
        width: 100% !important;
        height: auto !important;
        min-height: 46px !important;

        padding: 11px 17px !important;

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

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

    .pkp_navigation_primary ul,
    .pkp_nav_list ul {
        position: static;

        width: 100%;
        min-width: 100%;

        border-radius: 0;
        box-shadow: none;
    }

    .pkp_navigation_search_wrapper {
        display: flex !important;

        width: 100% !important;
        height: auto !important;

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

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

    .pkp_search,
    .pkp_search_desktop {
        width: 100% !important;
    }

    .pkp_search_desktop .search_prompt,
    .pkp_search .search_prompt {
        width: 100% !important;

        justify-content: flex-start !important;
    }

    .page_title,
    .current_issue_title,
    .pkp_page_index .current_issue h2,
    .pkp_structure_main > h1 {
        padding: 15px 16px;

        font-size: 22px;
    }

    .obj_article_summary {
        padding: 18px 16px 18px 19px;
    }

    .pkp_structure_footer {
        padding: 25px 18px;
    }
}


/* =========================================================
   24. SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 480px) {

    .pkp_structure_content {
        padding-right: 13px;
        padding-left: 13px;
    }

    .pkp_site_name_wrapper {
        border-bottom-width: 3px !important;
    }

    .obj_article_summary .title {
        font-size: 16.5px;
    }

    .pkp_block .title {
        font-size: 15px;
    }

    .pkp_block .content {
        padding: 14px;
    }

    .cmp_button,
    button,
    input[type="submit"],
    input[type="button"],
    a.cmp_button,
    a.obj_galley_link {
        width: 100%;
        margin-bottom: 7px;
    }
}
/* =========================================================
   UKURAN BENDERA KHUSUS CURRENT ISSUE
   Tidak memengaruhi bendera pada navigasi atau sidebar
   ========================================================= */

.pkp_page_index .current_issue img.flag,
.pkp_page_index .current_issue img[class*="flag"],
.pkp_page_index .current_issue img[src*="flag"],
.pkp_page_index .current_issue img[src*="locale"],
.pkp_page_index .current_issue .flag img,
.pkp_page_index .current_issue .flags img,
.pkp_page_index .current_issue .locale img,
.pkp_page_index .current_issue .language img,

.current_issue img.flag,
.current_issue img[class*="flag"],
.current_issue img[src*="flag"],
.current_issue img[src*="locale"],
.current_issue .flag img,
.current_issue .flags img,
.current_issue .locale img,
.current_issue .language img {
    display: inline-block !important;

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

    min-width: 48px !important;
    min-height: 38px !important;

    max-width: 48px !important;
    max-height: 38px !important;

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

    object-fit: cover !important;
    object-position: center center !important;

    border: 1px solid rgba(0, 36, 33, 0.18) !important;
    border-radius: 3px !important;

    box-shadow: 0 2px 5px rgba(0, 36, 33, 0.12) !important;

    vertical-align: middle !important;
}
/* =========================================================
   SIDEBAR HOVER + CLICK — FINAL KOMPATIBEL OJS
   Tidak menggunakan animasi masuk yang mengunci transform
   ========================================================= */


/* =========================================================
   1. TARGET SEMUA MODEL BLOCK SIDEBAR OJS
   ========================================================= */

body .pkp_structure_sidebar .pkp_block,
body .pkp_structure_sidebar > .pkp_block,
body .pkp_structure_sidebar > div[class*="block_"] {
    position: relative !important;

    display: block !important;

    margin-bottom: 22px !important;

    background: #ffffff !important;

    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;

    box-shadow:
        0 3px 12px rgba(0, 36, 33, 0.08) !important;

    overflow: hidden !important;

    transform: translateY(0) scale(1) !important;
    transform-origin: center center !important;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        background-color 0.28s ease !important;

    cursor: default !important;

    -webkit-tap-highlight-color: transparent;
    will-change: transform, box-shadow;
}


/* =========================================================
   2. EFEK SAAT KURSOR DIARAHKAN KE KARTU SIDEBAR
   ========================================================= */

body .pkp_structure_sidebar .pkp_block:hover,
body .pkp_structure_sidebar > .pkp_block:hover,
body .pkp_structure_sidebar > div[class*="block_"]:hover {
    background: #ffffff !important;

    border-color: #fff006 !important;

    box-shadow:
        0 16px 34px rgba(0, 36, 33, 0.18),
        0 5px 14px rgba(0, 36, 33, 0.10),
        inset 4px 0 0 #fff006 !important;

    transform:
        translateY(-6px)
        scale(1.018) !important;

    z-index: 5 !important;
}


/* =========================================================
   3. JUDUL BLOCK SIDEBAR
   ========================================================= */

body .pkp_structure_sidebar .pkp_block .title,
body .pkp_structure_sidebar > div[class*="block_"] .title {
    position: relative !important;

    display: block !important;

    transition:
        padding-left 0.28s ease,
        letter-spacing 0.28s ease,
        color 0.28s ease,
        background 0.28s ease !important;
}


/* Judul berubah jelas saat kartu diarahkan */

body .pkp_structure_sidebar .pkp_block:hover .title,
body .pkp_structure_sidebar > div[class*="block_"]:hover .title {
    padding-left: 22px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #3f806c 0%,
            #296956 55%,
            #002421 100%
        ) !important;

    letter-spacing: 0.025em !important;
}


/* =========================================================
   4. ISI BLOCK SIDEBAR
   ========================================================= */

body .pkp_structure_sidebar .pkp_block .content,
body .pkp_structure_sidebar > div[class*="block_"] .content {
    transition:
        background-color 0.28s ease,
        padding-left 0.28s ease,
        padding-right 0.28s ease !important;
}

body .pkp_structure_sidebar .pkp_block:hover .content,
body .pkp_structure_sidebar > div[class*="block_"]:hover .content {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcf8 100%
        ) !important;
}


/* =========================================================
   5. ITEM DAFTAR SIDEBAR
   ========================================================= */

body .pkp_structure_sidebar .pkp_block ul li,
body .pkp_structure_sidebar > div[class*="block_"] ul li {
    position: relative !important;

    transition:
        padding-left 0.22s ease,
        background-color 0.22s ease,
        transform 0.22s ease !important;
}

body .pkp_structure_sidebar .pkp_block ul li:hover,
body .pkp_structure_sidebar > div[class*="block_"] ul li:hover {
    padding-left: 23px !important;

    background:
        linear-gradient(
            90deg,
            rgba(255, 240, 6, 0.18),
            rgba(255, 240, 6, 0.03)
        ) !important;

    transform: translateX(2px) !important;
}


/* =========================================================
   6. LINK SIDEBAR
   ========================================================= */

body .pkp_structure_sidebar .pkp_block a,
body .pkp_structure_sidebar > div[class*="block_"] a {
    position: relative !important;

    transition:
        color 0.22s ease,
        transform 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease !important;

    -webkit-tap-highlight-color: transparent;
}

body .pkp_structure_sidebar .pkp_block a:hover,
body .pkp_structure_sidebar > div[class*="block_"] a:hover {
    color: #c8bd00 !important;
}


/* Link pada daftar bergeser saat hover */

body .pkp_structure_sidebar .pkp_block ul li a,
body .pkp_structure_sidebar > div[class*="block_"] ul li a {
    display: inline-block !important;
}

body .pkp_structure_sidebar .pkp_block ul li a:hover,
body .pkp_structure_sidebar > div[class*="block_"] ul li a:hover {
    transform: translateX(4px) !important;
}


/* =========================================================
   7. EFEK SAAT KARTU SIDEBAR DIKLIK
   ========================================================= */

body .pkp_structure_sidebar .pkp_block:active,
body .pkp_structure_sidebar > .pkp_block:active,
body .pkp_structure_sidebar > div[class*="block_"]:active {
    border-color: #3f806c !important;

    box-shadow:
        inset 0 4px 12px #c8bd00,
        0 4px 11px #c8bd00,
        0 0 0 3px #c8bd00 !important;

    transform:
        translateY(1px)
        scale(0.975) !important;

    transition-duration: 0.08s !important;
}


/* =========================================================
   8. EFEK SAAT LINK DIKLIK
   ========================================================= */

body .pkp_structure_sidebar .pkp_block a:active,
body .pkp_structure_sidebar > div[class*="block_"] a:active {
    color: #002421 !important;

    background: #c8bd00 !important;

    border-radius: 5px !important;

    box-shadow:
        inset 0 2px 6px #c8bd00,
        0 0 0 3px #c8bd00 !important;

    transform:
        translateX(4px)
        scale(0.96) !important;
}


/* =========================================================
   9. HIGHLIGHT KETIKA LINK MENDAPAT FOKUS
   ========================================================= */

body .pkp_structure_sidebar .pkp_block:focus-within,
body .pkp_structure_sidebar > div[class*="block_"]:focus-within {
    border-color: #fff006 !important;

    box-shadow:
        0 14px 30px rgba(0, 36, 33, 0.17),
        0 0 0 3px rgba(255, 240, 6, 0.14),
        inset 4px 0 0 #fff006 !important;

    transform:
        translateY(-3px)
        scale(1.008) !important;
}

body .pkp_structure_sidebar .pkp_block:focus-within .title,
body .pkp_structure_sidebar > div[class*="block_"]:focus-within .title {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #3f806c,
            #002421
        ) !important;
}


/* =========================================================
   10. GAMBAR DALAM SIDEBAR
   ========================================================= */

body .pkp_structure_sidebar .pkp_block img,
body .pkp_structure_sidebar > div[class*="block_"] img {
    transition:
        transform 0.3s ease,
        filter 0.3s ease,
        box-shadow 0.3s ease !important;
}

body .pkp_structure_sidebar .pkp_block img:hover,
body .pkp_structure_sidebar > div[class*="block_"] img:hover {
    filter:
        brightness(1.04)
        saturate(1.06) !important;

    box-shadow:
        0 8px 20px rgba(0, 36, 33, 0.15) !important;

    transform: scale(1.035) !important;
}

body .pkp_structure_sidebar .pkp_block img:active,
body .pkp_structure_sidebar > div[class*="block_"] img:active {
    filter: brightness(0.95) !important;

    transform: scale(0.96) !important;
}


/* =========================================================
   11. MOBILE
   ========================================================= */

@media screen and (max-width: 768px) {

    body .pkp_structure_sidebar .pkp_block:hover,
    body .pkp_structure_sidebar > .pkp_block:hover,
    body .pkp_structure_sidebar > div[class*="block_"]:hover {
        transform:
            translateY(-3px)
            scale(1.006) !important;
    }

    body .pkp_structure_sidebar .pkp_block:active,
    body .pkp_structure_sidebar > .pkp_block:active,
    body .pkp_structure_sidebar > div[class*="block_"]:active {
        transform: scale(0.985) !important;
    }
}


/* =========================================================
   12. REDUCED MOTION
   ========================================================= */

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

    body .pkp_structure_sidebar .pkp_block,
    body .pkp_structure_sidebar .pkp_block *,
    body .pkp_structure_sidebar > div[class*="block_"],
    body .pkp_structure_sidebar > div[class*="block_"] * {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   FINAL COLOR OVERRIDE — HIJAU + KUNING
   Menjamin seluruh komponen OJS memakai palet baru
   ========================================================= */

:root {
    --primary-color: #296956;
    --secondary-color: #002421;
    --accent-color: #fff006;
    --text-color: #333333;
    --border-color: #e0e0e0;
}

/* Elemen utama */
body,
.pkp_structure_content,
.pkp_structure_main,
.pkp_block .content,
.obj_article_summary,
table td {
    color: var(--text-color) !important;
}

/* Header, navigasi, sidebar title, footer, dan tombol utama */
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_block .title,
.pkp_structure_footer_wrapper,
.cmp_button,
button,
input[type="submit"],
input[type="button"],
a.cmp_button,
a.obj_galley_link {
    background:
        linear-gradient(
            135deg,
            var(--primary-color),
            var(--secondary-color)
        ) !important;
}

/* Aksen kuning */
.pkp_site_name_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_block .title,
.pkp_structure_footer_wrapper {
    border-color: var(--accent-color) !important;
}

.pkp_navigation_primary > li > a::after,
.pkp_block ul li::before {
    background: var(--accent-color) !important;
}

/* Hover menu */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_search_desktop .search_prompt:hover,
.pkp_search .search_prompt:hover,
.pkp_search button:hover,
.pkp_search_desktop button:hover {
    color: var(--accent-light) !important;
}

/* Judul dan tautan */
h1,
h2,
h3,
h4,
h5,
h6,
a,
.obj_article_summary .title a,
.pkp_block ul li a {
    color: var(--primary-color);
}

a:hover,
a:focus,
.obj_article_summary .title a:hover,
.pkp_block ul li a:hover {
    color: var(--secondary-color);
}

/* Hover tombol menggunakan aksen kuning */
.cmp_button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.cmp_button:hover,
a.obj_galley_link:hover {
    color: var(--secondary-color) !important;
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Fokus form */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(255, 240, 6, 0.20) !important;
}

/* Sidebar hover dan click */
body .pkp_structure_sidebar .pkp_block:hover,
body .pkp_structure_sidebar > .pkp_block:hover,
body .pkp_structure_sidebar > div[class*="block_"]:hover,
body .pkp_structure_sidebar .pkp_block:focus-within,
body .pkp_structure_sidebar > div[class*="block_"]:focus-within {
    border-color: var(--accent-color) !important;

    box-shadow:
        0 16px 34px rgba(0, 36, 33, 0.18),
        0 5px 14px rgba(0, 36, 33, 0.10),
        inset 4px 0 0 var(--accent-color) !important;
}

body .pkp_structure_sidebar .pkp_block:hover .title,
body .pkp_structure_sidebar > div[class*="block_"]:hover .title,
body .pkp_structure_sidebar .pkp_block:focus-within .title,
body .pkp_structure_sidebar > div[class*="block_"]:focus-within .title {
    background:
        linear-gradient(
            135deg,
            var(--primary-light),
            var(--primary-color) 55%,
            var(--secondary-color)
        ) !important;
}

/* Register */
.pkp_navigation_user a[href*="register"] {
    color: var(--secondary-color) !important;

    background:
        linear-gradient(
            135deg,
            #fff985 0%,
            var(--accent-color) 48%,
            var(--accent-dark) 100%
        ) !important;

    border-color: var(--accent-color) !important;
}

.pkp_navigation_user a[href*="register"]::before {
    background: var(--primary-color) !important;
}

.pkp_navigation_user a[href*="register"]:hover,
.pkp_navigation_user a[href*="register"]:focus {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--primary-light),
            var(--primary-color) 55%,
            var(--secondary-color)
        ) !important;

    border-color: var(--accent-color) !important;
}

/* Tabel */
table th {
    color: #ffffff !important;
    background: var(--primary-color) !important;
}

table tr:hover td {
    background: rgba(255, 240, 6, 0.10) !important;
}


/* =========================================================
   REGISTER BAR RESPONSIVE — FINAL
   ========================================================= */

@media screen and (max-width: 992px) {

    .pkp_navigation_user_wrapper {
        min-height: 56px !important;
        padding: 0 12px !important;
    }

    .pkp_navigation_user {
        min-height: 53px !important;
        padding: 7px 145px !important;
    }

    .pkp_navigation_user > li:has(a[href*="register"]) {
        position: static !important;
        transform: none !important;
    }

    .pkp_navigation_user a[href*="register"] {
        min-width: 150px !important;
        padding: 9px 17px !important;
        font-size: 11.5px !important;
    }

    .pkp_navigation_user > li:has(a[href*="login"]) {
        right: 0 !important;
    }
}

@media screen and (max-width: 768px) {

    .pkp_navigation_user_wrapper {
        min-height: 54px !important;
        padding: 0 8px !important;
    }

    .pkp_navigation_user {
        justify-content: center !important;
        min-height: 51px !important;
        padding: 6px 8px !important;
    }

    .pkp_navigation_user > li:has(a[href*="register"]) {
        position: static !important;
        transform: none !important;
    }

    .pkp_navigation_user a[href*="register"] {
        min-width: 150px !important;
        min-height: 38px !important;
        padding: 9px 16px !important;
        font-size: 11px !important;
    }

    .pkp_navigation_user > li:has(a[href*="login"]) {
        position: static !important;
        margin-left: 5px !important;
        transform: none !important;
    }

    .pkp_navigation_user a[href*="login"] {
        min-height: 36px !important;
        padding: 8px 11px !important;
    }
}

@media screen and (max-width: 480px) {

    .pkp_navigation_user {
        gap: 5px !important;
    }

    .pkp_navigation_user a[href*="register"] {
        min-width: 142px !important;
        padding-right: 13px !important;
        padding-left: 13px !important;
    }

    .pkp_navigation_user a[href*="login"] {
        padding-right: 9px !important;
        padding-left: 9px !important;
    }
}

/* =========================================================
   FINAL PATCH v2
   REGISTER OVERLAY DI HEADER IMAGE
   Navigation Primary tetap di bawah header
   ========================================================= */


/* Batalkan layout register bar lama */
.pkp_head_wrapper {
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_user_wrapper {
    position: absolute !important;

    top: 18px !important;
    right: 24px !important;
    left: auto !important;

    z-index: 100 !important;

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

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

    background: transparent !important;

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

    order: initial !important;
}


/* Header image tetap normal */
.pkp_site_name_wrapper {
    position: relative !important;

    order: initial !important;

    display: block !important;

    width: 100% !important;

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

    background: #ffffff !important;
}


/* Hilangkan aturan flex order lama */
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
    order: initial !important;

    position: relative !important;

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

    margin: 0 !important;
}


/* User menu */
.pkp_navigation_user {
    display: flex !important;

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

    width: auto !important;

    min-height: 0 !important;

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

    background: transparent !important;
}


/* Register */
.pkp_navigation_user a[href*="register"] {

    display: inline-flex !important;

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

    min-width: 155px !important;
    height: 40px !important;

    padding: 8px 20px !important;

    color: #002421 !important;

    background:
        linear-gradient(
            135deg,
            #fff985,
            #fff006
        ) !important;

    border: 1px solid #fff006 !important;
    border-radius: 999px !important;

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

    text-transform: uppercase !important;

    box-shadow:
        0 6px 18px rgba(0,36,33,.25) !important;

    transition: all .25s ease !important;
}


.pkp_navigation_user a[href*="register"]::before {

    content:"+";

    display:flex !important;

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

    width:20px !important;
    height:20px !important;

    margin-right:8px !important;

    color:#fff !important;

    background:#296956 !important;

    border-radius:50% !important;
}


.pkp_navigation_user a[href*="register"]:hover {

    color:#ffffff !important;

    background:
        linear-gradient(
            135deg,
            #3f806c,
            #002421
        ) !important;

    transform:translateY(-3px) !important;

}


/* Login tetap sebelah register */
.pkp_navigation_user > li:has(a[href*="login"]) {

    position:static !important;

    transform:none !important;

    margin-left:8px !important;
}


.pkp_navigation_user a[href*="login"] {

    color:#ffffff !important;

    background:rgba(255,255,255,.12) !important;

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

    border-radius:999px !important;

}


/* Hilangkan padding lama register */
.pkp_navigation_user {
    padding-left:0 !important;
    padding-right:0 !important;
}


/* Responsive */
@media(max-width:768px){

    .pkp_navigation_user_wrapper {

        top:12px !important;
        right:12px !important;

    }

    .pkp_navigation_user a[href*="register"] {

        min-width:130px !important;

        height:36px !important;

        font-size:11px !important;

        padding:7px 14px !important;

    }

}


@media(max-width:480px){

    .pkp_navigation_user_wrapper {

        top:8px !important;
        right:8px !important;

    }

    .pkp_navigation_user a[href*="register"] {

        min-width:115px !important;

        font-size:10px !important;

    }

}


/* =========================================================
   FINAL ADJUSTMENT
   REGISTER POJOK KIRI ATAS HEADER + HAPUS GARIS ATAS NAVIGATION
   ========================================================= */


/* Register berada di dalam header image */
.pkp_site_name_wrapper {
    position: relative !important;
}


/* Pindahkan user navigation ke pojok kiri atas header */
.pkp_navigation_user_wrapper {

    position: absolute !important;

    top: 22px !important;
    left: 120px !important;
    right: auto !important;

    z-index: 100 !important;

    width: auto !important;

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

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* Container user */
.pkp_navigation_user {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    width: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

}


/* Register button */
.pkp_navigation_user a[href*="register"] {

    min-width: 150px !important;
    height: 40px !important;

    padding: 8px 20px !important;

    color: #002421 !important;

    background:
        linear-gradient(
            135deg,
            #fff985,
            #fff006
        ) !important;

    border: 1px solid #fff006 !important;

    border-radius: 999px !important;

    font-size: 12px !important;

    font-weight: 800 !important;

    box-shadow:
        0 6px 18px rgba(0,36,33,.25) !important;

    transition: all .25s ease !important;
}


.pkp_navigation_user a[href*="register"]:hover {

    color:#ffffff !important;

    background:
        linear-gradient(
            135deg,
            #296956,
            #002421
        ) !important;

    transform:translateY(-2px) !important;

}


/* Login tetap dekat register */
.pkp_navigation_user li:has(a[href*="login"]) {

    position: static !important;

    margin-left:10px !important;

    transform:none !important;

}


/* =========================================================
   HAPUS GARIS ATAS NAVIGATION PRIMARY
   ========================================================= */

.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {

    border-top:0 !important;

    margin-top:0 !important;

    box-shadow:
        0 5px 14px rgba(0,36,33,.18) !important;

}


/* Hapus garis pemisah tambahan dari header */
.pkp_site_name_wrapper {

    border-bottom:0 !important;

}


/* Responsive */
@media screen and (max-width:768px){

    .pkp_navigation_user_wrapper {

        top:15px !important;

        left:25px !important;

    }

}


@media screen and (max-width:480px){

    .pkp_navigation_user_wrapper {

        top:10px !important;

        left:15px !important;

    }

    .pkp_navigation_user a[href*="register"] {

        min-width:130px !important;

        height:36px !important;

        font-size:11px !important;

    }

}



/* =========================================================
   ARTICLE VIEW RESTORE PATCH OJS 3.x
   PDF / GALLEY / METADATA / DOI / LICENSE
   ========================================================= */

.obj_article_details,
.obj_article_details .row {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
}

.obj_article_details .row {
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:flex-start !important;
}

.obj_article_details .main_entry {
    flex:1 1 auto !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    float:none !important;
    display:block !important;
}

.obj_article_details .entry_details {
    flex:0 0 300px !important;
    width:300px !important;
    max-width:none !important;
    float:none !important;
    display:block !important;
    margin-left:30px !important;
}


/* PDF / GALLEY */
.obj_article_details .galleys,
.obj_article_details .item.galleys,
.obj_article_details .galleys_links {
    width:100% !important;
    max-width:none !important;
    display:block !important;
    float:none !important;
    margin:20px 0 !important;
}

.obj_article_details a.obj_galley_link,
.obj_article_details .galley_link,
.obj_article_details .galleys a {
    display:inline-flex !important;
    width:auto !important;
    max-width:none !important;
    min-width:120px !important;
    align-items:center !important;
    justify-content:center !important;
    float:none !important;
}


/* METADATA ARTICLE */
.obj_article_details .item,
.obj_article_details .metadata,
.obj_article_details .references,
.obj_article_details .doi,
.obj_article_details .copyright,
.obj_article_details .license {
    width:100% !important;
    max-width:none !important;
    display:block !important;
    float:none !important;
}

.obj_article_details .item dt,
.obj_article_details .item dd {
    width:auto !important;
    display:block !important;
    margin-left:0 !important;
}


/* INFO PUBLIKASI */
.obj_article_details .published,
.obj_article_details .publication,
.obj_article_details .doi,
.obj_article_details .license,
.obj_article_details .copyright {
    position:static !important;
    transform:none !important;
}


/* HAPUS EFEK MENGECILKAN PDF VIEWER */
.obj_article_details iframe,
.obj_article_details embed,
.obj_article_details object {
    width:100% !important;
    max-width:none !important;
}


/* RESPONSIVE */
@media(max-width:992px){

    .obj_article_details .row {
        display:block !important;
    }

    .obj_article_details .entry_details {
        width:100% !important;
        margin-left:0 !important;
        margin-top:30px !important;
    }
}

@media(max-width:768px){

    .obj_article_details,
    .obj_article_details .main_entry,
    .obj_article_details .entry_details {
        width:100% !important;
        max-width:none !important;
    }

    .obj_article_details a.obj_galley_link,
    .obj_article_details .galley_link {
        width:auto !important;
    }
}



/* =========================================================
   FINAL ARTICLE BALANCE FIX
   TIDAK MEMINDAHKAN KE BAWAH
   TITLE FULL WIDTH + AUTHOR LEFT + COVER RIGHT
   ========================================================= */


/* ARTICLE CONTAINER */
.obj_article_details {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
}


/* TITLE FULL WIDTH */
.obj_article_details .page_title,
.obj_article_details h1.page_title,
.obj_article_details .title {
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    padding-left:0 !important;
}


/* AREA ARTIKEL TETAP DUA KOLOM */
.obj_article_details .row {
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start !important;
    flex-wrap:nowrap !important;

    gap:18px !important;

    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}


/* =========================================================
   LEFT ARTICLE CONTENT
   ========================================================= */

.obj_article_details .main_entry {
    flex:0 0 68% !important;

    width:68% !important;
    max-width:68% !important;

    min-width:0 !important;

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

    float:none !important;
}


/* Identitas artikel lebih ke kiri */
.obj_article_details .authors,
.obj_article_details .item.authors,
.obj_article_details .doi,
.obj_article_details .keywords,
.obj_article_details .abstract,
.obj_article_details .references {

    margin-left:0 !important;
    padding-left:0 !important;

    width:100% !important;
}


/* =========================================================
   RIGHT COVER + METADATA
   ========================================================= */

.obj_article_details .entry_details {

    flex:0 0 32% !important;

    width:32% !important;
    max-width:32% !important;

    margin-left:0 !important;

    padding-left:18px !important;

    float:none !important;

    border-left:1px solid #ddd !important;
}


/* Hilangkan garis tambahan */
.obj_article_details .entry_details .item {

    border-left:none !important;
    border-right:none !important;
}


/* Cover tetap di kanan sejajar author */
.obj_article_details .cover_image {

    margin-top:0 !important;
    margin-bottom:15px !important;

    text-align:center !important;
}


/* PDF tetap dibawah cover */
.obj_article_details .galleys,
.obj_article_details .item.galleys,
.obj_article_details .galleys_links {

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

    margin:15px 0 !important;

    display:block !important;
}


.obj_article_details .obj_galley_link,
.obj_article_details .galley_link {

    display:flex !important;

    width:100% !important;

    justify-content:center !important;
}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media(max-width:992px){

    .obj_article_details .row {

        display:block !important;

    }


    .obj_article_details .main_entry,
    .obj_article_details .entry_details {

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

    }


    .obj_article_details .entry_details {

        margin-top:25px !important;
        padding-left:0 !important;

        border-left:none !important;

    }

}