/* =========================================================
   MODERN READ INFORMASI SERTA MERTA
   Visual direction:
   modern-foto / viewfoto
========================================================= */

:root {
	--ism-primary: #0ab7a3;
	--ism-primary-dark: #078f80;
	--ism-primary-deep: #06766b;

	--ism-soft: #eaf9f6;
	--ism-soft-2: #f5fbfa;

	--ism-dark: #102a2a;
	--ism-text: #465858;
	--ism-muted: #7a8b8b;

	--ism-border: rgba(16, 42, 42, 0.08);

	--ism-shadow: 0 14px 45px rgba(16, 42, 42, 0.06);

	--ism-shadow-hover: 0 20px 55px rgba(16, 42, 42, 0.1);

	--ism-radius: 18px;
}

/* =========================================================
   PAGE HEADER ENHANCEMENT
   Mengikuti pola headerpage.css / modern-foto
========================================================= */

.page-header {
	position: relative;
	overflow: hidden;
}

.page-header::before {
	content: "";

	position: absolute;

	width: 430px;
	height: 430px;

	right: -170px;
	top: -260px;

	border-radius: 50%;

	border: 1px solid rgba(10, 183, 163, 0.15);

	transform: translate3d(0, var(--ism-parallax-y, 0), 0);

	pointer-events: none;
}

.page-header::after {
	content: "";

	position: absolute;

	width: 210px;
	height: 210px;

	right: 12%;
	bottom: -150px;

	border-radius: 50%;

	border: 1px dashed rgba(10, 183, 163, 0.12);

	pointer-events: none;
}

.page-header-content {
	position: relative;
	z-index: 2;
}

.page-header-eyebrow {
	color: var(--ism-primary-dark);
}

/* =========================================================
   MAIN SECTION
========================================================= */

.modern-ism {
	position: relative;

	padding: 55px 0 90px;

	background: linear-gradient(180deg, #f8fbfa 0%, #ffffff 55%, #f7fbfa 100%);
}

.modern-ism::before {
	content: "";

	position: absolute;

	width: 280px;
	height: 280px;

	left: -190px;
	top: 170px;

	border-radius: 50%;

	background: rgba(10, 183, 163, 0.045);

	pointer-events: none;
}

/* =========================================================
   DETAIL LAYOUT
========================================================= */

.ism-detail-layout {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		340px;

	gap: 28px;

	align-items: start;
}

/* =========================================================
   MAIN ARTICLE CARD
========================================================= */

.ism-detail-card {
	overflow: hidden;

	border: 1px solid var(--ism-border);

	border-radius: var(--ism-radius);

	background: #ffffff;

	box-shadow: var(--ism-shadow);

	transition:
		box-shadow 0.3s ease,
		transform 0.3s ease;
}

.ism-detail-card:hover {
	box-shadow: var(--ism-shadow-hover);
}

/* =========================================================
   ARTICLE HEADER
========================================================= */

.ism-detail-header {
	padding: 27px 30px 24px;

	border-bottom: 1px solid #edf2f1;
}

.ism-detail-meta {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 15px;

	margin-bottom: 13px;
}

.ism-category {
	display: inline-flex;

	align-items: center;

	min-height: 25px;

	padding: 5px 9px;

	border-radius: 7px;

	color: var(--ism-primary-dark);

	background: var(--ism-soft);

	font-size: 8px;
	font-weight: 800;

	letter-spacing: 1.25px;
}

.ism-date {
	color: var(--ism-muted);

	font-size: 10px;
}

.ism-date i {
	margin-right: 4px;

	color: var(--ism-primary);
}

.ism-detail-header h2 {
	margin: 0;

	color: var(--ism-dark);

	font-size: clamp(25px, 3vw, 36px);
	line-height: 1.25;

	letter-spacing: -0.7px;
}

.ism-share {
	display: flex;

	align-items: center;

	gap: 7px;

	margin-top: 19px;
}

.ism-share > span {
	margin-right: 5px;

	color: var(--ism-muted);

	font-size: 9px;
}

.ism-share-button {
	width: 30px;
	height: 30px;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	border: 1px solid rgba(10, 183, 163, 0.12);

	border-radius: 50%;

	color: var(--ism-primary-dark) !important;

	background: var(--ism-soft);

	font-size: 10px;

	text-decoration: none !important;

	transition:
		background 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

.ism-share-button:hover {
	color: #fff !important;

	background: var(--ism-primary);

	transform: translateY(-2px);
}

/* =========================================================
   COVER
========================================================= */

.ism-cover {
	margin: 0;

	padding: 24px 24px 0;
}

.ism-cover img {
	display: block;

	width: 100%;
	max-height: 620px;

	object-fit: contain;

	border-radius: 13px;

	background: #f3f7f6;
}

/* =========================================================
   ARTICLE BODY
========================================================= */

.ism-article-body {
	padding: 30px 31px 15px;

	color: var(--ism-text);

	font-size: 14px;
	line-height: 1.85;
}

.ism-article-body p {
	margin-bottom: 1rem;
}

.ism-article-body h1,
.ism-article-body h2,
.ism-article-body h3,
.ism-article-body h4,
.ism-article-body h5,
.ism-article-body h6 {
	margin-top: 1.4rem;
	margin-bottom: 0.7rem;

	color: var(--ism-dark);

	line-height: 1.35;
}

.ism-article-body ul,
.ism-article-body ol {
	margin-top: 1rem;
	margin-bottom: 1rem;

	padding-left: 25px;
}

.ism-article-body ul li {
	list-style: disc;
}

.ism-article-body ol li {
	list-style: decimal;
}

.ism-article-body a {
	color: var(--ism-primary-dark);

	text-decoration: none;

	font-weight: 600;
}

.ism-article-body a:hover {
	text-decoration: underline;
}

.ism-article-body img {
	max-width: 100%;
	height: auto;
}

.ism-article-body table {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
}

/* =========================================================
   DOWNLOAD CARD
========================================================= */

.ism-download-card {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 20px;

	margin: 8px 30px 30px;

	padding: 20px 21px;

	border: 1px solid rgba(10, 183, 163, 0.13);

	border-radius: 14px;

	background: linear-gradient(135deg, #effaf8, #ffffff);
}

.ism-download-copy > span {
	display: block;

	margin-bottom: 4px;

	color: var(--ism-primary-dark);

	font-size: 8px;
	font-weight: 800;

	letter-spacing: 1.3px;
}

.ism-download-copy h3 {
	margin: 0 0 4px;

	color: var(--ism-dark);

	font-size: 16px;
}

.ism-download-copy p {
	margin: 0;

	color: var(--ism-muted);

	font-size: 10px;
	line-height: 1.55;
}

.ism-download-button {
	flex: 0 0 auto;

	display: inline-flex;

	align-items: center;
	gap: 7px;

	padding: 10px 14px;

	border-radius: 9px;

	color: #fff !important;

	background: var(--ism-primary);

	font-size: 10px;
	font-weight: 700;

	text-decoration: none !important;

	transition:
		background 0.2s ease,
		transform 0.2s ease;
}

.ism-download-button:hover {
	color: #fff !important;

	background: var(--ism-primary-dark);

	transform: translateY(-2px);
}

/* =========================================================
   SIDEBAR
========================================================= */

.ism-sidebar {
	position: sticky;

	top: 22px;
}

.ism-sidebar-header {
	margin-bottom: 16px;
	padding: 3px 3px 0;
}

.ism-sidebar-eyebrow {
	margin-bottom: 7px;

	color: var(--ism-primary-dark);

	font-size: 8px;
	font-weight: 800;

	letter-spacing: 1.5px;
}

.ism-sidebar-header h2 {
	margin: 0 0 8px;

	color: var(--ism-dark);

	font-size: 24px;
	line-height: 1.25;

	letter-spacing: -0.4px;
}

.ism-sidebar-header p {
	margin: 0;

	color: var(--ism-muted);

	font-size: 11px;
	line-height: 1.65;
}

/* =========================================================
   RELATED CARDS
========================================================= */

.ism-related-list {
	display: flex;

	flex-direction: column;

	gap: 13px;
}

.ism-related-card {
	display: grid;

	grid-template-columns: 105px 1fr;

	min-height: 105px;

	overflow: hidden;

	border: 1px solid var(--ism-border);

	border-radius: 14px;

	background: #fff;

	box-shadow: 0 9px 28px rgba(16, 42, 42, 0.045);

	text-decoration: none !important;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.ism-related-card:hover {
	transform: translateY(-3px);

	box-shadow: 0 17px 38px rgba(16, 42, 42, 0.09);
}

.ism-related-image {
	overflow: hidden;

	background: #edf7f5;
}

.ism-related-image img {
	width: 100%;
	height: 100%;

	display: block;

	object-fit: cover;

	transition: transform 0.35s ease;
}

.ism-related-card:hover .ism-related-image img {
	transform: scale(1.05);
}

.ism-related-content {
	display: flex;

	flex-direction: column;

	padding: 12px 13px;
}

.ism-related-content > span {
	margin-bottom: 4px;

	color: var(--ism-primary-dark);

	font-size: 7px;
	font-weight: 800;

	letter-spacing: 1.2px;
}

.ism-related-content h3 {
	margin: 0;

	color: var(--ism-dark);

	font-size: 11px;
	line-height: 1.45;
}

.ism-related-link {
	display: flex;

	align-items: center;
	justify-content: space-between;

	margin-top: auto;
	padding-top: 7px;

	color: var(--ism-muted);

	font-size: 8px;
}

.ism-related-link i {
	color: var(--ism-primary);

	transition: transform 0.2s ease;
}

.ism-related-card:hover .ism-related-link i {
	transform: translateX(3px);
}

.ism-related-empty {
	padding: 20px;

	border: 1px dashed rgba(16, 42, 42, 0.12);

	border-radius: 13px;

	color: var(--ism-muted);

	background: #fff;

	font-size: 11px;

	text-align: center;
}

/* =========================================================
   EMPTY STATE
========================================================= */

.ism-empty {
	max-width: 650px;

	margin: 20px auto 0;

	padding: 48px 30px;

	border: 1px solid var(--ism-border);

	border-radius: 18px;

	background: #fff;

	box-shadow: var(--ism-shadow);

	text-align: center;
}

.ism-empty-icon {
	width: 58px;
	height: 58px;

	display: flex;

	align-items: center;
	justify-content: center;

	margin: 0 auto 15px;

	border-radius: 16px;

	color: var(--ism-primary-dark);

	background: var(--ism-soft);

	font-size: 22px;
}

.ism-empty > span {
	color: var(--ism-primary-dark);

	font-size: 8px;
	font-weight: 800;

	letter-spacing: 1.5px;
}

.ism-empty h2 {
	margin: 10px 0 7px;

	color: var(--ism-dark);

	font-size: 26px;
}

.ism-empty p {
	max-width: 450px;

	margin: 0 auto;

	color: var(--ism-muted);

	font-size: 12px;
	line-height: 1.7;
}

.ism-empty-button {
	display: inline-flex;

	align-items: center;
	gap: 7px;

	margin-top: 18px;
	padding: 10px 15px;

	border-radius: 9px;

	color: #fff !important;

	background: var(--ism-primary);

	font-size: 10px;
	font-weight: 700;

	text-decoration: none !important;
}

.ism-empty-button:hover {
	color: #fff !important;

	background: var(--ism-primary-dark);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
	.ism-detail-layout {
		grid-template-columns: 1fr;
	}

	.ism-sidebar {
		position: static;

		margin-top: 5px;
	}

	.ism-related-list {
		display: grid;

		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
	.modern-ism {
		padding: 38px 0 65px;
	}

	.ism-detail-card {
		border-radius: 15px;
	}

	.ism-detail-header {
		padding: 21px 19px;
	}

	.ism-detail-meta {
		align-items: flex-start;

		flex-direction: column;

		gap: 8px;
	}

	.ism-detail-header h2 {
		font-size: 25px;
	}

	.ism-cover {
		padding: 15px 15px 0;
	}

	.ism-cover img {
		border-radius: 10px;
	}

	.ism-article-body {
		padding: 23px 19px 12px;

		font-size: 13px;

		line-height: 1.8;
	}

	.ism-download-card {
		align-items: flex-start;

		flex-direction: column;

		margin: 7px 19px 19px;

		padding: 18px;
	}

	.ism-download-button {
		width: 100%;

		justify-content: center;
	}

	.ism-sidebar {
		margin-top: 34px;
	}

	.ism-sidebar-header h2 {
		font-size: 22px;
	}

	.ism-related-list {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
	.ism-detail-header h2 {
		font-size: 22px;
	}

	.ism-article-body {
		font-size: 12px;
	}

	.ism-related-card {
		grid-template-columns: 92px 1fr;
	}
}

/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
	.page-header::before,
	.ism-detail-card,
	.ism-share-button,
	.ism-download-button,
	.ism-related-card,
	.ism-related-image img,
	.ism-related-link i {
		transition: none !important;
	}
}