/* =========================================================
   OJS 3.4 - FINAL PREMIUM PORTAL CSS
   Intro premium + logo kampus + journal cards premium
   ========================================================= */

/* =========================
   1. Logo / nama portal atas
   ========================= */
.pkp_site_name {
	text-align: center !important;
}

.pkp_site_name .is_img img {
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
	position: relative !important;
	margin-top: 5px !important;
	margin-bottom: 0 !important;
}

/* =========================
   2. INTRO / ABOUT SITE PREMIUM
   tanpa ubah HTML bawaan OJS
   ========================= */
.pkp_page_index .about_site,
.pkp_page_index .homepage_about,
.pkp_page_index .site_description {
	position: relative !important;
	display: block !important;
	margin: 20px auto 40px auto !important;
	padding: 34px 38px 30px 38px !important;
	background:
		radial-gradient(circle at top right, rgba(15, 93, 149, 0.08), transparent 28%),
		radial-gradient(circle at bottom left, rgba(212, 168, 79, 0.08), transparent 24%),
		linear-gradient(135deg, #f8fbfd 0%, #eef4f8 100%) !important;
	border: 1px solid #dbe5ed !important;
	border-radius: 24px !important;
	box-shadow: 0 14px 32px rgba(21, 59, 99, 0.08) !important;
	overflow: hidden !important;
}

/* logo kampus */
.pkp_page_index .about_site::before,
.pkp_page_index .homepage_about::before,
.pkp_page_index .site_description::before {
	content: "" !important;
	display: block !important;
	width: 82px !important;
	height: 82px !important;
	margin: 0 auto 14px auto !important;
	background: url("https://journal.uinjkt.ac.id/gambar/uinlogo.png") no-repeat center center !important;
	background-size: contain !important;
}

/* judul portal baru */
.pkp_page_index .about_site::after,
.pkp_page_index .homepage_about::after,
.pkp_page_index .site_description::after {
	content: "E-journal UIN Syarif Hidayatullah Jakarta" !important;
	display: block !important;
	margin: 0 auto 20px auto !important;
	text-align: center !important;
	font-family: Georgia, "Times New Roman", serif !important;
	font-size: 28px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	letter-spacing: 0.2px !important;
	color: #163a5f !important;
	max-width: 760px !important;
	padding-bottom: 16px !important;
	border-bottom: 3px solid transparent !important;
	background-image: linear-gradient(#163a5f, #163a5f), linear-gradient(90deg, #0f5d95 0%, #d4a84f 100%) !important;
	background-origin: border-box !important;
	background-clip: padding-box, border-box !important;
}

/* paragraf umum */
.pkp_page_index .about_site p,
.pkp_page_index .homepage_about p,
.pkp_page_index .site_description p {
	margin: 0 0 18px 0 !important;
	font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
	font-size: 16px !important;
	line-height: 1.95 !important;
	color: #44596c !important;
	text-align: justify !important;
	position: relative !important;
	z-index: 2 !important;
}

/* paragraf pertama lebih formal */
.pkp_page_index .about_site p:first-of-type,
.pkp_page_index .homepage_about p:first-of-type,
.pkp_page_index .site_description p:first-of-type {
	margin-top: 0 !important;
	padding: 0 0 18px 0 !important;
	border-bottom: 1px solid #dce5ec !important;
	font-family: Georgia, "Times New Roman", serif !important;
	font-size: 18px !important;
	line-height: 1.9 !important;
	color: #2a4058 !important;
}

/* paragraf terakhir dibuat seperti statement box */
.pkp_page_index .about_site p:last-of-type,
.pkp_page_index .homepage_about p:last-of-type,
.pkp_page_index .site_description p:last-of-type {
	margin-bottom: 0 !important;
	margin-top: 6px !important;
	padding: 18px 20px !important;
	background: rgba(255, 255, 255, 0.82) !important;
	border: 1px solid #e3ebf2 !important;
	border-left: 4px solid #0f5d95 !important;
	border-radius: 14px !important;
	box-shadow: 0 8px 18px rgba(21, 59, 99, 0.05) !important;
}

/* strong dan link */
.pkp_page_index .about_site strong,
.pkp_page_index .homepage_about strong,
.pkp_page_index .site_description strong {
	color: #183c61 !important;
	font-weight: 700 !important;
}

.pkp_page_index .about_site a,
.pkp_page_index .homepage_about a,
.pkp_page_index .site_description a {
	color: #0f5d95 !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	border-bottom: 1px solid rgba(15, 93, 149, 0.28) !important;
	transition: all .25s ease !important;
}

.pkp_page_index .about_site a:hover,
.pkp_page_index .homepage_about a:hover,
.pkp_page_index .site_description a:hover {
	color: #153b63 !important;
	border-bottom-color: rgba(21, 59, 99, 0.55) !important;
}

/* =========================
   3. Area list jurnal
   ========================= */
.pkp_page_index .journals {
	margin-top: 10px !important;
}

.pkp_page_index .journals > ul {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: stretch !important;
	gap: 26px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* =========================
   4. Card jurnal premium
   ========================= */
.pkp_page_index .journals > ul > li {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: 340px !important;
	min-height: 575px !important;
	padding: 24px 22px 22px 22px !important;
	margin: 0 !important;
	float: none !important;
	text-align: left !important;
	background: #ffffff !important;
	border: 1px solid #e6edf3 !important;
	border-radius: 20px !important;
	box-shadow: 0 10px 30px rgba(15, 35, 60, 0.07) !important;
	transition: all 0.28s ease !important;
	position: relative !important;
	overflow: hidden !important;
	height: auto !important;
}

.pkp_page_index .journals > ul > li::before,
.pkp_page_index .journals > ul > li::after {
	display: none !important;
}

.pkp_page_index .journals > ul > li:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 18px 40px rgba(15, 35, 60, 0.14) !important;
	border-color: #d8e4ee !important;
}

/* desktop 3 kolom */
@media only screen and (min-width: 992px) {
	.pkp_page_index .journals > ul > li {
		width: calc(33.333% - 18px) !important;
		max-width: 350px !important;
	}
}

/* tablet 2 kolom */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.pkp_page_index .journals > ul > li {
		width: calc(50% - 13px) !important;
		max-width: 100% !important;
	}
}

/* mobile 1 kolom */
@media only screen and (max-width: 767px) {
	.pkp_page_index .journals > ul {
		gap: 18px !important;
	}
	.pkp_page_index .journals > ul > li {
		max-width: 100% !important;
		min-height: auto !important;
		padding: 20px !important;
	}
}

/* =========================
   5. Thumbnail jurnal
   ========================= */
.pkp_page_index .journals .thumb {
	float: none !important;
	width: 100% !important;
	margin: 0 0 18px 0 !important;
	padding: 0 !important;
	text-align: center !important;
	flex: 0 0 auto !important;
}

.pkp_page_index .journals .thumb a {
	display: block !important;
	padding: 18px !important;
	border-radius: 16px !important;
	background: linear-gradient(180deg, #fafcfe 0%, #f3f7fb 100%) !important;
	border: 1px solid #edf2f7 !important;
}

.pkp_page_index .journals img {
	display: block !important;
	margin: 0 auto !important;
	width: auto !important;
	max-width: 100% !important;
	height: 180px !important;
	object-fit: contain !important;
	border-radius: 8px !important;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10) !important;
	transition: transform 0.28s ease, box-shadow 0.28s ease !important;
}

.pkp_page_index .journals > ul > li:hover img {
	transform: translateY(-2px) scale(1.02) !important;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14) !important;
	filter: none !important;
	margin-top: 0 !important;
}

/* =========================
   6. Body card
   ========================= */
.pkp_page_index .journals .body,
.pkp_page_index .journals .thumb + .body {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	float: none !important;
	width: auto !important;
	margin-top: 0 !important;
}

/* =========================
   7. Judul jurnal
   ========================= */
.pkp_page_index .journals h3 {
	margin: 0 0 14px 0 !important;
	min-height: 72px !important;
	font-family: Georgia, "Times New Roman", serif !important;
	font-size: 21px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	letter-spacing: 0.15px !important;
	text-align: left !important;
}

.pkp_page_index .journals .body h3 a,
.pkp_page_index .journals .body h3 a:visited {
	color: #173d63 !important;
	text-decoration: none !important;
	transition: color 0.25s ease !important;
}

.pkp_page_index .journals .body h3 a:hover,
.pkp_page_index .journals .body h3 a:focus {
	color: #0b5ea8 !important;
	text-decoration: none !important;
}

/* =========================
   8. Deskripsi jurnal
   ========================= */
.pkp_page_index .journals .description {
	display: block !important;
	max-height: 158px !important;
	overflow: hidden !important;
	margin-bottom: 18px !important;
	position: relative !important;
}

.pkp_page_index .journals .description::after {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	height: 38px !important;
	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)) !important;
	pointer-events: none !important;
}

.pkp_page_index .journals .description p {
	margin: 0 !important;
	font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
	font-size: 14.5px !important;
	line-height: 1.82 !important;
	color: #4b5c6d !important;
	text-align: justify !important;
}

/* =========================
   9. Tombol bawah
   ========================= */
.pkp_page_index .journals .links {
	margin-top: auto !important;
	padding-top: 12px !important;
	border-top: 1px solid #edf2f6 !important;
}

.pkp_page_index .journals .links ul,
.pkp_page_index .journals .links li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.pkp_page_index .journals .links li {
	display: inline-block !important;
	margin: 8px 8px 0 0 !important;
}

/* tombol premium */
.pkp_page_index .journals .links li a,
.pkp_page_index .journals .links li a:visited {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 138px !important;
	height: 44px !important;
	padding: 0 18px !important;
	border-radius: 999px !important;
	border: 1px solid #c8d8e7 !important;
	background: #ffffff !important;
	color: #153b63 !important;
	text-decoration: none !important;
	font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.3px !important;
	box-shadow: 0 6px 14px rgba(21, 59, 99, 0.08) !important;
	transition: all 0.25s ease !important;
}

/* tombol pertama lebih dominan */
.pkp_page_index .journals .links li:first-child a,
.pkp_page_index .journals .links li:first-child a:visited {
	background: linear-gradient(135deg, #0d5ea6 0%, #153b63 100%) !important;
	color: #ffffff !important;
	border-color: transparent !important;
	box-shadow: 0 10px 20px rgba(13, 94, 166, 0.22) !important;
}

.pkp_page_index .journals .links li:first-child a:hover,
.pkp_page_index .journals .links li:first-child a:focus {
	background: linear-gradient(135deg, #0b548f 0%, #102f4f 100%) !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
}

.pkp_page_index .journals .links li:not(:first-child) a:hover,
.pkp_page_index .journals .links li:not(:first-child) a:focus {
	background: #f4f9fd !important;
	border-color: #9fbddd !important;
	color: #0b5ea8 !important;
	transform: translateY(-1px) !important;
}

/* matikan icon default */
.pkp_page_index .journals .links li a:after {
	display: none !important;
	content: none !important;
}

/* =========================
   10. Lebar area utama
   ========================= */
@media (min-width: 1200px) {
	.pkp_structure_content {
		padding-top: 2rem !important;
		width: 100% !important;
	}

	.pkp_structure_main:first-child:last-child {
		float: none !important;
		width: 1280px !important;
		max-width: calc(100% - 40px) !important;
		margin: 0 auto !important;
	}
}

/* =========================
   11. Footer / user nav
   ========================= */
.pkp_brand_footer {
	padding: 0 !important;
}

.pkp_brand_footer img {
	display: none !important;
}

.pkp_navigation_user.pkp_navigation_user {
	margin: 0 !important;
	padding: 2px !important;
	border: none !important;
}

/* =========================
   12. Responsive intro
   ========================= */
@media only screen and (max-width: 768px) {
	.pkp_page_index .about_site,
	.pkp_page_index .homepage_about,
	.pkp_page_index .site_description {
		padding: 24px 20px 22px 20px !important;
		border-radius: 18px !important;
	}

	.pkp_page_index .about_site::before,
	.pkp_page_index .homepage_about::before,
	.pkp_page_index .site_description::before {
		width: 68px !important;
		height: 68px !important;
		margin-bottom: 12px !important;
	}

	.pkp_page_index .about_site::after,
	.pkp_page_index .homepage_about::after,
	.pkp_page_index .site_description::after {
		font-size: 22px !important;
		line-height: 1.35 !important;
		padding-bottom: 14px !important;
	}

	.pkp_page_index .about_site p,
	.pkp_page_index .homepage_about p,
	.pkp_page_index .site_description p {
		font-size: 15px !important;
		line-height: 1.85 !important;
	}

	.pkp_page_index .about_site p:first-of-type,
	.pkp_page_index .homepage_about p:first-of-type,
	.pkp_page_index .site_description p:first-of-type {
		font-size: 16.5px !important;
		line-height: 1.8 !important;
	}

	.pkp_page_index .about_site p:last-of-type,
	.pkp_page_index .homepage_about p:last-of-type,
	.pkp_page_index .site_description p:last-of-type {
		padding: 16px !important;
	}
}