/* ==========================================================
   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 SECTION / GRADIENT MODEL
   ========================================================== */

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


/* ==================== MAIN PROFILE ==================== */

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

    color: #2a2a2a;
    background: transparent;

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


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

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

    width: 100%;

    gap: 30px;
}


/* ==================== UNIVERSAL SECTION CARD ==================== */

.jst-section-card {
    position: relative;

    width: 100%;
    margin: 0;

    padding: 32px 36px 34px;

    overflow: hidden;

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

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

    box-shadow:
        0 16px 38px rgba(0, 59, 102, 0.08),
        0 3px 10px rgba(0, 59, 102, 0.04);

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


/* Garis gradient halus di atas card */

.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 hanya desktop */

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

    .jst-section-card:hover {
        transform: translateY(-2px);

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

        box-shadow:
            0 20px 45px rgba(0, 59, 102, 0.11),
            0 4px 12px rgba(0, 59, 102, 0.05);
    }
}


/* ==================== SUMMARY CARD ==================== */

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


/* ==================== DETAILS CARD ==================== */

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


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

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

    border-bottom: 1px solid rgba(0, 67, 107, 0.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, 0.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-family:
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 30px;
    font-weight: 750;

    line-height: 1.25;

    letter-spacing: -.4px;
}


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

.jst-profile p,
.jst-summary p,
.jst-details 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-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 {
    margin: 28px 0 0;

    padding: 0;

    overflow: hidden;

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

    background:
        linear-gradient(
            135deg,
            rgba(235, 248, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.98) 100%
        );

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


/* Judul Journal Identification */

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

    border-bottom: 1px solid rgba(28, 117, 188, 0.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-details .jst-info-box ul {
    margin: 0;

    padding: 22px 25px 22px 45px;

    border: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;
}


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

    padding-left: 3px;

    color: #252525;

    line-height: 1.65;

    overflow-wrap: anywhere;
}


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


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


.jst-label {
    color: #003b66;

    font-weight: 750;
}


/* ==================== OPTIONAL LEGACY TITLE ==================== */

.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;
}


/* ==================== LEGACY WHY US SUPPORT ==================== */

.jst-why-us {
    width: 100%;

    margin-top: 40px;

    padding-top: 30px;

    border-top: 3px solid #1c75bc;
}


.jst-section-title {
    margin: 0 0 27px;

    color: #003b66;

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

    font-size: 31px;
    font-weight: 700;

    line-height: 1.3;

    text-align: center;
}


.jst-section-title::after {
    display: block;

    width: 65px;
    height: 4px;

    margin: 11px auto 0;

    border-radius: 5px;

    background: #f4c430;

    content: "";
}


/* ==================== LEGACY CARD SUPPORT ==================== */

.jst-card-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 22px;

    align-items: stretch;
}


.jst-card {
    display: flex;

    height: 100%;

    overflow: hidden;

    border: 1px solid #dce4ea;
    border-radius: 11px;

    background: #fff;

    box-shadow:
        0 5px 17px rgba(0,59,102,.10);

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


.jst-card:hover {
    transform: translateY(-3px);

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


.jst-card-open {
    border-top: 5px solid #159957;
}


.jst-card-review {
    border-top: 5px solid #1c75bc;
}


.jst-card-body {
    display: flex;

    flex-direction: column;

    width: 100%;

    padding: 24px;
}


.jst-card-title {
    margin: 0 0 14px;

    color: #003b66;

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

    font-size: 23px;
    font-weight: 700;

    line-height: 1.35;
}


.jst-card-text {
    margin: 0 0 17px;

    color: #2a2a2a;

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

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


.jst-read-more {
    display: inline-block;

    align-self: flex-start;

    margin-top: auto;

    padding: 10px 18px;

    border-radius: 6px;

    color: #fff !important;

    background: #005da8;

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

    line-height: 1.4;

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


.jst-read-more:hover,
.jst-read-more:focus {
    color: #fff !important;

    background: #003b66;
}


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

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

    .jst-profile {
        width: 100% !important;

        padding:
            28px
            18px
            36px !important;

        font-size: 15.5px !important;

        line-height: 1.7 !important;
    }


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


    .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-card-text {
        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-details .jst-info-box ul {
        padding:
            20px
            22px
            20px
            41px;
    }
}


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

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

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


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


    .jst-section-card {
        padding:
            24px
            21px
            26px !important;

        border-radius: 18px !important;
    }


    .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-details .jst-info-box ul {
        padding:
            19px
            17px
            19px
            35px;
    }


    .jst-details .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
            29px !important;
    }


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


    .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 {
        font-size: 15px !important;

        line-height: 1.68 !important;
    }


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


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


    .jst-details .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 CLEAN
   ========================================================== */

.pkp_structure_sidebar {
    box-sizing: border-box;
}

.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .block_custom {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

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

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

.jst-sidebar-custom {
    width: 100%;
    margin: 0;
    padding: 0;

    color: #263746;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
}

/* ==================== CARD ==================== */

.jst-sidebar-box {
    position: relative;

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

    overflow: hidden;

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

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

    box-shadow:
        0 5px 14px rgba(0, 59, 102, .07);

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

/* garis aksen atas */

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

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

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #075e9e,
            #f0a500,
            transparent
        );

    opacity: .65;
}

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

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

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

    color: #003b66;

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

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

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

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

    list-style: none !important;
}

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

    list-style: none !important;

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

.jst-sidebar-links li:last-child {
    border-bottom: 0;
}

/* ==================== LINK ==================== */

.jst-sidebar-links a {
    position: relative;

    display: block;

    width: 100%;

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

    border: 0;
    border-radius: 5px;

    color: #075e9e !important;

    /* PENTING:
       jangan biru penuh pada keadaan normal */
    background: transparent !important;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none !important;

    overflow-wrap: anywhere;

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

/* panah kuning */

.jst-sidebar-links a::before {
    content: "›";

    position: absolute;
    left: 4px;
    top: 50%;

    transform: translateY(-50%);

    color: #f0a500;

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

/* ==================== CARD HOVER ==================== */

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

    .jst-sidebar-box:hover {
        border-color: rgba(0, 93, 168, .23);

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

/* ==================== SINTA ==================== */

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

.jst-sidebar-accreditation .jst-sidebar-heading {
    text-align: left;
}

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

    padding: 9px 6px;

    color: #075e9e !important;
    background: transparent !important;

    text-decoration: none !important;
}

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

    color: #003b66;

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

/* ==================== SUBMISSION ==================== */

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

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

.jst-sidebar-submit > a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    padding: 11px 12px;

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

    color: #ffffff !important;

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

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

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

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

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

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

    .jst-sidebar-submit > a:hover {
        transform: translateY(-1px);

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

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

.jst-sidebar-collaboration > a {
    display: block;

    padding: 8px 4px 2px;

    background: transparent !important;

    text-align: center;
}

.jst-sidebar-collaboration img {
    display: block;

    width: auto;
    max-width: 100%;
    max-height: 55px;

    margin: 0 auto;

    object-fit: contain;
}

/* ==========================================================
   RESET OJS — SIDEBAR JST FINAL
   ========================================================== */

.pkp_structure_sidebar
.jst-sidebar-custom ul {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.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;
}

/* ==========================================================
   LINK MENU — KONDISI NORMAL
   ========================================================== */

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

    position: relative !important;
    display: block !important;

    width: 100% !important;

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

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

    color: #075e9e !important;

    /* HAPUS LATAR BIRU LAMA */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;

    text-decoration: none !important;

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

    overflow-wrap: anywhere !important;

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

/* ==========================================================
   GARIS PEMISAH MENU
   ========================================================== */

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

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

.pkp_structure_sidebar
.jst-sidebar-custom
.jst-sidebar-links > li:last-child {
    border-bottom: 0 !important;
}

/* ==========================================================
   PANAH KUNING
   ========================================================== */

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

    content: "›" !important;

    position: absolute !important;

    left: 4px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    color: #f0a500 !important;

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

/* ==========================================================
   HOVER DESKTOP
   Biru hanya muncul ketika mouse diarahkan
   ========================================================== */

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

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

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

        padding-left: 21px !important;

        color: #ffffff !important;

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

        background-color: #075e9e !important;

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

        outline: none !important;
    }

    .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 !important;
        color: #ffd43b !important;
    }
}

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

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

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

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

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

    .jst-sidebar-custom {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .jst-sidebar-box {
        width: 100% !important;

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

        border-radius: 11px;
    }

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

    .jst-sidebar-links a {
        padding-top: 9px;
        padding-bottom: 9px;

        font-size: 13px;
    }

    .jst-sidebar-submit {
        padding: 10px !important;
    }
}

/* ==================== HP KECIL ==================== */

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

    .jst-sidebar-box {
        padding: 13px !important;
    }

    .jst-sidebar-links a {
        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,
    .pkp_navigation_user > li > a,
    .block_make_submission a,
    .cmp_manuscript_button,
    .obj_galley_link,
    .pkp_structure_sidebar .block_custom a,
    .pkp_structure_sidebar .block_custom img {
        transition: none !important;
        transform: none !important;
    }
}