/* ══════════════════════════════════════════════════════════════
   SPOTLIGHT BORDER — Orijinal 21st.dev/easemize/spotlight-card
   
   Mimari:
   - JS ile her kart .spotlight-wrap div'ine sarılır
   - Wrap div grid item olur, kartın overflow:hidden'ına dokunulmaz
   - ::before/::after WRAP üzerinde → kart dışına taşabilir
   - background-attachment: fixed + viewport px koordinatları
   - mask: sadece border şeridini gösterir
   - Hover YOK — efekt her zaman aktif, sadece mouse yakınındaysa görünür
══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   WRAPPER — Grid item olarak kartı sarar
═══════════════════════════════════════════════════════════ */
.spotlight-wrap {
    --x: 0;
    --y: 0;
    --xp: 0;
    --yp: 0;
    --base: 356;
    --spread: 0;
    --radius: 24;
    --border: 3;
    --size: 200;
    --outer: 1;
    --backdrop: hsla(0, 0%, 60%, 0);
    --backup-border: var(--backdrop);
    --border-size: calc(var(--border, 2) * 1px);
    --spotlight-size: calc(var(--size, 150) * 1px);
    --hue: calc(var(--base) + (var(--xp, 0) * var(--spread, 0)));
    /* Bayrak kırmızısı #E30A17 */
    --spot-saturation: 90%;
    --spot-lightness: 45%;
    --spot-opacity: 1;
    position: relative;
    border-radius: calc(var(--radius) * 1px);
    touch-action: none;
}

/* Açık tema: efekt kapalı — pseudo elemanları gizle, kartın orijinal border'ını geri ver */
body:not(.dark-theme) .spotlight-wrap::before,
body:not(.dark-theme) .spotlight-wrap::after,
body:not(.dark-theme) .spotlight-glow {
    display: none !important;
}
body:not(.dark-theme) .spotlight-wrap > .product-card.premium-card {
    border: 3px solid rgba(0, 0, 0, 0.10) !important;
}
body:not(.dark-theme) .spotlight-wrap > .product-card.premium-card:hover {
    border-color: rgba(0, 0, 0, 0.20) !important;
}

/* Koyu tema: bayrak kırmızısı spotlight aktif */
body.dark-theme .spotlight-wrap {
    --base: 356;
    --spot-saturation: 90%;
    --spot-lightness: 45%;
    --spot-opacity: 1;
}

/* Koyu tema: kart border'ı kaldır — wrapper çizecek */
body.dark-theme .spotlight-wrap > .product-card.premium-card,
body.dark-theme .spotlight-wrap > .product-card.premium-card:hover {
    border: none !important;
}

/* ═══════════════════════════════════════════════════════════
   ::before + ::after — Orijinalden birebir
   background-attachment: fixed sayesinde gradient
   viewport'a sabitlenir, mask ile sadece border şeridinde görünür
═══════════════════════════════════════════════════════════ */
.spotlight-wrap::before,
.spotlight-wrap::after {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: calc(var(--border-size) * -1);
    border: var(--border-size) solid transparent;
    border-radius: calc(var(--radius) * 1px);
    background-attachment: fixed;
    background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: 2;
    /* MASK — sadece border şeridinde göster */
    mask:
        linear-gradient(transparent, transparent),
        linear-gradient(white, white);
    mask-clip: padding-box, border-box;
    mask-composite: intersect;
    -webkit-mask:
        linear-gradient(transparent, transparent),
        linear-gradient(white, white);
    -webkit-mask-clip: padding-box, border-box;
    -webkit-mask-composite: source-in;
}

/* ═══════════════════════════════════════════════════════════
   ::before — RENKLİ SPOTLIGHT (mouse'u takip eden tek parlak nokta)
═══════════════════════════════════════════════════════════ */
.spotlight-wrap::before {
    background-image: radial-gradient(
        calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
        calc(var(--x, 0) * 1px)
        calc(var(--y, 0) * 1px),
        hsl(var(--hue, 0) var(--spot-saturation) var(--spot-lightness) / var(--spot-opacity)),
        transparent 100%
    );
    filter: brightness(2);
}

/* ═══════════════════════════════════════════════════════════
   ::after — BEYAZ PARLAMA (mouse noktasında küçük beyaz highlight)
═══════════════════════════════════════════════════════════ */
.spotlight-wrap::after {
    background-image: radial-gradient(
        calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
        calc(var(--x, 0) * 1px)
        calc(var(--y, 0) * 1px),
        hsl(0 100% 100% / 1),
        transparent 100%
    );
    z-index: 3;
}

/* ═══════════════════════════════════════════════════════════
   İÇ GLOW DIV — Dış blur efekti (orijinaldeki [data-glow] > [data-glow])
═══════════════════════════════════════════════════════════ */
.spotlight-glow {
    position: absolute;
    inset: 0;
    will-change: filter;
    opacity: var(--outer, 1);
    border-radius: calc(var(--radius) * 1px);
    border-width: calc(var(--border-size) * 20);
    filter: blur(calc(var(--border-size) * 10));
    background: none;
    pointer-events: none;
    z-index: 1;
    border: none;
}

.spotlight-glow::before {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: -10px;
    border: 10px solid transparent;
    border-radius: calc(var(--radius) * 1px);
    background-attachment: fixed;
    background-size: calc(100% + 20px) calc(100% + 20px);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: radial-gradient(
        calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
        calc(var(--x, 0) * 1px)
        calc(var(--y, 0) * 1px),
        hsl(var(--hue, 0) var(--spot-saturation) var(--spot-lightness) / var(--spot-opacity)),
        transparent 100%
    );
    filter: brightness(2);
    mask:
        linear-gradient(transparent, transparent),
        linear-gradient(white, white);
    mask-clip: padding-box, border-box;
    mask-composite: intersect;
    -webkit-mask:
        linear-gradient(transparent, transparent),
        linear-gradient(white, white);
    -webkit-mask-clip: padding-box, border-box;
    -webkit-mask-composite: source-in;
}

/* ═══════════════════════════════════════════════════════════
   MOBİL — efekt kapalı
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .spotlight-wrap::before,
    .spotlight-wrap::after,
    .spotlight-glow {
        display: none !important;
    }
    .spotlight-wrap > .product-card.premium-card,
    .spotlight-wrap > .product-card.premium-card:hover {
        border: 3px solid rgba(255, 255, 255, 0.10) !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .spotlight-wrap::before,
    .spotlight-wrap::after,
    .spotlight-glow {
        display: none !important;
    }
}