/* =========================================================
   KESLAN - GLOBAL PAGE HEADER
   File : headerpage.css
   Theme: Minimalis • Modern • Elegan • Informatif
   ========================================================= */

/* =========================================================
   CSS VARIABLES
   ========================================================= */

:root {
	--header-primary: #123f55;
	--header-primary-dark: #0f3447;

	--header-accent: #08b5a4;
	--header-accent-dark: #008b82;

	--header-text: #687570;
	--header-bg-start: #f1f9f8;
	--header-bg-middle: #eef7f6;
	--header-bg-end: #e8f5f3;

	--header-border: #e2eeec;
}

/* =========================================================
   PAGE HEADER
   ========================================================= */

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

	padding: 48px 0 42px;

	background: linear-gradient(
		135deg,
		var(--header-bg-start) 0%,
		var(--header-bg-middle) 55%,
		var(--header-bg-end) 100%
	);

	border-bottom: 1px solid rgba(8, 181, 164, 0.04);
}

/* =========================================================
   DECORATIVE CIRCLE
   ========================================================= */

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

	position: absolute;

	right: -120px;
	top: -180px;

	width: 420px;
	height: 420px;

	border-radius: 50%;

	background: rgba(97, 195, 162, 0.08);

	pointer-events: none;
}

/* Lingkaran kedua agar sedikit lebih hidup */
.page-header::before {
	content: "";

	position: absolute;

	right: 170px;
	bottom: -150px;

	width: 260px;
	height: 260px;

	border-radius: 50%;

	background: rgba(8, 181, 164, 0.035);

	pointer-events: none;
}

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

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

	max-width: 760px;
}

/* =========================================================
   EYEBROW
   ========================================================= */

.page-header-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;

	margin-bottom: 12px;

	color: var(--header-accent-dark);

	font-size: 12px;
	line-height: 1.2;
	font-weight: 800;

	letter-spacing: 1.2px;
	text-transform: uppercase;
}

/* Garis aksen sebelah kiri */

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

	width: 36px;
	height: 4px;

	flex: 0 0 36px;

	border-radius: 10px;

	background: var(--header-accent);
}

/* =========================================================
   TITLE
   ========================================================= */

.page-header h1 {
	margin: 0 0 10px;

	color: var(--header-primary);

	font-size: 40px;
	line-height: 1.1;
	font-weight: 800;

	letter-spacing: -1.4px;
}

/* Highlight title */

.page-header h1 span {
	color: var(--header-accent);
}

/* =========================================================
   DESCRIPTION
   ========================================================= */

.page-header p {
	max-width: 650px;

	margin: 0;

	color: var(--header-text);

	font-size: 15px;
	line-height: 1.75;
	font-weight: 400;
}

/* =========================================================
   OPTIONAL: SMALL PAGE HEADER
   Digunakan apabila deskripsi sangat pendek
   ========================================================= */

.page-header.page-header-sm {
	padding: 38px 0 34px;
}

/* =========================================================
   OPTIONAL: NO DESCRIPTION
   ========================================================= */

.page-header.no-description {
	padding-bottom: 40px;
}

/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 991px) {
	.page-header {
		padding: 42px 0 38px;
	}

	.page-header-content {
		max-width: 680px;
	}

	.page-header h1 {
		font-size: 36px;
		letter-spacing: -1px;
	}

	.page-header p {
		font-size: 14.5px;
		line-height: 1.7;
	}

	.page-header::after {
		right: -160px;
		top: -180px;

		width: 380px;
		height: 380px;
	}
}

/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 767px) {
	.page-header {
		padding: 34px 0 32px;
	}

	.page-header-content {
		max-width: 100%;
	}

	.page-header-eyebrow {
		gap: 10px;

		margin-bottom: 10px;

		font-size: 10.5px;
		letter-spacing: 1px;
	}

	.page-header-eyebrow::before {
		width: 28px;
		height: 3px;

		flex-basis: 28px;
	}

	.page-header h1 {
		margin-bottom: 8px;

		font-size: 30px;
		line-height: 1.15;

		letter-spacing: -0.8px;
	}

	.page-header p {
		max-width: 100%;

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

	.page-header::after {
		right: -180px;
		top: -170px;

		width: 330px;
		height: 330px;
	}

	.page-header::before {
		right: 80px;
		bottom: -170px;

		width: 220px;
		height: 220px;
	}
}

/* =========================================================
   RESPONSIVE - SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
	.page-header {
		padding: 30px 0 28px;
	}

	.page-header h1 {
		font-size: 27px;
	}

	.page-header p {
		font-size: 13px;
	}

	.page-header-eyebrow {
		font-size: 10px;
	}
}