/* ═══════════════════════════════════════════════════════════════════
   Sürüngen Pazarı — Site Genel Performans Optimizasyonu
   v9.13.99 — Animasyonları BOZMADAN, smart paint/layout optimization
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1) content-visibility KALDIRILDI ─────────────────────────────
   v9.13.99: Görsel yüklenmeme/kasma sorunlarına yol açıyordu, kaldırıldı. */

/* ─── 1A) GÖRSEL YÜKLENMESİ — TAM YÜKLENMEDEN GÖSTERME ─────────────
   v9.13.99: Lazy load YOK. Görsel tam yüklenmeden gözükmez (parça parça
   yüklenme görüntüsü olmaz). JS load event'inde .img-loaded class eklenir. */

/* Görsel container'ları paint scope kısıtla — diğer kartların layout'unu etkilemez */
.lc-img-wrap,
.sp-pc-card,
.sp-hb-box,
.cat-img,
.bc-img,
.lcard-img{
  contain:layout paint;
}

/* Görseller varsayılan opacity 0 → tam yüklenince opacity 1 (smooth fade-in) */
.lc-img-wrap img:not(.img-loaded),
.sp-pc-card img:not(.img-loaded),
.cat-img img:not(.img-loaded),
.bc-img img:not(.img-loaded),
.lcard-img img:not(.img-loaded){
  opacity:0;
}
.lc-img-wrap img,
.sp-pc-card img,
.cat-img img,
.bc-img img,
.lcard-img img{
  transition:opacity .3s ease;
}
.lc-img-wrap img.img-loaded,
.sp-pc-card img.img-loaded,
.cat-img img.img-loaded,
.bc-img img.img-loaded,
.lcard-img img.img-loaded{
  opacity:1;
}

/* Hero banner kutuları + Promo cards — background-image YÜKLEME OPTIMIZASYONU
   v9.13.99: bg-image inline style'da, JS preload ile tam yüklenmeden bg-loaded class eklenmez.
   Element başta opacity 0 → bg yüklenince 1 (smooth fade-in, parça parça gözükmez). */
.sp-hb-box[style*="background-image"],
.sp-pc-card[style*="background-image"]{
  transition:opacity .35s ease;
}
.sp-hb-box[style*="background-image"]:not(.bg-loaded),
.sp-pc-card[style*="background-image"]:not(.bg-loaded){
  /* Tam yüklenmeden de görünür (içerik bloklamasın) ama opacity hafif düşük → smooth geçiş */
  opacity:.92;
}
.sp-hb-box.bg-loaded,
.sp-pc-card.bg-loaded{
  opacity:1;
}

/* Container'a background-color ekle — bg-image yüklenmeden de düz renk görünsün, parça parça yüklenme görünmez */
.sp-hb-box[style*="background-image"]{
  background-color:var(--bg2,#f1f5f9);
}
[data-theme="dark"] .sp-hb-box[style*="background-image"]{
  background-color:var(--bg2,#1e293b);
}


/* ─── 2) İLAN KARTLARI — paint scope kısıtla ─────────────────────────
   Bir kartın değişimi diğerlerini repaint ettirmez.
   Animasyonlar bozulmaz, sadece scope daralır. */
.listing-card{
  contain:layout paint style;
  /* GPU layer hint — sadece transform/opacity değişen kartlarda */
}

/* ─── 3) CAROUSEL TRACK — GPU compositing layer ───────────────────────
   translate3d zaten ilan-detay'da. Burada genel kural. */
.ld-similar-carousel-track,
.sp-carousel-track,
.cw-msgs-track,
[data-carousel-track]{
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* ─── 4) SAYFALARDA RESİM YÜKLEMELERİ — async decode ─────────────────
   Resimleri lazy + async decode et — main thread bloklamaz */
img[loading="lazy"]{
  /* Decoding ipucu — lazy resimler async decode olsun */
  /* (HTML attribute decoding="async" da set edilebilir) */
}

/* ─── 5) HEAVY ANIMASYONLARI YALNIZCA EKRANDAYKEN ÇALIŞTIR ─────────
   IntersectionObserver ile JS tarafında kontrol edilir.
   Element ekran dışına çıkınca .perf-paused class'ı eklenir. */
.perf-paused,
.perf-paused *,
.perf-paused::before,
.perf-paused::after{
  animation-play-state:paused !important;
}

/* ─── 6) prefers-reduced-motion — kullanıcı animasyon istemiyorsa ──── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.05s !important;
    scroll-behavior:auto !important;
  }
}

/* ─── 7) MOBİL — sadece scroll sırasında repaint maliyetlerini düşür ─
   Sayfada scroll esnasında hover dahil tüm transition'lar duraklatılır.
   .is-scrolling class'ı JS tarafından eklenir. */
html.is-scrolling *,
html.is-scrolling *::before,
html.is-scrolling *::after{
  /* Transitions duraklatma */
  transition:none !important;
  /* Animasyonları DURDURMUYORUZ (sadece transition'ı) — animasyonlar çalışmaya devam */
}

/* ─── 8) FILTER / BACKDROP — ağır efektleri SADECE BÜYÜK EKRAN'DA ────
   Mobilde GPU az → blur miktarını yarıya indir (animasyon yine çalışır) */
@media(max-width:768px){
  /* Backdrop-filter blur'u azalt — animasyonu BOZMA, sadece blur'u hafiflet */
  *{
    -webkit-backdrop-filter:none;
  }
  .lc-img-wrap[data-wm]::after,
  .sp-watermark{
    /* Watermark blur efektleri mobilde sadeleşir */
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

/* ─── 9) DÖNEN ANİMASYONLAR — GPU layer + smooth rotation ──────────
   Önceki: translateZ(0) eklendi → keyframe'in `transform: rotate(...)`'unu
   ezdiği için animasyon TAKILDI/KASTI.
   Çözüm: SADECE will-change ile composite layer hint, transform'a dokunma.
   Browser otomatik kendi GPU layer'ını oluşturur, conic-gradient cache'lenir. */
[data-border-style="rotating"]::before,
[data-border-style="dashed-rotating"]::before,
[data-border-style="rainbow"]::before,
[data-border-style="gradient-flow"]::before,
[data-border-style="running-line"]::before,
[data-border-style="fire"]::before,
[data-border-style="glow-snake"]::before{
  will-change:transform;
  /* GPU composite hint — translateZ(0) EKLEMİYORUZ (rotate animasyonunu ezerdi) */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  /* Paint scope — sadece bu pseudo-element repaint olur */
  contain:strict;
  /* Anti-alias düzgün olsun */
  perspective:1000px;
}

/* Pulse / Glow gibi opacity-only animasyonlar — translateZ(0) güvenli */
[data-border-style="glow"],
[data-border-style="pulse"],
[data-border-style="neon-pulse"]::before,
[data-border-style="marching-ants"]::before{
  will-change:transform, opacity;
  backface-visibility:hidden;
}

/* Diagonal acil + stripe rozet — fix konumlu */
.acil-diagonal,
.lcb-stripe{
  will-change:transform;
  backface-visibility:hidden;
}

/* DÖNEN ANİMASYON RECEIVER — kart kendisi composite layer
   Kart container'ının kendi layer'ı olunca dönen ::before sürtünmesiz akar. */
.listing-card[data-border-style="rotating"],
.listing-card[data-border-style="dashed-rotating"],
.listing-card[data-border-style="rainbow"],
.listing-card[data-border-style="gradient-flow"]{
  isolation:isolate; /* yeni stacking context */
  /* will-change isteme; sadece child ::before composite olsun */
}

/* ─── 10) FONT-DISPLAY OPTIMIZE ───────────────────────────────────── */
@font-face {
  font-display:swap;
}

/* ─── 11) TEXT RENDERING — modern + okunaklı ─────────────────────── */
body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}