/**
 * animations.css — reveal, mask, glow, gecisler.
 *
 * HAREKET DILI: ahsap + isik + sakinlik.
 * Kullanilan: fade, mask reveal, 10–24px translate, 1.02–1.04 olcek,
 *             yumusak glow, cok kucuk parallax, stagger.
 * Kullanilmayan: bounce, spring, 3D flip, cursor follower, scroll-jacking,
 *             harf harf ucusan yazi, yukleme ekrani.
 */

/* =============================================================================
   REVEAL — IntersectionObserver "is-in" sinifini ekler
   ========================================================================== */

/*
 * JS yuklenmezse veya devre disiysa icerik GORUNUR kalmali.
 * Bu yuzden gizleme yalnizca .wd-js sinifi varken uygulanir; bu sinifi
 * animations.js sayfa acilisinda ekler.
 */
.wd-js [data-wd-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--wd-dur-slow) var(--wd-ease-out),
		transform var(--wd-dur-slow) var(--wd-ease-out);
	transition-delay: var(--wd-reveal-delay, 0ms);
	will-change: opacity, transform;
}

.wd-js [data-wd-reveal].is-in {
	opacity: 1;
	transform: translateY(0);
}

/* Animasyon bittikten sonra will-change'i birak */
.wd-js [data-wd-reveal].is-done {
	will-change: auto;
}

/* --- Mask reveal: metin alttan "acilir" --- */

.wd-js [data-wd-reveal="mask"] {
	transform: none;
	opacity: 1;
	clip-path: inset(0 0 100% 0);
	transition: clip-path var(--wd-dur-slow) var(--wd-ease-out);
	transition-delay: var(--wd-reveal-delay, 0ms);
}

.wd-js [data-wd-reveal="mask"].is-in {
	clip-path: inset(0 0 0 0);
}

/* --- Cizgi reveal: ayirici soldan cizilir --- */

.wd-js [data-wd-reveal="line"] {
	opacity: 1;
	transform: none;
	transform-origin: left center;
	scale: 0 1;
	transition: scale var(--wd-dur-slow) var(--wd-ease-out);
	transition-delay: var(--wd-reveal-delay, 0ms);
}

.wd-js [data-wd-reveal="line"].is-in {
	scale: 1 1;
}

/* --- Gorsel reveal: hafif olcek + fade --- */

.wd-js [data-wd-reveal="image"] {
	opacity: 0;
	transform: scale(1.03);
	transition:
		opacity var(--wd-dur-slow) var(--wd-ease),
		transform 900ms var(--wd-ease-out);
	transition-delay: var(--wd-reveal-delay, 0ms);
}

.wd-js [data-wd-reveal="image"].is-in {
	opacity: 1;
	transform: scale(1);
}

/* =============================================================================
   HERO GIRIS SIRASI
   Tek bir orkestre edilmis an; dagilmis efektler yerine sirali giris.
   ========================================================================== */

.wd-js .wd-hero__title .wd-hero__line {
	clip-path: inset(0 0 105% 0);
	animation: wd-line-in 900ms var(--wd-ease-out) forwards;
}

.wd-js .wd-hero__title .wd-hero__line--1 {
	animation-delay: 80ms;
}

.wd-js .wd-hero__title .wd-hero__line--2 {
	animation-delay: 220ms;
}

.wd-js .wd-hero__lede,
.wd-js .wd-hero__actions,
.wd-js .wd-hero__meta {
	opacity: 0;
	transform: translateY(14px);
	animation: wd-rise-in 720ms var(--wd-ease-out) forwards;
}

.wd-js .wd-hero__lede { animation-delay: 380ms; }
.wd-js .wd-hero__actions { animation-delay: 480ms; }
.wd-js .wd-hero__meta { animation-delay: 580ms; }

.wd-js .wd-hero__frame {
	opacity: 0;
	transform: translateY(20px) scale(1.02);
	animation: wd-media-in 1000ms var(--wd-ease-out) 200ms forwards;
}

.wd-js .wd-hero__inset {
	opacity: 0;
	transform: translateY(16px);
	animation: wd-rise-in 800ms var(--wd-ease-out) 640ms forwards;
}

@keyframes wd-line-in {
	from {
		clip-path: inset(0 0 105% 0);
	}
	to {
		clip-path: inset(0 0 -10% 0);
	}
}

@keyframes wd-rise-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes wd-media-in {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* =============================================================================
   ISIK GECISI
   "Isigi Ac" basildiginda tum zemin, yuzeyler ve parlamalar birlikte doner.
   Gecis suresi bilerek uzun (620ms): bir lambanin yanmasi gibi.
   ========================================================================== */

.wd-ph,
.wd-card__media,
.wd-input,
.wd-textarea,
.wd-select,
.wd-badge,
.wd-chip,
.wd-btn,
.wd-header,
.wd-footer,
.wd-lightdemo,
.wd-section--tinted {
	transition-property: background-color, border-color, color, box-shadow, opacity;
	transition-duration: var(--wd-dur-slow);
	transition-timing-function: var(--wd-ease);
}

/*
 * Isik acikken isikli urun gorsellerinin cevresinde cok hafif sicak hale.
 * Yalnizca "isikli" olarak isaretlenmis urunlerde uygulanir — her urunun
 * etrafina glow konmaz.
 */
[data-light="on"] .wd-card--lit .wd-card__media::after {
	content: "";
	position: absolute;
	inset: -14%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
		circle at 50% 55%,
		color-mix(in srgb, var(--wd-light) 26%, transparent) 0%,
		transparent 62%
	);
	opacity: 1;
	transition: opacity var(--wd-dur-slow) var(--wd-ease-out);
}

[data-light="on"] .wd-card--lit .wd-card__media {
	overflow: visible;
}

[data-light="on"] .wd-card--lit .wd-card__media .wd-ph,
[data-light="on"] .wd-card--lit .wd-card__media .wd-img {
	position: relative;
	z-index: 1;
}

/* =============================================================================
   MIKNATIS CTA — cok hafif, JS degiskeni surer
   ========================================================================== */

.wd-magnetic {
	transform: translate3d(var(--wd-mx, 0px), var(--wd-my, 0px), 0);
	transition: transform 420ms var(--wd-ease-out);
}

/* Fare butonun uzerindeyken daha hizli takip, ayrilinca yumusak donus */
.wd-magnetic.is-tracking {
	transition: transform 120ms linear;
}

/* =============================================================================
   ISKELET / YUKLENIYOR
   ========================================================================== */

.wd-busy {
	position: relative;
	pointer-events: none;
}

.wd-busy::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: color-mix(in srgb, var(--wd-bg) 55%, transparent);
	border-radius: inherit;
}

.wd-spinner {
	display: inline-block;
	width: 15px;
	height: 15px;
	border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: wd-spin 700ms linear infinite;
}

@keyframes wd-spin {
	to {
		transform: rotate(360deg);
	}
}

/* =============================================================================
   AZALTILMIS HAREKET
   Kullanicinin sistem tercihi her seyin onunde gelir.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	html {
		scroll-behavior: auto;
	}

	/* Reveal edilecek her sey bastan gorunur olsun */
	.wd-js [data-wd-reveal],
	.wd-js [data-wd-reveal="mask"],
	.wd-js [data-wd-reveal="line"],
	.wd-js [data-wd-reveal="image"] {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		scale: 1 1 !important;
	}

	.wd-js .wd-hero__title .wd-hero__line,
	.wd-js .wd-hero__lede,
	.wd-js .wd-hero__actions,
	.wd-js .wd-hero__meta,
	.wd-js .wd-hero__frame,
	.wd-js .wd-hero__inset {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		animation: none !important;
	}

	/* Miknatis ve parallax tamamen kapali */
	.wd-magnetic {
		transform: none !important;
	}

	.wd-hero__media {
		transform: none !important;
	}

	.wd-spinner {
		animation: none;
		border-top-color: transparent;
	}
}