/* ==========================================================
   CEDDI JOURNAL OF INFORMATION SYSTEM AND TECHNOLOGY (JST)
   FINAL CLEAN CSS — OJS 3.3.0-11
   Header gambar/teks • Desktop • Tablet • Mobile
   Homepage • Navigation • Sidebar • Footer
   ========================================================== */

/* ==================== 1. GLOBAL ==================== */
* { box-sizing: border-box; }

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    color: #2a2a2a;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.pkp_structure_content {
    width: 100%;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fbfd 18%,
            #f5f8fb 52%,
            #ffffff 100%
        );
}

.pkp_structure_main {
    color: #2a2a2a;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==================== 2. HEADER UNIVERSAL ==================== */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.pkp_structure_head {
    position: relative !important;
    background: #fff !important;
    overflow: visible !important;
}

.pkp_head_wrapper { position: relative !important; }

.pkp_site_name {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

/* Header gambar */
.pkp_site_name .is_img,
.pkp_site_name .is_img > a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
}

.pkp_site_name .is_img img,
.pkp_site_name img {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: contain !important;
    transform: none !important;
    vertical-align: top !important;
}

/* Header teks */
.pkp_site_name:not(:has(img)) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 124px !important;
    padding: 26px 330px 26px 40px !important;
    background: #fff !important;
    line-height: normal !important;
    text-align: center !important;
}

.pkp_site_name:not(:has(img)) > a,
.pkp_site_name:not(:has(img)) .is_text {
    display: block !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #003b66 !important;
    font-size: clamp(27px, 2.7vw, 42px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -.3px !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

.pkp_site_name:not(:has(img)) > a:hover,
.pkp_site_name:not(:has(img)) > a:focus,
.pkp_site_name:not(:has(img)) .is_text:hover,
.pkp_site_name:not(:has(img)) .is_text:focus {
    color: #005da8 !important;
    text-decoration: none !important;
}

/* ==================== 3. NAVIGATION DESKTOP ==================== */
.pkp_site_nav_menu,
.pkp_navigation_primary_row {
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.pkp_navigation_primary_row {
    width: 100%;
    min-height: 70px;
    padding: 0 24px;
    background: #00436b !important;
}

.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li > button {
    padding: 23px 17px !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 24px;
    text-transform: uppercase;
    text-decoration: none !important;
    opacity: 1 !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > a:active,
.pkp_navigation_primary > li > button:hover,
.pkp_navigation_primary > li > button:focus {
    color: #ffd43b !important;
    background: #00324f !important;
}

.pkp_navigation_primary .dropdown-toggle::after {
    border-top-color: #fff !important;
}

/* Desktop submenu */
.pkp_navigation_primary ul,
.pkp_navigation_primary .dropdown-menu,
.pkp_navigation_primary .dropdown-menu ul {
    min-width: 260px !important;
    padding: 0 !important;
    border: 1px solid #d5dce3 !important;
    border-radius: 0 0 7px 7px !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
}

.pkp_navigation_primary ul li,
.pkp_navigation_primary .dropdown-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #e7edf2 !important;
    background: #fff !important;
}

.pkp_navigation_primary ul li:last-child,
.pkp_navigation_primary .dropdown-menu li:last-child {
    border-bottom: 0 !important;
}

.pkp_navigation_primary ul li a,
.pkp_navigation_primary ul a,
.pkp_navigation_primary .dropdown-menu li a,
.pkp_navigation_primary .dropdown-menu a,
.pkp_nav_list ul li a,
.pkp_nav_list ul a {
    display: block !important;
    width: 100% !important;
    padding: 13px 18px !important;
    color: #003b66 !important;
    background: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: normal !important;
    opacity: 1 !important;
}

.pkp_navigation_primary ul li.current > a,
.pkp_navigation_primary .dropdown-menu li.current > a {
    color: #fff !important;
    background: #ff9200 !important;
    font-weight: 700 !important;
}

.pkp_navigation_primary ul li a:hover,
.pkp_navigation_primary ul li a:focus,
.pkp_navigation_primary .dropdown-menu li a:hover,
.pkp_navigation_primary .dropdown-menu li a:focus,
.pkp_nav_list ul li a:hover,
.pkp_nav_list ul li a:focus {
    color: #fff !important;
    background: #005da8 !important;
}

/* Search */
.pkp_navigation_search_wrapper a,
.pkp_search,
.pkp_search_desktop {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus,
.pkp_search:hover,
.pkp_search:focus {
    color: #ffd43b !important;
}

.pkp_navigation_search_wrapper .fa,
.pkp_search .fa,
.pkp_search::before { color: #fff !important; }

/* ==================== 4. USER NAVIGATION ==================== */
.pkp_navigation_user {
    display: flex;
    gap: 10px;
    align-items: center;
}

.pkp_navigation_user > li > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 20px !important;
    border: 2px solid #005da8 !important;
    border-radius: 8px;
    color: #fff !important;
    background: #005da8 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2;
    text-decoration: none !important;
    opacity: 1 !important;
    box-shadow: 0 3px 9px rgba(0,59,102,.18);
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    border-color: #003b66 !important;
    color: #fff !important;
    background: #003b66 !important;
}

.pkp_navigation_user > li > a[href*="/user/register"] {
    border-color: #e5a800 !important;
    color: #222 !important;
    background: #ffd43b !important;
}

.pkp_navigation_user > li > a[href*="/user/register"]:hover,
.pkp_navigation_user > li > a[href*="/user/register"]:focus {
    border-color: #c89400 !important;
    color: #111 !important;
    background: #f5bd00 !important;
}

.pkp_navigation_user > li.profile > a,
.pkp_navigation_user > li > a[href*="/user/profile"] {
    border-color: #f0b400 !important;
    color: #fff !important;
    background: #00436b !important;
}

/* Account dropdown */
.pkp_navigation_user ul,
.pkp_navigation_user .dropdown-menu {
    min-width: 260px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #d5dce3 !important;
    border-radius: 7px !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
}

.pkp_navigation_user ul li,
.pkp_navigation_user .dropdown-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #e4ebf0 !important;
    background: #fff !important;
}

.pkp_navigation_user ul li:last-child,
.pkp_navigation_user .dropdown-menu li:last-child { border-bottom: 0 !important; }

.pkp_navigation_user ul li a,
.pkp_navigation_user ul a,
.pkp_navigation_user .dropdown-menu li a,
.pkp_navigation_user .dropdown-menu a {
    display: block !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #003b66 !important;
    background: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: normal !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.pkp_navigation_user ul li a:hover,
.pkp_navigation_user ul li a:focus,
.pkp_navigation_user .dropdown-menu li a:hover,
.pkp_navigation_user .dropdown-menu li a:focus {
    color: #fff !important;
    background: #005da8 !important;
}

/* Task badge */
.pkp_navigation_user .task_count,
.pkp_navigation_user .badge,
.pkp_navigation_user [class*="task_count"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important;
    height: 24px !important;
    margin-left: 8px !important;
    padding: 0 6px !important;
    border: 1px solid #ffe58a !important;
    border-radius: 999px !important;
    color: #002f4b !important;
    background: #ffd43b !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 22px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.18) !important;
}

/* ==========================================================
   5. HOMEPAGE JST — FINAL CLEAN
   OJS 3.3.0-11
   Sinkron dengan Additional Content JST
   ========================================================== */

/* ==================== WRAPPER ==================== */

.jst-profile,
.jst-profile * {
    box-sizing: border-box;
}

.jst-profile {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 38px 24px 20px;

    color: #2a2a2a;
    background: transparent;

    font-family:
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.75;
}


/* ==================== MAIN GRID ==================== */

.jst-main-grid {
    display: flex;
    flex-direction: column;

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

    gap: 30px;
}


/* ==========================================================
   UNIVERSAL SECTION
   Mendukung:
   .jst-summary
   .jst-details
   .jst-section-card
   ========================================================== */

.jst-summary,
.jst-details,
.jst-section-card {
    position: relative;

    width: 100%;
    margin: 0;

    padding: 32px 36px 34px;

    overflow: hidden;

    border: 1px solid rgba(0, 67, 107, .10);
    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            #eefbff 0%,
            #ffffff 48%,
            #f4f5ff 100%
        );

    box-shadow:
        0 16px 38px rgba(0, 59, 102, .08),
        0 3px 10px rgba(0, 59, 102, .04);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


/* Variasi summary */

.jst-summary {
    background:
        linear-gradient(
            135deg,
            #eefbff 0%,
            #ffffff 50%,
            #f4f4ff 100%
        );
}


/* Variasi details */

.jst-details {
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f5fbff 52%,
            #f7f6ff 100%
        );
}


/* Garis gradient atas */

.jst-summary::before,
.jst-details::before,
.jst-section-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;

    height: 3px;

    border-radius: 0 0 10px 10px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #1c75bc 25%,
            #ffd43b 72%,
            transparent 100%
        );

    opacity: .75;
}


/* Hover desktop */

@media (hover: hover) and (pointer: fine) {

    .jst-summary:hover,
    .jst-details:hover,
    .jst-section-card:hover {

        transform: translateY(-2px);

        border-color: rgba(28, 117, 188, .18);

        box-shadow:
            0 20px 45px rgba(0, 59, 102, .11),
            0 4px 12px rgba(0, 59, 102, .05);
    }
}


/* ==========================================================
   SECTION HEADING
   ========================================================== */

.jst-section-heading {
    margin: 0 0 25px;
    padding: 0 0 17px;

    border-bottom: 1px solid rgba(0, 67, 107, .12);
}

.jst-section-kicker {
    display: inline-flex;

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

    margin: 0 0 10px;

    padding: 6px 14px;

    border: 1px solid rgba(0, 93, 168, .10);
    border-radius: 999px;

    color: #006c78;

    background:
        linear-gradient(
            135deg,
            #dff6fb,
            #edf7ff
        );

    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: .7px;
    text-transform: uppercase;
}

.jst-section-heading h2 {
    margin: 0;

    color: #071a35;

    font-size: 30px;
    font-weight: 750;
    line-height: 1.25;

    letter-spacing: -.4px;
}


/* ==========================================================
   PARAGRAPH
   ========================================================== */

.jst-profile p,
.jst-summary p,
.jst-details p,
.jst-section-card p {
    margin: 0 0 18px;

    color: #2a2a2a;

    font-size: 16px;
    line-height: 1.78;

    text-align: justify;
    text-align-last: left;

    hyphens: auto;
    overflow-wrap: break-word;
}

.jst-summary > p:last-child,
.jst-details > p:last-child,
.jst-section-card > p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   LINKS
   ========================================================== */

.jst-profile a {
    color: #005da8;

    font-weight: 600;

    text-decoration: none;

    overflow-wrap: anywhere;

    transition:
        color .18s ease,
        text-decoration-color .18s ease;
}

.jst-profile a:hover,
.jst-profile a:focus {
    color: #003b66;
    text-decoration: underline;
}


/* ==========================================================
   JOURNAL INFORMATION BOX
   ========================================================== */

.jst-info-box {
    width: 100%;

    margin: 28px 0 0;
    padding: 0;

    overflow: hidden;

    border: 1px solid rgba(28, 117, 188, .14);
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(235, 248, 255, .96) 0%,
            rgba(255, 255, 255, .98) 100%
        );

    box-shadow:
        0 7px 20px rgba(0, 59, 102, .05);
}


/* ==================== INFORMATION TITLE ==================== */

.jst-info-title {
    padding: 14px 20px;

    border-bottom: 1px solid rgba(28, 117, 188, .12);
    border-left: 5px solid #1c75bc;

    color: #003b66;

    background:
        linear-gradient(
            90deg,
            #e8f6fd,
            rgba(255, 255, 255, .92)
        );

    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;

    letter-spacing: .2px;
}


/* ==================== INFORMATION LIST ==================== */

.jst-info-box ul {
    margin: 0 !important;

    padding: 22px 25px 22px 45px !important;

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

    background: transparent !important;

    box-shadow: none !important;
}

.jst-info-box li {
    margin: 0 0 10px;

    padding-left: 3px;

    color: #252525;

    line-height: 1.65;

    overflow-wrap: anywhere;
}

.jst-info-box li:last-child {
    margin-bottom: 0;
}

.jst-info-box li::marker {
    color: #1c75bc;
}

.jst-label {
    color: #003b66;
    font-weight: 750;
}


/* ==========================================================
   OPTIONAL LEGACY JOURNAL TITLE
   Tetap didukung jika masih ada pada HTML lama
   ========================================================== */

.jst-journal-title {
    display: block;

    margin: 0 0 16px;
    padding-bottom: 11px;

    border-bottom: 2px solid #d6e4ef;

    color: #003b66;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 24px !important;
    font-weight: 700;
    line-height: 1.4;
}


/* ==========================================================
   TABLET
   ========================================================== */

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

    .jst-profile {
        padding: 28px 18px 18px !important;

        font-size: 15.5px !important;
        line-height: 1.7 !important;
    }

    .jst-main-grid {
        gap: 22px !important;
    }

    .jst-summary,
    .jst-details,
    .jst-section-card {

        padding: 27px 25px 29px !important;

        border-radius: 21px !important;
    }

    .jst-section-heading {
        margin-bottom: 21px;
        padding-bottom: 14px;
    }

    .jst-section-heading h2 {
        font-size: 26px;
    }

    .jst-profile p,
    .jst-summary p,
    .jst-details p,
    .jst-section-card p {

        margin: 0 0 17px !important;

        font-size: 15.5px !important;
        line-height: 1.7 !important;

        text-align: justify !important;
        text-align-last: left !important;

        hyphens: auto !important;

        overflow-wrap: break-word !important;
    }

    .jst-info-box ul {
        padding: 20px 22px 20px 41px !important;
    }
}


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

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

    .jst-profile {
        padding: 24px 16px 16px !important;
    }

    .jst-main-grid {
        gap: 20px !important;
    }

    .jst-summary,
    .jst-details,
    .jst-section-card {

        padding: 24px 21px 26px !important;

        border-radius: 18px !important;
    }

    .jst-summary::before,
    .jst-details::before,
    .jst-section-card::before {

        left: 20px;
        right: 20px;
    }

    .jst-section-kicker {
        padding: 5px 12px;
        font-size: 12px;
    }

    .jst-section-heading h2 {
        font-size: 23px;
        line-height: 1.3;
    }

    .jst-info-box {
        margin-top: 23px;
        border-radius: 13px;
    }

    .jst-info-title {
        padding: 13px 16px;
        font-size: 15px;
    }

    .jst-info-box ul {
        padding: 19px 17px 19px 35px !important;
    }

    .jst-info-box li {
        margin-bottom: 9px;

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


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

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

    .jst-profile {
        padding: 21px 13px 14px !important;
    }

    .jst-main-grid {
        gap: 17px !important;
    }

    .jst-summary,
    .jst-details,
    .jst-section-card {

        padding: 22px 18px 24px !important;

        border-radius: 16px !important;
    }

    .jst-section-heading {
        margin-bottom: 18px;
    }

    .jst-section-heading h2 {
        font-size: 21px;
    }

    .jst-profile p,
    .jst-summary p,
    .jst-details p,
    .jst-section-card p {

        font-size: 15px !important;
        line-height: 1.68 !important;
    }

    .jst-info-title {
        font-size: 14.5px;
    }

    .jst-info-box ul {
        padding: 18px 14px 18px 31px !important;
    }

    .jst-info-box li {
        font-size: 14px;
    }
}

/* ==========================================================
   5B. CURRENT ISSUE / ARTICLE LIST — JST PROFESSIONAL
   OJS 3.3.0-11
   ========================================================== */

/* ==================== CURRENT ISSUE AREA ==================== */

.obj_issue_toc {
    margin-top: 0;
    padding: 0;
    color: #263746;
}

/* ==================== CURRENT ISSUE HEADING ==================== */

.obj_issue_toc .heading {
    margin: 0 0 28px;
    padding: 0 0 18px;

    border-bottom: 1px solid rgba(0, 67, 107, .12);
}

.obj_issue_toc .heading h2,
.obj_issue_toc .heading h3 {
    margin: 0 0 10px;

    color: #071a35;

    font-size: 26px;
    font-weight: 750;
    line-height: 1.3;

    letter-spacing: -.25px;
}

/* Issue description */

.obj_issue_toc .description {
    margin: 15px 0 18px;

    color: #374151;

    font-size: 15px;
    line-height: 1.75;

    text-align: left;
}

/* Published date */

.obj_issue_toc .published {
    margin-top: 16px;

    color: #5b6670;

    font-size: 13px;
    line-height: 1.5;
}

.obj_issue_toc .published .label {
    color: #003b66;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .25px;
}

/* ==================== SECTION TITLE: ARTICLES ==================== */

.obj_issue_toc .section {
    margin-top: 30px;
}

.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3 {

    margin: 0;
    padding: 13px 17px;

    border: 1px solid rgba(0, 67, 107, .10);
    border-left: 4px solid #1c75bc;

    color: #003b66;

    background:
        linear-gradient(
            90deg,
            #eef8fd 0%,
            #ffffff 100%
        );

    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;

    text-transform: uppercase;
    letter-spacing: .35px;

    box-shadow:
        0 2px 7px rgba(0, 59, 102, .04);
}

/* ==================== ARTICLE ==================== */

.obj_issue_toc .articles {
    margin: 0;
    padding: 0;
}

.obj_issue_toc .articles > li {
    position: relative;

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

    border: 0 !important;
    border-bottom:
        1px solid rgba(0, 67, 107, .11) !important;

    background: transparent;

    transition:
        background-color .18s ease,
        transform .18s ease;
}

/* Jangan beri garis pada artikel terakhir */

.obj_issue_toc .articles > li:last-child {
    border-bottom: 0 !important;
}

/* Hover sangat lembut */

@media (hover:hover) and (pointer:fine) {

    .obj_issue_toc .articles > li:hover {
        background:
            linear-gradient(
                90deg,
                rgba(238, 250, 255, .62),
                rgba(255, 255, 255, .20)
            );

        transform: translateX(2px);
    }
}

/* ==================== ARTICLE TITLE ==================== */

.obj_article_summary .title {
    margin: 0 0 9px !important;

    color: #071a35 !important;

    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

.obj_article_summary .title a {
    color: #071a35 !important;

    font-weight: 700 !important;

    text-decoration: none !important;

    transition: color .18s ease;
}

.obj_article_summary .title a:hover,
.obj_article_summary .title a:focus {
    color: #005da8 !important;
    text-decoration: none !important;
}

/* ==================== AUTHORS ==================== */

.obj_article_summary .authors {
    margin: 0 0 6px !important;

    color: #374151 !important;

    font-size: 14px !important;
    line-height: 1.6 !important;
}

.obj_article_summary .authors strong {
    color: #182536;
}

/* ==================== PAGES ==================== */

.obj_article_summary .pages {
    color: #6b7280 !important;

    font-size: 13px !important;
    line-height: 1.5;
}

/* ==================== ARTICLE META ==================== */

.obj_article_summary .meta {
    margin-top: 7px;

    color: #52606d;

    font-size: 13px;
    line-height: 1.55;
}

/* ==================== GALLEY / PDF ==================== */

.obj_article_summary .galleys_links {
    margin-top: 10px !important;
}

.obj_article_summary .galleys_links a,
.obj_article_summary .galley-link {

    display: inline-flex !important;

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

    min-width: 66px;

    padding: 7px 13px !important;

    border: 1px solid #003b66 !important;
    border-radius: 5px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #075e9e,
            #003b66
        ) !important;

    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;

    box-shadow:
        0 2px 6px rgba(0, 59, 102, .12);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

@media (hover:hover) and (pointer:fine) {

    .obj_article_summary .galleys_links a:hover,
    .obj_article_summary .galley-link:hover {

        transform: translateY(-1px);

        background:
            linear-gradient(
                135deg,
                #00436b,
                #002f4b
            ) !important;

        box-shadow:
            0 4px 9px rgba(0, 59, 102, .18);
    }
}

/* ==================== ABSTRACT VIEWS ==================== */

.obj_article_summary [class*="stat"],
.obj_article_summary [class*="view"] {
    line-height: 1.5;
}

/* ==================== VIEW ALL ISSUES ==================== */

.current_issue .read_more,
.obj_issue_toc + .read_more {

    display: inline-flex;

    align-items: center;

    margin-top: 20px;

    color: #003b66 !important;

    font-size: 14px;
    font-weight: 800;

    text-decoration: none !important;

    text-transform: uppercase;

    letter-spacing: .25px;

    transition:
        color .18s ease,
        transform .18s ease;
}

.current_issue .read_more:hover,
.obj_issue_toc + .read_more:hover {
    color: #005da8 !important;
    transform: translateX(3px);
}

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

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

    .obj_issue_toc {
        margin-top: 30px;
    }

    .obj_issue_toc .heading h2,
    .obj_issue_toc .heading h3 {
        font-size: 22px;
    }

    .obj_issue_toc .articles > li {
        padding:
            21px
            8px
            23px !important;
    }

    .obj_article_summary .title {
        font-size: 16px !important;
    }

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

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

    .obj_issue_toc .heading h2,
    .obj_issue_toc .heading h3 {
        font-size: 20px;
    }

    .obj_issue_toc .section > h2,
    .obj_issue_toc .section > h3 {
        padding: 11px 13px;

        font-size: 14px;
    }

    .obj_issue_toc .articles > li {
        padding:
            19px
            5px
            21px !important;
    }
}

/* ==========================================================
   5C. CURRENT ISSUE — FINAL COMPACT SPACING
   JST / OJS 3.3.0-11
   ========================================================== */

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

.pkp_page_index .additional_content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


/* ==================== CURRENT ISSUE CONTAINER ==================== */

.pkp_page_index .current_issue {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =======CURRENT ISSUE ======= */
.pkp_page_index .current_issue > h2 {
    margin: 0 0 18px !important;
    padding: 0 0 10px !important;
}

/* ==================== ISSUE TOC ==================== */

.pkp_page_index
.current_issue
.obj_issue_toc {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* ==================== HEADING ISSUE ==================== */

.pkp_page_index
.current_issue
.obj_issue_toc
.heading {
    margin: 0 0 18px !important;
    padding: 0 0 16px !important;
}


/* ==================== JUDUL ISSUE ==================== */

.pkp_page_index
.current_issue
.obj_issue_toc
.heading
.title {
    margin: 0 0 12px !important;
    padding: 0 !important;
}


/* ==================== DESCRIPTION ==================== */

.pkp_page_index
.current_issue
.obj_issue_toc
.description {
    margin: 14px 0 !important;
    padding: 0 !important;
}


/* ==================== PUBLISHED DATE ==================== */

.pkp_page_index
.current_issue
.obj_issue_toc
.published {
    margin: 12px 0 0 !important;
    padding: 0 !important;
}


/* ==================== ARTICLES SECTION ==================== */

.pkp_page_index
.current_issue
.obj_issue_toc
.section {
    margin-top: 22px !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

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

    .jst-profile {
        padding-bottom: 18px !important;
    }

    .pkp_page_index .current_issue {
        margin-top: 0 !important;
    }

    .pkp_page_index .current_issue > h2 {
        margin-bottom: 20px !important;
    }
}


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

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

    .jst-profile {
        padding-bottom: 16px !important;
    }

    .pkp_page_index .current_issue {
        margin-top: 0 !important;
    }

    .pkp_page_index .current_issue > h2 {
        margin-bottom: 18px !important;
    }

    .pkp_page_index
    .current_issue
    .obj_issue_toc
    .heading {
        margin-bottom: 18px !important;
        padding-bottom: 15px !important;
    }

    .pkp_page_index
    .current_issue
    .obj_issue_toc
    .section {
        margin-top: 18px !important;
    }
}


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

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

    .jst-profile {
        padding-bottom: 14px !important;
    }
}

/* ==========================================================
   6. SIDEBAR / CUSTOM BLOCK JST — FINAL PROFESSIONAL
   OJS 3.3.0-11
   Desktop • Tablet • Mobile
   ========================================================== */


/* ==========================================================
   6.1 OJS SIDEBAR CONTAINER — CLEAN / TRANSPARENT
   ========================================================== */

.pkp_structure_sidebar {
    box-sizing: border-box;
    background: transparent !important;
}

.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .block_custom,
.pkp_structure_sidebar [class*="block_"] {
    width: 100%;
    max-width: 100%;

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

    border: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;

    box-sizing: border-box;
}

/* Hilangkan background bawaan OJS pada isi Custom Block */
.pkp_structure_sidebar .block_custom > div,
.pkp_structure_sidebar .block_custom .content {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

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

/* ==========================================================
   6.2 CUSTOM SIDEBAR WRAPPER
   ========================================================== */

.jst-sidebar-custom,
.jst-sidebar-custom * {
    box-sizing: border-box;
}

.jst-sidebar-custom {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    color: #263746;

    font-family:
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;

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


/* ==========================================================
   6.3 SIDEBAR CARD
   ========================================================== */

.jst-sidebar-box {
    position: relative;

    width: 100%;

    margin: 0 0 16px;
    padding: 15px 14px 14px;

    overflow: hidden;

    border: 1px solid rgba(0, 67, 107, .14);
    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #f2fbff 0%,
            #ffffff 55%,
            #f7f8ff 100%
        );

    box-shadow:
        0 4px 12px rgba(0, 59, 102, .07);

    transition:
        transform .20s ease,
        border-color .20s ease,
        box-shadow .20s ease;
}


/* Garis aksen biru-kuning di atas kartu */

.jst-sidebar-box::before {
    content: "";

    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;

    height: 2px;

    border-radius: 0 0 4px 4px;

    background:
        linear-gradient(
            90deg,
            #075e9e 0%,
            #1c75bc 45%,
            #ffd43b 78%,
            transparent 100%
        );

    opacity: .82;
}


/* ==========================================================
   6.4 CARD HEADING
   ========================================================== */

.jst-sidebar-heading {
    margin: 0 0 8px;
    padding: 2px 1px 9px;

    border-bottom:
        1px solid rgba(0, 67, 107, .13);

    color: #003b66;

    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.35;

    letter-spacing: .35px;
    text-transform: uppercase;

    overflow-wrap: break-word;
}


/* ==========================================================
   6.5 RESET LIST OJS
   ========================================================== */

.pkp_structure_sidebar
.jst-sidebar-custom ul,
.pkp_structure_sidebar
.jst-sidebar-custom li {

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

    list-style: none !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.jst-sidebar-links {
    width: 100%;

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

    list-style: none !important;
}


/* ==========================================================
   6.6 MENU ITEM
   ========================================================== */

.pkp_structure_sidebar
.jst-sidebar-custom
.jst-sidebar-links > li {

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

    border: 0 !important;
    border-bottom:
        1px solid rgba(0, 67, 107, .075) !important;
}

.pkp_structure_sidebar
.jst-sidebar-custom
.jst-sidebar-links > li:last-child {

    border-bottom: 0 !important;
}


/* ==========================================================
   6.7 MENU LINK
   ========================================================== */

.pkp_structure_sidebar
.jst-sidebar-custom
.jst-sidebar-links > li > a {

    position: relative;

    display: block;

    width: 100%;

    margin: 0;
    padding: 8px 5px 8px 17px;

    border: 0;
    border-radius: 5px;

    color: #075e9e !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;

    text-align: left;
    text-decoration: none !important;

    white-space: normal;

    overflow-wrap: break-word;
    word-break: normal;

    box-shadow: none !important;
    opacity: 1 !important;

    transition:
        color .18s ease,
        background .18s ease,
        padding-left .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


/* ==========================================================
   6.8 GOLD ARROW
   ========================================================== */

.pkp_structure_sidebar
.jst-sidebar-custom
.jst-sidebar-links > li > a::before {

    content: "›";

    position: absolute;

    left: 4px;
    top: 50%;

    transform: translateY(-50%);

    color: #e9a400;

    font-size: 15px;
    font-weight: 800;
    line-height: 1;

    transition:
        left .18s ease,
        color .18s ease;
}


/* ==========================================================
   6.9 DESKTOP HOVER
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

    .jst-sidebar-box:hover {
        transform: translateY(-1px);

        border-color:
            rgba(0, 93, 168, .24);

        box-shadow:
            0 7px 18px rgba(0, 59, 102, .10);
    }


    .pkp_structure_sidebar
    .jst-sidebar-custom
    .jst-sidebar-links > li > a:hover,

    .pkp_structure_sidebar
    .jst-sidebar-custom
    .jst-sidebar-links > li > a:focus {

        padding-left: 21px;

        color: #ffffff !important;

        background:
            linear-gradient(
                90deg,
                #075e9e 0%,
                #086ca9 55%,
                #0b78b7 100%
            ) !important;

        box-shadow:
            0 3px 8px rgba(0, 67, 107, .13) !important;

        outline: none;
    }


    .pkp_structure_sidebar
    .jst-sidebar-custom
    .jst-sidebar-links > li > a:hover::before,

    .pkp_structure_sidebar
    .jst-sidebar-custom
    .jst-sidebar-links > li > a:focus::before {

        left: 7px;

        color: #ffd43b;
    }
}


/* ==========================================================
   6.10 KEYBOARD ACCESSIBILITY
   ========================================================== */

.pkp_structure_sidebar
.jst-sidebar-custom
.jst-sidebar-links > li > a:focus-visible {

    color: #ffffff !important;

    background: #075e9e !important;

    outline: 2px solid #ffd43b;
    outline-offset: 2px;
}

/* ==========================================================
   6.11 NATIONAL ACCREDITATION
   ========================================================== */

.jst-sidebar-accreditation {
    text-align: center;
}

.jst-sidebar-accreditation
.jst-sidebar-heading {

    text-align: left;
}

.jst-sidebar-accreditation > a {
    display: flex;

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

    width: 100%;

    margin: 0;
    padding: 10px 5px 8px;

    color: #003b66 !important;

    background: transparent !important;

    text-align: center;
    text-decoration: none !important;
}

.jst-sidebar-accreditation strong {
    display: block;

    color: #003b66;

    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.45;

    letter-spacing: .05px;

    transition:
        color .18s ease,
        transform .18s ease;
}

@media (hover: hover) and (pointer: fine) {

    .jst-sidebar-accreditation > a:hover strong,
    .jst-sidebar-accreditation > a:focus strong {

        color: #005da8;

        transform: translateY(-1px);
    }
}


/* ==========================================================
   6.12 MAKE A SUBMISSION
   ========================================================== */

.jst-sidebar-submit {
    padding: 8px;
}

.jst-sidebar-submit::before {
    display: none;
}

.jst-sidebar-submit > a {

    display: flex;

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

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

    margin: 0;
    padding: 10px 12px;

    border: 1px solid #00436b;
    border-radius: 7px;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #0871ad 0%,
            #075e9e 50%,
            #00436b 100%
        ) !important;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;

    letter-spacing: .15px;

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

    box-shadow:
        0 4px 10px rgba(0, 59, 102, .16);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

@media (hover: hover) and (pointer: fine) {

    .jst-sidebar-submit > a:hover,
    .jst-sidebar-submit > a:focus {

        transform: translateY(-1px);

        filter: brightness(1.05);

        box-shadow:
            0 6px 15px rgba(0, 59, 102, .22);
    }
}

.jst-sidebar-submit > a:focus-visible {

    outline: 2px solid #ffd43b;
    outline-offset: 2px;
}


/* ==========================================================
   6.13 COLLABORATION
   ========================================================== */

.jst-sidebar-collaboration > a {

    display: flex;

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

    width: 100%;

    margin: 0;

    padding: 10px 4px 3px;

    background: transparent !important;

    text-align: center;
    text-decoration: none !important;
}

.jst-sidebar-collaboration img {

    display: block;

    width: auto;
    max-width: 100%;

    height: auto;
    max-height: 58px;

    margin: 0 auto;

    object-fit: contain;

    transition:
        transform .18s ease,
        opacity .18s ease;
}

@media (hover: hover) and (pointer: fine) {

    .jst-sidebar-collaboration > a:hover img {
        transform: scale(1.025);
        opacity: .94;
    }
}

/* ==========================================================
   6.13B MOBILE / TOUCH ACTIVE FEEDBACK — FINAL
   Indikasi visual saat tombol disentuh pada HP/tablet
   ========================================================== */

@media (hover: none), (pointer: coarse) {

    /* ===== MENU LINK CUSTOM BLOCK ===== */

    .pkp_structure_sidebar
    .jst-sidebar-custom
    .jst-sidebar-links > li > a:active {

        color: #ffffff !important;

        background:
            linear-gradient(
                135deg,
                #0871ad 0%,
                #075e9e 55%,
                #00436b 100%
            ) !important;

        padding-left: 22px !important;

        box-shadow:
            inset 0 2px 5px rgba(0, 0, 0, .12),
            0 3px 8px rgba(0, 67, 107, .14) !important;

        transform: scale(.985);

        transition:
            background .08s ease,
            color .08s ease,
            transform .08s ease,
            padding-left .08s ease;
    }


    /* Panah saat link ditekan */

    .pkp_structure_sidebar
    .jst-sidebar-custom
    .jst-sidebar-links > li > a:active::before {

        left: 8px !important;

        color: #ffd43b !important;
    }


    /* ===== NATIONAL ACCREDITATION ===== */

    .jst-sidebar-accreditation > a:active {

        border-radius: 6px;

        background:
            linear-gradient(
                135deg,
                #e5f6ff 0%,
                #d8effb 100%
            ) !important;

        box-shadow:
            inset 0 2px 5px rgba(0, 59, 102, .08) !important;

        transform: scale(.985);
    }

    .jst-sidebar-accreditation > a:active strong {

        color: #005da8 !important;
    }


    /* ===== MAKE A SUBMISSION ===== */

    .jst-sidebar-submit > a:active {

        color: #003b66 !important;

        background:
            linear-gradient(
                135deg,
                #ffe477 0%,
                #ffd43b 55%,
                #f5bd00 100%
            ) !important;

        border-color: #e5a800 !important;

        transform: scale(.985);

        box-shadow:
            inset 0 2px 5px rgba(0, 0, 0, .10),
            0 2px 6px rgba(0, 59, 102, .12) !important;
    }


    /* ===== COLLABORATION ===== */

    .jst-sidebar-collaboration > a:active {

        border-radius: 6px;

        background:
            rgba(7, 94, 158, .08) !important;

        box-shadow:
            inset 0 2px 5px rgba(0, 59, 102, .07) !important;

        transform: scale(.985);
    }

    .jst-sidebar-collaboration > a:active img {

        transform: scale(.97);
        opacity: .92;
    }
}
/* ==========================================================
   6.14 TABLET
   ========================================================== */

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

    .jst-sidebar-custom {
        font-size: 13.5px;
    }

    .jst-sidebar-box {
        margin-bottom: 13px;

        padding:
            14px
            13px;

        border-radius: 10px;
    }

    .jst-sidebar-heading {
        font-size: 12.5px;
    }

    .pkp_structure_sidebar
    .jst-sidebar-custom
    .jst-sidebar-links > li > a {

        padding:
            8px
            5px
            8px
            17px;

        font-size: 12.5px;
    }
}


/* ==========================================================
   6.15 MOBILE
   Sidebar menjadi lebih nyaman untuk sentuhan
   ========================================================== */

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

    .pkp_structure_sidebar,
    .pkp_structure_sidebar .pkp_block,
    .pkp_structure_sidebar .block_custom,
    .jst-sidebar-custom {

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

    .jst-sidebar-custom {
        margin: 0 !important;
        padding: 0 !important;

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

    .jst-sidebar-box {

        width: 100% !important;

        margin:
            0
            0
            15px !important;

        padding:
            15px
            14px !important;

        border-radius: 11px;

        box-shadow:
            0 4px 12px rgba(0, 59, 102, .07);
    }

    .jst-sidebar-box::before {
        left: 14px;
        right: 14px;
    }

    .jst-sidebar-heading {

        margin-bottom: 8px;

        padding:
            2px
            1px
            10px;

        font-size: 13px;
        line-height: 1.4;
    }

    .pkp_structure_sidebar
    .jst-sidebar-custom
    .jst-sidebar-links > li > a {

        min-height: 42px;

        display: flex;

        align-items: center;

        padding:
            10px
            7px
            10px
            19px;

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

    .pkp_structure_sidebar
    .jst-sidebar-custom
    .jst-sidebar-links > li > a::before {

        left: 5px;

        font-size: 16px;
    }

    .jst-sidebar-accreditation > a {

        min-height: 44px;

        padding:
            10px
            7px;
    }

    .jst-sidebar-accreditation strong {

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

    .jst-sidebar-submit {

        padding: 9px !important;
    }

    .jst-sidebar-submit > a {

        min-height: 46px;

        padding:
            11px
            14px;

        font-size: 13px;
    }

    .jst-sidebar-collaboration img {

        max-height: 64px;
    }
}


/* ==========================================================
   6.16 SMALL MOBILE
   ========================================================== */

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

    .jst-sidebar-box {

        margin-bottom: 13px !important;

        padding:
            14px
            12px !important;

        border-radius: 10px;
    }

    .jst-sidebar-box::before {

        left: 12px;
        right: 12px;
    }

    .jst-sidebar-heading {

        padding-bottom: 9px;

        font-size: 12.5px;
    }

    .pkp_structure_sidebar
    .jst-sidebar-custom
    .jst-sidebar-links > li > a {

        min-height: 42px;

        padding:
            10px
            6px
            10px
            18px;

        font-size: 13px;
        line-height: 1.45;
    }

    .jst-sidebar-accreditation strong {

        font-size: 13px;
    }

    .jst-sidebar-submit > a {

        min-height: 45px;

        font-size: 12.5px;
    }

    .jst-sidebar-collaboration img {

        max-height: 58px;
    }
}


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

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

    .jst-sidebar-box {

        padding:
            13px
            11px !important;
    }

    .jst-sidebar-heading {

        font-size: 12px;
    }

    .pkp_structure_sidebar
    .jst-sidebar-custom
    .jst-sidebar-links > li > a {

        padding:
            10px
            5px
            10px
            17px;

        font-size: 12.5px;
    }

    .jst-sidebar-accreditation strong {

        font-size: 12.5px;
    }
}

/* ==================== 7. FOOTER ==================== */
.pkp_structure_footer_wrapper { background: #003b66 !important; }

.pkp_structure_footer {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

.ceddi-footer,
.ceddi-footer * { box-sizing: border-box; }

.ceddi-footer {
    width: 100%;
    padding: 34px 30px 22px;
    color: #fff;
    background: #003b66;
}

.ceddi-footer-grid {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(280px,.8fr);
    gap: 45px;
    align-items: start;
}

.ceddi-footer-heading {
    margin: 0 0 13px;
    padding-bottom: 9px;
    border-bottom: 2px solid rgba(255,212,59,.85);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.ceddi-footer-name {
    margin-bottom: 8px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
}

.ceddi-footer-address,
.ceddi-footer-email {
    margin: 0 0 9px !important;
    color: #f2f6f9 !important;
    font-size: 14px;
    line-height: 1.7;
}

.ceddi-footer a { color: #ffd43b; text-decoration: none; }
.ceddi-footer a:hover,
.ceddi-footer a:focus { color: #fff; text-decoration: underline; }

.ceddi-footer-separator { margin: 0 7px; color: rgba(255,255,255,.5); }

.ceddi-flagcounter { margin-bottom: 12px; }
.ceddi-flagcounter img,
.ceddi-statcounter img { display: block; max-width: 100%; height: auto; border: 0; }

.ceddi-statcounter {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

.ceddi-index-text {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.ceddi-index-text a {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border: 1px solid rgba(255,212,59,.55);
    border-radius: 5px;
    color: #ffd43b !important;
    background: rgba(255,255,255,.05);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none !important;
    transition: background-color .18s ease, color .18s ease,
                border-color .18s ease, transform .18s ease !important;
}

.ceddi-index-text a:hover,
.ceddi-index-text a:focus-visible {
    color: #003b66 !important;
    background: #ffd43b !important;
    border-color: #ffd43b !important;
    transform: translateY(-2px);
}

.ceddi-footer-identification {
    width: 100%;
    margin-top: 26px;
}

.ceddi-footer-identification p {
    margin: 0 !important;
    color: #f2f6f9 !important;
    font-size: 14px;
    line-height: 1.7;
}

.ceddi-footer-identification a {
    color: #ffd43b !important;
    font-weight: 600;
    text-decoration: none !important;
}

.ceddi-footer-license {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: 27px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.22);
}

.ceddi-footer-license > a { flex: 0 0 auto; line-height: 0; }

.ceddi-footer-license img {
    display: block;
    width: 88px;
    height: 31px;
}

.ceddi-footer-license p {
    margin: 0 !important;
    color: #eef4f8 !important;
    font-size: 13px;
    line-height: 1.65;
}

/* ==================== 8. TABLET / MOBILE ==================== */
@media screen and (max-width: 992px) {
    /* Header tetap mengikuti tinggi gambar/teks */
    .pkp_structure_head,
    .pkp_head_wrapper,
    .pkp_site_name_wrapper,
    .pkp_site_name {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    .pkp_site_name .is_img,
    .pkp_site_name .is_img > a,
    .pkp_site_name .is_img img,
    .pkp_site_name img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
    }

    .pkp_site_name:not(:has(img)) {
        min-height: 0 !important;
        padding: 22px 70px !important;
    }

    .pkp_site_name:not(:has(img)) > a,
    .pkp_site_name:not(:has(img)) .is_text {
        max-width: 100% !important;
        font-size: clamp(22px,4vw,34px) !important;
        line-height: 1.25 !important;
    }

    /* Hamburger tunggal: tiga garis dari background-image */
    .pkp_site_nav_toggle {
        display: block !important;
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        z-index: 9999 !important;
        width: 48px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(255,255,255,.65) !important;
        border-radius: 7px !important;
        background-color: #00436b !important;
        background-image:
            linear-gradient(#fff,#fff),
            linear-gradient(#fff,#fff),
            linear-gradient(#fff,#fff) !important;
        background-repeat: no-repeat !important;
        background-size: 25px 3px,25px 3px,25px 3px !important;
        background-position: center 12px,center 20px,center 28px !important;
        color: transparent !important;
        font-size: 0 !important;
        text-indent: -9999px !important;
        opacity: 1 !important;
        box-shadow: 0 3px 8px rgba(0,0,0,.25) !important;
    }

    .pkp_site_nav_toggle > span,
    .pkp_site_nav_toggle > span::before,
    .pkp_site_nav_toggle > span::after { display: none !important; }

    /* Menu tertutup tidak mengambil ruang */
    .pkp_site_nav_menu:not(.pkp_site_nav_menu--isOpen) {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .pkp_navigation_primary_row {
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Menu terbuka */
    .pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 12px 18px 18px !important;
        background: #003b66 !important;
    }

    .pkp_site_nav_menu--isOpen .pkp_navigation_primary_row {
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    .pkp_navigation_primary {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

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

    .pkp_navigation_primary > li + li {
        border-top: 1px solid rgba(255,255,255,.13) !important;
    }

    .pkp_navigation_primary > li > a,
    .pkp_navigation_primary > li > button {
        display: block !important;
        width: 100% !important;
        padding: 16px 18px !important;
        color: #fff !important;
        background: transparent !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        text-align: left !important;
    }

    /* Mobile submenu */
    .pkp_navigation_primary ul,
    .pkp_navigation_primary .dropdown-menu,
    .pkp_navigation_primary .dropdown-menu ul {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        min-width: 100% !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 5px !important;
        background: #0c3558 !important;
        box-shadow: none !important;
    }

    .pkp_navigation_primary ul li,
    .pkp_navigation_primary .dropdown-menu li {
        width: 100% !important;
        border: 0 !important;
        background: #0c3558 !important;
    }

    .pkp_navigation_primary ul li + li,
    .pkp_navigation_primary .dropdown-menu li + li {
        border-top: 1px solid rgba(255,255,255,.14) !important;
    }

    .pkp_navigation_primary ul li a,
    .pkp_navigation_primary ul a,
    .pkp_navigation_primary .dropdown-menu li a,
    .pkp_navigation_primary .dropdown-menu a,
    .pkp_nav_list ul li a,
    .pkp_nav_list ul a {
        min-height: 46px !important;
        padding: 13px 18px 13px 32px !important;
        border: 0 !important;
        color: #fff !important;
        background: #0c3558 !important;
        font-size: 14px !important;
    }

    .pkp_navigation_primary ul li a:hover,
    .pkp_navigation_primary ul li a:focus,
    .pkp_navigation_primary .dropdown-menu li a:hover,
    .pkp_navigation_primary .dropdown-menu li a:focus {
        color: #fff !important;
        background: #f28c00 !important;
    }

    .pkp_navigation_search_wrapper {
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 14px !important;
        border: 0 !important;
        border-top: 1px solid rgba(255,255,255,.13) !important;
        text-align: center !important;
        box-shadow: none !important;
    }

    /* Mobile user buttons */
    .pkp_navigation_user {
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 14px 0 0 !important;
        padding: 0 18px 18px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .pkp_navigation_user > li {
        width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .pkp_navigation_user > li > a {
        width: 100% !important;
        min-height: 48px !important;
        padding: 11px 14px !important;
        font-size: 15px !important;
        text-align: center !important;
        box-shadow: none !important;
    }

    .pkp_navigation_user ul,
    .pkp_navigation_user .dropdown-menu {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        grid-column: 1/-1 !important;
        width: 100% !important;
        min-width: 100% !important;
        margin-top: 8px !important;
    }

    /* Main + sidebar */
    .pkp_structure_content {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .pkp_structure_main {
        display: block !important;
        order: 1 !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .pkp_structure_sidebar {
        display: block !important;
        order: 2 !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 25px 0 0 !important;
        padding: 0 18px 30px !important;
    }

    .pkp_structure_sidebar .pkp_block,
    .pkp_structure_sidebar [class*="block_"],
    .pkp_structure_sidebar .block_custom {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* ==================== 9. MOBILE FOOTER ==================== */
@media screen and (max-width: 767px) {
    .pkp_site_name:not(:has(img)) {
        padding: 18px 20px 18px 68px !important;
        text-align: left !important;
    }

    .pkp_site_name:not(:has(img)) > a,
    .pkp_site_name:not(:has(img)) .is_text {
        font-size: clamp(20px,5.5vw,27px) !important;
        text-align: left !important;
    }

    .ceddi-footer { padding: 28px 22px 24px !important; }
    .ceddi-footer-grid { display: block !important; }

    .ceddi-footer-publisher,
    .ceddi-footer-stats {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ceddi-footer-publisher { margin-bottom: 32px !important; }
    .ceddi-footer-heading { font-size: 15px !important; }
    .ceddi-footer-name { font-size: 14px !important; }

    .ceddi-footer-address,
    .ceddi-footer-email {
        font-size: 13px !important;
        line-height: 1.7 !important;
        text-align: left !important;
    }

    .ceddi-footer-separator { display: none; }
    .ceddi-footer-email a { display: block; margin-top: 4px; }

    .ceddi-statcounter img {
        width: auto !important;
        max-width: 121px !important;
    }

    .ceddi-index-text { gap: 6px; }
    .ceddi-index-text a { padding: 6px 9px; font-size: 12px; }

    .ceddi-footer-identification {
        margin-top: 28px !important;
    }

    .ceddi-footer-identification p {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

    .ceddi-footer-license {
        align-items: flex-start !important;
        gap: 13px !important;
    }

    .ceddi-footer-license p {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
        text-align: left !important;
    }
}

/* ==================== 10. HP KECIL ==================== */
@media screen and (max-width: 480px) {
    .ceddi-footer { padding: 25px 18px 23px !important; }
    .ceddi-footer-email { overflow-wrap: anywhere !important; }
    .ceddi-footer-identification p { font-size: 12.5px !important; }

    .ceddi-footer-license { display: block !important; }

    .ceddi-footer-license > a {
        display: block !important;
        width: max-content !important;
        margin: 0 0 11px !important;
    }

    .ceddi-footer-license p {
        width: 100% !important;
        font-size: 12px !important;
        line-height: 1.65 !important;
    }
}

@media screen and (max-width: 380px) {
    .pkp_site_name:not(:has(img)) {
        padding: 16px 15px 16px 64px !important;
    }

    .pkp_site_name:not(:has(img)) > a,
    .pkp_site_name:not(:has(img)) .is_text {
        font-size: 19px !important;
    }

    .pkp_site_nav_menu {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    .pkp_navigation_user {
        grid-template-columns: 1fr !important;
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
}

/* ==================== 11. ACCESSIBILITY ==================== */
@media (prefers-reduced-motion: reduce) {

    .jst-card,
    .jst-read-more,
    .jst-section-card,
    .jst-sidebar-box,
    .jst-sidebar-custom a,
    .jst-sidebar-custom img,
    .pkp_navigation_user > li > a,
    .block_make_submission a,
    .cmp_manuscript_button,
    .obj_galley_link {

        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
}