/**
 * Elos Uygunluk Testi — kabuk stilleri (v1.5)
 *
 * Bu dosya head'e girer ve KÜÇÜK kalmalıdır: yalnızca sabit buton (FAB),
 * modal iskeleti ve yükleniyor durumu. Kartın/soruların/sonucun stilleri
 * quiz.css'tedir ve ancak kullanıcı butona dokunduğunda JS ile istenir.
 *
 * Vurgu rengi PHP tarafından :root{--elos-ut-accent} olarak basılır; bu sayede
 * JS ile sonradan oluşturulan modal da tek tek style="" yazmadan doğru rengi alır.
 */

/* --- Sol alt sabit buton --- */

/* Buton HTML'e "hidden" ile basılır ve yalnızca JS alan adı/dil denetiminden
   geçince görünür olur (çeviri vekili üzerinden yayınlanan alt alan adlarında
   hiç görünmemesi için). [hidden] tek başına yetmez: aşağıdaki display:flex
   onu ezer, bu yüzden açıkça bastırılıyor. */
.elos-ut-fab[hidden] { display: none !important; }

.elos-ut-fab {
	--eut-accent: var(--elos-ut-accent, #6C4AB6);
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 99998;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--eut-accent);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0 22px 0 0;
	height: 60px;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(60, 40, 120, 0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.elos-ut-fab:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(60, 40, 120, 0.45);
}
.elos-ut-fab svg {
	flex: 0 0 auto;
	margin-left: 17px;
}
.elos-ut-fab__etiket {
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}
.elos-ut-fab__puls {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	border: 2px solid var(--eut-accent);
	animation: eut-puls 2.4s ease-out infinite;
	pointer-events: none;
}
@keyframes eut-puls {
	0%   { transform: scale(1);    opacity: 0.6; }
	70%  { transform: scale(1.25); opacity: 0; }
	100% { transform: scale(1.25); opacity: 0; }
}

/* Bulucu FAB'ı: tedavi sayfalarındaki testten ayırt edilebilir kalsın */
.elos-ut-fab--finder svg,
.elos-ut-fab--finder svg circle,
.elos-ut-fab--finder svg path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* Mobil: buton bastan sabit daire; etiket yaninda ayri balon olarak durur.
   Kucultme yalnizca transform + opacity ile yapilir (GPU) — layout tetiklenmez. */
@media (max-width: 640px) {
	.elos-ut-fab {
		left: 14px;
		bottom: 14px;
		width: 58px;
		height: 58px;
		padding: 0;
		justify-content: center;
	}
	.elos-ut-fab svg {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
	}
	.elos-ut-fab__etiket {
		position: absolute;
		left: calc(100% + 10px);
		top: 50%;
		background: var(--eut-accent);
		color: #fff;
		padding: 9px 16px;
		border-radius: 999px;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
		transform: translateY(-50%);
		transform-origin: left center;
		will-change: transform, opacity;
		transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
	}
	.elos-ut-fab--kapali .elos-ut-fab__etiket {
		transform: translateY(-50%) translateX(-10px) scale(0.85);
		opacity: 0;
		pointer-events: none;
	}
}

/* --- Modal iskeleti --- */
.elos-ut-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.elos-ut-modal[hidden] { display: none; }
.elos-ut-modal__arka {
	position: absolute;
	inset: 0;
	background: rgba(24, 18, 43, 0.55);
	backdrop-filter: blur(2px);
}
.elos-ut--modal {
	position: relative;
	margin: 0;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	animation: eut-gir 0.25s ease;
	border-radius: 16px;
}
@keyframes eut-gir {
	from { transform: translateY(16px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}
.elos-ut-modal__kapat {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 2;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: #f1eef9;
	color: #55506b;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}
.elos-ut-modal__kapat:hover { background: #e4def4; color: #2b2b33; }

/* Modal açıkken arka plan kaydırmayı kilitle */
body.elos-ut-kilit { overflow: hidden; }

/* Mobilde alt sayfa (bottom sheet) görünümü */
@media (max-width: 640px) {
	.elos-ut-modal {
		padding: 0;
		align-items: flex-end;
	}
	.elos-ut--modal {
		max-width: none;
		max-height: 92vh;
		border-radius: 18px 18px 0 0;
	}
}

/* --- Yükleniyor durumu (içerik AJAX ile gelene kadar) --- */
.elos-ut__yukleniyor {
	background: #fff;
	border-radius: 16px;
	min-height: 220px;
	display: grid;
	place-items: center;
	gap: 14px;
	padding: 40px 20px;
	text-align: center;
	color: #6d6a7c;
	font-size: 14px;
}
.elos-ut__spinner {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid rgba(0, 0, 0, 0.08);
	border-top-color: var(--elos-ut-accent, #6C4AB6);
	animation: eut-don 0.8s linear infinite;
}
@keyframes eut-don { to { transform: rotate(360deg); } }

.elos-ut__yeniden {
	margin-top: 8px;
	background: var(--elos-ut-accent, #6C4AB6);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 10px 20px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

/* Sayfa içi karttaki "Teste başla" butonu veri gelene kadar bekliyor */
.elos-ut__btn--bekliyor { opacity: 0.7; cursor: progress; }

/* --- Hareket azaltma --- */
@media (prefers-reduced-motion: reduce) {
	.elos-ut-fab__puls { animation: none; }
	.elos-ut--modal { animation: none; }
	.elos-ut-fab, .elos-ut-fab__etiket { transition: none; }
	.elos-ut-fab:hover { transform: none; }
	.elos-ut__spinner { animation-duration: 2s; }
}