/*
 * Dosya: sesli-mod-frontend.css
 * Bagli PHP: sesli-mod.php
 * Kapsam: Sesli mod butonları ve TTS/STT animasyonlarının sabit stil tabanı.
 * Alan: Frontend. STT/TTS butonları için sabit stil iskeletidir; renkler PHP tarafında CSS değişkeni olarak enjekte edilir.
 */

/* ----- Sesli mod sabit buton iskeleti ----- */
#dfa-voice-stack.dfa-voice-stack{
	display:flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	align-items: center !important;
	justify-content: center !important;
	width: 46px;
	min-width: 46px;
}

#dfa-voice-btn.dfa-voice-btn,
#dfa-tts-btn.dfa-tts-btn{
	border: 0 !important;
	outline: none !important;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	box-shadow: 0 10px 24px rgba(0,0,0,.14);
	transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, opacity .16s ease;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	user-select:none;
}

#dfa-voice-btn.dfa-voice-btn:hover,
#dfa-tts-btn.dfa-tts-btn:hover{
	transform: translateY(-1px) scale(1.06);
	filter: brightness(1.06) saturate(1.15);
	box-shadow: 0 14px 32px rgba(0,0,0,.18);
}

#dfa-voice-btn.dfa-voice-btn:active,
#dfa-tts-btn.dfa-tts-btn:active{
	transform: translateY(0) scale(.98);
	filter: brightness(1.02) saturate(1.05);
	box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

#dfa-voice-btn.dfa-voice-btn:focus-visible,
#dfa-tts-btn.dfa-tts-btn:focus-visible{
	outline: 2px solid rgba(255,255,255,.75) !important;
	outline-offset: 3px;
}

#dfa-voice-btn.dfa-voice-btn{
	background: var(--dfa-voice-btn-bg, #0b7c83) !important;
	color: var(--dfa-voice-btn-fg, #ffffff) !important;
}
#dfa-voice-btn.dfa-voice-btn svg{ fill: currentColor !important; }

#dfa-tts-btn.dfa-tts-btn{
	background: var(--dfa-tts-btn-bg, #0f766e) !important;
	color: var(--dfa-tts-btn-fg, #ffffff) !important;
	opacity: .92;
}
#dfa-tts-btn.dfa-tts-btn svg{ fill: currentColor !important; }

#dfa-voice-btn.dfa-voice-btn.is-listening{
	animation: dfaVoiceBreath 1.05s ease-in-out infinite;
}
#dfa-voice-btn.dfa-voice-btn.is-listening::after{
	content:"";
	position:absolute;
	inset:-7px;
	border-radius: 999px;
	pointer-events:none;
	animation: dfaVoiceRing 1.0s ease-out infinite;
	box-shadow: 0 0 0 0 rgba(22,163,74,.35);
}
#dfa-voice-btn.dfa-voice-btn.is-listening svg{
	animation: dfaMicWiggle .44s ease-in-out infinite;
	transform-origin: 50% 50%;
}

#dfa-tts-btn.dfa-tts-btn.is-tts-on{
	opacity: 1;
	animation: dfaTtsPulse 1.25s ease-in-out infinite;
}
#dfa-tts-btn.dfa-tts-btn.is-tts-on::after{
	content:"";
	position:absolute;
	inset:-7px;
	border-radius:999px;
	pointer-events:none;
	animation: dfaTtsRing 1.2s ease-out infinite;
	box-shadow: 0 0 0 0 rgba(15,118,110,.35);
}

@keyframes dfaVoiceBreath{
	0%{ transform: translateY(-1px) scale(1.03); }
	50%{ transform: translateY(-2px) scale(1.09); }
	100%{ transform: translateY(-1px) scale(1.03); }
}
@keyframes dfaVoiceRing{
	0%{ box-shadow: 0 0 0 0 rgba(22,163,74,.40); opacity:.55; }
	75%{ box-shadow: 0 0 0 16px rgba(22,163,74,0); opacity:0; }
	100%{ box-shadow: 0 0 0 16px rgba(22,163,74,0); opacity:0; }
}
@keyframes dfaMicWiggle{
	0%{ transform: rotate(-6deg) scale(1.02); }
	50%{ transform: rotate(6deg) scale(1.08); }
	100%{ transform: rotate(-6deg) scale(1.02); }
}
@keyframes dfaTtsPulse{
	0%{ transform: translateY(-1px) scale(1.02); }
	50%{ transform: translateY(-2px) scale(1.07); }
	100%{ transform: translateY(-1px) scale(1.02); }
}
@keyframes dfaTtsRing{
	0%{ box-shadow: 0 0 0 0 rgba(15,118,110,.40); opacity:.55; }
	75%{ box-shadow: 0 0 0 16px rgba(15,118,110,0); opacity:0; }
	100%{ box-shadow: 0 0 0 16px rgba(15,118,110,0); opacity:0; }
}

@media (hover:none){
	#dfa-voice-btn.dfa-voice-btn:hover,
	#dfa-tts-btn.dfa-tts-btn:hover{
		transform:none;
		filter:none;
		box-shadow: 0 10px 24px rgba(0,0,0,.14);
	}
}