/*
 * Humaniora: Journal of Social Sciences and Humanities
 * Custom Stylesheet - Elegant Purple Theme
 * Version : 2.0.0
 * Domain  : humaniora.org
 *
 * Color Palette:
 * --purple-900 : #1a0a2e  (very dark purple)
 * --purple-800 : #2d1554  (dark purple)
 * --purple-700 : #4a2080  (primary purple)
 * --purple-600 : #6b35b5  (medium purple)
 * --purple-500 : #8b5cf6  (accent purple)
 * --purple-400 : #a78bfa  (light purple)
 * --purple-100 : #ede9fe  (very light purple)
 * --purple-50  : #f5f3ff  (near white purple)
 * --gold       : #c9a84c  (elegant gold accent)
 * --gold-light : #f0d080  (light gold)
 */

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

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

/* ============================================================
   1. TYPOGRAPHY & GLOBAL
   ============================================================ */
.pkp_structure_page {
    font-family: "Georgia", "Noto Serif", "Times New Roman", serif;
    font-size: 15px;
    line-height: 1.7;
    color: #2d1554;
    background-color: #f5f3ff;
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(107,53,181,0.07) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(74,32,128,0.05) 0%, transparent 60%);
}

a {
    color: #6b35b5;
    transition: color 0.2s ease;
}

a:hover, a:focus {
    color: #4a2080;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Georgia", "Noto Serif", serif;
    color: #2d1554;
    font-weight: 700;
}

/* ============================================================
   2. HEADER & NAVIGATION
   ============================================================ */
.pkp_structure_head {
    background: linear-gradient(135deg, #1a0a2e 0%, #2d1554 50%, #4a2080 100%);
    border-bottom: 3px solid #c9a84c;
    box-shadow: 0 4px 20px rgba(26,10,46,0.4);
}

.has_site_logo .pkp_head_wrapper {
    width: 100% !important;
    background: transparent;
    padding-top: 16px;
    padding-bottom: 8px;
}

.pkp_head_wrapper {
    padding-top: 16px;
}

/* Site Name / Logo */
.pkp_site_name {
    text-align: left;
    height: auto;
    font-family: "Georgia", "Noto Serif", serif !important;
}

.pkp_site_name > a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    color: #ffffff !important;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    font-family: "Georgia", "Noto Serif", serif !important;
}

.pkp_site_name .is_text {
    font-family: "Georgia", "Noto Serif", serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.pkp_site_name .is_img img {
    display: block;
    height: auto;
    width: auto;
    max-height: 80px;
    padding-bottom: 8px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* User Navigation Bar */
.user_navigation {
    background: rgba(26,10,46,0.5);
    border-bottom: 1px solid rgba(201,168,76,0.3);
    padding: 4px 0;
}

.pkp_navigation_user > li > a,
.pkp_navigation_user > li.in_focus > a,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    color: #ede9fe;
    font-size: 13px;
    font-weight: 500;
    font-family: "Georgia", serif;
    letter-spacing: 0.3px;
    background: transparent;
    padding: 6px 12px;
    transition: color 0.2s ease;
}

.pkp_navigation_user > li > a:hover {
    color: #c9a84c !important;
}

/* Primary Navigation */
.pkp_navigation_primary_row {
    background: rgba(45,21,84,0.95) !important;
    border-top: 1px solid rgba(201,168,76,0.2);
    border-bottom: 2px solid rgba(201,168,76,0.4);
}

.pkp_navigation_primary {
    display: inline-block;
    text-align: left;
    position: relative;
    font-size: 15px;
    font-weight: 600;
    padding-left: 10px;
}

.pkp_navigation_primary > li > a {
    color: #e8e0f7 !important;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
    display: inline-block;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li.in_focus > a {
    color: #c9a84c !important;
    border-bottom-color: #c9a84c;
    background: rgba(201,168,76,0.08);
}

/* Dropdown Navigation */
.pkp_nav_list ul {
    position: absolute;
    top: 100%;
    left: -9999px;
    z-index: 1000;
    width: 16em;
    margin: 0;
    padding: 6px 0;
    background: #2d1554;
    border-radius: 4px;
    border: 1px solid rgba(201,168,76,0.3);
    box-shadow: 0 8px 24px rgba(26,10,46,0.5);
}

.pkp_nav_list ul li a {
    color: #ede9fe !important;
    padding: 9px 18px;
    font-size: 13px;
    display: block;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.pkp_nav_list ul li a:hover {
    background: rgba(201,168,76,0.15);
    color: #c9a84c !important;
    padding-left: 24px;
}

/* Search Bar in Header */
.pkp_head_wrapper .pkp_search button {
    background: rgba(201,168,76,0.2);
    border: 1px solid rgba(201,168,76,0.5);
    border-radius: 20px;
    color: #ede9fe;
    font-size: 13px;
    padding: 6px 16px;
    transition: all 0.2s ease;
}

.pkp_head_wrapper .pkp_search button:hover {
    background: #c9a84c;
    color: #1a0a2e;
}

.pkp_head_wrapper .pkp_search .search_controls a {
    color: #c9a84c;
    font-size: 13px;
    font-weight: 600;
}

/* Mobile navbar toggle */
.navbar-toggle {
    position: relative;
    float: right;
    margin-right: 15px;
    padding: 9px 10px;
    margin-top: 5.5px;
    margin-bottom: 5.5px;
    background-color: #6b35b5;
    background-image: none;
    border: 1px solid rgba(201,168,76,0.4);
    border-radius: 4px;
}

.navbar-brand {
    font-size: 18px;
    color: #fff !important;
}

.navbar, .header_view {
    margin-bottom: 0;
    min-height: 10px;
}

/* ============================================================
   3. MAIN CONTENT AREA
   ============================================================ */
.pkp_structure_content {
    padding-top: 0;
    background: transparent;
    margin: auto;
    position: relative;
}

.pkp_structure_main {
    background: #ffffff;
    border: 1px solid rgba(107,53,181,0.15);
    border-radius: 8px;
    box-shadow: 0 2px 16px rgba(45,21,84,0.08);
    margin-top: 24px;
    margin-bottom: 24px;
    overflow: hidden;
}

/* Page headings inside main */
.pkp_structure_main h2,
.pkp_structure_main h3 {
    color: #4a2080;
}

/* ============================================================
   4. HOMEPAGE — JOURNAL INDEX
   ============================================================ */
.journal_index {
    background: transparent;
}

.journal_index .site_logo {
    border: none;
    background: transparent;
    border-radius: 10px;
    margin: 10px 0;
}

/* Current Issue Section */
.page_index_journal > .current_issue > h2,
.current_issue > .current_issue_title {
    color: #4a2080 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    padding: 16px 20px !important;
    border-left: 4px solid #c9a84c;
    background: linear-gradient(90deg, #f5f3ff 0%, #ffffff 100%);
    border-radius: 0 6px 6px 0;
}

.obj_issue_toc > .heading > .published {
    margin-top: 8px !important;
    color: #6b35b5 !important;
    font-size: 13px;
    font-style: italic;
}

/* Article summary in TOC */
.obj_article_summary {
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(107,53,181,0.1) !important;
    transition: background 0.2s ease;
}

.obj_article_summary:hover {
    background: #f5f3ff;
}

.obj_article_summary .title a {
    color: #4a2080;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.obj_article_summary .title a:hover {
    color: #6b35b5;
    text-decoration: underline;
}

.obj_article_summary .meta {
    color: #8b7aaa;
    font-size: 13px;
    margin-top: 4px;
}

/* Article sections in TOC */
.obj_issue_toc .sections:not(:first-child) {
    margin-top: 0;
}

.obj_issue_toc .section > h2 {
    background: linear-gradient(90deg, #4a2080, #6b35b5);
    color: #ffffff !important;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    border-radius: 0;
}

/* ============================================================
   5. SIDEBAR
   ============================================================ */
.pkp_structure_sidebar {
    float: right;
    width: 300px;
}

.pkp_block {
    margin-bottom: 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 0;
    box-shadow: none;
}

.panel, .pkp_block {
    margin-bottom: 16px;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    box-shadow: none;
}

/* Sidebar Block Title */
.panel-default > .panel-heading,
.pkp_block .title {
    background: linear-gradient(135deg, #4a2080, #6b35b5) !important;
    color: #ffffff !important;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 700;
    font-family: "Georgia", "Noto Serif", serif;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-radius: 6px 6px 0 0;
    border-bottom: 2px solid #c9a84c;
    display: block;
}

.panel-default, .pkp_block, .list-group-item, .pkp_block ul li {
    border-color: rgba(107,53,181,0.1);
}

.pkp_block .content {
    background: #ffffff;
    border: 1px solid rgba(107,53,181,0.15);
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(45,21,84,0.06);
    font-family: "Georgia", "Noto Serif", serif;
}

.pkp_block .content p {
    line-height: 1.7;
    text-align: left;
    font-size: 15px;
    color: #4a4060;
    font-family: "Georgia", "Noto Serif", serif;
}

.pkp_block .content ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
}

.pkp_block .content ul li {
    line-height: 1.5;
    padding: 0;
    font-size: 15px;
    font-family: "Georgia", "Noto Serif", serif;
    color: #4a4060;
    border-bottom: 1px solid rgba(107,53,181,0.06);
}

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

.pkp_block a {
    text-decoration: none;
    display: block;
    padding: 8px 10px 8px 14px;
    color: #2d1554;
    font-size: 15px;
    font-family: "Georgia", "Noto Serif", serif;
    font-style: italic;
    transition: all 0.2s ease;
    border-left: 2px solid transparent;
}

.pkp_block a:before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #c9a84c;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.pkp_block a:hover {
    color: #6b35b5;
    background: #f5f3ff;
    border-left-color: #6b35b5;
    padding-left: 18px;
}

/* Custom Sidebar Classes */
.sidebar-link {
    color: #6b35b5;
    font-size: 13px;
}

.sidebar-link:hover {
    color: #4a2080;
}

.sidebar-link-title {
    color: #4a2080;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    border-bottom: 2px solid rgba(107,53,181,0.2);
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.sidebar-box {
    padding: 12px;
    border: 1px solid rgba(107,53,181,0.2);
    border-radius: 6px;
    background: linear-gradient(135deg, #f5f3ff, #ffffff);
    margin-bottom: 10px;
}

.sidebar-box-issn {
    background: linear-gradient(135deg, #4a2080, #6b35b5);
    padding: 12px;
    text-align: center;
    border-radius: 6px;
    color: #ffffff;
    margin-bottom: 12px;
    border: 1px solid rgba(201,168,76,0.3);
    box-shadow: 0 2px 8px rgba(45,21,84,0.2);
}

.sidebar-box-issn strong {
    color: #c9a84c;
    display: block;
    font-size: 15px;
    margin-top: 4px;
}

.sidebar-box-white {
    background: #ffffff;
    border: 1px solid rgba(107,53,181,0.15);
    border-radius: 6px;
    padding: 10px;
    color: #4a4060;
    font-size: 12px;
}

.sidebar-box-text-desc {
    line-height: 1.6 !important;
    font-size: 12px;
    color: #6a5a8a;
}

.sidebar-box-title {
    text-align: center;
    font-weight: bold;
    padding: 8px 14px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #4a2080, #6b35b5);
    display: block;
    color: #fff;
    letter-spacing: 0.5px;
    border-radius: 6px;
    font-size: 13px;
    border-bottom: 2px solid #c9a84c;
}

/* Make Submission Block */
.block_make_submission a,
.cmp_button,
.block_make_submission_link {
    display: block;
    background: linear-gradient(135deg, #4a2080, #6b35b5);
    border: 1px solid rgba(201,168,76,0.4);
    border-radius: 20px;
    font-size: 14px;
    line-height: 28px;
    font-weight: 700;
    color: #ffffff !important;
    width: 100%;
    text-align: center;
    padding: 8px 16px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 12px rgba(74,32,128,0.3);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 12px;
}

.block_make_submission a:hover,
.cmp_button:hover,
.block_make_submission_link:hover {
    background: linear-gradient(135deg, #c9a84c, #f0d080);
    color: #1a0a2e !important;
    box-shadow: 0 4px 16px rgba(201,168,76,0.4);
    transform: translateY(-1px);
}

/* ============================================================
   6. ARTICLE DETAIL PAGE
   ============================================================ */
.obj_article_details .main_entry {
    padding: 24px 32px;
}

.obj_article_details .item {
    padding: 16px 0;
    text-align: justify;
    border-bottom: 1px solid rgba(107,53,181,0.08);
    font-size: 14px;
    line-height: 1.8;
    color: #2d1554;
}

.obj_article_details .item:last-child {
    border-bottom: none;
}

/* Article Title */
.obj_article_details .page_title {
    font-size: 24px;
    font-weight: 700;
    color: #2d1554;
    line-height: 1.4;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(201,168,76,0.3);
}

/* Authors */
.obj_article_details .item.authors {
    color: #6b35b5;
    font-style: italic;
    font-size: 15px;
}

.obj_article_details .item.authors .name {
    font-weight: 600;
    color: #4a2080;
}

/* Abstract */
.obj_article_details .item.abstract {
    background: linear-gradient(135deg, #f5f3ff, #faf8ff);
    border-left: 4px solid #6b35b5;
    padding: 20px 24px !important;
    border-radius: 0 6px 6px 0;
    margin: 8px 0;
}

.obj_article_details .item.abstract h3,
.obj_article_details .item.abstract .label {
    color: #4a2080;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Keywords */
.obj_article_details .item.keywords .keyword {
    display: inline-block;
    background: rgba(107,53,181,0.1);
    color: #4a2080;
    border: 1px solid rgba(107,53,181,0.2);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 12px;
    margin: 3px 4px 3px 0;
    transition: all 0.2s ease;
}

.obj_article_details .item.keywords .keyword:hover {
    background: #4a2080;
    color: #ffffff;
}

/* Download / PDF Button */
.obj_article_details .entry_details .item.galleys a,
.obj_article_details .galleys_links a {
    display: inline-block;
    background: linear-gradient(135deg, #4a2080, #6b35b5);
    color: #ffffff !important;
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 4px 4px 4px 0;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(74,32,128,0.3);
    border: none;
}

.obj_article_details .entry_details .item.galleys a:hover,
.obj_article_details .galleys_links a:hover {
    background: linear-gradient(135deg, #c9a84c, #f0d080);
    color: #1a0a2e !important;
    box-shadow: 0 4px 14px rgba(201,168,76,0.4);
    transform: translateY(-1px);
}

/* DOI & References section */
.obj_article_details .item.doi a {
    color: #6b35b5;
    font-size: 13px;
}

/* Citation display */
.obj_article_details .citation_display {
    background: #f5f3ff;
    border: 1px solid rgba(107,53,181,0.15);
    border-radius: 6px;
    padding: 16px;
    font-size: 13px;
    color: #4a4060;
}

.obj_article_details .citation_display form input[type="submit"] {
    background: linear-gradient(135deg, #4a2080, #6b35b5);
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 6px 20px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.obj_article_details .citation_display form input[type="submit"]:hover {
    background: linear-gradient(135deg, #c9a84c, #f0d080);
    color: #1a0a2e;
}

/* ============================================================
   7. ISSUE ARCHIVE PAGE
   ============================================================ */
.obj_issue_summary {
    background: #ffffff;
    border: 1px solid rgba(107,53,181,0.12);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 6px rgba(45,21,84,0.06);
}

.obj_issue_summary:hover {
    border-color: rgba(107,53,181,0.3);
    box-shadow: 0 4px 16px rgba(45,21,84,0.12);
    transform: translateY(-1px);
}

.obj_issue_summary .title a {
    color: #4a2080;
    font-size: 16px;
    font-weight: 700;
}

.obj_issue_summary .title a:hover {
    color: #6b35b5;
}

.obj_issue_summary .published {
    color: #8b7aaa;
    font-size: 13px;
    font-style: italic;
    margin-top: 4px;
}

/* ============================================================
   8. ABOUT / EDITORIAL TEAM
   ============================================================ */
.about_journal {
    padding: 20px 24px;
    font-size: 14px;
    line-height: 1.8;
    color: #2d1554;
    background: #f5f3ff;
    border: 1px solid rgba(107,53,181,0.15);
    border-left: 4px solid #6b35b5;
    border-radius: 0 6px 6px 0;
    margin-bottom: 20px;
}

.editorial-list {
    position: relative;
}

.editorial-list li {
    margin-bottom: 1.25rem;
    padding: 12px;
    border-radius: 6px;
    background: #f5f3ff;
    border: 1px solid rgba(107,53,181,0.1);
    transition: all 0.2s ease;
}

.editorial-list li:hover {
    border-color: rgba(107,53,181,0.3);
    box-shadow: 0 2px 10px rgba(45,21,84,0.08);
}

.editorial-list .img-profile {
    position: absolute;
    width: 95px;
    height: 105px;
    border: 2px solid rgba(107,53,181,0.2);
    padding: .5rem;
    border-radius: 6px;
    background: #fff;
}

.editorial-list .img-profile .imgthumb {
    width: 80px;
    height: 90px;
    overflow: hidden;
    margin: 0 auto;
    object-fit: fill;
}

.editorial-list .img-profile img {
    width: 100%;
    height: 100%;
}

.team-content {
    margin-left: 105px;
    min-height: 130px;
}

.team-content .ico-label,
.team-aff ul li .ico-label {
    width: 18px;
    height: 18px;
    margin-right: .5rem;
}

.team-aff ul li {
    margin-bottom: 0;
    background: transparent;
    border: none;
    padding: 4px 0;
}

.team-aff ul li .tm_label {
    display: inline-block;
    width: 80px;
    color: #6b35b5;
    font-size: 12px;
    font-weight: 600;
}

/* ============================================================
   9. ANNOUNCEMENTS
   ============================================================ */
.obj_announcement_summary .title {
    font-size: 16px;
    font-weight: 700;
    color: #4a2080;
    margin-bottom: 6px;
}

.obj_announcement_summary .title a {
    color: #4a2080;
}

.obj_announcement_summary .title a:hover {
    color: #6b35b5;
}

.obj_announcement_summary .summary {
    font-size: 13px;
    line-height: 1.7;
    margin-top: 8px;
    color: #4a4060;
    max-width: 85%;
}

.obj_announcement_summary .date {
    font-size: 12px;
    color: #8b7aaa;
    font-style: italic;
    margin-top: 4px;
}

/* ============================================================
   10. SEARCH PAGE
   ============================================================ */
.page_search .submit button {
    background: linear-gradient(135deg, #4a2080, #6b35b5);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 28px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page_search .submit button:hover {
    background: linear-gradient(135deg, #c9a84c, #f0d080);
    color: #1a0a2e;
}

.search_result .title a {
    color: #4a2080;
    font-weight: 600;
}

/* ============================================================
   11. FORMS & INPUTS
   ============================================================ */
.cmp_form .fields > div {
    position: relative;
    padding-bottom: 12px;
}

.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form textarea,
.cmp_form select {
    border: 1px solid rgba(107,53,181,0.3);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    color: #2d1554;
    width: 100%;
    transition: border-color 0.2s ease;
}

.cmp_form input:focus,
.cmp_form textarea:focus,
.cmp_form select:focus {
    outline: none;
    border-color: #6b35b5;
    box-shadow: 0 0 0 3px rgba(107,53,181,0.1);
}

.cmp_form .buttons button,
.page_lost_password .buttons button {
    background: linear-gradient(135deg, #4a2080, #6b35b5);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    width: auto;
    display: inline-block;
    box-shadow: 0 3px 10px rgba(74,32,128,0.3);
}

.cmp_form .buttons button:hover,
.page_lost_password .buttons button:hover {
    background: linear-gradient(135deg, #c9a84c, #f0d080);
    color: #1a0a2e;
    box-shadow: 0 4px 14px rgba(201,168,76,0.4);
}

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #4a2080;
    text-align: left;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

/* ============================================================
   12. GRID & ADMIN PANELS
   ============================================================ */
.pkp_controllers_grid .header {
    position: relative;
    background: linear-gradient(135deg, #4a2080, #6b35b5) !important;
    padding: 0 1em;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #fff;
}

.pkp_controllers_grid thead {
    font-size: 12px;
    line-height: 16px;
    color: #4a4060;
    background: #f5f3ff !important;
}

.pkp_controllers_grid .scrollable {
    position: relative;
    max-height: 150px;
    overflow: auto;
    background: #faf8ff;
}

.ui-tabs-panel {
    position: relative;
    padding: 24px;
    background: #ffffff;
}

/* ============================================================
   13. SIDEMENU (Custom Block Navigation)
   ============================================================ */
.sidemenu {
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

.sidemenu li {
    list-style: none;
}

.sidemenu li a {
    display: block;
    margin-top: 2px;
    padding: 8px 14px;
    width: 100%;
    background: #ffffff;
    text-decoration: none;
    text-align: left;
    vertical-align: middle;
    color: #4a2080;
    font-size: 13px;
    overflow: hidden;
    transition: all 0.2s ease;
    border: 1px solid rgba(107,53,181,0.15);
    border-radius: 6px;
}

ul.sidemenu li a:hover {
    background: linear-gradient(90deg, #4a2080, #6b35b5);
    color: #ffffff;
    border-color: #4a2080;
    padding-left: 18px;
    text-decoration: none;
}

.sidemenu li marquee {
    display: block;
    margin-top: 2px;
    padding: 8px 14px;
    width: 100%;
    background: #f5f3ff;
    text-align: left;
    vertical-align: middle;
    color: #4a2080;
    font-size: 13px;
    border: 1px solid rgba(107,53,181,0.15);
    border-radius: 6px;
}

.sidemenu > li:first-child a {
    margin-top: 0;
}

.sidemenu li ul {
    margin: 0;
    padding: 0;
}

.sidemenu li li a {
    display: block;
    margin-top: 0;
    padding: 0;
    height: 0;
    overflow: hidden;
    border: none;
    transition: all 0.3s ease;
}

.sidemenu > li:hover li a {
    display: block;
    margin-top: 1px;
    padding: 7px 12px;
    width: 100%;
    height: auto;
    background: #f5f3ff;
    color: #4a2080;
    border-radius: 6px;
    border: 1px solid rgba(107,53,181,0.1);
    font-size: 12px;
    transition: all 0.3s ease;
}

.sidemenu > li:hover li a:hover {
    background: linear-gradient(90deg, #6b35b5, #8b5cf6);
    color: #ffffff;
    border-color: #6b35b5;
}

/* ============================================================
   14. FOOTER
   ============================================================ */
.pkp_structure_footer_wrapper {
    background: linear-gradient(135deg, #1a0a2e 0%, #2d1554 100%) !important;
    border-top: 3px solid #c9a84c;
    margin-top: 32px;
}

.pkp_structure_footer {
    text-align: center;
    padding: 20px 0;
}

.pkp_footer_content {
    text-align: left;
    margin: 10px auto;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 8px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.04);
    max-width: 1200px;
}

.pkp_brand_footer {
    display: none;
}

/* Footer Links & Text */
.jpi-footer-link {
    color: #c9a84c !important;
    font-size: 13px;
    transition: color 0.2s ease;
}

.jpi-footer-link:hover {
    color: #f0d080 !important;
    font-weight: bold;
}

.jpi-footer-text {
    color: #c4b8d8 !important;
    font-size: 12px;
    line-height: 1.7;
}

.uindesc a {
    color: #c9a84c !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.uindesc a:hover,
.uindesc a:focus {
    color: #f0d080 !important;
    text-decoration: none;
}

/* ============================================================
   15. IMAGE & MEDIA BOXES
   ============================================================ */
.kotak-gambar {
    height: 50px;
    width: 183px;
    margin: 5px;
    padding: 2px;
    border-radius: 6px;
    border: 1px solid rgba(107,53,181,0.25);
    transition: border 0.2s ease;
}

.kotak-gambar:hover {
    border: 2px solid #6b35b5;
    box-shadow: 0 2px 8px rgba(107,53,181,0.2);
}

.kotak-gambarscopus {
    height: 100px;
    margin: 5px;
    padding: 2px;
    border-radius: 8px;
}

.kotak-gambarscopus:hover {
    border: 2px solid #6b35b5;
    box-shadow: 0 2px 8px rgba(107,53,181,0.2);
}

.kotak-gambar-sinta {
    height: inherit;
    width: 183px;
    margin: 5px;
    padding: 2px;
    border-radius: 6px;
    border: 1px solid rgba(107,53,181,0.25);
}

.kotak-gambar-WA {
    width: 100px;
    margin: 5px;
    padding: 2px;
    border-radius: 50px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.kotak-gambar-WA:hover {
    border-color: #6b35b5;
    box-shadow: 0 2px 8px rgba(107,53,181,0.25);
}

.kotak-template {
    height: fit-content;
    width: fit-content;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    border: 0 solid transparent;
    transition: border 0.2s ease;
}

.kotak-template:hover {
    border: 2px dotted #6b35b5;
}

.statistik {
    height: 197px;
    width: 210px;
    margin: 5px;
    padding: 2px;
    border-radius: 6px;
    border: 1px solid rgba(107,53,181,0.2);
    transition: all 0.2s ease;
}

.statistik:hover {
    border: 2px solid #6b35b5;
    box-shadow: 0 2px 8px rgba(107,53,181,0.15);
}

.description {
    max-width: 80%;
    width: auto;
    height: auto;
}

/* ============================================================
   16. UTILITY CLASSES
   ============================================================ */
.pkp_screen_reader {
    display: none;
}

.maps {
    width: 100%;
}

.w3-animate-fading {
    animation: fading 10s infinite;
}

@keyframes fading {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.w3-section, .w3-code {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

.w3-content, .w3-auto {
    margin-left: auto;
    margin-right: auto;
}

.w3-content { max-width: 980px; }
.w3-auto { max-width: 1140px; }

.dropdown-menu {
    display: none;
}

.dropdown-menu > li > a {
    display: block;
    padding: 6px 20px;
    clear: both;
    font-weight: 600;
    line-height: 1.42857143;
    color: #4a2080;
    white-space: nowrap;
    font-size: 13px;
    transition: all 0.2s ease;
}

.dropdown-menu > li > a:hover {
    background: #f5f3ff;
    color: #6b35b5;
}

.pkp_navigation_primary ul {
    text-align: left;
}

/* ============================================================
   17. RESPONSIVE — Desktops 1550px+
   ============================================================ */
@media (min-width: 1550px) {

    .pkp_navigation_primary {
        display: inline-block;
        max-width: 80%;
        text-align: left;
        position: relative;
        padding-left: 375px;
        font-size: 15px;
        font-weight: 600;
    }

    .pkp_head_wrapper .pkp_search .search_controls a {
        margin-right: 550px;
        font-size: 15px;
        font-weight: bold;
    }

    .pkp_site_name .is_img img {
        display: block;
        height: auto;
        width: auto;
        max-height: 80px;
    }

    .pkp_structure_footer_wrapper {
        min-height: 160px;
    }

    .pkp_structure_footer {
        text-align: center;
        min-height: 160px;
    }

    .pkp_footer_content {
        width: 860px;
        margin-top: 10px;
    }
}

/* ============================================================
   18. RESPONSIVE — Laptops/Desktops 1025px–1550px
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1551px) {

    .pkp_navigation_primary {
        display: inline-block;
        max-width: 80%;
        text-align: left;
        position: relative;
        padding-left: 95px;
        font-weight: 600;
        font-size: 15px;
    }

    .pkp_head_wrapper .pkp_search .search_controls a {
        margin-right: 270px;
        font-size: 15px;
        font-weight: bold;
    }

    .pkp_site_name .is_img img {
        display: block;
        height: auto;
        width: auto;
        max-height: 80px;
        padding-left: 20px;
        padding-right: 30px;
    }

    .pkp_structure_footer_wrapper {
        min-height: 140px;
    }

    .pkp_structure_footer {
        text-align: center;
        min-height: 130px;
        padding-top: 0;
    }

    .pkp_footer_content {
        text-align: left;
        width: 1130px;
        margin-top: 0;
        padding: 10px 10px 5px 10px;
    }
}

/* ============================================================
   19. RESPONSIVE — Tablets Portrait 768px–1024px
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {

    .pkp_navigation_primary {
        display: inline-block;
        max-width: 80%;
        text-align: left;
        position: relative;
        padding-left: 265px;
        font-weight: 600;
        font-size: 14px;
    }

    .pkp_head_wrapper .pkp_search .search_controls a {
        margin-right: 265px;
        font-size: 14px;
    }

    .pkp_structure_sidebar {
        width: 260px;
    }

    .pkp_structure_footer_wrapper {
        min-height: 180px;
    }

    .pkp_structure_footer {
        text-align: center;
        min-height: 180px;
    }

    .pkp_footer_content {
        text-align: left;
        width: 760px;
        margin-top: 10px;
        padding: 10px;
    }
}

/* ============================================================
   20. RESPONSIVE — Tablets Landscape
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    .pkp_navigation_primary {
        display: inline-block;
        max-width: 80%;
        text-align: left;
        position: relative;
        padding-left: 30px;
        font-weight: 600;
        font-size: 14px;
    }

    .pkp_head_wrapper .pkp_search .search_controls a {
        margin-right: 200px;
        font-size: 14px;
    }

    .pkp_structure_footer_wrapper {
        min-height: 180px;
    }

    .pkp_footer_content {
        text-align: left;
        width: 860px;
        margin-top: 10px;
        padding: 10px;
    }
}

/* ============================================================
   21. RESPONSIVE — Mobile Landscape 481px–767px
   ============================================================ */
@media (min-width: 481px) and (max-width: 767px) {

    .pkp_navigation_primary {
        display: inline-block;
        max-width: 80%;
        font-weight: 600;
        font-size: 14px;
    }

    .obj_article_details .main_entry {
        padding: 16px;
    }

    .pkp_structure_footer_wrapper {
        min-height: auto;
    }

    .pkp_footer_content {
        text-align: left;
        margin-top: 10px;
        padding: 10px;
        box-sizing: border-box;
    }
}

/* ============================================================
   22. RESPONSIVE — Mobile Portrait 320px–480px
   ============================================================ */
@media (min-width: 320px) and (max-width: 480px) {

    .pkp_navigation_primary {
        display: inline-block;
        max-width: 100%;
        font-weight: 600;
        font-size: 13px;
    }

    .pkp_structure_main {
        border-radius: 0;
        margin: 0;
    }

    .obj_article_details .main_entry {
        padding: 12px;
    }

    .obj_article_details .page_title {
        font-size: 18px;
    }

    .pkp_structure_footer_wrapper {
        min-height: auto;
    }

    .pkp_footer_content {
        text-align: left;
        margin-top: 10px;
        padding: 10px;
        box-sizing: border-box;
    }

    .pkp_structure_sidebar {
        width: 100%;
        float: none;
    }

    .block_make_submission a,
    .cmp_button,
    .block_make_submission_link {
        width: 100%;
    }
}

/* ============================================================
   ISSN BAR - styling handled via inline style in header.tpl
   ============================================================ */
.pkp_navigation_user_wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

@media (max-width: 767px) {
    .hum_issn_bar {
        display: none !important;
    }
}