/* MevvBlocks — hareket efektleri: giriş animasyonu, yapışkan konum, parallaks.
 *
 * Ayrı dosya: her sayfada hareket ayarı yok, taban stile katmak her
 * ziyaretçiye kullanılmayan kural yüklemek olurdu. Yalnızca sayfanın
 * içeriğinde hareket ayarı geçiyorsa kuyruğa alınır.
 *
 * DIŞ KÜTÜPHANE YOK: giriş animasyonu keyframe değil GEÇİŞ (transition).
 * Sebep, kuralın kendisi: öge varsayılan hâlinde SON HÂLİNDEDİR, gizleme
 * sınıfını yalnızca betik ekler. Keyframe ile kursaydık başlangıç karesi
 * ögeyi görünmez yapardı ve betik yüklenmeyen ziyaretçide içerik
 * kaybolurdu.
 *
 * Yalnızca `opacity` ve `transform` canlandırılıyor: ikisi de bileşik
 * katmanda çalışır, yeniden düzen (reflow) doğurmaz. Yükseklik/kenar
 * boşluğu canlandırmak her karede düzeni yeniden hesaplatırdı. */

.mevv-hareket {
	--mevv-hareket-sure: 900ms;
	--mevv-hareket-gecikme: 0ms;
	--mevv-hareket-yumusatma: ease-out;
}

/* ---------- Giriş animasyonu ---------- */

.mevv-hareket-giris {
	transition:
		opacity var(--mevv-hareket-sure, 900ms) var(--mevv-hareket-yumusatma, ease-out) var(--mevv-hareket-gecikme, 0ms),
		transform var(--mevv-hareket-sure, 900ms) var(--mevv-hareket-yumusatma, ease-out) var(--mevv-hareket-gecikme, 0ms);
}

/* BAŞLANGIÇ HÂLİ. Bu sınıfı yalnızca betik ekler — işaretlemede yok.
   Betik yüklenmezse aşağıdaki hiçbir kural uygulanmaz ve öge görünür kalır. */
.mevv-hareket-giris.mevv-hareket-bekliyor {
	opacity: var(--mevv-giris-saydamlik, 0);
	transform:
		translate3d(var(--mevv-giris-x, 0), var(--mevv-giris-y, 0), 0)
		scale(var(--mevv-giris-olcek, 1));
	/* Yalnızca beklerken: her ögede sürekli açık bırakmak tarayıcıyı
	   gereksiz katman ayırmaya zorlar. */
	will-change: opacity, transform;
}

/* Öteleme mesafeleri kısa tutuldu: ekran dışından gelen büyük ötelemeler
   yatay taşma doğurur ve sayfayı sağa kaydırılabilir yapar. */
.mevv-giris-solma    { --mevv-giris-saydamlik: 0; }
.mevv-giris-asagidan { --mevv-giris-y: 40px; }
.mevv-giris-yukaridan { --mevv-giris-y: -40px; }
.mevv-giris-soldan   { --mevv-giris-x: -40px; }
.mevv-giris-sagdan   { --mevv-giris-x: 40px; }

/* Kaydırma çeşitleri solmaz, yalnızca öteler. */
.mevv-giris-kay-asagidan  { --mevv-giris-y: 72px;  --mevv-giris-saydamlik: 1; }
.mevv-giris-kay-yukaridan { --mevv-giris-y: -72px; --mevv-giris-saydamlik: 1; }
.mevv-giris-kay-soldan    { --mevv-giris-x: -72px; --mevv-giris-saydamlik: 1; }
.mevv-giris-kay-sagdan    { --mevv-giris-x: 72px;  --mevv-giris-saydamlik: 1; }

.mevv-giris-buyu  { --mevv-giris-olcek: 0.85; }
.mevv-giris-kucul { --mevv-giris-olcek: 1.15; }

/* ---------- Yapışkan konum ---------- */

/* `position: sticky` — JS ile kaydırma dinleyip `top` hesaplamak yerine.
 * JS yolu her karede ögeyi ölçüp konumlandırmak demek: tırtıklı hareket,
 * boşuna pil tüketimi ve öge `fixed` olduğu anda akıştan çıktığı için
 * altındaki içeriğin yukarı zıplaması. `sticky` bunların hiçbirini
 * yaşatmaz; öge akışta kalır, yapışma işini derleyici (compositor) yapar.
 *
 * SINIR KAPSAYICI KENDİLİĞİNDEN ÇALIŞIR: yapışkan öge ancak KENDİ ana
 * ögesinin kutusu içinde yapışık kalır, ana öge ekrandan çıkarken onunla
 * beraber gider. Kaynak eklentinin ayrı bir "ana ögeye sınırla" anahtarı
 * bu davranışın JS ile taklidi.
 *
 * `sticky`NİN YETMEDİĞİ İKİ DURUM (bilerek JS'e geçmiyoruz):
 *  1. Üst atalardan birinde `overflow: hidden/auto/scroll` varsa yapışma
 *     o kaydırma bağlamına hapsolur ve ekrana göre çalışmaz. Tema
 *     sarmalayıcısı `overflow: hidden` taşıyorsa çözüm o kuralı kaldırmak;
 *     JS ile `fixed` konumlandırmak ögeyi akıştan çıkarıp altındaki
 *     içeriği zıplatırdı.
 *  2. Ana öge yalnızca ögenin kendi boyu kadarsa yapışacak yol yoktur —
 *     hiçbir şey olmaz. Bu bir kusur değil, `sticky`nin tanımı.
 */
.mevv-yapiskan {
	position: sticky;
	/* Yapışan öge normal akıştaki içeriğin üstünde kalmalı; aksi hâlde
	   kaydırınca altından geçen kartların arkasında kaybolur. */
	z-index: 10;
}

.mevv-yapiskan-ust { top: var(--mevv-yapiskan-ofset, 0px); }
.mevv-yapiskan-alt { bottom: var(--mevv-yapiskan-ofset, 0px); }

/* Kırılım kapıları. Sınıf hangi cihazlarda AÇIK olduğunu söyler; kapalı
   kırılımda konumlandırma tamamen geri alınır. Kırılım sınırları stil
   motorununkiyle aynı (tablet ≤1024, mobil ≤767) — iki ayrı sınır sistemi
   olsaydı yapışma ile düzen farklı genişliklerde değişirdi. */
@media (max-width: 767px) {
	.mevv-yapiskan:not(.mevv-yapiskan-mobil) { position: static; z-index: auto; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.mevv-yapiskan:not(.mevv-yapiskan-tablet) { position: static; z-index: auto; }
}
@media (min-width: 1025px) {
	.mevv-yapiskan:not(.mevv-yapiskan-masaustu) { position: static; z-index: auto; }
}

/* ---------- Parallaks ---------- */

/* `background-attachment: fixed` KULLANILMIYOR.
 *
 * İki ayrı sebep:
 *  1. Mobil tarayıcılar (iOS Safari, Android Chrome) bu değeri
 *     desteklemiyor; sessizce `scroll` gibi davranıyor — yani efekt
 *     telefonda hiç yok.
 *  2. iOS'ta ayrıca arka planı görünüm alanına göre ölçekleyip kırpıyor;
 *     tam ekran bir bölümde görsel kayıyor ve düzen bozuluyor.
 *
 * Yerine ögenin `::before` katmanı kullanılıyor: kutudan taşacak kadar
 * uzun, `transform` ile öteleniyor. `transform` bileşik katmanda çalışır,
 * her karede yeniden düzen istemez. */
.mevv-parallaks {
	position: relative;
	overflow: hidden;
	/* Aynı görsel stil motoru tarafından ögenin arka planına da basılmış
	   olabilir; iki kopya, biri sabit biri hareketli görünürdü. */
	background-image: none !important;
}

/* İçerik katmanın ÜSTÜNDE kalmalı. Katmana negatif z-index vermek onu
   ögenin kendi arka planının da altına atardı; arka plan rengi varsa
   parallaks hiç görünmezdi. */
.mevv-parallaks > * {
	position: relative;
	z-index: 1;
}

.mevv-parallaks::before {
	content: "";
	position: absolute;
	/* Üstte ve altta %15 pay: öteleme sırasında katmanın kenarı kutunun
	   içine girip boşluk göstermesin. Betik ötelemeyi bu payla sınırlar. */
	inset: -15% 0;
	z-index: 0;
	background-image: var(--mevv-parallaks-gorsel);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transform: translate3d(0, var(--mevv-parallaks-y, 0px), 0);
	will-change: transform;
	pointer-events: none;
}

/* ---------- Hareketi azalt ---------- */

/* TIBBİ GEREKLİLİK, tercih değil: vestibüler rahatsızlığı olan kullanıcıda
 * kaydırmaya bağlı hareket baş dönmesi ve mide bulantısı yapar.
 *
 * `!important` bilinçli. Bu blok, betiğin eklediği gizleme sınıfını ve
 * satır içi özel değişkenleri de ezmek zorunda: ziyaretçi ayarı sayfa
 * açıldıktan SONRA değiştirdiğinde bile öge görünür ve yerinde kalmalı.
 * Kural "animasyonu yavaşlat" değil "hiç oynatma"dır.
 *
 * ÖGE GİZLİ KALMAZ: `opacity: 1` ve `transform: none` — animasyonla
 * görünür olan bir şey, animasyon kapalıyken de görünür olmalı. Yoksa
 * erişilebilirlik ayarını açan kullanıcı sayfanın yarısını hiç göremezdi.
 *
 * Yapışkan konum bu bloğun DIŞINDA: yapışma bir animasyon değil,
 * konumlandırma. Kendiliğinden hareket eden bir şey yok. */
@media (prefers-reduced-motion: reduce) {
	.mevv-hareket-giris,
	.mevv-hareket-giris.mevv-hareket-bekliyor {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		will-change: auto !important;
	}

	.mevv-parallaks::before {
		transform: none !important;
		will-change: auto !important;
	}
}

/* Yazdırmada da gizli kalan öge olmamalı: ziyaretçi sayfayı kaydırmadan
   yazdırırsa görmediği bölümler kâğıda hiç düşmezdi. */
@media print {
	.mevv-hareket-giris,
	.mevv-hareket-giris.mevv-hareket-bekliyor {
		opacity: 1 !important;
		transform: none !important;
	}
}