/* ══════════════════════════════════════════════
   Hoş Geldin Müziği - Kayan Çalar Widget'ı
   Sohbet sayfası açıldığında otomatik başlayan mp3
   için play / stop tuşları ve equalizer animasyonu.
   ══════════════════════════════════════════════ */

.wm_player_widget{
	position: fixed;
	left: 64px;
	bottom: 98px;
	z-index: 9997;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 8px;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(99,102,241,0.95), rgba(139,92,246,0.95));
	box-shadow: 0 6px 18px rgba(99,102,241,0.35), 0 2px 6px rgba(0,0,0,0.15);
	backdrop-filter: blur(6px);
	user-select: none;
	transition: transform .2s ease, opacity .2s ease;
}
.wm_player_widget.wm_hidden{
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
}

.wm_player_btn{
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.18);
	color: #fff;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s ease, transform .1s ease;
}
.wm_player_btn:hover{ background: rgba(255,255,255,0.32); }
.wm_player_btn:active{ transform: scale(0.92); }
.wm_player_btn.wm_stop_btn{ background: rgba(0,0,0,0.15); }
.wm_player_btn.wm_stop_btn:hover{ background: #ef4444; }

.wm_player_label{
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	max-width: 130px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wm_player_eq{
	display: flex;
	align-items: flex-end;
	gap: 2.5px;
	height: 18px;
	padding: 0 2px;
}
.wm_player_eq span{
	display: block;
	width: 3px;
	height: 4px;
	border-radius: 2px 2px 0 0;
	background: #fff;
	opacity: 0.55;
	transform-origin: bottom;
	animation: wm_eq_bounce 1s ease-in-out infinite;
	animation-play-state: paused;
}
.wm_player_widget.wm_playing .wm_player_eq span{ animation-play-state: running; opacity: 1; }
.wm_player_eq span:nth-child(1){ animation-duration: 0.9s;  animation-delay: 0s; }
.wm_player_eq span:nth-child(2){ animation-duration: 0.7s;  animation-delay: 0.15s; }
.wm_player_eq span:nth-child(3){ animation-duration: 1.1s;  animation-delay: 0.05s; }
.wm_player_eq span:nth-child(4){ animation-duration: 0.8s;  animation-delay: 0.25s; }
.wm_player_eq span:nth-child(5){ animation-duration: 1.0s;  animation-delay: 0.1s; }

@keyframes wm_eq_bounce{
	0%, 100% { height: 4px; }
	50%      { height: 16px; }
}

.wm_player_widget.wm_needs_tap{
	animation: wm_needs_tap_pulse 1.6s ease-in-out infinite;
}
@keyframes wm_needs_tap_pulse{
	0%, 100% { box-shadow: 0 6px 18px rgba(99,102,241,0.35), 0 0 0 0 rgba(99,102,241,0.5); }
	50%      { box-shadow: 0 6px 18px rgba(99,102,241,0.35), 0 0 0 8px rgba(99,102,241,0); }
}

@media (max-width: 640px){
	.wm_player_widget{ left: 10px; bottom: 72px; padding: 6px 10px 6px 6px; }
	.wm_player_label{ display: none; }
}

/* ── Hoş Geldiniz Yazı Bandı ──
   Player'ın sağına eklenen, sürekli döngüde açılıp kapanan yazı.
   60 saniyelik döngü: 10sn açık (görünür) -> 15sn yavaşça sola
   doğru kapanır -> 20sn kapalı -> 15sn yavaşça sağa doğru açılır
   -> döngü baştan başlar. */
.wm_welcome_banner{
	overflow: hidden;
	white-space: nowrap;
	height: 30px;
	display: flex;
	align-items: center;
	border-radius: 999px;
	background: rgba(255,255,255,0.16);
	width: 0px;
	opacity: 0;
	animation: wm_banner_cycle 60s ease-in-out infinite;
}
.wm_welcome_banner_text{
	padding: 0 16px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	letter-spacing: .2px;
}

@keyframes wm_banner_cycle{
	0%      { width: 220px; opacity: 1; }   /* 0sn: açık başlar */
	16.66%  { width: 220px; opacity: 1; }   /* 10sn: hâlâ açık */
	41.66%  { width: 0px;   opacity: 0; }   /* 25sn: kapanış tamam (15sn sürdü) */
	75%     { width: 0px;   opacity: 0; }   /* 45sn: kapalı kaldı (20sn) */
	100%    { width: 220px; opacity: 1; }   /* 60sn: açılış tamam (15sn sürdü), döngü tekrarlar */
}

@media (max-width: 640px){
	.wm_welcome_banner_text{ font-size: 11px; padding: 0 12px; }
	@keyframes wm_banner_cycle{
		0%      { width: 170px; opacity: 1; }
		16.66%  { width: 170px; opacity: 1; }
		41.66%  { width: 0px;   opacity: 0; }
		75%     { width: 0px;   opacity: 0; }
		100%    { width: 170px; opacity: 1; }
	}
}

/* ── Radyo Bilgi Şeridi (Ticker) ──
   Çalar radyo modundayken banner yerine gösterilir; istasyon adı,
   yayındaki DJ (varsa) ve o an çalan şarkı satırları sırayla, aşağıdan
   yukarıya doğru kayarak (slide) birbirinin yerini alır. Normal
   banner'dan (max 220px) daha geniş tutulur ki uzun şarkı/DJ isimleri
   daha rahat sığsın. */
.wm_radio_ticker{
	position: relative;
	overflow: hidden;
	height: 30px;
	width: 260px;
	border-radius: 999px;
	background: rgba(255,255,255,0.16);
}
.wm_ticker_viewport{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.wm_ticker_track{
	position: relative;
	width: 100%;
	height: 100%;
}
.wm_ticker_line{
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 100%;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 0 16px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transform: translateY(100%);
	transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s ease;
	pointer-events: none;
}
.wm_ticker_line i{ font-size: 11px; opacity: .85; flex-shrink: 0; }
.wm_ticker_line span{ overflow: hidden; text-overflow: ellipsis; }
.wm_ticker_line.wm_ticker_active{
	opacity: 1;
	transform: translateY(0%);
	z-index: 2;
}
.wm_ticker_line.wm_ticker_leaving{
	opacity: 0;
	transform: translateY(-100%);
	z-index: 1;
}

@media (max-width: 640px){
	.wm_radio_ticker{ width: 190px; }
	.wm_ticker_line{ font-size: 11px; padding: 0 12px; }
}