/* ═══════════════════════════════════════════════════
   Floating Video Widget – Frontend Stilleri
   ═══════════════════════════════════════════════════ */

/* ── Temel widget kabı ── */
.fvw-widget {
	position: fixed;
	z-index: 99999;
	width: 400px;
	pointer-events: none;

	opacity: 0;
	transform: translateY( 28px );

	/* Tüm konum/boyut geçişleri birlikte */
	transition:
		opacity    0.38s cubic-bezier( 0.4, 0, 0.2, 1 ),
		transform  0.38s cubic-bezier( 0.4, 0, 0.2, 1 ),
		width      0.38s cubic-bezier( 0.4, 0, 0.2, 1 ),
		top        0.38s cubic-bezier( 0.4, 0, 0.2, 1 ),
		left       0.38s cubic-bezier( 0.4, 0, 0.2, 1 ),
		bottom     0.38s cubic-bezier( 0.4, 0, 0.2, 1 ),
		right      0.38s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.fvw-pos-bottom-left  { bottom: 28px; left: 28px; }
.fvw-pos-bottom-right { bottom: 28px; right: 28px; }

.fvw-widget.fvw-visible {
	opacity: 1;
	transform: translateY( 0 );
	pointer-events: auto;
}

.fvw-widget.fvw-closing {
	opacity: 0;
	transform: translateY( 28px );
	pointer-events: none;
}

/* ── Ortaya büyüt (masaüstü) ── */
.fvw-widget.fvw-expanded {
	width: min( 700px, 82vw ) !important;
	top:    50% !important;
	left:   50% !important;
	bottom: auto !important;
	right:  auto !important;
	transform: translate( -50%, -50% ) !important;
}

/* ── İç kap ── */
.fvw-inner {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	box-shadow:
		0 12px 44px rgba( 0, 0, 0, 0.60 ),
		0  3px 10px rgba( 0, 0, 0, 0.35 );
	background: #111;
}

/* ═══════════════════════════════════════════════════
   ÜST KONTROL ÇUBUĞU
   ═══════════════════════════════════════════════════ */
.fvw-top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 8px 0 14px;
	height: 46px;
	background: #004383;
	gap: 8px;
	box-shadow: inset 0 -1px 0 rgba( 0, 0, 0, 0.25 );
}

/* Sol: başlık */
.fvw-top-label {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.03em;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 8px;
	user-select: none;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.30 );
}

/* Canlı nokta animasyonu */
.fvw-top-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 0 rgba( 74, 222, 128, 0.6 );
	animation: fvw-pulse 2s ease-in-out infinite;
	flex-shrink: 0;
}

@keyframes fvw-pulse {
	0%   { box-shadow: 0 0 0 0   rgba( 74, 222, 128, 0.7 ); }
	60%  { box-shadow: 0 0 0 6px rgba( 74, 222, 128, 0 );   }
	100% { box-shadow: 0 0 0 0   rgba( 74, 222, 128, 0 );   }
}

/* Sağ: buton grubu */
.fvw-top-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

/* ── Ortak buton stili ── */
.fvw-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 7px;
	cursor: pointer;
	background: rgba( 255, 255, 255, 0.15 );
	transition:
		background 0.18s ease,
		transform  0.12s ease;
	padding: 0;
	flex-shrink: 0;
}

.fvw-btn:hover {
	background: rgba( 255, 255, 255, 0.28 );
	transform: scale( 1.08 );
}

.fvw-btn:active { transform: scale( 0.94 ); }

.fvw-btn:focus-visible {
	outline: 2px solid rgba( 255, 255, 255, 0.8 );
	outline-offset: 2px;
}

/* Kapat hover: kırmızı */
.fvw-btn-close:hover { background: rgba( 220, 50, 50, 0.80 ); }

/* ── SVG ikonları ── */
.fvw-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	display: block;
}

/* ── Video çerçevesi (16:9) ── */
.fvw-frame-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	background: #000;
}

.fvw-frame-wrap #fvw-yt-player,
.fvw-frame-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border: none;
	display: block;
}

/* ── Mobil tutamaç (yalnızca mobilde göster) ── */
.fvw-mobile-handle {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 7px 0 5px;
	cursor: pointer;
	background: #004383;
	border-top: 1px solid rgba( 255, 255, 255, 0.10 );
}

.fvw-handle-bar {
	display: block;
	width: 36px;
	height: 4px;
	border-radius: 2px;
	background: rgba( 255, 255, 255, 0.40 );
	transition: background 0.18s;
}

.fvw-mobile-handle:hover .fvw-handle-bar,
.fvw-mobile-handle:focus .fvw-handle-bar {
	background: rgba( 255, 255, 255, 0.80 );
}

.fvw-mobile-handle:focus-visible {
	outline: 2px solid rgba( 255, 255, 255, 0.6 );
}

/* ═══════════════════════════════════════════════════
   MOBİL  ( ≤ 680 px )
   Expand butonu gizlenir, tam genişlik alt şerit.
   ═══════════════════════════════════════════════════ */
@media ( max-width: 680px ) {

	/* Expand butonu mobilde yok */
	.fvw-btn-expand { display: none !important; }

	.fvw-widget,
	.fvw-pos-bottom-left,
	.fvw-pos-bottom-right {
		bottom: 0 !important;
		left:   0 !important;
		right:  0 !important;
		width:  100% !important;
		transform: translateY( 44px );
	}

	.fvw-widget.fvw-visible  { transform: translateY( 0 ); }
	.fvw-widget.fvw-closing  { transform: translateY( 44px ); }

	.fvw-inner       { border-radius: 14px 14px 0 0; }
	.fvw-top-bar     { border-radius: 14px 14px 0 0; height: 50px; padding: 0 8px 0 14px; }
	.fvw-top-label   { font-size: 14px; }

	.fvw-mobile-handle { display: flex; }

	.fvw-btn  { width: 32px; height: 32px; border-radius: 7px; }
	.fvw-icon { width: 18px; height: 18px; }

	/* Küçültülmüş durum */
	.fvw-widget.fvw-collapsed .fvw-frame-wrap { display: none; }

	.fvw-widget.fvw-collapsed .fvw-mobile-handle {
		border-radius: 14px 14px 0 0;
		padding: 12px 0;
		border-top: none;
	}

	.fvw-widget.fvw-collapsed .fvw-handle-bar { width: 48px; }
}