/* =========================================================
   IEM HEADER - GLASSMORPHISM
========================================================= */

.iem-header {
	position: sticky;
	top: 12px;
	z-index: 9999;

	width: calc(100% - 32px);
	max-width: 1240px;
	margin: 12px auto 0;

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

	-webkit-backdrop-filter: blur(22px) saturate(180%);
backdrop-filter: blur(22px) saturate(180%);

	border: 1px solid rgba(255, 255, 255, 0.62);
	border-radius: 22px;

	box-shadow:
	0 10px 30px rgba(15, 23, 42, 0.08),
	inset 0 1px 0 rgba(255, 255, 255, 0.55);

	overflow: visible;

	transition:
		background .3s ease,
		box-shadow .3s ease,
		transform .3s ease,
		border-color .3s ease;
}


/* =========================================================
   HEADER INNER
========================================================= */

.iem-header__inner {
	position: relative;

	width: 100%;
	min-height: 78px;

	padding: 0 20px;

	display: flex;
	align-items: center;
	gap: 22px;
}


/* =========================================================
   BRAND AREA
========================================================= */

.iem-header__brand-area {
	display: flex;
	align-items: center;

	flex: 0 0 auto;
}

.iem-header__brand {
	display: inline-flex;
	align-items: center;

	text-decoration: none;
	flex: 0 0 auto;
}

.iem-header__logo {
	display: block;

	width: auto;
	max-width: 220px;
	max-height: 62px;

	object-fit: contain;
}

.iem-header__text-logo {
	font-size: 26px;
	font-weight: 800;
	line-height: 1;

	color: #0d4d78;

	white-space: nowrap;
}


/* =========================================================
   DESKTOP NAV WRAPPER
========================================================= */

.iem-header__desktop-nav {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 1 1 auto;
	min-width: 0;
}


/* =========================================================
   NAVIGATION
========================================================= */

.iem-header__nav {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-width: 0;
}

.iem-header__menu,
.iem-drawer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.iem-header__menu {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 28px;
}

.iem-header__menu li,
.iem-drawer__menu li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.iem-header__menu a {
	position: relative;

	display: inline-flex;
	align-items: center;

	text-decoration: none;

	color: #263244;

	font-size: 14px;
	font-weight: 600;

	letter-spacing: -0.01em;

	white-space: nowrap;

	transition:
		color .2s ease,
		opacity .2s ease;
}

.iem-header__menu a::after {
	content: "";

	position: absolute;

	left: 50%;
	bottom: -8px;

	width: 0;
	height: 2px;

	background: #0d4d78;

	border-radius: 99px;

	transform: translateX(-50%);

	transition: width .22s ease;
}

.iem-header__menu a:hover {
	color: #0d4d78;
}

.iem-header__menu a:hover::after {
	width: 100%;
}


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

.iem-header__mobile-left {
	display: none;
	align-items: center;
	flex: 0 0 auto;
}


/* =========================================================
   RIGHT ACTIONS
========================================================= */

.iem-header__actions {
	display: flex;
	align-items: center;

	gap: 8px;

	flex: 0 0 auto;

	margin-left: auto;
}


/* =========================================================
   GLASS ICON BUTTONS
========================================================= */

.iem-header__icon-btn {
	width: 44px;
	height: 44px;

	padding: 0;

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

	border-radius: 14px;

	border: 1px solid rgba(255, 255, 255, 0.72);

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

	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);

	box-shadow:
		0 5px 16px rgba(15, 23, 42, 0.07),
		inset 0 1px 0 rgba(255, 255, 255, 0.80);

	cursor: pointer;

	transition:
		background .2s ease,
		transform .2s ease,
		box-shadow .2s ease,
		border-color .2s ease;
}

.iem-header__icon-btn:hover {
	background: rgba(255, 255, 255, 0.74);

	transform: translateY(-1px);

	box-shadow:
		0 8px 22px rgba(15, 23, 42, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.iem-header__icon-btn:active {
	transform: translateY(0) scale(.96);
}

.iem-header__icon-btn svg {
	width: 24px;
	height: 24px;

	display: block;

	fill: #0d4d78;
}


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

.iem-header__search-wrapper {
	width: 100%;
}


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

.iem-header__search-panel {
	margin: 0 10px 10px;

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

	-webkit-backdrop-filter: blur(22px) saturate(180%);
	backdrop-filter: blur(22px) saturate(180%);

	border-top: 1px solid rgba(255, 255, 255, 0.65);

	border-radius: 0 0 16px 16px;

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.55);
}

.iem-header__search-form {
	width: 100%;

	margin: 0 auto;
	padding: 12px 12px 14px;

	display: flex;
	align-items: center;

	gap: 10px;
}

.iem-header__search-live {
	position: relative;

	flex: 1 1 auto;
	min-width: 0;
}

.iem-header__search-input {
	width: 100%;
	height: 48px;

	padding: 0 16px;

	border-radius: 14px;

	border: 1px solid rgba(13, 77, 120, 0.14);

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

	color: #1f2937;

	font-size: 15px;

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.82),
		0 4px 12px rgba(15,23,42,.04);

	transition:
		border-color .2s ease,
		box-shadow .2s ease,
		background .2s ease;
}

.iem-header__search-input::placeholder {
	color: #8a94a3;
}

.iem-header__search-input:focus {
	outline: none;

	border-color: rgba(13, 77, 120, 0.45);

	background: rgba(255,255,255,.94);

	box-shadow:
		0 0 0 4px rgba(13, 77, 120, 0.08),
		inset 0 1px 0 rgba(255,255,255,.94);
}

.iem-header__search-submit {
	height: 48px;

	padding: 0 22px;

	border: 0;
	border-radius: 14px;

	background: #0d4d78;
	color: #fff;

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

	cursor: pointer;
	white-space: nowrap;

	box-shadow:
		0 7px 20px rgba(13, 77, 120, 0.20);

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

.iem-header__search-submit:hover {
	background: #093e61;

	transform: translateY(-1px);

	box-shadow:
		0 10px 24px rgba(13, 77, 120, 0.26);
}


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

.iem-live-search-results {
	position: absolute;

	top: calc(100% + 8px);
	left: 0;
	right: 0;

	z-index: 10000;

	padding: 8px;

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

	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);

	border: 1px solid rgba(255, 255, 255, 0.72);

	border-radius: 16px;

	box-shadow:
		0 18px 38px rgba(15, 23, 42, 0.14),
		inset 0 1px 0 rgba(255,255,255,.82);
}

.iem-live-search-result {
	display: flex;
	align-items: center;

	gap: 12px;

	padding: 10px;

	border-radius: 12px;

	text-decoration: none;

	color: #222;

	transition:
		background .2s ease,
		transform .2s ease;
}

.iem-live-search-result:hover,
.iem-live-search-result.is-active {
	background: rgba(13, 77, 120, 0.07);

	transform: translateX(2px);
}

.iem-live-search-thumb {
	width: 56px;
	height: 56px;

	flex: 0 0 56px;

	border-radius: 10px;

	overflow: hidden;

	background: rgba(241, 241, 241, 0.72);
}

.iem-live-search-thumb img {
	width: 100%;
	height: 100%;

	object-fit: cover;

	display: block;
}

.iem-live-search-meta {
	min-width: 0;

	flex: 1 1 auto;
}

.iem-live-search-title {
	margin-bottom: 4px;

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

	line-height: 1.35;

	color: #222;
}

.iem-live-search-sub {
	font-size: 13px;

	line-height: 1.35;

	color: #6b7280;
}

.iem-live-search-empty {
	padding: 12px 10px;

	font-size: 14px;

	color: #6b7280;
}


/* =========================================================
   DRAWER OVERLAY
========================================================= */

.iem-drawer-overlay {
	position: fixed;

	inset: 0;

	z-index: 9998;

	background: rgba(9, 18, 31, 0.42);

	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);

	opacity: 0;
	visibility: hidden;

	transition:
		opacity .25s ease,
		visibility .25s ease;
}

.iem-drawer-overlay.is-open {
	opacity: 1;
	visibility: visible;
}


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

.iem-drawer {
	position: fixed;

	top: 12px;
	right: 12px;

	width: min(340px, calc(100vw - 24px));
	height: calc(100dvh - 24px);

	z-index: 9999;

	display: flex;
	flex-direction: column;

	overflow: hidden;

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

	-webkit-backdrop-filter: blur(26px) saturate(180%);
	backdrop-filter: blur(26px) saturate(180%);

	border: 1px solid rgba(255, 255, 255, 0.72);

	border-radius: 22px;

	box-shadow:
		-12px 16px 42px rgba(15, 23, 42, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.82);

	transform: translateX(calc(100% + 28px));

	transition: transform .28s ease;
}

.iem-drawer.is-open {
	transform: translateX(0);
}


/* =========================================================
   DRAWER HEADER
========================================================= */

.iem-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 18px;

	border-bottom: 1px solid rgba(13, 77, 120, 0.09);
}

.iem-drawer__title {
	font-size: 19px;
	font-weight: 800;

	color: #0d4d78;
}

.iem-drawer__close {
	width: 40px;
	height: 40px;

	padding: 0;

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

	border-radius: 12px;

	border: 1px solid rgba(255,255,255,.72);

	background: rgba(255,255,255,.42);

	cursor: pointer;

	transition:
		background .2s ease,
		transform .2s ease;
}

.iem-drawer__close:hover {
	background: rgba(255,255,255,.75);
}

.iem-drawer__close:active {
	transform: scale(.95);
}

.iem-drawer__close svg {
	width: 22px;
	height: 22px;

	fill: #0d4d78;
}


/* =========================================================
   DRAWER NAVIGATION
========================================================= */

.iem-drawer__nav {
	padding: 8px 10px 20px;

	overflow-y: auto;
}

.iem-drawer__menu a {
	display: block;

	padding: 14px;

	border-radius: 11px;

	border-bottom: 1px solid rgba(13, 77, 120, 0.06);

	text-decoration: none;

	color: #343b48;

	font-size: 15px;
	font-weight: 600;

	transition:
		background .2s ease,
		color .2s ease,
		transform .2s ease;
}

.iem-drawer__menu a:hover {
	background: rgba(255,255,255,.58);

	color: #0d4d78;

	transform: translateX(2px);
}


/* =========================================================
   RESPONSIVE HELPERS
========================================================= */

.iem-mobile-only {
	display: none !important;
}

.iem-desktop-only {
	display: flex !important;
}


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

@media (max-width: 1024px) {

	.iem-header {
		top: 10px;

		width: calc(100% - 24px);

		margin-top: 10px;

		border-radius: 20px;
	}

	.iem-header__inner {
		min-height: 72px;

		padding: 0 16px;

		gap: 15px;
	}

	.iem-header__logo {
		max-width: 180px;
		max-height: 56px;
	}

	.iem-header__menu {
		gap: 17px;
	}

	.iem-header__menu a {
		font-size: 13px;
	}

	.iem-header__icon-btn {
		width: 42px;
		height: 42px;
	}
}


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

@media (max-width: 767px) {

	.iem-header {
	top: 8px;

	width: calc(100% - 20px);
	margin: 8px 10px 0;

	border-radius: 18px;

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

	-webkit-backdrop-filter: blur(28px) saturate(190%);
	backdrop-filter: blur(28px) saturate(190%);

	border: 1px solid rgba(255,255,255,.72);

	box-shadow:
		0 10px 26px rgba(15, 23, 42, 0.10),
		inset 0 1px 0 rgba(255,255,255,.72);
}


	/* -----------------------------------------------------
	   IMPORTANT:
	   Mobile layout = hamburger | centered logo | search
	----------------------------------------------------- */

	.iem-header__inner {
	position: relative;

	min-height: 58px;

	padding: 0 10px;

	display: grid;

	grid-template-columns: 40px 1fr 40px;

	align-items: center;

	gap: 6px;
}


	/* LEFT HAMBURGER */

	.iem-header__mobile-left {
		display: flex !important;

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

		grid-column: 1;
	}


	/* CENTER BRAND */

	.iem-header__brand-area {
		grid-column: 2;

		display: flex;

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

		min-width: 0;
	}

	.iem-header__brand {
		display: flex;

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

		width: 100%;
	}

	.iem-header__logo {
	width: auto;

	max-width: 180px;
	max-height: 52px;

	object-fit: contain;
}

	.iem-header__text-logo {
		max-width: 100%;

		overflow: hidden;

		text-overflow: ellipsis;

		font-size: 20px;

		white-space: nowrap;
	}


	/* RIGHT SEARCH */

	.iem-header__actions {
		grid-column: 3;

		display: flex;

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

		margin-left: 0;

		gap: 0;
	}


	/* DESKTOP MENU OFF */

	.iem-desktop-only {
		display: none !important;
	}

	.iem-mobile-only {
		display: inline-flex !important;
	}


	/* MOBILE ICON BUTTONS */

	.iem-header__icon-btn {
	width: 38px;
	height: 38px;

	border-radius: 12px;

	background: rgba(255,255,255,.18);

	border: 1px solid rgba(255,255,255,.42);

	box-shadow: none;
}

	.iem-header__icon-btn svg {
		width: 21px;
		height: 21px;
	}


	/* MOBILE SEARCH */

	.iem-header__search-panel {
	margin: 0 6px 6px;

	border-radius: 0 0 14px 14px;

	background: rgba(255,255,255,.46);

	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
}

	.iem-header__search-form {
		padding: 9px 9px 11px;

		flex-direction: column;

		gap: 8px;
	}

	.iem-header__search-input,
	.iem-header__search-submit {
		width: 100%;
		height: 45px;
	}

	.iem-header__search-submit {
		padding: 0 16px;
	}


	/* LIVE RESULTS */

	.iem-live-search-thumb {
		width: 48px;
		height: 48px;

		flex-basis: 48px;
	}

	.iem-live-search-title {
		font-size: 13px;
	}

	.iem-live-search-sub {
		font-size: 12px;
	}


	/* MOBILE DRAWER */

	.iem-drawer {
		top: 10px;
		right: 10px;

		width: calc(100vw - 20px);
		height: calc(100dvh - 20px);

		border-radius: 20px;
	}
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

	.iem-header__inner {
		grid-template-columns: 40px 1fr 40px;

		padding: 0 8px;
	}

	.iem-header__logo {
		max-width: 145px;
		max-height: 45px;
	}

	.iem-header__icon-btn {
		width: 38px;
		height: 38px;
	}
}

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

.iem-header__menu > li {
	position: relative;
}

.iem-header__menu li.menu-item-has-children > a {
	padding-right: 16px;
}

.iem-header__menu li.menu-item-has-children > a::before {
	content: "";

	position: absolute;
	right: 0;
	top: 50%;

	width: 6px;
	height: 6px;

	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;

	transform:
		translateY(-65%)
		rotate(45deg);

	transition: transform .2s ease;
}

.iem-header__menu .sub-menu {
	position: absolute;

	top: calc(100% + 18px);
	left: 50%;

	width: max-content;
	min-width: 220px;

	margin: 0;
	padding: 8px;

	list-style: none;

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

	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);

	border: 1px solid rgba(255,255,255,.72);

	border-radius: 16px;

	box-shadow:
		0 18px 42px rgba(15,23,42,.14),
		inset 0 1px 0 rgba(255,255,255,.75);

	opacity: 0;
	visibility: hidden;

	transform:
		translate(-50%, -6px);

	transition:
		opacity .2s ease,
		transform .2s ease,
		visibility .2s ease;

	z-index: 10020;
}

.iem-header__menu .sub-menu::before {
	content: "";

	position: absolute;

	left: 0;
	right: 0;
	top: -18px;

	height: 18px;
}

.iem-header__menu li:hover > .sub-menu,
.iem-header__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;

	transform:
		translate(-50%, 0);
}

.iem-header__menu .sub-menu li {
	position: relative;

	width: 100%;
}

.iem-header__menu .sub-menu a {
	display: flex;
	align-items: center;

	width: 100%;

	padding: 11px 12px;

	border-radius: 10px;

	color: #344054;

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

	white-space: nowrap;
}

.iem-header__menu .sub-menu a::after {
	display: none;
}

.iem-header__menu .sub-menu a:hover {
	background: rgba(13,77,120,.07);

	color: #0d4d78;
}


/* 2. seviye ve sonrası */

.iem-header__menu .sub-menu .sub-menu {
	top: -8px;
	left: calc(100% + 10px);

	transform: translate(-6px, 0);
}

.iem-header__menu .sub-menu li:hover > .sub-menu,
.iem-header__menu .sub-menu li:focus-within > .sub-menu {
	transform: translate(0, 0);
}


/* =========================================================
   MOBILE DRAWER SUBMENUS
========================================================= */

.iem-drawer__menu .sub-menu {
	display: none;

	list-style: none;

	margin: 0;
	padding: 4px 0 6px 12px;
}

.iem-drawer__menu li.is-submenu-open > .sub-menu {
	display: block;
}

.iem-drawer__menu li.menu-item-has-children {
	position: relative;
}

.iem-drawer__submenu-toggle {
	position: absolute;

	top: 7px;
	right: 8px;

	width: 38px;
	height: 38px;

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

	padding: 0;

	border: 0;

	border-radius: 10px;

	background: rgba(13,77,120,.06);

	color: #0d4d78;

	cursor: pointer;

	z-index: 2;
}

.iem-drawer__submenu-toggle::before {
	content: "";

	width: 7px;
	height: 7px;

	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;

	transform:
		translateY(-2px)
		rotate(45deg);

	transition: transform .2s ease;
}

.iem-drawer__menu li.is-submenu-open > .iem-drawer__submenu-toggle::before {
	transform:
		translateY(2px)
		rotate(225deg);
}

.iem-drawer__menu li.menu-item-has-children > a {
	padding-right: 54px;
}

.iem-drawer__menu .sub-menu a {
	padding: 12px 14px;

	font-size: 13px;

	color: #647184;

	background: rgba(255,255,255,.28);

	border-bottom: 0;
}




/* =========================================================
   ARABIC / RTL
========================================================= */

html[lang^="ar"] .iem-header--rtl,
html[lang^="ar"] .iem-header--rtl .iem-header__inner,
html[lang^="ar"] .iem-header--rtl .iem-header__search-panel {
	direction: rtl;
}

html[lang^="ar"] .iem-header--rtl .iem-header__nav,
html[lang^="ar"] .iem-header--rtl .iem-header__menu,
html[lang^="ar"] .iem-drawer {
	text-align: right;
}

html[lang^="ar"] .iem-drawer {
	direction: rtl;
	right: auto;
	left: 0;
	transform: translateX(-104%);
}

html[lang^="ar"] .iem-drawer.is-open {
	transform: translateX(0);
}

html[lang^="ar"] .iem-drawer__submenu-toggle {
	margin-left: 0;
	margin-right: auto;
}

html[lang^="ar"] .iem-live-search-result,
html[lang^="ar"] .iem-live-search-meta,
html[lang^="ar"] .iem-live-search-empty {
	direction: rtl;
	text-align: right;
}

html[lang^="ar"] .iem-header__search-input {
	direction: rtl;
	text-align: right;
}