/**
 * Image Optimization CSS
 * Tüm görsellerin profesyonel ve optimize bir şekilde gösterilmesi için
 */

/* ============================================
   BANNER IMAGES - EXCLUDE FROM ALL OPTIMIZATIONS (HIGHEST PRIORITY)
   ============================================ */
/* Banner görselleri için hiçbir kural uygulanmamalı - banner CSS dosyaları tam kontrol sahibi */
.hero-photo-img,
.banner-image,
.banner-slide img,
.hero-photo img,
.banner-carousel img,
.banner-slide .banner-image,
.hero-banner-container img,
.hero-photo .hero-photo-img {
    /* Bu selector'lar hiçbir şey yapmıyor - sadece diğer kurallardan hariç tutmak için */
}

/* ============================================
   HEADER LOGO - HIGHEST PRIORITY (MUST BE FIRST)
   ============================================ */
header img,
header nav img,
nav img,
.header-logo,
img[src*="/images/logo.png"]:not(.hero-logo-img):not(.hero-logo-overlay img),
img[src*="logo.png"]:not(.hero-logo-img):not(.hero-logo-overlay img),
header a img,
nav a img,
header a img.header-logo,
nav a img.header-logo,
header a img.h-12,
header a img.h-16,
nav a img.h-12,
nav a img.h-16 {
    object-fit: contain !important;
    object-position: left center !important;
    width: auto !important;
    /* Height will be controlled by Tailwind classes (h-12, h-16) */
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    position: static !important;
    display: block !important;
    image-rendering: auto !important;
    -ms-interpolation-mode: auto !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Preserve aspect ratio */
    flex-shrink: 0 !important;
}

/* Global Image Optimization - Exclude header logos, banner logos, and banner images */
img:not(.header-logo):not(header img):not(nav img):not(img[src*="/images/logo.png"]):not(img[src*="logo.png"]):not(header a img):not(nav a img):not(.hero-logo-img):not(.hero-logo-overlay img):not(.banner-logo):not(img[src*="/images/banner/logo.png"]):not(img[src*="banner/logo.png"]):not(.hero-photo-img):not(.banner-image):not(.banner-slide img):not(.hero-photo img) {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: optimize-quality;
    -ms-interpolation-mode: bicubic;
}

/* Cover Image Optimization - Exclude banner images */
.cover-image:not(.hero-photo-img):not(.banner-image):not(.banner-slide img):not(.hero-photo img),
img[alt*="Cover"]:not(.hero-photo-img):not(.banner-image):not(.banner-slide img):not(.hero-photo img),
img[alt*="Kapak"]:not(.hero-photo-img):not(.banner-image):not(.banner-slide img):not(.hero-photo img) {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #f3f4f6;
    background-image: linear-gradient(45deg, #f3f4f6 25%, transparent 25%), 
                      linear-gradient(-45deg, #f3f4f6 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #f3f4f6 75%), 
                      linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    display: block;
}

/* Logo Image Optimization - Exclude header logo, logo preview images - HIGHEST PRIORITY */
.logo-image,
img[alt*="Logo"]:not(.header-logo):not(header img):not(nav img):not(img[src*="/images/logo.png"]):not(img[src*="logo.png"]):not(header a img):not(nav a img):not(.logo-preview-image):not(#logoPreview),
.logo-image.w-20,
.logo-image.h-20,
.logo-image.w-16,
.logo-image.h-16,
.logo-image.w-12,
.logo-image.h-12,
img.logo-image[class*="w-20"],
img.logo-image[class*="h-20"],
img.logo-image[class*="w-16"],
img.logo-image[class*="h-16"],
img.logo-image[class*="w-12"],
img.logo-image[class*="h-12"],
main .logo-image,
main img.logo-image,
.business-detail .logo-image,
[class*="business"] .logo-image,
div .logo-image {
    object-fit: cover !important;
    object-position: center center !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    display: block !important;
    /* Force square aspect ratio to prevent oval shape */
    aspect-ratio: 1 / 1 !important;
    /* Ensure the image fills the square container */
    min-width: 0 !important;
    min-height: 0 !important;
    /* Width and height are controlled by Tailwind classes (w-20, h-20, etc.) */
}

/* Gallery Image Optimization */
.gallery-image,
.gallery-item img,
#galleryContainer img {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #f9fafb;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: block;
}

.gallery-image:hover,
.gallery-item img:hover,
#galleryContainer img:hover {
    transform: scale(1.02);
    opacity: 0.95;
}

/* Ensure gallery items maintain aspect ratio */
#galleryContainer > div {
    position: relative;
    overflow: hidden;
}

#galleryContainer > div > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center center !important;
}

/* For gallery items with aspect-ratio style */
#galleryContainer > div[style*="aspect-ratio"] > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Gallery Modal Image Optimization */
#galleryImage,
.gallery-modal-image {
    object-fit: contain;
    object-position: center center;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    background-color: #000000;
}

/* Business Card Image Optimization */
.business-card-image,
.business-cover-image {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #e5e7eb;
    display: block;
}

/* Featured Business Image Optimization */
.featured-business-image {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #f3f4f6;
    display: block;
}

/* Responsive Image Containers */
.image-container {
    position: relative;
    overflow: hidden;
    background-color: #f9fafb;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Aspect Ratio Preservers */
.aspect-cover {
    object-fit: cover;
    object-position: center center;
}

.aspect-contain {
    object-fit: contain;
    object-position: center center;
}

/* Loading Placeholder - Exclude banner images */
img[loading="lazy"]:not(.header-logo):not(header img):not(nav img):not(img[src*="/images/logo.png"]):not(img[src*="logo.png"]):not(header a img):not(nav a img):not(.hero-photo-img):not(.banner-image):not(.banner-slide img):not(.hero-photo img):not(.hero-logo-img):not(.hero-logo-overlay img) {
    background-color: #f3f4f6;
    background-image: linear-gradient(90deg, #f3f4f6 0px, #e5e7eb 40px, #f3f4f6 80px);
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

/* Image Error Handling */
img:not([src]),
img[src=""],
img[src="undefined"],
img[src="null"] {
    display: none;
}

/* Prevent Image Stretching - Only for images without object-fit */
img:not([class*="gallery"]):not([class*="cover"]):not([class*="logo"]):not([class*="business"]):not([class*="featured"]):not(.header-logo):not(header img):not(nav img):not(img[src*="/images/logo.png"]):not(img[src*="logo.png"]):not(header a img):not(nav a img) {
    max-width: 100%;
    height: auto;
}

/* Grid Gallery Optimization */
.grid-gallery img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center center;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .gallery-image,
    .gallery-item img,
    #galleryContainer img {
        object-fit: cover;
        object-position: center center;
    }
    
    .cover-image,
    img[alt*="Cover"],
    img[alt*="Kapak"] {
        object-fit: cover;
        object-position: center center;
    }
}