/* ============================================================
   OyuncuStore Kategori Vitrini
   Head icinde yuklenir — ilk boyamada stil hazirdir (FOUC yok).
   ============================================================ */

.ocsw-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 5;
    clear: both;
    margin-bottom: var(--ocsw-bottom-space, 36px);
}
.ocsw-wrap *,
.ocsw-wrap *::before,
.ocsw-wrap *::after {
    box-sizing: border-box;
}

.ocsw-grid {
    display: grid;
    grid-template-columns: repeat(var(--ocsw-cols, 8), minmax(0, 1fr));
    gap: var(--ocsw-gap, 14px);
}

/* ---------------- KART ---------------- */
.ocsw-card {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--ocsw-radius, 14px);
    aspect-ratio: var(--ocsw-aspect, 3 / 4);
    background: #14141c;
    text-decoration: none;
    outline: none;
    transform: translateZ(0);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
    transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
    -webkit-tap-highlight-color: transparent;
}
.ocsw-card:focus-visible {
    outline: 2px solid var(--ocsw-card-accent, var(--ocsw-accent, #7c5cff));
    outline-offset: 2px;
}

.ocsw-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transform: scale(1.03);
    transition: transform .4s cubic-bezier(.2, .7, .3, 1), filter .3s ease;
    display: block;
}
.ocsw-bg-empty {
    background: linear-gradient(160deg, #1b1b26 0%, #101018 100%);
}

/* Karartma katmani */
.ocsw-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .62) 82%, rgba(0, 0, 0, .78) 100%);
    opacity: .92;
    transition: opacity .25s ease;
    pointer-events: none;
}

/* Cerceve katmani (mod bazli sekillenir) */
.ocsw-frame {
    position: absolute;
    inset: 0;
    z-index: 6;
    border-radius: inherit;
    pointer-events: none;
    transition: opacity .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Parlama süpürmesi */
.ocsw-shine {
    --ocsw-shine-travel: 740%;
    position: absolute;
    top: -24%;
    bottom: -24%;
    left: -75%;
    width: 24%;
    z-index: 5;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .02) 27%,
        rgba(var(--ocsw-card-accent-rgb, var(--ocsw-accent-rgb, 124, 92, 255)), .18) 40%,
        rgba(255, 255, 255, .72) 47%,
        rgba(255, 255, 255, .98) 50%,
        rgba(255, 255, 255, .72) 53%,
        rgba(var(--ocsw-card-accent-rgb, var(--ocsw-accent-rgb, 124, 92, 255)), .18) 60%,
        rgba(255, 255, 255, .02) 73%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg) translateX(0);
    opacity: 0;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, .45))
            drop-shadow(0 0 10px rgba(var(--ocsw-card-accent-rgb, var(--ocsw-accent-rgb, 124, 92, 255)), .24));
    mix-blend-mode: screen;
    backface-visibility: hidden;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Hover PNG karakter */
.ocsw-png {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: min(70%, 240px);
    height: auto;
    object-fit: contain;
    opacity: 0;
    transform: translate(-50%, -50%) translateY(20px) scale(.9);
    transition: opacity .28s ease, transform .32s cubic-bezier(.2, .7, .3, 1);
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55));
    pointer-events: none;
}

/* Urun sayisi rozeti */
.ocsw-count {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 7;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
    background: rgba(10, 10, 16, .72);
    border: 1px solid rgba(var(--ocsw-card-accent-rgb, var(--ocsw-accent-rgb, 124, 92, 255)), .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    line-height: 1.4;
    pointer-events: none;
}

/* ---------------- FOOTER (logo / isim) ---------------- */
.ocsw-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 26px 10px 12px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .58) 46%, rgba(0, 0, 0, .78) 100%);
    pointer-events: none;
}
.ocsw-logo {
    width: min(74%, 190px);
    max-height: 50px;
    height: auto;
    object-fit: contain;
    opacity: .92;
    transform: translateY(5px) scale(.98);
    transition: opacity .25s ease, transform .25s cubic-bezier(.2, .7, .3, 1);
    display: block;
}
.ocsw-name {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    text-align: center;
    line-height: 1.3;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
    max-width: 94%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ============================================================
   MODLAR
   ============================================================ */

/* CERCEVESIZ: tek yuvarlak maske kartta kalir; alt karartma koselerde bosluk birakmaz. */
.ocsw-mode-none .ocsw-card {
    background: #050507;
    box-shadow: none;
}
.ocsw-mode-none .ocsw-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34%;
    z-index: 3;
    background: linear-gradient(180deg,
        rgba(5, 5, 7, 0) 0%,
        rgba(5, 5, 7, .76) 48%,
        #050507 100%);
    pointer-events: none;
}
.ocsw-mode-none .ocsw-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 48%,
        rgba(0, 0, 0, .2) 64%,
        rgba(3, 3, 5, .78) 86%,
        #050507 100%);
    pointer-events: none;
}
.ocsw-mode-none .ocsw-frame {
    display: none !important;
}
.ocsw-mode-none .ocsw-bg,
.ocsw-mode-none .ocsw-overlay {
    border-radius: 0;
}
.ocsw-mode-none .ocsw-footer {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(3, 3, 5, .66) 48%, #050507 100%);
}
.ocsw-mode-none .ocsw-bg-empty,
.ocsw-mode-none .ocsw-overlay,
.ocsw-mode-none .ocsw-footer {
    -webkit-mask-image: none;
    mask-image: none;
}

/* MINIMAL: sade ince cerceve */
.ocsw-mode-minimal .ocsw-frame {
    border: var(--ocsw-frame-width, 1px) solid rgba(255, 255, 255, .12);
}

/* NEON: accent renkli cerceve + isima */
.ocsw-mode-neon .ocsw-frame {
    border: var(--ocsw-frame-width, 1px) solid rgba(var(--ocsw-card-accent-rgb, var(--ocsw-accent-rgb, 124, 92, 255)), .68);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03),
                inset 0 -18px 32px -22px rgba(var(--ocsw-card-accent-rgb, var(--ocsw-accent-rgb, 124, 92, 255)), .5);
}

/* GLASS: cam efektli cerceve + ust yansima */
.ocsw-mode-glass .ocsw-frame {
    border: var(--ocsw-frame-width, 1px) solid rgba(255, 255, 255, .2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
                inset 0 12px 26px -18px rgba(255, 255, 255, .28);
}
.ocsw-mode-glass .ocsw-footer {
    background: linear-gradient(180deg, rgba(12, 12, 20, 0) 0%, rgba(12, 12, 20, .55) 45%, rgba(12, 12, 20, .74) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* RGB: animasyonlu gradyan cerceve (gamer RGB) */
.ocsw-mode-rgb .ocsw-frame {
    padding: var(--ocsw-frame-width, 1px);
    background: linear-gradient(120deg,
        var(--ocsw-card-accent, var(--ocsw-accent, #7c5cff)) 0%,
        var(--ocsw-accent-alt, #00d4ff) 34%,
        #ff3d81 68%,
        var(--ocsw-card-accent, var(--ocsw-accent, #7c5cff)) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: .85;
    animation: ocsw-rgb-cycle 6s linear infinite;
}
@keyframes ocsw-rgb-cycle {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes ocsw-auto-shine-first {
    0% {
        opacity: 0;
        transform: skewX(-18deg) translateX(0);
    }
    1.5% {
        opacity: 1;
    }
    25.1% {
        opacity: 1;
        transform: skewX(-18deg) translateX(var(--ocsw-shine-travel));
    }
    25.2%, 100% {
        opacity: 0;
        transform: skewX(-18deg) translateX(var(--ocsw-shine-travel));
    }
}

@keyframes ocsw-auto-shine-middle {
    0% {
        opacity: 1;
        transform: skewX(-18deg) translateX(0);
    }
    25.1% {
        opacity: 1;
        transform: skewX(-18deg) translateX(var(--ocsw-shine-travel));
    }
    25.2%, 100% {
        opacity: 0;
        transform: skewX(-18deg) translateX(var(--ocsw-shine-travel));
    }
}

@keyframes ocsw-auto-shine-last {
    0% {
        opacity: 1;
        transform: skewX(-18deg) translateX(0);
    }
    23.6% {
        opacity: 1;
    }
    25.1%, 100% {
        opacity: 0;
        transform: skewX(-18deg) translateX(var(--ocsw-shine-travel));
    }
}

@keyframes ocsw-hover-shine {
    0% {
        opacity: 0;
        transform: skewX(-18deg) translateX(0);
    }
    14% {
        opacity: 1;
    }
    86% {
        opacity: 1;
        transform: skewX(-18deg) translateX(var(--ocsw-shine-travel));
    }
    100% {
        opacity: 0;
        transform: skewX(-18deg) translateX(var(--ocsw-shine-travel));
    }
}

/* ============================================================
   HOVER (yalnizca hover destekleyen cihazlar)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {

    .ocsw-has-shine.ocsw-auto-shine:not(:hover) .ocsw-shine {
        animation: ocsw-auto-shine-middle var(--ocsw-shine-duration, 6000ms) linear infinite;
    }
    .ocsw-has-shine.ocsw-auto-shine:not(:hover) .ocsw-card:nth-child(8n + 1) .ocsw-shine { animation-name: ocsw-auto-shine-first; }
    .ocsw-has-shine.ocsw-auto-shine:not(:hover) .ocsw-card:nth-child(8n) .ocsw-shine { animation-name: ocsw-auto-shine-last; }
    .ocsw-has-shine.ocsw-auto-shine:not(:hover) .ocsw-card:nth-child(8n + 2) .ocsw-shine { animation-delay: var(--ocsw-shine-delay-2, 1500ms); }
    .ocsw-has-shine.ocsw-auto-shine:not(:hover) .ocsw-card:nth-child(8n + 3) .ocsw-shine { animation-delay: var(--ocsw-shine-delay-3, 3000ms); }
    .ocsw-has-shine.ocsw-auto-shine:not(:hover) .ocsw-card:nth-child(8n + 4) .ocsw-shine { animation-delay: var(--ocsw-shine-delay-4, 4500ms); }
    .ocsw-has-shine.ocsw-auto-shine:not(:hover) .ocsw-card:nth-child(8n + 5) .ocsw-shine { animation-delay: var(--ocsw-shine-delay-5, 6000ms); }
    .ocsw-has-shine.ocsw-auto-shine:not(:hover) .ocsw-card:nth-child(8n + 6) .ocsw-shine { animation-delay: var(--ocsw-shine-delay-6, 7500ms); }
    .ocsw-has-shine.ocsw-auto-shine:not(:hover) .ocsw-card:nth-child(8n + 7) .ocsw-shine { animation-delay: var(--ocsw-shine-delay-7, 9000ms); }
    .ocsw-has-shine.ocsw-auto-shine:not(:hover) .ocsw-card:nth-child(8n) .ocsw-shine { animation-delay: var(--ocsw-shine-delay-8, 10500ms); }

    .ocsw-has-shine:hover .ocsw-shine {
        animation: none;
        opacity: 0;
        transform: skewX(-18deg) translateX(0);
        transition: none;
    }

    .ocsw-card:hover {
        transform: translateY(calc(-1 * var(--ocsw-lift, 8px)));
        box-shadow: 0 18px 44px rgba(0, 0, 0, .62),
                    0 0 calc(34px * var(--ocsw-glow, .55)) rgba(var(--ocsw-card-accent-rgb, var(--ocsw-accent-rgb, 124, 92, 255)), calc(.55 * var(--ocsw-glow, .55)));
    }
    .ocsw-mode-none .ocsw-card:hover {
        transform: translateZ(0);
        box-shadow: none;
    }
    .ocsw-card:hover .ocsw-bg {
        transform: scale(1.08);
    }
    .ocsw-has-png .ocsw-card:hover .ocsw-bg {
        filter: brightness(.62) saturate(1.05);
    }
    .ocsw-card:hover .ocsw-overlay {
        opacity: 1;
    }
    .ocsw-card:hover .ocsw-png {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(-16px) scale(1);
    }
    .ocsw-card:hover .ocsw-logo {
        opacity: 1;
        transform: translateY(0) scale(1.04);
    }
    .ocsw-has-shine .ocsw-card:hover .ocsw-shine {
        animation: ocsw-hover-shine .75s cubic-bezier(.2, .7, .3, 1) 1;
        opacity: 0;
        transform: skewX(-18deg) translateX(var(--ocsw-shine-travel));
        transition: none;
    }

    .ocsw-mode-neon .ocsw-card:hover .ocsw-frame {
        border-color: rgba(var(--ocsw-card-accent-rgb, var(--ocsw-accent-rgb, 124, 92, 255)), .85);
        box-shadow: inset 0 0 0 1px rgba(var(--ocsw-card-accent-rgb, var(--ocsw-accent-rgb, 124, 92, 255)), .35),
                    inset 0 -22px 40px -20px rgba(var(--ocsw-card-accent-rgb, var(--ocsw-accent-rgb, 124, 92, 255)), .7);
    }
    .ocsw-mode-glass .ocsw-card:hover .ocsw-frame {
        border-color: rgba(255, 255, 255, .34);
    }
    .ocsw-mode-rgb .ocsw-card:hover .ocsw-frame {
        opacity: 1;
    }
}

/* ============================================================
   TABLET (769px – 1200px)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1200px) {
    .ocsw-grid {
        grid-template-columns: repeat(var(--ocsw-cols-md, 4), minmax(0, 1fr));
    }
}

/* ============================================================
   MOBIL (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
    .ocsw-grid {
        grid-template-columns: repeat(var(--ocsw-cols-sm, 4), minmax(0, 1fr));
        gap: 7px;
        padding: 0 2px;
    }
    .ocsw-card {
        border-radius: 10px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
    }
    .ocsw-overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, .58) 100%);
    }
    .ocsw-png,
    .ocsw-shine,
    .ocsw-count {
        display: none;
    }
    .ocsw-footer {
        padding: 14px 5px 7px;
        gap: 2px;
    }
    .ocsw-logo {
        width: 88%;
        max-height: 24px;
        opacity: 1;
        transform: none;
        filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
    }
    .ocsw-name {
        font-size: 9.5px;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
    /* Mobil cerceve tercihe bagli */
    .ocsw-wrap:not(.ocsw-mobile-frame) .ocsw-frame {
        display: none;
    }
    .ocsw-mobile-frame.ocsw-mode-rgb .ocsw-frame {
        padding: min(var(--ocsw-frame-width, 1px), 2px);
        animation-duration: 8s;
    }
    .ocsw-mobile-frame.ocsw-mode-minimal .ocsw-frame,
    .ocsw-mobile-frame.ocsw-mode-neon .ocsw-frame,
    .ocsw-mobile-frame.ocsw-mode-glass .ocsw-frame {
        border-width: min(var(--ocsw-frame-width, 1px), 2px);
    }
}

/* ============================================================
   ERISILEBILIRLIK: hareket azaltma tercihi
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .ocsw-card,
    .ocsw-bg,
    .ocsw-png,
    .ocsw-logo,
    .ocsw-frame,
    .ocsw-overlay {
        transition: none !important;
    }
    .ocsw-shine {
        display: none !important;
    }
    .ocsw-mode-rgb .ocsw-frame {
        animation: none !important;
    }
}