*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    vertical-align: middle;
}

.marquee {
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    animation: marquee 25s linear infinite;
}

@keyframes marquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #abadaf;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #F97316;
}

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] summary .expand-icon { transform: rotate(180deg); }

.bg-primary-gradient {
    background: linear-gradient(135deg, #4647d3 0%, #9396ff 100%);
}

.bg-orange-gradient {
    background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
}

/* EPIN & KOD: tam genislik mega menu — panel, li static iken nav.relative icinde konumlanir */
.epin-mega-panel {
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.12);
}

/* Story satiri: avatar-etiket araligi ve serit yuksekligi (slider'a yakin durmasi icin) */
#game-stories-bar a[data-story] {
    gap: 0.375rem;
}

/* Oyun story bar: kenarlarda hafif solma, scrollbar gizli sinifi .no-scrollbar ile */
.game-stories-mask {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}

/* Story etiketi: uzun oyun adlari tasmasin, tum hucreler ayni yukseklik */
.game-story-label {
    display: flex;
    width: 100%;
    max-width: 76px;
    min-height: 0;
    align-items: flex-start;
    justify-content: center;
    padding-left: 2px;
    padding-right: 2px;
    box-sizing: border-box;
}

.game-story-label__text {
    width: 100%;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.topbar-dropdown {
    position: relative;
}

.topbar-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.topbar-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 100%;
    background: #ffffff;
    border: 1px solid rgba(116, 119, 121, 0.25);
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(11, 15, 16, 0.15);
    padding: 6px;
    z-index: 80;
}

.topbar-dropdown-item {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #595c5e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.15s ease;
}

.topbar-dropdown-item:hover {
    background: rgba(249, 115, 22, 0.1);
    color: #e65d00;
}

.bg-surface-container-low {
    --tw-bg-opacity: 1;
    background-color: #fff;
}

/* Tailwind CDN + forms plugin head sonunda stilleri enjekte edebilir; autofill de !important kullanır */
#search-input-desktop {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)) !important;
    border: 1px solid #eff2f3 !important;
}

#search-input-desktop:focus {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)) !important;
    border: 1px solid #eff2f3 !important;
}

#search-input-desktop:-webkit-autofill,
#search-input-desktop:-webkit-autofill:hover,
#search-input-desktop:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgb(248, 250, 252) inset !important;
    box-shadow: 0 0 0 1000px rgb(248, 250, 252) inset !important;
}

/* Üst bar + ana header: sayfa degradeyle uyumlu soft slate */
.tema2-topbar-strip,
.tema2-header-chrome-bg {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

/* Menü altı: tek, kesintisiz hafif degrade (bölüm bantı yok) */
.tema2-page-bg {
    background-color: #f7f8fa;
    background-image:
        radial-gradient(ellipse 120% 70% at 50% -10%, rgba(249, 115, 22, 0.07), transparent 55%),
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #f5f7f9 22%,
            #faf6f2 48%,
            #f6f8fa 72%,
            #f3f5f7 100%
        );
}

/* Premium çerçeve (cerceve): liste + detay — içerik üzerine beyaz fill yok (görsel bozulmasın) */
.premium-cerceve {
    position: relative;
    isolation: isolate;
    box-shadow:
        0 0 0 2px rgba(249, 115, 22, 0.28),
        0 14px 36px -14px rgba(249, 115, 22, 0.45),
        0 0 28px -8px rgba(251, 191, 36, 0.35);
}

.premium-cerceve::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2.5px;
    background: linear-gradient(120deg, #fde68a, #f97316, #fbbf24, #fdba74, #fde68a);
    background-size: 280% 280%;
    animation: premiumCerceveFlow 4.5s ease-in-out infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 4;
}

.premium-cerceve:hover {
    box-shadow:
        0 0 0 2px rgba(249, 115, 22, 0.4),
        0 18px 44px -12px rgba(249, 115, 22, 0.55),
        0 0 36px -6px rgba(251, 191, 36, 0.45);
}

.premium-cerceve-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.55rem;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    box-shadow: 0 8px 18px -6px rgba(249, 115, 22, 0.65);
    pointer-events: none;
}

.premium-cerceve-badge .material-symbols-outlined {
    font-size: 14px !important;
    line-height: 1;
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

@keyframes premiumCerceveFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.premium-cerceve--media {
    border-radius: 1rem;
    overflow: hidden;
}

.premium-cerceve--card {
    border-radius: 1rem;
    overflow: hidden;
}

/* Çok satanlar: JS aria-selected günceller; etiket rengi ve turuncu çizgi buna bağlı (className tamamen değişince de tutarlı) */
#bestseller-tabs .bestseller-tab .bestseller-tab-label {
    color: rgb(148 163 184);
}
#bestseller-tabs .bestseller-tab[aria-selected="true"] .bestseller-tab-label {
    color: rgb(249 115 22);
}
#bestseller-tabs .bestseller-tab .bestseller-tab-indicator {
    opacity: 0;
}
#bestseller-tabs .bestseller-tab[aria-selected="true"] .bestseller-tab-indicator {
    opacity: 1;
}