/* ==========================================================================
OJS JOURNAL CUSTOM STYLESHEET - UNESA / UNIVERSITAS
Primary Theme Color: #721C9A (Royal Purple)
Typography: Plus Jakarta Sans
========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
--ojs-primary: #721C9A;
--ojs-primary-dark: #521370;
--ojs-primary-hover: #8E25C1;
--ojs-primary-dark-hover: #631787;
--ojs-primary-light: #faf5ff;
--ojs-primary-bg-hover: #F4E8FB;
--ojs-text-main: #edf2f7;
--ojs-text-muted: #334155;
--ojs-text-white: #ffffff;
--ojs-border-color: rgba(114, 28, 154, 0.15);
--ojs-shadow-normal: 0 4px 20px rgba(114, 28, 154, 0.12);
--ojs-shadow-hover: 0 6px 24px rgba(114, 28, 154, 0.18);
--ojs-shadow-btn: 0 3px 10px rgba(114, 28, 154, 0.25);
--ojs-shadow-btn-hover: 0 5px 15px rgba(114, 28, 154, 0.38);
--ojs-radius-card: 12px;
--ojs-radius-elem: 8px;
--ojs-radius-sm: 6px;
--ojs-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--ojs-transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================

OJS CORE THEME OVERRIDES (HEADER & MAIN NAVIGATION)
========================================================================== */
body {
font-family: var(--ojs-font-family) !important;
}

/* Accent link color override for OJS globally */
a {
color: var(--ojs-primary);
}
a:hover {
color: var(--ojs-primary-hover);
}

/* ========== PRIMARY NAVIGATION STYLING ========== */

/* Header & Primary Navigation Menu - Base State */
.pkp_navigation_primary > li > a {
color: var(--ojs-text-main) !important;
font-family: var(--ojs-font-family) !important;
font-weight: 600 !important;
transition: var(--ojs-transition-fast);
border-bottom: 2px solid transparent !important;
padding-bottom: 8px !important;
display: inline-block;
}

/* Primary Navigation - Hover State */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
color: var(--ojs-primary) !important;
border-bottom-color: var(--ojs-primary) !important;
background-color: var(--ojs-primary-bg-hover) !important;
text-decoration: none;
}

/* Primary Navigation - Active/Current State */
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li.active > a,
.pkp_navigation_primary > li[aria-current="page"] > a,
.pkp_navigation_primary > li[aria-expanded="true"] > a {
color: var(--ojs-primary) !important;
border-bottom: 2px solid var(--ojs-primary) !important;
background-color: var(--ojs-primary-light) !important;
font-weight: 700 !important;
}

/* Top User Navigation (Login/Register di pojok atas) */
.pkp_navigation_user > li > a {
color: var(--ojs-text-muted);
}
.pkp_navigation_user > li > a:hover {
color: var(--ojs-primary);
}

/* ========== DROPDOWN SUBMENU STYLING ========== */

/* Dropdown Sub-menu */
.pkp_navigation_primary ul {
border-top: 3px solid var(--ojs-primary) !important;
background-color: #fafafa;
margin-top: 8px !important;
padding: 8px 0 !important;
box-shadow: 0 4px 12px rgba(114, 28, 154, 0.12) !important;
border-radius: 4px;
}

/* Submenu items - Base styling */
.pkp_navigation_primary ul li a {
border-left: 3px solid transparent;
padding-left: 18px !important;
transition: var(--ojs-transition-fast);
color: var(--ojs-text-muted) !important;
font-weight: 500;
}

/* Submenu items - Hover state */
.pkp_navigation_primary ul li a:hover {
background-color: var(--ojs-primary-light) !important;
color: var(--ojs-primary) !important;
border-left-color: var(--ojs-primary) !important;
padding-left: 24px !important;
font-weight: 600;
}

/* OJS Primary Buttons accent */
.pkp_button,
.cmp_button,
.btn-primary,
button.pkp_button {
background-color: var(--ojs-primary) !important;
border-color: var(--ojs-primary-dark) !important;
border-radius: var(--ojs-radius-sm) !important;
color: var(--ojs-text-white) !important;
transition: var(--ojs-transition-fast);
}

.pkp_button:hover,
.cmp_button:hover,
.btn-primary:hover,
button.pkp_button:hover {
background-color: var(--ojs-primary-hover) !important;
border-color: var(--ojs-primary-dark-hover) !important;
}

/* ==========================================================================
2. CUSTOM SIDEBAR WIDGETS (MENU & TEMPLATE)
========================================================================== */

/* Global Reset & Container Sidebar */
.ojs-sidebar-wrapper {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 3px;
font-family: var(--ojs-font-family);
margin-bottom: 30px;
}

/* Base Card Style */
.ojs-purple-card,
.ojs-template-card {
width: 100%;
background: var(--ojs-text-white);
border-radius: var(--ojs-radius-card);
box-shadow: var(--ojs-shadow-normal);
overflow: hidden;
border: 1px solid var(--ojs-border-color);
transition: transform 0.3s ease, box-shadow 0.3s ease;
font-family: var(--ojs-font-family);
}

.ojs-purple-card:hover,
.ojs-template-card:hover {
box-shadow: var(--ojs-shadow-hover);
}

/* Header Component */
.ojs-purple-header,
.ojs-template-header {
background: linear-gradient(135deg, var(--ojs-primary) 0%, var(--ojs-primary-dark) 100%);
color: var(--ojs-text-white);
padding: 14px 18px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.08);
}

.ojs-purple-header a,
.ojs-template-header-link {
color: var(--ojs-text-white) !important;
text-decoration: none;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
transition: opacity 0.2s ease, transform 0.2s ease;
}

.ojs-purple-header a:hover,
.ojs-template-header-link:hover {
opacity: 0.92;
transform: scale(1.02);
color: var(--ojs-text-white) !important;
}

.ojs-purple-header i,
.ojs-template-header-link i {
font-size: 16px;
}

/* List Menu Navigation */
.ojs-purple-list {
list-style: none;
padding: 6px 0;
margin: 0;
}

.ojs-purple-item {
margin: 2px 6px;
border-bottom: 1px dashed #f1f5f9;
}

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

.ojs-purple-link {
display: flex;
align-items: center;
padding: 10px 14px;
color: var(--ojs-text-muted) !important;
text-decoration: none;
font-size: 13.5px;
font-weight: 500;
border-radius: var(--ojs-radius-sm);
transition: var(--ojs-transition-fast);
}

.ojs-purple-link i {
width: 24px;
font-size: 15px;
color: var(--ojs-primary);
margin-right: 10px;
text-align: center;
transition: var(--ojs-transition-fast);
}

.ojs-purple-link:hover {
background-color: var(--ojs-primary-bg-hover);
color: var(--ojs-primary) !important;
transform: translateX(4px);
font-weight: 600;
}

.ojs-purple-link:hover i {
color: var(--ojs-primary-hover);
transform: scale(1.15);
}

/* Article Template Body & Buttons */
.ojs-template-body {
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
background-color: var(--ojs-text-white);
}

.ojs-template-img-link {
display: block;
width: 100%;
border-radius: var(--ojs-radius-elem);
overflow: hidden;
border: 1px solid var(--ojs-border-color);
transition: var(--ojs-transition-fast);
background-color: var(--ojs-primary-light);
}

.ojs-template-img-link:hover {
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(114, 28, 154, 0.2);
border-color: var(--ojs-primary);
}

.ojs-template-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
transition: transform 0.3s ease;
}

.ojs-template-img-link:hover .ojs-template-img {
transform: scale(1.02);
}

/* Primary Call to Action Button */
.ojs-template-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 11px 16px;
background: linear-gradient(135deg, var(--ojs-primary) 0%, var(--ojs-primary-dark) 100%);
color: var(--ojs-text-white) !important;
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
border-radius: var(--ojs-radius-elem);
box-shadow: var(--ojs-shadow-btn);
transition: var(--ojs-transition-fast);
text-align: center;
border: none;
cursor: pointer;
}

.ojs-template-btn:hover {
background: linear-gradient(135deg, var(--ojs-primary-hover) 0%, var(--ojs-primary-dark-hover) 100%);
box-shadow: var(--ojs-shadow-btn-hover);
transform: translateY(-2px);
color: var(--ojs-text-white) !important;
}

.ojs-template-btn i {
font-size: 15px;
}

/* ==========================================================================
3. CURRENT ISSUE ARTICLE LIMITER (MEMBATASI JUMLAH TAMPILAN ARTIKEL)
========================================================================== */

/* Sembunyikan artikel urutan ke-7 dan seterusnya di halaman Current Issue / Archive */
.page_issue .sections .cmp_article_list > li:nth-child(n+7),
.pkp_page_issue .sections .cmp_article_list > li:nth-child(n+7) {
display: none !important;
}

/* Catatan Pengaturan Jumlah:

n+7 : Menampilkan 6 artikel pertama (artikel ke-7 dst disembunyikan).

n+6 : Menampilkan 5 artikel pertama (artikel ke-6 dst disembunyikan).

n+11: Menampilkan 10 artikel pertama (artikel ke-11 dst disembunyikan).
*/

/* --- Responsive & Media Queries --- */
@media (max-width: 768px) {
.pkp_navigation_primary > li > a {
padding: 8px 12px;
font-size: 14px;
}

.ojs-purple-link {
padding: 12px 14px;
font-size: 14px;
}
}

@media print {
.ojs-sidebar-wrapper,
.ojs-purple-card,
.ojs-template-card {
box-shadow: none !important;
border: 1px solid #ccc !important;
}
}


### Ringkasan Penambahan:
1. Kode `nth-child(n+7)` telah ditambahkan di bagian 3 berkas CSS di atas. Secara *default*, ini akan **menampilkan 6 artikel pertama** dan menyembunyikan sisanya.
2. Jika ingin menampilkan **hanya 5 artikel**, ubah `n+7` menjadi `n+6`.
3. Unggah ulang berkas `ojs-journal-style.css` yang telah diperbarui ke Dashboard OJS Anda melalui menu **Settings > Website > Appearance > Custom Stylesheet**.