/* ==========================================================
   FASKES - Journal Style Sheet (Bootstrap3 + Paper swatch)
   Redesign: ungu gelap, header transparan overlay di slider,
   card modern dengan shadow, full-width menyeluruh
   Upload di: Website > Appearance > Advanced > Journal Style Sheet
   ========================================================== */

/* -----------------------------------------------------------
   0. Variabel warna (ganti di sini kalau mau tone lain)
   ----------------------------------------------------------- */
:root {
	--faskes-purple-dark: #1a1447;
	--faskes-purple: #241d63;
	--faskes-purple-light: #3d3390;
	--faskes-accent: #4f9df0;
	--faskes-bg: #f4f5f9;
}

body {
	background: var(--faskes-bg) !important;
}

/* -----------------------------------------------------------
   1. FULL-WIDTH menyeluruh - lepas batas max-width Bootstrap
      di semua container, bukan cuma slider
   ----------------------------------------------------------- */
.container,
.container-fluid,
.pkp_structure_content.container,
footer.footer .container {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 40px !important;
	padding-right: 40px !important;
}

@media (max-width: 768px) {
	.container,
	.container-fluid,
	.pkp_structure_content.container,
	footer.footer .container {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* -----------------------------------------------------------
   2. Header/Nav - transparan, overlay di atas slider, teks putih
   ----------------------------------------------------------- */
header.navbar.navbar-default {
	background: rgba(26, 20, 71, 0.55) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	backdrop-filter: blur(10px) !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
	box-shadow: none !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 50 !important;
	margin-bottom: 0 !important;
}

header.navbar.navbar-default .navbar-brand,
header.navbar.navbar-default .site-name a,
header.navbar.navbar-default #main-navigation > li > a,
header.navbar.navbar-default #navigationUser > li > a,
header.navbar.navbar-default .dropdown-toggle,
header.navbar.navbar-default .caret {
	color: #fff !important;
}

header.navbar.navbar-default #main-navigation > li > a:hover,
header.navbar.navbar-default #navigationUser > li > a:hover {
	color: var(--faskes-accent) !important;
	background: transparent !important;
}

header.navbar.navbar-default .navbar-form .form-control {
	background: rgba(255, 255, 255, 0.15) !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	color: #fff !important;
}

header.navbar.navbar-default .navbar-form .form-control::placeholder {
	color: rgba(255, 255, 255, 0.7) !important;
}

/* Beri jarak supaya konten setelah header (kalau bukan slider)
   tidak ketiban nav yang sekarang position:absolute */
#main-content {
	padding-top: 0 !important;
}

/* Khusus halaman SELAIN homepage (artikel, about, issue, dll) -
   body OJS otomatis dapat class "pkp_page_index" cuma di homepage,
   jadi kita kasih jarak atas di halaman lain supaya judul/konten
   tidak ketutup header yang sekarang position:fixed */
body:not(.pkp_page_index) #main-content,
body:not(.pkp_page_index) .pkp_structure_main {
	padding-top: 90px !important;
}

/* -----------------------------------------------------------
   3. Slider - background ungu gelap (untuk slide transparan)
   ----------------------------------------------------------- */
.slider-full-wrapper {
	background: linear-gradient(135deg, var(--faskes-purple-dark) 0%, var(--faskes-purple) 100%) !important;
	width: 100% !important;
}

.swiper-container,
.swiper {
	height: 480px !important;
	background: transparent !important;
}

.swiper-slide {
	height: 480px !important;
	display: flex !important;
	align-items: center !important;
}

.swiper-slide img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
}

#slider-text.slider-text {
	position: absolute !important;
	left: 60px !important;
	bottom: 60px !important;
	max-width: 60% !important;
	color: #fff;
	background: transparent;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
	padding: 0;
}

#slider-text.slider-text h2,
#slider-text.slider-text strong {
	font-size: 32px;
	font-weight: 700;
	display: block;
	margin-bottom: 6px;
	/* --- 1. WARNA JUDUL SLIDER: pilih salah satu, comment yang lain --- */

	/* Opsi A - solid gold/amber, pop of color, kesan premium */
	color: #f0b429;

	/* Opsi B - gradient ungu ke teal (uncomment 3 baris ini, comment opsi A)
	background: linear-gradient(90deg, #f0b429 0%, #4f9df0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	*/
}

/* --- 2. GARIS PUTIH DI NAV MENU --- */
header.navbar.navbar-default #main-navigation > li {
	position: relative;
}

header.navbar.navbar-default #main-navigation > li > a {
	position: relative;
	padding-bottom: 8px !important;
}

header.navbar.navbar-default #main-navigation > li > a::after {
	content: '';
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 0;
	height: 2px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}

header.navbar.navbar-default #main-navigation > li > a:hover::after,
header.navbar.navbar-default #main-navigation > li.active > a::after {
	transform: scaleX(1);
}

/* Garis vertikal tipis pemisah antar menu item */
header.navbar.navbar-default #main-navigation > li:not(:last-child) {
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- 3. VARIASI BACKGROUND SLIDER: pilih salah satu --- */

/* Opsi A - gradient ungu gelap polos (yang sekarang aktif) */
.slider-full-wrapper {
	background: linear-gradient(135deg, var(--faskes-purple-dark) 0%, var(--faskes-purple) 100%) !important;
	width: 100% !important;
}

/* Opsi B - gradient + pola titik-titik halus (uncomment blok ini,
   comment Opsi A di atas, untuk tekstur lebih hidup)
.slider-full-wrapper {
	background:
		radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px),
		linear-gradient(135deg, var(--faskes-purple-dark) 0%, var(--faskes-purple) 100%) !important;
	background-size: 24px 24px, cover !important;
	width: 100% !important;
}
*/

/* Opsi C - gradient + gambar background (ganti URL sesuai kebutuhan,
   misal foto lab/kampus dengan opacity rendah biar teks tetap kebaca)
.slider-full-wrapper {
	background:
		linear-gradient(135deg, rgba(26,20,71,0.92) 0%, rgba(36,29,99,0.92) 100%),
		url('https://journal.unugiri.ac.id/public/site/images/basith/background-pattern.jpg') center/cover !important;
	width: 100% !important;
}
*/

@media (max-width: 768px) {
	.swiper-container, .swiper, .swiper-slide {
		height: 320px !important;
	}
	#slider-text.slider-text {
		left: 24px !important;
		bottom: 24px !important;
		max-width: 85% !important;
	}
	#slider-text.slider-text h2 {
		font-size: 22px;
	}
}

/* -----------------------------------------------------------
   4. Card modern dengan shadow - journal-description,
      current_issue, dan sidebar blocks
   ----------------------------------------------------------- */
.journal-description,
.cmp_announcements,
.current_issue {
	background: #fff !important;
	border: none !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 12px rgba(26, 20, 71, 0.08) !important;
	padding: 24px !important;
	margin-bottom: 20px !important;
}

/* Sidebar block (Submission, Editorial Policies, dll) - title jadi
   colored box penuh, bukan cuma garis bawah */
.pkp_block {
	background: #fff !important;
	border: none !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 12px rgba(26, 20, 71, 0.08) !important;
	padding: 0 !important;
	margin-bottom: 20px !important;
	overflow: hidden !important;
}

.pkp_block .title {
	background: var(--faskes-purple-dark) !important;
	color: #fff !important;
	font-weight: 700 !important;
	border-bottom: none !important;
	margin: 0 !important;
	padding: 14px 20px !important;
}

.pkp_block .content {
	padding: 20px !important;
}

.current_issue .section .media-list > .article-summary {
	border: 1px solid #eee !important;
	border-radius: 10px !important;
	padding: 16px !important;
	margin: 0 !important;
	box-shadow: 0 1px 4px rgba(26, 20, 71, 0.05) !important;
}

/* -----------------------------------------------------------
   5. Grid artikel 2 kolom di Current Issue
   ----------------------------------------------------------- */
.current_issue .section .media-list {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 16px !important;
}

@media (max-width: 768px) {
	.current_issue .section .media-list {
		grid-template-columns: 1fr !important;
	}
}

/* -----------------------------------------------------------
   6. Tombol - warna ungu gelap konsisten
   ----------------------------------------------------------- */
.btn-primary {
	background: var(--faskes-purple) !important;
	border-color: var(--faskes-purple) !important;
}

.btn-primary:hover {
	background: var(--faskes-purple-dark) !important;
	border-color: var(--faskes-purple-dark) !important;
}

/* -----------------------------------------------------------
   8. Badge "Abstract View" / "PDF Download" - pakai wrapper
      <span class="usage-stats-item"> yang baru ditambahkan
      di template plugin usage stats
   ----------------------------------------------------------- */
.usage-stats {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin-top: 10px !important;
	width: 100% !important;
}

.usage-stats-item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	background: #f0f0f7 !important;
	color: var(--faskes-purple-dark) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	padding: 5px 12px !important;
	border-radius: 20px !important;
	white-space: nowrap !important;
}

.usage-stats-item img {
	width: 14px !important;
	height: 14px !important;
	margin: 0 !important;
}

.usage-stats-download {
	background: #e8f3ff !important;
	color: #1a4d8f !important;
}

.article-summary .btn-group {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
}

/* -----------------------------------------------------------
   9. Halaman detail artikel - box Abstract & panel details
      dibuat senada dengan card sidebar (title bar berwarna)
   ----------------------------------------------------------- */
.article-summary#summary {
	background: #fff !important;
	border: none !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 12px rgba(26, 20, 71, 0.08) !important;
	padding: 0 !important;
	overflow: hidden !important;
	margin-bottom: 20px !important;
}

.article-summary#summary h2 {
	background: var(--faskes-purple-dark) !important;
	color: #fff !important;
	font-weight: 700 !important;
	margin: 0 !important;
	padding: 14px 20px !important;
}

.article-summary#summary .article-abstract {
	padding: 20px !important;
}

/* Panel "Issue", "Section", copyright, dll di bawah Abstract -
   samakan gaya card-nya biar konsisten satu halaman */
.article-more-details .panel {
	border: none !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	box-shadow: 0 2px 12px rgba(26, 20, 71, 0.08) !important;
	margin-bottom: 16px !important;
}

.article-more-details .panel-heading {
	background: var(--faskes-purple-dark) !important;
	color: #fff !important;
	font-weight: 700 !important;
	border: none !important;
}

.article-more-details .panel-body {
	background: #fff !important;
}

/* Sidebar artikel (cover, tombol PDF, keywords) juga dikasih card */
.article-sidebar .list-group {
	background: #fff !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 12px rgba(26, 20, 71, 0.08) !important;
	overflow: hidden !important;
	margin-top: 16px !important;
}

.article-sidebar .list-group-item {
	border: none !important;
	border-bottom: 1px solid #f0f0f0 !important;
	padding: 14px 18px !important;
}

.article-sidebar .list-group-item:last-child {
	border-bottom: none !important;
}

/* -----------------------------------------------------------
   10. Footer - polesan dasar untuk struktur yang sudah ada
   ----------------------------------------------------------- */
footer.footer {
	background: linear-gradient(135deg, var(--faskes-purple-dark) 0%, var(--faskes-purple) 100%) !important;
	padding: 32px 0 !important;
	margin-top: 40px !important;
}

footer.footer .col-md-10,
footer.footer .col-md-2 {
	display: flex !important;
	align-items: center !important;
}

footer.footer img {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 8px !important;
}

footer.footer .col-md-2 {
	justify-content: flex-end !important;
}

footer.footer .col-md-2 img {
	max-width: 140px !important;
	opacity: 0.85 !important;
	filter: brightness(0) invert(1) !important;
}

/* -----------------------------------------------------------
   7. Sembunyikan blok "Browse" di sidebar kalau kosong
   ----------------------------------------------------------- */
.pkp_block.block_browse:has(ul:empty) {
	display: none !important;
}