/* ============================================================
   VIGA EMLAK — ANİMASYON KATMANI  (animations.css)
   Kaynak tasarım: "Viga Emlak Animasyonlar.dc.html" (Claude Design)
   Premium, sakin, Akdeniz esintili. Yalnızca transform + opacity.
   Bağımlılık yok. animations.js ile birlikte çalışır.

   NOT: Bu dosya tasarımdan birebir alınmıştır; proje sınıflarına
   bağlanma noktaları site.css / site.js içinde işaretlidir.
   ============================================================ */

:root {
  /* Zamanlama token'ları */
  --gecis-hizli: 180ms;
  --gecis-normal: 300ms;
  --gecis-yavas: 600ms;

  /* Easing token'ları */
  --easing-yumusak: cubic-bezier(.16, 1, .3, 1); /* yumuşak çıkış */
  --easing-cikis: ease-out;

  /* Marka renkleri (parlama/gölge için) */
  --renk-turkuaz: #2FA6A0;
  --renk-teal: #0E3A46;
}

/* ============================================================
   0 · AZALTILMIŞ HAREKET — kullanıcı tercihine mutlak saygı
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .viga-reveal { opacity: 1 !important; transform: none !important; }
  .viga-hero-bg { animation: none !important; }
}

/* ============================================================
   1 · SCROLL REVEAL — görünüme girince fade + slide-up
   .viga-reveal  → gizli başlar; .gorunur eklenince açılır (JS)
   data-viga-gecikme veya .viga-stagger > * ile art arda gelir
   ============================================================ */
.viga-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--gecis-yavas) var(--easing-yumusak),
    transform var(--gecis-yavas) var(--easing-yumusak);
  will-change: opacity, transform;
}
.viga-reveal.gorunur {
  opacity: 1;
  transform: none;
}
/* Yön varyantları */
.viga-reveal.viga-reveal--sol  { transform: translateX(-18px); }
.viga-reveal.viga-reveal--sag  { transform: translateX(18px); }
.viga-reveal.viga-reveal--olcek { transform: scale(.97); }
.viga-reveal.gorunur.viga-reveal--sol,
.viga-reveal.gorunur.viga-reveal--sag,
.viga-reveal.gorunur.viga-reveal--olcek { transform: none; }

/* Stagger: JS her çocuğa --viga-sira indeksini yazar (80ms aralık) */
.viga-stagger > .viga-reveal {
  transition-delay: calc(var(--viga-sira, 0) * 80ms);
}

/* ============================================================
   2 · İLAN KARTI — hover'da kalkma, foto zoom, fiyat parlama
   ============================================================ */
.viga-kart {
  transition:
    transform var(--gecis-normal) var(--easing-yumusak),
    box-shadow var(--gecis-normal) var(--easing-yumusak);
  will-change: transform;
}
.viga-kart__foto {
  overflow: hidden; /* zoom taşmasın */
}
.viga-kart__foto > img,
.viga-kart__foto > .viga-kart__gorsel {
  transition: transform var(--gecis-yavas) var(--easing-yumusak);
  will-change: transform;
}
.viga-kart__fiyat {
  transition: color var(--gecis-normal) var(--easing-cikis);
}

/* Hover etkileri yalnızca gerçek işaretçi (mouse) olan cihazlarda */
@media (hover: hover) and (pointer: fine) {
  .viga-kart:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px -14px rgba(14, 58, 70, .22);
  }
  .viga-kart:hover .viga-kart__foto > img,
  .viga-kart:hover .viga-kart__foto > .viga-kart__gorsel {
    transform: scale(1.05);
  }
  .viga-kart:hover .viga-kart__fiyat {
    color: color-mix(in srgb, var(--renk-turkuaz) 82%, #fff);
  }
}

/* Favori (kalp) — .aktif sınıfı JS ile eklenince pop + dolma */
.viga-kalp {
  cursor: pointer;
  transition: transform var(--gecis-hizli) var(--easing-yumusak);
}
.viga-kalp svg { display: block; }
.viga-kalp__dolu {
  transform: scale(0);
  transform-origin: center;
  transition: transform var(--gecis-normal) var(--easing-yumusak);
}
.viga-kalp.aktif .viga-kalp__dolu { transform: scale(1); }
.viga-kalp.viga-pop { animation: viga-kalp-pop var(--gecis-normal) var(--easing-yumusak); }

@keyframes viga-kalp-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* ============================================================
   3 · BUTONLAR — kalkma, basılma, spinner
   ============================================================ */
.viga-btn {
  transition:
    transform var(--gecis-hizli) var(--easing-cikis),
    box-shadow var(--gecis-normal) var(--easing-yumusak),
    background-color var(--gecis-normal) var(--easing-cikis);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .viga-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(47, 166, 160, .5);
  }
}
.viga-btn:active { transform: scale(.98); }

/* Yükleniyor durumu: metni gizle, ince spinner göster */
.viga-btn.yukleniyor {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.viga-btn.yukleniyor::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: viga-spin .7s linear infinite;
}
/* Açık zeminli buton için koyu spinner varyantı */
.viga-btn.yukleniyor.viga-btn--acik::after {
  border-color: rgba(14, 58, 70, .25);
  border-top-color: var(--renk-teal);
}
@keyframes viga-spin { to { transform: rotate(360deg); } }

/* Bağımsız ince spinner */
.viga-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(14, 58, 70, .2);
  border-top-color: var(--renk-turkuaz);
  border-radius: 50%;
  animation: viga-spin .7s linear infinite;
}

/* ============================================================
   4 · HEADER — scroll'da şeffaftan opak beyaza
   .viga-header (temel), JS .kucuk ekler
   ============================================================ */
.viga-header {
  transition:
    background-color var(--gecis-normal) var(--easing-cikis),
    box-shadow var(--gecis-normal) var(--easing-cikis),
    height var(--gecis-normal) var(--easing-yumusak),
    backdrop-filter var(--gecis-normal) var(--easing-cikis);
  background-color: rgba(250, 247, 241, 0);
}
.viga-header.kucuk {
  background-color: rgba(250, 247, 241, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(14, 58, 70, .08);
}

/* ============================================================
   5 · HERO — açılışta stagger fade-up + yavaş Ken Burns
   ============================================================ */
.viga-hero-ac {
  opacity: 0;
  transform: translateY(16px);
  animation: viga-fade-up var(--gecis-yavas) var(--easing-yumusak) forwards;
  animation-delay: calc(var(--viga-sira, 0) * 140ms + 120ms);
}
@keyframes viga-fade-up {
  to { opacity: 1; transform: none; }
}

.viga-hero-bg {
  animation: viga-ken-burns 20s ease-out forwards;
  will-change: transform;
}
@keyframes viga-ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* ============================================================
   6 · GALERİ / LIGHTBOX — açılışta fade + scale
   ============================================================ */
.viga-lightbox {
  opacity: 0;
  transition: opacity var(--gecis-normal) var(--easing-cikis);
}
.viga-lightbox.acik { opacity: 1; }
.viga-lightbox__resim {
  transform: scale(.96);
  opacity: 0;
  transition:
    transform var(--gecis-normal) var(--easing-yumusak),
    opacity var(--gecis-normal) var(--easing-cikis);
}
.viga-lightbox.acik .viga-lightbox__resim { transform: scale(1); opacity: 1; }
/* Fotoğraflar arası yumuşak geçiş için tazeleme sınıfı */
.viga-lightbox__resim.viga-degisiyor { opacity: 0; transform: scale(.98); }

/* ============================================================
   7 · FİLTRE / GRID TAZELEME — zıplamasız fade-out/in
   ============================================================ */
.viga-grid {
  transition: opacity var(--gecis-normal) var(--easing-cikis);
}
.viga-grid.viga-tazeleniyor { opacity: 0; }

/* ============================================================
   8 · HARİTA PİNLERİ — drop-in, hover büyüme, seçili vurgu
   ============================================================ */
.viga-pin {
  opacity: 0;
  transform: translateY(-14px) scale(.8);
  transition:
    transform var(--gecis-normal) var(--easing-yumusak),
    opacity var(--gecis-normal) var(--easing-cikis),
    background-color var(--gecis-normal) var(--easing-cikis);
  transform-origin: center bottom;
  will-change: transform, opacity;
}
.viga-pin.dustu { opacity: 1; transform: none; }
.viga-pin.dustu { transition-delay: calc(var(--viga-sira, 0) * 60ms); }
@media (hover: hover) and (pointer: fine) {
  .viga-pin.dustu:hover { transform: scale(1.12); z-index: 5; }
}
.viga-pin.secili { transform: scale(1.12); z-index: 6; }

/* ============================================================
   9 · SAYFA GEÇİŞİ — içerik yumuşak fade-in (preloader YOK)
   <body class="viga-sayfa"> → yüklenince .hazir eklenir
   ============================================================ */
.viga-sayfa {
  opacity: 0;
  transition: opacity var(--gecis-normal) var(--easing-cikis);
}
.viga-sayfa.hazir { opacity: 1; }

/* ============================================================
   10 · SKELETON — shimmer/nabız
   ============================================================ */
.viga-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(14, 58, 70, .07);
  border-radius: 8px;
}
.viga-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, .55) 50%,
    transparent 100%
  );
  animation: viga-shimmer 1.4s ease-in-out infinite;
}
@keyframes viga-shimmer { to { transform: translateX(100%); } }

/* ============================================================
   11 · MİKRO ETKİLEŞİMLER
   ============================================================ */
/* Form input focus */
.viga-input {
  transition:
    border-color var(--gecis-normal) var(--easing-cikis),
    box-shadow var(--gecis-normal) var(--easing-cikis),
    background-color var(--gecis-normal) var(--easing-cikis);
}
.viga-input:focus {
  outline: none;
  border-color: var(--renk-turkuaz);
  box-shadow: 0 0 0 4px rgba(47, 166, 160, .14);
}

/* Başarı mesajı slide-down */
.viga-basari {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity var(--gecis-normal) var(--easing-cikis),
    transform var(--gecis-normal) var(--easing-yumusak);
}
.viga-basari.gorunur { opacity: 1; transform: none; }

/* Sayaç bandı — sayı yukarı sayarken hafif giriş */
.viga-sayac {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   12 · PROJEYE BAĞLANMA — mevcut sınıflara köprüler
   (Tasarımda yok; Viga Emlak markup'ına uyarlama katmanı.)
   ============================================================ */

/* Favori kalbi: site.js kendi .aktif mantığını yürüttüğü için
   .viga-kalp sınıfı KULLANILMAZ (animations.js'in tıklama
   dinleyicisi çift toggle'a yol açardı). Yalnızca pop animasyonu
   ödünç alınır — site.js tıklamada .viga-pop ekler. */
.fav-btn.viga-pop { animation: viga-kalp-pop var(--gecis-normal) var(--easing-yumusak); }

/* İlan kartı hem .viga-kart hem .viga-reveal taşır; ikisi de transform
   geçişi tanımladığı için sonuncusu (300ms) kazanıyordu. Açılıştaki
   solma 600ms'de kalsın, hover 300ms'de hızlı kalsın: */
.viga-kart.viga-reveal {
  transition:
    opacity var(--gecis-yavas) var(--easing-yumusak),
    transform var(--gecis-normal) var(--easing-yumusak),
    box-shadow var(--gecis-normal) var(--easing-yumusak);
}

/* Üst bar: site.css'te blur + kenarlık her zaman açık. Tasarımda ise
   tepedeyken tamamen şeffaf, kaydırınca opaklaşıyor. */
.site-header.viga-header {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.site-header.viga-header.kucuk {
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--cizgi);
}

/* JS kapalıysa gizli başlayan katmanlar görünür kalsın */
.no-js .viga-reveal { opacity: 1; transform: none; }
.no-js .viga-sayfa  { opacity: 1; }
.no-js .viga-hero-ac { opacity: 1; transform: none; animation: none; }