/* ═══════════════════════════════════════════════════
   GLOBAL RESET FOR THIS THEME
═══════════════════════════════════════════════════ */
body {
	background: #f0f2f8;
	font-family: 'Segoe UI', Arial, sans-serif;
}

/* ═══════════════════════════════════════════════════
   TOP BAR
═══════════════════════════════════════════════════ */
.pkp-topbar {
	background: #0d1b2a;
	padding: 5px 0;
	font-size: 12px;
	border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pkp-topbar-nav > li > a {
	color: #8899aa !important;
	padding: 4px 12px !important;
	transition: color 0.2s;
}
.pkp-topbar-nav > li > a:hover {
	color: #fff !important;
	background: transparent !important;
}

/* ═══════════════════════════════════════════════════
   MAIN HEADER
═══════════════════════════════════════════════════ */
.pkp-main-header {
	background: #1b2a3b;
	border: none;
	box-shadow: 0 3px 15px rgba(0,0,0,0.3);
	padding: 0;
	position: sticky;
	top: 0;
	z-index: 500;
}
.pkp-main-header .navbar-brand,
.pkp-main-header .navbar-brand-logo {
	padding: 8px 20px;
	height: auto;
	color: #fff !important;
	font-size: 20px;
	font-weight: 700;
}
.pkp-main-header .navbar-brand img,
.pkp-main-header .navbar-brand-logo img {
	max-height: 55px;
	width: auto;
}
.pkp-main-nav > li > a {
	color: #b0c4d8 !important;
	font-size: 13.5px;
	font-weight: 500;
	padding: 22px 16px !important;
	letter-spacing: 0.3px;
	transition: all 0.2s;
	border-bottom: 3px solid transparent;
}
.pkp-main-nav > li > a:hover,
.pkp-main-nav > li.active > a {
	color: #fff !important;
	background: transparent !important;
	border-bottom: 3px solid #e8534a;
}
.pkp-main-header .navbar-toggle {
	border-color: rgba(255,255,255,0.2);
	margin-top: 14px;
}
.pkp-main-header .navbar-toggle .icon-bar {
	background-color: #b0c4d8;
}
.pkp-search-wrap {
	padding: 14px 0;
}
.pkp-search-wrap .form-control {
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.15);
	color: #fff;
	border-radius: 20px;
	padding: 6px 16px;
	min-width: 200px;
}
.pkp-search-wrap .form-control::placeholder { color: #8899aa; }
.pkp-search-wrap .btn {
	background: #e8534a;
	border: none;
	border-radius: 20px;
	color: #fff;
	padding: 6px 18px;
	margin-left: 4px;
}
.pkp-search-wrap .btn:hover { background: #c73d35; }

/* ═══════════════════════════════════════════════════
   HERO SECTION — full width override
═══════════════════════════════════════════════════ */

/* Override OJS container untuk halaman index site */
.pkp_page_index .pkp_structure_content {
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}
.pkp_page_index .pkp_structure_main {
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Sembunyikan logo di navbar pada halaman index site */
.pkp_page_index .pkp-main-header .navbar-brand,
.pkp_page_index .pkp-main-header .navbar-brand-logo,
.pkp_page_index .pkp-main-header .site-name {
	display: none !important;
}

.pkp-hero {
	background: linear-gradient(135deg, #1b2a3b 0%, #0f3460 50%, #16213e 100%);
	padding: 80px 20px 70px;
	text-align: center;
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0;
}
.pkp-hero-banner {
	padding: 0;
	background: #1b2a3b;
	text-align: center;
}
.pkp-hero-banner-img {
	width: 100%;
	height: auto;
	display: block;
	max-height: none;
	object-fit: contain;
}
.pkp-hero::before {
	content: '';
	position: absolute;
	top: -80px; right: -80px;
	width: 350px; height: 350px;
	background: radial-gradient(circle, rgba(232,83,74,0.15) 0%, transparent 70%);
	border-radius: 50%;
}
.pkp-hero::after {
	content: '';
	position: absolute;
	bottom: -100px; left: -60px;
	width: 300px; height: 300px;
	background: radial-gradient(circle, rgba(15,52,96,0.4) 0%, transparent 70%);
	border-radius: 50%;
}
.pkp-hero-content {
	position: relative;
	z-index: 2;
	max-width: 750px;
	margin: 0 auto;
}
.pkp-hero-title {
	color: #fff;
	font-size: 38px;
	font-weight: 700;
	margin: 0 0 18px;
	line-height: 1.3;
	letter-spacing: 0.3px;
}
.pkp-hero-logo {
	margin-bottom: 24px;
}
.pkp-hero-logo img {
	max-height: 120px;
	width: auto;
}
.pkp-hero-subtitle {
	color: #8fafc8;
	font-size: 16px;
	line-height: 1.8;
	margin: 0 0 24px;
}
.pkp-hero-divider {
	width: 60px;
	height: 3px;
	background: #e8534a;
	margin: 0 auto;
	border-radius: 2px;
}

/* ═══════════════════════════════════════════════════
   SITE WRAPPER — full width
═══════════════════════════════════════════════════ */
.pkp-site-wrapper {
	background: #f0f2f8;
	padding: 55px 0 80px;
	width: 100%;
	margin: 0;
}

/* ═══════════════════════════════════════════════════
   SECTION HEADER
═══════════════════════════════════════════════════ */
.pkp-section-header {
	text-align: center;
	margin-bottom: 40px;
}
.pkp-section-title {
	font-size: 28px;
	font-weight: 700;
	color: #1b2a3b;
	margin: 0 0 14px;
}
.pkp-section-line {
	width: 55px;
	height: 3px;
	background: #e8534a;
	margin: 0 auto;
	border-radius: 2px;
}

/* ═══════════════════════════════════════════════════
   JOURNAL CARDS
═══════════════════════════════════════════════════ */
.pkp-journal-grid {
	margin-top: 0;
}
.pkp-journal-col {
	margin-bottom: 28px;
	display: flex;
}

/* Pastikan card terakhir yang sendirian tidak melebar penuh */
.pkp-journal-col:last-child:nth-child(3n - 1) {
	margin-right: 33.333%;
}
.pkp-journal-col:last-child:nth-child(3n - 2) {
	margin-right: 66.666%;
}
.pkp-journal-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 18px rgba(27,42,59,0.09);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	border: 1px solid rgba(27,42,59,0.06);
}
.pkp-journal-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 35px rgba(27,42,59,0.16);
}

/* Thumbnail */
.pkp-journal-thumb {
	height: 170px;
	overflow: hidden;
	background: #e8edf5;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.pkp-journal-thumb a {
	display: block;
	width: 100%;
	height: 100%;
}
.pkp-journal-thumb img {
	width: 100%;
	height: 170px;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.pkp-journal-card:hover .pkp-journal-thumb img {
	transform: scale(1.06);
}
.pkp-thumb-placeholder {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #1b2a3b 0%, #0f3460 100%);
	text-decoration: none;
}
.pkp-thumb-placeholder .glyphicon {
	font-size: 48px;
	color: rgba(255,255,255,0.18);
}

/* Card body */
.pkp-journal-body {
	padding: 18px 20px 12px;
	flex: 1;
}
.pkp-journal-name {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 10px;
	line-height: 1.45;
}
.pkp-journal-name a {
	color: #1b2a3b;
	text-decoration: none;
	transition: color 0.2s;
}
.pkp-journal-name a:hover { color: #e8534a; }
.pkp-journal-desc {
	font-size: 13px;
	color: #6b7a99;
	line-height: 1.65;
	margin: 0;
}

/* Card actions */
.pkp-journal-actions {
	padding: 12px 16px 16px;
	border-top: 1px solid #eef0f6;
	display: flex;
	gap: 8px;
}
.pkp-btn-outline {
	flex: 1;
	text-align: center;
	padding: 8px 6px;
	border: 1.5px solid #1b2a3b;
	border-radius: 7px;
	color: #1b2a3b;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s;
	white-space: nowrap;
}
.pkp-btn-outline .glyphicon { margin-right: 4px; font-size: 11px; }
.pkp-btn-outline:hover {
	background: #1b2a3b;
	color: #fff;
	text-decoration: none;
}
.pkp-btn-solid {
	flex: 1;
	text-align: center;
	padding: 8px 6px;
	background: #e8534a;
	border: 1.5px solid #e8534a;
	border-radius: 7px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s;
	white-space: nowrap;
}
.pkp-btn-solid .glyphicon { margin-right: 4px; font-size: 11px; }
.pkp-btn-solid:hover {
	background: #c73d35;
	border-color: #c73d35;
	color: #fff;
	text-decoration: none;
}

/* No journals */
.pkp-no-journals {
	text-align: center;
	padding: 70px 20px;
	color: #8899aa;
}
.pkp-no-journals .glyphicon {
	font-size: 52px;
	display: block;
	margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
.pkp-footer {
	background: #1b2a3b;
	color: #8899aa;
	padding: 30px 0;
	font-size: 13px;
	border-top: 3px solid #e8534a;
}
.pkp-footer a { color: #b0c4d8; text-decoration: none; }
.pkp-footer a:hover { color: #fff; }
.pkp-footer-brand { text-align: right; }
.pkp-footer-brand img { opacity: 0.55; max-height: 38px; width: auto; }
.pkp-footer-brand img:hover { opacity: 0.9; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 991px) {
	.pkp-journal-col { display: block; }
}
@media (max-width: 767px) {
	.pkp-hero { padding: 45px 20px 35px; }
	.pkp-hero-title { font-size: 26px; }
	.pkp-hero-subtitle { font-size: 14px; }
	.pkp-main-nav > li > a { padding: 12px 16px !important; border-bottom: none; }
	.pkp-journal-actions { flex-direction: column; }
	.pkp-btn-outline, .pkp-btn-solid { text-align: center; }
}

.pkp-footer {
		background: #16213e;
		color: #aab4c8;
		padding: 28px 0;
		font-size: 13px;
		border-top: 3px solid #e94560;
	}
	.pkp-footer-inner {
		display: flex;
		align-items: center;
	}
	.pkp-footer-text {
		color: #aab4c8;
	}
	.pkp-footer-text a {
		color: #c8d6e5;
		text-decoration: none;
	}
	.pkp-footer-text a:hover {
		color: #fff;
	}
	.pkp-footer-brand {
		text-align: right;
	}
	.pkp-footer-brand img {
		opacity: 0.6;
		max-height: 40px;
		width: auto;
	}
	.pkp-footer-brand img:hover {
		opacity: 1;
	}

/* ═══════════════════════════════════════════════════
   AUTH PAGE — FULL SCREEN LAYOUT
═══════════════════════════════════════════════════ */

/* Override OJS container untuk halaman auth */
.pkp_page_login .pkp_structure_content,
.pkp_page_user .pkp_structure_content {
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}
.pkp_page_login .pkp_structure_main,
.pkp_page_user .pkp_structure_main {
	width: 100% !important;
	padding: 0 !important;
	float: none !important;
}

.pkp-auth-wrapper {
	min-height: calc(100vh - 120px);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 40px 20px;
	background: linear-gradient(135deg, #0d1b2a 0%, #1b2a3b 40%, #0f3460 100%);
	overflow: hidden;
}

/* Decorative circles */
.pkp-auth-bg::before {
	content: '';
	position: absolute;
	top: -100px; right: -100px;
	width: 400px; height: 400px;
	background: radial-gradient(circle, rgba(232,83,74,0.12) 0%, transparent 70%);
	border-radius: 50%;
}
.pkp-auth-bg::after {
	content: '';
	position: absolute;
	bottom: -120px; left: -80px;
	width: 350px; height: 350px;
	background: radial-gradient(circle, rgba(15,52,96,0.5) 0%, transparent 70%);
	border-radius: 50%;
}

/* ═══════════════════════════════════════════════════
   AUTH CARD
═══════════════════════════════════════════════════ */
.pkp-auth-container {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.35);
	padding: 44px 40px 40px;
	width: 100%;
	max-width: 440px;
	position: relative;
	z-index: 2;
}
.pkp-auth-container-wide {
	max-width: 600px;
}

/* ═══════════════════════════════════════════════════
   BRAND / HEADER
═══════════════════════════════════════════════════ */
.pkp-auth-brand {
	text-align: center;
	margin-bottom: 30px;
}
.pkp-auth-icon {
	width: 64px;
	height: 64px;
	background: linear-gradient(135deg, #1b2a3b, #0f3460);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	box-shadow: 0 4px 15px rgba(27,42,59,0.3);
}
.pkp-auth-icon .glyphicon {
	font-size: 26px;
	color: #fff;
}
.pkp-auth-logo {
	text-align: center;
	margin-bottom: 20px;
}
.pkp-auth-logo img {
	max-height: 80px;
	width: auto;
}
.pkp-auth-logo-text {
	font-size: 22px;
	font-weight: 700;
	color: #1b2a3b;
	margin-bottom: 16px;
	text-align: center;
}
.pkp-auth-title {
	font-size: 24px;
	font-weight: 700;
	color: #1b2a3b;
	margin: 0 0 8px;
}
.pkp-auth-subtitle {
	font-size: 13.5px;
	color: #8899aa;
	margin: 0;
	line-height: 1.5;
}

/* ═══════════════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════════════ */
.pkp-auth-alert {
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 13px;
	margin-bottom: 20px;
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.pkp-auth-alert .glyphicon { margin-top: 1px; flex-shrink: 0; }
.pkp-auth-alert-info {
	background: #e8f4fd;
	color: #1a6fa8;
	border: 1px solid #b8ddf5;
}
.pkp-auth-alert-danger {
	background: #fdf0ef;
	color: #c0392b;
	border: 1px solid #f5c6c2;
}

/* ═══════════════════════════════════════════════════
   FORM FIELDS
═══════════════════════════════════════════════════ */
.pkp-auth-form {
	margin: 0;
}
.pkp-auth-field {
	margin-bottom: 18px;
}
.pkp-auth-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #4a5568;
	margin-bottom: 7px;
}
.pkp-auth-field label .glyphicon {
	margin-right: 5px;
	color: #8899aa;
	font-size: 12px;
}
.pkp-auth-input {
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid #dde3ed;
	border-radius: 8px;
	font-size: 14px;
	color: #1b2a3b;
	background: #f8fafc;
	transition: border-color 0.2s, box-shadow 0.2s;
	outline: none;
	box-sizing: border-box;
}
.pkp-auth-input:focus {
	border-color: #0f3460;
	box-shadow: 0 0 0 3px rgba(15,52,96,0.1);
	background: #fff;
}
.pkp-auth-input::placeholder { color: #b0bec5; }

.pkp-auth-forgot {
	text-align: right;
	margin-top: 6px;
}
.pkp-auth-forgot a {
	font-size: 12px;
	color: #e8534a;
	text-decoration: none;
}
.pkp-auth-forgot a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════
   REMEMBER / CHECKBOX
═══════════════════════════════════════════════════ */
.pkp-auth-remember {
	margin-bottom: 22px;
}
.pkp-auth-remember label {
	font-size: 13px;
	color: #6b7a99;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}
.pkp-auth-remember input[type="checkbox"] {
	width: 15px;
	height: 15px;
	accent-color: #0f3460;
}

/* ═══════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════ */
.pkp-auth-btn-primary {
	display: block;
	width: 100%;
	padding: 13px;
	background: linear-gradient(135deg, #1b2a3b, #0f3460);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.3px;
}
.pkp-auth-btn-primary .glyphicon { margin-right: 7px; }
.pkp-auth-btn-primary:hover {
	background: linear-gradient(135deg, #0f3460, #0a2540);
	box-shadow: 0 4px 15px rgba(15,52,96,0.35);
	color: #fff;
	text-decoration: none;
}

.pkp-auth-btn-secondary {
	display: block;
	width: 100%;
	padding: 12px;
	background: transparent;
	color: #1b2a3b;
	border: 1.5px solid #dde3ed;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}
.pkp-auth-btn-secondary .glyphicon { margin-right: 7px; }
.pkp-auth-btn-secondary:hover {
	border-color: #1b2a3b;
	background: #f8fafc;
	color: #1b2a3b;
	text-decoration: none;
}

/* ═══════════════════════════════════════════════════
   DIVIDER
═══════════════════════════════════════════════════ */
.pkp-auth-divider {
	display: flex;
	align-items: center;
	margin: 18px 0;
	gap: 12px;
}
.pkp-auth-divider::before,
.pkp-auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #eef0f6;
}
.pkp-auth-divider span {
	font-size: 12px;
	color: #aab4c8;
	white-space: nowrap;
}

/* ═══════════════════════════════════════════════════
   BACK LINK
═══════════════════════════════════════════════════ */
.pkp-auth-back {
	text-align: center;
	margin-top: 18px;
}
.pkp-auth-back a {
	font-size: 13px;
	color: #6b7a99;
	text-decoration: none;
}
.pkp-auth-back a:hover { color: #1b2a3b; }
.pkp-auth-back .glyphicon { margin-right: 5px; font-size: 11px; }

/* ═══════════════════════════════════════════════════
   REGISTER — SECTIONS & CHECKS
═══════════════════════════════════════════════════ */
.pkp-register-fields .form-group label {
	font-size: 13px;
	font-weight: 600;
	color: #4a5568;
}
.pkp-register-fields .form-control {
	border: 1.5px solid #dde3ed;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 14px;
	background: #f8fafc;
	transition: border-color 0.2s;
}
.pkp-register-fields .form-control:focus {
	border-color: #0f3460;
	box-shadow: 0 0 0 3px rgba(15,52,96,0.1);
	background: #fff;
}

.pkp-auth-section {
	background: #f8fafc;
	border: 1px solid #eef0f6;
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 18px;
}
.pkp-auth-section-title {
	font-size: 13px;
	font-weight: 700;
	color: #1b2a3b;
	margin-bottom: 12px;
}
.pkp-auth-section-title .glyphicon {
	color: #e8534a;
	margin-right: 6px;
}
.pkp-auth-check {
	margin-bottom: 10px;
}
.pkp-auth-check label {
	font-size: 13px;
	color: #4a5568;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	line-height: 1.5;
}
.pkp-auth-check input[type="checkbox"] {
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: #0f3460;
}
.pkp-auth-recaptcha {
	margin-bottom: 18px;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
	.pkp-auth-container {
		padding: 30px 22px 28px;
		border-radius: 12px;
	}
	.pkp-auth-title { font-size: 20px; }
}

/* Lost password uses same page class family */
.pkp_op_lostPassword .pkp_structure_content,
.pkp_op_requestResetPassword .pkp_structure_content {
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}
.pkp_op_lostPassword .pkp_structure_main,
.pkp_op_requestResetPassword .pkp_structure_main {
	width: 100% !important;
	padding: 0 !important;
	float: none !important;
}

.pkp_page_login .pkp_structure_sidebar,
.pkp_page_user .pkp_structure_sidebar {
	display: none !important;
}

.pkp-auth-wrapper-wide {
	align-items: flex-start;
	padding-top: 48px;
	padding-bottom: 60px;
}

.pkp-register-fields fieldset {
	border: none;
	margin: 0 0 18px;
	padding: 0;
}
.pkp-register-fields legend {
	font-size: 14px;
	font-weight: 700;
	color: #1b2a3b;
	border-bottom: 2px solid #e8534a;
	padding-bottom: 6px;
	margin-bottom: 14px;
	width: 100%;
}
.pkp-register-fields .form-group {
	margin-bottom: 14px;
}
.pkp-auth-form fieldset.consent,
.pkp-auth-form fieldset.reviewer,
.pkp-auth-form fieldset[name="contexts"] {
	border: 1px solid #eef0f6;
	border-radius: 10px;
	background: #f8fafc;
	padding: 16px 18px;
	margin-bottom: 18px;
}
.pkp-auth-form fieldset.consent legend,
.pkp-auth-form fieldset.reviewer legend,
.pkp-auth-form fieldset[name="contexts"] legend {
	font-size: 13px;
	font-weight: 700;
	color: #1b2a3b;
	border: none;
	width: auto;
	margin-bottom: 10px;
}
.pkp-auth-form .list-group-item.context {
	border-radius: 8px !important;
	margin-bottom: 10px;
	border: 1px solid #eef0f6;
}
.pkp-auth-form .list-group-item-heading {
	font-size: 14px;
	font-weight: 700;
	color: #1b2a3b;
	margin-top: 0;
}
/* auth-1786636008 */

/* AUTH/SITE: hide navbar logo so login/register match site home (banner only in hero/auth card) */
.pkp_page_login .pkp-main-header .navbar-brand,
.pkp_page_login .pkp-main-header .navbar-brand-logo,
.pkp_page_login .pkp-main-header .site-name,
.pkp_page_user .pkp-main-header .navbar-brand,
.pkp_page_user .pkp-main-header .navbar-brand-logo,
.pkp_page_user .pkp-main-header .site-name {
	display: none !important;
}
/* When site main header is omitted, topbar is the only chrome */
.pkp-main-header-site { display: none !important; }
/* hdr-1786636321 */