/*
 * Tüm sayfalarda bileşen giriş animasyonları ("reveal") ve sayfa geçişleri (ROADMAP.md, Faz 2b).
 * Kurallar:
 *  - Gizleme yalnızca <html class="it-js"> varken (layout'taki inline script ekler). JS 3 sn içinde devreye girmezse
 *    script bu sınıfı kaldırır ve her şey görünür. JS kapalıysa site bugünkü gibi görünür.
 *  - ThemeEffects.tsx aşağıdaki hedefleri izler; ekrana girince data-in ekler, --i ile sıralı gecikme verir.
 *  - Yalnızca opacity + transform (sayfa düzeni kaymaz). Hareket azaltma tercihinde hiçbir şey gizlenmez.
 *  Hedef listesi ThemeEffects.tsx'teki REVEAL ile aynı olmalı.
 */

@media (prefers-reduced-motion: no-preference) {
  /* --- İzlenen öğeler: başlangıç durumu --- */
  .it-js .title-box > *,
  .it-js .xamin-services,
  .it-js .iq-pricing,
  .it-js .it-step,
  .it-js .it-layer:not(.it-dj .it-layer),
  .it-js .iq-list > li,
  .it-js .it-pai-points > li,
  .it-js .it-q-lead,
  .it-js .it-ask-note,
  .it-js .it-q-links,
  .it-js .it-figure,
  .it-js .it-figure-img,
  .it-js .it-intro img.img-fluid,
  .it-js .it-table tbody tr,
  .it-js .it-table thead tr,
  .it-js .it-cta h3,
  .it-js .it-cta p,
  .it-js .it-cta .text-lg-right,
  .it-js .it-related-links > *,
  .it-js .it-marquee,
  .it-js .it-q-term,
  .it-js .it-q-result,
  .it-js .it-mon,
  .it-js .it-ask,
  .it-js .it-tower,
  .it-js .it-pai,
  .it-js .it-con-wrap,
  .it-js .it-form,
  .it-js .it-map,
  .it-js .iq-contact {
    opacity: 0;
    transform: translateY(18px);
    /* Giriş (opacity/transform, sıralı gecikmeli) + temanın hover geçişleri (gecikmesiz) korunur */
    transition-property: opacity, transform, background-color, color, box-shadow, border-color, margin-top;
    transition-duration: 0.6s, 0.6s, 0.2s, 0.2s, 0.4s, 0.3s, 0.4s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.22, 1, 0.36, 1), ease, ease, ease, ease, ease;
    transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s, 0s, 0s, 0s;
  }
  /* Türe göre başlangıç farkları (sade: küçük mesafeler) */
  .it-js .iq-list > li,
  .it-js .it-pai-points > li,
  .it-js .it-layer:not(.it-dj .it-layer) { transform: translateX(-14px); }
  .it-js .it-figure-img,
  .it-js .it-intro img.img-fluid,
  .it-js .it-mon,
  .it-js .it-ask,
  .it-js .it-tower,
  .it-js .it-pai,
  .it-js .it-con-wrap,
  .it-js .it-q-term { transform: translateY(12px) scale(0.97); }
  .it-js .it-table tbody tr,
  .it-js .it-table thead tr,
  .it-js .it-marquee { transform: none; }
  /* Adımlar: numara dairesi küçükten büyür */
  .it-js .it-step .it-step-no { transform: scale(0.4); opacity: 0; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s, opacity 0.3s ease 0.15s; }
  .it-js .it-step[data-in] .it-step-no { transform: none; opacity: 1; }

  /* --- Görünür olunca --- */
  /* data-in: React bileşenleri className'i yeniden yazsa da korunur (sınıf olsaydı silinirdi) */
  .it-js [data-in] { opacity: 1 !important; transform: none !important; }

  /* Footer: çok hafif, yalnızca belirme */
  .it-js footer .footer-top [class*="col-"] { opacity: 0; transition: opacity 0.8s ease; transition-delay: calc(var(--i, 0) * 90ms); }
  .it-js footer .footer-top [class*="col-"][data-in] { opacity: 1; }

  /* CTA bandı: içerik girince zeminde tek seferlik hafif ışık geçişi */
  .it-cta { position: relative; overflow: hidden; }
  .it-cta::after {
    /* left yerine transform ile hareket: düzen değişmez, CLS sayılmaz */
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    transform: translateX(-150%) skewX(-15deg); opacity: 0;
  }
  .it-cta[data-lit]::after { animation: it-rv-sweep 1.4s ease-out 0.2s; }
  .it-cta .container { position: relative; z-index: 1; }

  /* --- Alt sayfa hero ve ana sayfa hero: JS beklemeden, yükleniş anında (CSS) --- */
  .iq-breadcrumb-one .title { animation: it-rv-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .iq-breadcrumb-one .breadcrumb { animation: it-rv-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
  /* Eski "wow fadeInRight" (%100 sert kayma) yerine kısa kayma + hafif ölçek; animate.css'in sınıfını geçersiz kılar */
  .iq-breadcrumb-one .wow { visibility: visible !important; animation: it-rv-img 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
  .it-hero h1 { animation: it-rv-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .it-hero .it-hero-lead { animation: it-rv-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
  .it-hero .it-hero-actions { animation: it-rv-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
  .it-hero .it-agent-viz { animation: it-rv-img 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }

  /* --- Sayfa geçişi: sayfalar arası yumuşak geçiş (destekleyen tarayıcılarda; diğerlerinde normal) --- */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: it-vt-out 0.22s ease both; }
  ::view-transition-new(root) { animation: it-vt-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }
}

@keyframes it-rv-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes it-rv-img { from { opacity: 0; transform: translateX(24px) scale(0.97); } }
@keyframes it-rv-sweep { 0% { transform: translateX(-150%) skewX(-15deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(420%) skewX(-15deg); opacity: 0; } }
@keyframes it-vt-out { to { opacity: 0; } }
@keyframes it-vt-in { from { opacity: 0; transform: translateY(8px); } }

/* Yazdırmada her şey görünür */
@media print {
  .it-js * { opacity: 1 !important; transform: none !important; }
}