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

.iem-footer {
	background: #062f6b;
	color: #fff;
	margin-top: 60px;
}

.iem-footer--desktop {
	display: block;
}

.iem-footer__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 56px 24px;
	display: grid;
	grid-template-columns: 1.3fr 0.9fr;
	gap: 48px;
	align-items: start;
}

.iem-footer__col--brand {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 24px;
	align-items: start;
}

.iem-footer__logo-wrap {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.iem-footer__logo {
	width: 100%;
	max-width: 110px;
	height: auto;
	display: block;
}

.iem-footer__text h3,
.iem-footer__col--contact h4 {
	margin: 0 0 16px;
	color: #fff;
	font-weight: 700;
}

.iem-footer__text h3 {
	font-size: 30px;
	line-height: 1.1;
}

.iem-footer__text p {
	margin: 0 0 16px;
	font-size: 18px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.92);
}

.iem-footer__contact-list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.iem-footer__contact-list li {
	margin-bottom: 18px;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
}

.iem-footer__contact-list span {
	display: block;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 4px;
}

.iem-footer__contact-list a {
	color: #4fc3ff;
	text-decoration: none;
	font-weight: 700;
}

.iem-footer__contact-list a:hover {
	text-decoration: underline;
}

.iem-footer__social h4 {
	font-size: 26px;
	line-height: 1.2;
	margin-bottom: 16px;
}

.iem-footer__social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.iem-footer__social-links a {
	text-decoration: none;
}

.iem-social-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 110px;
	height: 44px;

	padding: 0 16px;

	border-radius: 999px;

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

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

	color: #fff;

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

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

.iem-footer__social-links a:hover .iem-social-dot {
	background: rgba(255, 255, 255, 0.18);
	transform: translateY(-1px);
}


/* =========================================================
   MOBILE BOTTOM BAR
   SAFARI SAFE LIQUID GLASS
========================================================= */

.iem-mobile-bar {
	position: fixed;

	left: 12px;
	right: 12px;

	bottom: calc(10px + env(safe-area-inset-bottom));

	z-index: 9997;

	height: 70px;

	display: none;

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

	align-items: center;

	padding: 0 8px;

	/*
	 * Çok düşük opaklık:
	 * arkasındaki içerik görünmeye devam eder.
	 */
	background: rgba(245, 248, 252, 0.14);

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

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

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

	border-radius: 26px;

	box-shadow:
		0 14px 38px rgba(15, 23, 42, 0.16),
		inset 0 1px 1px rgba(255, 255, 255, 0.72),
		inset 0 -1px 1px rgba(15, 23, 42, 0.08);

	overflow: visible;
}


/* =========================================================
   LIQUID GLASS - UPPER REFLECTION
========================================================= */

.iem-mobile-bar::before {
	content: "";

	position: absolute;

	left: 3px;
	right: 3px;
	top: 2px;

	height: 50%;

	border-radius: 24px 24px 48% 48%;

	pointer-events: none;

	z-index: 1;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.34) 0%,
			rgba(255, 255, 255, 0.10) 42%,
			rgba(255, 255, 255, 0) 100%
		);

	opacity: 0.75;
}


/* =========================================================
   LIQUID GLASS - DIAGONAL REFRACTION
========================================================= */

.iem-mobile-bar::after {
	content: "";

	position: absolute;

	inset: 1px;

	border-radius: 25px;

	pointer-events: none;

	z-index: 1;

	background:
		linear-gradient(
			125deg,
			rgba(255, 255, 255, 0.16) 0%,
			rgba(255, 255, 255, 0.035) 32%,
			rgba(255, 255, 255, 0) 52%,
			rgba(255, 255, 255, 0.08) 78%,
			rgba(0, 0, 0, 0.025) 100%
		);

	box-shadow:
		inset 10px 0 22px -18px rgba(255, 255, 255, 0.70),
		inset -10px 0 22px -20px rgba(0, 0, 0, 0.14);

	opacity: 0.85;
}


/* =========================================================
   NORMAL ITEMS
========================================================= */

.iem-mobile-bar__item {
	position: relative;

	z-index: 2;

	min-width: 0;
	height: 100%;

	display: flex;
	flex-direction: column;

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

	gap: 4px;

	padding: 7px 2px;

	border: 0;

	background: transparent;

	text-decoration: none;

	color: #26384f;

	cursor: pointer;

	font: inherit;

	border-radius: 17px;

	-webkit-tap-highlight-color: transparent;

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

.iem-mobile-bar__item:hover {
	background: rgba(255, 255, 255, 0.10);
	color: #0d4d78;
}

.iem-mobile-bar__item:active {
	transform: scale(0.93);

	background: rgba(255, 255, 255, 0.16);
}

.iem-mobile-bar__item:focus,
.iem-mobile-bar__item:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}


/* =========================================================
   ICONS
========================================================= */

.iem-mobile-bar__icon {
	display: inline-flex;

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

	width: 27px;
	height: 27px;

	line-height: 1;

	color: inherit;

	text-shadow:
		0 1px 1px rgba(255, 255, 255, 0.22);
}

.iem-mobile-bar__icon svg {
	width: 23px;
	height: 23px;

	display: block;

	fill: currentColor;
}


/* =========================================================
   LABELS
========================================================= */

.iem-mobile-bar__text {
	max-width: 100%;

	font-size: 10.5px;
	font-weight: 650;

	line-height: 1.05;

	white-space: nowrap;

	letter-spacing: -0.015em;

	color: inherit;

	text-shadow:
		0 1px 1px rgba(255, 255, 255, 0.22);
}


/* =========================================================
   CENTER WHATSAPP
========================================================= */

.iem-mobile-bar__center {
	position: relative;

	z-index: 4;

	align-self: stretch;

	display: flex;
	flex-direction: column;

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

	text-decoration: none;

	color: #fff;

	-webkit-tap-highlight-color: transparent;
}


/* =========================================================
   WHATSAPP LIQUID BUTTON
========================================================= */

.iem-mobile-bar__center-icon {
	position: absolute;

	top: -18px;
	left: 50%;

	transform: translateX(-50%);

	width: 60px;
	height: 60px;

	display: flex;

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

	border-radius: 20px;

	background:
		linear-gradient(
			145deg,
			rgba(54, 223, 119, 0.93),
			rgba(26, 201, 91, 0.90)
		);

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

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

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

	box-shadow:
		0 12px 26px rgba(27, 180, 88, 0.22),
		0 5px 16px rgba(15, 23, 42, 0.12),
		inset 0 1px 1px rgba(255, 255, 255, 0.68),
		inset 0 -1px 1px rgba(0, 0, 0, 0.06);

	overflow: hidden;

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


/* =========================================================
   WHATSAPP TOP REFLECTION
========================================================= */

.iem-mobile-bar__center-icon::before {
	content: "";

	position: absolute;

	left: 4px;
	right: 4px;
	top: 3px;

	height: 46%;

	border-radius: 17px;

	pointer-events: none;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.38),
			rgba(255, 255, 255, 0.08) 55%,
			rgba(255, 255, 255, 0)
		);
}


/* =========================================================
   WHATSAPP EDGE
========================================================= */

.iem-mobile-bar__center-icon::after {
	content: "";

	position: absolute;

	inset: 2px;

	border-radius: 18px;

	pointer-events: none;

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

	box-shadow:
		inset 7px 0 16px -13px rgba(255, 255, 255, 0.72),
		inset -7px 0 16px -14px rgba(0, 0, 0, 0.14);
}


.iem-mobile-bar__center:hover .iem-mobile-bar__center-icon {
	transform:
		translateX(-50%)
		translateY(-2px);

	box-shadow:
		0 15px 30px rgba(27, 180, 88, 0.24),
		0 8px 20px rgba(15, 23, 42, 0.14),
		inset 0 1px 1px rgba(255, 255, 255, 0.72);
}

.iem-mobile-bar__center:active .iem-mobile-bar__center-icon {
	transform:
		translateX(-50%)
		scale(0.94);
}

.iem-mobile-bar__center:focus,
.iem-mobile-bar__center:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}


/* =========================================================
   WHATSAPP ICON
========================================================= */

.iem-mobile-bar__center-icon svg {
	position: relative;

	z-index: 3;

	width: 31px;
	height: 31px;

	display: block;

	fill: #fff;
}


/* =========================================================
   WHATSAPP TEXT
========================================================= */

.iem-mobile-bar__center-text {
	position: absolute;

	z-index: 3;

	bottom: 5px;
	left: 50%;

	transform: translateX(-50%);

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

	line-height: 1;

	color: #26384f;

	white-space: nowrap;

	letter-spacing: -0.015em;

	text-shadow:
		0 1px 1px rgba(255, 255, 255, 0.22);
}


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

@media (max-width: 767px) {

	body {
		padding-bottom:
			calc(
				98px +
				env(safe-area-inset-bottom)
			);
	}

	.iem-footer--desktop {
		display: none;
	}

	.iem-mobile-bar {
		display: grid;
	}
}


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

@media (min-width: 768px) {

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


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

@media (max-width: 380px) {

	.iem-mobile-bar {
		left: 8px;
		right: 8px;

		height: 66px;

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

		padding: 0 5px;

		border-radius: 23px;
	}

	.iem-mobile-bar::after {
		border-radius: 22px;
	}

	.iem-mobile-bar__center-icon {
		width: 54px;
		height: 54px;

		top: -16px;

		border-radius: 18px;
	}

	.iem-mobile-bar__center-icon::after {
		border-radius: 16px;
	}

	.iem-mobile-bar__center-icon svg {
		width: 28px;
		height: 28px;
	}

	.iem-mobile-bar__text,
	.iem-mobile-bar__center-text {
		font-size: 9.5px;
	}
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.iem-mobile-bar__item,
	.iem-mobile-bar__center-icon {
		transition: none !important;
	}
}

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

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

html[lang^="ar"] .iem-footer--rtl .iem-footer__inner,
html[lang^="ar"] .iem-footer--rtl .iem-footer__contact-list,
html[lang^="ar"] .iem-footer--rtl .iem-footer__social-links {
	direction: rtl;
}

html[lang^="ar"] .iem-footer--rtl .iem-footer__contact-list li {
	text-align: right;
}

html[lang^="ar"] .iem-mobile-bar--rtl {
	direction: rtl;
}

/*
 * Grid sırası DOM'a bağlı olduğundan mobilde aksiyonların
 * işlevsel yerleşimini değiştirmiyoruz; yalnız metin yönü RTL.
 */
html[lang^="ar"] .iem-mobile-bar--rtl .iem-mobile-bar__text,
html[lang^="ar"] .iem-mobile-bar--rtl .iem-mobile-bar__center-text {
	direction: rtl;
}