/* =========================================================
   LAPORAN KEUANGAN
   Modern - Minimal - Elegant - Informative
========================================================= */

.modern-laporan-keuangan {
	--lk-primary: #0b8f86;
	--lk-primary-dark: #08756e;
	--lk-accent: #12a99b;

	--lk-dark: #1d2424;
	--lk-text: #596967;
	--lk-muted: #899694;

	--lk-bg: #f5f9f8;
	--lk-border: #e2ecea;

	color: var(--lk-dark);

	background: #fff;

	overflow: hidden;
}

/* =========================================================
   CONTAINER
========================================================= */

.modern-laporan-keuangan .lk-container {
	width: min(1180px, calc(100% - 40px));

	margin: 0 auto;
}

/* =========================================================
   INTRO
========================================================= */

.lk-intro {
	padding: 85px 0 55px;

	background: #fff;
}

.lk-intro-grid {
	display: grid;

	grid-template-columns: 1fr 420px;

	gap: 80px;

	align-items: end;
}

.lk-section-kicker {
	display: inline-block;

	margin-bottom: 13px;

	color: var(--lk-primary);

	font-size: 11px;

	font-weight: 700;

	letter-spacing: 1.8px;

	text-transform: uppercase;
}

.lk-intro h2 {
	margin: 0;

	max-width: 600px;

	font-size: clamp(32px, 4vw, 48px);

	line-height: 1.1;

	letter-spacing: -1.5px;

	font-weight: 700;
}

.lk-intro h2 span {
	color: var(--lk-primary);
}

.lk-intro-description {
	padding-bottom: 4px;
}

.lk-intro-description p {
	margin: 0;

	color: var(--lk-text);

	font-size: 14px;

	line-height: 1.85;
}

/* =========================================================
   LIST SECTION
========================================================= */

.lk-list-section {
	padding: 30px 0 100px;

	background: #fff;
}

.lk-list-header {
	display: flex;

	align-items: flex-end;

	justify-content: space-between;

	gap: 30px;

	margin-bottom: 30px;

	padding-bottom: 22px;

	border-bottom: 1px solid var(--lk-border);
}

.lk-list-header h2 {
	margin: 0;

	font-size: 28px;

	line-height: 1.2;

	letter-spacing: -0.7px;
}

.lk-total-document {
	display: flex;

	align-items: baseline;

	gap: 8px;

	color: var(--lk-muted);
}

.lk-total-document strong {
	color: var(--lk-primary);

	font-size: 25px;

	font-weight: 700;
}

.lk-total-document span {
	font-size: 12px;
}

/* =========================================================
   YEAR LIST
========================================================= */

.lk-year-list {
	display: flex;

	flex-direction: column;

	gap: 15px;
}

/* =========================================================
   YEAR CARD
========================================================= */

.lk-year-card {
	display: grid;

	grid-template-columns: 145px 1fr auto;

	align-items: center;

	gap: 35px;

	min-height: 175px;

	padding: 28px 30px;

	border-radius: 20px;

	background: #fff;

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

.lk-year-card:hover {
	transform: translateY(-3px);

	border-color: rgba(11, 143, 134, 0.25);

	box-shadow: 0 18px 45px rgba(15, 67, 63, 0.08);
}

/* =========================================================
   LATEST CARD
========================================================= */

.lk-year-card.is-latest {
	border-color: rgba(11, 143, 134, 0.22);

	background: linear-gradient(
		110deg,
		#f3fbf9 0%,

		#ffffff 55%
	);
}

/* =========================================================
   YEAR NUMBER
========================================================= */

.lk-year-number {
	display: flex;

	flex-direction: column;

	justify-content: center;

	padding-right: 30px;

	border-right: 1px solid var(--lk-border);
}

.lk-year-number span {
	margin-bottom: 3px;

	color: var(--lk-muted);

	font-size: 10px;

	font-weight: 700;

	letter-spacing: 1.5px;
}

.lk-year-number strong {
	color: var(--lk-primary);

	font-size: 46px;

	line-height: 1;

	font-weight: 700;

	letter-spacing: -2px;
}

/* =========================================================
   CONTENT
========================================================= */

.lk-year-content {
	min-width: 0;
}

.lk-latest-badge {
	display: inline-flex;

	align-items: center;

	gap: 7px;

	margin-bottom: 8px;

	padding: 5px 9px;

	color: var(--lk-primary);

	background: #eaf7f5;

	border-radius: 50px;

	font-size: 9px;

	font-weight: 700;

	text-transform: uppercase;

	letter-spacing: 0.7px;
}

.lk-latest-badge span {
	width: 6px;

	height: 6px;

	border-radius: 50%;

	background: #27b58a;
}

.lk-year-content h3 {
	margin: 0;

	color: var(--lk-dark);

	font-size: 21px;

	line-height: 1.3;

	letter-spacing: -0.4px;
}

.lk-year-content p {
	max-width: 650px;

	margin: 8px 0 0;

	color: var(--lk-text);

	font-size: 13px;

	line-height: 1.65;
}

/* =========================================================
   META
========================================================= */

.lk-year-meta {
	display: flex;

	flex-wrap: wrap;

	gap: 18px;

	margin-top: 14px;
}

.lk-year-meta span {
	display: inline-flex;

	align-items: center;

	gap: 6px;

	color: var(--lk-muted);

	font-size: 10px;
}

.lk-year-meta i {
	color: var(--lk-primary);

	font-size: 11px;
}

/* =========================================================
   ACTION
========================================================= */

.lk-year-action {
	display: flex;

	align-items: center;

	gap: 8px;
}

.lk-year-btn {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-height: 43px;

	border-radius: 10px;

	text-decoration: none;

	font-size: 11px;

	font-weight: 700;

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

.lk-year-btn-primary {
	gap: 10px;

	padding: 0 16px;

	color: #fff;

	background: var(--lk-primary);
}

.lk-year-btn-primary:hover {
	color: #fff;

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

	transform: translateY(-2px);

	box-shadow: 0 9px 20px rgba(11, 143, 134, 0.2);
}

.lk-year-btn-download {
	width: 43px;

	color: var(--lk-primary);

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

	background: #fff;
}

.lk-year-btn-download:hover {
	color: var(--lk-primary);

	background: #f1f9f7;

	border-color: rgba(11, 143, 134, 0.25);

	transform: translateY(-2px);
}

/* =========================================================
   INFORMATION
========================================================= */

.lk-information {
	padding: 100px 0;

	background: linear-gradient(
		180deg,
		#f5f9f8 0%,

		#edf6f4 100%
	);
}

.lk-information-grid {
	display: grid;

	grid-template-columns: 0.9fr 1.1fr;

	gap: 100px;

	align-items: start;
}

.lk-information-intro h2 {
	max-width: 460px;

	margin: 0;

	font-size: clamp(31px, 3.5vw, 45px);

	line-height: 1.1;

	letter-spacing: -1.5px;
}

.lk-information-intro h2 span {
	color: var(--lk-primary);
}

.lk-information-intro p {
	max-width: 470px;

	margin: 24px 0 0;

	color: var(--lk-text);

	font-size: 14px;

	line-height: 1.9;
}

/* =========================================================
   INFORMATION POINTS
========================================================= */

.lk-information-points {
	border-top: 1px solid var(--lk-border);
}

.lk-point {
	display: grid;

	grid-template-columns: 50px 1fr;

	gap: 20px;

	padding: 27px 0;

	border-bottom: 1px solid var(--lk-border);
}

.lk-point-number {
	color: var(--lk-primary);

	font-size: 12px;

	font-weight: 800;

	letter-spacing: 1px;
}

.lk-point h3 {
	margin: 0;

	font-size: 17px;
}

.lk-point p {
	margin: 7px 0 0;

	color: var(--lk-text);

	font-size: 13px;

	line-height: 1.7;
}

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

.lk-empty {
	padding: 80px 20px;

	text-align: center;

	border: 1px dashed var(--lk-border);

	border-radius: 20px;

	background: #fafdfc;
}

.lk-empty-icon {
	margin-bottom: 15px;

	color: var(--lk-primary);

	font-size: 35px;
}

.lk-empty h3 {
	margin: 0;

	font-size: 20px;
}

.lk-empty p {
	margin: 8px 0 0;

	color: var(--lk-muted);

	font-size: 13px;
}

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

@media (max-width: 991px) {
	.lk-intro-grid {
		grid-template-columns: 1fr;

		gap: 25px;
	}

	.lk-year-card {
		grid-template-columns: 115px 1fr;

		gap: 25px;
	}

	.lk-year-action {
		grid-column: 2;

		padding-top: 5px;
	}

	.lk-information-grid {
		grid-template-columns: 1fr;

		gap: 55px;
	}
}

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

@media (max-width: 767px) {
	.modern-laporan-keuangan .lk-container {
		width: min(100% - 30px, 600px);
	}

	.lk-intro {
		padding: 60px 0 40px;
	}

	.lk-intro h2 {
		font-size: 34px;
	}

	.lk-list-section {
		padding: 20px 0 70px;
	}

	.lk-list-header {
		align-items: flex-start;

		flex-direction: column;

		gap: 10px;
	}

	.lk-list-header h2 {
		font-size: 25px;
	}

	.lk-year-card {
		grid-template-columns: 1fr;

		gap: 20px;

		padding: 24px;

		border-radius: 17px;
	}

	.lk-year-number {
		padding: 0 0 18px;

		border-right: 0;

		border-bottom: 1px solid var(--lk-border);
	}

	.lk-year-number strong {
		font-size: 42px;
	}

	.lk-year-content h3 {
		font-size: 19px;
	}

	.lk-year-action {
		grid-column: auto;

		width: 100%;

		padding: 0;
	}

	.lk-year-btn-primary {
		flex: 1;
	}

	.lk-information {
		padding: 70px 0;
	}

	.lk-information-grid {
		gap: 45px;
	}

	.lk-information-intro h2 {
		font-size: 34px;
	}

	.lk-point {
		grid-template-columns: 38px 1fr;

		gap: 12px;
	}
}

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

@media (max-width: 420px) {
	.lk-intro h2 {
		font-size: 31px;
	}

	.lk-year-card {
		padding: 20px;
	}

	.lk-year-number strong {
		font-size: 38px;
	}

	.lk-year-content p {
		font-size: 12px;
	}
}