/**
 * TEK GÖRSEL SİSTEMİ — layout: sabit kutu + absolute fill + küçük resim URL (resim.php?size=)
 */

img.layout-fill-img,
img.slider-img,
img.product-img,
.category-story-item .story-image img,
.kapak-flex-item > img,
.k-banner-img-wrap > img,
#pfs-slider .pfs-img {
    max-width: none !important;
}

img.layout-fill-img,
img.slider-img,
img.product-img,
.category-story-item .story-image img,
.kapak-flex-item > img,
.k-banner-img-wrap > img,
#pfs-slider .pfs-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    object-position: center;
    transition: none !important;
    animation: none !important;
}

img.layout-fill-img.img-fill--contain,
.category-story-item .story-image img {
    object-fit: contain !important;
    padding: 6px;
    box-sizing: border-box;
}

img.layout-fill-img.img-fill--cover,
img.product-img,
.kapak-flex-item > img,
.k-banner-img-wrap > img {
    object-fit: cover !important;
}

img.slider-img {
    object-fit: contain !important;
}

/* —— Hero slider (CSS scroll-snap, Swiper yok) —— */
.hero-slider.main-slider {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
}

.hero-slider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: 62vh;
    min-height: 520px;
    max-height: 780px;
}

.hero-slider-track::-webkit-scrollbar {
    display: none;
}

.hero-slide {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100%;
    position: relative;
}

.hero-slider .slider-item {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.hero-slider-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 8px;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
}

.hero-dot.active {
    background: #fff;
    transform: scale(1.15);
}

/* —— Kategori / marka —— */
.category-story-ring {
    position: relative;
    flex-shrink: 0;
    width: clamp(58px, 4.8vw, 84px);
    height: clamp(50px, 4.2vw, 72px);
}

.category-story-item .story-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
}

.category-story-item:hover .story-image img {
    transform: none !important;
}

/* —— Ürün kartı —— */
.product-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f9fafb;
}

.product-image-wrap .pc-image-link {
    position: absolute;
    inset: 0;
}

.product-img-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* —— Kapak / banner —— */
.kapak-flex-item,
.k-banner-img-wrap {
    position: relative;
    overflow: hidden;
}

.k-banner-img-wrap {
    width: 100%;
    height: 100%;
}

/* —— PFS —— */
#pfs-slider .pfs-image-wrap {
    position: relative;
    aspect-ratio: 1;
    padding: 10px;
    background: #fff;
    overflow: hidden;
}

#pfs-slider .pfs-img {
    inset: 10px;
    width: calc(100% - 20px) !important;
    height: calc(100% - 20px) !important;
    object-fit: contain !important;
}

/* Logo — muaf */
.logo img,
.logo-center img,
.header img[alt="Logo"],
.mobile-menu-logo img {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    inset: auto !important;
    object-fit: contain !important;
}

/* Nav submenu image — fill */
.nav-submenu-image {
    position: relative;
    overflow: hidden;
}
.nav-submenu-image img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    transition: transform 0.5s !important;
}

.logo-center img,
.logo img {
    max-height: 45px !important;
}

@media (max-width: 767px) {
    .hero-slider-track {
        height: 220px;
        min-height: 220px;
        max-height: 220px;
    }

    .category-story-ring {
        width: 72px;
        height: 58px;
    }

    .logo-center img {
        max-height: 35px !important;
    }
}