/* =========================================================
   OJS 3.4 - UIN E-Journal Portal
   FINAL PERFECTED PREMIUM CSS
   intro premium + logo badge + journal cards premium
   ========================================================= */

/* =========================
   1. GLOBAL CONTENT WIDTH
   ========================= */
@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: 1320px !important;
		max-width: calc(100% - 40px) !important;
		margin: 0 auto !important;
	}
}

/* =========================
   2. SITE NAME / LOGO AREA
   ========================= */
.pkp_site_name {
	text-align: center !important;
}

.pkp_site_name .is_img img {
	display: block !important;
	margin: 8px auto 0 auto !important;
	position: relative !important;
	max-width: 100% !important;
	height: auto !important;
}

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

/* lapisan dekorasi halus */
.pkp_page_index .about_site:after,
.pkp_page_index .homepage_about:after,
.pkp_page_index .site_description:after {
	content: "" !important;
	position: absolute !important;
	right: -70px !important;
	top: -70px !important;
	width: 180px !important;
	height: 180px !important;
	border-radius: 50% !important;
	background: rgba(15, 93, 149, 0.05) !important;
	z-index: 1 !important;
	pointer-events: none !important;
}

/* badge logo + nama */
.pkp_page_index .about_site:before,
.pkp_page_index .homepage_about:before,
.pkp_page_index .site_description:before {
	content: "E-journal UIN Syarif Hidayatullah Jakarta";
	display: inline-flex !important;
	align-items: center !important;
	min-height: 52px !important;
	margin-bottom: 18px !important;
	padding: 10px 22px 10px 62px !important;
	border-radius: 999px !important;
	background-image:
		url("https://journal.uinjkt.ac.id/gambar/uinlogo.png"),
		linear-gradient(135deg, #0f5d95 0%, #153b63 100%) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: 18px center, center !important;
	background-size: 30px auto, auto !important;
	color: #ffffff !important;
	font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.25px !important;
	text-transform: none !important;
	line-height: 1.2 !important;
	box-shadow: 0 10px 20px rgba(15, 93, 149, 0.18) !important;
	position: relative !important;
	z-index: 3 !important;
}

/* garis elegan */
.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 {
	position: relative !important;
	margin-top: 2px !important;
	padding-bottom: 22px !important;
	border-bottom: 1px solid #dde6ed !important;
	font-family: Georgia, "Times New Roman", serif !important;
	font-size: 19px !important;
	line-height: 1.9 !important;
	color: #2a4058 !important;
	z-index: 2 !important;
}

.pkp_page_index .about_site p:first-of-type:after,
.pkp_page_index .homepage_about p:first-of-type:after,
.pkp_page_index .site_description p:first-of-type:after {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	bottom: -2px !important;
	width: 92px !important;
	height: 3px !important;
	border-radius: 10px !important;
	background: linear-gradient(90deg, #0f5d95 0%, #d4a84f 100%) !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: #41576b !important;
	text-align: justify !important;
	position: relative !important;
	z-index: 2 !important;
}

/* paragraf terakhir sebagai panel premium */
.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: 22px !important;
	padding: 20px 22px !important;
	background: rgba(255, 255, 255, 0.84) !important;
	border: 1px solid #e2eaf1 !important;
	border-left: 4px solid #0f5d95 !important;
	border-radius: 16px !important;
	box-shadow: 0 10px 22px rgba(21, 59, 99, 0.05) !important;
}

/* elemen inline */
.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 0.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;
}

/* =========================
   4. JOURNALS WRAPPER
   ========================= */
.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: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* =========================
   5. JOURNAL CARD PREMIUM
   ========================= */
.pkp_page_index .journals > ul > li {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: 350px !important;
	min-height: 590px !important;
	padding: 24px 22px 22px 22px !important;
	margin: 0 !important;
	float: none !important;
	text-align: left !important;
	background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
	border: 1px solid #e4ebf2 !important;
	border-radius: 22px !important;
	box-shadow: 0 12px 30px rgba(15, 35, 60, 0.07) !important;
	transition: all 0.3s ease !important;
	position: relative !important;
	overflow: hidden !important;
	height: auto !important;
}

/* garis aksen atas */
.pkp_page_index .journals > ul > li {
	background-image:
		linear-gradient(90deg, #0f5d95 0%, #d4a84f 100%),
		linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
	background-size: 100% 4px, 100% 100% !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: top left, left top !important;
}

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

.pkp_page_index .journals > ul > li:hover {
	transform: translateY(-7px) !important;
	box-shadow: 0 20px 42px rgba(15, 35, 60, 0.13) !important;
	border-color: #d5e1ec !important;
}

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

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

/* mobile */
@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;
		border-radius: 18px !important;
	}
}

/* =========================
   6. THUMBNAIL AREA
   ========================= */
.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: 22px !important;
	border-radius: 18px !important;
	background: linear-gradient(180deg, #fafcfe 0%, #f2f6fa 100%) !important;
	border: 1px solid #edf2f7 !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !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: 10px !important;
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.11) !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

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

/* =========================
   7. 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;
}

/* =========================
   8. JOURNAL TITLE
   ========================= */
.pkp_page_index .journals h3 {
	margin: 0 0 14px 0 !important;
	min-height: 76px !important;
	font-family: Georgia, "Times New Roman", serif !important;
	font-size: 21px !important;
	line-height: 1.38 !important;
	font-weight: 700 !important;
	letter-spacing: 0.1px !important;
	text-align: left !important;
}

.pkp_page_index .journals .body h3 a,
.pkp_page_index .journals .body h3 a:visited {
	color: #183c61 !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;
}

/* =========================
   9. DESCRIPTION
   ========================= */
.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: 40px !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.86 !important;
	color: #4d5b6a !important;
	text-align: justify !important;
}

/* =========================
   10. LINKS / BUTTONS
   ========================= */
.pkp_page_index .journals .links {
	margin-top: auto !important;
	padding-top: 12px !important;
	border-top: 1px solid #eef3f7 !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 10px 0 0 !important;
}

.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: 142px !important;
	height: 46px !important;
	padding: 0 18px !important;
	border-radius: 999px !important;
	border: 1px solid #c9d9ea !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.25px !important;
	box-shadow: 0 7px 16px 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 12px 22px 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;
}

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

/* =========================
   11. FOOTER / NAV USER
   ========================= */
.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. MOBILE REFINEMENT
   ========================= */
@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 {
		font-size: 11px !important;
		padding: 10px 16px 10px 52px !important;
		background-position: 14px center, center !important;
		background-size: 24px auto, auto !important;
		min-height: 46px !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.82 !important;
		padding-bottom: 18px !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;
	}

	.pkp_page_index .journals h3 {
		font-size: 19px !important;
		min-height: auto !important;
	}

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

	.pkp_page_index .journals .links li a,
	.pkp_page_index .journals .links li a:visited {
		width: 100% !important;
		min-width: 100% !important;
	}
}