/* ==========================================================================
   ISKELET (SKELETON) YUKLEME

   ONCEKI DURUM — tam ekran loader
   footer.php'de .loader-mask div'i vardi; style.css onu position:fixed,
   z-index:99999 ve opak arka planla TUM EKRANA yayiyordu. preloader.js ise
   maskeyi $(window).on("load") ile kaldiriyordu -- yani SON gorsel de inene
   kadar, ustune +350ms bekleme ve yavas gecis.

   Sonuc: sunucu HTML'i tam gonderiyor, tarayici sayfayi boyuyor, ama
   kullanici bunu GORMUYOR; maske kalkinca icerik bir anda beliriyor ve
   "sayfa ikinci kez yuklendi" hissi olusuyor. Urun detayinda galeri 2.5 MB
   oldugu icin bu bekleme saniyelerle olculuyordu.

   NEDEN KLASIK ISKELET DEGIL
   Site sunucu tarafinda render ediliyor; metin ve yapi ilk HTML'de hazir
   geliyor. Metnin uzerine gri cubuk koymak tiyatro olurdu -- zaten orada
   olan icerigi ortmek. Gercekten GEC gelen tek sey gorseller.

   BU DOSYANIN YAPTIGI IKI SEY
   1) YER AYIRMA (asil duzeltme). 71 <img> etiketinin yalnizca 1'inde
      width/height vardi, kapsayicilarda da olcu yoktu: gorseller indikce
      duzen zipliyordu (CLS). Maskenin gizledigi sey de buydu. Kutulara
      aspect-ratio verildi, oranlar gercek dosyalardan olculdu:
        urun gorselleri 218 dosyanin 208'i 3:2
        blog gorselleri 188 dosyanin 187'si 1:1
   2) SHIMMER. Yer ayrilmis kutuda, gorsel inene kadar hafif bir parlama.

   ILERLEMELI IYILESTIRME
   .is-loading sinifini YALNIZCA skeleton.js ekler. JS calismazsa iskelet
   hic devreye girmez ve sayfa bugunku gibi (maske olmadan) calisir --
   gorsel gizli kalma riski yok.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) YER AYIRMA  — JS'ten bagimsiz, her zaman gecerli
   -------------------------------------------------------------------------- */

/* Urun kartlari: carousel-product, top-urunler, oneri-urunler, kategori,
   arama-sonuc hepsi .products-con .product-box figure yapisini kullaniyor. */
.products-con .product-box figure {
  aspect-ratio: 3 / 2;
  display: block;
  width: 100%;
}

.products-con .product-box figure > a {
  display: block;
  width: 100%;
  height: 100%;
}

.products-con .product-box figure img {
  width: 100%;
  height: 100%;
  /* contain: bisikletin tamami gorunmeli, kirpilmamali. */
  object-fit: contain;
}

/* Blog kartlarina aspect-ratio VERILMIYOR.

   Tema blog gorseline zaten sabit yukseklik veriyor (blog.css: kirilma
   noktasina gore 240 / 247 / 260px) ve o secici daha guclu. Yani blog
   kartlarinda yer ayirma sorunu YOKTU. Buraya 1:1 kutu konuldugunda kutu
   374px'e cikip gorsel 240px'te kaldi ve her kartta 134px olu bosluk
   olustu -- olculup geri alindi.

   Geriye yalnizca kirpma duzeltmesi kaliyor: gorseller 600x600 kare, kutu
   ise yatay. object-fit yokken tarayici varsayilani "fill", yani gorsel
   EZILIYORDU; cover ile oran korunup kirpiliyor. */
.blog-box .blog-image img {
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   2) ISKELET  — yalnizca skeleton.js .is-loading ekledigi surece
   -------------------------------------------------------------------------- */

.is-loading {
  position: relative;
  overflow: hidden;
  background-color: #eef0f2;
  border-radius: 6px;
}

.is-loading::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: skeletonSweep 1.25s ease-in-out infinite;
}

@keyframes skeletonSweep {
  100% {
    transform: translateX(100%);
  }
}

/* Gorsel inerken gizli; indiginde yumusak beliriyor. Bu kural .is-loading'e
   BAGLI: sinif yoksa (JS yoksa) gorsel her zaman gorunur. */
.is-loading img {
  opacity: 0;
}

img.is-ready {
  opacity: 1;
  transition: opacity 0.25s ease-in;
}

/* Hareket azaltma tercihi: parlama ve gecis kapanir, yer ayirma kalir. */
@media (prefers-reduced-motion: reduce) {
  .is-loading::after {
    animation: none;
  }

  img.is-ready {
    transition: none;
  }
}