/* =========================================================
   DITJEN KESLAN
   MODERN HEADER & NAVBAR
========================================================= */

:root {
	--keslan-primary: #087f78;
	--keslan-primary-dark: #05635e;
	--keslan-accent: #d1d342;

	--keslan-text: #173b3a;
	--keslan-muted: #71817f;

	--keslan-border: #e7eeee;
	--keslan-soft: #f5f9f8;

	--keslan-white: #ffffff;
}

/* =========================================================
   GLOBAL HEADER
========================================================= */

.header-area {
	position: relative;
	z-index: 9999;
	width: 100%;
}

/* =========================================================
   TOP BAR
========================================================= */

.header-area .keslan-topbar {
	width: 100%;
	height: 34px;

	background: var(--keslan-primary);

	color: #ffffff;

	font-size: 12px;
}

.header-area .keslan-topbar-inner {
	width: 100%;
	max-width: 1280px;

	height: 34px;

	margin: 0 auto;
	padding: 0 24px;

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

	box-sizing: border-box;
}

.header-area .keslan-government {
	display: flex;
	align-items: center;

	gap: 8px;

	white-space: nowrap;
}

.header-area .keslan-government i {
	font-size: 13px;
}

.header-area .keslan-top-links {
	display: flex;
	align-items: center;

	gap: 16px;
}

.header-area .keslan-top-links a {
	color: #ffffff !important;

	text-decoration: none;

	transition: opacity 0.2s ease;
}

.header-area .keslan-top-links a:hover {
	opacity: 0.75;
}

.header-area .keslan-top-divider {
	opacity: 0.35;
}

/* =========================================================
   MAIN NAVBAR
========================================================= */

.header-area .news-main-menu {
	position: relative;

	width: 100%;

	background: rgba(255, 255, 255, 0.98);

	border-bottom: 1px solid var(--keslan-border);

	box-shadow: 0 3px 18px rgba(0, 60, 55, 0.07);

	z-index: 9999;
}

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

.header-area .classy-nav-container {
	width: 100%;
	max-width: 1280px;

	margin: 0 auto;

	background: transparent;
}

/* =========================================================
   NAVBAR
========================================================= */

.header-area .classy-navbar {
	height: 74px !important;
	min-height: 74px !important;

	padding: 0 24px !important;

	box-sizing: border-box;

	display: flex;
	align-items: center;
}

/* =========================================================
   LOGO
========================================================= */

.header-area .logo-kemkes {
	display: flex;

	align-items: center;

	flex-shrink: 0;

	text-decoration: none;
}

.header-area .logo-kemkes img {
	display: block;

	width: auto;

	max-width: 205px;
	max-height: 56px;

	object-fit: contain;
}

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

.header-area .nav-content {
	flex: 1;

	display: flex;
	align-items: center;
	justify-content: flex-end;

	min-width: 0;

	margin-left: 45px;
}

/* =========================================================
   MENU DESKTOP
========================================================= */

.header-area .classynav > ul {
	margin: 0;
	padding: 0;

	list-style: none;
}

.header-area .classynav > ul > li {
	position: relative;
}

/* =========================================================
   MENU UTAMA
========================================================= */

.header-area .classynav > ul > li > a {
	position: relative !important;

	display: flex !important;
	align-items: center !important;

	height: 68px !important;
	min-height: 68px !important;

	padding: 0 12px !important;

	box-sizing: border-box !important;

	color: #173b3a !important;

	font-size: 13px !important;
	font-weight: 600 !important;

	text-decoration: none !important;

	white-space: nowrap !important;

	border-radius: 0 !important;

	transition:
		color 0.2s ease,
		background 0.2s ease !important;
}

/* =========================================================
   ACTIVE / HOVER MENU
========================================================= */

.header-area .classynav > ul > li:hover > a,
.header-area .classynav > ul > li.active > a {
	color: #087f78 !important;

	background: #f3f9f8 !important;
}

/* =========================================================
   GARIS ACTIVE
   Tetap berada DI DALAM navbar
========================================================= */

.header-area .classynav > ul > li > a::before {
	content: "";

	position: absolute;

	left: 14px;
	right: 14px;

	bottom: 0 !important;

	height: 3px !important;

	background: #087f78 !important;

	border-radius: 3px 3px 0 0 !important;

	transform: scaleX(0);

	transform-origin: center;

	transition: transform 0.2s ease !important;
}

.header-area .classynav > ul > li:hover > a::before,
.header-area .classynav > ul > li.active > a::before {
	transform: scaleX(1);
}

/* =========================================================
   DROPDOWN MENU
========================================================= */

.header-area .classynav ul.dropdown {
	min-width: 230px !important;

	margin: 0 !important;
	padding: 8px !important;

	background: #ffffff !important;

	border: 1px solid #e8efed !important;

	/* Semua sudut rounded */
	border-radius: 14px !important;

	box-shadow: 0 14px 35px rgba(0, 60, 55, 0.14) !important;

	overflow: visible !important;

	z-index: 99999 !important;
}

/* =========================================================
   ITEM DROPDOWN
========================================================= */

.header-area .classynav ul.dropdown li {
	position: relative !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;
}

/* Link dropdown */

.header-area .classynav ul.dropdown li > a {
	position: relative !important;

	display: flex !important;

	align-items: center !important;

	width: 100% !important;

	min-height: 44px !important;

	box-sizing: border-box !important;

	margin: 0 !important;

	padding: 10px 14px !important;

	border: 0 !important;

	border-radius: 9px !important;

	background: transparent !important;

	color: #294b49 !important;

	font-size: 13px !important;

	font-weight: 500 !important;

	line-height: 1.4 !important;

	text-decoration: none !important;

	white-space: nowrap !important;

	transition:
		background 0.2s ease,
		color 0.2s ease,
		padding-left 0.2s ease !important;
}

/* =========================================================
   HOVER ITEM
========================================================= */

.header-area .classynav ul.dropdown li > a:hover {
	background: #edf8f6 !important;

	color: #087f78 !important;

	padding-left: 18px !important;
}

/* =========================================================
   SUBMENU LEVEL 2
========================================================= */

@media (min-width: 992px) {
	.header-area .classynav ul.dropdown li > ul.dropdown {
		position: absolute !important;

		top: -8px !important;

		left: calc(100% + 8px) !important;

		min-width: 275px !important;

		margin: 0 !important;

		padding: 8px !important;

		background: #ffffff !important;

		border: 1px solid #e8efed !important;

		border-radius: 14px !important;

		box-shadow: 0 14px 35px rgba(0, 60, 55, 0.14) !important;

		z-index: 100000 !important;

		overflow: visible !important;
	}

	/* =====================================================
       AREA PENGHUBUNG ANTARA MENU
       supaya submenu tidak hilang ketika mouse melewati
       jarak 8px
    ===================================================== */

	.header-area .classynav ul.dropdown li > ul.dropdown::before {
		content: "";

		position: absolute;

		top: 0;

		left: -9px;

		width: 10px;

		height: 100%;

		background: transparent;
	}

	/* =====================================================
       HOVER LEVEL 2
    ===================================================== */

	.header-area .classynav ul.dropdown li > ul.dropdown li > a:hover {
		background: #edf8f6 !important;

		color: #087f78 !important;

		padding-left: 18px !important;
	}
}

/* =========================================================
   ARROW UNTUK MENU YANG MEMILIKI SUBMENU
========================================================= */

@media (min-width: 992px) {
	.header-area .classynav ul.dropdown > li.has-submenu > a {
		padding-right: 35px !important;
	}

	.header-area .classynav ul.dropdown > li.has-submenu > a::after {
		content: "\f105" !important;

		position: absolute !important;

		top: 50% !important;

		right: 14px !important;

		transform: translateY(-50%) !important;

		font-family: FontAwesome !important;

		font-size: 12px !important;

		font-weight: normal !important;

		color: #087f78 !important;

		display: block !important;
	}
}

/* =========================================================
   SEARCH
========================================================= */

.header-area .top-meta-data {
	display: flex !important;
	align-items: center !important;

	gap: 8px;

	margin-left: 6px;

	flex-shrink: 0;
}

/* Container */

.header-area .top-search-area {
	position: relative !important;

	width: 210px !important;
	height: 42px !important;

	flex-shrink: 0;
}

/* Form */

.header-area .top-search-area form {
	position: relative !important;

	width: 100% !important;
	height: 42px !important;

	margin: 0 !important;
	padding: 0 !important;
}

/* Input */

.header-area .top-search-area input[type="text"] {
	position: relative !important;

	display: block !important;

	width: 100% !important;
	height: 42px !important;

	box-sizing: border-box !important;

	margin: 0 !important;

	padding: 0 48px 0 17px !important;

	border: 1px solid #dfe9e7 !important;

	border-radius: 23px !important;

	background: #f7faf9 !important;

	color: #244442 !important;

	font-family: inherit !important;
	font-size: 12px !important;

	line-height: 42px !important;

	outline: none !important;

	box-shadow: none !important;
}

/* Placeholder */

.header-area .top-search-area input::placeholder {
	color: #82918f !important;

	opacity: 1 !important;
}

/* Focus */

.header-area .top-search-area input:focus {
	border-color: #087f78 !important;

	background: #ffffff !important;

	box-shadow: 0 0 0 3px rgba(8, 127, 120, 0.08) !important;
}

/* =========================================================
   SEARCH BUTTON
========================================================= */

.header-area .top-search-area form button,
.header-area .top-search-area form button.btn,
.header-area .top-search-area button[type="submit"] {
	position: absolute !important;

	top: 4px !important;
	right: 4px !important;

	bottom: auto !important;
	left: auto !important;

	display: flex !important;

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

	width: 34px !important;
	min-width: 34px !important;
	max-width: 34px !important;

	height: 34px !important;
	min-height: 34px !important;
	max-height: 34px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;

	border-radius: 50% !important;

	background: #087f78 !important;

	color: #ffffff !important;

	line-height: 1 !important;

	font-size: 0 !important;

	text-align: center !important;

	box-shadow: none !important;

	transform: none !important;

	z-index: 10 !important;

	cursor: pointer !important;

	overflow: hidden !important;
}

/* Icon */

.header-area .top-search-area form button i,
.header-area .top-search-area form button.btn i {
	display: block !important;

	width: auto !important;
	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #ffffff !important;

	font-family: FontAwesome !important;

	font-size: 14px !important;

	line-height: 1 !important;

	transform: none !important;
}

/* Hover */

.header-area .top-search-area form button:hover,
.header-area .top-search-area form button.btn:hover {
	background: #05635e !important;

	color: #ffffff !important;

	transform: scale(1.04) !important;

	box-shadow: none !important;
}

/* Focus */

.header-area .top-search-area form button:focus,
.header-area .top-search-area form button.btn:focus {
	outline: none !important;

	box-shadow: none !important;
}

/* =========================================================
   LOGIN / LOGOUT
========================================================= */

.header-area .login-btn {
	display: flex !important;

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

	width: 40px !important;
	height: 40px !important;

	min-width: 40px !important;
	max-width: 40px !important;

	min-height: 40px !important;
	max-height: 40px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 1px solid #e2ecea !important;

	border-radius: 50% !important;

	background: #f5f9f8 !important;

	color: #087f78 !important;

	text-decoration: none !important;

	box-shadow: none !important;

	font-size: 14px !important;

	line-height: 1 !important;

	transition:
		background 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease !important;
}

.header-area .login-btn i {
	display: block !important;

	margin: 0 !important;
	padding: 0 !important;

	font-size: 14px !important;

	line-height: 1 !important;

	color: inherit !important;
}

.header-area .login-btn:hover {
	background: #087f78 !important;

	border-color: #087f78 !important;

	color: #ffffff !important;

	transform: translateY(-1px) !important;
}

/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) {
	.header-area .classynav > ul {
		display: flex;
		align-items: center;
	}

	.header-area .classynav > ul > li {
		display: block;
	}

	/* .header-area .logo-hastagg {
		display: none !important;
	} */
}

/* =========================================================
   HASHTAG LOGO
   Logo setelah tombol search
========================================================= */

.header-area .logo-hastagg {
	display: flex !important;

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

	flex-shrink: 0;

	width: auto;
	height: 42px;

	margin-left: 10px;

	text-decoration: none !important;
}

.header-area .logo-hastagg img {
	display: block !important;

	width: auto !important;

	max-width: 120px;
	max-height: 48px;

	object-fit: contain;
}

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

@media (max-width: 1200px) and (min-width: 992px) {
	.header-area .classy-navbar {
		padding: 0 15px !important;
	}

	.header-area .nav-content {
		margin-left: 15px;
	}

	.header-area .classynav > ul > li > a {
		padding: 0 9px;

		font-size: 12px !important;
	}

	.header-area .top-search-area {
		width: 175px;
	}
}

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

@media (max-width: 991px) {
	.header-area .keslan-topbar {
		display: none !important;
	}

	.header-area .classy-navbar {
		height: 68px !important;
		min-height: 68px !important;

		padding: 0 15px !important;
	}

	.header-area .logo-kemkes img {
		max-width: 160px !important;
		max-height: 48px !important;
	}

	.header-area .top-search-area {
		display: none !important;
	}

	.header-area .login-btn {
		display: none !important;
	}

	.header-area .logo-hastagg {
		display: none !important;
	}
}

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

@media (max-width: 480px) {
	.header-area .classy-navbar {
		padding: 0 12px !important;
	}

	.header-area .logo-kemkes img {
		max-width: 145px;
		max-height: 44px;
	}
}

/* =========================================================
   ADMIN MENU - HOVER
========================================================= */

.header-area .classynav > ul > li > a {
	border-radius: 8px 8px 0 0;

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

.header-area .classynav > ul > li:hover > a {
	color: #087f78 !important;

	background: #f4faf9;
}

/* Garis bawah */

.header-area .classynav > ul > li > a::before {
	content: "";

	position: absolute;

	left: 12px;
	right: 12px;
	bottom: 0;

	height: 3px;

	background: #087f78;

	border-radius: 3px 3px 0 0;

	transform: scaleX(0);

	transition: transform 0.2s ease;
}

.header-area .classynav > ul > li:hover > a::before {
	transform: scaleX(1);
}