/**
 * Custom CSS - OJS 3.3.0 Universitas Ekuitas
 * Tema Modern & Elegan
 * Upload via: Administration > Site Settings > Appearance > Site Style Sheet
 */

/* ============================================================
   GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ============================================================
   CSS VARIABLES - PALET WARNA
   ============================================================ */
:root {
    /* Warna Utama — Deep Navy & Gold */
    --primary:        #1B2B4B;   /* Navy gelap */
    --primary-light:  #2C4270;   /* Navy sedang */
    --primary-dark:   #0F1A2E;   /* Navy sangat gelap */
    --accent:         #C9A84C;   /* Gold elegan */
    --accent-light:   #E8C97A;   /* Gold muda */
    --accent-dark:    #9E7A2A;   /* Gold tua */

    /* Warna Netral */
    --white:          #FFFFFF;
    --off-white:      #F8F7F4;
    --light-gray:     #F0EDE8;
    --mid-gray:       #C8C2B8;
    --dark-gray:      #4A4540;
    --text-dark:      #1A1714;
    --text-muted:     #6B6560;

    /* Tipografi */
    --font-display:   'Playfair Display', Georgia, serif;
    --font-body:      'DM Sans', 'Segoe UI', sans-serif;

    /* Efek */
    --shadow-sm:      0 2px 8px rgba(27,43,75,0.08);
    --shadow-md:      0 4px 20px rgba(27,43,75,0.12);
    --shadow-lg:      0 8px 40px rgba(27,43,75,0.16);
    --radius-sm:      4px;
    --radius-md:      8px;
    --radius-lg:      16px;
    --transition:     all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--text-dark);
    background-color: var(--off-white);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   SEMBUNYIKAN LOGO PKP / POWERED BY PKP
   ============================================================ */
.pkp_brand_footer,
.pkp_brand,
a[href*="pkp.sfu.ca"],
a[href*="pkp.sfu"],
img[src*="pkp"],
img[alt*="PKP"],
img[alt*="Public Knowledge"],
.pkp_footer_logo,
[class*="pkp_brand"],
.footer .pkp_brand_footer,
.pkp_structure_footer .pkp_brand,
p:has(a[href*="pkp.sfu.ca"]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ============================================================
   HEADER / SITE NAME
   ============================================================ */
.pkp_head_wrapper,
#pkp_nav_list ~ .pkp_head_wrapper,
.cmp_header {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
    border-bottom: 3px solid var(--accent);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

/* Efek dekoratif header */
.pkp_head_wrapper::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(201,168,76,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.pkp_head_wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* Site name / judul jurnal */
.pkp_site_name,
.pkp_site_name a,
.cmp_header .pkp_site_name {
    font-family: var(--font-display) !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: var(--white) !important;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: var(--transition);
}

.pkp_site_name a:hover {
    color: var(--accent-light) !important;
}

/* ============================================================
   NAVIGASI UTAMA
   ============================================================ */
.pkp_navigation_primary,
.pkp_nav_list,
nav.pkp_navigation_primary {
    background: transparent !important;
    border: none !important;
}

.pkp_navigation_primary ul,
.pkp_nav_list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pkp_navigation_primary > ul > li > a,
.pkp_nav_list > li > a,
.pkp_navigation_primary .pkp_nav_list > li > a {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: var(--primary-dark) !important;   /* biru dongker */
    text-decoration: none !important;
    padding: 8px 16px !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: var(--transition);
    border-bottom: 2px solid transparent;
    display: inline-block;
    text-shadow: none !important;
}

.pkp_navigation_primary > ul > li > a:hover,
.pkp_nav_list > li > a:hover {
    color: var(--accent-dark) !important;   /* gold tua saat hover */
    border-bottom-color: var(--accent);
}

/* Dropdown menu */
.pkp_navigation_primary .pkp_dropdown,
.pkp_nav_list .pkp_dropdown {
    background: var(--primary-dark) !important;
    border: 1px solid rgba(201,168,76,0.2) !important;
    border-top: 2px solid var(--accent) !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
}

.pkp_navigation_primary .pkp_dropdown a,
.pkp_nav_list .pkp_dropdown a {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.85rem !important;
    padding: 10px 20px !important;
    transition: var(--transition);
    border-left: 3px solid transparent;
}

.pkp_navigation_primary .pkp_dropdown a:hover,
.pkp_nav_list .pkp_dropdown a:hover {
    background: rgba(201,168,76,0.1) !important;
    color: var(--accent-light) !important;
    border-left-color: var(--accent);
}

/* Navigasi user (login/register) */
.pkp_navigation_user,
.pkp_nav_list_user {
    background: transparent !important;
}

.pkp_navigation_user a,
.pkp_nav_list_user a {
    color: var(--primary-dark) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    transition: var(--transition);
}

.pkp_navigation_user a:hover,
.pkp_nav_list_user a:hover {
    color: var(--accent-dark) !important;
}

/* ============================================================
   KONTEN UTAMA
   ============================================================ */
.pkp_structure_main,
#pkp_content_main,
.pkp_main {
    background: var(--off-white);
    min-height: 60vh;
}

/* Page header (judul halaman) */
.pkp_page_header,
h1.pkp_page_title,
.pkp_page_title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    font-size: 2rem !important;
    letter-spacing: -0.3px;
    line-height: 1.3;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--accent);
    margin-bottom: 32px !important;
}

h2, h3, h4 {
    font-family: var(--font-display) !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
}

h2 { font-size: 1.6rem !important; }
h3 { font-size: 1.3rem !important; }
h4 { font-size: 1.1rem !important; }

p, li, td, th, span, div {
    font-family: var(--font-body);
}

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

a:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

/* ============================================================
   CARDS / KOTAK ARTIKEL
   ============================================================ */
.obj_article_summary,
.pkp_structure_main .pkp_helpers_clear,
.listPanel__item,
.pkp_listing_item {
    background: var(--white) !important;
    border: 1px solid var(--light-gray) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    transition: var(--transition);
    border-left: 4px solid transparent !important;
}

.obj_article_summary:hover,
.listPanel__item:hover {
    box-shadow: var(--shadow-md) !important;
    border-left-color: var(--accent) !important;
    transform: translateY(-2px);
}

/* Judul artikel */
.obj_article_summary .title a,
.obj_article_summary h3 a,
.pkp_listing_item .title a {
    font-family: var(--font-display) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--primary) !important;
    text-decoration: none !important;
    line-height: 1.4;
    transition: var(--transition);
}

.obj_article_summary .title a:hover,
.pkp_listing_item .title a:hover {
    color: var(--accent-dark) !important;
}

/* Author name */
.obj_article_summary .authors,
.pkp_listing_item .authors {
    color: var(--text-muted) !important;
    font-size: 0.875rem !important;
    font-style: italic;
    margin-top: 6px;
}

/* ============================================================
   TOMBOL / BUTTONS
   ============================================================ */
.pkp_button,
.btn,
button,
input[type="submit"],
input[type="button"],
.pkp_linkaction_addItem,
a.pkp_button {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.3px;
    border-radius: var(--radius-sm) !important;
    transition: var(--transition) !important;
    cursor: pointer;
}

/* Tombol Primer */
.pkp_button_primary,
.btn-primary,
input[type="submit"],
.submitFormButton {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;
    color: var(--white) !important;
    border: none !important;
    padding: 10px 24px !important;
    box-shadow: 0 2px 8px rgba(27,43,75,0.25) !important;
}

.pkp_button_primary:hover,
.btn-primary:hover,
input[type="submit"]:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%) !important;
    box-shadow: 0 4px 16px rgba(27,43,75,0.35) !important;
    transform: translateY(-1px);
    color: var(--white) !important;
}

/* Tombol Aksen (Gold) */
.pkp_button_offset,
.btn-default,
.pkp_linkaction {
    background: transparent !important;
    color: var(--primary) !important;
    border: 1.5px solid var(--primary) !important;
    padding: 9px 22px !important;
}

.pkp_button_offset:hover,
.btn-default:hover {
    background: var(--primary) !important;
    color: var(--white) !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.pkp_sidebar,
.pkp_structure_sidebar,
aside.pkp_structure_sidebar {
    background: transparent !important;
}

/* Widget sidebar */
.pkp_block,
.block,
.pkp_sidebar .pkp_block {
    background: var(--white) !important;
    border: 1px solid var(--light-gray) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: 20px !important;
    overflow: hidden;
}

/* Header widget sidebar */
.pkp_block .title,
.pkp_block h2,
.pkp_block h3 {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;
    color: var(--white) !important;
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    border-bottom: 2px solid var(--accent) !important;
}

.pkp_block .content,
.pkp_block ul {
    padding: 16px !important;
}

.pkp_block ul li {
    border-bottom: 1px solid var(--light-gray);
    padding: 8px 0;
    font-size: 0.875rem;
}

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

.pkp_block a {
    color: var(--primary-light) !important;
    transition: var(--transition);
}

.pkp_block a:hover {
    color: var(--accent-dark) !important;
    padding-left: 4px;
}

/* ============================================================
   ISSUE / TERBITAN
   ============================================================ */
.obj_issue_summary,
.pkp_issue_listing {
    background: var(--white) !important;
    border: 1px solid var(--light-gray) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 20px 24px !important;
    margin-bottom: 16px !important;
    transition: var(--transition);
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.obj_issue_summary:hover {
    box-shadow: var(--shadow-md) !important;
    border-color: var(--accent) !important;
}

.obj_issue_summary .title a {
    font-family: var(--font-display) !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--primary) !important;
    text-decoration: none !important;
}

.obj_issue_summary .title a:hover {
    color: var(--accent-dark) !important;
}

/* Cover image issue */
.obj_issue_summary .cover img {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--light-gray);
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.pkp_breadcrumbs,
.breadcrumb,
ol.pkp_breadcrumbs {
    background: var(--light-gray) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 16px !important;
    font-size: 0.82rem !important;
    margin-bottom: 24px !important;
    border-left: 3px solid var(--accent) !important;
}

.pkp_breadcrumbs a,
.breadcrumb a {
    color: var(--primary-light) !important;
    font-weight: 500;
}

.pkp_breadcrumbs a:hover {
    color: var(--accent-dark) !important;
}

.pkp_breadcrumbs .current,
.breadcrumb-item.active {
    color: var(--text-muted) !important;
}

/* ============================================================
   FORM & INPUT
   ============================================================ */
.pkp_form input[type="text"],
.pkp_form input[type="email"],
.pkp_form input[type="password"],
.pkp_form input[type="search"],
.pkp_form textarea,
.pkp_form select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    border: 1.5px solid var(--mid-gray) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 14px !important;
    background: var(--white) !important;
    color: var(--text-dark) !important;
    transition: var(--transition);
    width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(27,43,75,0.1) !important;
}

label {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    color: var(--text-dark) !important;
    margin-bottom: 6px !important;
    display: block;
}

/* ============================================================
   TABEL
   ============================================================ */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

table thead {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
}

table thead th {
    padding: 14px 16px !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--white) !important;
    border: none !important;
}

table tbody tr {
    border-bottom: 1px solid var(--light-gray);
    transition: var(--transition);
}

table tbody tr:hover {
    background: rgba(27,43,75,0.03);
}

table tbody td {
    padding: 12px 16px !important;
    color: var(--text-dark) !important;
    vertical-align: middle;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pkp_nav_page,
.pagination,
ul.pagination {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 32px 0 !important;
    flex-wrap: wrap;
}

.pkp_nav_page a,
.pagination li a,
.pagination .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border: 1.5px solid var(--mid-gray) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--primary) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: var(--transition);
    background: var(--white);
}

.pkp_nav_page a:hover,
.pagination li a:hover {
    background: var(--primary) !important;
    color: var(--white) !important;
    border-color: var(--primary) !important;
}

.pkp_nav_page .current,
.pagination .active a,
.pagination .active .page-link {
    background: var(--accent) !important;
    color: var(--white) !important;
    border-color: var(--accent) !important;
    font-weight: 600 !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.pkp_structure_footer,
footer,
.pkp_footer {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%) !important;
    border-top: 3px solid var(--accent) !important;
    color: rgba(255,255,255,0.8) !important;
    padding: 40px 0 20px !important;
    margin-top: 60px !important;
}

.pkp_structure_footer a,
footer a {
    color: var(--accent-light) !important;
    text-decoration: none !important;
    transition: var(--transition);
}

.pkp_structure_footer a:hover,
footer a:hover {
    color: var(--white) !important;
    text-decoration: underline !important;
}

.pkp_structure_footer p,
footer p {
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.875rem !important;
    line-height: 1.6;
}

/* Footer copyright */
.pkp_footer_context_info,
.pkp_footer_site_info {
    font-size: 0.82rem !important;
    color: rgba(255,255,255,0.55) !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
}

/* ============================================================
   GALLEY LINKS (PDF, HTML, dll)
   ============================================================ */
.pkp_galley_link,
.obj_galley_link,
a.obj_galley_link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: var(--transition);
    margin: 2px !important;
}

.pkp_galley_link.pdf,
a.obj_galley_link[href*="pdf"],
a.obj_galley_link.pdf {
    background: rgba(201,168,76,0.12) !important;
    color: var(--accent-dark) !important;
    border: 1.5px solid var(--accent) !important;
}

.pkp_galley_link.pdf:hover,
a.obj_galley_link.pdf:hover {
    background: var(--accent) !important;
    color: var(--white) !important;
}

.pkp_galley_link.html,
a.obj_galley_link.html {
    background: rgba(27,43,75,0.08) !important;
    color: var(--primary) !important;
    border: 1.5px solid var(--primary) !important;
}

.pkp_galley_link.html:hover,
a.obj_galley_link.html:hover {
    background: var(--primary) !important;
    color: var(--white) !important;
}

/* ============================================================
   NOTIFICATION / PESAN
   ============================================================ */
.pkp_notification,
.notifySuccess,
.notifyWarning,
.notifyError,
.notifyInfo {
    border-radius: var(--radius-sm) !important;
    padding: 14px 20px !important;
    font-size: 0.9rem !important;
    border: none !important;
    margin-bottom: 16px !important;
}

.notifySuccess {
    background: #E8F5E9 !important;
    color: #2E7D32 !important;
    border-left: 4px solid #43A047 !important;
}

.notifyError {
    background: #FFEBEE !important;
    color: #C62828 !important;
    border-left: 4px solid #E53935 !important;
}

.notifyWarning {
    background: #FFF8E1 !important;
    color: #E65100 !important;
    border-left: 4px solid #FFA000 !important;
}

.notifyInfo {
    background: #E3F2FD !important;
    color: #1565C0 !important;
    border-left: 4px solid #1976D2 !important;
}

/* ============================================================
   SEARCH BAR
   ============================================================ */
.pkp_form_search,
.search_input,
.search-input {
    position: relative;
}

.pkp_form_search input,
input[type="search"] {
    padding-left: 40px !important;
    border-radius: 24px !important;
    border: 1.5px solid var(--mid-gray) !important;
    background: var(--white) !important;
    transition: var(--transition);
}

.pkp_form_search input:focus,
input[type="search"]:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(27,43,75,0.1) !important;
}

/* ============================================================
   HIGHLIGHT / BADGE
   ============================================================ */
.pkp_tag,
.badge,
.label {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: rgba(27,43,75,0.08);
    color: var(--primary);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .pkp_site_name,
    .pkp_site_name a {
        font-size: 1.2rem !important;
    }

    h1.pkp_page_title,
    .pkp_page_title {
        font-size: 1.5rem !important;
    }

    .obj_issue_summary {
        flex-direction: column !important;
    }

    .pkp_block .title,
    .pkp_block h2,
    .pkp_block h3 {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .pkp_navigation_primary > ul > li > a,
    .pkp_nav_list > li > a {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }

    table thead th,
    table tbody td {
        padding: 10px 12px !important;
        font-size: 0.82rem !important;
    }
}

/* ============================================================
   ANIMASI HALUS
   ============================================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pkp_structure_main,
.obj_article_summary,
.obj_issue_summary {
    animation: fadeInUp 0.4s ease forwards;
}

/* Stagger untuk list artikel */
.obj_article_summary:nth-child(1) { animation-delay: 0.05s; }
.obj_article_summary:nth-child(2) { animation-delay: 0.10s; }
.obj_article_summary:nth-child(3) { animation-delay: 0.15s; }
.obj_article_summary:nth-child(4) { animation-delay: 0.20s; }
.obj_article_summary:nth-child(5) { animation-delay: 0.25s; }

/* ============================================================
   SCROLL BAR KUSTOM
   ============================================================ */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--light-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* ============================================================
   SELECTION WARNA
   ============================================================ */
::selection {
    background: var(--accent);
    color: var(--white);
}

::-moz-selection {
    background: var(--accent);
    color: var(--white);
}

/* ============================================================
   FIX MOBILE MENU (hamburger/garis tiga)
   ============================================================ */

/* Tombol hamburger visible di mobile */
.pkp_navigation_primary button,
.pkp_nav_list button,
button.pkp_nav_toggle,
.pkp_nav_toggle,
#navigationPrimary button,
[class*="nav"] button[aria-expanded] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--white) !important;
    font-size: 1.5rem !important;
    padding: 8px !important;
    z-index: 9999 !important;
}

/* Mobile nav container */
@media (max-width: 992px) {

    /* Pastikan nav wrapper tidak overflow hidden di mobile */
    .pkp_head_wrapper,
    .cmp_header {
        overflow: visible !important;
    }

    /* Container navigasi mobile */
    .pkp_navigation_primary,
    nav.pkp_navigation_primary {
        position: relative !important;
        overflow: visible !important;
        z-index: 9998 !important;
    }

    /* Menu ul saat collapsed (default tersembunyi di mobile) */
    .pkp_navigation_primary > ul,
    .pkp_nav_list {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: var(--primary-dark) !important;
        border-top: 2px solid var(--accent) !important;
        box-shadow: var(--shadow-lg) !important;
        z-index: 9999 !important;
        padding: 8px 0 !important;
        margin: 0 !important;
        flex-direction: column !important;
    }

    /* Menu ul saat expanded (show class ditambah JS OJS) */
    .pkp_navigation_primary > ul.in,
    .pkp_navigation_primary > ul[aria-expanded="true"],
    .pkp_navigation_primary > ul.show,
    .pkp_navigation_primary.in > ul,
    .pkp_navigation_primary.show > ul,
    .pkp_nav_list.in,
    .pkp_nav_list.show,
    .pkp_nav_list[aria-expanded="true"] {
        display: flex !important;
    }

    /* Item menu di mobile */
    .pkp_navigation_primary > ul > li,
    .pkp_nav_list > li {
        width: 100% !important;
        display: block !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    /* Link menu di mobile */
    .pkp_navigation_primary > ul > li > a,
    .pkp_nav_list > li > a,
    .pkp_navigation_primary .pkp_nav_list > li > a {
        color: var(--white) !important;
        display: block !important;
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 0.9rem !important;
        border-bottom: none !important;
        text-align: left !important;
    }

    .pkp_navigation_primary > ul > li > a:hover,
    .pkp_nav_list > li > a:hover {
        background: rgba(201,168,76,0.15) !important;
        color: var(--accent-light) !important;
        padding-left: 28px !important;
    }
}

/* ============================================================
   FIX DROPDOWN SUBMENU (About, dll) - DESKTOP & MOBILE
   ============================================================ */

/* Pastikan li parent punya position relative */
.pkp_navigation_primary > ul > li,
.pkp_nav_list > li {
    position: relative !important;
}

/* Dropdown default tersembunyi */
.pkp_navigation_primary .pkp_dropdown,
.pkp_nav_list .pkp_dropdown,
ul.pkp_dropdown,
.dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 200px !important;
    background: var(--primary-dark) !important;
    border: 1px solid rgba(201,168,76,0.25) !important;
    border-top: 2px solid var(--accent) !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    z-index: 99999 !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Dropdown muncul saat hover (desktop) */
.pkp_navigation_primary > ul > li:hover > .pkp_dropdown,
.pkp_nav_list > li:hover > .pkp_dropdown,
.pkp_navigation_primary > ul > li:hover > ul.pkp_dropdown,
.pkp_nav_list > li:hover > ul {
    display: block !important;
}

/* Dropdown muncul saat active/show (JS OJS) */
.pkp_navigation_primary > ul > li.show > .pkp_dropdown,
.pkp_navigation_primary > ul > li.open > .pkp_dropdown,
.pkp_nav_list > li.show > .pkp_dropdown,
.pkp_nav_list > li.open > ul,
.pkp_dropdown.show,
.pkp_dropdown.in,
.dropdown-menu.show {
    display: block !important;
}

/* Link di dalam dropdown */
.pkp_dropdown li,
.pkp_dropdown li a,
ul.pkp_dropdown li a {
    display: block !important;
    color: rgba(255,255,255,0.85) !important;
    padding: 10px 20px !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: var(--transition);
    border-left: 3px solid transparent !important;
    background: transparent !important;
}

.pkp_dropdown li a:hover,
ul.pkp_dropdown li a:hover {
    background: rgba(201,168,76,0.12) !important;
    color: var(--accent-light) !important;
    border-left-color: var(--accent) !important;
    padding-left: 26px !important;
}

/* Dropdown di mobile */
@media (max-width: 992px) {
    .pkp_navigation_primary .pkp_dropdown,
    .pkp_nav_list .pkp_dropdown,
    ul.pkp_dropdown {
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        border-top: none !important;
        border-radius: 0 !important;
        background: rgba(0,0,0,0.2) !important;
        min-width: 100% !important;
        padding: 0 !important;
    }

    .pkp_dropdown li a,
    ul.pkp_dropdown li a {
        padding: 12px 32px !important;
        font-size: 0.85rem !important;
        border-left: none !important;
        color: rgba(255,255,255,0.75) !important;
    }

    .pkp_dropdown li a:hover {
        padding-left: 40px !important;
    }
}

/* ============================================================
   FIX SIDEBAR BLOCK HEADER — FULL WIDTH SESUAI KOLOM
   ============================================================ */

/* Reset padding/margin agar header block rata penuh */
.pkp_block {
    padding: 0 !important;
    overflow: hidden !important;
}

/* Header/title sidebar block — full width */
.pkp_block .title,
.pkp_block h2,
.pkp_block h3,
.pkp_sidebar .pkp_block > h2,
.pkp_sidebar .pkp_block > h3,
.pkp_sidebar .pkp_block > .title {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;
    color: var(--white) !important;
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: 2px solid var(--accent) !important;
    border-radius: 0 !important;
}

/* Konten dalam block sidebar */
.pkp_block .content,
.pkp_block ul,
.pkp_block p,
.pkp_block div:not(.title) {
    padding: 14px 16px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Item list dalam sidebar */
.pkp_block ul {
    list-style: none !important;
    padding: 8px 0 !important;
}

.pkp_block ul li {
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--light-gray) !important;
    font-size: 0.875rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.pkp_block ul li:last-child {
    border-bottom: none !important;
}

/* Link dalam sidebar block */
.pkp_block a {
    color: var(--primary-light) !important;
    font-size: 0.875rem !important;
    transition: var(--transition);
    display: inline-block;
}

.pkp_block a:hover {
    color: var(--accent-dark) !important;
    padding-left: 4px !important;
    text-decoration: none !important;
}

/* Custom block plugin */
.pkp_block_custom,
[id^="customblock"] {
    padding: 0 !important;
    overflow: hidden !important;
}

.pkp_block_custom .title,
[id^="customblock"] .title,
[id^="customblock"] h3 {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;
    color: var(--white) !important;
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: 2px solid var(--accent) !important;
    border-radius: 0 !important;
}

/* ============================================================
   FIX KRITIS: DROPDOWN TERPOTONG
   Root cause: overflow:hidden di header & nav wrapper
   ============================================================ */

/* Hapus overflow hidden dari semua ancestor dropdown */
.pkp_head_wrapper,
.pkp_structure_head,
.cmp_header,
header,
#siteNav,
#navigationPrimary,
.pkp_navigation_primary,
nav.pkp_navigation_primary,
.pkp_navigation_primary > ul,
.pkp_nav_list {
    overflow: visible !important;
}

/* Navbar wrapper harus relative agar dropdown absolute bisa keluar */
.pkp_navigation_primary,
nav.pkp_navigation_primary,
#siteNav {
    position: relative !important;
    z-index: 10000 !important;
}

/* Parent li harus relative */
.pkp_navigation_primary > ul > li,
.pkp_nav_list > li,
#navigationPrimary > li {
    position: relative !important;
    overflow: visible !important;
}

/* ============================================================
   DROPDOWN SUBMENU — FIX TOTAL
   Struktur OJS: li > ul (submenu sebagai child ul dari li)
   ============================================================ */

/* Sembunyikan submenu by default */
.pkp_navigation_primary > ul > li > ul,
.pkp_nav_list > li > ul,
#navigationPrimary > li > ul {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 220px !important;
    background: var(--primary-dark) !important;
    border-top: 2px solid var(--accent) !important;
    border-left: 1px solid rgba(201,168,76,0.2) !important;
    border-right: 1px solid rgba(201,168,76,0.2) !important;
    border-bottom: 1px solid rgba(201,168,76,0.2) !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
    z-index: 99999 !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    overflow: visible !important;
}

/* Tampilkan submenu saat hover (desktop) */
.pkp_navigation_primary > ul > li:hover > ul,
.pkp_nav_list > li:hover > ul,
#navigationPrimary > li:hover > ul {
    display: block !important;
}

/* Tampilkan submenu saat class show/open ditambah JS */
.pkp_navigation_primary > ul > li.show > ul,
.pkp_navigation_primary > ul > li.open > ul,
.pkp_nav_list > li.show > ul,
.pkp_nav_list > li.open > ul,
#navigationPrimary > li.show > ul,
#navigationPrimary > li.open > ul {
    display: block !important;
}

/* Item dalam submenu */
.pkp_navigation_primary > ul > li > ul > li,
.pkp_nav_list > li > ul > li,
#navigationPrimary > li > ul > li {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.pkp_navigation_primary > ul > li > ul > li:last-child,
.pkp_nav_list > li > ul > li:last-child {
    border-bottom: none !important;
}

/* Link dalam submenu */
.pkp_navigation_primary > ul > li > ul > li > a,
.pkp_nav_list > li > ul > li > a,
#navigationPrimary > li > ul > li > a {
    display: block !important;
    padding: 11px 20px !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-bottom: none !important;
    border-left: 3px solid transparent !important;
    white-space: nowrap !important;
    transition: var(--transition) !important;
    background: transparent !important;
}

.pkp_navigation_primary > ul > li > ul > li > a:hover,
.pkp_nav_list > li > ul > li > a:hover,
#navigationPrimary > li > ul > li > a:hover {
    background: rgba(201,168,76,0.12) !important;
    color: var(--accent-light) !important;
    border-left-color: var(--accent) !important;
    padding-left: 26px !important;
}

/* Indikator panah di menu yang punya submenu */
.pkp_navigation_primary > ul > li:has(> ul) > a::after,
.pkp_nav_list > li:has(> ul) > a::after {
    content: ' ▾';
    font-size: 0.7rem;
    opacity: 0.7;
}

/* ============================================================
   MOBILE DROPDOWN FIX
   ============================================================ */
@media (max-width: 992px) {

    /* Di mobile, submenu statis (tidak absolute) */
    .pkp_navigation_primary > ul > li > ul,
    .pkp_nav_list > li > ul,
    #navigationPrimary > li > ul {
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: rgba(0,0,0,0.25) !important;
        min-width: 100% !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Di mobile tampilkan saat li active */
    .pkp_navigation_primary > ul > li.show > ul,
    .pkp_navigation_primary > ul > li.open > ul,
    .pkp_nav_list > li.show > ul,
    .pkp_nav_list > li.open > ul {
        display: block !important;
    }

    /* Di mobile hover tidak berlaku, hanya show/open */
    .pkp_navigation_primary > ul > li:hover > ul,
    .pkp_nav_list > li:hover > ul {
        display: none !important;
    }

    .pkp_navigation_primary > ul > li.show:hover > ul,
    .pkp_nav_list > li.show:hover > ul {
        display: block !important;
    }

    /* Link submenu di mobile lebih indent */
    .pkp_navigation_primary > ul > li > ul > li > a,
    .pkp_nav_list > li > ul > li > a {
        padding: 12px 36px !important;
        color: rgba(255,255,255,0.75) !important;
        border-left: none !important;
        font-size: 0.82rem !important;
    }

    .pkp_navigation_primary > ul > li > ul > li > a:hover,
    .pkp_nav_list > li > ul > li > a:hover {
        padding-left: 44px !important;
        background: rgba(201,168,76,0.1) !important;
    }
}