/* ============================================================
   Dosya: /assets/css/animasyon.css
   Notlar:
============================================================ */

	/* ============================================================
	   ✅ SCROLL REVEAL MOTORU (1 KEZ EKLENİR)
	   - Hatalar düzeltildi:
		 * transition-property netleştirildi
		 * filter reset "none" yapıldı (sadece blur değil, tüm filtreleri sıfırlar)
		 * 3D flip titremesi için backface/preserve-3d eklendi
		 * reduce-motion desteği eklendi
	============================================================ */
	.rvl {
	  opacity: 0;
	  visibility: hidden;
	  transform: translate(0,0); /* bazı tarayıcılar için başlangıç stabil */
	  filter: none;
	  backface-visibility: hidden;
	  transform-style: preserve-3d;

	  /* Varsayılan geçiş (efekt bazında override edilebilir) */
	  transition-property: transform, opacity, filter, box-shadow, clip-path, -webkit-mask-position, mask-position, border-color;
	  transition-duration: var(--rvl-dur, .8s);
	  transition-timing-function: var(--rvl-ease, ease-out);
	  transition-delay: var(--rvl-delay, 0s);
	  will-change: transform, opacity, filter;
	}

	.rvl.active {
	  opacity: 1;
	  visibility: visible;
	  transform: translate(0,0) scale(1) rotate(0) skew(0) rotateX(0) rotateY(0);
	  filter: none;
	}
	
	/* ===================== FX-04 ===================== 
	KULLANDI BEYAZ MAVİ BEYAZ cardlar  */
	.fx-4-slide-left { transform: translateX(-100px); } /* 4. SLIDE LEFT: Soldan giriş */
	
	/* ===================== FX-16 ===================== 
	KULLANILDI HERO   */
	.fx-16-zoom-out-fade { transform: scale(1.22); } 													/* 16. ZOOM OUT + FADE: Premium yakınlaşma hissi */
	
	/* ===================== FX-17 =====================   
	KULLANILDI ANA BAŞLIK */
	.fx-17-apple-style { transform: scale(.92) translateY(28px); --rvl-ease: cubic-bezier(0.4, 0, 0.2, 1); --rvl-dur: 1s; } /* 17. APPLE STYLE: Premium easing + scale */

	/* ===================== FX-27 ===================== 
	KULLANILDI 🚀 Yıllık Lisans */
	.fx-27-flip-x { transform: perspective(1000px) rotateX(90deg); }                                    /* 27. FLIP X: Üstten katlanma */

	/* ===================== FX-29 ===================== 
	KULLANILDI FREE vs PRO */
	.fx-29-flip-down { transform: perspective(1000px) rotateX(-90deg); transform-origin: top; }         /* 29. FLIP DOWN: Kapak gibi */

	/* ===================== FX-30 ===================== 
	KULLANDI Eşsiz Özellik - Media Health Taraması  */
	.fx-30-flip-right-3d { transform: perspective(1000px) rotateY(-90deg); transform-origin: right; }   /* 30. FLIP RIGHT 3D */
	
	/* 49–52: clip-path'i .block yerine img üzerinde uygula 
	KULLANILDI Lifetime*/
	.fx-49-clip-left img    { clip-path: inset(0% 100% 0% 0%); transition: clip-path 1s ease; }         /* 49. CLIP LEFT: Soldan aç */
	.fx-49-clip-left.active img { clip-path: inset(0% 0% 0% 0%); }                                      /* 49 active tam görünür */
	
	/* ===================== FX-52 ===================== 
	KULLANDI BENZERSİZ PAZAR AVANTAJI */
	.fx-52-clip-bottom img  { clip-path: inset(0% 0% 100% 0%); transition: clip-path 1s ease; }         /* 52. CLIP BOTTOM: Alttan aç */
	.fx-52-clip-bottom.active img { clip-path: inset(0% 0% 0% 0%); }                                    /* 52 active tam görünür */
	
	/* ===================== FX-56 ===================== */
	.fx-56-border-draw { border: 2px solid transparent; } 												/* 56. BORDER DRAW: Kenarlık sonradan görünür */
	.fx-56-border-draw.active { border-color: rgba(59, 130, 246, 0.95); } 								/* 56. BORDER DRAW: active border */
	
	
	/* ===================== fx-stagger-right-64 ===================== */
	/* --- YAN YANA RESİMLER İÇİN SOLDAN SAĞA SIRALI GELİŞ --- */
	.fx-stagger-right-64 { transform: translateX(-50px); }     /* Başlangıçta 50px solda bekle */
	.delay64-1 { transition-delay: 0.1s; }                     /* 1. Resim: 100ms gecikme */
	.delay64-2 { transition-delay: 0.25s; }                    /* 2. Resim: 250ms gecikme */
	.delay64-3 { transition-delay: 0.4s; }                     /* 3. Resim: 400ms gecikme */

	
	
	/* =====================================================================
	   ✅ FX-62 — STICKY INNER PARALLAX (FINAL / Lazy-load güvenli)
	   - Dark/Light uyumlu (fallback ile)
	   - 284x481 görsel için mask daha mantıklı
	===================================================================== */	
	.fx-62-parx{
	  /* Kart & sticky */
	  --parx-card-h: 420px;
	  --parx-sticky-top: 110px;
	  --parx-gap: 18px;
	
	  /* Görsel alanı (sen: 284x481) */
	  --parx-left-w: 284px;
	  --parx-left-h: 320px; /* görünen pencere (küçük), resim daha uzun => kayma olur */
	
	  /* JS hesaplayacak */
	  --parx-travel: 0px;
	
	  height: calc(var(--parx-card-h) + var(--parx-travel));
	  margin: 90px 0;
	  position: relative;
	}
	
	/* Kart: resim SAĞDA kalsın */
	.fx-62-parx .parx-wrap{
	  height: var(--parx-card-h);
	  display: flex;
	  flex-direction: row-reverse; /* ✅ sağa alır */
	  gap: var(--parx-gap);
	  align-items: center;
	
	  /* Dark/Light uyum (site.css değişken varsa onu kullanır, yoksa fallback) */
	  background: var(--card, #ffffff);
	  color: var(--text, #0f172a);
	  border: 1px solid var(--border, rgba(15, 23, 42, .10));
	  border-radius: 16px;
	  padding: 22px;
	  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
	
	  position: sticky;
	  top: var(--parx-sticky-top);
	  overflow: hidden;
	}
	
	/* Görsel mask */
	.fx-62-parx .parx-left{
	  width: var(--parx-left-w);
	  height: var(--parx-left-h);
	  flex: 0 0 var(--parx-left-w);
	  border-radius: 12px;
	  overflow: hidden;
	  background: var(--muted-bg, #e5e7eb);
	}
	
	/* Kayan resim */
	.fx-62-parx .parx-img{
	  width: 100%;
	  height: auto;
	  display: block;
	  transform: translateY(0);
	  will-change: transform;
	  transition: transform 0.14s linear; /* “hız/yumuşaklık” ayarı */
	}
	
	/* Metin alanı */
	.fx-62-parx .parx-right{
	  flex: 1;
	  min-width: 0;
	}
	
	/* Mobil: sticky kapat */
	@media (max-width: 820px){
	  .fx-62-parx{ height:auto; margin: 40px 0; }
	  .fx-62-parx .parx-wrap{
		position: relative;
		top: auto;
		height: auto;
		flex-direction: column; /* mobilde alt alta */
	  }
	  .fx-62-parx .parx-left{
		width: 100%;
		max-width: 420px;
		height: 320px;
		flex: none;
	  }
	}
	
	
	/* =====================================================================
	   ✅ MOBILE / RESPONSIVE PATCH
	   - Masaüstü düzeni bozmadan sadece küçük ekranlarda alt alta
	===================================================================== */
	/* Tablet ve altı: bloklar alt alta, resim full genişlik */
	@media (max-width: 920px){
	  body{ padding: 30px 0 !important; }
	  .container{ max-width: 720px; }
	} /* ✅ 920 kapanış */
	
	/* Telefon: daha sıkı padding, daha küçük gölge */
	@media (max-width: 520px){
	  .container{ padding: 0 12px; }
	
	  .fx-49-clip-left img,
	  .fx-52-clip-bottom img{
		transition-duration: .9s !important;
	  }
	} /* ✅ 520 kapanış */

	
	/* ============================================================
	   ✅ SLIDER HOVER PREVIEW (Popup)
	   - Mouse ile üzerine gelince büyük görsel gösterir
	   - Mouse çıkınca kapanır
	   - Dark/Light uyumlu (CSS değişken fallback)
	============================================================ */
	.slide-preview-pop{
	  position: fixed;
	  left: 0; top: 0;
	  transform: translate(0,0);
	  z-index: 9999;
	  pointer-events: none; /* ✅ popup mouse yakalamaz -> hover bozulmaz */
	  opacity: 0;
	  visibility: hidden;
	  transition: opacity .12s ease, transform .12s ease;
	}

	.slide-preview-pop.is-open{
	  opacity: 1;
	  visibility: visible;
	}

	.slide-preview-pop .pop-inner{
		width: min(860px, calc(100vw - 40px));
		/* 
		//Popup’ın genişliğini ve yüksekliğini artırmak için:
		width: min(1100px, calc(100vw - 40px));
		max-height: min(86vh, 860px);
		*/

	  /* ✅ popup’ın maksimum yüksekliği */
	  max-height: min(78vh, 720px);
	  /* Resim yüklenene kadar “zıplama” olmasın */
	  min-height: 240px;

	  /* ✅ içeriği merkezle + sığdırma zemini */
	  display: flex;
	  align-items: center;
	  justify-content: center;

	  /* ✅ kırpma olmasın */
	  overflow: hidden;

	  border-radius: 18px;
	  background: var(--card, #ffffff);
	  border: 1px solid var(--border, rgba(15, 23, 42, .12));
	  box-shadow: 0 20px 60px rgba(0,0,0,.22);
	}

	.slide-preview-pop img{
	  /* ✅ resim asla taşmaz, asla kırpılmaz */
	  max-width: 100%;
	  max-height: 100%;

	  /* ✅ oran bozulmadan sığdır */
	  width: auto;
	  height: auto;
	  object-fit: contain;

	  display: block;
	}
	
	/* ============================================================
	   ✅ XX SLIDER — YÜKSEKLİK NORMALLEŞTİRME (FIX)
	   - Kartların gereksiz uzamasını engeller
	   - Resmi taşırmadan sığdırır (contain)
	============================================================ */
	.features-slider .slider-viewport-xx{
	  /* viewport fazla uzuyorsa */
	  overflow: hidden;
	  
	}
	.features-slider #sliderTrackXX{
	  /* flex ise kartları uzatma */
	  align-items: center; /* stretch yerine */
	}
	/* Kart (slide) */
	.features-slider .feature-slide-xx{
	  height: auto !important;
	  min-height: 0 !important;
	  display: flex;
	  align-items: center;
	}
	/* İç sarmalayıcı (senin <div aria-hidden="true">) */
	.features-slider .feature-slide-xx > div[aria-hidden="true"]{
	  width: 100%;
	  height: auto !important;
	  min-height: 0 !important;

	  /* ✅ Kart içinde ortala */
	  display: flex;
	  align-items: center;
	  justify-content: center;

	  /* ✅ Kartın “maksimum” yüksekliği (asıl fix) */
	  max-height: 520px;            /* masaüstü için ideal */
	  padding: 10px 0;              /* çok uzamasın diye küçük padding */
	}
	/* Resim */
	.features-slider .feature-slide-xx img{
	  width: 100%;
	  height: auto;

	  /* ✅ En kritik: yüksekliği sınırla */
	  max-height: 520px;

	  /* ✅ Kırpma yok, sığdır */
	  object-fit: contain;

	  display: block;
	}
	
	/* ============================================================
	   ✅ XX SLIDER — DOT (NOKTA) BOŞLUK KISMA
	============================================================ */

	/* 1) Resim alanı ile dots arasındaki boşluğu azalt */
	.features-slider .slider-viewport-xx{
	  margin-bottom: 8px !important;   /* önce 8 dene */
	  margin-bottom: 0px !important;
	  padding-bottom: 0 !important;
	}

	/* 2) Dots satırının üst boşluğunu azalt */
	.features-slider #sliderDotsXX,
	.features-slider .slider-container-xx .slider-nav{
	  margin-top: 8px !important;      /* önce 8 dene */
	  padding-top: 0 !important;
	}

	/* 3) Slider container alt boşluğu varsa onu da kırp */
	.features-slider .slider-container-xx{
	  padding-bottom: 0 !important;
	  margin-bottom: 0 !important;
	  margin-top: 0 !important;
	}

	
	@media (max-width: 920px){
	  .features-slider .feature-slide-xx > div[aria-hidden="true"]{
		max-height: 420px;
	  }
	  .features-slider .feature-slide-xx img{
		max-height: 420px;
	  }
	}
	@media (max-width: 520px){
	  .features-slider .feature-slide-xx > div[aria-hidden="true"]{
		max-height: 320px;
		padding: 6px 0;
	  }
	  .features-slider .feature-slide-xx img{
		max-height: 320px;
	  }
	}




	/* Mobilde hover yok gibi, popup’ı kapatalım (istersen tıkla aç yaparız) */
	@media (max-width: 820px){
	  .slide-preview-pop{ display:none !important; }
	}