/**
 * LazySizes CSS Stilleri
 * Lazy loading için optimize edilmiş görsel efektler
 */

/* Lazy loading fade-in effect */
.lazyload,
.lazyloading {
  opacity: 0;
  transition: opacity 400ms ease-in-out;
}

.lazyloaded {
  opacity: 1;
}

/* Loading spinner for images */
.lazyloading {
  background: #f7f7f7
    url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIHN0cm9rZT0iI2UyZThmMCIgc3Ryb2tlLXdpZHRoPSI0Ii8+CjxwYXRoIGQ9Im0zOCAyMGEgMTggMTggMCAwIDEtMzYgMCIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgYXR0cmlidXRlVHlwZT0iWE1MIiB0eXBlPSJyb3RhdGUiIGZyb209IjAgMjAgMjAiIHRvPSIzNjAgMjAgMjAiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CjwvcGF0aD4KPC9zdmc+")
    no-repeat center;
  background-size: 32px 32px;
}

/* Hide broken image icons */
img.lazyload:not([src]) {
  visibility: hidden;
}

/* Blur up effect for LQIP (Low Quality Image Placeholder) */
.lazyload.blur-up {
  filter: blur(5px);
  transition: filter 400ms, opacity 400ms;
}

.lazyloaded.blur-up {
  filter: blur(0);
}

/* Scale effect for reveal animations */
.lazyload.scale-up {
  transform: scale(0.8);
  transition: transform 400ms ease-out, opacity 400ms ease-out;
}

.lazyloaded.scale-up {
  transform: scale(1);
}

/* Fade box container for overlapping images */
.fade-box .lazyload,
.fade-box .lazyloading {
  opacity: 0;
  transition: opacity 400ms;
}

.fade-box img.lazyloaded {
  opacity: 1;
}

/* Responsive image containers */
.lazy-container {
  position: relative;
  overflow: hidden;
}

.lazy-container img {
  display: block;
  width: 100%;
  height: auto;
}

/* Aspect ratio containers */
.lazy-aspect-16-9 {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.lazy-aspect-4-3 {
  position: relative;
  padding-bottom: 75%; /* 4:3 */
  height: 0;
}

.lazy-aspect-1-1 {
  position: relative;
  padding-bottom: 100%; /* 1:1 */
  height: 0;
}

.lazy-aspect-16-9 img,
.lazy-aspect-4-3 img,
.lazy-aspect-1-1 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Loading states for different image types */
.lazyloading.gallery-image {
  background-color: #f3f4f6;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIHN0cm9rZT0iI2UyZThmMCIgc3Ryb2tlLXdpZHRoPSI0Ii8+CjxwYXRoIGQ9Im0zOCAyMGEgMTggMTggMCAwIDEtMzYgMCIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgYXR0cmlidXRlVHlwZT0iWE1MIiB0eXBlPSJyb3RhdGUiIGZyb209IjAgMjAgMjAiIHRvPSIzNjAgMjAgMjAiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CjwvcGF0aD4KPC9zdmc+");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
}

.lazyloading.product-image {
  background-color: #f9fafb;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgMTZMMTAuNTg2IDkuNDE0QTIgMiAwIDAxMTMuNDE0IDkuNDE0TDE2IDEyTTYgMjBIMTJBMiAyIDAgMDAxNC0yVjZBMiAyIDAgMDAxMi00SDZBMiAyIDAgMDA0IDZWMTJBMiAyIDAgMDA2IDIwWk0xNiAxNkg4VjE0SDE2VjE2WiIgc3Ryb2tlPSIjOWNhM2FmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.lazyloading.bank-logo {
  background-color: #f8fafc;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDJMMTcgNlYxOEgzVjZMMTAgMloiIHN0cm9rZT0iI2FkYjViZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

/* Error state */
.lazyerror {
  background-color: #fef2f2;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDlWMTNNMTIgMTdIMTIuMDFNMjEgMTJBOSA5IDAgMTEzIDEyQTkgOSAwIDAxMjEgMTJaIiBzdHJva2U9IiNkYzI2MjYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  opacity: 0.7;
}

/* Preload class for priority images */
.lazypreload {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

/* Performance optimizations */
.lazyload img {
  will-change: opacity;
}

.lazyloading img {
  will-change: opacity;
}

.lazyloaded img {
  will-change: auto;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .lazyload,
  .lazyloading,
  .lazyloaded {
    transition: none !important;
  }

  .lazyload.blur-up,
  .lazyloaded.blur-up {
    transition: none !important;
  }

  .lazyload.scale-up,
  .lazyloaded.scale-up {
    transition: none !important;
  }
}