/* ============================================================
   PRODUCT CARD — HOVER (2. RESİM) GEÇİŞ EFEKTİ
   Kart üzerine gelindiğinde işaretli "Liste hover görseli"
   ışık yanıp sönme + soft crossfade ile gösterilir.
   ------------------------------------------------------------
   Mantık: ana resim sabit, ikinci resim üstüne absolute oturur.
   Default state: opacity 0, blur(2px), scale(1.04)
   Hover state:   opacity 1, blur(0),    scale(1.00) + flash
   ============================================================ */

.card-media-full .product-img-hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    display: block;
    pointer-events: none;
    opacity: 0;
    transform: scale(1.04);
    filter: blur(2px) brightness(1);
    transition:
        opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
        filter 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 2;
    will-change: opacity, transform, filter;
}

/* Resim henüz yüklenmemişse hiç görünmesin (CLS / flicker engellemek için) */
.card-media-full .product-img-hover:not(.is-ready) {
    visibility: hidden;
}

/* Hover görseli üzerine yumuşak ışık halesi — vinyet etkisini iptal eder gibi */
.card-media-full.has-hover-img::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.18) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.4s ease;
    mix-blend-mode: screen;
}

/* ─────────── HOVER (DESKTOP) ─────────── */
@media (hover: hover) and (pointer: fine) {
    .product-card.premium-card:hover .product-img-hover.is-ready {
        opacity: 1;
        transform: scale(1.0);
        filter: blur(0) brightness(1.04);
        animation: pcHoverFlash 1.1s ease-out 1 forwards;
    }

    .product-card.premium-card:hover .card-media-full.has-hover-img::before {
        opacity: 1;
        animation: pcHoverGlow 1.4s ease-out 1 forwards;
    }

    /* Hover esnasında ana resim sönsün — geçiş daha doğal */
    .product-card.premium-card:hover .card-media-full.has-hover-img .product-img.lazy-loaded {
        opacity: 0;
        transition: opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
}

/* ─────────── ANİMASYONLAR (IŞIK YANIP SÖNME) ─────────── */

/* Hover resmi açılırken kısa parlama — bir defa */
@keyframes pcHoverFlash {
    0%   { filter: blur(2px) brightness(1.0);  }
    18%  { filter: blur(0)   brightness(1.55); }
    36%  { filter: blur(0)   brightness(0.92); }
    58%  { filter: blur(0)   brightness(1.22); }
    78%  { filter: blur(0)   brightness(0.98); }
    100% { filter: blur(0)   brightness(1.04); }
}

/* Hafif radial glow nabız atışı */
@keyframes pcHoverGlow {
    0%   { opacity: 0;    transform: scale(0.96); }
    25%  { opacity: 0.95; transform: scale(1.0);  }
    55%  { opacity: 0.35; transform: scale(1.04); }
    100% { opacity: 0.55; transform: scale(1.02); }
}

/* ─────────── DARK THEME ─────────── */
body.dark-theme .card-media-full.has-hover-img::before {
    background: radial-gradient(circle at 50% 45%, rgba(167, 243, 208, 0.22) 0%, transparent 55%);
}

/* ─────────── HAREKET DUYARLILIĞI ─────────── */
@media (prefers-reduced-motion: reduce) {
    .card-media-full .product-img-hover {
        transition: opacity 0.25s linear;
        transform: none;
        filter: none;
    }
    @media (hover: hover) and (pointer: fine) {
        .product-card.premium-card:hover .product-img-hover.is-ready {
            animation: none;
            transform: none;
            filter: none;
        }
        .product-card.premium-card:hover .card-media-full.has-hover-img::before {
            animation: none;
        }
    }
}

/* ─────────── DOKUNMATİK CİHAZLAR ───────────
   Hover yok → ikinci resmi göstermeyelim. Görsel tutarlılık için
   product-img-hover gizli kalır. */
@media (hover: none) {
    .card-media-full .product-img-hover { display: none; }
    .card-media-full.has-hover-img::before { display: none; }
}