/* TV Menu Builder - Animations (shared by player, embed, editor) */

.tvmb-anim {
	animation-duration: var(--tvmb-anim-dur, 2s);
	animation-delay: var(--tvmb-anim-delay, 0s);
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	will-change: transform, opacity, box-shadow;
}

/* Pulse - nabız gibi büyüyüp küçülme */
.tvmb-anim-pulse { animation-name: tvmbPulse; }
@keyframes tvmbPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}

/* Glow - parlama */
.tvmb-anim-glow { animation-name: tvmbGlow; }
@keyframes tvmbGlow {
	0%, 100% { box-shadow: 0 0 8px rgba(255,255,255,0.3); }
	50% { box-shadow: 0 0 28px rgba(255,255,255,0.9); }
}

/* Zoom in-out */
.tvmb-anim-zoom { animation-name: tvmbZoom; }
@keyframes tvmbZoom {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.12); }
}

/* Float - havada süzülme */
.tvmb-anim-float { animation-name: tvmbFloat; }
@keyframes tvmbFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

/* Shake - titreme */
.tvmb-anim-shake { animation-name: tvmbShake; }
@keyframes tvmbShake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-5px); }
	40% { transform: translateX(5px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(4px); }
}

/* Bounce */
.tvmb-anim-bounce { animation-name: tvmbBounce; }
@keyframes tvmbBounce {
	0%, 100% { transform: translateY(0); }
	30% { transform: translateY(-18px); }
	50% { transform: translateY(0); }
	65% { transform: translateY(-9px); }
	80% { transform: translateY(0); }
}

/* Fade in - bir kez */
.tvmb-anim-fadein {
	animation-name: tvmbFadeIn;
	animation-iteration-count: 1;
	animation-fill-mode: backwards;
}
@keyframes tvmbFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Slide in - bir kez */
.tvmb-anim-slidein {
	animation-name: tvmbSlideIn;
	animation-iteration-count: 1;
	animation-fill-mode: backwards;
}
@keyframes tvmbSlideIn {
	from { opacity: 0; transform: translateY(40px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Frame rotate - çerçeve döngüsel hafif dönüş */
.tvmb-anim-frame-rotate { animation-name: tvmbFrameRotate; }
@keyframes tvmbFrameRotate {
	0%, 100% { transform: rotate(-1.5deg); }
	50% { transform: rotate(1.5deg); }
}

/* Frame dash - kesikli çerçevenin akması (marching ants) */
.tvmb-anim-frame-dash {
	animation-name: tvmbFrameDash;
	animation-timing-function: linear;
	background-image:
		repeating-linear-gradient(0deg, currentColor 0 10px, transparent 10px 20px);
}
@keyframes tvmbFrameDash {
	to { background-position: 0 40px; }
}

/* Editörde animasyonları durdurmak için yardımcı sınıf (canvas üzerinde) */
.tvmb-anim-paused .tvmb-anim {
	animation-play-state: paused !important;
}

/* ============================================
   HARF-HARF METİN EFEKTLERİ (text effects)
   Her .tvmb-te-ch span'ı kendi delay'iyle animasyona girer.
   ============================================ */

/* Wave - harfler dalga gibi yukarı-aşağı */
.tvmb-te-wave .tvmb-te-ch { animation-name: tvmbTeWave; animation-timing-function: ease-in-out; }
@keyframes tvmbTeWave {
	0%, 60%, 100% { transform: translateY(0); }
	30% { transform: translateY(-0.3em); }
}

/* Bounce - zıplama */
.tvmb-te-bounce .tvmb-te-ch { animation-name: tvmbTeBounce; animation-timing-function: cubic-bezier(0.28,0.84,0.42,1); }
@keyframes tvmbTeBounce {
	0%, 50%, 100% { transform: translateY(0); }
	20% { transform: translateY(-0.45em); }
	35% { transform: translateY(-0.1em); }
}

/* Fade - sırayla belirme */
.tvmb-te-fade .tvmb-te-ch { animation-name: tvmbTeFade; animation-timing-function: ease-in-out; }
@keyframes tvmbTeFade {
	0%, 100% { opacity: 0.25; }
	50% { opacity: 1; }
}

/* Flip - 3D harf çevirme */
.tvmb-te-flip .tvmb-te-ch { animation-name: tvmbTeFlip; transform-style: preserve-3d; backface-visibility: visible; }
@keyframes tvmbTeFlip {
	0%, 70%, 100% { transform: rotateY(0deg); }
	35% { transform: rotateY(360deg); }
}

/* Pop - büyüyüp küçülme */
.tvmb-te-pop .tvmb-te-ch { animation-name: tvmbTePop; animation-timing-function: ease-in-out; }
@keyframes tvmbTePop {
	0%, 60%, 100% { transform: scale(1); }
	30% { transform: scale(1.4); }
}

/* Rainbow - renk döngüsü (gökkuşağı) */
.tvmb-te-rainbow .tvmb-te-ch { animation-name: tvmbTeRainbow; animation-timing-function: linear; }
@keyframes tvmbTeRainbow {
	0% { color: #ff3b3b; }
	25% { color: #ffd23b; }
	50% { color: #3bff6b; }
	75% { color: #3bb0ff; }
	100% { color: #ff3b3b; }
}

/* Typewriter - daktilo: harfler sırayla görünür (loop kapalıyken daha iyi) */
.tvmb-te-typewriter .tvmb-te-ch { animation-name: tvmbTeType; animation-timing-function: steps(1); }
@keyframes tvmbTeType {
	from { opacity: 0; }
	1%, 100% { opacity: 1; }
}

/* Editörde durdurulduğunda harf efektlerini de durdur */
.tvmb-anim-paused .tvmb-te-ch { animation-play-state: paused !important; }

/* ============================================
   BADGE / ROZET ANİMASYONLARI
   ============================================ */
.tvmb-badge-anim { animation-iteration-count: infinite; animation-duration: 1.5s; animation-timing-function: ease-in-out; }

.tvmb-badge-pulse { animation-name: tvmbBadgePulse; }
@keyframes tvmbBadgePulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }

.tvmb-badge-wobble { animation-name: tvmbBadgeWobble; }
@keyframes tvmbBadgeWobble { 0%,100%{transform:rotate(-6deg);} 50%{transform:rotate(6deg);} }

.tvmb-badge-flash { animation-name: tvmbBadgeFlash; }
@keyframes tvmbBadgeFlash { 0%,50%,100%{opacity:1;} 25%,75%{opacity:0.4;} }

.tvmb-badge-spin { animation-name: tvmbBadgeSpin; animation-timing-function: linear; animation-duration: 4s; }
@keyframes tvmbBadgeSpin { from{transform:rotate(0);} to{transform:rotate(360deg);} }

.tvmb-badge-swing { animation-name: tvmbBadgeSwing; transform-origin: top center; }
@keyframes tvmbBadgeSwing { 0%,100%{transform:rotate(-8deg);} 50%{transform:rotate(8deg);} }

.tvmb-anim-paused .tvmb-badge-anim { animation-play-state: paused !important; }

/* ============================================
   HAREKETLİ GRADIENT (shape ve diğer öğeler)
   ============================================ */
.tvmb-grad-animate {
	animation: tvmbGradShift var(--tvmb-grad-speed, 6s) ease infinite;
}
@keyframes tvmbGradShift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
.tvmb-anim-paused .tvmb-grad-animate { animation-play-state: paused !important; }

/* ============================================
   KAYAN YAZI ŞERİDİ (ticker)
   Track içinde aynı metin 2 kez var; -50% kaydırma kesintisiz döngü verir.
   ============================================ */
.tvmb-ticker-track {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.tvmb-ticker-left { animation-name: tvmbTickerLeft; }
@keyframes tvmbTickerLeft {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.tvmb-ticker-right { animation-name: tvmbTickerRight; }
@keyframes tvmbTickerRight {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}
.tvmb-anim-paused .tvmb-ticker-track { animation-play-state: paused !important; }

/* ============================================
   GRID HÜCRE VURGU ANİMASYONLARI (#2)
   Ürün isim/fiyat öne çıksın diye.
   ============================================ */
.tvmb-cell-anim { display: inline-block; transform-origin: left center; }
.tvmb-cell-anim-pop {
	animation: tvmbCellPop 2.4s ease-in-out infinite;
}
@keyframes tvmbCellPop {
	0%, 100% { transform: scale(1); }
	8% { transform: scale(1.12); }
	16% { transform: scale(1); }
}
.tvmb-cell-anim-pulse {
	animation: tvmbCellPulse 1.6s ease-in-out infinite;
}
@keyframes tvmbCellPulse {
	0%, 100% { transform: scale(1); filter: brightness(1); }
	50% { transform: scale(1.08); filter: brightness(1.15); }
}
.tvmb-anim-paused .tvmb-cell-anim { animation-play-state: paused !important; }

/* ============================================
   IŞIKLI KENAR EFEKTİ (#4) - grid/shape kenarında dolaşan ışık
   ============================================ */
.tvmb-glow-border {
	position: relative;
}
.tvmb-glow-border::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: var(--tvmb-glow-width, 3px);
	background: conic-gradient(
		from var(--tvmb-glow-angle, 0deg),
		transparent 0deg,
		var(--tvmb-glow-color, #00e5ff) 40deg,
		transparent 80deg,
		transparent 360deg
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	pointer-events: none;
	animation: tvmbGlowSpin var(--tvmb-glow-speed, 4s) linear infinite;
}
@property --tvmb-glow-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}
@keyframes tvmbGlowSpin {
	to { --tvmb-glow-angle: 360deg; }
}
/* @property desteklemeyen tarayıcılar için yedek: tüm kenarda yumuşak parlama nabzı */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
	.tvmb-glow-border::after {
		background: none;
		box-shadow: 0 0 12px 2px var(--tvmb-glow-color, #00e5ff);
		animation: tvmbGlowPulse var(--tvmb-glow-speed, 4s) ease-in-out infinite;
	}
	@keyframes tvmbGlowPulse { 0%,100%{opacity:0.4;} 50%{opacity:1;} }
}
.tvmb-anim-paused .tvmb-glow-border::after { animation-play-state: paused !important; }

/* ============================================
   GRID GÖRSEL ANİMASYONLARI (#1)
   Grid hücresindeki görsel hareketlensin.
   ============================================ */
.tvmb-img-anim { will-change: transform; }
.tvmb-img-anim-zoom {
	animation: tvmbImgZoom 6s ease-in-out infinite;
}
@keyframes tvmbImgZoom {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.12); }
}
.tvmb-img-anim-float {
	animation: tvmbImgFloat 4s ease-in-out infinite;
}
@keyframes tvmbImgFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5%); }
}
.tvmb-img-anim-sway {
	animation: tvmbImgSway 5s ease-in-out infinite;
	transform-origin: center bottom;
}
@keyframes tvmbImgSway {
	0%, 100% { transform: rotate(-2deg); }
	50% { transform: rotate(2deg); }
}
.tvmb-anim-paused .tvmb-img-anim { animation-play-state: paused !important; }

/* ============================================
   ÜRÜN KARTI İSİM/FİYAT METİN ANİMASYONLARI
   (pop / pulse / glow / shake) — ayrı seçilebilir
   ============================================ */
.tvmb-text-anim { display: inline-block; transform-origin: center; }
.tvmb-text-anim-pop { animation: tvmbTextPop 2.4s ease-in-out infinite; }
@keyframes tvmbTextPop { 0%,100%{transform:scale(1);} 8%{transform:scale(1.14);} 18%{transform:scale(1);} }
.tvmb-text-anim-pulse { animation: tvmbTextPulse 1.6s ease-in-out infinite; }
@keyframes tvmbTextPulse { 0%,100%{transform:scale(1);filter:brightness(1);} 50%{transform:scale(1.07);filter:brightness(1.18);} }
.tvmb-text-anim-glow { animation: tvmbTextGlow 1.8s ease-in-out infinite; }
@keyframes tvmbTextGlow { 0%,100%{text-shadow:0 0 0 rgba(255,255,255,0);} 50%{text-shadow:0 0 12px rgba(255,255,255,0.9);} }
.tvmb-text-anim-shake { animation: tvmbTextShake 2.6s ease-in-out infinite; }
@keyframes tvmbTextShake { 0%,86%,100%{transform:translateX(0) rotate(0);} 88%{transform:translateX(-2px) rotate(-2deg);} 90%{transform:translateX(2px) rotate(2deg);} 92%{transform:translateX(-2px) rotate(-1deg);} 94%{transform:translateX(2px) rotate(1deg);} 96%{transform:translateX(0) rotate(0);} }
.tvmb-anim-paused .tvmb-text-anim { animation-play-state: paused !important; }