/* =========================================================
   IEM ADA YATIRIM ASİSTANI
   v2 - MOBILE PREMIUM
========================================================= */

.iem-ada,
.iem-ada * {
	box-sizing: border-box;
}


/* =========================================================
   ANA WRAPPER
========================================================= */

.iem-ada {
	position: fixed;

	right: 22px;
	bottom: 24px;

	z-index: 9995;

	display: flex;
	align-items: flex-end;

	gap: 16px;

	pointer-events: none;

	opacity: 0;

	transform: translateX(50px);

	transition:
		opacity .38s ease,
		transform .48s cubic-bezier(.2,.8,.2,1);
}


.iem-ada.is-visible {
	opacity: 1;

	transform: translateX(0);
}


.iem-ada__avatar,
.iem-ada__bubble {
	pointer-events: auto;
}


/* =========================================================
   ADA AVATAR
========================================================= */

.iem-ada__avatar {
	position: relative;

	flex: 0 0 auto;

	width: 150px;
	height: 170px;

	margin: 0;

	padding: 0;

	border: 0 !important;
	outline: 0 !important;

	background: transparent !important;

	box-shadow: none !important;

	-webkit-appearance: none;
	appearance: none;

	cursor: pointer;

	filter:
		drop-shadow(
			0 18px 26px rgba(7,29,44,.18)
		);

	transition:
		transform .22s ease,
		filter .22s ease;
}


/*
 * Elementor / Tema tarafından eklenen
 * pembe-mor focus çerçevesini öldürüyoruz.
 */

.iem-ada__avatar:focus,
.iem-ada__avatar:focus-visible,
.iem-ada__avatar:hover,
.iem-ada__avatar:active {

	border: 0 !important;

	outline: 0 !important;

	box-shadow: none !important;
}


.iem-ada__avatar:hover {
	transform:
		translateY(-4px)
		scale(1.02);
}


.iem-ada__avatar:active {
	transform:
		scale(.97);
}


/* ROBOT PNG */

.iem-ada__image {
	position: relative;

	z-index: 2;

	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;

	object-position: center bottom;

	pointer-events: none;

	user-select: none;

	-webkit-user-drag: none;
}


/* =========================================================
   ADA IŞIK / HALO
========================================================= */

.iem-ada__halo {
	position: absolute;

	z-index: 1;

	left: 50%;
	bottom: 18px;

	width: 84px;
	height: 84px;

	border-radius: 50%;

	transform:
		translateX(-50%);

	background:
		radial-gradient(
			circle,
			rgba(29,174,255,.22) 0%,
			rgba(29,174,255,.08) 42%,
			transparent 72%
		);

	filter: blur(5px);

	animation:
		iemAdaPulse 2.8s ease-in-out infinite;
}


/*
 * Eski yeşil online noktası.
 * Premium görünüm için kaldırıyoruz.
 */

.iem-ada__status {
	display: none !important;
}


/* =========================================================
   KONUŞMA BALONU
========================================================= */

.iem-ada__bubble {
	position: relative;

	width:
		min(
			360px,
			calc(100vw - 210px)
		);

	padding:
		21px 21px 19px;

	border-radius:
		24px 24px 8px 24px;

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

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

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

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

	box-shadow:
		0 22px 56px rgba(15,23,42,.16),
		inset 0 1px 0 rgba(255,255,255,.90);

	opacity: 0;

	visibility: hidden;

	transform:
		translateX(18px)
		scale(.96);

	transform-origin:
		right bottom;

	transition:
		opacity .25s ease,
		transform .32s cubic-bezier(.2,.8,.2,1),
		visibility .25s ease;
}


.iem-ada.is-open
.iem-ada__bubble {

	opacity: 1;

	visibility: visible;

	transform:
		translateX(0)
		scale(1);
}


/* =========================================================
   KONUŞMA BALONU OKU
========================================================= */

.iem-ada__bubble::after {
	content: "";

	position: absolute;

	right: -11px;
	bottom: 30px;

	width: 22px;
	height: 22px;

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

	border-right:
		1px solid
		rgba(255,255,255,.80);

	border-bottom:
		1px solid
		rgba(255,255,255,.80);

	transform:
		rotate(-45deg);

	border-radius:
		0 0 4px 0;
}


/* =========================================================
   KAPAT BUTONU
========================================================= */

.iem-ada__close {
	position: absolute;

	top: 12px;
	right: 12px;

	width: 34px;
	height: 34px;

	display: inline-flex;

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

	padding: 0;

	border: 0 !important;

	outline: 0 !important;

	border-radius: 11px;

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

	color: #0d4d78;

	box-shadow: none !important;

	font: inherit;

	font-size: 21px;
	font-weight: 400;

	line-height: 1;

	cursor: pointer;

	-webkit-appearance: none;
	appearance: none;
}


.iem-ada__close:hover {
	background:
		rgba(13,77,120,.10) !important;
}


.iem-ada__close:focus,
.iem-ada__close:focus-visible,
.iem-ada__close:active {

	border: 0 !important;

	outline: 0 !important;

	box-shadow: none !important;
}


/* =========================================================
   BALON İÇERİĞİ
========================================================= */

.iem-ada__eyebrow {
	margin-right: 42px;

	margin-bottom: 8px;

	color: #0d4d78;

	font-size: 10px;

	font-weight: 850;

	letter-spacing: .10em;

	text-transform: uppercase;
}


.iem-ada__title {
	color: #17212f;

	font-size: 22px;

	font-weight: 720;

	line-height: 1.18;

	letter-spacing: -.03em;
}


.iem-ada__title strong {
	color: #0d4d78;

	font-weight: 850;
}


.iem-ada__text {
	margin:
		11px 0 16px;

	color: #667384;

	font-size: 13px;

	line-height: 1.62;
}


/* =========================================================
   CTA
========================================================= */

.iem-ada__cta {
	min-height: 48px;

	display: flex;

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

	gap: 12px;

	padding:
		0 17px;

	border-radius: 14px;

	background:
		linear-gradient(
			135deg,
			#0d4d78,
			#0877a5
		);

	color: #fff !important;

	text-decoration: none !important;

	font-size: 13px;

	font-weight: 800;

	box-shadow:
		0 9px 23px
		rgba(13,77,120,.23);

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


.iem-ada__cta:hover {
	color: #fff !important;

	transform:
		translateY(-1px);

	box-shadow:
		0 12px 28px
		rgba(13,77,120,.29);
}


.iem-ada__cta svg {
	width: 19px;
	height: 19px;

	fill: currentColor;

	flex: 0 0 auto;
}


/* =========================================================
   ANIMASYON
========================================================= */

@keyframes iemAdaPulse {

	0%,
	100% {
		transform:
			translateX(-50%)
			scale(.90);

		opacity: .55;
	}

	50% {
		transform:
			translateX(-50%)
			scale(1.12);

		opacity: 1;
	}

}


@keyframes iemAdaFloat {

	0%,
	100% {
		transform:
			translateY(0);
	}

	50% {
		transform:
			translateY(-6px);
	}

}


.iem-ada.is-visible
.iem-ada__image {

	animation:
		iemAdaFloat
		3.6s ease-in-out infinite;
}


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

@media (max-width: 1024px) {

	.iem-ada {
		right: 16px;
	}

}


/* =========================================================
   MOBILE
   HEDEF:
   BALON ÜSTTE
   ADA ROBOT ALTTA / SAĞDA
========================================================= */

@media (max-width: 767px) {

	.iem-ada {

		position: fixed;

		right: 0;
		bottom: 0;

		display: block;

		width: 100%;
		height: 0;

		transform:
			translateX(0);

		z-index: 9995;
	}


	/*
	 * ADA
	 *
	 * Bottom menünün hemen üzerinde,
	 * sağ taraftan yükselen büyük karakter.
	 */

	.iem-ada__avatar {
	position: fixed;

	right: 8px;

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

	width:
		clamp(
			118px,
			34vw,
			150px
		);

	height:
		clamp(
			145px,
			41vw,
			180px
		);

	z-index: 9996;

	filter:
		drop-shadow(
			0 14px 22px
			rgba(7,29,44,.14)
		);
}


	.iem-ada__image {

		object-fit: contain;

		object-position:
			center bottom;
	}


	/*
	 * BALON
	 */

	.iem-ada__bubble {

		position: fixed;

		right: 14px;

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

		width:
			min(
				360px,
				calc(100vw - 28px)
			);

		padding:
			20px 18px 18px;

		border-radius:
			22px 22px 8px 22px;

		transform:
			translateY(14px)
			scale(.96);

		transform-origin:
			right bottom;
	}


	.iem-ada.is-open
	.iem-ada__bubble {

		transform:
			translateY(0)
			scale(1);
	}


	/*
	 * Balon oku Ada'nın kafasına doğru
	 */

	.iem-ada__bubble::after {

		right: 54px;

		bottom: -10px;

		width: 20px;
		height: 20px;

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

		border-right:
			1px solid
			rgba(255,255,255,.8);

		border-bottom:
			1px solid
			rgba(255,255,255,.8);

		transform:
			rotate(45deg);
	}


	.iem-ada__eyebrow {

		font-size: 9.5px;

		margin-bottom: 7px;
	}


	.iem-ada__title {

		font-size: 21px;

		line-height: 1.17;
	}


	.iem-ada__text {

		margin:
			10px 0 15px;

		font-size: 12.5px;

		line-height: 1.58;
	}


	.iem-ada__cta {

		min-height: 47px;

		padding:
			0 16px;

		font-size: 13px;

		border-radius: 14px;
	}


	.iem-ada__close {

		top: 10px;
		right: 10px;

		width: 32px;
		height: 32px;

		font-size: 20px;
	}


	/*
	 * Mobilde halo biraz daha güçlü.
	 */

	.iem-ada__halo {

		width: 110px;
		height: 110px;

		bottom: 26px;
	}

}


/* =========================================================
   KÜÇÜK TELEFON
========================================================= */

@media (max-width: 390px) {

	.iem-ada__avatar {

		right: 2px;

		width: 150px;
		height: 185px;

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


	.iem-ada__bubble {

		right: 10px;

		width:
			calc(
				100vw - 20px
			);

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

		padding:
			18px 16px 16px;
	}


	.iem-ada__title {

		font-size: 19px;
	}


	.iem-ada__text {

		font-size: 12px;
	}

}


/* =========================================================
   GLOBAL FOCUS CLEANUP
   Elementor'un pembe çerçevesini engeller.
========================================================= */

.iem-ada button,
.iem-ada a {

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


.iem-ada button:focus,
.iem-ada button:focus-visible,
.iem-ada a:focus,
.iem-ada a:focus-visible {

	outline: none !important;

	box-shadow: none !important;
}


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

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

	.iem-ada,
	.iem-ada__bubble,
	.iem-ada__avatar,
	.iem-ada__cta,
	.iem-ada__image,
	.iem-ada__halo {

		animation: none !important;

		transition: none !important;
	}

}

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

.iem-ada--rtl .iem-ada__bubble {
	text-align: right;
	direction: rtl;
	border-radius: 24px 24px 24px 8px;
	transform-origin: left bottom;
}

.iem-ada--rtl .iem-ada__eyebrow {
	margin-right: 0;
	margin-left: 42px;
	letter-spacing: 0;
	text-transform: none;
}

.iem-ada--rtl .iem-ada__close {
	right: auto;
	left: 12px;
}

.iem-ada--rtl .iem-ada__cta {
	flex-direction: row;
}

.iem-ada--rtl .iem-ada__cta svg {
	transform: scaleX(-1);
}

.iem-ada--rtl .iem-ada__bubble::after {
	right: auto;
	left: -11px;
	border-right: 0;
	border-bottom: 1px solid rgba(255,255,255,.80);
	border-left: 1px solid rgba(255,255,255,.80);
	transform: rotate(45deg);
}

@media (max-width: 767px) {

	.iem-ada--rtl .iem-ada__bubble {
		right: auto;
		left: 14px;
		border-radius: 22px 22px 22px 8px;
		transform-origin: left bottom;
	}

	.iem-ada--rtl .iem-ada__bubble::after {
		right: auto;
		left: 54px;
		bottom: -10px;
		border-left: 0;
		border-right: 1px solid rgba(255,255,255,.8);
		transform: rotate(45deg);
	}

	.iem-ada--rtl .iem-ada__close {
		right: auto;
		left: 10px;
	}

}

@media (max-width: 390px) {

	.iem-ada--rtl .iem-ada__bubble {
		right: auto;
		left: 10px;
	}

}
