/* Inter, resources/views/layouts/partials/material-symbols-font.blade.php içinde
   <link> ile — Material Symbols ile aynı istekte — yükleniyor. Burada @import
   kullanılmıyor: @import, style.css inip parse edilene kadar keşfedilmediği için
   seri bir indirme zinciri yaratır. */

/* NOT: 'DrukCond' @font-face tanımı kaldırıldı — public/assets/fonts/DrukCond.otf
   dosyası projede yok ve istek 404 dönüyordu. Marka fontu eklendiğinde tanım
   docs-pages.css içine (kullanıldığı yere) geri konmalıdır. */

:root {
    /* Site tamamen dark tema. (Eski themes.css'ten taşındı; o dosyadaki 17
       --t-* değişkeni hiçbir yerde kullanılmadığı için dosya kaldırıldı.) */
    color-scheme: dark;

    --main--color:87, 176, 255;
    --main-second--color: 62, 54, 77;
    --Raisin--Black: #262730;
    --Raisin--Black--Dark: #1E212B;
    --Gunmetal: #30343F;

    --c-primary: #57b0ff;
    --c-primary-hover: #3d9cf0;
    --c-primary-active: #2b8ae0;
    --c-success: #34d399;
    --c-success-hover: #2abf89;
    --c-danger: #f87171;
    --c-danger-hover: #ef4444;
    --c-warning: #fbbf24;
    --c-warning-hover: #f59e0b;
    --c-gold: #ffd166;
    --c-gold-hover: #f0c050;
    --c-surface: #1a1e26;
    --c-surface-hover: #22272f;
    --c-border: rgba(255,255,255,.1);
    --c-border-hover: rgba(255,255,255,.18);
    /* Koyu tema üzerinde saydam beyaz overlay rampası (kart zemini / ayraç / ince çerçeve).
       Değerler birebir eski literallerle aynı; sadece tek kaynağa bağlandı. */
    --ov-02: rgba(255,255,255,.02);
    --ov-03: rgba(255,255,255,.03);
    --ov-04: rgba(255,255,255,.04);
    --ov-05: rgba(255,255,255,.05);
    --ov-06: rgba(255,255,255,.06);
    --ov-07: rgba(255,255,255,.07);
    --ov-08: rgba(255,255,255,.08);
    --ov-12: rgba(255,255,255,.12);
    --c-text: #fff;
    --c-text-muted: #8ba3c7;
    --c-text-subtle: #5a6b82;
    --r-sm: 5px;
    --r-md: 12px;
    --r-lg: 9px;
    --tr: 160ms ease;
    --tr-btn: 160ms ease;
}

/* ── Material Symbols base ── */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  vertical-align: -4px;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' -25,
  'opsz' 24;

}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' -25, 'opsz' 24;
}

/* ── Simple Icons (brand / social) ── */
.si {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.si-discord   { -webkit-mask-image: url('../images/brand/discord.svg');   mask-image: url('../images/brand/discord.svg'); }
.si-facebook  { -webkit-mask-image: url('../images/brand/facebook.svg');  mask-image: url('../images/brand/facebook.svg'); }
.si-instagram { -webkit-mask-image: url('../images/brand/instagram.svg'); mask-image: url('../images/brand/instagram.svg'); }
.si-tiktok    { -webkit-mask-image: url('../images/brand/tiktok.svg');    mask-image: url('../images/brand/tiktok.svg'); }
.si-youtube   { -webkit-mask-image: url('../images/brand/youtube.svg');   mask-image: url('../images/brand/youtube.svg'); }
.si-x         { -webkit-mask-image: url('../images/brand/x.svg');         mask-image: url('../images/brand/x.svg'); }
.si-twitch    { -webkit-mask-image: url('../images/brand/twitch.svg');    mask-image: url('../images/brand/twitch.svg'); }
.si-kick      { -webkit-mask-image: url('../images/brand/kick.svg');      mask-image: url('../images/brand/kick.svg'); }
.si-steam     { -webkit-mask-image: url('../images/brand/steam.svg');     mask-image: url('../images/brand/steam.svg'); }

body {

    background: #171b21;
    background: #0e1014;
    background: #0d0f16;
    color: #cbcbcb;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    position: relative;
    -webkit-font-smoothing: antialiased;
     font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.line_shine::before {
	content: "";
	background: linear-gradient(to right,transparent,#2b2f39, transparent);
	width: 100%;
	height: 1px;
	top: -12px;
	z-index: 1;
	display: block;
    position: relative;
}
.line_shine::after {
	content: "";
	background: linear-gradient(to right,transparent,#2b2f39, transparent);
	width: 100%;
	height: 1px;
	bottom: -12px;
	z-index: 1;
	display: block;
    position: relative;
}
::-moz-selection {
    background-color: #333;
    color: #fff;
}

::selection {
    background-color: #333;
    color: #fff;
}
.p-off{
    padding: 0 !important;
}
p {
    margin-bottom: 1.5rem;
}

ul, ol {
    margin: 0 0 2.25rem;
    padding: 0;
    list-style: none;
}

b, strong {
    font-weight: 700;
}

em, i {
    font-style: italic;
}

hr {
    margin: 4rem 0;
    background-color: #e2e2e2;
    border: 0;
    height: 1px;
}

sub, sup {
    position: relative;
    font-size: 70%;
    line-height: 0;
    vertical-align: baseline;
}

sup {
    top: -.5em;
}

sub {
    bottom: -.25em;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}
h2.main-title {
	color: #fff;
	font-size: clamp(1.85rem, 1.2rem + 0.6vw, 3rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin-bottom: 1.35rem;
	text-transform: uppercase;
}

h2.main-title span {
	background: rgb(var(--main--color));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

@media (max-width: 767.98px) {
    h2.main-title {
        font-size: clamp(1.45rem, 1.05rem + 2.2vw, 2.1rem);
        line-height: 1.12;
        margin-bottom: 1.1rem;
    }
}

/* ── Section Alternating Backgrounds ─────────────────────────── */
.popular_game_sect {
    background: #10131a;
}
.ko-items-section {
    background: #0b0e15;
}
.account-section {
    background: #0b0e15;
}
.last-listings-section {
    background: #10131a;
}
.broadcasters-section {
    background: #0b0e15;
}

.container{
    max-width: 1600px;
}
.section-shell {
    background: transparent;

}

/* ===== SITE HEADER MAIN ===== */
.site-header__topbar {
	/* Zemin kaldirildi; altindaki sayfa/slider gorunur kalsin. */
	border-bottom: 1px solid var(--ov-05);
}
.header-top.site-header {
    position: relative;
    z-index: 1024;
    /* Zemin kaldirildi. backdrop-filter duruyor: arkasindaki icerik
       bulaniklasir ama header kendi rengini basmaz. */
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    border-bottom: 1px solid var(--ov-07);
    transition: transform .24s ease, opacity .24s ease;
}


body.floating-header-visible .header-top.site-header {
    transform: translateY(-115%);
    opacity: 0;
    pointer-events: none;
}

.floating-header {
    position: fixed;
    top: 16px;
    left: 18px;
    right: 18px;
    z-index: 1040;
    display: flex;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-130%);
    transition: transform .28s ease, opacity .22s ease;
}

.floating-header.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

body.cart-drawer-open .floating-header {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-130%);
}

.floating-header__inner {
    position: relative;
    width: min(1600px, calc(100vw - 36px));
    min-height: 74px;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 12px 22px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    background: rgba(10,14,22,.78);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    box-shadow: 0 18px 50px rgba(0,0,0,.34), inset 0 1px 0 var(--ov-04);
}

.floating-header [hidden] {
    display: none !important;
}

.floating-header__brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.floating-header__brand img {
    height: 38px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
}

.floating-header__brand picture {
    display: flex;
    align-items: center;
    min-width: 0;
}

.floating-header__nav {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex: 1 1 auto;
    min-width: 0;
}

.floating-header__nav-link {
    color: rgba(222,232,247,.74);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: color .18s ease;
}

.floating-header__nav-link:hover,
.floating-header__nav-link.is-active {
    color: #4da6ff;
}

.floating-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

.floating-header__icon-btn,
.floating-header__avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #c7d4e8;
    padding: 0;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.floating-header__icon-btn:hover,
.floating-header__avatar:hover {
    background: var(--ov-06);
    color: #fff;
}

.floating-header__icon-btn .material-symbols-outlined {
	font-size: 26px;
	font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' -25, 'opsz' 24;
}

.floating-header__cart .cart-count {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ff4f67;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.floating-header__notif .notif-badge {
    top: 3px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.floating-header__avatar {
    width: auto;
    gap: 7px;
    padding: 0 4px 0 0;
}

.floating-header__avatar img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(87,176,255,.22);
}

.floating-header__avatar .material-symbols-outlined {
    font-size: 18px;
}

.floating-header__login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    background: rgba(87,176,255,.14);
    color: var(--c-primary);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.floating-header__login-btn:hover {
    background: rgba(87,176,255,.26);
    color: #fff;
}

.floating-header__login-btn .material-symbols-outlined {
    font-size: 18px;
}

.floating-header__search-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 18px;
    width: min(520px, calc(100vw - 64px));
    overflow: hidden;
    border: 1px solid rgba(87,176,255,.26);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(19,24,33,.98) 0%, rgba(12,16,22,.99) 100%);
    box-shadow: 0 22px 46px rgba(0,0,0,.38);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.floating-header__search-form {
    position: relative;
    margin: 0;
    border-bottom: 1px solid var(--ov-07);
}

.floating-header__search-input {
    width: 100%;
    min-height: 48px;
    border: 0;
    outline: 0;
    padding: 0 48px;
    background: var(--ov-04);
    color: #edf5ff;
    font-size: 14px;
}

.floating-header__search-input::placeholder {
    color: rgba(180,192,215,.55);
}

.floating-header__search-icon,
.floating-header__search-close {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.floating-header__search-icon {
    left: 15px;
    color: #8bc7ff;
    font-size: 22px;
}

.floating-header__search-close {
    right: 8px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #96abc7;
    cursor: pointer;
}

.floating-header__search-close:hover {
    background: var(--ov-06);
    color: #fff;
}

.floating-header__search-results .search-suggestions__list {
    max-height: 330px;
    overflow-y: auto;
}

.floating-header__search-results .search-suggestion-item__thumb {
    border-radius: 8px;
}

.floating-header__notif-menu.notif-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 18px;
    z-index: 2;
}

.floating-header__auth-menu.auth-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 18px;
    z-index: 2;
    min-width: 260px;
}

.floating-header__auth-menu .auth-menu__logout {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1199.98px) {
    .floating-header__inner {
        gap: 16px;
    }

    .floating-header__nav {
        gap: 16px;
    }

    .floating-header__nav-link {
        font-size: 13px;
    }
}

@media (max-width: 991.98px) {

    .floating-header__inner {
        min-height: 60px;
        gap: 12px;
        padding: 9px 12px;
    }

    .floating-header__nav {
        display: none;
    }

    .floating-header__brand img {
        height: 32px;
        max-width: 140px;
    }

    .floating-header__brand--mobile-logo {
        flex-shrink: 0;
    }

    .floating-header__brand--mobile-logo picture {
        flex: 0 0 32px;
        width: 32px;
    }

    .floating-header__brand--mobile-logo img {
        width: 32px;
        max-width: 32px;
    }

    .floating-header__icon-btn,
    .floating-header__avatar img {
        width: 38px;
        height: 38px;
    }

    .floating-header__actions {
        gap: 6px;
        justify-content: flex-end;
    }

    .floating-header__search-panel {
        right: 8px;
        width: min(520px, calc(100vw - 36px));
    }

    .floating-header__notif-menu.notif-menu {
        right: 8px;
    }

    .floating-header__auth-menu.auth-menu {
        right: 8px;
    }
}

@media (max-width: 575.98px) {
    .floating-header__brand img {
        max-width: 118px;
    }

    .floating-header__search-panel,
    .floating-header__notif-menu.notif-menu,
    .floating-header__auth-menu.auth-menu {
        left: 8px;
        right: 8px;
        width: auto;
    }
}

.site-header__main {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
}

section.slider, section.hero-section {
	margin-top: 0px;
	padding: 30px 0 calc(118px + 30px);
}

section.slider + .populer-items,
section.hero-section + .populer-items {
    margin-top: -118px;
}

@media (min-width: 992px) {
    /* Slider arka planı, üst bağlantılar ve header boyunca devam eder. */
    .header-top-link {
        position: relative;
        z-index: 2;
    }

    section.slider, section.hero-section {
        margin-top: calc(-65px - 135px);
        padding-top: calc(30px + 65px + 135px);
    }
}

section.slider.hero-section {
    --slider-active-accent: #57b0ff;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #070a10;
    transition: background .45s ease;
}

section.slider.hero-section::before,
section.slider.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

section.slider.hero-section::before {
    z-index: 0;
    background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--slider-active-accent) 66%, transparent) 0%, color-mix(in srgb, var(--slider-active-accent) 34%, transparent) 32%, transparent 72%);
    opacity: .96;
    transition: background .5s ease;
}

section.slider.hero-section::after {
    z-index: 0;
    background: linear-gradient(180deg, rgba(5,8,15,.12) 0%, rgba(5,8,15,.18) 46%, rgba(5,8,15,.78) 100%);
}

section.slider.hero-section > .container,
.listing-tabs > *,
.item_group_page > *,
.product-banner + section,
.listing-card__header,
.listing-card__body,
.product-detail-page,
.marketplace-section > .container,
.campaign-hero__inner {
    position: relative;
    z-index: 1;
}

.site-header__main > .site-header__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* .site-header__search-slot header satırında geniş esnek alanı kaplar;
   .site-header__search bunun içinde yalnızca arama kutusu kadar dar kalır —
   dışa tıklandığında dropdown'ı kapatan JS kontrolü (.closest('.site-header__search'))
   böylece görünmez geniş boşluğu değil, gerçek kutuyu esas alır. */
.site-header__main > .site-header__search-slot {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.site-header__search {
    width: 100%;
    max-width: 640px;
}

.site-header__main > .user-panel {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.header-brand {
    display: inline-flex;
    align-items: center;
}

.header-brand img {
    height: 32px;
    width: auto;
}

/* Masaüstünde tam logo; minimal (ikon) logo mobil breakpoint'te devreye girer. */
.header-brand__minimal {
    display: none;
}

/* ---- Search ---- */
.site-header__search .search-form-group {
    position: relative;
    max-width: 640px;
    width: 100%;
}

.site-header__search .search-form-group input {
    min-height: 42px;
    border: 1px solid rgba(255,255,255,.09);
    background: var(--ov-05);
    color: #e4e4e4;
    padding-left: 3.2rem;
    padding-right: 1.2rem;
    border-radius: 14px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
   
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.site-header__search .search-form-group input::placeholder {
    color: rgba(180,192,215,.5);
}

.site-header__search .search-form-group input.search-open {
	background: #1a1d24;
	border-bottom-color: transparent;
	border-radius: 14px 14px 0 0;
	/* .search-suggestions da aynı gölgeyi taşır; sarmalların hizası birbirine
	   değdiği için (aradaki 1px kesişme) iki gölge tek parça gibi görünür —
	   .search-form-group'un kendi kutusu absolute konumlanan sonuç panelinin
	   yüksekliğini kapsamadığından gölge tek bir sarmaldan verilemiyor. */
	box-shadow: 0 18px 40px rgba(0,0,0,.34);
	outline: none;
}

.site-header__search .search-form-group .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(87,176,255,.14);
    color: #9fcfff;
    font-size: 15px;
    pointer-events: none;
    z-index: 1;
}

/* Site genelindeki açılır menü ailesiyle (.auth-menu, .notif-menu,
   .lang-selector__menu) aynı düz koyu zemin + nötr kenarlık + gölge dili —
   üst kenarlık yok, çünkü gameSearchInput.search-open ile tek parça görünmesi
   gerekiyor (üst tarafı zaten input'un kendi kenarlığıyla kapanıyor). */
.search-suggestions {
	position: absolute;
	top: calc(100% + -1px);
	left: 0;
	right: 0;
	z-index: 35;
	border: 1px solid var(--ov-12);
	border-top: none;
	border-radius: 0px 0px 14px 14px;
	background: #1a1d24;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(0,0,0,.34);
}

.search-suggestions__header {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--ov-06);
    color: var(--c-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.search-suggestions__list {
    display: flex;
    flex-direction: column;
    max-height: 360px;
    overflow-y: auto;
}
@supports (scrollbar-width: thin) {
    .search-suggestions__list {
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,.18) transparent;
    }
}
.search-suggestions__list::-webkit-scrollbar {
    width: 6px;
}
.search-suggestions__list::-webkit-scrollbar-track {
    background: transparent;
}
.search-suggestions__list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.16);
    border-radius: 8px;
}
.search-suggestions__list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.28);
}

.search-suggestion-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    color: #e6eefb;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.search-suggestion-item + .search-suggestion-item {
    border-top: 1px solid var(--ov-06);
}

.search-suggestion-item:hover,
.search-suggestion-item:focus-visible {
    background: rgba(87,176,255,.12);
    color: #fff;
}

.search-suggestion-item__thumb {
    width: 56px;
    height: 56px;
    overflow: hidden;
    background: var(--ov-04);
}

.search-suggestion-item__thumb img,
.cart-page__item-thumb img,
.cart-menu__thumb img,
.product-row__icon img,
.sp-item-card__thumb img,
.product-banner__thumb img,
.detail-tabs-gallery__main img,
.detail-tabs-gallery__thumb img,
.mob-drawer__avatar img,
.sp-banner__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-suggestion-item__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.search-suggestion-item__name {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-suggestion-item__meta {
    font-size: 12px;
    color: #91a2bd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-suggestion-empty {
    padding: 16px;
    font-size: 13px;
    color: #91a2bd;
}

.search-suggestions__view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 16px;
    border-top: 1px solid var(--ov-06);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-primary);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.search-suggestions__view-all:hover {
    background: rgba(87,176,255,.1);
    color: #7dc4ff;
}

/* ── Öneri grupları (Oyunlar/Ürünler · Son/Popüler Aramalar) ── */
.search-suggestion-group + .search-suggestion-group {
    border-top: 1px solid var(--ov-06);
}
.search-suggestion-group__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

/* ── Klavye ile gezinilen aktif öğe ── */
.search-suggestion-item.is-active {
    background: rgba(87,176,255,.16);
    color: #fff;
}

/* ── Son/Popüler arama öğelerinde ikon thumb ── */
.search-suggestion-item__thumb--icon {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary);
    background: rgba(87,176,255,.1);
}
.search-suggestion-item__thumb--icon .material-symbols-outlined {
    font-size: 22px;
}

/* ═══ FAQ PAGE (faq-*) ═══════════════════════════════════════════════════ */

.faq-page-header {
    margin-bottom: 32px;
}

.faq-page-header__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.faq-page-header__title .material-symbols-outlined {
    font-size: 32px;
    color: var(--c-primary);
}

.faq-page-header__desc {
    font-size: 15px;
    color: #91a2bd;
    margin-bottom: 20px;
}

.faq-search {
    position: relative;
    max-width: 480px;
}

.faq-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--c-primary);
    pointer-events: none;
}

.faq-search__input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    background: var(--ov-04);
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.faq-search__input::placeholder {
    color: #5e7089;
}

.faq-search__input:focus {
    border-color: rgba(87,176,255,.4);
    background: rgba(87,176,255,.06);
}

/* Sidebar */
.faq-section,
.faq-section > .container,
.faq-layout,
.faq-sidebar-col {
    overflow: visible;
}

.faq-sidebar-col {
    position: sticky;
    top: 100px;
    align-self: flex-start;
    z-index: 20;
}

.faq-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 20px;
    border: 1px solid var(--ov-08);
    border-radius: 14px;
    background: var(--ov-03);
}

.faq-sidebar__title,
.kur-sidebar__title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(159,207,255,.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ov-06);
}

.faq-sidebar__link,
.kur-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #91a2bd;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.faq-sidebar__link .material-symbols-outlined,
.kur-sidebar__link .material-symbols-outlined {
    font-size: 20px;
}

.faq-sidebar__link:hover,
.kur-sidebar__link:hover {
    background: rgba(87,176,255,.08);
    color: #c0d8f0;
}

.faq-sidebar__link.active,
.kur-sidebar__link.active {
    background: rgba(87,176,255,.14);
    color: var(--c-primary);
}

/* Category */
.faq-category {
    margin-bottom: 36px;
    scroll-margin-top: 90px;
}

.faq-category__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ov-08);
}

.faq-category__title .material-symbols-outlined {
    font-size: 24px;
    color: var(--c-primary);
}

/* FAQ Item (details/summary) */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    border: 1px solid var(--ov-08);
    border-radius: 12px;
    background: var(--ov-03);
    overflow: hidden;
    transition: border-color 0.2s;
}

.faq-item:hover {
    border-color: rgba(87,176,255,.18);
}

.faq-item[open] {
    border-color: rgba(87,176,255,.24);
    background: rgba(87,176,255,.04);
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #e6eefb;
    cursor: pointer;
    list-style: none;
    transition: color 0.2s;
}

.faq-item__question::-webkit-details-marker {
    display: none;
}

.faq-item__question:hover {
    color: #fff;
}

.faq-item__arrow {
    font-size: 22px;
    color: var(--c-primary);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.faq-item[open] .faq-item__arrow {
    transform: rotate(180deg);
}

.faq-item__answer {
    padding: 0 18px 18px;
    font-size: 14px;
    line-height: 1.7;
    color: #91a2bd;
}

.faq-item__answer a {
    color: var(--c-primary);
    text-decoration: none;
}

.faq-item__answer a:hover {
    text-decoration: underline;
}

/* Empty state */
.faq-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    text-align: center;
}

.faq-empty .material-symbols-outlined {
    font-size: 48px;
    color: #3a4a5e;
}

.faq-empty p {
    font-size: 15px;
    color: #5e7089;
}

/* Responsive */
@media (max-width: 991.98px) {
    .faq-sidebar-col {
        position: static;
        top: auto;
        align-self: stretch;
        z-index: auto;
    }

    .faq-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        max-height: none;
        overflow-y: visible;
        padding: 14px;
        margin-bottom: 8px;
    }

    .faq-sidebar__title {
        width: 100%;
        margin-bottom: 4px;
        padding-bottom: 8px;
    }

    .faq-sidebar__link {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ===== Kurumsal Pages ===== */
.kur-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    border: 1px solid var(--ov-08);
    border-radius: 14px;
    background: var(--ov-03);
}

.kur-content {
    padding: 0 10px;
}

.kur-content__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.kur-content__title .material-symbols-outlined {
    font-size: 28px;
    color: var(--c-primary);
}

.kur-content__updated {
    font-size: 13px;
    color: #5e7089;
    margin-bottom: 28px;
}

.kur-content__body h2 {
    font-size: 18px;
    font-weight: 700;
    color: #e6eefb;
    margin-top: 28px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ov-06);
}

.kur-content__body h3 {
    font-size: 15px;
    font-weight: 600;
    color: #c0d8f0;
    margin-top: 18px;
    margin-bottom: 8px;
}

.kur-content__body p {
    font-size: 14px;
    line-height: 1.75;
    color: #91a2bd;
    margin-bottom: 12px;
}

.kur-content__body ul {
    padding-left: 20px;
    margin-bottom: 14px;
}

.kur-content__body li {
    font-size: 14px;
    line-height: 1.75;
    color: #91a2bd;
    margin-bottom: 4px;
}

.kur-content__body a {
    color: var(--c-primary);
    text-decoration: none;
}

.kur-content__body a:hover {
    text-decoration: underline;
}

.kur-content__body strong {
    color: #c0d8f0;
}

@media (max-width: 991.98px) {
    .kur-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        padding: 14px;
        margin-bottom: 8px;
    }

    .kur-sidebar__title {
        width: 100%;
        margin-bottom: 4px;
        padding-bottom: 8px;
    }

    .kur-sidebar__link {
        padding: 8px 12px;
        font-size: 13px;
    }

    .kur-content {
        padding: 0;
    }

    .kur-content__title {
        font-size: 20px;
    }
}

/* ===== Cart Page ===== */
.cart-page__items-card,
.cart-page__summary-card {
    border: 1px solid var(--ov-08);
    border-radius: 14px;
    background: var(--ov-03);
    padding: 24px;
}

.cart-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ov-06);
    margin-bottom: 16px;
}

.cart-page__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.cart-page__title .material-symbols-outlined {
    font-size: 26px;
    color: var(--c-primary);
}

.cart-page__count {
    font-size: 14px;
    font-weight: 500;
    color: #5e7089;
}

.cart-page__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cart-page__item {
    display: grid;
    grid-template-columns: 72px 1fr auto auto auto;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--ov-05);
}

.cart-page__item:last-child {
    border-bottom: none;
}

.cart-page__item-thumb {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--ov-08);
    background: var(--ov-04);
    flex-shrink: 0;
}

.cart-page__item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cart-page__item-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-page__item-price {
    font-size: 13px;
    color: #5e7089;
}

.cart-page__item-qty {
    flex: 0 0 auto;
}

.cart-page__item-qty.btn-group-o {
    border-radius: 8px;
}

.cart-page__item-line-total {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-primary);
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
}

.cart-page__item-remove {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--ov-08);
    border-radius: 8px;
    color: #ff6b6b;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.cart-page__item-remove:hover {
    background: rgba(255,107,107,.1);
    border-color: rgba(255,107,107,.25);
}

.cart-page__item-remove .material-symbols-outlined {
    font-size: 18px;
}

/* Cart Item Badges */
.cart-page__item-badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.cart-page__item-badge--danger {
    background: rgba(255,107,107,.12);
    border: 1px solid rgba(255,107,107,.25);
    color: #ff9b9b;
}

.cart-page__item-badge--warning {
    background: rgba(250,204,21,.1);
    border: 1px solid rgba(250,204,21,.25);
    color: #facc15;
}

.cart-page__item-badge--success {
    background: rgba(74,222,128,.1);
    border: 1px solid rgba(74,222,128,.25);
    color: #4ade80;
}

/* Cart Warnings — sepet sayfasında uyarılar .alert-o (x-alert) bileşeniyle
   render edilir; .cart-page__warning sınıfı sell-checkout sayfasında hâlâ kullanılır */
.cart-page__warnings {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.cart-page__warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(250,204,21,.25);
    border-radius: 10px;
    background: rgba(250,204,21,.07);
    font-size: 13px;
    color: #fde68a;
}

.cart-page__warning .material-symbols-outlined {
    font-size: 18px;
    color: #facc15;
    flex-shrink: 0;
}

.cart-page__warning strong {
    color: #fff;
}

/* Cart Item Extra Info (sipariş için ek bilgi) */
/* Ek bilgi: ürün satırında minimal "chip" özet; kalemle dropdown benzeri bir karta dönüşür */
.cart-page__item-meta {
    position: relative;
    margin-top: 6px;
    font-size: 11.5px;
    color: #5e7089;
}

.cart-page__item-meta-view {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.cart-page__item-meta-view[hidden],
.cart-page__item-meta-form[hidden] {
    display: none;
}

/* Özet etiketleri — küçük chip görünümü */
.cart-page__item-meta-pair {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border: 1px solid var(--ov-08);
    border-radius: 999px;
    background: var(--ov-03);
    color: #7c8ca6;
    line-height: 1.7;
}

.cart-page__item-meta-pair strong {
    color: #cfdcef;
    font-weight: 600;
}

/* ── Düzenleme alanı: dropdown benzeri kart (kenarlık + hafif gölge) ───── */
.cart-page__item-meta-form {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: max-content;
    max-width: min(440px, calc(100vw - 40px));
    padding: 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    box-shadow: 0 16px 34px -16px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.35);
    animation: cartMetaPop 0.16s ease-out;
}
.cart-page__item-meta-form .o-choices {
	margin-bottom: 0 !important;
	min-width: 120px;
}
/* Karta dropdown hissi veren küçük ok */
.cart-page__item-meta-form::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 18px;
    width: 11px;
    height: 11px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: 3px;
    transform: rotate(45deg);
}

@keyframes cartMetaPop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cart-page__item-meta-form .input-o,
.cart-page__item-meta-form .select-o {
    flex: 1 1 150px;
    box-sizing: border-box;
    height: 36px;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0 12px;
    font-size: 13px;
    line-height: normal;
}

.cart-page__item-meta-form .select-o {
    flex: 0 0 132px;
}

/* Düzenle (kalem) butonu — küçük ghost pill */
.cart-page__item-meta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 24px;
    padding: 2px 9px;
    background: rgba(87,176,255,.08);
    border: 1px solid rgba(87,176,255,.22);
    border-radius: 999px;
    color: var(--c-primary);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cart-page__item-meta-btn:hover {
    background: rgba(87,176,255,.16);
    border-color: rgba(87,176,255,.4);
    color: #8ecbff;
}

.cart-page__item-meta-btn .material-symbols-outlined {
    font-size: 15px;
}

/* Kaydet / Vazgeç — kart içinde net ikon butonları */
.cart-page__item-meta-btn--save,
.cart-page__item-meta-btn--cancel {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 0;
    border-radius: 8px;
}

/* Zorunlu alanlar boşken Kaydet pasif */
.cart-page__item-meta-btn--save:disabled,
.cart-page__item-meta-btn--save[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--ov-04);
    border-color: var(--c-border);
    color: var(--c-text-subtle);
}

.cart-page__item-meta-btn--save {
    background: rgba(74,222,128,.12);
    border-color: rgba(74,222,128,.3);
    color: #4ade80;
}

.cart-page__item-meta-btn--save:not(:disabled):hover {
    background: rgba(74,222,128,.2);
    border-color: rgba(74,222,128,.5);
    color: #86efac;
}

.cart-page__item-meta-btn--cancel {
    background: rgba(224,86,102,.1);
    border-color: rgba(224,86,102,.28);
    color: #e05666;
}

.cart-page__item-meta-btn--cancel:hover {
    background: rgba(224,86,102,.18);
    border-color: rgba(224,86,102,.5);
    color: #f08a96;
}

.cart-page__item-meta-btn--save .material-symbols-outlined,
.cart-page__item-meta-btn--cancel .material-symbols-outlined {
    font-size: 18px;
}

.cart-page__item-meta .cart-page__item-badge {
    display: inline-block;
    margin-top: 8px;
}

/* Cart Empty */
.cart-page__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    text-align: center;
}

.cart-page__empty > .material-symbols-outlined {
    font-size: 56px;
    color: #2a3344;
}

.cart-page__empty h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.cart-page__empty p {
    font-size: 14px;
    color: #5e7089;
    margin: 0;
}

/* Summary Card */
.cart-page__summary-card {
    position: sticky;
    top: 100px;
}

.cart-page__summary-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ov-06);
}

.cart-page__summary-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.cart-page__summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}

.cart-page__summary-row span:first-child {
    color: #91a2bd;
}

.cart-page__summary-row span:last-child,
.order-track__item.is-active,
.checkout-summary__row span:last-child,
.order-detail__summary-row span:last-child,
.campaign-meta__item strong {
    color: #fff;
    font-weight: 600;
}

.cart-page__summary-row--discount span:last-child {
    color: #4ade80;
}

.cart-page__coupon-alert:not(:empty) {
    margin-bottom: 4px;
}

.cart-page__coupon {
    padding: 14px 0;
    border-top: 1px solid var(--ov-06);
    margin-bottom: 0;
}
.cart-page__coupon + .cart-page__coupon {
    border-top: 0;
    padding-top: 0;
}

.cart-page__coupon-input {
    display: flex;
    gap: 8px;
}

.cart-page__coupon-input .form-control {
    flex: 1;
}

.cart-page__summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-top: 1px solid var(--ov-06);
    border-bottom: 1px solid var(--ov-06);
    margin-bottom: 18px;
}

.cart-page__summary-total span {
    font-size: 15px;
    font-weight: 600;
    color: #91a2bd;
}

.cart-page__summary-total strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--c-primary);
}

.cart-page__checkout-btn {
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 991.98px) {
    .cart-page__item {
        grid-template-columns: 56px 1fr auto;
        gap: 10px;
    }
    .cart-page__item-line-total {
        display: none;
    }
    .cart-page__item-qty {
        grid-column: 2 / -1;
    }
}

@media (max-width: 575.98px) {
    .cart-page__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .cart-page__items-card,
    .cart-page__summary-card {
        padding: 16px;
    }
}

/* ===== Checkout Page ===== */
.checkout-steps {
    padding: 20px 0 4px;
}

.checkout-steps__inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: 640px;
    margin-inline: auto;
}

.checkout-steps__item {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Adımları birbirine bağlayan çizgi — bir önceki ikonun kenarından
   bu ikonun kenarına tam ulaşır (etiket genişliğinden bağımsız, eşit aralıklı) */
.checkout-steps__item:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 21px;
    left: calc(-50% + 22px);
    width: calc(100% - 44px);
    height: 2px;
    background: rgba(255,255,255,.1);
    border-radius: 2px;
    z-index: 0;
    transition: background 0.3s;
}
.checkout-steps__item.active::before,
.checkout-steps__item.completed::before {
    background: var(--c-primary);
}
.checkout-steps__item.failed::before {
    background: var(--c-danger);
}

/* Link olarak kullanılan step (örn. ödeme adımında sepete dönüş) */
a.checkout-steps__item {
    text-decoration: none;
    cursor: pointer;
}

a.checkout-steps__item:hover {
    text-decoration: none;
}

.checkout-steps__icon {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--c-border);
    background: var(--ov-04);
    color: var(--c-text-subtle);
    transition: all 0.3s;
}

.checkout-steps__icon .material-symbols-outlined {
    font-size: 22px;
}

.checkout-steps__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Aktif adım — mavi + hafif halka (tamamlanandan ayrışsın) */
.checkout-steps__item.active .checkout-steps__icon {
    border-color: var(--c-primary);
    background: rgba(87,176,255,.14);
    color: var(--c-primary);
    box-shadow: 0 0 0 4px rgba(87,176,255,.1);
}

.checkout-steps__item.active .checkout-steps__label {
    color: var(--c-primary);
}

/* Tamamlanan adım — bu üst stepper'da mavi kalır (yeşil değil), dolu ikon */
.checkout-steps__item.completed .checkout-steps__icon {
    border-color: var(--c-primary);
    background: rgba(87,176,255,.16);
    color: var(--c-primary);
}

.checkout-steps__item.completed .checkout-steps__icon .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

.checkout-steps__item.completed .checkout-steps__label {
    color: var(--c-primary);
}

/* Eski sabit-genişlikli çizgi div'leri artık ::before konnektörüyle çiziliyor */
.checkout-steps__line {
    display: none;
}

/* Checkout Cards */
.checkout-card {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    background: var(--ov-03);
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0,0,0,.28);
}

.checkout-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--ov-07);
    background: linear-gradient(135deg, rgba(182, 197, 210, 0.07) 0%, var(--ov-02) 100%);
    position: relative;
}

.checkout-card__header .material-symbols-outlined,
.order-detail__heading .material-symbols-outlined,
.error-page__search > .material-symbols-outlined,
.campaign-offer__icon,
.campaign-section__title .material-symbols-outlined {
    font-size: 22px;
    color: var(--c-primary);
}

.checkout-card__header h2 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.checkout-card__badge {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-primary);
    background: rgba(87,176,255,.12);
    border: 1px solid rgba(87,176,255,.22);
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.checkout-card__badge--success {
    color: var(--c-success);
    background: rgba(52,211,153,.12);
    border-color: rgba(52,211,153,.24);
}
.checkout-card__badge--danger {
    color: var(--c-danger);
    background: rgba(248,113,113,.12);
    border-color: rgba(248,113,113,.24);
}
.checkout-card__badge--warning {
    color: var(--c-warning);
    background: rgba(251,191,36,.12);
    border-color: rgba(251,191,36,.24);
}
.checkout-card__badge--muted {
    color: rgba(255,255,255,.35);
    background: var(--ov-06);
}

.checkout-card__body {
    padding: 20px 24px;
}

/* Checkout info satırları */
.checkout-info {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.checkout-info__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 11px 0;
    border-bottom: 1px solid var(--ov-06);
    gap: 16px;
}
.checkout-info__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.checkout-info__row dt {
    font-weight: 400;
    color: rgba(255,255,255,.48);
    font-size: 13px;
    flex-shrink: 0;
}
.checkout-info__row dd {
    margin: 0;
    color: rgba(255,255,255,.88);
    font-size: 13.5px;
    text-align: right;
    word-break: break-word;
}

/* Sipariş ilerleme adımları — yatay stepper (bağlantı çizgili düğümler) */
.order-track {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-top: 1px solid var(--c-border);
    padding-top: 26px;
    margin-top: 22px;
    margin-bottom: 2px;
    gap: 0;
}
.order-track__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 0 4px;
    color: var(--c-text-subtle);
    position: relative;
}
/* Düğümler arası yatay bağlantı çizgisi */
.order-track__item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 19px;
    left: calc(50% + 19px);
    width: calc(100% - 38px);
    height: 2px;
    background: rgba(255,255,255,.1);
    border-radius: 2px;
    transition: background 0.3s;
}
.order-track__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-subtle);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.order-track__dot .material-symbols-outlined {
    font-size: 20px;
}
.order-track__label {
    font-size: 12.5px;
    line-height: 1.35;
}
/* Tamamlanmış adım — yeşil ağırlıklı */
.order-track__item.is-done {
    color: var(--c-success);
    font-weight: 600;
}
.order-track__item.is-done .order-track__dot {
    border-color: var(--c-success);
    background: rgba(52,211,153,.22);
    color: var(--c-success);
}
.order-track__item.is-done .order-track__dot .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}
.order-track__item.is-done:not(:last-child)::after {
    background: var(--c-success);
}
.order-track__item.is-active .order-track__dot {
    border-color: var(--c-primary);
    background: rgba(87,176,255,.14);
    color: var(--c-primary);
    box-shadow: 0 0 0 4px rgba(87,176,255,.1);
}

/* Checkout Items */
.checkout-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.checkout-item {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--c-border);
}

.checkout-item:last-child {
    border-bottom: none;
}

.order-detail__howto-info,
.price-stat__body,
.pd-countdown__text,
.bcx-catv__meta,
.bcx-feat__card-id,
.blog-poplist__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Balance Payment */
.checkout-balance {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--ov-08);
    border-radius: 10px;
    background: var(--ov-03);
}

.checkout-balance__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}

.checkout-balance__row span {
    color: #91a2bd;
}

.checkout-balance__row strong {
    color: #fff;
    font-weight: 700;
}

.checkout-balance__row--result {
    padding-top: 12px;
    border-top: 1px solid var(--ov-06);
}

.checkout-balance__row--result strong.is-positive {
    color: #4ade80;
}

.checkout-balance__row--result strong.is-negative {
    color: #ff6b6b;
}

.checkout-balance__warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255,107,107,.25);
    border-radius: 10px;
    background: rgba(255,107,107,.08);
    font-size: 13px;
    color: #ff9b9b;
}

.checkout-balance__warning .material-symbols-outlined {
    font-size: 18px;
    color: #ff6b6b;
    flex-shrink: 0;
}

.checkout-balance__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.checkout-balance__note {
    font-size: 13px;
    color: #5e7089;
}

.checkout-agreement:hover {
    border-color: rgba(87,176,255,.3);
    background: rgba(87,176,255,.04);
}

.checkout-agreement {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #91a2bd;
    line-height: 1.55;
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--ov-08);
    border-radius: 12px;
    background: var(--ov-03);
    transition: border-color .2s, background .2s;
    cursor: default;
}

.checkout-agreement .check-o__control {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
}

.checkout-agreement .check-o__box {
    margin-top: 1px;
}

.checkout-agreement .check-o__label {
    cursor: default;
}

.checkout-agreement a {
    color: var(--c-primary);
    text-decoration: none;
    font-weight: 600;
}

.checkout-agreement a:hover {
    text-decoration: underline;
}

/* Checkout Summary */
.checkout-summary {
    border: 1px solid var(--ov-08);
    border-radius: 14px;
    background: var(--ov-03);
    padding: 24px;
}

.checkout-summary__title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ov-06);
}

.checkout-summary__rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.checkout-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.checkout-summary__row span:first-child {
    color: #91a2bd;
}

.checkout-summary__row--discount span:last-child {
    color: #4ade80;
}

.checkout-summary__row--fee span:last-child {
    color: var(--c-gold);
}

.checkout-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid var(--ov-06);
    border-bottom: 1px solid var(--ov-06);
    margin-bottom: 18px;
}

.checkout-summary__total span {
    font-size: 15px;
    font-weight: 600;
    color: #91a2bd;
}

.checkout-summary__total strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--c-primary);
}

.checkout-summary__pay-btn {
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 575.98px) {
    .checkout-card__body {
        padding: 16px;
    }
    .checkout-card__header {
        padding: 14px 16px;
    }
    .checkout-steps__inner {
        max-width: 100%;
    }
    .checkout-steps__icon {
        width: 38px;
        height: 38px;
    }
    .checkout-steps__icon .material-symbols-outlined {
        font-size: 19px;
    }
    .checkout-steps__item:not(:first-child)::before {
        top: 18px;
        left: calc(-50% + 19px);
        width: calc(100% - 38px);
    }
    .checkout-steps__label {
        font-size: 10.5px;
        letter-spacing: 0.3px;
    }
    .checkout-summary {
        padding: 16px;
    }
    .checkout-info__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .checkout-info__row dd {
        text-align: left;
    }
    /* Yatay stepper'ı dar ekranda sıkıştır */
    .order-track__item {
        gap: 7px;
        padding: 0 2px;
    }
    .order-track__dot {
        width: 32px;
        height: 32px;
    }
    .order-track__dot .material-symbols-outlined {
        font-size: 17px;
    }
    .order-track__item:not(:last-child)::after {
        top: 16px;
        left: calc(50% + 16px);
        width: calc(100% - 32px);
    }
    .order-track__label {
        font-size: 10.5px;
        line-height: 1.25;
    }
}

/* ===== Order Result Pages ===== */
.checkout-steps__item.failed .checkout-steps__icon {
    border-color: var(--c-danger);
    background: rgba(248,113,113,.12);
    color: var(--c-danger);
}

.checkout-steps__item.failed .checkout-steps__label {
    color: var(--c-danger);
}

.checkout-steps__line.failed {
    background: var(--c-danger);
}

/* Result Card */
.order-result__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px 24px;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 24px;
}

.order-result__card--success {
    border: 1px solid rgba(74,222,128,.18);
    background: linear-gradient(180deg, rgba(74,222,128,.06) 0%, rgba(74,222,128,.01) 100%);
}

.order-result__card--fail {
    border: 1px solid rgba(255,107,107,.18);
    background: linear-gradient(180deg, rgba(255,107,107,.06) 0%, rgba(255,107,107,.01) 100%);
}

.order-result__icon-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-result__icon {
    font-size: 56px;
    position: relative;
    z-index: 1;
}

.order-result__card--success .order-result__icon {
    color: #4ade80;
}

.order-result__card--fail .order-result__icon {
    color: #ff6b6b;
}

.order-result__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(74,222,128,.15);
    animation: orderPulse 2s ease-in-out infinite;
}

.order-result__pulse--fail {
    background: rgba(255,107,107,.15);
}

@keyframes orderPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.25); opacity: 0; }
}

.order-result__title {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.order-result__desc {
    font-size: 15px;
    color: #91a2bd;
    margin: 0;
    max-width: 460px;
    line-height: 1.6;
}

/* Order Detail */
.order-detail {
    border: 1px solid var(--ov-08);
    border-radius: 14px;
    background: var(--ov-03);
    overflow: hidden;
    margin-bottom: 24px;
}

.order-detail__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--ov-06);
    background: var(--ov-02);
}

.order-detail__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

/* Order Timeline */
.order-timeline {
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
    border-bottom: 1px solid var(--c-border);
}

.order-timeline__step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
}

.order-timeline__step:last-child {
    padding-bottom: 0;
}

/* Adımları birbirine bağlayan dikey çizgi */
.order-timeline__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: var(--ov-08);
}

.order-timeline__step.is-done:not(:last-child)::before {
    background: var(--c-success);
}

.order-timeline__marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--c-border);
    background: var(--ov-04);
    color: var(--c-text-subtle);
    transition: border-color 0.3s, background 0.3s, color 0.3s;
}

.order-timeline__marker .material-symbols-outlined {
    font-size: 18px;
}

.order-timeline__step.is-done .order-timeline__marker {
    border-color: var(--c-success);
    background: rgba(52,211,153,.22);
    color: var(--c-success);
}

.order-timeline__step.is-done .order-timeline__marker .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

.order-timeline__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text-subtle);
}

.order-timeline__step.is-done .order-timeline__label {
    color: var(--c-success);
}

.order-timeline__date {
    margin-left: auto;
    font-size: 12px;
    color: var(--c-text-subtle);
}

.order-detail__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-bottom: 1px solid var(--ov-06);
}

.order-detail__info-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 24px;
    border-right: 1px solid var(--ov-06);
}

.order-detail__info-box:last-child {
    border-right: none;
}

.order-detail__info-label {
    font-size: 11px;
    font-weight: 600;
    color: #5e7089;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-detail__info-value,
.auth-menu__section strong,
.pd-hdr__rating-score,
.pd-countdown__title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.order-detail__info-value--highlight {
    color: var(--c-primary);
    font-size: 16px;
}

.order-detail__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.order-detail__status--success {
    color: #4ade80;
    background: rgba(74,222,128,.1);
}

.order-detail__status--success .material-symbols-outlined {
    font-size: 16px;
}

/* Order Detail Sections */
.order-detail__section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--ov-06);
}

.order-detail__section:last-child {
    border-bottom: none;
}

.order-detail__section-title {
    font-size: 14px;
    font-weight: 700;
    color: #91a2bd;
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Order Items */
.order-detail__items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.order-detail__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ov-04);
}

.order-detail__item:last-child {
    border-bottom: none;
}

.order-detail__item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.order-detail__item-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
}

.order-detail__item-meta {
    font-size: 12px;
    color: #5e7089;
}

.order-detail__item-total {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--c-primary);
    white-space: nowrap;
    text-align: right;
}

/* Per-item delivery status badge */
.order-detail__item-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    margin-top: 2px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.order-detail__item-status .material-symbols-outlined {
    font-size: 15px;
}

.order-detail__item-status small {
    font-weight: 500;
    opacity: 0.9;
}

.order-detail__item-status--delivered {
    color: #4ade80;
    background: rgba(74,222,128,.1);
}

.order-detail__item-status--partial {
    color: var(--c-primary);
    background: rgba(87,176,255,.1);
}

.order-detail__item-status--pending {
    color: #ff9f43;
    background: rgba(255,159,67,.12);
}

.order-detail__item-status--cancelled {
    color: #ea5455;
    background: rgba(234,84,85,.1);
}

.order-detail__item-refund {
    margin-top: 4px;
    font-size: 12px;
    color: #ea9a5b;
    line-height: 1.5;
}

.order-detail__summary-rows,
.order-detail__howto-list,
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__comments,
.detail-tabs-recent-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-detail__summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.order-detail__summary-row span:first-child {
    color: #91a2bd;
}

.order-detail__summary-row--discount span:last-child {
    color: #4ade80;
}

.order-detail__summary-row--total {
    padding-top: 12px;
    border-top: 1px solid var(--ov-06);
    margin-top: 4px;
}

.order-detail__summary-row--total span:first-child {
    font-weight: 700;
    color: #fff;
}

.order-detail__summary-row--total strong {
    font-size: 20px;
    font-weight: 800;
    color: var(--c-primary);
}

/* Delivery Info */
.order-detail__delivery {
    display: flex;
    gap: 14px;
    padding: 20px 24px;
    background: rgba(87,176,255,.04);
    border-top: 1px solid rgba(87,176,255,.1);
}

.order-detail__delivery > .material-symbols-outlined {
    font-size: 22px;
    color: var(--c-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.order-detail__delivery strong {
    display: block;
    font-size: 14px;
    color: #fff;
    margin-bottom: 4px;
}

.order-detail__delivery p {
    font-size: 13px;
    color: #91a2bd;
    margin: 0;
    line-height: 1.6;
}

.order-detail__delivery p strong {
    display: inline;
    color: var(--c-primary);
    font-size: inherit;
}

/* How to load — per game */
.order-detail__howto {
    padding: 20px 24px;
    background: rgba(87,176,255,.04);
    border-top: 1px solid rgba(87,176,255,.1);
}

.order-detail__howto-head {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
}

.order-detail__howto-head > .material-symbols-outlined {
    font-size: 22px;
    color: var(--c-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.order-detail__howto-head strong {
    display: block;
    font-size: 14px;
    color: #fff;
    margin-bottom: 4px;
}

.order-detail__howto-head p {
    font-size: 13px;
    color: #91a2bd;
    margin: 0;
    line-height: 1.6;
}

.order-detail__howto-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    background: var(--ov-03);
    border: 1px solid var(--ov-06);
    border-radius: 10px;
}

.order-detail__howto-game {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.order-detail__howto-name {
    font-size: 12px;
    color: #5e7089;
}

.order-detail__howto-btn {
    flex-shrink: 0;
}

/* Result Actions */
.order-result__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

/* Delivered Codes (instant delivery on success page) */
.order-result__codes {
    margin-top: 18px;
    margin-bottom: 24px;
    padding: 22px 24px;
    background: rgba(46,204,113,.05);
    border: 1px solid rgba(46,204,113,.22);
    border-radius: 14px;
}

.order-result__codes-head {
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
}

.order-result__codes-head > .material-symbols-outlined {
    font-size: 24px;
    color: #2ecc71;
    flex-shrink: 0;
    margin-top: 2px;
}

.order-result__codes-head strong {
    display: block;
    font-size: 15px;
    color: #fff;
    margin-bottom: 4px;
}

.order-result__codes-head p {
    font-size: 13px;
    color: #91a2bd;
    line-height: 1.6;
}

.order-result__codes-actions,
.detail-tabs-details-grid,
.pd-packages,
.pd-trust-row,
.campaign-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ===== Failed Page ===== */
.order-fail-reasons {
    border: 1px solid var(--ov-08);
    border-radius: 14px;
    background: var(--ov-03);
    overflow: hidden;
    margin-bottom: 20px;
}

.order-fail-reasons__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--ov-06);
    background: var(--ov-02);
}

.order-fail-reasons__header .material-symbols-outlined {
    font-size: 22px;
    color: var(--c-gold);
}

.order-fail-reasons__header h2 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.order-fail-reasons__list {
    padding: 8px 24px;
}

.order-fail-reasons__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ov-04);
}

.order-fail-reasons__item:last-child {
    border-bottom: none;
}

.order-fail-reasons__icon {
    font-size: 22px;
    color: #ff9cb0;
    flex-shrink: 0;
    margin-top: 2px;
}

.order-fail-reasons__item strong {
    font-size: 14px;
    color: #fff;
    display: block;
    margin-bottom: 2px;
}

.order-fail-reasons__item p {
    font-size: 13px;
    color: #5e7089;
    margin: 0;
    line-height: 1.5;
}

/* Fail Detail */
.order-fail-detail {
    border: 1px solid var(--ov-08);
    border-radius: 14px;
    background: var(--ov-03);
    padding: 20px 24px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-fail-detail__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}

.order-fail-detail__row span {
    color: #5e7089;
}

.order-fail-detail__row strong {
    color: #fff;
    font-weight: 600;
    font-family: monospace;
    font-size: 13px;
    background: var(--ov-05);
    padding: 3px 10px;
    border-radius: 6px;
}

/* Alternatives */
.order-fail-alternatives {
    margin-bottom: 24px;
}

.order-fail-alternatives__title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 14px;
}

.order-fail-alternatives__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.order-fail-alternatives__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    border: 1px solid var(--ov-08);
    border-radius: 14px;
    background: var(--ov-03);
    text-align: center;
    transition: border-color 0.2s;
}

.order-fail-alternatives__card:hover {
    border-color: rgba(87,176,255,.2);
}

.order-fail-alternatives__card .material-symbols-outlined {
    font-size: 28px;
    color: var(--c-primary);
}

.order-fail-alternatives__card strong {
    font-size: 14px;
    color: #fff;
}

.order-fail-alternatives__card p {
    font-size: 12px;
    color: #5e7089;
    margin: 0;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 767.98px) {
    .order-detail__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .order-detail__info-box:nth-child(2) {
        border-right: none;
    }
    .order-detail__info-box:nth-child(3),
    .order-detail__info-box:nth-child(4) {
        border-top: 1px solid var(--ov-06);
    }
    .order-fail-alternatives__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .order-result__card {
        padding: 36px 16px;
    }
    .order-result__icon {
        font-size: 44px;
    }
    .order-result__title {
        font-size: 22px;
    }
    .order-detail__section,
    .order-detail__delivery,
    .order-detail__howto {
        padding: 16px;
    }
    .order-detail__howto-item,
    .detail-tabs__review-state,
    .detail-tabs__review-form-footer,
    .parallax-promo__actions,
    .product-detail-page--item-detail .item-detail-price-summary-card {
        flex-direction: column;
        align-items: stretch;
    }
    .order-detail__howto-btn {
        justify-content: center;
    }
    .order-detail__header {
        padding: 14px 16px;
    }
    .order-fail-reasons__list {
        padding: 8px 16px;
    }
    .order-fail-detail {
        padding: 16px;
    }
    .order-result__actions {
        flex-direction: column;
    }
    .order-result__actions .btn-o {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════
   LOGIN MODAL — Redesigned
═══════════════════════════════════════════ */
.login-modal .modal-dialog {
    max-width: 440px;
}

.login-modal .modal-content {
    position: relative;
    border: 1px solid var(--ov-07);
    border-radius: 18px;
    background: linear-gradient(168deg, rgba(22,33,54,.92) 0%, rgba(13,18,28,.96) 100%);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 32px 80px rgba(0,0,0,.55);
    overflow: hidden;
}

.login-modal .modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 0%, rgba(87,176,255,.12) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(87,176,255,.05) 0%, transparent 50%);
    pointer-events: none;
}

.login-modal__body {
    position: relative;
    z-index: 1;
    padding: 36px 32px 32px;
}

.login-modal__close {
    position: absolute !important;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: var(--ov-06);
    color: #95a5bd;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.login-modal__close:hover {
    background: var(--ov-12);
    color: #fff;
    transform: none;
}

/* Logo */
.login-modal__logo {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}
.login-modal__logo img {
    height: 32px;
    width: auto;
}

/* Header */
.login-modal__header {
    text-align: center;
    margin-bottom: 24px;
}

.login-modal__title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.login-modal__desc {
    margin: 0;
    color: #95a5bd;
    font-size: 13px;
    line-height: 1.55;
}

/* Social login buttons */
.login-modal__social {
    display: flex;
    gap: 10px;
    margin-bottom: 0;
}
.login-modal__social-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    background: var(--ov-04);
    color: #dbe8ff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.login-modal__social-btn:hover {
    background: var(--ov-08);
    border-color: rgba(255,255,255,.18);
}
.login-modal__social-btn--discord:hover {
    border-color: rgba(88,101,242,.4);
    background: rgba(88,101,242,.1);
}

/* Divider */
.login-modal__divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0;
}
.login-modal__divider::before,
.login-modal__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ov-08);
}
.login-modal__divider span {
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Form */
.login-modal__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-modal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-modal__label {
    color: #dbe8ff;
    font-size: 12px;
    font-weight: 600;
}

.login-modal__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-modal__input-icon {
    position: absolute;
    left: 14px;
    color: #64748b;
    font-size: 20px;
    pointer-events: none;
    transition: color 0.2s;
}

.login-modal__input {
    width: 100%;
    height: 48px;
    padding: 0 14px 0 44px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    background: var(--ov-05);
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    outline: none;
}

.login-modal__input::placeholder {
    color: rgba(219,232,255,.36);
}

.login-modal__input:focus {
    background: var(--ov-08);
    border-color: rgba(87,176,255,.5);
    box-shadow: 0 0 0 3px rgba(87,176,255,.1);
}

.login-modal__input:focus ~ .login-modal__input-icon,
.login-modal__input-wrap:focus-within .login-modal__input-icon {
    color: var(--c-primary);
}

/* Password toggle */
.login-modal__toggle-pw {
    position: absolute;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.login-modal__toggle-pw:hover {
    color: #fff;
    background: var(--ov-08);
}

.login-modal__meta,
.detail-tabs__review-form-footer,
.auth-card__meta,
.pd-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.login-modal__remember {
    color: #95a5bd;
    font-size: 13px;
}

.login-modal__link,
.login-modal__footer a {
    color: #8bc7ff;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
}

.login-modal__link:hover,
.login-modal__footer a:hover {
    color: #c9e7ff;
}

/* ---- User panel icon buttons ---- */
.header-btn--notif,
.header-btn--cart {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    font-size: 17px;
}

/* ══════════════════════════════════════════
   SHARED BASE BUTTON RESET
══════════════════════════════════════════ */
.user-panel .site-header__auth a.login-btn,
.login-modal__submit,
.auth-menu__logout,
.cart-menu__checkout,
.slider-panel-btn,
.item-card__button,
.item-card__button,
.listing-tabs__nav .nav-link,
#myTab .nav-link,
.header-btn,
.cart-menu__clear,
.notif-menu__clear,
.cart-menu__step,
.cart-menu__remove,
.auth-panel__user,
.login-modal__close {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    border-radius: var(--r-md);
    font-weight: 600;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background var(--tr-btn), border-color var(--tr-btn), color var(--tr-btn), box-shadow var(--tr-btn), transform var(--tr-btn);
}

.user-panel .site-header__auth a.login-btn:focus-visible,
.login-modal__submit:focus-visible,
.auth-menu__logout:focus-visible,
.cart-menu__checkout:focus-visible,
.slider-panel-btn:focus-visible,
.item-card__button:focus-visible,
.item-card__button:focus-visible,
.listing-tabs__nav .nav-link:focus-visible,
#myTab .nav-link:focus-visible,
.header-btn:focus-visible,
.cart-menu__clear:focus-visible,
.notif-menu__clear:focus-visible,
.cart-menu__step:focus-visible,
.cart-menu__remove:focus-visible,
.auth-panel__user:focus-visible,
.login-modal__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(87,176,255,.25);
}

/* ── Solid Primary CTA ── */
.login-modal__submit,
.cart-menu__checkout,
.slider-panel-btn {
    background: var(--c-primary);
    color: #0a0f18;
    border: none;
    box-shadow: none;
}
.login-modal__submit:hover,
.cart-menu__checkout:hover,
.slider-panel-btn:hover {
    background: var(--c-primary-hover);
    color: #0a0f18;
    box-shadow: none;
}
.login-modal__submit:active,
.cart-menu__checkout:active,
.slider-panel-btn:active {
    background: var(--c-primary-active);
    transform: scale(0.97);
}

/* ── Ghost / Surface ── */
.cart-menu__clear,
.notif-menu__clear,
.listing-tabs__nav .nav-link,
#myTab .nav-link,
.login-modal__close {
    background: transparent;
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
    box-shadow: none;
}
.cart-menu__clear:hover,
.notif-menu__clear:hover,
.listing-tabs__nav .nav-link:hover,
#myTab .nav-link:hover,
.listing-tabs__nav .nav-link:focus-visible,
#myTab .nav-link:focus-visible,
.login-modal__close:hover {
    background: var(--ov-06);
    color: var(--c-text);
    border-color: var(--c-border-hover);
    box-shadow: none;
}

/* ── Micro / Stepper ── */
.cart-menu__step {
    background: var(--c-surface);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    box-shadow: none;
}
.cart-menu__step:hover {
    background: var(--c-surface-hover);
    border-color: var(--c-border-hover);
    box-shadow: none;
}

/* ── Soft Primary Card Buttons ── */
.item-card__button,
.item-card__button {
    background: rgba(87,176,255,.12);
    color: var(--c-primary);
    border: none;
    box-shadow: none;
}
.item-card__button:hover,
.item-card__button:hover {
    background: rgba(87,176,255,.22);
    color: #fff;
    box-shadow: none;
}

.login-modal__submit {
    min-height: 48px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    border-radius: 10px;
    gap: 8px;
}

.login-modal__submit:hover {
    box-shadow: 0 4px 20px rgba(87,176,255,.25);
}

.login-modal__footer {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    color: #95a5bd;
    font-size: 13px;
}

.login-modal__feedback {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
}
.login-modal__feedback:not([hidden]) {
    display: block;
}
.login-modal__feedback--error {
    background: rgba(248,113,113,.1);
    border: 1px solid rgba(248,113,113,.25);
    color: #fca5a5;
}
.login-modal__feedback:not(.login-modal__feedback--error) {
    border: 1px solid rgba(87,176,255,.2);
    background: rgba(87,176,255,.08);
    color: #cfe8ff;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .login-modal__body {
        padding: 28px 20px 24px;
    }
    .login-modal__social {
        flex-direction: column;
    }
    .login-modal__title {
        font-size: 20px;
    }
}

.user-panel .site-header__auth {
    display: flex;
    text-align: center;
    align-items: center;
}

.auth-panel {
    position: relative;
    gap: 10px;
}

.auth-panel__user {
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
    background: transparent;
    border: none;
    box-shadow: none;
    color: white;
    border-radius: var(--r-md);
}
.auth-panel__user:hover {
    background: var(--ov-06);
    box-shadow: none;
}

.auth-panel__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(87,176,255,.4);
    flex-shrink: 0;
}

.auth-panel__user i {
    font-size: 15px;
    color: #8bc7ff;
}

.auth-panel__caret {
    font-size: 11px !important;
    color: #dbe8ff !important;
}

.auth-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 220px;
	padding: 12px;
	border: 1px solid var(--ov-12);
	background: #1a1d24;
	box-shadow: 0 18px 40px rgba(0,0,0,.34);
	z-index: 35;
	border-radius: 10px;
}

.auth-menu__section + .auth-menu__section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ov-06);
}

.auth-menu__label {
    display: block;
    margin-bottom: 4px;
    color: var(--c-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.user-panel .site-header__auth a.login-btn {
    gap: 10px;
    margin-right: 0;
    font-size: 13px;
    min-height: 44px;
    padding: 10px 18px;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--c-text-muted);
    border-radius: var(--r-md);
}
.user-panel .site-header__auth a.login-btn:hover {
    background: var(--ov-06);
    color: var(--c-text);
    box-shadow: none;
}
.user-panel .site-header__auth a i {
    color: #fff;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 0;
}

.auth-menu__logout {
    background: transparent;
    color: var(--c-danger);
    border: none;
    box-shadow: none;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 12px 18px;
    font-size: 13px;
    text-align: center;
}

.auth-menu__logout:hover {
    background: rgba(248,113,113,.08);
    color: var(--c-danger-hover);
    box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

.auth-menu__nav {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ov-06);
    gap: 2px;
}

.auth-menu__nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    color: #cfe8ff;
    font-size: 13px;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.18s ease, color 0.18s ease;
}

.auth-menu__nav-item:hover {
    background: rgba(87,176,255,.12);
    color: #fff;
}

.auth-menu__nav-item i {
    font-size: 15px;
    color: #8bc7ff;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.cart-panel {
    position: relative;
}

.cart-menu {
    --cart-menu-gap: 16px;
    position: fixed;
    top: var(--cart-menu-gap);
    right: var(--cart-menu-gap);
    bottom: var(--cart-menu-gap);
    width: min(390px, calc(100vw - 16px));
    max-width: 100vw;
    height: auto;
    max-height: none;
    padding: 22px 18px max(18px, env(safe-area-inset-bottom));
    border: 1px solid var(--ov-07);
    background:#16181f;
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    box-shadow: -24px 0 70px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.035);
    border-radius: 12px;
    z-index: 1051;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform 180ms ease, opacity 180ms ease, visibility 180ms ease;
}

body > .cart-menu {
    position: fixed;
}

#cartMenu[hidden] {
    display: flex !important;
    transform: translateX(calc(100% + 20px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

html.cart-drawer-open,
body.cart-drawer-open {
    overflow-x: hidden;
    overscroll-behavior: auto;
}

body.cart-drawer-open::after {
    display: none;
}

.cart-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0 14px;
    border-bottom: 1px solid rgba(255,255,255,.045);
}

.cart-menu__header strong {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}

.cart-menu__clear {
    min-height: 30px;
    font-size: 10px;
    padding: 5px 9px;
    margin-left: auto;
    color: rgba(203,218,241,.68);
    background: transparent;
    border-color: transparent;
}

.cart-menu__close {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    padding: 0;
    color: rgba(203,218,241,.72);
    background: transparent;
    border-color: transparent;
}

.cart-menu__close .material-symbols-outlined {
    font-size: 20px;
}

.cart-menu__close:hover {
    color: #fff;
}

.cart-menu__list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
    padding: 14px 2px 18px 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    @supports (scrollbar-color: rgba(77,166,255,.32) transparent) {
        scrollbar-color: rgba(77,166,255,.32) transparent;
    }
    @supports (scrollbar-width: thin) {
        scrollbar-width: thin;
    }
}

.cart-menu__list::-webkit-scrollbar {
    width: 6px;
}

.cart-menu__list::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 999px;
}

.cart-menu__list::-webkit-scrollbar-thumb {
    background: rgba(77,166,255,.45);
    border-radius: 999px;
}

.cart-menu__item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    min-height: 43px;
}

.cart-menu__thumb {
    width: 42px;
    height: 42px;
    overflow: hidden;
    border: 1px solid var(--ov-08);
    background: var(--ov-04);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Görseli olmayan sepet kalemi için ikon fallback */
.cart-menu__thumb > .material-symbols-outlined {
    font-size: 22px;
    color: rgba(219,232,255,.5);
}

.cart-menu__content,
.notif-item__body,
.mob-drawer__account-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cart-menu__title {
    color: rgba(249,251,255,.96);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.28;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cart-menu__title-link {
    color: inherit;
    text-decoration: none;
}

.cart-menu__title-link:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cart-menu__meta {
    color: rgba(150,171,199,.92);
    font-size: 11px;
}

.cart-menu__qty {
    color: var(--c-primary);
    font-size: 12px;
    font-weight: 800;
}

.cart-menu__actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 7px;
}

.cart-menu__step,
.cart-menu__remove {
    width: 24px;
    height: 24px;
    font-size: 12px;
    padding: 0;
    border: 1px solid rgba(87,104,130,.42);
    border-radius: 3px;
    background: rgba(8,12,18,.18);
    color: rgba(219,232,255,.78);
}

.cart-menu__remove {
    border: none;
    box-shadow: none;
    color: #ff9cb0;
    border-color: transparent;
    background: transparent;
}

.cart-menu__remove:hover {
    box-shadow: none;
    background: linear-gradient(135deg, rgba(255,114,144,.14) 0%, var(--ov-04) 100%);
    border-color: rgba(255,156,176,.28);
}

.cart-menu__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    flex: 0 0 auto;
    padding: 18px 0 3px;
    margin-top: 0;
    border-top: 1px solid rgba(255,255,255,.045);
    background: transparent;
}

.cart-menu__summary {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

.cart-menu__summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.cart-menu__summary-row span {
    color: rgba(150,171,199,.78);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    white-space: nowrap;
}

.cart-menu__summary-row strong {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.cart-menu__summary-row--total {
    padding-top: 0;
    border-top: 0;
}

.cart-menu__summary-row--total strong {
    font-size: 14px;
    color: #4da6ff;
}

.cart-menu__checkout {
    min-height: 44px;
    gap: 7px;
    padding: 0 15px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: none;
}

.cart-menu__checkout::before {
    content: "shopping_cart";
    font-family: 'Material Symbols Outlined';
    font-size: 18px;
    line-height: 1;
    font-weight: normal;
    letter-spacing: normal;
    text-transform: none;
}

.cart-menu__empty {
    padding: 6px 0 2px;
    color: #96abc7;
    font-size: 13px;
}

@media (max-width: 575.98px) {
    .cart-menu {
        --cart-menu-gap: 10px;
        top: var(--cart-menu-gap);
        left: auto;
        right: var(--cart-menu-gap);
        bottom: var(--cart-menu-gap);
        width: min(360px, calc(100vw - (var(--cart-menu-gap) * 2)));
        height: auto;
        max-height: none;
        padding: 16px;
    }

    .cart-menu__list {
        max-height: none;
    }

    .cart-menu__footer {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .cart-menu__checkout {
        width: 100%;
    }
}

.user-panel,
.sp-hero__form,
.pd-hdr__rating {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Lang Selector */
.lang-selector {
    position: relative;
}
.lang-selector__toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--r-md, 10px);
    background: transparent;
    color: #dbe8ff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tr, 160ms ease), border-color var(--tr, 160ms ease), color var(--tr, 160ms ease);
    white-space: nowrap;
}
.lang-selector__toggle:hover {
    color: #fff;
    background: var(--ov-06);

}
.lang-selector__toggle .bi-chevron-down {
    font-size: 10px;
    transition: transform .2s;
    color: #64748b;
}
.lang-selector.open .lang-selector__toggle .bi-chevron-down {
    transform: rotate(180deg);
    color: #fac850;
}

.lang-flag {
    border-radius: 2px;
    vertical-align: middle;
    flex-shrink: 0;
}
.lang-selector__menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 100%;
    background: #1a1d24;
    border: 1px solid var(--ov-12);
    border-radius:10px;
    overflow: hidden;
    z-index: 1050;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.lang-selector__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    text-align: left;
}
.lang-selector__item:hover {
    background: rgba(87,176,255,.1);
    color: var(--c-primary);
}
.lang-selector__item.active {
    color: var(--c-primary);
    background: rgba(87,176,255,.06);
}

.header-btn {
    gap: 7px;
    font-size: 13px;
    min-height: 44px;
    padding: 10px 16px;
    white-space: nowrap;
    color: #dbe8ff;
}

.header-btn--wallet {
    flex-shrink: 0;
    height: 32px;
    padding: 0;
    font-size: 12px;
    border-radius: 11px;
    gap: 10px;
    background: none;
    
    color: #d9f3e5;
    box-shadow: none;
    cursor: default;
}

.header-btn--wallet:not(.header-btn--wallet--guest) {
    -webkit-user-select: text;
    user-select: text;
}

.header-btn--wallet__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(124,219,165,.23);
    border-radius: 9px;
    background: linear-gradient(135deg, #23553e, #173529 74%);
    box-shadow: inset 1px 1px 0 rgba(155,243,197,.18);
}

.header-btn--wallet__icon .material-symbols-outlined {
    font-size: 20px;
    color: #9bf3c5;
}

.header-btn--wallet__info {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 68px;
    padding-right: 12px;
    line-height: 1.2;
}

.header-btn--wallet__info::after {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: 0;
    width: 1px;
    background: rgba(139,190,161,.28);
}

.header-btn--wallet__label {
    font-size: 9px;
    font-weight: 500;
    color: #96b6a4;
}

.header-btn--wallet__bal {
    font-size: 14px;
    line-height: 1.1;
    font-weight: 800;
    color: #34d399;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.3px;
}

.header-btn--wallet__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(78,209,143,.55);
    border-radius: 8px;
    background: linear-gradient(135deg, #117e4e, #09643e);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px rgba(16,150,92,.12);
    transition: background var(--tr-btn), border-color var(--tr-btn), transform var(--tr-btn), box-shadow var(--tr-btn);
}

.header-btn--wallet__cta .material-symbols-outlined {
    font-size: 18px;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.header-btn--wallet__cta:hover {
    border-color: rgba(151,239,188,.7);
    background: linear-gradient(135deg, #138452, #0b7447);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 5px 14px rgba(16,150,92,.2);
}

.header-btn--wallet__cta:focus-visible {
    outline: 2px solid #9bf3c5;
    outline-offset: 2px;
}

.header-btn--cart {
    position: relative;
    padding: 10px 14px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.header-btn--cart i {
    font-size: 18px;
    color: #cfd6e4;
}

.header-btn--cart:hover {
    background: var(--ov-08);
    border-color: var(--ov-12);
    box-shadow: none;
}

/* Notification panel */
.notif-panel {
    position: relative;
}

.header-btn--notif {
    position: relative;
    padding: 10px 14px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.header-btn--notif i {
    font-size: 18px;
    color: #cfd6e4;
}

.header-btn--notif:hover {
    background: var(--ov-08);
    border-color: var(--ov-12);
    box-shadow: none;
}

.notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ff5c75;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 8px;
    text-align: center;
}

.notif-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ov-08);
}

.notif-menu__header strong {
    color: #fff;
    font-size: 14px;
}

.notif-menu__clear {
    font-size: 12px;
    padding: 6px 10px;
}

.notif-menu__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 8px;
    max-height: 280px;
    overflow-y: auto;
}
@supports (scrollbar-width: thin) {
    .notif-menu__list {
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,.18) transparent;
    }
}
.notif-menu__list::-webkit-scrollbar {
    width: 6px;
}
.notif-menu__list::-webkit-scrollbar-track {
    background: transparent;
}
.notif-menu__list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.16);
    border-radius: 8px;
}
.notif-menu__list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.28);
}

.notif-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.notif-item:hover {
    background: var(--ov-04);
}

.notif-item--read {
    opacity: 0.5;
}

.notif-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 16px;
    flex-shrink: 0;
}

.notif-item__icon--success {
    background: rgba(72,199,116,.15);
    color: #48c774;
}

.notif-item__icon--info {
    background: rgba(87,176,255,.15);
    color: var(--c-primary);
}

.notif-item__title {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.notif-item__text {
    color: #96abc7;
    font-size: 12px;
    line-height: 1.4;
}

.notif-item__time {
    color: #5a7a9a;
    font-size: 11px;
    margin-top: 2px;
}

.notif-menu__footer {
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--ov-08);
    text-align: center;
}

.notif-menu__all {
    font-size: 12px;
    color: var(--c-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.notif-menu__all:hover {
    color: #79c6ff;
}

.cart-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--c-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 8px;
    text-align: center;
}

/* Adet 0 ise baloncuğu gizle. !important: floating/mobil sürümlerdeki
   display:inline-flex tanımının [hidden] özniteliğini ezmesini engeller. */
.cart-count[hidden],
.notif-badge[hidden] {
    display: none !important;
}

section.slider .section-shell {
    padding-top: 0;
    padding-bottom: 0;
    border: 0;

}

/* ===== SITE NAV ===== */
.site-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.site-nav, .header-nav {

	padding: 6px 0px;
}

header .site-header__logo img {
    width: auto;
    height: 30px;
}

.site-nav .nav,
.header-nav .nav {
    flex: 1;
}

.site-nav .nav > ul,
.header-nav .nav > ul {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 2px;
}

.site-nav .nav > ul > li,
.header-nav .nav > ul > li {
    display: block;
    flex: 0 0 auto;
}

.site-nav .nav ul li a,
.header-nav .nav ul li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 13px;
    color: rgba(200,215,240,.7);
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
}

.site-nav .nav ul li a i,
.header-nav .nav ul li a i {
    font-size: 13px;
    opacity: 0.75;
}

.site-nav .nav ul li a:hover,
.header-nav .nav ul li a:hover,
.site-nav .nav ul li.active > a,
.header-nav .nav ul li.active > a {
    color: #fff;
    background: rgba(87,176,255,.1);
}

.site-nav .nav ul li.active > a,
.header-nav .nav ul li.active > a {
    color: var(--c-primary);
    background: rgba(87,176,255,.12);
}

.site-nav .nav ul li.active > a i,
.header-nav .nav ul li.active > a i {
    opacity: 1;
}

/* Nav right side badge */
.site-nav__right {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.site-nav__promo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 5px 12px;
    border-radius: 20px;
    color: var(--c-warning);
    background: rgba(251,191,36,.08);
    border: 1px solid rgba(251,191,36,.2);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.site-nav__promo:hover {
    background: rgba(251,191,36,.15);
    border-color: rgba(251,191,36,.35);
    color: var(--c-warning);
}

/* Header promo badge renk varyantları (badge_color seçimi) */
.site-nav__promo.badge-primary {
    color: #3b82f6;
    background: rgba(59,130,246,.08);
    border-color: rgba(59,130,246,.2);
}
.site-nav__promo.badge-primary:hover {
    background: rgba(59,130,246,.15);
    border-color: rgba(59,130,246,.35);
    color: #3b82f6;
}

.site-nav__promo.badge-success {
    color: #4ade80;
    background: rgba(74,222,128,.08);
    border-color: rgba(74,222,128,.2);
}
.site-nav__promo.badge-success:hover {
    background: rgba(74,222,128,.15);
    border-color: rgba(74,222,128,.35);
    color: #4ade80;
}

.site-nav__promo.badge-danger {
    color: var(--c-danger-hover);
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.2);
}
.site-nav__promo.badge-danger:hover {
    background: rgba(239,68,68,.15);
    border-color: rgba(239,68,68,.35);
    color: var(--c-danger-hover);
}

.site-nav__promo.badge-warning {
    color: var(--c-warning-hover);
    background: rgba(245,158,11,.08);
    border-color: rgba(245,158,11,.2);
}
.site-nav__promo.badge-warning:hover {
    background: rgba(245,158,11,.15);
    border-color: rgba(245,158,11,.35);
    color: var(--c-warning-hover);
}

.site-nav__promo.badge-info {
    color: #38bdf8;
    background: rgba(56,189,248,.08);
    border-color: rgba(56,189,248,.2);
}
.site-nav__promo.badge-info:hover {
    background: rgba(56,189,248,.15);
    border-color: rgba(56,189,248,.35);
    color: #38bdf8;
}

.site-nav__promo.badge-light {
    color: #cbd5e1;
    background: rgba(203,213,225,.1);
    border-color: rgba(203,213,225,.24);
}
.site-nav__promo.badge-light:hover {
    background: rgba(203,213,225,.18);
    border-color: rgba(203,213,225,.4);
    color: #cbd5e1;
}

.site-nav__promo.badge-dark {
    color: #94a3b8;
    background: rgba(15,23,42,.35);
    border-color: rgba(148,163,184,.25);
}
.site-nav__promo.badge-dark:hover {
    background: rgba(15,23,42,.5);
    border-color: rgba(148,163,184,.4);
    color: #94a3b8;
}
.nav-cat {
    display: flex;
    align-items: initial;
    justify-content: center;

}
.nav-cat > a {
    padding: 12px 0;
    width: 100%;
    font-size: 14px;
}
section.slider img {
    width: 100%;
}

section.picture img {
    width: 100%;
    background: #efefef;
    object-fit: contain;
    object-position: center;
    padding: 2rem;
}

.account-section .account-card {
    position: relative;
    background: radial-gradient(farthest-corner at 50% 50%, #30343f 0%, #1e212b 100%);
    overflow: hidden;
}
.account-section .account-card.steam {
	background: radial-gradient(farthest-corner at 50% 50%,#1a9fff 0%, #0c4d7c 100%);
}
.account-section .account-card.google {
	background: radial-gradient(farthest-corner at 50% 50%, #fff 0%, #9f9f9f 100%);
}
.account-section .account-card.xbox {
	background: radial-gradient(farthest-corner at 50% 50%, #107c10 0%, #074207 100%);
}
.account-section .account-card.playstation {
	background: radial-gradient(farthest-corner at 50% 50%, #0070cc 0%, #00437a 100%);
}

.account-section .account-card.apple {
	position: relative;
	background: radial-gradient(farthest-corner at 50% 50%, #fff 0%, #9f9f9f 100%);
	overflow: hidden;
}

.row.big .account-card {
	border-radius: 12px;
}

.account-section figure,
.accounts figure {
    position: relative;
    margin: 0;
    padding: 3rem;
}
.account-section figure:hover > img,
.accounts figure:hover > img {
    transform: scale(1.1);
}
.account-section figure > img, .accounts figure > img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	object-position: center;
	transition: all ease-in-out .2s;
	z-index: 1;
	display: block;
	position: relative;
	padding: 1rem;
	filter: drop-shadow(0px 10px 8px #00000073);
}
 .accounts .row.small figure > img:last-child {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    transition: all ease-in-out .2s;
    position: absolute;
    top: 0;
    z-index: 0;
    padding: 0;
    opacity: 0.2;
}

.collapse-card figure {
    margin: 0;
    transition: all ease-in-out .3s;
    z-index: 1;
    position: relative;
}
.collapse-card {
	position: relative;
	transition: all ease-in-out .2s;
	background: linear-gradient(135deg, rgba(87,176,255,.18) 0%, rgba(87,176,255,0) 38%), radial-gradient(circle at 20% 0px, #3a4150 0%, #202532 55%, #171b24 100%);
	overflow: hidden;
	isolation: isolate;
}

.collapse-card:hover {
    z-index: 1;
    box-shadow: 0 0 70px 0 #00000024;
    transform: scale(1.02);

}
.collapse-card figure img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    object-position: center;

}
/* ========== FOOTER ========== */
footer {
    position: relative;
    display: block;
    background: #0d0f16;
    border-top: 1px solid var(--ov-06);
}

.footer-main {
    padding: 56px 0 32px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
}

/* Brand column */
.footer-brand-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-brand-logo img {
    height: 36px;
    width: auto;
}

.footer-brand-desc {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,.45);
    margin: 0;
    max-width: 280px;
}

.footer-social-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.footer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 15px;
    color: rgba(255,255,255,.5);
    background: var(--ov-05);
    border: 1px solid var(--ov-08);
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.footer-social-btn:hover {
    transform: translateY(-2px);
}

.footer-social-btn.discord:hover   { background: rgba(88,101,242,.18); border-color: #5865F2; color: #5865F2; }
.footer-social-btn.youtube:hover   { background: rgba(255,0,0,.14); border-color: #ff0000; color: #ff0000; }
.footer-social-btn.instagram:hover { background: rgba(225,48,108,.14); border-color: #E1306C; color: #E1306C; }
.footer-social-btn.twitter:hover   { background: var(--ov-08); border-color: rgba(255,255,255,.3); color: #fff; }
.footer-social-btn.tiktok:hover    { background: rgba(233,233,233,.08); border-color: rgba(255,255,255,.3); color: #fff; }

/* Links columns */
.footer-links-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-col-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    margin: 0;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links li a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: rgba(255,255,255,.55);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links li a i {
    font-size: 12px;
    opacity: 0.7;
    flex-shrink: 0;
}

.footer-links li a:hover {
    color: var(--c-primary);
}

.footer-links li a:hover i {
    opacity: 1;
}

/* Payment row */
.footer-payments {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--ov-07);
}

.footer-payments__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #4ade80;
    letter-spacing: 0.3px;
    margin-right: 8px;
}

.footer-payments__badges,
.sp-chips,
.blog-filter,
.survey-choice-list--inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    color: rgba(255,255,255,.55);
    background: var(--ov-04);
    border: 1px solid rgba(255,255,255,.09);
}

.payment-badge__logo {
    height: 18px;
    width: auto;
    display: block;
}

/* Bottom bar */
.footer-bottom {
    padding: 16px 0;
    border-top: 1px solid var(--ov-06);
}

.footer-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-bottom__copy {
    font-size: 12px;
    color: rgba(255,255,255,.3);
    margin: 0;
}

.footer-bottom__links {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-bottom__links li a {
    font-size: 12px;
    color: rgba(255,255,255,.35);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-bottom__links li a:hover {
    color: var(--c-primary);
}
.footer-bottom ul li a {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    transition: color 0.2s;
}
.footer-bottom ul li a:hover {
    color: var(--c-primary);
}

.collapse-card article {
    position: relative;
    padding: 14px 16px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: linear-gradient(120deg, #035db5, #0087ff);
}
.collapse-card article::after {
    content: "";
    position: absolute;
    background: linear-gradient(to right,transparent,rgba(255,255,255,.36),transparent);
    top: 0px;
    left: 0;
    width: 100%;
    height: 1px;
}
.collapse-card h6 {
    text-align: left;
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    margin: 0;
}

.item-card__button {
    align-self: flex-end;
    margin-top: auto;
}

.last-listings-section .item-card__button {
    margin-top: 0;
}

.item-card__button.is-added {
    background: rgba(52,211,153,.15);
    color: var(--c-success);
    border-color: rgba(52,211,153,.3);
}
.mySwiper2 {
    -webkit-user-select: none;
    user-select: none;
    padding: 0 20px;
}
.mySwiper2 .swiper-button-next::after, .mySwiper2 .swiper-button-prev::after {
    font-size: 24px;
    font-weight: bolder;
}
.mySwiper2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0px;
    width: 20px;
    height: 100%;
    background: linear-gradient(to right,#10131a 80%,transparent 100%);
    z-index: 2;
}
.mySwiper2::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0px;
    width: 20px;
    height: 100%;
    background: linear-gradient(to left,#10131a 80%,transparent 100%);
    z-index: 2;
}
.mySwiper2 .swiper-wrapper {

    padding: 20px 0px;
}
.mySwiper2 img {
    border-radius: 50%;
    box-shadow: 0px 10px 10px -8px #00000082;
}
.slider .section-shell{
    padding: 0;

}

.swiper-button-next, .swiper-button-prev {
    cursor: pointer;
    color: var(--swiper-navigation-color,#ff596d);
}

.hero-side-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0;
    text-decoration: none;
    border: 1px solid var(--ov-08);
    border-radius: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.hero-side-card__bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform .4s ease, filter .4s ease;
}
.hero-side-card:hover .hero-side-card__bg {
    transform: scale(1.06);
    filter: brightness(1.15);
}

.hero-side-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px;
    width: 100%;
    background: linear-gradient(to top, rgba(10,14,22,.92) 0%, rgba(10,14,22,.6) 60%, transparent 100%);
}

.hero-side-card--market {
    background: #0d1018;
}
.hero-side-card--currency {
    background: #0d1018;
}
.hero-side-card:hover {
    border-color: rgba(255,255,255,.2);
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
}

.hero-side-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 20px;
    flex-shrink: 0;
}

.hero-side-card--market .hero-side-card__icon {
    background: rgba(87,176,255,.15);
    color: var(--c-primary);
}

.hero-side-card--currency .hero-side-card__icon {
    background: rgba(255,209,102,.15);
    color: var(--c-gold);
}

.hero-side-card__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hero-side-card__body strong {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.hero-side-card__body span {
    font-size: 12px;
    color: rgba(203,220,255,.6);
    line-height: 1.5;
}

.hero-side-card__arrow {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 14px;
    color: rgba(255,255,255,.3);
    transition: color 0.2s ease, transform 0.2s ease;
}

.hero-side-card:hover .hero-side-card__arrow {
    color: rgba(255,255,255,.7);
    transform: translateX(3px);
}

.slider-accordion {
    --slider-gap: 8px;
    --slider-preview-width: 150px;
    --slider-preview-total-width: calc(var(--slider-preview-width) * 4);
    --slider-gap-total-width: calc(var(--slider-gap) * 4);
    --slider-panel-width: calc(100% - var(--slider-preview-total-width) - var(--slider-gap-total-width));
    --slider-active-accent: #57b0ff;
    display: flex;
    gap: var(--slider-gap);
    height: 420px;
    align-items: stretch;
    width: 100%;
    padding: 0;
}

.slider-accordion-item + .slider-accordion-item {
    border-top: 0;
}

/* Slider panel content */
.slider-accordion-panel {
    width: 100%;
    min-width: 100%;
    height: 100%;
    position: relative;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
}

.slider-accordion-panel img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}

.slider-panel-content {
    position: absolute;
    inset: 0;
    width: var(--slider-panel-width);
    min-width: var(--slider-panel-width);
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 34px 40px;
    background: #05080f;
    overflow: hidden;
    isolation: isolate;
}

.slider-panel-img {
    position: absolute;
    inset: 0;
    width: var(--slider-panel-width);
    min-width: var(--slider-panel-width);
    height: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: translate3d(22px, 0, 0) scale(1.06);
    filter: saturate(1.18) contrast(1.08) blur(8px);
    z-index: 0;
    transition:
        opacity .54s ease,
        transform .82s cubic-bezier(.22, 1, .36, 1),
        filter .72s ease;
    will-change: opacity, transform, filter;
}

.slider-panel-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    justify-content: flex-end;
    width: 440px;
    max-width: 440px;
    flex: 0 0 auto;
    transform: none;
}

.slider-panel-text > * {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
        opacity .28s ease,
        transform .46s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.slider-accordion-item.active .slider-panel-text > * {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.slider-accordion-item.active .slider-panel-text > :nth-child(1) {
    transition-delay: .48s;
}

.slider-accordion-item.active .slider-panel-text > :nth-child(2) {
    transition-delay: .56s;
}

.slider-accordion-item.active .slider-panel-text > :nth-child(3) {
    transition-delay: .64s;
}

.slider-accordion-item.active .slider-panel-text > :nth-child(4) {
    transition-delay: .72s;
}

.slider-panel-title {
    margin: 0;
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 800;
    color: #fff;
    letter-spacing: 0;
    line-height: .98;
    text-transform: uppercase;
    padding-top: 8px;
}

.slider-panel-title.is-split {
    overflow: hidden;
}

.slider-panel-title__word {
    display: inline-block;
    white-space: nowrap;
}

.slider-panel-title__char {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, .55em, 0) rotateX(58deg);
    transform-origin: 50% 100%;
    filter: blur(7px);
    transition:
        opacity .28s ease,
        transform .58s cubic-bezier(.16, 1, .3, 1),
        filter .42s ease;
    transition-delay: 0s;
    will-change: opacity, transform, filter;
}

.slider-accordion-item.active .slider-panel-title__char {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0);
    filter: blur(0);
    transition-delay: calc(.54s + (var(--char-index) * 24ms));
}

.slider-panel-desc {
    margin: 0;
    font-size: 15px;
    color: #b8c3d8;
    line-height: 1.6;
    max-width: 360px;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}

.slider-panel-btn {
    gap: 6px;
    min-height: 40px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 10px;
    color: #0e1014;
    border: 0;
    background: linear-gradient(135deg, var(--slider-active-accent), var(--c-warning-hover));
    background: linear-gradient(135deg, color-mix(in srgb, var(--slider-active-accent) 88%, #ffffff 12%), color-mix(in srgb, var(--slider-active-accent) 72%, var(--c-warning-hover) 28%));
    box-shadow: none;
    transition:
        opacity .28s ease,
        transform .46s cubic-bezier(.22, 1, .36, 1),
        background .2s ease,
        color .2s ease,
        filter .2s ease;
}

.slider-panel-btn:hover {
    color: #0e1014;
    filter: brightness(1.1);
    box-shadow: none;
    transform: translateY(-1px);
}

.slider-accordion-item .slider-panel-text > .slider-panel-btn.btn-o {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    color: #0e1014;
    border: 0;
    background: linear-gradient(135deg, var(--slider-active-accent), var(--c-warning-hover));
    background: linear-gradient(135deg, color-mix(in srgb, var(--slider-active-accent) 88%, #ffffff 12%), color-mix(in srgb, var(--slider-active-accent) 72%, var(--c-warning-hover) 28%));
    box-shadow: none;
    filter: none;
    transition:
        opacity .28s ease,
        transform .46s cubic-bezier(.22, 1, .36, 1),
        background .2s ease,
        color .2s ease,
        filter .2s ease;
}

.slider-accordion-item.active .slider-panel-text > .slider-panel-btn.btn-o {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.slider-accordion-item.active .slider-panel-text > .slider-panel-btn.btn-o:hover,
.slider-accordion-item.active .slider-panel-text > .slider-panel-btn.btn-o:focus-visible {
    color: #0e1014;
    background: linear-gradient(135deg, var(--slider-active-accent), var(--c-warning-hover));
    background: linear-gradient(135deg, color-mix(in srgb, var(--slider-active-accent) 92%, #ffffff 8%), color-mix(in srgb, var(--slider-active-accent) 74%, var(--c-warning-hover) 26%));
    filter: brightness(1.1);
    box-shadow: none;
    transform: translateY(-1px);
}

.slider-accordion-item.active .slider-panel-text > .slider-panel-btn.btn-o:active {
    color: #0e1014;
    filter: brightness(.98);
    background: linear-gradient(135deg, var(--slider-active-accent), var(--c-warning-hover));
    background: linear-gradient(135deg, color-mix(in srgb, var(--slider-active-accent) 82%, #ffffff 8%), color-mix(in srgb, var(--slider-active-accent) 68%, var(--c-warning-hover) 32%));
    transform: scale(.98);
}

.slider-accordion-item {
	position: relative;
	flex-grow: 0;
    flex-shrink: 0;
    flex-basis: var(--slider-preview-width);
    width: auto;
    min-width: 0;
    height: 100%;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 20px 70px rgba(0,0,0,.28);
	overflow: hidden;
	transition:
        flex-basis .72s cubic-bezier(.22, 1, .36, 1),
        border-color .28s ease,
        box-shadow .28s ease;
	cursor: pointer;
    background: #0d111a;
}

.slider-accordion-item:hover {
    border-color: var(--slider-active-accent);
    border-color: color-mix(in srgb, var(--slider-active-accent) 48%, rgba(255,255,255,.14));
    box-shadow: 0 20px 70px rgba(0,0,0,.36);
}

.slider-accordion-item--valorant {
    --slider-preview-bg-start: #3a1020;
    --slider-preview-bg-end: #120810;
    --slider-preview-accent: rgba(255,70,120,.35);
}

.slider-accordion-item--pubg {
    --slider-preview-bg-start: #5f2d10;
    --slider-preview-bg-end: #1a0f0a;
    --slider-preview-accent: rgba(255,169,77,.28);
}

.slider-accordion-item--lol {
    --slider-preview-bg-start: #7a6208;
    --slider-preview-bg-end: #181407;
    --slider-preview-accent: rgba(255,216,87,.28);
}

.slider-accordion-item--mobile-legends {
    --slider-preview-bg-start: #103d68;
    --slider-preview-bg-end: #09131f;
    --slider-preview-accent: rgba(90,190,255,.3);
}

.slider-accordion-item--rise {
    --slider-preview-bg-start: #204715;
    --slider-preview-bg-end: #0b1309;
    --slider-preview-accent: rgba(117,255,117,.26);
}

.slider-accordion-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.slider-accordion-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--slider-preview-width);
    min-width: var(--slider-preview-width);
    max-width: var(--slider-preview-width);
    height: 100%;
    overflow: hidden;
    opacity: 1;
    z-index: 2;
    transition: opacity .42s ease, visibility .42s ease;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    background:
        linear-gradient(180deg, rgba(5,8,15,.1) 0%, rgba(5,8,15,.88) 100%),
        linear-gradient(145deg, var(--slider-preview-bg-start, #1f2a41) 0%, var(--slider-preview-bg-end, #0e1014) 100%);
}

.slider-accordion-preview::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	z-index: 1;
	background: linear-gradient( 180deg, rgba(5,8,15,.18), rgba(5,8,15,.92) );
	pointer-events: none;
}

.slider-accordion-preview img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover !important;
    object-position: center !important;
    filter: saturate(1.02) contrast(1.04);
    opacity: .95;
    transform: scale(1);
    transition:
        opacity .42s ease,
        transform .72s cubic-bezier(.22, 1, .36, 1),
        filter .52s ease;
    will-change: opacity, transform, filter;
}

.slider-preview-label {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: .6px;
    text-transform: uppercase;
    text-align: left;
    -webkit-user-select: none;
    user-select: none;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    opacity: .92;
}

.slider-accordion-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5,8,15,.06) 0%, rgba(5,8,15,.18) 48%, rgba(5,8,15,.62) 100%);
    transition: background .35s ease;
    pointer-events: none;
    z-index: 1;
}

.slider-accordion-item.active {
    flex-basis: var(--slider-panel-width);
    width: auto;
    min-width: 0;
    border-color: var(--slider-active-accent);
    border-color: color-mix(in srgb, var(--slider-active-accent) 58%, rgba(255,255,255,.18));
    box-shadow:
        0 20px 70px rgba(0,0,0,.36),
        0 0 42px rgba(87,176,255,.18);
    box-shadow:
        0 20px 70px rgba(0,0,0,.36),
        0 0 42px color-mix(in srgb, var(--slider-active-accent) 18%, transparent);
}

.slider-accordion-item.active .slider-accordion-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
}

.slider-accordion-item.active .slider-panel-img {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: saturate(1.08) contrast(1.05) blur(0);
    transition-delay: .08s;
}

.slider-accordion-item.active .slider-panel-text {
    opacity: 1;
    transform: none;
}

.slider-panel-img[data-slider-state="open"] {
    width: var(--slider-panel-width);
    min-width: var(--slider-panel-width);
    height: 100%;
    max-height: 100%;
    max-width: none;
    align-self: stretch;
}

.slider-panel-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at 50% 118%, color-mix(in srgb, var(--slider-active-accent) 60%, transparent) 0%, color-mix(in srgb, var(--slider-active-accent) 34%, transparent) 28%, transparent 70%),
        linear-gradient(0deg, color-mix(in srgb, var(--slider-active-accent) 24%, transparent) 0%, transparent 58%),
        linear-gradient(90deg, rgba(8,12,18,.72) 0%, rgba(8,12,18,.42) 36%, rgba(8,12,18,.06) 72%, rgba(8,12,18,.18) 100%),
        linear-gradient(180deg, rgba(8,12,18,.04) 0%, rgba(8,12,18,.3) 100%);
    transition: background .45s ease;
}

.slider-accordion-item.active::after {
    background: rgba(0,0,0,0);
}

.slider-accordion-item.active .slider-accordion-preview {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.slider-accordion-item.active .slider-accordion-preview img {
    opacity: 0;
    transform: translate3d(-12px, 0, 0) scale(1.08);
    filter: saturate(1.18) contrast(1.05) blur(8px);
}

/* Thumbs şeridi (JS üretir) — yalnızca mobilde görünür */
.slider-thumbs {
    display: none;
}

@media (max-width: 767.98px) {

    /* Ana alanda yalnızca aktif slayt görünür */
    .slider-accordion-item {
        display: none;
    }

    .slider-accordion-item.active {
        display: block;
        flex: none;
        width: 100%;
        min-width: 0;
        height: 300px;
        border-radius: 12px;
    }

    .slider-accordion-panel img {
        height: 100%;
    }

    .slider-panel-content {
        width: 100%;
        min-width: 100%;
        padding: 20px;
    }

    .slider-panel-img,
    .slider-panel-img[data-slider-state="open"] {
        width: 100%;
        min-width: 100%;
    }

    .slider-panel-text {
        width: auto;
        max-width: 100%;
        gap: 8px;
    }

    .slider-panel-title {
        font-size: 26px;
    }

    .slider-panel-desc {
        font-size: 13px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .slider-accordion-item.active .slider-panel-text > :nth-child(1) {
        transition-delay: .18s;
    }

    .slider-accordion-item.active .slider-panel-text > :nth-child(2) {
        transition-delay: .24s;
    }

    .slider-accordion-item.active .slider-panel-text > :nth-child(3) {
        transition-delay: .30s;
    }

    .slider-accordion-item.active .slider-panel-text > :nth-child(4) {
        transition-delay: .36s;
    }

    /* ── Thumbs şeridi ── */
    .slider-thumbs {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(96px, 1fr);
        gap: 8px;
        margin-top: 8px;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .slider-thumbs::-webkit-scrollbar {
        display: none;
    }

    .slider-thumb {
        position: relative;
        height: 64px;
        padding: 0;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 10px;
        overflow: hidden;
        background: #0d111a;
        cursor: pointer;
        opacity: .6;
        transition: opacity .25s ease, border-color .25s ease, box-shadow .25s ease;
    }

    .slider-thumb img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slider-thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(5,8,15,.04) 35%, rgba(5,8,15,.8) 100%);
        pointer-events: none;
    }

    .slider-thumb__label {
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 6px;
        z-index: 1;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .3px;
        text-transform: uppercase;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .slider-thumb.active {
        opacity: 1;
        border-color: var(--slider-active-accent, var(--c-primary));
        box-shadow: 0 0 0 1px var(--slider-active-accent, var(--c-primary));
    }
}

@media (prefers-reduced-motion: reduce) {
    .slider-panel-text > *,
    .slider-panel-title__char {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

.wrp{
    position: relative;
}

.floatCard{
    position: absolute;
   visibility: collapse;
    left: 50%;
    top: 0%;
    transform-origin: 50% 100%;
    transition: all ease-in-out .2s;
    opacity: 0;
}
.floatCard.show{
    visibility: visible;
    opacity: 1 !important;

}

.floatCard .collapse-card {
    box-shadow: 20px 20px 10px 0px #0000006b;
    transition: all ease-in-out .2s;
}
.floatCard.show .collapse-card {

    box-shadow: 20px 20px 10px 0px #0000;
}

.card-filter {
    display: flex;
    margin: 0;

}
.card-filter li {
    display: block;
    margin-right: 1rem;

}
.card-filter li a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    transition: all ease-in-out .1s;
    border-radius: 8px;
    border: 1px solid #3b3e49;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.card-filter li a:hover, .card-filter li a.active {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    text-shadow: 0 3px 7px black;
    background: radial-gradient(farthest-corner at 50% 0px, #fc5065 0%, #fe5e73a8 70%);
    border-color: #fc5065;
}

.header-top-top-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 34px;
}

.site-header__topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.headerlink {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header__links > li {
    display: flex;
    align-items: center;
}

.site-header__links .site-header__topbar-action {
    box-sizing: border-box;
    height: 26px;
    gap: 6px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

.site-header__topbar-action i {
    font-size: 13px;
    line-height: 1;
}

.site-header__topbar-action:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.headerlink li a.link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    text-decoration: none;
    color: #7a8099;
    transition: color 0.2s, background 0.2s;
}

.headerlink li a.link i {
    font-size: 11px;
    opacity: 0.8;
}

.headerlink li a.link:hover {
    color: #c8d8ff;
    background: var(--ov-06);
}

.topbar-divider {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,.1);
    margin: 0 6px;
    align-self: center;
}

.topbar-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 3px 9px;
    border-radius: 20px;
    color: #4ade80;
    background: rgba(74,222,128,.08);
    border: 1px solid rgba(74,222,128,.18);
}

.topbar-badge i {
    font-size: 11px;
}

/* Topbar badge renk varyantları (badge_color seçimi) */
.topbar-badge.badge-primary {
    color: #3b82f6;
    background: rgba(59,130,246,.08);
    border-color: rgba(59,130,246,.18);
}

.topbar-badge.badge-success {
    color: #4ade80;
    background: rgba(74,222,128,.08);
    border-color: rgba(74,222,128,.18);
}

.topbar-badge.badge-danger {
    color: var(--c-danger-hover);
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.18);
}

.topbar-badge.badge-warning {
    color: var(--c-warning-hover);
    background: rgba(245,158,11,.08);
    border-color: rgba(245,158,11,.18);
}

.topbar-badge.badge-info {
    color: #38bdf8;
    background: rgba(56,189,248,.08);
    border-color: rgba(56,189,248,.18);
}

.topbar-badge.badge-light {
    color: #cbd5e1;
    background: rgba(203,213,225,.1);
    border-color: rgba(203,213,225,.22);
}

.topbar-badge.badge-dark {
    color: #94a3b8;
    background: rgba(15,23,42,.35);
    border-color: rgba(148,163,184,.25);
}

.header-social {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-social li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: #5a6070;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s, background 0.2s;
}

.header-social li a:hover {
    background: var(--ov-07);
}

.header-social li a[title="Discord"]:hover  { color: #5865F2; }
.header-social li a[title="Facebook"]:hover { color: #1877F2; }
.header-social li a[title="Instagram"]:hover { color: #E1306C; }
.header-social li a[title="TikTok"]:hover   { color: #e9e9e9; }

section.table{
    background: white;
}

/* Son İlanlar & Yayıncılar Sections */
.last-listings-section,
.broadcasters-section {
    position: relative;
}

.broadcaster-card:hover {
    border-color: rgba(87,176,255,.39);
    box-shadow: 0 8px 28px rgba(0,0,0,.45);
    text-decoration: none;
    color: inherit;
}

.broadcaster-card__avatar {
	inset: 0;
	overflow: hidden;
	aspect-ratio: 1;
}
.broadcaster-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.broadcaster-card:hover .broadcaster-card__avatar img {
    transform: scale(1.05);
}

.broadcaster-card__live {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e53e3e;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 3px 8px;
    white-space: nowrap;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(229,62,62,.4);
    z-index: 3;
}

.broadcaster-card__viewers {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.3px;
    background: rgba(0,0,0,.5);
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 3;
}

.broadcaster-card__viewers i {
    font-size: 9px;
}

.broadcaster-card__info {
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px;
	z-index: 2;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: 0px;
}

.broadcaster-card__info h6 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.broadcaster-card__info > span {
    font-size: 11px;
    color: var(--c-primary);
}

.broadcaster-card__followers {
    font-size: 11px;
    color: rgba(203,220,255,.45);
    margin-top: 1px;
}

.broadcaster-card__platform {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,.6);
    margin-top: 4px;
}

.broadcaster-card__platform i {
    font-size: 12px;
}
.confidence-section {
    padding: 60px 0;
}
.confidence-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.confidence-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 28px 16px;
    background: var(--ov-03);
    border: 1px solid var(--ov-06);
    border-radius: 14px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: border-color .3s, background .3s, transform .3s;
}
.confidence-card:hover {
    background: var(--ov-06);
    border-color: rgba(87,176,255,.18);
    transform: translateY(-4px);
}
.confidence-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    font-size: 22px;
    border-radius: 12px;
    flex-shrink: 0;
}
.confidence-card__icon--blue {
    background: rgba(87,176,255,.1);
    border: 1px solid rgba(87,176,255,.2);
    color: var(--c-primary);
}
.confidence-card__icon--green {
    background: rgba(52,211,153,.1);
    border: 1px solid rgba(52,211,153,.2);
    color: var(--c-success);
}
.confidence-card__icon--gold {
    background: rgba(255,209,102,.1);
    border: 1px solid rgba(255,209,102,.2);
    color: var(--c-gold);
}
.confidence-card__icon--purple {
    background: rgba(167,139,250,.1);
    border: 1px solid rgba(167,139,250,.2);
    color: #a78bfa;
}
.confidence-card__icon--pink {
    background: rgba(244,114,182,.1);
    border: 1px solid rgba(244,114,182,.2);
    color: #f472b6;
}
.confidence-card__title {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}
.confidence-card__desc {
    color: var(--c-text-muted, var(--c-text-muted));
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 991.98px) {
    .confidence-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
    .confidence-grid { grid-template-columns: repeat(2, 1fr); }
    .confidence-card { padding: 20px 12px; }
}

.form-container{
    display: block;
}
.form-container h4{
    display: block;
}
.form-container .form{
    display: block;
}
.form-container .form input{
    display: block;
}

.game__cards {
    display: block;
    padding-top: 3rem;
}

.game__cards article{
    display: block;
}
.game__cards article figure{
    display: block;
}
.game__cards article figure img{
    display: block;
}
.game__cards article h2{
    display: block;
}
.game__cards article p{
    display: block;
}

.game__card__container{
    display: block;
}
.game__card__container .game__card {
    background: #1d2630;
    display: flex;
    padding: 0.6rem;
    margin-bottom: 1rem;
}

.game__card__container .game__card figure {
    display: block;
    margin: 0;
}
.game__card__container .game__card figure img{
    display: block;
    width: 80px;
}
.game__card__container .game__card .title {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1rem;
}
.game__card__container .game__card .title h2 {
    display: block;
    font-size: 18px;
    color: white;
}
.game__card__container .game__card .title h6 {
    display: block;
    font-size: 14px;
    font-weight: 400;
    opacity: 0.5;
}
.game__card__container .game__card .price {
    display: block;
    font-size: 18px;
    font-weight: 600;
}

.game__card__container .game__card .price span {
    color: #9e9e9e;
    font-size: 70%;
}
.game__card__container .game__card .buy {
    display: flex;
    align-items: center;
    margin: 0;
}
.game__card__container .game__card .buy a {
    display: block;
    padding: 5px 10px;
    background: #fc586d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 8px;
}

.col-25{
    width: 20%;
}

/* ── Popüler Oyunlar — dikey poster kartlar (baskın renk gradyanı + taşan karakter) ── */
.pop-game-card {
	--accent: 210 30% 60%;
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: 18px;
	overflow: visible;
	transition: transform .35s ease;
}
/* Yuvarlatılmış gradyan yüzey (kırpılır) — baskın renkten merkezi radial parıltı */
.pop-game-card__frame {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
	background:
		radial-gradient(135% 115% at 50% 48%, transparent 56%, rgba(0,0,0,.42)),
		radial-gradient(86% 74% at 50% 42%, hsl(var(--accent) / .36), hsl(var(--accent) / .09) 54%, transparent 80%),
		#0a0d14;
	border: 1px solid var(--ov-06);
	box-shadow: 0 18px 40px rgba(0,0,0,.45);
	transition: box-shadow .35s ease, border-color .35s ease;
}
/* Aksan renkli ince iç kenar parıltısı */
.pop-game-card__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	/* box-shadow: inset 0 0 0 1px hsl(var(--accent) / .22); */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
	pointer-events: none;
	transition: box-shadow .35s ease;
}
.pop-game-card__img {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
	transform-origin: center top;
	transition: transform .6s ease;
	-webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0,0,0,.85) 60%, transparent 92%);
	mask-image: linear-gradient(to bottom, #000 45%, rgba(0,0,0,.85) 60%, transparent 92%);
}
/* Karakter üst kenardan hafif taşar ve logo alanına doğru yumuşakça kaybolur. */
.pop-game-card--spill .pop-game-card__img {
	left: 50%;
	right: auto;
	top: -4%;
	width: auto;
	max-width: 150%;
	height: 125%;
	object-fit: contain;
	transform: translateX(-50%) translateY(0%);
	filter: drop-shadow(0 16px 22px rgba(0,0,0,.55));
	-webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0,0,0,.85) 58%, transparent 78%);
	mask-image: linear-gradient(to bottom, #000 45%, rgba(0,0,0,.85) 58%, transparent 78%);
}
.pop-game-card__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0 14px 22px;
	text-align: center;
}
.pop-game-card__logo {
	width: auto;
	max-width: 80%;
	max-height: 62px;
	object-fit: contain;
	filter: drop-shadow(0 6px 14px rgba(0,0,0,.6));
	transition: transform .35s ease;
}
.pop-game-card__title {
	margin: 0;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .4px;
	text-shadow: 0 2px 10px rgba(0,0,0,.7);
}

/* Hover */
.pop-game-card:hover {
	transform: translateY(-6px);
}
.pop-game-card:hover .pop-game-card__frame {
	border-color: hsl(var(--accent) / .35);
	box-shadow: 0 26px 54px rgba(0,0,0,.55), 0 12px 32px hsl(var(--accent) / .22);
}
.pop-game-card:hover .pop-game-card__frame::after { box-shadow: inset 0 0 0 1px hsl(var(--accent) / .45); }
.pop-game-card:hover .pop-game-card__img { transform: scale(1.04); }
.pop-game-card--spill:hover .pop-game-card__img { transform: translateX(-50%) translateY(-7px) scale(1.04); }
.pop-game-card:hover .pop-game-card__logo { transform: translateY(-4px) scale(1.04); }

/* Taşan karakterler için kartların üstünde nefes alanı */
.popular_game_sect .row { padding-top: 56px; }
.popgamefav {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    padding: 4px 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.14) transparent;
}

.popgamefav .featured-game-logo {
    --logo-accent: 190, 190, 190;
    display: flex;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    min-height: 84px;
    padding: 16px 18px;
    border: 1px solid var(--ov-06);
    border-radius: 12px;
    background: rgba(255,255,255,.018);
    scroll-snap-align: start;
    transition: border-color .25s ease;
}

.popgamefav .featured-game-logo:is(:hover, :focus-visible) {
    border-color: rgba(var(--logo-accent), .28);
}

.popgamefav .featured-game-logo:focus-visible {
    outline: 2px solid rgba(var(--logo-accent), .65);
    outline-offset: -2px;
}

/* The image keeps its own colors; the sampled accent only lights the card. */
.featured-game-logo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(ellipse at 50% 85%, rgba(var(--logo-accent), .2), transparent 75%),
        linear-gradient(135deg, rgba(var(--logo-accent), .06), transparent 70%);
	transition: opacity .28s ease;
}

.featured-game-logo:hover::before,
.featured-game-logo:focus-visible::before {
	opacity: 1;
}

.featured-game-logo figure {
	margin: 0;
	position: relative;
	display: flex;
    align-items: center;
    justify-content: center;
	width: 100%;
	line-height: 0;
	z-index: 1;
	transition: transform .25s ease;
}

.featured-game-logo:hover figure,
.featured-game-logo:focus-visible figure {
	transform: translateY(-1px) scale(1.04);
}

.featured-game-logo img {
	display: block;
	height: 40px;
	width: 100%;
    max-width: 180px;
    object-fit: contain;
	filter: none;
	opacity: 1;
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .popgamefav .featured-game-logo,
    .featured-game-logo::before,
    .featured-game-logo figure {
        transition: none;
    }
    .featured-game-logo:is(:hover, :focus-visible) figure {
        transform: none;
    }
}

section {
	position: relative;

}
.pt-60 {

	padding-top: 60px;
}
.pb-60 {

	padding-bottom: 60px;
}
footer::before {
	content: "";
	background: linear-gradient(to right,transparent,var(--c-primary), transparent);
	position: absolute;
	width: 70%;
	height: 1px;
	top: 0;
	z-index: 1;
	filter: blur(4px);
	left: 15%;
}

footer::after {
	content: "";
	background: linear-gradient(to right,transparent,var(--c-primary), transparent);
	position: absolute;
	width: 100%;
	height: 1px;
	top: 0;
	z-index: 1;
}

.fav_game_area {
    padding: 12px 0;
    background: transparent;
}

.item-card {
    height: 100%;
    position: relative;
    display: flex;
    isolation: isolate;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--ov-08);
    border-radius: var(--r-md);
    overflow: hidden;
    background: radial-gradient(circle at 50% 120%, #171b21 0%, #0e101400 100%);
    transition: all .25s;
}

.item-card:hover {
    border-color: rgba(87,176,255,.39);
    box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.item-card:hover::before,.item-card:hover::after  {
	opacity: 1;
}
.item-card figure {
    display: block;
    width: 100%;
    min-width: unset;
    aspect-ratio: 1;
    height: auto;
    z-index: 1;
    margin: 0;
    overflow: hidden;
    padding: 12px;
}
.item-card figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--ov-08);
}
.item-card.item-card--sale figure img {
	border: 1px solid rgb(224,45,45);
	box-shadow: 0 0 12px -2px rgba(224,45,45,.6);
}

.item-card article {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
    height: auto;
    padding: 0 12px 12px 12px;
    justify-content: flex-start;
    text-align: left;
}

.item-card article h6 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-card__meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	margin-top: auto;
}

.item-card__price,
.item-card__rating {
	position: static;
	display: flex;
	gap: 3px;
	width: auto;
	height: auto;
	background: transparent;
	clip-path: none;
	opacity: 1;
}

.starmeter {
	display: inline-flex;
	position: relative;
	line-height: 1;
}

.starmeter div {
	display: inline-flex;
}
.starmeter div.str_fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
}

/* Material Symbols star base */
.starmeter .material-symbols-outlined {
	font-size: 14px;
	line-height: 1;
	letter-spacing: 2px;
	font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 20;
}
.starmeter .str .material-symbols-outlined {
	color: rgba(255,255,255,.15);
}
.starmeter .str_fill .material-symbols-outlined {
	color: #ffb703;
}
.detail-tabs__review-stars .starmeter .material-symbols-outlined { font-size: 16px; }
.detail-tabs__review-stars .starmeter .str_fill .material-symbols-outlined { color: #fac850; }
.game-side__badge .starmeter .material-symbols-outlined { font-size: 12px; letter-spacing: 1px; }

.item-card__price {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	justify-content: end;
	flex: 1 0 auto;
}

.item-card__rating {
	align-items: center;
}
.item-card__current,
.item-card__rating span,
.item-card__current > small,
.item-card__rating small {
	position: static;
	display: inline;
	width: auto;
	height: auto;
	background: transparent;
	clip-path: none;
	opacity: 1;
}

.item-card__current {
	font-size: 18px;
	font-weight: 700;
	color: white;
	white-space: nowrap;
}

.item-card__current > small {
	font-size: 12px;
	color: #b0bcc8;
}

.item-card__rating span {
	font-size: 11px;
	letter-spacing: 1px;
	color: #ffb703;
}

.item-card__rating small {
	font-size: 11px;
	color: #8a96a8;
}

.listing-tabs, .item_group_page {
	position: relative;
	-webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
	isolation: isolate;
}

.listing-tabs__nav,
#myTab {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	margin-bottom: 18px;
	border-bottom: 0;
}

.listing-tabs__nav .nav-item,
#myTab .nav-item {
	margin: 0;
}

.listing-tabs__nav .nav-link:disabled,
#myTab .nav-link:disabled {
	opacity: 0.45;
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}

.listing-tabs__panes .tab-pane,
#myTabContent .tab-pane {
	min-height: 100%;
	animation: tabPanelRise 0.35s ease;
}

.listing-tabs__panes .row,
#myTabContent .row {
	--bs-gutter-x: 1rem;
	--bs-gutter-y: 1rem;
}

.listing-tabs__panes .item-card,
#myTabContent .item-card,
.listing-tabs__panes .item-card,
#myTabContent .item-card {
	width: 100%;
}

.listing-tabs__panes .item-card,
#myTabContent .item-card {
	height: 100%;
}

@keyframes tabPanelRise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 991.98px) {
	.listing-tabs,
	.item_group_page {
		padding: 14px;
		border-radius: 22px;
	}

	.listing-tabs__nav ,
	#myTab {
		gap: 8px;
		margin-bottom: 14px;
	}

	.listing-tabs__panes ,
	#myTabContent {
		padding: 16px;
		border-radius: 20px;
	}
}

@media (max-width: 575.98px) {
	.listing-tabs__nav ,
	#myTab {
		flex-direction: column;
	}

	.listing-tabs__nav .nav-link ,
	#myTab .nav-link {
		width: 100%;
		justify-content: flex-start;
	}

	.listing-tabs__panes ,
	#myTabContent {
		padding: 14px;
	}
}

/* =============================================
   INNER PAGES - COMMON
   ============================================= */
.page-hero { padding: 36px 0 28px; background: linear-gradient(135deg, rgba(var(--main--color),0.06) 0%, transparent 60%); border-bottom: 1px solid var(--ov-05); margin-bottom: 32px; }
.page-hero__title { font-size:26px; font-weight:800; color:#fff; margin:0 0 4px; }
.page-hero__desc { font-size:13px; color:var(--c-text-muted); margin:0; }
.sp-cat-item__body,
.sp-item-card__body,
.promo-stats__content { flex: 1; min-width: 0; }
.float-bar { display:flex; align-items:center; gap:6px; font-size:12px; }
.float-bar__track { flex:1; height:4px; background:rgba(255,255,255,.1); border-radius:2px; position:relative; max-width:100px; }
.float-bar__fill { height:100%; background:rgb(var(--main--color)); border-radius:2px; }

/* Kategori navigasyonu — cash ve goldbar şablonlarının ortak bileşeni;
   hangi kategorilerin görüneceğini categories.show_in_category_nav belirler.
   display:flex hiç tanımlı değildi: öğeler inline akıyor, aralarındaki
   boşluk beyaz-boşluk çöküşünden geliyordu — bu yüzden satırlar düzensiz
   sarıyor ve aşağıdaki mobil `flex-wrap` kuralı da etkisiz kalıyordu. */
.category-nav {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    border-bottom:1px solid var(--ov-08);
    padding-bottom:12px;
}
.category-nav__item {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:10px 20px; border-radius:8px; font-size:14px; font-weight:600;
    color:var(--c-text-muted); text-decoration:none;
    background:var(--ov-04); border:1px solid var(--ov-06);
    transition:all .2s;
}
.category-nav__item:hover { color:#fff; background:var(--ov-08); }
.category-nav__item.active {
    color:rgb(var(--main--color)); background:rgba(var(--main--color),0.12);
    border-color:rgba(var(--main--color),0.3);
}

/* Knight Online Cash dynamic color scope */
.product-detail-page--ko-dynamic {
    --hero-top-rgb: 70, 97, 136;
    --hero-bottom-rgb: 88, 64, 98;
    --hero-bottom-cool-rgb: 52, 74, 108;
    --product-accent-rgb: var(--main--color);
}

/* ─── Epin Info Grid (Type / Platform / PIN / Speed / Country / Limit) ─── */
.epin-info-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 14px;
}
.epin-info-grid__cell {
    flex: 1 1 calc(50% - 7px);
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--ov-02);
    border: 1px solid var(--ov-06);
    border-radius: 10px;
}
.epin-info-grid__icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ov-04);
    color: var(--bs-body-color, #cfd3dc);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    overflow: hidden;
}
.epin-info-grid__icon .material-symbols-outlined {
    font-size: 24px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-primary, var(--c-primary));
}
.epin-info-grid__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
	background: white;
}
.epin-info-grid__icon--text {
    background: linear-gradient(180deg, var(--ov-06), var(--ov-02));
    color: #fff;
}
.epin-info-grid__icon--check {
    color: #2ecc71;
}
.epin-info-grid__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.epin-info-grid__label {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    line-height: 1.2;
}
.epin-info-grid__value {
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
    word-break: break-word;
}
.epin-info-grid__value--success {
    color: #2ecc71;
}
@media (max-width: 575.98px) {
    .epin-info-grid__cell {
        flex-basis: 100%;
        min-width: 0;
    }
}
@keyframes discountLeafDrop {
    0% {
        transform: rotateX(0deg) translate3d(0, 0, 2px);
        filter: brightness(1);
    }
    18% {
        transform: rotateX(34deg) translate3d(0, 0, 2px);
        filter: brightness(1);
    }
    46% {
        transform: rotateX(96deg) translate3d(0, 1px, -2px);
        filter: brightness(0.86);
    }
    68% {
        transform: rotateX(146deg) translate3d(0, 2px, -5px);
        filter: brightness(0.9);
    }
    100% {
        transform: rotateX(180deg) translate3d(0, 2px, -6px);
        filter: brightness(1);
    }
}
@keyframes discountBottomCatch {
    0% {
        transform: rotateX(12deg) translateY(-2px);
        filter: brightness(0.72);
    }
    100% {
        transform: rotateX(0deg) translateY(0);
        filter: brightness(1);
    }
}

.cash-card {
    position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:20px 16px; border-radius:var(--r-lg); cursor:pointer;
    background:var(--ov-03); border:2px solid var(--c-border);
    transition:background var(--tr-btn), border-color var(--tr-btn), transform var(--tr-btn), box-shadow var(--tr-btn); text-align:center;
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.cash-card:hover { border-color:rgba(var(--main--color),0.3); background:rgba(var(--main--color),0.05); }
.cash-card.active {
    border-color:var(--c-primary); background:rgba(var(--main--color),0.1);
    box-shadow:none;
}
.cash-card.active::after {
    content:'\2714'; position:absolute; top:8px; right:8px;
    width:22px; height:22px; border-radius:50%;
    background:rgb(var(--main--color)); color:#fff; font-size:12px;
    display:flex; align-items:center; justify-content:center;
}
.cash-card__icon { font-size:28px; color:rgb(var(--main--color)); opacity:.7; }
.cash-card.active .cash-card__icon { opacity:1; }
.cash-card__name { font-size:13px; font-weight:600; color:#c8d6e5; line-height:1.3; }
.cash-card__price { font-size:16px; font-weight:800; color:#fff; }
.cash-card__price small { font-size:12px; font-weight:600; color:var(--c-text-muted); }

@media (max-width: 767.98px) {
    /* Etiket genişlikleri çok değişken ("… Cash" ↔ "… Oyuncu Pazarı");
       serbest sarmada satır sonları tırtıklı kalıyordu. Sabit iki kolon
       kenarları hizalar ve kategori sayısından bağımsız öngörülebilir kalır
       (auto-fit denendi: 560px'te üç kolon üretip 4. butonu yalnız bırakıyor). */
    .category-nav {
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
    .category-nav__item {
        padding:10px 12px;
        font-size:13px;
        text-align:center;
    }
}

/* Çok dar ekranda iki kolon, uzun etiketleri üç satıra kadar sardırıyor. */
@media (max-width: 379.98px) {
    .category-nav { grid-template-columns:minmax(0, 1fr); }
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

/* =============================================
   RESPONSIVE OVERRIDES - NEW PAGES
   ============================================= */

/* ═══════════════════════════════════════════════════════════
   SHARED PAGE BREADCRUMB
   ═══════════════════════════════════════════════════════════ */
.page-breadcrumb {
    position: relative;
    z-index: 2;
    padding: 14px 0;
}
.page-breadcrumb__panel {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    /* Yükseklik/oran referans karta göre: ~1008x52 (oran ~19.4).
       Yazı boyutu bilerek oranla küçülmedi — 68→52 katsayısı (0.765) uygulansa
       12.5px yerine 10px olurdu ve okunmazdı. Ölçeklenen yalnızca geometri. */
    min-height: 52px;
    padding: 10px 18px;
    overflow: hidden;
    /* Kenarlık sitenin kendi nötr token'ı — hiçbir tona kaymaz, her zeminde
       (temalı/temasız) aynı çalışır. */
    border: 1px solid var(--c-border, rgba(255,255,255,.1));
    border-radius: 11px;
    /* Zemin rengi yok: panel sayfanın kendi zemini üzerinde duruyor, yüzeyi
       kenarlık, arkadaki bulanıklık ve üstteki ince iç gölge tanımlıyor.
       (Eskiden #12151f vardı; sayfadan bir tık açık bir yüzey oluşturuyordu.) */
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.page-breadcrumb__list {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.page-breadcrumb__item {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    color: #aebdd2;
    font-size: 12.5px;
    line-height: 1.5;
}
.page-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 30px;
    border-radius: 5px;
    color: inherit;
    text-decoration: none;
}
a.page-breadcrumb__link:hover {
    color: #f0f6ff;
}
a.page-breadcrumb__link:focus-visible {
    outline: 2px solid #64c3ff;
    outline-offset: 4px;
}
.page-breadcrumb__label {
    min-width: 0;
    overflow-wrap: anywhere;
}
.page-breadcrumb__item--game {
    color: #dce7f7;
    font-weight: 600;
}
.page-breadcrumb__item.active {
    color: #36b0fa;
    font-weight: 600;
}
.page-breadcrumb__icon {
    display: block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}
/* Oyunun marka işareti: currentColor ile geldiği için satırın rengini alır,
   sadece bir tık parlak duruyor ki jenerik çizgi ikonların yanında sönük kalmasın.
   Marka dosyası yoksa bileşen hiç basılmaz ve kumanda kolu ikonu devreye girer. */
.page-breadcrumb__brand {
    color: #e6eefb;
}
.page-breadcrumb__separator {
    width: 9px;
    height: 14px;
    margin: 0 14px;
    color: #7c8da3;
}
.page-breadcrumb__home {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid #bdd6ff24;
    border-radius: 50%;
    background: #91b5ec0d;
    color: #bfcfe6;
    box-shadow: 0 1px 8px #05112120, inset 0 1px 0 #d7e8ff0a;
}
.page-breadcrumb__home .page-breadcrumb__icon {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}
@media (max-width: 1199.98px) {
    .page-breadcrumb__panel { min-height: 48px; padding: 9px 16px; }
    .page-breadcrumb__item { font-size: 12px; }
    .page-breadcrumb__separator { margin: 0 12px; }
    .page-breadcrumb__home { width: 28px; height: 28px; }
}
@media (max-width: 991.98px) {
    .page-breadcrumb__separator { margin: 0 10px; }
}
@media (max-width: 575.98px) {
    .page-breadcrumb { padding: 11px 0; }
    .page-breadcrumb__panel { padding: 8px 11px; min-height: 46px; }
    .page-breadcrumb__item { font-size: 12px; }
    .page-breadcrumb__link { gap: 7px; }
    .page-breadcrumb__separator { width: 9px; margin: 0 7px; }
    .page-breadcrumb__icon { width: 18px; height: 18px; }
    .page-breadcrumb__home { width: 27px; height: 27px; }
    .page-breadcrumb__item--home .page-breadcrumb__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ═══════════════════════════════════════════════════════════
   KNIGHT ONLINE — CATEGORY PAGE
   ═══════════════════════════════════════════════════════════ */
.game-side,
.game-category-card {
    background:linear-gradient(160deg,var(--ov-06) 0%,var(--ov-02) 100%);
}
.game-side {
    display:flex;
    flex-direction:column;
    height:100%;
    border:1px solid var(--ov-08);
    border-radius:1rem;
    overflow:hidden;
}
.game-side__img-wrap {
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;

    min-height:320px;
}

.game-side__hero-image {
	position: relative;
	z-index: 1;
	/* max-height: 280px; */
	object-fit: cover;
	-webkit-mask-image: linear-gradient(white, #0000);
	mask-image: linear-gradient(white, #0000);
	filter: drop-shadow(0 20px 40px rgba(0,0,0,.6));
	transition: transform .4s ease;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-position: top;
}

.game-side__logo {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	height: 64px;
	max-width: 82%;
	object-fit: contain;
	filter: drop-shadow(0px 10px 8px rgba(0,0,0,.5)) !important;
	display: block;
}
.game-side__body {
    flex-grow:1;
    padding:1.5rem;
}
.game-side__title {
    margin:0 0 .5rem;
    font-size:1.5rem;
    font-weight:700;
    line-height:1.25;
    color:#fff;
}

.game-side__desc {
    margin:0 0 1rem;
    font-size:.875rem;
    color:rgba(219,232,255,.65);
    line-height:1.7;
}
.game-side__badges {
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin-bottom:1.5rem;
}
.game-side__badge {
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    font-size:12px; font-weight:600; padding:5px 11px; border-radius:20px;
    border:1px solid rgba(255,255,255,.1); background:var(--ov-06); color:#dbe8ff;
}
.game-side__badge i { font-size:13px; }
.game-side__badge--green { border-color:rgba(74,222,128,.25); background:rgba(74,222,128,.08); color:#4ade80; }
.game-side__badge--gold  { border-color:rgba(250,200,80,.25); background:rgba(250,200,80,.08); color:#fac850; }
.game-side__badge--blue  { border-color:rgba(96,165,250,.25); background:rgba(96,165,250,.08); color:#60a5fa; }
.game-side__badge--red     { border-color:rgba(248,113,113,.25); background:rgba(248,113,113,.08); color:var(--c-danger); }
.game-side__badge--purple  { border-color:rgba(192,132,252,.25); background:rgba(192,132,252,.08); color:#c084fc; }
.game-side__badge--neutral { border-color:var(--ov-12); background:var(--ov-06); color:#dbe8ff; }
.game-side__stats {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.5rem;
}
.game-side__stat {
    background:var(--ov-04); border:1px solid var(--ov-07); border-radius:12px; padding:12px 14px;
}
.game-side__stat-label {
    font-size:11px; color:rgba(219,232,255,.45); text-transform:uppercase; letter-spacing:.6px; margin-bottom:4px;
}
.game-side__stat-value { font-size:16px; font-weight:700; color:#fff; }
.game-side__stat-value small { font-size:11px; font-weight:500; color:rgba(219,232,255,.5); margin-left:2px; }

.game-category-count {
    font-size:12px; color:rgba(219,232,255,.45);
    border:1px solid rgba(255,255,255,.1); background:var(--ov-04); padding:4px 12px; border-radius:20px;
}

/* ── Category Card ── */
.game-category-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
}
.game-category-card {
	--game-category-card-title: #edf3fb;
	--game-category-card-shadow-rgb: 0,0,0;
	--game-category-card-shadow-opacity: .28;
	container-type: inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none !important;
	border: 1px solid var(--ov-08);
	box-shadow: 0 6px 20px rgba(0,0,0,.16);
	transition: transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.game-category-card:focus-within {
    border-color:var(--c-border-hover);
}
@media (hover:hover) and (pointer:fine) {
    .game-category-card:hover {
        transform:translateY(-4px);
        border-color:var(--c-border-hover);
        box-shadow:0 14px 32px rgba(var(--game-category-card-shadow-rgb),var(--game-category-card-shadow-opacity));
    }
    .game-category-card:hover .game-category-card__cover > img { transform:scale(1.035); }
}
.game-category-card__cover {
    position:relative;
    overflow:hidden;
    flex-shrink:0;
    width:100%;
    height:auto;
    aspect-ratio:3 / 2;
    background:var(--ov-02);
}
.game-category-card__cover::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg, transparent 55%, rgba(8,12,20,.22));
    pointer-events:none;
}
.game-category-card__cover > img {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform .4s ease;
}
.game-category-card__region {
    display:inline-flex;
    align-items:center;
    align-self:flex-start;
    flex-shrink:0;
}
.game-category-card > .game-category-card__region {
    margin:14px 14px 0;
}
.game-category-card__cover > .game-category-card__region {
    position:absolute;
    inset:12px auto auto 12px;
    z-index:4;
}
.game-category-card__region-icons {
    display:inline-flex;
    align-items:center;
    flex-shrink:0;
    gap:5px;
}
.game-category-card__region-flag {
    display:block;
    flex-shrink:0;
    width:26px;
    height:20px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.22);
    border-radius:5px;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.game-category-card__region-flag img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.game-category-card__region-symbol {
    display:grid;
    place-items:center;
    width:26px;
    height:22px;
    color:#fff;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.65));
}
.game-category-card__region-symbol .material-symbols-outlined { font-size:17px; }
.game-category-card__game-logo {
    position:absolute;
    left:50%;
    bottom:6%;
    z-index:3;
    width:min(70%, 190px);
    height:22%;
    max-height:86px;
    transform:translateX(-50%);
    pointer-events:none;
}
.game-category-card__game-logo img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    filter:drop-shadow(0 2px 8px rgba(0,0,0,.75));
}
.game-category-card__body {
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    flex-grow:1;
    gap:14px;
    padding:16px;
    padding:clamp(14px, 6cqi, 20px);
}
.game-category-card__title {
    min-height:2.7em;
    margin:0;
    color:var(--game-category-card-title);
    font-size:16px;
    font-size:clamp(14px, 5.5cqi, 17px);
    font-weight:700;
    line-height:1.35;
    letter-spacing:-.02em;
    overflow-wrap:anywhere;
    text-wrap:pretty;
}
.game-category-card__desc {
    margin:0;
    font-size:13px;
    color:#a3afc1;
    line-height:1.6;
}
/* Kart CTA'sı: game-side ile uyumlu nötr yüzey ve hover tonları. */
.game-category-card__cta.btn-o {
    justify-content:space-between;
    gap:10px;
    min-height:42px;
    margin-top:auto;
    padding:10px 12px;
    border:1px solid var(--ov-12);
    border-radius:10px;
    background:var(--ov-04);
    color:var(--game-category-card-title);
    font-size:13px;
    line-height:1.35;
    text-align:left;
    white-space:normal;
}
.game-category-card__cta .material-symbols-outlined {
    flex-shrink:0;
    margin-left:auto;
    font-size:18px;
    transition:transform .2s ease;
}
.game-category-card__cta.btn-o:hover {
    border-color:var(--c-border-hover);
    background:var(--ov-08);
    color:var(--c-text);
}
.game-category-card__cta.btn-o:active {
    background:var(--ov-12);
}
.game-category-card__cta:hover .material-symbols-outlined { transform:translateX(3px); }
.game-category-card__cta.btn-o:focus-visible {
    outline:2px solid var(--c-primary);
    outline-offset:3px;
}

/* Category responsive */
@media (min-width: 768px) {
    .game-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width: 992px) {
    .game-category-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width: 991.98px) {
    .game-side { margin-bottom:32px; }
}
@media (max-width: 767.98px) {
    .game-category-grid { gap:14px; }
}
@media (prefers-reduced-motion:reduce) {
    .game-category-card,
    .game-category-card__cover > img,
    .game-category-card__cta.btn-o,
    .game-category-card__cta .material-symbols-outlined { transition:none; }
    .game-category-card:hover,
    .game-category-card:hover .game-category-card__cover > img,
    .game-category-card__cta:hover .material-symbols-outlined { transform:none; }
}

/* Product Row */
.product-row {
	display: flex;
    flex-direction: column;
	align-items: stretch;
    width: 100%;
    max-width: 100%;
	border: 1px solid var(--ov-08);
	border-radius: 14px;
	transition: all .25s ease;
	background: rgba(24,27,33,.65);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	padding: 0;
	overflow: hidden;
}
.product-row:hover {
    border-color:rgba(87,176,255,.39);

    transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,0,0,.3);
}
/* ── Ürün satırı düzeni: tablo benzeri hizalı CSS Grid ──────────────────
   Her .product-row__content AYNI sabit sütun şablonunu kullanır; böylece
   sütunlar (İsim | Adet | Alış | Satış) TÜM satırlarda dikeyde hizalanır
   ("bir hücre genişleyince diğerleri de hizalanır" davranışı).
   Satışı olmayan üründe 4. sütun rezerve/boş kalır; hiza bozulmaz.
   Eski .product-row__actions / .product-row__trades sarmalayıcıları
   kaldırıldı — qty + trade kartları artık doğrudan grid hücresi. */
.product-row__content {
    display:grid;
    --trade-w:150px;
    grid-template-columns:minmax(0,1fr) auto var(--trade-w) var(--trade-w);
    align-items:stretch;
    column-gap:0;
    row-gap:12px;
    width:100%;
    max-width:100%;
}
/* Satış kartı OLMAYAN satır (Blade --single ekler): rezerve 4. sütun hiç
   oluşturulmaz → qty ile Alış yan yana, Alış sağ kenarda; aradaki büyük
   boşluk oluşmaz. Çok-kartlı satırlarla qty hizası birebir aynı olmasa da
   her tür kendi içinde hizalı kalır. */
.product-row__content--single {
    grid-template-columns:minmax(0,1fr) auto var(--trade-w);
}
.product-row__main {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    grid-column:1;
    padding:12px 0 12px 12px;
}
.product-row__trade--buy  { grid-column:3; }
.product-row__trade--sell { grid-column:4; }
.product-row__icon {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
	width: 100px;
	height: 100px;
	border-radius: 12px;
	background: rgba(87,176,255,.1);
	border: 1px solid var(--c-border);
	overflow: hidden;
}
.product-row__icon--cash img,
.product-row__icon--goldbar img,
.product-row__icon--epin img {
    filter:saturate(1.08) contrast(1.04);
}
/* Panelden yüklenen "Thumbnail Görseli": görselin kendi zemini olduğu için kutu stilini kaldır */
.product-row__icon--thumb {
    background: none;
    border: none;
}
/* Thumbnail'i kırpma: paylaşılan .product-row__icon img kuralı cover kullanıyor,
   kendi zemini olan görselde bu taşmaya yol açıyor — contain ile tamamı sığsın. */
.product-row__icon--thumb img {
    object-fit: contain;
}
/* Thumbnail'li satır: görsel ve diyagonal şerit tek bir sol panel oluşturur.
   --row-thumb-rgb, thumbnail'in kendi renginden gelir. */
.product-row.product-row--thumb {
    --row-thumb-width: 220px;
    padding: 0;
}
.product-row--thumb .product-row__main {
    --row-main-inset: 16px;
    position: relative;
    isolation: isolate;
    min-height: 152px;
    align-items: center;
    gap: 0;
    padding: 0 var(--row-main-inset) 0 0;
}
.product-row--thumb .product-row__icon--thumb {
    position: relative;
    align-self: stretch;
    width: var(--row-thumb-width);
    max-width: 44%;
    height: auto;
    border-radius: 0;
}
.product-row--thumb .product-row__icon--thumb img {
    position: absolute;
    inset: 10px 12px;
    width: calc(100% - 24px);
    height: calc(100% - 20px);
    object-fit: contain;
    object-position: center;
    transform: scale(.85);
    filter: saturate(1.08) contrast(1.04) drop-shadow(0 6px 5px rgba(0,0,0,.28));
}
.product-row--thumb .product-row__info {
    position: relative;
    padding: 16px 0;
}
.product-row--thumb .product-row__main::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30px;
    /* Diyagonal kenarın orta yüksekliği (%83), thumbnail'in merkezine denk gelir.
       30px, katmanın sola kaydırılmasını telafi eder. */
    width: calc((min(var(--row-thumb-width), (100% - var(--row-main-inset)) * .44) * .5 + 30px) / .83);
    z-index: -1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 100%);
    clip-path: polygon(9% 0, 100% 0, 66% 100%, 0 100%);
    background: linear-gradient(155deg,
        rgba(var(--row-thumb-rgb, 87,176,255), .94) 0%,
        rgba(var(--row-thumb-rgb, 87,176,255), .58) 48%,
        rgba(var(--row-thumb-rgb, 87,176,255), .16) 100%);
}
@media (max-width: 991.98px) {
    .product-row.product-row--thumb { --row-thumb-width: 176px; }
}
@media (max-width: 767.98px) {
    .product-row.product-row--thumb { --row-thumb-width: 148px; }
    .product-row--thumb .product-row__content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 0;
    }
    .product-row--thumb .product-row__main {
        --row-main-inset: 12px;
        grid-column: 1 / -1;
        grid-row: 1;
        min-height: 128px;
    }
    .product-row--thumb .product-row-qty {
        grid-column: 1 / -1;
        grid-row: 2;
        margin: 0 12px 12px;
    }
    .product-row--thumb .product-row__trade {
        grid-row: 3;
    }
}
.product-row__info {
    flex:1 1 auto;
    min-width:0;
}
.product-row__name { font-size:15px; font-weight:700; color:#fff; }
.product-row__meta {
    display:flex;
    align-items:center;
    gap:5px 12px;
    flex-wrap:wrap;
    font-size:12px;
    line-height:1.4;
    color:rgba(219,232,255,.45);
}
.product-row__meta i { font-size:11px; }

/* Her meta öğesi kendi içinde flex kutu olur; ikon ile yazı taban çizgisine
   göre değil birbirinin dikey ortasına hizalanır. Gerekli, çünkü
   .material-symbols-outlined tabanı 20px font + vertical-align:-4px taşıyor:
   12px'lik meta metninin yanında ikon hem büyük kalıyor hem de aşağı kayıyor,
   üstelik satır kutusunu şişirip bloğu içeriğinden yüksek yapıyordu. Flex
   bağlamında vertical-align yok sayıldığı için hiza kendiliğinden düzelir. */
.product-row__meta > * {
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-width:0;
}
.product-row__meta .material-symbols-outlined {
    flex-shrink:0;
    font-size:15px;
    line-height:1;
    vertical-align:baseline;
}

/* İkon renkleri anlamı taşısın: teslimat site aksanı, puan altın, stok satırı
   (ikon + yazı birlikte) kendi durum rengi. Sıra önemli — hepsi 0,2,0
   özgüllüğünde, sonra gelen kazanır. */
.product-row__meta .material-symbols-outlined { color:var(--c-primary); }
.product-row__rating .material-symbols-outlined { color:var(--c-gold); }
.product-row__stock--success { color:var(--c-success); }
.product-row__stock--warning { color:var(--c-warning); }
.product-row__stock--muted   { color:rgba(219,232,255,.38); }
.product-row__stock .material-symbols-outlined { color:inherit; }

/* Trade Areas (Buy/Sell) */
.product-row__trade {
	position: relative;
	min-width: 0;
	min-height: 116px;
	text-align: center;
	
	border-left: 1px solid var(--c-border);
	border-radius: 0;
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 6px;
}
.product-row__trade+.product-row__trade {
	border-left: 0;
}
.product-row__trade.product-row__trade--discounted {
    padding-top: 28px;
    gap: 4px;
}

.product-row__trade-label {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-size:11px;
    font-weight:700;
    color:var(--c-text-muted);
}
.product-row__trade-label .material-symbols-outlined { font-size:15px; color:var(--c-primary); }
/* Satış tarafı: site bileşenindeki altın (--c-gold) — alış mavi, satış altın. */
.product-row__trade--sell .product-row__trade-label .material-symbols-outlined { color:var(--c-gold); }
.product-row__trade-unit { font-size:11px; color:var(--c-text-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.product-row__total { margin-top:2px; font-size:18px; font-weight:800; color:var(--c-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.product-row__total small { font-size:11px; font-weight:500; color:var(--c-text-subtle); }
.product-row__discount {
	position: absolute;
	top: 0px;
	left: 50%;
	z-index: 1;
	display: inline-block;
	background: var(--c-danger-hover);
	color: #fff;
	font-size: 9px;
	font-weight: 600;
	padding: 2px 6px;
	letter-spacing: .3px;
	transform: translateX(-50%);
	pointer-events: none;
	width: 100%;
	text-wrap: nowrap;
}
.product-row__old-price { color:var(--c-text-subtle); font-size:11px; font-weight:400; margin-right:4px; text-decoration:line-through; }

/* Qty Center (between buy/sell) */
.product-row-qty {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    min-width:0;
    margin:0 12px;
    grid-column:2;
}

/* ═══ Detail Tabs ════════════════════════════════════════════ */
.detail-tabs {
    position: relative;
    background: rgba(24,27,33,.65);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--ov-08);
    border-radius: 12px; overflow: hidden;
    padding: 18px
}
.detail-tabs__badge {
	font-size: 11px;
	font-weight: 700;
	background: rgba(87,176,255,.15);
	color: var(--c-primary);
	padding: 2px 7px;
	border-radius: 10px;
}
.detail-tabs__title {
    font-size:18px; font-weight:700; color:#fff; margin-bottom:12px;
}

/* Review Summary */
.detail-tabs__review-states {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}
.detail-tabs__review-state {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--ov-08);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}
.detail-tabs__review-state--form {
    display: block;
    border-color: rgba(250,200,80,.18);
    background: linear-gradient(180deg, rgba(250,200,80,.08), rgba(255,255,255,.025));
}
.detail-tabs__review-state--login {
    border-color: rgba(87,176,255,.2);
    background: rgba(87,176,255,.055);
}
.detail-tabs__review-state--purchase {
    border-color: rgba(125,220,155,.18);
    background: rgba(125,220,155,.05);
}
.detail-tabs__review-state-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
.detail-tabs__review-state-head strong {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}
.detail-tabs__review-state-head span:not(.material-symbols-outlined) {
    display: block;
    margin-top: 4px;
    color: rgba(219,232,255,.64);
    font-size: 13px;
    line-height: 1.5;
}
.detail-tabs__review-state-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ov-07);
    color: #fac850;
    font-size: 20px;
}
.detail-tabs__review-state--login .detail-tabs__review-state-icon { color: var(--c-primary); }
.detail-tabs__review-state--purchase .detail-tabs__review-state-icon { color: #7ddc9b; }
.detail-tabs__review-state > .btn-o {
    flex: 0 0 auto;
    white-space: nowrap;
}
.detail-tabs__review-form {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}
.detail-tabs__review-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 2px;
}
.detail-tabs__review-rating input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.detail-tabs__review-rating label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    color: rgba(219,232,255,.28);
    cursor: pointer;
    transition: color .18s ease, transform .18s ease;
}
.detail-tabs__review-rating label .material-symbols-outlined {
    font-size: 25px;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.detail-tabs__review-rating label:hover,
.detail-tabs__review-rating label:hover ~ label,
.detail-tabs__review-rating input:checked ~ label {
    color: #fac850;
}
.detail-tabs__review-rating label:hover {
    transform: translateY(-1px);
}
.detail-tabs__review-form textarea {
    width: 100%;
    min-height: 108px;
    resize: vertical;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;
    background: rgba(8,12,18,.42);
    color: #fff;
    font-size: 13px;
    line-height: 1.55;
    outline: none;
}
.detail-tabs__review-form textarea::placeholder {
    color: rgba(219,232,255,.42);
}
.detail-tabs__review-form textarea:focus {
    border-color: rgba(250,200,80,.35);
    box-shadow: 0 0 0 3px rgba(250,200,80,.08);
}
.detail-tabs__review-form-footer > span {
    color: rgba(219,232,255,.52);
    font-size: 12px;
    line-height: 1.45;
}
.detail-tabs__review-score { min-width:100px; }
.detail-tabs__review-big {
    font-size:42px; font-weight:800; color:#fac850; line-height:1;
}
.detail-tabs__review-stars {
    color:#fac850; font-size:14px; margin:6px 0 4px;
}
.detail-tabs__review-score small { color:rgba(219,232,255,.5); font-size:12px; }
.detail-tabs__bar-row {
    display:flex; align-items:center; gap:8px; font-size:12px;
    color:rgba(219,232,255,.5); margin-bottom:4px;
}
.detail-tabs__bar {
    flex-grow:1; height:6px; border-radius:3px;
    background:var(--ov-08); overflow:hidden;
}
.detail-tabs__bar-fill {
    height:100%; border-radius:3px;
    background:linear-gradient(90deg,#fac850,#e5a800);
}

:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__review-summary {
    display:flex;
    align-items:stretch;
    gap:18px;
    margin-bottom:18px;
    padding:16px;
    border:1px solid var(--ov-08);
    border-radius:12px;
    background:rgba(255,255,255,.025);
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__review-score {
    flex:0 0 128px;
    min-width:128px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:12px;
    border:1px solid rgba(250,200,80,.16);
    border-radius:10px;
    background:rgba(250,200,80,.08);
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__review-big {
    font-size:38px;
    letter-spacing:0;
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__review-count {
    color:rgba(219,232,255,.6);
    font-size:12px;
    font-weight:600;
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__review-bars {
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:8px;
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__bar-row {
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    color:rgba(219,232,255,.55);
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__bar-row > span:first-child {
    flex:0 0 18px;
    color:#fac850;
    font-weight:700;
    text-align:center;
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__bar-row > span:last-child {
    flex:0 0 34px;
    color:rgba(219,232,255,.58);
    font-weight:700;
    text-align:right;
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__bar {
    flex:1 1 auto;
    height:7px;
    border-radius:999px;
    background:var(--ov-08);
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__bar-fill {
    border-radius:999px;
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__comment {
    padding:14px 16px;
    border:1px solid var(--ov-07);
    border-radius:12px;
    background:rgba(255,255,255,.025);
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__comment-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:6px;
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__comment-header strong {
    color:#fff;
    font-size:13.5px;
    font-weight:800;
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__comment-date {
    flex:0 0 auto;
    color:rgba(219,232,255,.45);
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__comment-stars {
    display:flex;
    margin-bottom:8px;
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__comment-stars .starmeter {
    width:85px;
    height:15px;
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__comment-stars .material-symbols-outlined {
    font-size:15px;
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__comment-stars .str_fill .material-symbols-outlined {
    color:#fac850;
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__comment-text {
    margin:0;
    color:rgba(219,232,255,.76);
    font-size:13px;
    line-height:1.6;
}

@media (max-width: 575.98px) {
    .detail-tabs__review-state > .btn-o,
    .detail-tabs__review-form-footer .btn-o {
        width: 100%;
        justify-content: center;
    }
    :is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__review-summary {
        flex-direction:column;
        gap:12px;
        padding:14px;
    }
    :is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__review-score {
        flex:0 0 auto;
        min-width:0;
        align-items:flex-start;
        text-align:left;
    }
    :is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__comment-header {
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
    }
}

/* Action Buttons */
.product-row__action {
    white-space:nowrap; flex-shrink:0;
    width:100%;
    min-width:0;
    max-width:104px;
    margin:2px auto 0;
}

/* Stok yokken "Al" butonu: görsel olarak pasif, ama tıklanınca toast göstermek
   için tıklanabilir bırakılır (gerçek `disabled` attribute click event üretmez). */
.product-row__action--disabled {
    opacity:.5;
    cursor:not-allowed;
    filter:grayscale(.4);
}

/* ═══ Sell Panel (Satışa Çıkar Detay) ═══ */
.product-sell-panel {
    --trade-panel-accent: var(--c-gold);
    display: none;
    padding: 18px 20px;
    border-top: 1px solid var(--c-border);
    animation: gbSellSlide .25s ease;
}
.product-sell-panel.open,
.product-buy-panel.open { display: block; }
@keyframes gbSellSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══ Buy Panel (Satın Al Detay) ═══ */
.product-buy-panel {
	--trade-panel-accent: var(--c-primary);
	display: none;
	padding: 18px 20px;
	border-top: 1px solid var(--c-border);
	animation: gbBuySlide .25s ease;
}
@keyframes gbBuySlide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Bu alt sınıflar goldbar-cards-script.blade.php tarafından dinamik üretilir. */
.product-sell-panel,
.product-buy-panel { --trade-panel-muted:#aab2bf; }
.product-sell-panel__header,
.product-buy-panel__header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}
.product-sell-panel__title,
.product-buy-panel__title {
    margin:0;
    color:var(--c-text);
    font-size:15px;
    font-weight:700;
}
.product-sell-panel__close,
.product-buy-panel__close { flex-shrink:0; }
.product-sell-panel__close .material-symbols-outlined,
.product-buy-panel__close .material-symbols-outlined { font-size:18px; }
.product-sell-panel__alert,
.product-buy-panel__alert {
    display:flex;
    align-items:flex-start;
    gap:8px;
    padding:10px 12px;
    margin-bottom:6px;
    border:1px solid color-mix(in srgb, var(--trade-panel-accent) 18%, transparent);
    border-radius:8px;
    background:color-mix(in srgb, var(--trade-panel-accent) 6%, transparent);
    color:var(--trade-panel-muted);
    font-size:12px;
    line-height:1.5;
}
.product-sell-panel__alert .material-symbols-outlined,
.product-buy-panel__alert .material-symbols-outlined {
    flex-shrink:0;
    color:var(--trade-panel-accent);
    font-size:18px;
}
.product-sell-panel__field,
.product-buy-panel__field {
    min-width:0;
    margin:14px 0 10px;
}
.product-sell-panel__label,
.product-buy-panel__label {
    display:block;
    margin-bottom:6px;
    color:var(--trade-panel-muted);
    font-size:12px;
    font-weight:600;
}
.product-sell-panel__input.input-o,
.product-buy-panel__input.input-o {
    width:100%;
    min-width:0;
    padding:10px 14px;
    background:rgba(0,0,0,.22);
    font-size:13px;
}
.product-sell-panel__input.input-o:focus,
.product-buy-panel__input.input-o:focus {
    border-color:color-mix(in srgb, var(--trade-panel-accent) 60%, transparent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--trade-panel-accent) 10%, transparent);
}
textarea.product-sell-panel__input,
textarea.product-buy-panel__input {
    min-height:80px;
    resize:vertical;
}
.product-sell-panel__delivery,
.product-buy-panel__delivery {
    margin:10px 0 14px;
    color:var(--trade-panel-muted);
    font-size:12px;
}
.product-sell-panel__delivery strong,
.product-buy-panel__delivery strong { color:var(--c-text); }
.product-sell-panel__divider,
.product-buy-panel__divider {
    height:1px;
    margin-bottom:14px;
    background:var(--c-border);
}
.product-sell-panel__product-card,
.product-buy-panel__product-card {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 14px;
    margin-bottom:14px;
    border:1px solid var(--c-border);
    border-radius:8px;
    background:var(--ov-03);
}
.product-sell-panel__product-left,
.product-buy-panel__product-left {
    display:flex;
    flex:1 1 180px;
    align-items:center;
    gap:10px;
    min-width:0;
}
.product-sell-panel__product-left > div,
.product-buy-panel__product-left > div { min-width:0; }
.product-sell-panel__product-img,
.product-buy-panel__product-img {
    flex:0 0 40px;
    width:40px;
    height:40px;
    overflow:hidden;
    border:1px solid var(--c-border);
    border-radius:6px;
    background:var(--ov-03);
}
.product-sell-panel__product-img img,
.product-buy-panel__product-img img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.product-sell-panel__product-name,
.product-buy-panel__product-name {
    color:var(--c-text);
    font-size:13px;
    font-weight:600;
    overflow-wrap:anywhere;
}
.product-sell-panel__product-qty,
.product-buy-panel__product-qty {
    margin-top:2px;
    color:var(--trade-panel-muted);
    font-size:11px;
}
.product-sell-panel__product-price,
.product-buy-panel__product-price {
    margin-left:auto;
    color:var(--trade-panel-accent);
    font-size:16px;
    font-weight:800;
    white-space:nowrap;
}
.product-sell-panel__product-price small,
.product-buy-panel__product-price small {
    font-size:12px;
    font-weight:500;
}
.product-sell-panel__footer,
.product-buy-panel__footer {
    display:flex;
    justify-content:flex-end;
}
.product-sell-panel__submit,
.product-buy-panel__submit {
    min-width:min(246px, 100%);
    max-width:100%;
    white-space:normal;
}
.product-sell-panel__submit .material-symbols-outlined,
.product-buy-panel__submit .material-symbols-outlined {
    flex-shrink:0;
    font-size:18px;
}
@media (max-width:575.98px) {
    .product-sell-panel,
    .product-buy-panel { padding:16px 12px; }
    .product-sell-panel__submit,
    .product-buy-panel__submit { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
    .product-sell-panel,
    .product-buy-panel { animation:none; }
}

/* GB Product Card Link */
.product-row__name-link {
    color:inherit; text-decoration:none; transition:color .2s;
}

/* GB Responsive */

@media (max-width: 767.98px) {
    /* Mobil:  [main sol üst]   [qty sağ üst]
               [Alış]      [Satış]   (yan yana, altta) */
    .product-row__content {
        grid-template-columns:1fr 1fr;
        align-items:stretch;
        row-gap:10px;
    }
    .product-row__main  { grid-column:1; grid-row:1; min-width:0; }
    .product-row-qty    { grid-column:2; grid-row:1; justify-content:flex-end; }
    .product-row__trade--buy  { grid-column:1; grid-row:2; }
    .product-row__trade--sell { grid-column:2; grid-row:2; }
    .product-row__trade--buy:last-child { grid-column:1 / -1; }

    /* Sütunlar kendi satırına indiği için dikey ayraç anlamını yitiriyor:
       Satış zaten `+` kardeş kuralıyla borderʼsız, geriye kalan tek çizgi de
       kartın sol kenarına yapışıp ayraç değil kenarlık gibi görünüyordu. */
    .product-row__trade {
        border-left: 0;
    }

    /* Mobilde trade hücresi kartın yarısı — tek kartlı üründe tamamı —
       genişliğinde. Masaüstündeki 150px sütuna göre tasarlanan tam
       genişlikli şerit burada uyarı bandı gibi okunuyordu; ortalanmış
       bir rozete iner. */
    .product-row__discount {
        width: auto;
        max-width: calc(100% - 16px);
        padding: 3px 9px;
        border-radius: 999px;
        font-size: 9px;
        line-height: 1.5;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Product Detail View Responsive */

/* ═══════════════════════════════════════════════════════════════════════
   ALL GAMES PAGE  (.ag-*)
   ═══════════════════════════════════════════════════════════════════════ */

/* Header */
.ag-header {
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:24px; margin-bottom:20px; flex-wrap:wrap;
}
.ag-header__title {
    font-size:28px; font-weight:700; color:#fff; margin:0;
    display:flex; align-items:center; gap:10px;
}
.ag-header__title i { color:#fac850; }
.ag-header__desc {
    font-size:14px; color:rgba(255,255,255,.5); margin:4px 0 0;
}
.ag-search {
    position:relative; min-width:280px; max-width:380px; flex:1;
}
.ag-search.input-o-wrap .ag-search__icon {
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color:rgba(255,255,255,.35); font-size:16px; pointer-events:none;
}
.ag-search.input-o-wrap .ag-search__input {
    width:100%; background:var(--ov-05); border:1px solid rgba(255,255,255,.1);
    border-radius:12px; padding:10px 16px 10px 40px; color:#fff; font-size:14px;
    transition:border-color .2s, box-shadow .2s; outline:none;
}
.ag-search.input-o-wrap .ag-search__input::placeholder { color:rgba(255,255,255,.3); }
.ag-search.input-o-wrap .ag-search__input:focus {
    border-color:rgba(250,200,80,.4); box-shadow:0 0 0 3px rgba(250,200,80,.08);
}

/* Category Filter Buttons */
.ag-filters {
    display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;
}
.ag-controls {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}
.ag-controls .ag-filters {
    flex:1 1 auto;
    min-width:0;
    margin-bottom:0;
}
.ag-controls .ag-search {
    flex:0 1 380px;
    margin-left:auto;
}
.ag-filter-btn {
    background:var(--ov-04); border:1px solid var(--c-border);
    color:var(--c-text-muted); padding:6px 16px; border-radius:100px;
    font-size:13px; font-weight:600; cursor:pointer; transition:all var(--tr-btn); white-space:nowrap;
}
.ag-filter-btn:hover {
    color:var(--c-gold); border-color:rgba(87,176,255,.39); background:rgba(87,176,255,.06);
}
.ag-filter-btn.active {
    color:#fac850; border-color:rgba(250,200,80,.45); background:rgba(87,176,255,.1);
    font-weight:600;
}

/* Count Row */
.ag-count {
    font-size:13px; color:rgba(255,255,255,.4); margin-bottom:16px;
}

/* Empty State */
.ag-empty {
    text-align:center; padding:60px 20px; color:rgba(255,255,255,.35);
}
.ag-empty i { font-size:48px; display:block; margin-bottom:12px; }
.ag-empty p { font-size:15px; margin:0; }

/* Game Card */
.ag-card {
    --ag-card-radius:16px;
    --ag-card-hover-border-width:2px;
    display:block; position:relative;
    border:1px solid var(--ov-08); border-radius:var(--ag-card-radius);
    text-decoration:none; color:#fff;
    transition:all .3s ease-in-out; overflow:hidden; height:100%;
    aspect-ratio:3/4;
}
.ag-card:hover {
    color:#fff;
}

.ag-card::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, #000 100%);
    transform:scale(1.1);
    transform-origin:center;
}

.ag-card:has(.ag-card__logo)::after {
    content:"";
    position:absolute;
    top:-40%;
    left:-80%;
    width:55%;
    height:180%;
    pointer-events:none;
    z-index:2;
    background:linear-gradient(
        115deg,
        transparent 0%,
        var(--ov-08) 35%,
        rgba(255,255,255,.35) 50%,
        var(--ov-08) 65%,
        transparent 100%
    );
    background-repeat:no-repeat;
    transform:rotate(18deg);
    opacity:0;
}

.ag-card:hover:has(.ag-card__logo)::after {
    opacity:1;
    animation:ag-card-surface-shine 0.85s ease forwards;
}

@keyframes ag-card-surface-shine {
    from {
        left:-80%;
    }

    to {
        left:125%;
    }
}

/* Card Image — full cover */
.ag-card__image {
    position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:hidden;
    transition:filter .3s ease;
}

.ag-card:hover .ag-card__image {
    filter:brightness(1.1);
}

.ag-card__image img,
.ag-card__image video {
    width:100%; height:100%; object-fit:cover;
}

.ag-card__image img {
    opacity:0;
    filter:blur(10px);
    transition:opacity .45s ease, filter .6s ease;
}

.ag-card__image.is-loaded img {
    opacity:1;
    filter:blur(0);
}

.ag-card__image::after {
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:32px;
    height:32px;
    z-index:2;
    border:3px solid rgba(255,255,255,.18);
    border-top-color:var(--c-gold);
    border-radius:50%;
    opacity:0;
    pointer-events:none;
    transform:translate(-50%, -50%);
}

.ag-card__image.is-loading::after {
    opacity:1;
    animation:ag-card-image-loading-spin .75s linear infinite;
}

@keyframes ag-card-image-loading-spin {
    to { transform:translate(-50%, -50%) rotate(360deg); }
}

/* Particle Canvas */
canvas.particule {
    position:absolute; inset:0; width:100%; height:100%;
    z-index:3; pointer-events:none; opacity:0;
    transition:opacity .4s ease;
}
.ag-card:hover canvas.particule {
    opacity:1;
}

/* Hover Video Canvas */
.ag-card__video-canvas {
    position:absolute; inset:0; width:100%; height:100%;
    z-index:1; pointer-events:none;
    transform:scale(1);
    transform-origin:center;
    transition:opacity .4s ease, transform .6s ease;
}
.ag-card:hover .ag-card__video-canvas { transform:scale(1.1); }

/* Kapak görseli üstüne binen hover videosu: normalde gizli, imleç üstünde görünür/oynar */
.ag-card__video-canvas--hover { opacity:0; }
.ag-card:hover .ag-card__video-canvas--hover { opacity:1; }

/* Logo Overlay — kapak görselinin ölçülerine orantılı kutu */
.ag-card__logo {
    position: absolute;
    left:6.6667%;
    right:6.6667%;
    bottom:5%;
    width:auto;
    height:26.25%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.ag-card__logo img {
    position:relative;
    z-index:1;
    width:100%;
    height:auto;
    max-width:100%;
    max-height:100%;
    object-fit: contain;
}

/* ── All-Games Responsive ──────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .ag-header { flex-direction:column; align-items:stretch; }
    .ag-controls { flex-direction:column; align-items:stretch; }
    .ag-controls .ag-search { width:100%; flex-basis:auto; margin-left:0; }
    .ag-search { max-width:100%; min-width:0; }
}
@media (max-width: 575.98px) {
    .ag-header__title { font-size:22px; }
    .ag-filters { gap:6px; }
    .ag-filter-btn { padding:5px 12px; font-size:12px; }
}

/* ── Square Card Variant (E-PIN) ───────────────────────────────────── */
.ag-card--square { aspect-ratio:1/1; }

#agGrid:hover .ag-card:not(:hover),
#allGamesGrid:hover .ag-card:not(:hover) {
    opacity: .5;
}

/* ── Search Page Hero (.sp-hero) ── */
.sp-hero {
    background: linear-gradient(180deg, rgba(87,176,255,.07) 0%, transparent 100%);
    border-bottom: 1px solid var(--c-border);
    padding: 32px 0 24px;
}
.sp-hero__input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.sp-hero__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-subtle);
    font-size: 20px;
    pointer-events: none;
}
.sp-hero__input {
    width: 100%;
    background: var(--ov-05);
    border: 1.5px solid var(--c-border);
    border-radius: 12px;
    padding: 13px 44px 13px 50px;
    color: #fff;
    font-size: 16px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.sp-hero__input::placeholder { color: rgba(255,255,255,.3); }
.sp-hero__input:focus {
    border-color: rgba(87,176,255,.5);
    box-shadow: 0 0 0 3px rgba(87,176,255,.09);
}
.sp-hero__clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-subtle);
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: color .15s ease;
}
.sp-hero__clear:hover { color: #fff; }
.sp-hero__clear .material-symbols-outlined { font-size: 18px; }
.sp-hero__btn { flex-shrink: 0; }
.sp-hero__meta {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--c-text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.sp-hero__count { color: #fff; font-weight: 700; }
.sp-hero__badge {
    background: var(--ov-07);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    padding: 1px 8px;
    font-size: 12px;
    color: var(--c-text-muted);
    font-weight: 600;
}

/* ── Popular searches ── */
.sp-popular { padding: 32px 0 8px; }
.sp-popular__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-text-muted);
    margin: 0 0 14px;
}
.sp-popular__title .material-symbols-outlined { font-size: 18px; color: var(--c-gold); }
.sp-chips--center { justify-content: center; }
.sp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--ov-04);
    border: 1px solid var(--c-border);
    border-radius: 100px;
    color: var(--c-text-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--tr-btn);
}
.sp-chip .material-symbols-outlined { font-size: 14px; }
.sp-chip:hover {
    background: rgba(87,176,255,.08);
    border-color: rgba(87,176,255,.4);
    color: var(--c-primary);
}

/* ── Empty state ── */
.sp-empty {
    text-align: center;
    padding: 64px 20px 32px;
}
.sp-empty__icon {
    font-size: 52px;
    display: block;
    margin-bottom: 16px;
    color: rgba(255,255,255,.15);
}
.sp-empty__title {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255,255,255,.55);
    margin: 0 0 6px;
}
.sp-empty__sub {
    font-size: 14px;
    color: rgba(255,255,255,.28);
    margin: 0;
}

/* ── Type filter tabs ── */
.sp-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    margin-bottom: 24px;
    scrollbar-width: none;
}
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--ov-04);
    border: 1.5px solid var(--c-border);
    border-radius: 100px;
    color: var(--c-text-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--tr-btn);
}
.sp-tab__icon { font-size: 16px; }
.sp-tab__count {
    padding: 1px 7px;
    border-radius: 20px;
    background: var(--ov-08);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.7;
}
.sp-tab:hover {
    color: var(--c-primary);
    border-color: rgba(87,176,255,.4);
    background: rgba(87,176,255,.06);
}
.sp-tab--active {
    color: var(--c-gold);
    border-color: rgba(250,200,80,.4);
    background: rgba(250,200,80,.07);
}
.sp-tab--active .sp-tab__icon { color: var(--c-gold); }
.sp-tab--active .sp-tab__count { background: rgba(250,200,80,.2); }

/* ── Results layout ── */
.sp-layout { display: block; }
.sp-layout--sidebar {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: start;
}
.sp-main { min-width: 0; }

/* ── Filter sidebar ── */
.sp-filter {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 20px;
}
.sp-filter__title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-text-muted);
    margin: 0 0 18px;
}
.sp-filter__title .material-symbols-outlined { font-size: 16px; color: var(--c-primary); }
.sp-filter__group { margin-bottom: 18px; }
.sp-filter__group:last-of-type { margin-bottom: 0; }
.sp-filter__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-text-subtle);
    margin-bottom: 8px;
}
.sp-filter__radios { display: flex; flex-direction: column; gap: 2px; }
.sp-filter__radio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--c-text-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.sp-filter__radio input[type=radio] { display: none; }
.sp-filter__radio:hover { background: var(--ov-04); color: #fff; }
.sp-filter__radio--active {
    background: rgba(87,176,255,.1);
    color: var(--c-primary);
    font-weight: 600;
}
.sp-filter__price-row { display: flex; align-items: center; gap: 8px; }
.sp-filter__input {
    flex: 1;
    background: var(--ov-04);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 8px 10px;
    color: #fff;
    font-size: 13px;
    outline: none;
    width: 0;
    min-width: 0;
    transition: border-color .15s ease;
}
.sp-filter__input:focus { border-color: rgba(87,176,255,.5); }
.sp-filter__input::placeholder { color: rgba(255,255,255,.2); }
.sp-filter__price-sep { color: var(--c-text-subtle); font-size: 13px; flex-shrink: 0; }
.sp-filter__actions { margin-top: 18px; }

/* ── Section headers ── */
.sp-section { margin-top: 28px; }
.sp-section:first-child { margin-top: 0; }
.sp-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.sp-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin: 0;
}
.sp-section__title .material-symbols-outlined,
.sp-stat-card__title .material-symbols-outlined,
.bc-filter__title .material-symbols-outlined,
.bank-detail-card__header .material-symbols-outlined,
.product-detail-page--item-detail .info-card__title .material-symbols-outlined { font-size: 18px; color: var(--c-primary); }
.sp-section__count {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-subtle);
    background: var(--ov-06);
    border-radius: 20px;
    padding: 1px 9px;
    line-height: 1.7;
}
.sp-section__more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}
.sp-section__more .material-symbols-outlined { font-size: 16px; transition: transform .15s ease; }
.sp-section__more:hover { color: var(--c-primary); }
.sp-section__more:hover .material-symbols-outlined { transform: translateX(3px); }

/* ── Games grid ── */
.sp-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}
.sp-game-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: 12px;
    overflow: hidden;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    transition: border-color .18s ease, transform .18s ease;
}
.sp-game-card:hover {
    border-color: rgba(87,176,255,.4);
    transform: translateY(-3px);
}
.sp-game-card__img {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--ov-04);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-game-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.sp-game-card:hover .sp-game-card__img img { transform: scale(1.05); }
.sp-game-card__img .material-symbols-outlined { font-size: 36px; color: var(--c-text-subtle); }
.sp-game-card__name {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.8);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Category list ── */
.sp-cat-list {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.sp-cat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}
.sp-cat-item:hover {
    border-color: rgba(87,176,255,.4);
    background: rgba(87,176,255,.04);
}
.sp-cat-item__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(87,176,255,.1);
    border: 1px solid rgba(87,176,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-cat-item__icon .material-symbols-outlined { color: var(--c-primary); font-size: 20px; }
.sp-cat-item__title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-cat-item__game {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    font-size: 12px;
    color: var(--c-text-muted);
}
.sp-cat-item__game .material-symbols-outlined { font-size: 13px; }
.sp-cat-item__arrow {
    flex-shrink: 0;
    color: var(--c-text-subtle);
    font-size: 18px;
    transition: transform .18s ease, color .18s ease;
}
.sp-cat-item:hover .sp-cat-item__arrow { color: var(--c-primary); transform: translateX(3px); }

/* ── Product / listing item grid ── */
.sp-item-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.sp-item-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.sp-item-card:hover {
    border-color: rgba(87,176,255,.4);
    background: rgba(87,176,255,.04);
    transform: translateY(-2px);
}
.sp-item-card__thumb {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ov-04);
    border: 1px solid var(--ov-06);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-item-card__thumb .material-symbols-outlined { font-size: 24px; color: var(--c-text-subtle); }
.sp-item-card__name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-item-card__meta {
    margin-top: 3px;
    font-size: 11px;
    color: var(--c-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-item-card__price {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--c-primary);
    text-align: right;
    white-space: nowrap;
}
.sp-item-card__price small { font-size: 10px; font-weight: 600; opacity: .7; }
.sp-item-card__price--free { color: var(--c-gold); font-size: 12px; font-weight: 700; }

/* Visual card — fotoğrafı olan ürün/ilan kartı */
.sp-item-card--has-img {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
}
.sp-item-card--has-img .sp-item-card__thumb {
    width: 100%;
    height: 150px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
}
.sp-item-card--has-img .sp-item-card__thumb img {
    transition: transform .3s ease;
}
.sp-item-card--has-img:hover .sp-item-card__thumb img {
    transform: scale(1.04);
}
.sp-item-card--has-img .sp-item-card__body {
    padding: 10px 14px 4px;
}
.sp-item-card--has-img .sp-item-card__name { font-size: 13px; }
.sp-item-card--has-img .sp-item-card__price {
    flex-shrink: unset;
    text-align: left;
    padding: 4px 14px 12px;
    font-size: 15px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .sp-layout--sidebar { grid-template-columns: 1fr; }
    .sp-sidebar { position: static; }
    .sp-filter {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .sp-filter__title { grid-column: 1 / -1; margin-bottom: 0; }
    .sp-filter__actions { display: flex; gap: 8px; }
    .sp-filter__actions .btn-o { flex: 1; }
}
@media (max-width: 600px) {
    .sp-hero { padding: 18px 0 14px; }
    .sp-hero__btn-text { display: none; }
    .sp-hero__input { font-size: 15px; padding: 11px 40px 11px 46px; }
    .sp-games-grid { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); }
    .sp-item-grid { grid-template-columns: 1fr; }
    .sp-cat-list { grid-template-columns: 1fr; }
    .sp-filter { grid-template-columns: 1fr; }
    .sp-tab__label { display: none; }
    .sp-tab { padding: 8px 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   KNIGHT ONLINE ITEM SALES PAGE  (.ko-item-*)
   ═══════════════════════════════════════════════════════════════════════ */

/* New Listing Button */
.ko-item__new-btn {
    display:inline-flex; align-items:center; gap:6px;
    background:linear-gradient(135deg,#fac850,var(--c-warning-hover)); color:#0e1014;
    font-size:13px; font-weight:600; padding:8px 18px; border-radius:10px;
    text-decoration:none; transition:all .2s;
}
.ko-item__new-btn:hover { filter:brightness(1.1); color:#0e1014; transform:translateY(-1px); }

/* Pagination */
.ko-item-pagination {
    display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
}
.ko-item-page {
    min-width:36px; height:36px; display:inline-flex; align-items:center;
    justify-content:center; border-radius:var(--r-sm); font-size:13px; font-weight:500;
    color:var(--c-text-muted); background:var(--ov-04);
    border:1px solid var(--c-border); text-decoration:none; transition:all var(--tr-btn);
}
.ko-item-page:hover { color:var(--c-gold); border-color:rgba(250,200,80,.3); }
.ko-item-page.active {
    color:#fac850; border-color:rgba(250,200,80,.45); background:rgba(87,176,255,.1);
    font-weight:600;
}
.ko-item-page--dots { border:none; background:none; cursor:default; }
.ko-item-page--dots:hover { color:rgba(255,255,255,.5); }
.ko-item-page--next { padding:0 14px; gap:4px; }

/* ── Item Card Responsive ──────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   FILTER BAR — .o-sidebar  (horizontal top layout)
   ═══════════════════════════════════════════════════════════════════════ */
.o-sidebar {
    background: #181b21;
    border: 1px solid var(--ov-08);
    border-radius: 12px;
    padding: 14px 18px;
    overflow: visible;
}
.o-sidebar__row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}
.o-sidebar__head {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding-bottom: 4px;
}
.o-sidebar__head i { color: #fac850; }
.o-sidebar__filters {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex: 1;
    flex-wrap: wrap;
}
.o-sidebar__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 130px;
}
.o-sidebar__label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.o-sidebar__select {
    width: 100%;
    background: var(--ov-04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    padding: 8px 12px;
    appearance: auto;
    transition: border-color .2s;
}
.o-sidebar__select:focus {
    outline: none;
    border-color: rgba(250,200,80,.4);
}
.o-sidebar__select option {
    background: #1a1d24;
    color: #fff;
}

/* ── Choices.js Dark Theme Override ──────────────────────────────────── */
.o-choices .choices__inner {
    background: var(--ov-04) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 8px !important;
    min-height: 38px !important;
    padding: 4px 12px !important;
    font-size: 13px !important;
    color: #fff !important;
    transition: border-color .2s, background .2s !important;
}
.o-choices:not(.is-open) .choices__inner:hover {
    border-color: rgba(255,255,255,.2) !important;
    background: var(--ov-06) !important;
}
.o-choices.is-open .choices__inner {
    border-color: rgba(87,176,255,.4) !important;
    border-radius: 8px 8px 0 0 !important;
}
.o-choices .choices__list--single .choices__item {
    color: #e2e8f0 !important;
    font-size: 13px;
}
.o-choices .choices__list--single .choices__placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}
.o-choices .choices__list--dropdown,
.o-choices .choices__list[aria-expanded] {
    background: #1a1d24 !important;
    border: 1px solid rgba(87,176,255,.4) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    z-index: 100;
    word-break: break-word;
}
.o-choices .choices__list--dropdown .choices__item,
.o-choices .choices__list[aria-expanded] .choices__item {
    color: #cbd5e1 !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
}
.o-choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
.o-choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: rgba(250,200,80,.12) !important;
    color: #fac850 !important;
}
.o-choices .choices__list--dropdown .choices__item--selectable.is-selected {
    color: #fac850 !important;
    font-weight: 600;
}
.o-choices::after {
    border-color: #64748b transparent transparent !important;
    right: 14px !important;
}
.o-choices.is-open::after {
    border-color: transparent transparent #fac850 !important;
}

/* Çoklu seçim (multi_select) filtre — onay kutusu grubu */
.o-filter-multi {
    display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 6px 2px;
    max-width: 320px;
}
.o-filter-multi__item {
    display: inline-flex; align-items: center; gap: 5px; margin: 0;
    font-size: 12.5px; color: rgba(219,232,255,.78);
    cursor: pointer; white-space: nowrap;
}
.o-filter-multi__item input { accent-color: var(--c-primary); width: 14px; height: 14px; }

.o-sidebar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
/* Filtre paneli — sayı aralığı (min/max) ve 7/24 toggle */
.o-sidebar__range { display: flex; align-items: center; gap: 6px; }
.o-sidebar__range .select-o { min-width: 0; width: 100%; }
.o-sidebar__range-sep { color: rgba(219,232,255,.5); font-weight: 600; }
.o-sidebar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: var(--r-md);
    background: var(--c-primary);
    color: #0a0f18;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--tr-btn);
    white-space: nowrap;
}
.o-sidebar__btn:hover {
    background: var(--c-primary-hover);
    box-shadow: none;
}
.o-sidebar__reset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 38px;
    padding: 0 14px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--c-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--tr-btn);
    white-space: nowrap;
}
.o-sidebar__reset:hover {
    border-color: var(--c-border-hover);
    color: var(--c-text);
}

@media (max-width: 991.98px) {
    .o-sidebar__row { flex-direction: column; align-items: stretch; }
    .o-sidebar__filters { flex-direction: column; }
    .o-sidebar__group { min-width: 0; }
    .o-sidebar__actions { width: 100%; }
    .o-sidebar__btn,
    .o-sidebar__reset { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ITEM DETAIL PAGE — .detail-tabs-*
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Banner ─────────────────────────────────────────────────────────── */
.product-banner {
    position: relative;
    overflow: hidden;
    height: 600px;
    margin-top: -80px;
    padding-top: 80px;
}
.product-banner__bg {
    --product-banner-mask-width: clamp(720px, 82vw, 1500px);
    --product-banner-mask-height: clamp(260px, 42vw, 520px);
    --product-banner-mask-y: 38%;
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    justify-content: center;
}
.product-banner__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.75) saturate(1.1);
    -webkit-mask-image: radial-gradient(
        ellipse var(--product-banner-mask-width) var(--product-banner-mask-height) at 50% var(--product-banner-mask-y),
        #000 0%,
        #000 56%,
        rgba(0,0,0,.72) 72%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse var(--product-banner-mask-width) var(--product-banner-mask-height) at 50% var(--product-banner-mask-y),
        #000 0%,
        #000 56%,
        rgba(0,0,0,.72) 72%,
        transparent 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    mask-position: center top;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.product-banner__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse var(--product-banner-mask-width) var(--product-banner-mask-height) at 50% var(--product-banner-mask-y),
            transparent 0%,
            transparent 55%,
            rgba(14,16,20,.78) 78%,
            rgba(14,16,20,.98) 100%
        ),
        linear-gradient(180deg, rgba(14,16,20,.3) 0%, rgba(14,16,20,.85) 100%);
}
.product-banner__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 42px 0 42px;
}
.product-banner__thumb {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid rgba(250,200,80,.25);
    box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 30px rgba(87,176,255,.06);
    background: #181b21;
}
.product-banner__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.product-banner__title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.product-banner__rating {
    display: flex;
    align-items: center;
    gap: 6px;
}
.product-banner__stars {
    display: flex;
    gap: 2px;
}
.product-banner__stars .starmeter .material-symbols-outlined {
    font-size: 14px;
}
.product-banner__score {
    font-size: 15px;
    font-weight: 700;
    color: #fac850;
}
.product-banner__review-count {
    font-size: 12px;
    color: rgba(255,255,255,.45);
}
.product-banner__price-badge {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(14,16,20,.6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(250,200,80,.15);
}
.product-banner__price-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: rgba(255,255,255,.45);
}
.product-banner__price-amount {
    font-size: 22px;
    font-weight: 800;
    color: #48bb78;
    line-height: 1;
}
.product-banner__price-amount small {
    font-size: 18px;
    font-weight: 700;
}

/* Banner responsive */
@media (max-width: 767.98px) {
    .product-banner__bg {
        --product-banner-mask-width: 115vw;
        --product-banner-mask-height: 340px;
        --product-banner-mask-y: 34%;
    }
    .product-banner__inner { flex-wrap: wrap; gap: 16px; padding: 24px 0 20px; }
    .product-banner__thumb { width: 80px; height: 80px; border-radius: 12px; border-width: 2px; }
    .product-banner__title { font-size: 18px; }
    .product-banner__price-badge { flex-direction: row; gap: 8px; padding: 10px 16px; width: 100%; justify-content: center; }
    .product-banner__price-amount { font-size: 22px; }
}
@media (max-width: 575.98px) {
    .product-banner { height: 300px; }
    .product-banner__bg {
        --product-banner-mask-width: 120vw;
        --product-banner-mask-height: 260px;
        --product-banner-mask-y: 32%;
    }
    .product-banner + section { margin-top: 0; }
    .product-banner__inner { padding: 18px 0 16px; }
    .product-banner__thumb { width: 64px; height: 64px; }
    .product-banner__title { font-size: 16px; }
    .product-banner__stars .starmeter .material-symbols-outlined { font-size: 12px; }
    .product-banner__price-amount { font-size: 20px; }
}

/* Gallery */
.detail-tabs-gallery { margin-bottom: 14px; }
.detail-tabs-gallery__main {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #181b21;
    border: 1px solid var(--ov-08);
    aspect-ratio: 1/1;
    display: flex; align-items: center; justify-content: center;
}
.detail-tabs-gallery__ilan-no {
    position: absolute; bottom: 12px; left: 12px;
    background: rgba(14,16,20,.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #94a3b8; font-size: 12px; font-weight: 600;
    padding: 4px 10px; border-radius: 8px; border: 1px solid var(--ov-08);
}
.detail-tabs-gallery__thumbs {
    display: flex; gap: 8px; margin-top: 10px;
}
.detail-tabs-gallery__thumb {
    width: 70px; height: 52px; border-radius: 8px; overflow: hidden;
    border: 2px solid transparent; cursor: pointer; background: #181b21;
    transition: border-color .2s; padding: 0;
}
.detail-tabs-gallery__thumb.active,
.detail-tabs-gallery__thumb:hover { border-color: #fac850; }

/* Price Block */
.detail-tabs-price-block {
	border-radius: 12px;
	margin-bottom: 14px;
}
.detail-tabs-price-block__top {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.detail-tabs-price-block__amount {
    font-size: 28px; font-weight: 800; color: #22c55e;
    line-height: 1;
}
.detail-tabs-price-block__amount small { font-size: 20px; font-weight: 700; }
.detail-tabs-price-block__buy-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 11px; border-radius: var(--r-md); border: none;
    background: var(--c-gold); color: #0e1014;
    font-weight: 600; font-size: 14px; text-decoration: none;
    transition: all var(--tr-btn); cursor: pointer; margin-bottom: 8px;
}
.detail-tabs-price-block__buy-btn:hover {
    background: var(--c-gold-hover); transform: none;
    box-shadow: none; color: #0e1014; filter: none;
}

.info-card__title {
    font-size: 15px; font-weight: 700; color: #f1f5f9;
    margin: 0 0 12px; display: flex; align-items: center; gap: 7px;
    padding-bottom: 10px; border-bottom: 1px solid var(--ov-06);
}
.info-card__title i { color: #fac850; font-size: 18px; }
.detail-tabs-detail-item {
    flex: 1 1 calc(50% - 5px);
    min-width: 180px;
    display: flex; flex-direction: column; gap: 2px;
    background: var(--ov-03); border-radius: 8px; padding: 10px 12px;
    border: 1px solid var(--ov-04);
}
.detail-tabs-detail-item__label { font-size: 12px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.detail-tabs-detail-item__value { font-size: 14px; color: #e2e8f0; font-weight: 600; }
.detail-tabs-detail-item__value--highlight { color: #fac850; }

.detail-tabs-seller-wrap,
.sp-stat-card,
.sp-review-item,
.bc-filter {
    background: var(--ov-03);
    border: 1px solid var(--ov-06);
    border-radius: 10px;
    padding: 16px;
}
.detail-tabs-seller-card__top {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
    padding-bottom: 12px; border-bottom: 1px solid var(--ov-06);
}
.detail-tabs-seller-card__avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--ov-06); display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #64748b; border: 2px solid var(--ov-08);
}
.detail-tabs-seller-card__info { flex: 1; }
.detail-tabs-seller-card__name { font-size: 15px; font-weight: 700; color: #f1f5f9; }
.detail-tabs-seller-card__status {
    font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 5px; margin-top: 2px;
}
.detail-tabs-seller-card__status--offline { color: #94a3b8; }
.detail-tabs-seller-card__status--online { color: #22c55e; }
.detail-tabs-seller-card__dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.detail-tabs-seller-card__status--offline .detail-tabs-seller-card__dot { background: #64748b; }
.detail-tabs-seller-card__status--online .detail-tabs-seller-card__dot { background: #22c55e; }
.detail-tabs-seller-card__rating { display: flex; align-items: center; gap: 6px; }
.detail-tabs-seller-card__stars { display: flex; gap: 1px; }
.detail-tabs-seller-card__stars .starmeter .material-symbols-outlined { font-size: 14px; }
.detail-tabs-seller-card__score { font-size: 13px; color: #94a3b8; font-weight: 600; }
.detail-tabs-seller-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.detail-tabs-seller-card__stat {
    flex: 1 1 calc(25% - 5px);
    min-width: 70px;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    background: var(--ov-03); border-radius: 8px; padding: 8px 4px;
    border: 1px solid var(--ov-04);
    text-align: center;
}
.detail-tabs-seller-card__stat i { font-size: 16px; color: #64748b; }
.detail-tabs-seller-card__stat strong { font-size: 18px; color: #f1f5f9; }
.detail-tabs-seller-card__stat span { font-size: 10px; color: #64748b; font-weight: 600; letter-spacing: .3px; }
.detail-tabs-seller-card__stat--ok i { color: #22c55e; }
.detail-tabs-seller-card__stat--fail i { color: var(--c-danger-hover); }
.detail-tabs-seller-card__actions { display: flex; gap: 10px; }
.detail-tabs-seller-card__btn {
    flex: 1; padding: 10px 14px; border-radius: var(--r-md); font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; transition: all var(--tr-btn); text-decoration: none; border: none;
}
.detail-tabs-seller-card__btn--follow {
    background: rgba(87,176,255,.12); border: 1.5px solid rgba(87,176,255,.3);
    color: var(--c-primary);
}
.detail-tabs-seller-card__btn--follow:hover { background: rgba(87,176,255,.22); }
.detail-tabs-seller-card__btn--profile {
    background: transparent; border: 1.5px solid var(--c-border);
    color: var(--c-text-muted);
}
.detail-tabs-seller-card__btn--profile:hover { color: var(--c-text); border-color: var(--c-border-hover); }

/* Tabs */
.tab-nav {
    display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px;
    border-bottom: 1px solid var(--ov-06); padding-bottom: 10px;
}
.tab-nav__btn {
    background: var(--ov-04); border: 1px solid var(--ov-06);
    color: var(--c-text-muted); font-size: 13px; font-weight: 600;
    padding: 8px 14px; border-radius: var(--r-sm); cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px; transition: all var(--tr-btn);
}
.tab-nav__btn i { font-size: 14px; }
.tab-nav__btn:hover { color: var(--c-text); border-color: var(--c-border-hover); }
.tab-nav__btn.active {
    background: rgba(87,176,255,.12); border-color: rgba(87,176,255,.3);
    color: var(--c-primary);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Description */
.detail-tabs-desc { color: #cbd5e1; font-size: 14px; line-height: 1.7; }
.detail-tabs-desc p { margin-bottom: 10px; }
.detail-tabs-desc h4 { color: #f1f5f9; font-size: 15px; margin: 16px 0 8px; }
.detail-tabs-desc ul { padding-left: 20px; margin: 0; }
.detail-tabs-desc ul li { margin-bottom: 4px; }
.detail-tabs-desc ul li::marker { color: #fac850; }

/* Fiyat değişim grafiği + özet kartları */
.detail-price-chart {
    background: linear-gradient(180deg, var(--ov-03), rgba(255,255,255,.01));
    border: 1px solid var(--ov-06);
    border-radius: 14px;
    padding: 14px 14px 10px;
    margin-bottom: 16px;
}
.detail-price-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (min-width: 768px) {
    .detail-price-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.price-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    background: var(--ov-03);
    border: 1px solid var(--ov-06);
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.price-stat:hover {
    transform: translateY(-2px);
    background: var(--ov-05);
    border-color: var(--ov-12);
}
.price-stat__icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 11px;
    color: #fff;
}
.price-stat__icon .material-symbols-outlined { font-size: 22px; }
.price-stat__label {
    font-size: 11px; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.price-stat__value { font-size: 18px; font-weight: 700; color: #f1f5f9; line-height: 1.15; }
.price-stat__value small { font-size: 12px; font-weight: 600; color: #94a3b8; }
.price-stat--low  .price-stat__icon { background: linear-gradient(135deg, #16a34a, #22c55e); }
.price-stat--high .price-stat__icon { background: linear-gradient(135deg, #dc2626, #f97316); }
.price-stat--avg  .price-stat__icon { background: linear-gradient(135deg, #2563eb, var(--c-primary)); }
.price-stat--count .price-stat__icon { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.price-stat--low:hover  { border-color: rgba(34,197,94,.4); }
.price-stat--high:hover { border-color: rgba(249,115,22,.4); }
.price-stat--avg:hover  { border-color: rgba(87,176,255,.4); }
.price-stat--count:hover { border-color: rgba(168,85,247,.4); }

/* Comments */
.detail-tabs-comments { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.detail-tabs-comment {
    background: var(--ov-03); border: 1px solid var(--ov-05);
    border-radius: 10px; padding: 14px;
}
.detail-tabs-comment__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.detail-tabs-comment__badge {
    font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: .4px;
}
.detail-tabs-comment__badge--seller { background: rgba(250,200,80,.12); color: #fac850; }
.detail-tabs-comment__badge--buyer { background: rgba(99,179,237,.12); color: #63b3ed; }
.detail-tabs-comment__date { font-size: 12px; color: #64748b; }
.detail-tabs-comment__text { font-size: 14px; color: #cbd5e1; margin: 0; line-height: 1.6; }
.detail-tabs-comment-form__note {
    font-size: 13px; color: #64748b; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 0; padding: 12px; background: var(--ov-02);
    border-radius: 10px; border: 1px dashed var(--ov-08);
}
.detail-tabs-comment-form__note a { color: #fac850; text-decoration: none; font-weight: 600; }
.detail-tabs-comment-form__note a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 991.98px) {
    .detail-tabs-left { position: static !important; }
    .detail-tabs-detail-item { flex-basis: calc(50% - 5px); }
    .detail-tabs-seller-card__stat { flex-basis: calc(50% - 3px); }
}
@media (max-width: 575.98px) {
    .detail-tabs-price-block__amount { font-size: 26px; }
    .tab-nav { gap: 4px; }
    .tab-nav__btn { font-size: 12px; padding: 7px 10px; }
    .detail-tabs-seller-card__actions { flex-direction: column; }
}

/* 7/24 ilanları — animasyonlu aydınlatmalı çerçeve.
   Tüm kenarlığı saran gradyanlı bir çizgi; gradyan yavaşça dönerek
   renkler border boyunca akar (SVG stroke + animateTransform). */
.listing-card--24h {
    position: relative;
    animation: oi24hGlowPulse 2.8s ease-in-out infinite;
    border: none !important;
}
.oi-24h-anim {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 6; pointer-events: none;
    overflow: visible;
}
.oi-24h-anim rect { fill: none; }
.oi-24h-anim__comet {
	x: 1px;
	y: 1px;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	stroke: url(#oi24hGrad);
	stroke-width: 2;
	stroke-linejoin: round;
	/* filter: drop-shadow(0 0 3px rgba(255,190,90,.85)); */
}
@keyframes oi24hGlowPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(247,183,51,.14); }
    50% { box-shadow: 0 0 22px rgba(252,74,26,.32); }
}
@media (prefers-reduced-motion: reduce) {
    .listing-card--24h { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE HAMBURGER BUTTON
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    /* Tam genişlik kart — referans ölçeği, kompakt */

}

.mob-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 8px 7px;
    background: var(--ov-05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s;
    flex-shrink: 0;
}
.mob-hamburger span {
    display: block;
    height: 2px;
    background: #c8d8ff;
    border-radius: 2px;
    transition: transform .3s, opacity .25s;
}
.mob-hamburger:hover { background: rgba(255,255,255,.1); }
.mob-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mob-hamburger.active span:nth-child(2) { opacity: 0; }
.mob-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE OVERLAY + DRAWER
   ═══════════════════════════════════════════════════════════════════════ */
.mob-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000000;
    background: rgba(0,0,0,.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .3s;
}
.mob-overlay.active { display: block; opacity: 1; }
.mob-drawer__close:hover { background: rgba(255,255,255,.1); color: #fff; }
.mob-drawer__nav {
    padding: 8px 0;
}
.mob-drawer__nav ul li a i { font-size: 15px; opacity: .7; width: 20px; text-align: center; }
.mob-drawer__nav ul li.active a i { opacity: 1; }
.mob-drawer__action-btn--wallet {
    background: rgba(74,222,128,.1);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,.2);
}
.mob-drawer__action-btn--wallet:hover { background: rgba(74,222,128,.18); color: #4ade80; }
.mob-drawer__action-btn--login:hover { background: linear-gradient(135deg, rgba(87,176,255,.22), rgba(43,124,255,.18)); color: #8bc7ff; }
.mob-drawer__links a:hover { color: rgba(255,255,255,.7); }
.mob-drawer__links a i { font-size: 13px; width: 18px; text-align: center; }
.mob-drawer__social a:hover { color: #fff; background: rgba(255,255,255,.1); }

.mob-drawer {
    position: fixed;
    top: 0;
    z-index: 1000001;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    left: 0;
    width: min(360px, calc(100vw - 28px));
    height: 100vh;
    height: 100dvh;
    padding: 14px;
    gap: 12px;
    background:#16181f;
    border-right: 1px solid rgba(255,255,255,.1);
    box-shadow: none;
    transform: translateX(calc(-100% - 18px));
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    overflow-x: hidden;
}

@supports (scrollbar-width: thin) {
    .mob-drawer {
        scrollbar-width: thin;
        scrollbar-color: rgba(87,176,255,.38) var(--ov-05);
    }
}

.mob-drawer::-webkit-scrollbar {
    width: 10px;
}

.mob-drawer::-webkit-scrollbar-track {
    background: var(--ov-05);
}

.mob-drawer::-webkit-scrollbar-thumb {
    background-color: rgba(87,176,255,.38);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.mob-drawer::-webkit-scrollbar-corner {
    background: transparent;
}

.mob-drawer.active {
    left: 0;
    transform: translateX(0);
    box-shadow: 28px 0 70px rgba(0,0,0,.52);
}

.mob-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 2px;
    border-bottom: 0;
}

.mob-drawer__head .header-brand img {
    height: 31px;
}

.mob-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.1);
    font-size: 16px;
    cursor: pointer;
    transition: background .2s, color .2s;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--ov-06);
    color: rgba(219,232,255,.76);
}

.mob-drawer__account {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px 0 var(--ov-04);
}

.mob-drawer__avatar {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(87,176,255,.14);
    box-shadow: 0 0 0 1px rgba(87,176,255,.22);
}

.mob-drawer__account-copy > span,
.mob-drawer__section-title {
    color: rgba(139,163,199,.86);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.mob-drawer__account-copy strong {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mob-drawer__account-copy small {
    color: rgba(203,218,241,.66);
    font-size: 11px;
    line-height: 1.35;
}

.mob-drawer__actions {
    flex-direction: column;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    border-top: 0;
}

.mob-drawer__action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
    position: relative;
    justify-content: flex-start;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 12px;
    color: #dbe8ff;
    background: rgba(255,255,255,.045);
    border: 1px solid var(--ov-08);
}

.mob-drawer__action-btn .material-symbols-outlined {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(87,176,255,.13);
    color: #8bc7ff;
    font-size: 18px;
}

.mob-drawer__action-btn .cart-count {
    position: static;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mob-drawer__action-btn--login {
    color: #8bc7ff;
    border: 1px solid rgba(87,176,255,.2);
    grid-column: 1 / -1;
    justify-content: center;
    background: linear-gradient(135deg, rgba(87,176,255,.2), rgba(43,124,255,.12));
    border-color: rgba(87,176,255,.25);
}

.mob-drawer__action-btn--cart:hover,
.mob-drawer__action-btn--wallet:hover,
.mob-drawer__action-btn--login:hover {
    color: #fff;
    background: rgba(87,176,255,.12);
}

.mob-drawer__nav,
.mob-drawer__links {
    padding: 0;
}

.mob-drawer__section-title {
    display: block;
    margin: 0 0 8px;
    padding: 0 4px;
}

.mob-drawer__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mob-drawer__nav ul li a {
    display: flex;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s, background .2s;
    min-height: 58px;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    color: rgba(219,232,255,.78);
    font-size: 12px;
}

.mob-drawer__nav ul li a .material-symbols-outlined,
.mob-drawer__links a .material-symbols-outlined {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(87,176,255,.1);
    color: rgba(139,199,255,.9);
    font-size: 18px;
}

.mob-drawer__nav ul li a:hover,
.mob-drawer__nav ul li.active a {
    color: #fff;
    background: rgba(87,176,255,.14);
    border-color: rgba(87,176,255,.28);
}

.mob-drawer__links {
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-top: 0;
}

.mob-drawer__links a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: color .2s;
    padding: 9px 4px;
    color: rgba(219,232,255,.7);
    font-size: 12px;
}

.mob-drawer__trust {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 13px;
    background: rgba(72,216,124,.08);
    border: 1px solid rgba(72,216,124,.16);
}

.mob-drawer__trust > .material-symbols-outlined {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(72,216,124,.12);
    color: #48d87c;
}

.mob-drawer__trust strong,
.mob-drawer__trust small {
    display: block;
}

.mob-drawer__trust strong {
    color: #e7fff0;
    font-size: 12px;
}

.mob-drawer__trust small {
    margin-top: 2px;
    color: rgba(208,255,225,.62);
    font-size: 11px;
    line-height: 1.35;
}

.mob-drawer__social {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    padding: 0;
    margin-top: auto;
    border-top: 0;
}

.mob-drawer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.4);
    background: var(--ov-04);
    border: 1px solid var(--ov-08);
    text-decoration: none;
    font-size: 15px;
    transition: color .2s, background .2s;
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

/* body scroll lock when drawer open */
body.mob-menu-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — 991px (tablet)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .site-header__topbar { display: none; }
    .mob-hamburger { display: flex; }

    /* Mobil menüye geçildiğinde site logosu minimal (ikon) logoya döner. */
    .header-brand__full { display: none; }
    .header-brand__minimal { display: block; }
    /* Fixed floating header (top:16 + ~74px bar) içeriği örtmesin */
    body { padding-top: 104px; }
    .floating-header {
        top: 10px;
        left: 12px;
        right: 12px;
    }

    /* Header main: logo + hamburger + compact icons */
    .site-header__main {
        gap: 10px;
    }
    .site-header__search-slot { display: none !important; }
    .site-header__main > .user-panel {
        margin-left: auto;
        gap: 4px;
    }
    /* Tablette cüzdanda yalnızca etiket ve CTA metni gizlenir; ikon rozeti + bakiye + "+" kalır */
    .header-btn--wallet__label,
    .header-btn--wallet__cta-text { display: none; }
    /* Misafirde bakiye bloğu olmadığı için CTA metni gizlenirse geriye yalnız
       bir "+" kalır ve ne olduğu anlaşılmaz. Metin kalıyor; bakiye yer
       kaplamadığı için genişlik yine giriş yapılmış hâlle benzer. */
    .header-btn--wallet--guest .header-btn--wallet__cta-text { display: inline; }
    .header-btn--wallet { height: 44px; gap: 8px; }
    .header-btn--wallet__info { min-width: 0; padding-right: 10px; }
    .header-btn--wallet__cta { padding: 0 10px; }
    /* Hide lang selector & login text */
    .user-panel .lang-selector { display: none; }
    .user-panel .site-header__auth .login-btn span { display: none; }
    .user-panel .site-header__auth .login-btn { padding: 0; width: 40px; height: 40px; border-radius: 10px; }

    /* Hero section */
    .hero-section .col-9 { flex: 0 0 100%; max-width: 100%; }
    .hero-section .col-3 {
        flex: 0 0 100%;
        max-width: 100%;
        flex-direction: row !important;
        gap: 14px;
    }
    .hero-side-card { flex: 1; min-height: 180px; }

    /* Pop game logos: scrollable */
    .popgamefav { gap: 8px; }
    .popgamefav .featured-game-logo { min-width: 0; flex: 0 0 144px; }

    /* Pop game cards */
    .popular_game_sect .col-md-2 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    /* Footer grid: 2 columns */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    .footer-brand-col { grid-column: 1 / -1; }
    .footer-brand-desc { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — 767px (mobile landscape)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Hero side cards: stack vertically */
    .hero-section .col-3 {
        flex-direction: column !important;
        gap: 10px;
    }
    .hero-side-card { padding: 16px 14px; }

    /* Slider height */
    .slider-accordion {
        --slider-preview-width: 100%;
        --slider-panel-width: 100%;
        flex-wrap: wrap;
        height: auto;
    }

    /* Pop game cards: 2 per row */
    .popular_game_sect .col-md-2 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Section titles */
    .d-flex.align-items-center.justify-content-between.mb-4 {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .footer-main { padding: 32px 0 24px; }
    .footer-payments { flex-direction: column; gap: 10px; margin-top: 24px; padding-top: 20px; }
    .footer-payments__label { margin-right: 0; }
    .footer-bottom__inner { flex-direction: column; align-items: flex-start; gap: 10px; }
    .footer-bottom__links { flex-wrap: wrap; gap: 12px; }

    /* HIC card body spacing */

}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — 575px (mobile portrait)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    /* Container padding */
    .container { padding-left: 12px; padding-right: 12px; }
    .header-brand img { height: 26px; }

    /* Telefonda yükleme bağlantısı, erişilebilir adı olan kompakt bir + butonudur. */
    .header-btn--wallet__info,
    .header-btn--wallet__icon,
    .header-btn--wallet__cta-text,
    .header-btn--wallet--guest .header-btn--wallet__cta-text { display: none; }
    .header-btn--wallet { width: 44px; height: 44px; gap: 0; border-radius: 12px; }
    .header-btn--wallet__cta { width: 36px; height: 36px; padding: 0; border-radius: 9px; }
    .header-btn--notif,
    .header-btn--cart { width: 36px; height: 36px; font-size: 15px; }

    /* Slider section */
    section.slider, section.hero-section { padding: 16px 0 calc(118px + 30px); }

    /* Pop game logos */
    .popgamefav .featured-game-logo { flex-basis: 132px; min-height: 72px; padding: 14px; }
    .popgamefav .featured-game-logo figure img { height: 32px; }

    /* Section spacing */
    .section-block.pt-60 { padding-top: 32px !important; }
    .section-block.pb-60 { padding-bottom: 32px !important; }

    /* HIC cards tighter */

    /* Footer */
    .footer-links-col { gap: 10px; }
    .payment-badge { font-size: 10px; padding: 4px 8px; }

    /* Mobile drawer */
    .mob-drawer {
        left: 0;
        width: min(340px, calc(100vw - 24px));
        padding: 12px;
    }

    .mob-drawer__nav ul {
        gap: 7px;
    }

    .mob-drawer__nav ul li a {
        min-height: 54px;
        font-size: 11px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Anasayfa grid'leri (col-2 tabanlı bölümler)
   account-listings (.row.big) ve broadcasters (.broadcaster-grid)
   her ekranda 6 sütun kalıyordu; tablet 3, telefon 2 sütuna düşürülür.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
    .account-section .row.big > .col-2,
    .broadcaster-grid > .col-2 {
        flex: 0 0 33.333%;
        width: 33.333%;
        max-width: 33.333%;
    }
}

@media (max-width: 575.98px) {
    .account-section .row.big > .col-2,
    .broadcaster-grid > .col-2 {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }

    /* "Tüm İlanlar" başlık satırı butonu telefon için kompakt */
    .ko-item__new-btn {
        font-size: 12px;
        padding: 8px 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   LISTING CARD — ilan kartı (tek kaynak; 24h animasyonu ayrı blokta)
═══════════════════════════════════════════════════════════════════════ */
.listing-card-col {
    display: flex;
    container-type: inline-size;
}

.listing-card {
    --lc-bg: #071019;
    --lc-panel: rgba(255,255,255,.025);
    /* Kenarlik sitenin notr token'iyla ayni aileye cekildi; eski
       rgba(156,169,184,.26) kart hatlarini fazla one cikariyordu. */
    --lc-line: rgba(255,255,255,.085);
    --lc-muted: rgba(226,232,240,.68);
    --lc-gold: #f7b733;
    --lc-gold-strong: #ffc34a;
    --lc-red: #ff5c62;
    width: 100%;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: clamp(12px, 4cqi, 14px);
    overflow: hidden;
    border: 1px solid var(--lc-line);
    border-radius: 12px;
    background: var(--c-surface);
    /* Golge 20px/54px'ten cok hafife indirildi: grid'de 24 kart yan yana
       dururken her biri kendi golgesini basinca zemin bulaniklasiyordu. */
    box-shadow: 0 2px 10px rgba(0,0,0,.20);
    color: #fff;
    container-type: inline-size;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.listing-card:hover {
    /* Yukselme (translateY) kaldirildi: 24 kartlik grid'de imlec gezdirirken
       kartlarin sicramasi huzursuz duruyordu. Geri bildirim icin kenarlik
       aydinlanmasi yeterli. */
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 4px 16px rgba(0,0,0,.28);
}

.listing-card__header {
    display: block;
    padding: 0;
    overflow: visible;
    background: transparent;
}

.listing-card__header::after {
    display: none;
}

.listing-card__item-row {
    position: relative;
    display: block;
    width: 100%;
}

.listing-card__thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 30 / 25;
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    background:
        radial-gradient(circle at 52% 32%, rgba(255,255,255,.13), transparent 38%),
        linear-gradient(145deg, #2a2d2e, #14191c 72%);
    color: inherit;
    text-decoration: none;
}

.listing-card__thumb::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    height: 48%;
    background: linear-gradient(180deg, rgba(8,10,13,0), rgba(8,11,14,.78) 64%, rgba(8,11,14,.96));
    pointer-events: none;
}

.listing-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    opacity: 1;
    filter: saturate(1.06) contrast(1.05);
    transform: scale(1);
    transition: filter .22s ease, transform .22s ease;
}

.listing-card:hover .listing-card__thumb img {
    opacity: 1;
    filter: saturate(1.14) contrast(1.08);
    transform: scale(1.035);
}

.listing-card__img-count {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(10,15,24,.72);
    color: #dbe8ff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.listing-card__img-count .material-symbols-outlined {
    font-size: 13px;
}

.listing-card__item-info {
    position: absolute;
    left: clamp(12px, 5.1cqi, 15px);
    right: clamp(50px, 21cqi, 60px);
    bottom: clamp(12px, 5.1cqi, 15px);
    z-index: 2;
    min-width: 0;
    text-align: left;
    text-shadow: 0 2px 12px rgba(0,0,0,.86);
    pointer-events: none;
}

.listing-card__item-name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}

.listing-card__item-server {
    margin-top: clamp(4px, 1.8cqi, 6px);
    overflow: hidden;
    color: rgba(232,236,242,.72);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card__fav {
    position: absolute;
    top: clamp(11px, 4.8cqi, 14px);
    right: clamp(11px, 4.8cqi, 14px);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 11cqi, 32px);
    height: clamp(28px, 11cqi, 32px);
    padding: 0;
    border: 0;
    border-radius: clamp(9px, 3.3cqi, 12px);
    background: rgba(8,14,21,.9);
    box-shadow: 0 2px 8px rgba(0,0,0,.24);
    color: #fff;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.listing-card__fav .material-symbols-outlined {
    font-size: clamp(16px, 6.6cqi, 19px);
    line-height: 1;
}

.listing-card__fav:hover {
    background: rgba(18,26,35,.98);
    color: #fff;
}

.listing-card__fav--active {
    background: rgba(255,92,98,.15);
    color: var(--lc-red);
}

.listing-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: clamp(8px, 3cqi, 9px);
    padding: clamp(8px, 3.2cqi, 10px) 0 0;
}

.listing-card__seller {
    display: flex;
    align-items: center;
    gap: clamp(8px, 4cqi, 11px);
    color: #fff;
}

.listing-card__seller-avatar {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    /* Altin kenarlik + cift halka golgesi + radial parlama kaldirildi;
       avatar kartin en dikkat cekici ogesi olmamali. */
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    background: rgba(12,18,25,.96);
    line-height: 1;
    text-decoration: none;
}

.listing-card__seller-avatar::before {
    display: none;
}

.listing-card__seller-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.listing-card__seller-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(3px, 1.5cqi, 5px);
}

.listing-card__seller-name {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card__seller-name:hover {
    color: #fff;
}

.listing-card__status {
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 2.2cqi, 6px);
    width: auto;
}

.listing-card__status .material-symbols-outlined {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(148,163,184,.92);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
    font-size: 0;
}

.listing-card__status small {
    overflow: hidden;
    color: rgba(226,232,240,.62);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.listing-card__status--online .material-symbols-outlined {
    background: #55d95f;
}

.listing-card__status--online small {
    color: #62d966;
}

.listing-card__rating-box {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 2.2cqi, 6px);
}

.listing-card__rating-box .material-symbols-outlined {
    color: rgba(222,229,238,.76);
    font-size: 14px;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48;
}

.listing-card__rating {
    color: var(--lc-gold-strong);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* 7/24 teslimat çipi — görselin (thumb) sol üst köşesine overlay (fav'ın simetriği) */
.listing-card__delivery-24h {
    position: absolute;
    top: clamp(10px, 3cqi, 16px);
    left: clamp(10px, 3cqi, 16px);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 1.4cqi, 6px);
    max-width: calc(100% - clamp(60px, 17cqi, 84px));
    padding: clamp(5px, 1.6cqi, 8px) clamp(8px, 2.4cqi, 12px);
    border: 1px solid rgba(255,195,74,.32);
    border-radius: 999px;
    background: rgba(8,13,20,.82);
    color: var(--lc-gold-strong);
    font-size: clamp(8px, 2.8cqi, 11px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.listing-card__delivery-24h .material-symbols-outlined {
    flex: 0 0 auto;
    color: var(--lc-gold-strong);
    font-size: clamp(13px, 3.6cqi, 16px);
}

.listing-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 3.6cqi, 10px);
}

.listing-card__stat {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(8px, 4cqi, 11px);
    min-height: clamp(40px, 16cqi, 45px);
    padding: 10px;
    overflow: hidden;
    border: 1px solid var(--lc-line);
    border-radius: clamp(12px, 4.4cqi, 18px);

    color: #fff;
    text-align: left;
}

.listing-card__stat .material-symbols-outlined {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #071019;
    font-size: 13px;
    font-variation-settings: 'FILL' 1, 'wght' 800, 'GRAD' 0, 'opsz' 48;
}

.listing-card__stat--ok .material-symbols-outlined {
    background: #42c65b;
}

.listing-card__stat--fail .material-symbols-outlined {
    background: #ef424f;
}

.listing-card__stat strong {
    display: flex;
    flex-direction: column;
    gap: clamp(3px, 1.4cqi, 5px);
    min-width: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.listing-card__stat strong span {
    display: block;
    margin: 0;
    overflow: hidden;
    color: rgba(226,232,240,.75);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card__timer {
    display: grid;
    grid-template-columns: auto repeat(4, minmax(0, 1fr));
    align-items: center;
    min-height: clamp(38px, 15cqi, 42px);
    padding: 10px;
    border: 1px solid var(--lc-line);
    border-radius: clamp(12px, 4.4cqi, 18px);
    
    color: var(--lc-muted);
    font-variant-numeric: tabular-nums;
}

.listing-card__timer .material-symbols-outlined {
    width: clamp(26px, 11cqi, 32px);
    color: rgba(226,232,240,.76);
    font-size: 20px;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48;
}

.listing-card__timer > span:not(.material-symbols-outlined) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding-inline: clamp(4px, 2.2cqi, 7px);
    border-left: 1px solid rgba(156,169,184,.18);
}

.listing-card__timer > span:nth-child(2) {
    border-left: 0;
}

.listing-card__timer strong {
    margin: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.listing-card__timer small {
    margin-top: clamp(2px, 1.3cqi, 4px);
    color: rgba(226,232,240,.64);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.listing-card__purchase {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 2.6cqi, 8px);
    padding: 10px;
    /* Kenarlik kaldirildi. border-radius birakildi: su an gorunur etkisi yok
       (zemin de yok), ama ileride bir zemin eklenirse kose yuvarlamasi hazir. */
    border-radius: clamp(12px, 4.4cqi, 15px);
}

.listing-card__purchase--sale {
    padding: 0;
}

.listing-card__price-row {
    display: flex;
    align-items: center;
    gap: clamp(7px, 3.3cqi, 10px);
    min-width: 0;
    margin: 0;
}

.listing-card__discount-badge {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Sabit 27px yukseklik. Dikey dolgu sifirlandi, boylece box-sizing ne
       olursa olsun yukseklik tam 27px kalir; iki satirlik icerik (oran +
       "INDIRIM") justify-content:center ile dikeyde ortalanir. */
    height: 27px;
    padding: 0 9px;
    border-radius: 7px;
    background: #e23b48;
    color: #fff;
    line-height: 1;
}

.listing-card__discount-badge strong {
    font-size: 13px;
    font-weight: 800;
    line-height: .95;
}

.listing-card__discount-badge small {
    margin-top: 1px;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1;
    opacity: .92;
}

.listing-card__price-col {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    gap: clamp(2px, .67cqi, 4px);
}

.listing-card__old-price {
    color: rgba(226,232,240,.46);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    white-space: nowrap;
}

.listing-card__price {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: .95;
    white-space: nowrap;
}

.listing-card__price-row--sale .listing-card__price {
    color: #fff;
}

.listing-card__price small {
    margin-left: 3px;
    /* Fiyat 18px -> 16px'e indigi icin ek de kucultuldu; eski clamp'in ust
       siniri 17px idi ve ek, fiyattan buyuk gorunuyordu. */
    font-size: 12px;
    font-weight: 700;
}

.listing-card__actions {
	display: flex;
	gap: 0;
	margin: 0;
	flex: 1 0 auto;
	align-items: end;
}

/* SATIN AL = site component butonu (.btn-o--gold). Karta özel sadece ikon
   boyutu ve uzun başlık kırpması ayarlanır; renk/zemin/hover componentten gelir. */
.listing-card__btn--buy .material-symbols-outlined {
    font-size: 18px;
}

.listing-card__btn-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   PROMO STATS BANNER
══════════════════════════════════════════════════════════════════════ */
.promo-stats {
    position: relative;
    padding: 64px 0;

}
.promo-stats__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(to right,#002d56,#0156a3);
}
.promo-stats__char {
	position: absolute;
	bottom: 0;
	z-index: 0;
	height: 115%;
	max-height: 420px;
	object-fit: contain;
	pointer-events: none;
	filter: grayscale(.2);
	transition: opacity .4s;
}

.promo-stats__char--left {
    left: 0;
}
.promo-stats__char--right {
    right: 0;
}
.promo-stats__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}
.promo-stats__title {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.3;
}
.promo-stats__title span {
    background: linear-gradient(135deg, var(--c-primary), #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.promo-stats__desc {
    font-size: 14px;
    color: rgba(255,255,255,.55);
    margin: 0 0 20px;
    line-height: 1.6;
    max-width: 420px;
}
.promo-stats__cta {
    display: inline-flex;
}
.promo-stats__counters {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}
.promo-stats__counter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 20px 24px;
	background: var(--ov-04);
	border: 1px solid var(--ov-06);
	border-radius: 14px;
	min-width: 100px;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: border-color .3s, background .3s;
	box-shadow: 0 8px 10px #0000001a;
}
.promo-stats__counter:hover {
    background: var(--ov-07);
    border-color: rgba(87,176,255,.2);
}
.promo-stats__counter strong {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.promo-stats__counter strong span {
    color: var(--c-primary);
}
.promo-stats__counter small {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    letter-spacing: .5px;
}

@media (max-width: 991.98px) {
    .promo-stats__inner { flex-direction: column; text-align: center; gap: 32px; }
    .promo-stats__desc { margin-left: auto; margin-right: auto; }
    .promo-stats__counters { flex-wrap: wrap; justify-content: center; }
    .promo-stats__char { display: none; }
}
@media (max-width: 575.98px) {
    .promo-stats { padding: 40px 0; }
    .promo-stats__title { font-size: 22px; }
    .promo-stats__counter { padding: 16px 18px; min-width: 80px; }
    .promo-stats__counter strong { font-size: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════
   PARALLAX PROMO
══════════════════════════════════════════════════════════════════════ */
.parallax-promo {
    --promo-blue: var(--c-primary, #57b0ff);
    position: relative;
    isolation: isolate;
    margin: 40px 0;
    overflow: hidden;
    border-block: 1px solid rgba(87,176,255,.18);
    background: #0c131f;
}

.parallax-promo__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: center;
    gap: clamp(28px, 4vw, 64px);
    min-height: 440px;
    padding-block: clamp(48px, 5vw, 80px);
}

.parallax-promo::before {
    content: "";
    position: absolute;
    inset: 0 8% auto;
    z-index: 2;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(87,176,255,.6), transparent);
    pointer-events: none;
}

.parallax-promo__inner--text-only {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
}

.parallax-promo__inner--text-only .parallax-promo__content {
    max-width: 900px;
}

.parallax-promo__inner--text-only .parallax-promo__desc {
    margin-inline: auto;
}

.parallax-promo__inner--text-only .parallax-promo__actions {
    justify-content: center;
}

.parallax-promo__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: .16;
    pointer-events: none;
}

.parallax-promo__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at 88% 38%, rgba(87,176,255,.14), transparent 58%),
        linear-gradient(110deg, rgba(10,16,26,.94) 0%, rgba(10,16,26,.78) 46%, rgba(10,16,26,.2) 100%);
    pointer-events: none;
}

.parallax-promo__content {
    position: relative;
    z-index: 3;
    min-width: 0;
    max-width: 680px;
}

.parallax-promo__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 5px 12px 5px 5px;
    margin-bottom: 22px;
    border: 1px solid rgba(87,176,255,.18);
    border-radius: 999px;
    background: rgba(87,176,255,.06);
    color: #aed9ff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.parallax-promo__badge .material-symbols-outlined {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(87,176,255,.12);
    color: var(--promo-blue);
    font-size: 16px;
}

.parallax-promo__title {
    margin: 0 0 18px;
    color: #f4f7fc;
    font-size: clamp(32px, 3.6vw, 54px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.parallax-promo__title span {
    display: block;
    margin-top: 6px;
    color: var(--promo-blue);
    font-size: 1.1em;
    background: linear-gradient(110deg, #a4d7ff, var(--promo-blue) 72%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.parallax-promo__desc {
    max-width: 50ch;
    margin: 0 0 28px;
    color: #a9b6c9;
    font-size: 15px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.parallax-promo__actions {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}

.parallax-promo__actions .parallax-promo__cta {
    min-height: 48px;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
}

.parallax-promo__cta .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 19px;
}

.parallax-promo__cta--primary {
    box-shadow: 0 8px 24px rgba(87,176,255,.14);
}

.parallax-promo__cta--secondary {
    border: 1px solid var(--ov-12);
    background: var(--ov-03);
    color: #d0daea;
}

.parallax-promo__cta--secondary:hover {
    border-color: rgba(87,176,255,.4);
    background: rgba(87,176,255,.08);
    color: #fff;
}

.parallax-promo__cta:focus-visible {
    outline: 2px solid var(--promo-blue);
    outline-offset: 4px;
}

.parallax-promo__showcase {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    justify-self: center;
    width: 100%;
    max-width: 540px;
    min-width: 0;
    aspect-ratio: 16 / 10;
}

.parallax-promo__showcase::before,
.parallax-promo__showcase::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.parallax-promo__showcase::before {
    inset: -8% 2%;
    background: radial-gradient(ellipse, rgba(87,176,255,.16), transparent 70%);
}

.parallax-promo__showcase::after {
    width: 80%;
    aspect-ratio: 1;
    border: 1px solid rgba(87,176,255,.1);
    box-shadow: 0 0 0 28px rgba(87,176,255,.025), 0 0 0 56px rgba(87,176,255,.015);
}

.parallax-promo__game {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    max-height: 340px;
    object-fit: contain;
    filter: drop-shadow(0 22px 24px rgba(0,0,0,.35));
    transition: transform .4s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .parallax-promo__inner:hover .parallax-promo__game {
        transform: translateY(-5px);
    }
}

@media (max-width: 991.98px) {
    .parallax-promo__inner {
        gap: 28px;
        padding-block: 48px;
    }

    .parallax-promo__bg {
        background-attachment: scroll;
    }
}

@media (max-width: 767.98px) {
    .parallax-promo {
        margin-block: 28px;
    }

    .parallax-promo__inner {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        gap: 26px;
        padding-block: 40px;
    }

    .parallax-promo__showcase {
        max-width: 360px;
        aspect-ratio: 16 / 9;
    }

    .parallax-promo__game {
        max-height: 220px;
    }

    .parallax-promo__overlay {
        background:
            radial-gradient(ellipse at 50% 94%, rgba(87,176,255,.14), transparent 62%),
            linear-gradient(180deg, rgba(10,16,26,.94), rgba(10,16,26,.5));
    }
}

@media (max-width: 575.98px) {
    .parallax-promo__inner {
        padding-block: 32px;
    }

    .parallax-promo__badge {
        margin-bottom: 18px;
        font-size: 11px;
    }

    .parallax-promo__title {
        font-size: clamp(28px, 8vw, 34px);
    }

    .parallax-promo__desc {
        margin-bottom: 24px;
        font-size: 14px;
    }

    .parallax-promo__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .parallax-promo__actions .parallax-promo__cta {
        width: 100%;
        padding-inline: 10px;
        gap: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .parallax-promo__bg {
        background-attachment: scroll;
    }

    .parallax-promo__game,
    .parallax-promo__cta {
        transition: none;
    }
}


.broadcaster-grid {
    row-gap: 14px;
}

.broadcaster-grid .broadcaster-card {
    min-width: unset;
    flex-shrink: unset;
    height: 100%;
}

/* ══════════════════════════════════════════
   AUTH PAGES  (giris / kayit / sifremi-unuttum / otp)
══════════════════════════════════════════ */

/* ── Full-screen layout ── */
.auth-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 16px;
    overflow: hidden;
}

.auth-page__bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(87,176,255,.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(87,176,255,.05) 0%, transparent 50%);
    pointer-events: none;
}

.auth-page__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 480px;
}

/* ── Logo ── */
.auth-page__logo {
    display: inline-flex;
    margin-bottom: 32px;
}
.auth-page__logo img {
    height: 36px;
    width: auto;
}

/* ── Legal footer ─ */
.auth-page__legal {
    margin-top: 28px;
    font-size: 12px;
    color: var(--c-text-subtle);
    text-align: center;
}

/* ── Card container ── */
.auth-card {
    width: 100%;
    max-width: 480px;
    padding: 40px 36px;
    background: linear-gradient(168deg, rgba(22,33,54,.92) 0%, rgba(13,18,28,.96) 100%);
    border: 1px solid var(--ov-07);
    border-radius: 18px;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 28px 70px rgba(0,0,0,.45);
}

/* ── Header / brand ── */
.auth-card__header {
    position: relative;
    z-index: 1;
    margin-bottom: 26px;
    text-align: center;
}
.auth-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: rgba(87,176,255,.12);
    border: 1px solid rgba(87,176,255,.22);
    color: var(--c-primary);
    font-size: 24px;
}
.auth-card__icon--success {
    background: rgba(52,211,153,.12);
    border-color: rgba(52,211,153,.22);
    color: var(--c-success);
}
.auth-card__title {
    margin: 0 0 10px;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}
.auth-card__desc {
    margin: 0;
    color: #95a5bd;
    font-size: 14px;
    line-height: 1.6;
}

/* ── Form ── */
.auth-card__form {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.auth-card__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
/* Toggle password */
.auth-card__toggle-pw {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--c-text-subtle);
    cursor: pointer;
    transition: color .2s, background .2s;
}
.auth-card__toggle-pw:hover {
    color: #fff;
    background: var(--ov-08);
}

/* Password strength */
.auth-card__pw-strength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}
.auth-card__pw-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--ov-08);
    overflow: hidden;
}
.auth-card__pw-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width .3s, background .3s;
}
.auth-card__pw-strength small {
    font-size: 11px;
    white-space: nowrap;
}
.auth-card__pw-strength[data-level="1"] .auth-card__pw-bar span { width: 25%; background: var(--c-danger); }
.auth-card__pw-strength[data-level="1"] small { color: var(--c-danger); }
.auth-card__pw-strength[data-level="2"] .auth-card__pw-bar span { width: 50%; background: var(--c-warning); }
.auth-card__pw-strength[data-level="2"] small { color: var(--c-warning); }
.auth-card__pw-strength[data-level="3"] .auth-card__pw-bar span { width: 75%; background: var(--c-primary); }
.auth-card__pw-strength[data-level="3"] small { color: var(--c-primary); }
.auth-card__pw-strength[data-level="4"] .auth-card__pw-bar span { width: 100%; background: var(--c-success); }
.auth-card__pw-strength[data-level="4"] small { color: var(--c-success); }
.auth-card__remember {
    color: #95a5bd;
    font-size: 13px;
}
.auth-card__link {
    color: #8bc7ff;
    font-size: 13px;
    text-decoration: none;
    transition: color .2s;
}
.auth-card__link:hover { color: #c9e7ff; }

/* Checkbox (terms) */
.auth-card__checkbox {
    color: #95a5bd;
    font-size: 13px;
    line-height: 1.5;
}
.auth-card__checkbox a {
    color: #8bc7ff;
    text-decoration: none;
}
.auth-card__checkbox a:hover { color: #c9e7ff; }

/* Feedback / alert */
.auth-card__feedback {
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
}
.auth-card__feedback--error {
    background: rgba(248,113,113,.1);
    border: 1px solid rgba(248,113,113,.25);
    color: #fca5a5;
}
.auth-card__feedback--success {
    background: rgba(52,211,153,.1);
    border: 1px solid rgba(52,211,153,.25);
    color: #6ee7b7;
}

/* Divider */
.auth-card__divider {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
}
.auth-card__divider::before,
.auth-card__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ov-08);
}
.auth-card__divider span {
    color: var(--c-text-subtle);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Social login buttons */
.auth-card__social {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.auth-card__social-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    background: var(--ov-04);
    color: #dbe8ff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.auth-card__social-btn:hover {
    background: var(--ov-08);
    border-color: rgba(255,255,255,.18);
}
.auth-card__social-btn--discord:hover {
    border-color: rgba(88,101,242,.4);
    background: rgba(88,101,242,.1);
}
.auth-card__social-btn--discord i { color: #5865F2; font-size: 18px; }

@media (max-width: 480px) {
    .auth-card__social {
        flex-direction: column;
    }
}

/* Footer link */
.auth-card__footer {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--ov-06);
    font-size: 14px;
    color: #95a5bd;
}
.auth-card__footer a {
    color: #8bc7ff;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s;
}
.auth-card__footer a:hover { color: #c9e7ff; }

/* Resend button */
.auth-card__resend {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 10px;
    border: 0;
    background: transparent;
    color: var(--c-text-subtle);
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    transition: color .2s;
}
.auth-card__resend:not(:disabled):hover { color: #8bc7ff; }
.auth-card__resend:disabled { cursor: not-allowed; opacity: 0.5; }

/* Step visibility */
.auth-card__step[hidden] { display: none; }

/* ══════════════════════════════════════════
   OTP INPUT BOXES
══════════════════════════════════════════ */
.otp-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.otp-input {
    width: 52px;
    height: 60px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 0;
    background: var(--ov-05);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    caret-color: var(--c-primary);
    transition: border-color .2s, background .2s, box-shadow .2s;
    outline: none;
}
.otp-input:focus {
    background: var(--ov-08);
    border-color: rgba(87,176,255,.5);
    box-shadow: 0 0 0 0.18rem rgba(87,176,255,.14);
}
.otp-input.filled {
    border-color: rgba(87,176,255,.35);
    background: rgba(87,176,255,.06);
}
.otp-input.is-invalid {
    border-color: rgba(248,113,113,.6);
    box-shadow: 0 0 0 0.18rem rgba(248,113,113,.12);
    animation: otpShake .4s ease;
}
.otp-separator {
    color: var(--c-text-subtle);
    font-size: 18px;
    -webkit-user-select: none;
    user-select: none;
}

@keyframes otpShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* ══════════════════════════════════════════
   AUTH PAGE — RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .auth-page { padding: 24px 12px; }
    .auth-card { padding: 28px 20px 24px; }
    .auth-card__title { font-size: 22px; }
    .auth-card__row { grid-template-columns: 1fr; }
    .otp-input { width: 44px; height: 52px; font-size: 20px; }
    .otp-inputs { gap: 7px; }
}

/* Sidebar Sub Items */
.settings-sidebar__sub {
    display: none;
    flex-direction: column;
    padding-left: 16px;
    margin-top: 2px;
}

.settings-sidebar__sub.open {
    display: flex;
}

.settings-sidebar__item--has-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.link-primary--block {
    display: block;
}

.text-muted-o {
    font-size: 12px;
    color: var(--c-text-subtle, var(--c-text-subtle));
    margin: 2px 0 0;
}

.stat-card--danger .stat-card__value {
    color: var(--c-danger, var(--c-danger));
}

.stat-card--danger {
    background: rgba(248,113,113,.06);
    border-color: rgba(248,113,113,.18);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SELLER PROFILE PAGE (sp-)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Seller name as link */
a.detail-tabs-seller-card__name { text-decoration: none; color: #f1f5f9; transition: color .2s; }
a.detail-tabs-seller-card__name:hover { color: var(--c-primary); }

/* Banner */
.sp-banner {
    background: linear-gradient(135deg, rgba(87,176,255,.08) 0%, rgba(87,176,255,.02) 100%);
    border-bottom: 1px solid var(--ov-06);
    padding: 32px 0;
}
.sp-banner__inner {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.sp-banner__avatar {
    width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
    border: 3px solid rgba(87,176,255,.3); flex-shrink: 0;
}
.sp-banner__info { flex: 1; min-width: 200px; }
.sp-banner__name {
    font-size: 24px; font-weight: 800; color: #f1f5f9; margin: 0 0 6px;
}
.sp-banner__meta {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px;
}
.sp-banner__status {
    font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px;
}
.sp-banner__status--offline { color: #94a3b8; }
.sp-banner__status--online { color: #22c55e; }
.sp-banner__dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.sp-banner__status--offline .sp-banner__dot { background: #64748b; }
.sp-banner__status--online .sp-banner__dot { background: #22c55e; }
.sp-banner__joined {
    font-size: 13px; color: #64748b; display: inline-flex; align-items: center; gap: 4px;
}
.sp-banner__joined .material-symbols-outlined { font-size: 16px; }
.sp-banner__rating { display: flex; align-items: center; gap: 8px; }
.sp-banner__score { font-size: 16px; font-weight: 700; color: var(--c-warning); }
.sp-banner__review-count { font-size: 13px; color: #64748b; }
.sp-banner__actions { flex-shrink: 0; }

/* Sidebar */
.sp-sidebar {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sp-stat-card__title {
    font-size: 14px; font-weight: 700; color: #f1f5f9; margin: 0 0 12px;
    display: flex; align-items: center; gap: 6px;
}
/* .sp-stat-grid düzeni Bootstrap .row g-2 + .col-6 ile sağlanır */
/* İkon solda, sayı + etiket sağda (stacked) — col-6 ile zaten 2'şerli */
.sp-stat-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 1px;
    background: var(--ov-03); border-radius: 8px; padding: 10px 12px;
    border: 1px solid var(--ov-04); text-align: left;
}
.sp-stat-item .material-symbols-outlined {
    grid-row: 1 / 3; grid-column: 1; align-self: center;
    font-size: 32px; line-height: 1; color: #64748b;
}
.sp-stat-item strong {
    grid-column: 2; grid-row: 1; align-self: end;
    font-size: 20px; color: #f1f5f9; line-height: 1;
}
.sp-stat-item > span:not(.material-symbols-outlined) {
    grid-column: 2; grid-row: 2; align-self: start;
    font-size: 11px; color: #64748b; font-weight: 600; line-height: 1.15;
}
.sp-stat-item--ok > .material-symbols-outlined { color: #22c55e; }
.sp-stat-item--fail > .material-symbols-outlined { color: var(--c-danger-hover); }

/* About list */
.sp-about-list { list-style: none; padding: 0; margin: 0; }
.sp-about-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--ov-04);
}
.sp-about-list li:last-child { border-bottom: none; }
.sp-about-list__label { font-size: 13px; color: #64748b; }
.sp-about-list__value { font-size: 13px; font-weight: 600; color: #f1f5f9; }
.sp-about-list__value--highlight { color: #22c55e; }

.sp-listings { display: block; }

/* Reviews */
.sp-review-summary {
    background: var(--ov-03); border: 1px solid var(--ov-06);
    border-radius: 10px; padding: 20px; margin-bottom: 16px; text-align: center;
}
.sp-review-summary__score strong {
    font-size: 40px; font-weight: 800; color: var(--c-warning); display: block; line-height: 1;
}
.sp-review-summary__score span { font-size: 13px; color: #64748b; }
.sp-review-summary__score .starmeter { justify-content: center; margin: 6px 0; }
.sp-review-list { display: flex; flex-direction: column; gap: 12px; }
.sp-review-item__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sp-review-item__avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.sp-review-item__info { flex: 1; }
.sp-review-item__info strong { font-size: 14px; color: #f1f5f9; display: block; }
.sp-review-item__date { font-size: 12px; color: #64748b; }
.sp-review-item__stars { flex-shrink: 0; }
.sp-review-item__text { font-size: 14px; color: #cbd5e1; margin: 0 0 8px; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════════════
   BROADCASTERS PAGE (bc-)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page Header */
.bc-page-header {
    background: linear-gradient(135deg, rgba(87,176,255,.08) 0%, rgba(139,92,246,.06) 100%);
    border-bottom: 1px solid var(--ov-06);
    padding: 32px 0;
}
.bc-page-header__title {
    font-size: 24px; font-weight: 800; color: #f1f5f9; margin: 0 0 6px;
    display: flex; align-items: center; gap: 8px;
}
.bc-page-header__title .material-symbols-outlined { font-size: 28px; color: var(--c-primary); }
.bc-page-header__desc { font-size: 14px; color: #94a3b8; margin: 0 0 16px; }
.bc-page-header__stats { display: flex; gap: 16px; }
.bc-page-header__stat {
    display: flex; align-items: center; gap: 6px;
    background: var(--ov-04); border: 1px solid var(--ov-06);
    border-radius: 8px; padding: 8px 16px;
}
.bc-page-header__stat strong { font-size: 18px; font-weight: 800; color: #f1f5f9; }
.bc-page-header__stat span { font-size: 12px; color: #64748b; font-weight: 600; }
.bc-page-header__stat--live strong { color: #e53e3e; }
.bc-filter__header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ov-06);
}
.bc-filter__title {
    font-size: 15px; font-weight: 700; color: #f1f5f9; margin: 0;
    display: flex; align-items: center; gap: 6px;
}
.bc-filter__clear {
    background: none; border: none; color: var(--c-primary); font-size: 12px;
    font-weight: 600; cursor: pointer; padding: 0;
}
.bc-filter__clear:hover { text-decoration: underline; }
.bc-filter__group { margin-bottom: 16px; }
.bc-filter__group:last-child { margin-bottom: 0; }
.bc-filter__group-title {
    font-size: 12px; font-weight: 700; color: #94a3b8; text-transform: uppercase;
    letter-spacing: .5px; margin: 0 0 10px;
}
.bc-filter__check {
    padding: 6px 0; font-size: 13px; color: #cbd5e1; position: relative;
}
.bc-filter__check .si { font-size: 12px; margin-right: 2px; }
.bc-filter__count {
    margin-left: auto; font-size: 11px; color: #64748b; font-weight: 600;
    background: var(--ov-04); padding: 1px 6px; border-radius: 4px;
}

/* Content Area */
.bc-content__toolbar {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
    margin-bottom: 16px;
    background: #181b21;
    border: 1px solid var(--ov-08);
    border-radius: 10px;
    padding: 14px 18px;
}
.bc-content__toolbar .bc-filter__group {
    display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0;
}
.bc-content__toolbar .bc-filter__check {
    margin: 0;
}
.bc-content__toolbar .bc-filter__clear {
    font-size: 12px;
}
.bc-content__toolbar .input-o-wrap {
    max-width: 260px; width: 100%;
}
.bc-content__result { font-size: 13px; color: #94a3b8; }
.bc-content__result strong { color: #f1f5f9; }

/* Broadcaster Grid */
.broadcaster-card {
    position: relative;
    display: block;
    padding: 0;
    border: 1px solid var(--ov-08);
    border-radius: 12px;
    text-align: left;
    transition: all .25s;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    width: 100%;
}

/* No Results */
.bc-no-results {
    text-align: center; padding: 60px 20px; color: #64748b;
}
.bc-no-results .material-symbols-outlined { font-size: 48px; margin-bottom: 12px; opacity: .5; }
.bc-no-results p { font-size: 14px; margin: 0; }

/* Responsive */
@media (max-width: 991.98px) {
    #bcGrid > .col-2 { flex: 0 0 25%; max-width: 25%; }
}
@media (max-width: 575.98px) {
    #bcGrid > .col-2 { flex: 0 0 50%; max-width: 50%; }
    .bc-page-header__stats { flex-direction: column; }
}

/* ══════════════════════════════════════════
   BROADCASTER DETAIL — .bd-*
══════════════════════════════════════════ */

/* Video Player */
.bd-video { border-radius: 12px; overflow: hidden; background: #000; }
.bd-video__player { position: relative; }
.bd-video__placeholder { position: relative; aspect-ratio: 16 / 9; }
.bd-video__placeholder img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.bd-video__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.65) 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.bd-video__live-badge {
    position: absolute; top: 14px; left: 14px;
    background: var(--c-danger-hover); color: #fff; font-size: 11px; font-weight: 700;
    padding: 3px 10px; border-radius: 4px; letter-spacing: .5px;
    animation: bd-live-pulse 2s ease-in-out infinite;
}
@keyframes bd-live-pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
.bd-video__play {
    background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.4);
    border-radius: 50%; width: 72px; height: 72px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .2s;
}
.bd-video__play:hover { background: rgba(87,176,255,.3); border-color: var(--c-primary); }
.bd-video__play .material-symbols-outlined { font-size: 40px; color: #fff; }

/* Streamer Info Bar */
.bd-streamer-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--ov-04); border: 1px solid var(--ov-08);
    border-radius: 10px; padding: 16px 20px; margin-top: 12px;
}
.bd-streamer-bar__left { display: flex; align-items: center; gap: 14px; }
.bd-streamer-bar__avatar {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(87,176,255,.4);
}
.bd-streamer-bar__name {
    font-size: 18px; font-weight: 700; color: #f1f5f9; margin: 0 0 4px;
}
.bd-streamer-bar__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.bd-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; color: #94a3b8;
    background: var(--ov-06); padding: 3px 8px; border-radius: 4px;
}
.bd-tag--live { color: var(--c-danger-hover); background: rgba(239,68,68,.12); }
.bd-tag--live .material-symbols-outlined { font-size: 8px; }
.bd-tag i { font-size: 12px; }
.bd-streamer-bar__right { display: flex; align-items: center; gap: 20px; }
.bd-streamer-bar__stat { text-align: center; }
.bd-streamer-bar__stat strong { display: block; font-size: 16px; color: #f1f5f9; }
.bd-streamer-bar__stat span { font-size: 11px; color: #64748b; }

/* Info Section */
.bd-info-section { margin-top: 20px; }
.bd-info-section__title {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 700; color: #f1f5f9; margin-bottom: 14px;
}
.bd-info-section__title .material-symbols-outlined { font-size: 20px; color: var(--c-primary); }

/* Info Cards */
.bd-info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bd-info-card {
    background: var(--ov-04); border: 1px solid var(--ov-08);
    border-radius: 10px; padding: 18px 16px;
}
.bd-info-card__icon { font-size: 28px; color: var(--c-primary); margin-bottom: 8px; display: block; }
.bd-info-card h5 { font-size: 13px; font-weight: 700; color: #e2e8f0; margin-bottom: 6px; }
.bd-info-card p { font-size: 12px; color: #94a3b8; line-height: 1.6; margin: 0; }
.bd-info-card p strong { color: var(--c-primary); }

/* ─── Sidebar ─────────────────── */
.bd-sidebar { display: flex; flex-direction: column; gap: 12px; }

/* Donate Panel */
.bd-donate-panel {
    background: var(--ov-04); border: 1px solid var(--ov-08);
    border-radius: 12px; overflow: hidden;
}
.bd-donate-panel__header {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 18px; border-bottom: 1px solid var(--ov-06);
    background: rgba(87,176,255,.04);
}
.bd-donate-panel__header .material-symbols-outlined { font-size: 20px; color: var(--c-primary); }
.bd-donate-panel__header h4 { font-size: 14px; font-weight: 700; color: #f1f5f9; margin: 0; }
.bd-donate-panel__body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

/* Quick Amounts */
.bd-donate-panel__quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bd-quick-amount {
    background: var(--ov-06); border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px; padding: 8px; text-align: center;
    color: #cbd5e1; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all .15s;
}
.bd-quick-amount:hover { border-color: rgba(87,176,255,.4); color: var(--c-primary); background: rgba(87,176,255,.08); }
.bd-quick-amount--active,
.bd-quick-amount.is-active {
    border-color: var(--c-primary); color: var(--c-primary); background: rgba(87,176,255,.12);
    box-shadow: 0 0 0 1px rgba(87,176,255,.3);
}

/* Form sarmalayıcı — body'deki flex gap düzenini form içinde sürdürür */
.bd-donate-panel__form { display: flex; flex-direction: column; gap: 14px; }

/* Fields */
.bd-donate-panel__field { display: flex; flex-direction: column; gap: 6px; }
.bd-donate-panel__field label { font-size: 12px; font-weight: 600; color: #94a3b8; }
.bd-donate-panel__field label small { font-weight: 400; color: #64748b; }
.bd-donate-panel__input-wrap {
    display: flex; align-items: center; gap: 8px;
    background: var(--ov-04); border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px; padding: 0 12px; transition: border-color .2s;
}
.bd-donate-panel__input-wrap:focus-within { border-color: rgba(87,176,255,.5); }
.bd-donate-panel__input-wrap .material-symbols-outlined { font-size: 18px; color: #64748b; }
.bd-donate-panel__input {
    flex: 1; background: none; border: none; color: #f1f5f9; font-size: 13px;
    padding: 10px 0; outline: none;
}
.bd-donate-panel__input::placeholder { color: #475569; }

/* price-input.js'in input altına eklediği yazılı tutar ("50 lira") donate
   panelinde gereksiz — tutar zaten input ve buton üzerinde görünüyor */
.bd-donate-panel__field .o-price-text { display: none !important; }
.bd-donate-panel__textarea {
    width: 100%; background: var(--ov-04); border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px; padding: 10px 12px; color: #f1f5f9; font-size: 13px;
    font-family: inherit; resize: vertical; min-height: 70px; outline: none;
    transition: border-color .2s;
}
.bd-donate-panel__textarea:focus { border-color: rgba(87,176,255,.5); }
.bd-donate-panel__textarea::placeholder { color: #475569; }
.bd-donate-panel__charcount { font-size: 11px; color: #475569; text-align: right; margin-top: -8px; }

/* Submit */
.bd-donate-panel__submit .material-symbols-outlined { font-size: 18px; }

/* Balance */
.bd-donate-panel__balance {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: #64748b; padding-top: 10px;
    border-top: 1px solid var(--ov-06);
}
.bd-donate-panel__balance .material-symbols-outlined { font-size: 16px; }
.bd-donate-panel__balance strong { color: #cbd5e1; }
.bd-donate-panel__balance a { color: var(--c-primary); margin-left: auto; font-weight: 600; text-decoration: none; }
.bd-donate-panel__balance a:hover { text-decoration: underline; }

/* Responsive — Broadcaster Detail */
@media (max-width: 991.98px) {
    .bd-streamer-bar { flex-direction: column; align-items: flex-start; }
    .bd-streamer-bar__right { width: 100%; justify-content: flex-start; gap: 14px; }
    .bd-info-cards { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .bd-video__play { width: 56px; height: 56px; }
    .bd-video__play .material-symbols-outlined { font-size: 32px; }
}

/* Responsive */
@media (max-width: 767.98px) {
    .sp-banner__inner { flex-direction: column; text-align: center; }
    .sp-banner__avatar { width: 72px; height: 72px; }
    .sp-banner__meta { justify-content: center; }
    .sp-banner__rating { justify-content: center; }
}

/* ── Responsive ── */

/* ── Settings Page Responsive ── */
@media (max-width: 991.98px) {
}

/* ── Dashboard Responsive ── */

.stat-card__value .material-symbols-outlined {
    font-size: 13px;
    vertical-align: middle;
}

/* ── Dashboard Grid Responsive ── */

/* ══════════════════════════════════════════
   PAYMENT METHOD TABS & PANELS
══════════════════════════════════════════ */
.payment-method-tabs {
    display: inline-flex;
    width: 100%;
    gap: 2px;
    padding: 3px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}

.payment-method-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--c-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--tr);
    font-family: 'Inter', sans-serif;
}

.payment-method-tab:hover {
    color: var(--c-text);
    background: var(--ov-04);
}

.payment-method-tab .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 19px;
}

.payment-method-tab.is-active {
    color: #fff;
    background: rgba(87,176,255,.15);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* Kripto sekmesindeki Otomatik (Cryptomus) / Manuel Bildirim alt seçenekleri — ana sekmelerle aynı tasarım.
   .payment-method-tab sınıfı kullanılmaz: ana sekme JS'i o sınıfa bağlı. */
.usdt-mode-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--c-text-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--tr);
    font-family: 'Inter', sans-serif;
}

.usdt-mode-tab:hover {
    color: var(--c-text);
    background: var(--ov-04);
}

.usdt-mode-tab .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 19px;
}

.usdt-mode-tab.is-active {
    color: #fff;
    background: rgba(87,176,255,.15);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.usdt-mode-tab .usdt-mode-btn__logo {
    flex: 0 0 auto;
    display: block;
    height: 22px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

@media (max-width: 575.98px) {
    .usdt-mode-tab {
        padding: 9px 10px;
        gap: 6px;
    }
    .usdt-mode-tab .usdt-mode-btn__logo {
        height: 20px;
        max-width: 110px;
    }
}

.payment-method-panel {
    margin-top: 20px;
}

.payment-method-panel__desc {
    font-size: 13px;
    color: var(--c-text-muted);
    margin-bottom: 18px;
}

/* Provider Cards (Google Pay, GPay, iyzico) — havale banka kartlarıyla aynı tasarım */
.payment-provider-card {
    min-width: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 8px;
    border: none;
    border-radius: 8px;
    background: var(--ov-02);
    text-decoration: none;
    transition: background .2s, box-shadow .2s;
    cursor: pointer;
}

.payment-provider-card:hover {
    box-shadow: 0 0 0 2px rgba(255,255,255,.18) inset;
}

.payment-provider-card.is-active {
    box-shadow: 0 0 0 2px var(--c-primary) inset;
}

.payment-provider-card img {
    height: 44px;
    max-width: min(140px, 100%);
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.payment-provider-card span {
    font-size: 12px;
    color: var(--c-text-muted);
    font-weight: 500;
}

.payment-provider-card > span:not(.ppc-ribbon):not(.material-symbols-outlined) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

.payment-security-note {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--ov-03);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    margin-top: 18px;
}

.payment-security-note .material-symbols-outlined {
    color: var(--c-primary);
    font-size: 20px;
}

.payment-security-note span:last-child {
    font-size: 12px;
    color: var(--c-text-muted);
}

.payment-action-card {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), transparent 34%),
        rgba(26,29,36,.95);
    box-shadow: 0 14px 28px rgba(0,0,0,.14);
}

.payment-action-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.payment-action-card__head strong {
    color: #fff;
    font-size: 13px;
}

.payment-action-card__head span {
    color: var(--c-text-muted);
    font-size: 12px;
}

.payment-action-card__form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    align-items: end;
    gap: 12px;
}

#cardPayBtn,
#havaleNotifyBtn {
    min-height: 44.6px;
    height: 44.6px;
}

/* Havale Info Box */
.havale-info-box {
    padding: 16px;
    background: rgba(87,176,255,.06);
    border: 1px solid rgba(87,176,255,.15);
    border-radius: 10px;
    margin-bottom: 18px;
}

.havale-info-box__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.havale-info-box__header .material-symbols-outlined {
    color: var(--c-primary);
    font-size: 20px;
}

.havale-info-box__header strong {
    font-size: 13px;
    color: #fff;
}

.havale-info-box ol {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--c-text-muted);
    line-height: 1.8;
}

/* Bank Detail Card */
.bank-detail-card {
    padding: 16px;
    background: var(--ov-03);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    margin-bottom: 18px;
    display: none;
}

.bank-detail-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.bank-detail-card__header strong {
    font-size: 13px;
    color: #fff;
}

/* .bank-detail-card__grid düzeni Bootstrap .row g-2 + .col-md-6/.col-12 ile sağlanır */
.bank-detail-card__cell {
    padding: 12px;
    border: 1px solid var(--ov-08);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
}

.bank-detail-card__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: rgba(255,255,255,.4);
    display: block;
    margin-bottom: 4px;
}

.bank-detail-card__value {
    font-size: 13px;
    color: #fff;
}

.bank-detail-card__value--mono {
    display: inline-block;
    font-size: 13px;
    color: #fff;
    font-family: monospace;
    word-break: break-all;
}

@media (max-width: 991.98px) {

    .payment-action-card__form {
        grid-template-columns: 1fr;
    }
}

/* ===== Compatibility fixes ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

a,
button,
input,
select,
textarea {
    font: inherit;
}

/* Bağlantı hover rengi — marka mavisi (buton görünümlü <a>'lar hariç) */
a {
    transition: color .15s ease;
}
a:hover {
    color: var(--c-primary);
}

button,
[type="button"],
[type="submit"] {
    -webkit-tap-highlight-color: transparent;
}

.site-header,
.site-nav,
.product-row,
.ag-card,
.game-category-card,
.product-banner,
.payment-action-card,
.bank-detail-card {
    min-width: 0;
}

.site-header__main > .site-header__search-slot,
.site-header__main > .user-panel,
.site-nav .nav,
.header-nav .nav,
.product-row__content,
.product-row__info,
.product-banner__info {
    min-width: 0;
}

.notif-menu,
.auth-menu,
.lang-selector__menu,
.search-suggestions {
    max-width: calc(100vw - 24px);
}

.notif-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    padding: 12px;
    border: 1px solid var(--ov-12);
    background: #1a1d24;
    box-shadow: 0 18px 40px rgba(0,0,0,.34);
    border-radius: 10px;
    z-index: 35;
    width: min(320px, calc(100vw - 24px));
}

@supports not (aspect-ratio: 1 / 1) {
    .ag-card {
        height: 0;
        padding-bottom: 133.333%;
    }

    .ag-card--square,
    .detail-tabs-gallery__main {
        height: 0;
        padding-bottom: 100%;
    }

    .ag-card > *,
    .detail-tabs-gallery__main > * {
        position: absolute;
        inset: 0;
    }
}

@media (max-width: 991.98px) {
    .header-top.site-header {
        display: none;
        position: sticky;
    }

    .header-nav.site-nav {
        display: block;
    }

    .site-nav__inner {
        gap: 10px;
        overflow: hidden;
    }

    .site-nav .nav,
    .header-nav .nav {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .site-nav .nav::-webkit-scrollbar,
    .header-nav .nav::-webkit-scrollbar {
        display: none;
    }

    .site-nav .nav > ul,
    .header-nav .nav > ul {
        flex-wrap: nowrap;
        width: max-content;
        min-width: 100%;
        padding-bottom: 2px;
    }

    .site-nav__right {
        flex: 0 0 auto;
    }

    .product-row {
        padding: 12px;
    }

    .product-row__icon {
        width: 76px;
        height: 76px;
    }

    /* Tablet: trade kartlarını biraz genişlet — tek değişken hem normal hem
       --single şablonu günceller (rezerve sütun mantığı bozulmaz). */
    .product-row__content {
        --trade-w: 150px;
    }

    .product-row__trade {
        padding: 8px;
    }

    .product-row__action {
        max-width: none;
    }

    .product-banner + section {
        margin-top: 0;
    }
}

@media (max-width: 575.98px) {
    .site-header__main {
        padding: 8px 0;
        flex-wrap: nowrap;
    }

    .site-header__main > .site-header__logo {
        min-width: 0;
    }

    .site-header__main > .user-panel {
        flex-wrap: nowrap;
        gap: 3px;
    }

    .notif-menu,
    .auth-menu {
        position: fixed;
        top: 58px;
        right: 12px;
        left: 12px;
        width: auto;
        min-width: 0;
        max-height: calc(100vh - 76px);
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
    }

    .product-row__main {
        align-items: flex-start;
    }

    .product-row__icon {
        width: 64px;
        height: 64px;
    }

    .payment-action-card__head {
        flex-wrap: wrap;
    }
    /* (bank-detail-card__grid mobil kırılımı Bootstrap col-md-6 ile çözülür) */
}

.product-detail-page--flat .detail-tabs {
	background: #16181f;
	/* background: radial-gradient(110% 80% at 50% 0%, rgba(87,176,255,.08), transparent 62%), linear-gradient(180deg, rgba(18,23,32,.96), rgba(10,14,20,.97)); */
}

/* Knight Online Cash detail visual language shared by Premium and Goldbar detail pages */
.product-detail-page--cash-principles {
    --cash-principle-accent-rgb: var(--main--color);
}

.product-detail-page--flat.product-detail-page--cash-principles .detail-tabs {
    background: #16181f;
    border-color: var(--ov-08);

}

.product-detail-page--cash-principles .detail-tabs__bar-fill {
    background: rgb(var(--cash-principle-accent-rgb));
}

/* Knight Online Cash tabs */
.product-detail-page--cash-tabs .tab-nav {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    width: auto;
    max-width: 100%;
    margin: 0 0 18px;
    padding: 4px;
    border: 1px solid var(--ov-07);
    border-radius: 999px;
    background: rgba(7,10,17,.45);
}

.product-detail-page--cash-tabs .tab-nav__btn {
    min-height: 40px;
    padding: 9px 17px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #8fa2bf;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    gap: 8px;
    box-shadow: none;
}

.product-detail-page--cash-tabs .tab-nav__btn:first-child {
    border-radius: 999px 0 0 999px;
}

.product-detail-page--cash-tabs .tab-nav__btn:last-child {
    border-radius: 0 999px 999px 0;
}

.product-detail-page--cash-tabs .tab-nav__btn .material-symbols-outlined {
    font-size: 19px;
    line-height: 1;
}

.product-detail-page--cash-tabs .tab-nav__btn:hover {
    color: #d7e6ff;
    background: rgba(87,176,255,.08);
    border-color: transparent;
}

.product-detail-page--cash-tabs .tab-nav__btn.active {
    color: #07111d;
    background: linear-gradient(135deg, var(--c-primary) 0%, #2b7cff 100%);
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(43,124,255,.34);
}

.product-detail-page--cash-tabs .detail-tabs__badge {
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--ov-08);
    color: #93a5bf;
    font-size: 11px;
    font-weight: 800;
}

.product-detail-page--cash-tabs .tab-nav__btn.active .detail-tabs__badge {
    background: rgba(7,17,29,.18);
    color: #07111d;
}

@media (max-width: 575.98px) {
    .product-detail-page--cash-tabs .tab-nav {
        display: flex;
        border-radius: 14px;
    }

    .product-detail-page--cash-tabs .tab-nav__btn {
        flex: 1 1 auto;
        justify-content: center;
        padding-inline: 12px;
    }
}

/* ── Responsive ── */

/* ===================================================================
   PRODUCT DETAIL � Redesign (pd-* components)
   =================================================================== */

/* Hero Image Card */
.pd-hero-card {
    position: relative;
    background: rgba(24,27,33,.65);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--ov-08);
    border-radius: 14px;
    overflow: hidden;
}
.pd-hero-card__image-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.pd-hero-card__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .5s ease;
}

.pd-hero-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	transform: scale(1.1);
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, #000 100%);
}

.pd-hero-card__logo--detail {
	position: absolute;
	left: 50%;
	bottom: 6%;
	z-index: 2;
	width: min(70%, 190px);
	height: 22%;
	max-height: 86px;
	object-fit: contain;
	object-position: center bottom;
	pointer-events: none;
	transform: translateX(-50%);
	filter: drop-shadow(0 10px 18px rgba(0,0,0,.6));
}

/* Trust Card (Left column below image) */
.pd-trust-card {
    background: rgba(24,27,33,.65);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--ov-08);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pd-trust-card__item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pd-trust-card__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(87,176,255,.1);
    border: 1px solid rgba(87,176,255,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary);
}
.pd-trust-card__icon .material-symbols-outlined {
    font-size: 20px;
}
.pd-trust-card__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.pd-trust-card__text strong {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.pd-trust-card__text small {
    font-size: 11.5px;
    color: rgba(219,232,255,.55);
}

/* Header Block */
.pd-hdr {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 178px;
}

.pd-hdr__fav {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid var(--ov-12);
    border-radius: 10px;
    background: rgba(24,27,33,.65);
    color: rgba(219,232,255,.86);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.pd-hdr__fav .material-symbols-outlined {
    font-size: 18px;
}

.pd-hdr__fav:hover {
    border-color: rgba(255,107,107,.45);
    background: rgba(255,107,107,.08);
    color: #ff6b6b;
}

.pd-hdr__fav--active {
    border-color: rgba(255,107,107,.55);
    background: rgba(255,107,107,.12);
    color: #ff6b6b;
}

.pd-hdr__game-pill {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(24,27,33,.65);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(219,232,255,.85);
}
/* Rozetin başındaki marka işareti. Metinden bir tık parlak; marka dosyası
   olmayan oyunlarda hiç basılmadığı için gap da devreye girmez. */
.pd-hdr__game-pill-icon {
    display: block;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: rgba(219,232,255,.95);
}
.pd-hdr__title {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}
.pd-hdr__rating .starmeter { font-size: 16px; }
.pd-hdr__rating .starmeter .material-symbols-outlined {
    font-size: 18px;
    letter-spacing: 1px;
}
.pd-hdr__rating .starmeter .str_fill .material-symbols-outlined {
    color: #fac850;
}
.pd-hdr__rating-count {
    font-size: 13px;
    color: rgba(219,232,255,.55);
}
.pd-hdr__delivery {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(219,232,255,.6);
}

/* Generic Card */
.pd-card {
    background: rgba(24,27,33,.65);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--ov-08);
    border-radius: 14px;
    padding: 18px;
}
.pd-card__header {
    margin-bottom: 14px;
}
.pd-card__title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

/* Detail Page Flex Layout */
.product-detail-layout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    max-width: 100%;
}
.product-detail-layout__aside {
    flex: 0 0 clamp(230px, 24%, 320px);
    min-width: 0;
}
.product-detail-layout__main {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
}

.product-list-stack {
    min-width: 0;
    max-width: 100%;
}
.pd-pkg {
    position: relative;
    /* Dikey kart: görsel üstte, bilgi altta. Satır başına 6 kart:
       .pd-packages gap'i 10px olduğundan 5 aralık = 50px düşülür.
       min-width 6'lı dizilimi engellemeyecek kadar düşük tutulur;
       dar ekranda flex-wrap satır başına kart sayısını kendi azaltır. */
    flex: 0 1 calc((100% - 50px) / 6);
    min-width: 104px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 12px 10px;
   
    border: 1px solid var(--ov-08);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.pd-pkg--discount{
   background: linear-gradient(to left, #ef444408 20%,#0000 100%);
   border: 1px solid var(--ov-08);
}
.pd-pkg:hover {
    border-color: rgba(87,176,255,.35);
    background: rgba(13,17,23,.85);
}
.pd-pkg--active {
    border-color: var(--c-primary);
    background: rgba(87,176,255,.06);
    box-shadow: 0 0 0 1px rgba(87,176,255,.55) inset;
}
.pd-pkg__icon {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background: rgba(87,176,255,.1);
    border: 1px solid rgba(87,176,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pd-pkg__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
   
}
/* Panelden yüklenen "Thumbnail Görseli": görselin kendi zemini olduğu için kutu stilini kaldır */
.pd-pkg__icon--thumb {
    background: none;
    border: none;
}
/* Görseli olmayan paket için ikon fallback */
.pd-pkg__icon--fallback .material-symbols-outlined {
    font-size: 20px;
    color: rgba(219,232,255,.55);
}
.pd-pkg__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    width: 100%;
}
.pd-pkg__name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    /* En fazla 2 satır: dar kartta isim okunur kalsın ama kart uzamasın. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pd-pkg__price-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}
.pd-pkg__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-primary);
}
.pd-pkg__price small {
    font-size: 11px;
    font-weight: 600;
    color: rgba(219,232,255,.55);
    margin-left: 2px;
}
.pd-pkg__badge {
    position: absolute;
    top: -6px;
    right: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #fff;
    z-index: 2;
}
.pd-pkg__badge--discount {
    background: var(--c-danger-hover);
    color: #fff;
}
.pd-pkg__badge--popular {
    background: var(--c-gold);
    color: #1a1300;
}
/* İndirimli paket kartı: kırmızı kenarlık SAĞ ÜSTTEN SOL ALTA doğru saydamlaşır.
   border-image border-radius'u bozduğu için maskeli ::after kullanılır (10px köşe korunur).
   --active'ten sonra tanımlı; aktif + indirimli olursa bu kazanır (düz/mavi kenarlığı ezer). */
.pd-pkg--discount,
.pd-pkg--discount:hover {
    border-color: transparent;
    box-shadow: none;
}

.pd-pkg--discount::after,
.pd-action-card--discount::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(243deg, var(--c-danger-hover), rgba(239,68,68,0) 70%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
/* pd-action-card'ta indirim kenarlığı SOLDAN SAĞA doğru saydamlaşır (pd-pkg 243deg kalır). */
.pd-action-card--discount::after {
    background: linear-gradient(to right, var(--c-danger-hover), rgba(239,68,68,0) 70%);
}

/* Action Card */
.pd-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}
.pd-action-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* İndirim rozeti pd-pkg'de sağ üstte; pd-action-card'ta sol üst köşede dursun. */
.pd-action-card .pd-pkg__badge {
    left: 8px;
    right: auto;
    text-transform: none;
}
.pd-action-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ov-07);
}
.pd-action-card__head-icon { font-size: 20px; }
.pd-action-card--buy  .pd-action-card__head-icon  { color: var(--c-primary); }
.pd-action-card--sell .pd-action-card__head-icon  { color: var(--c-gold); }
.pd-action-card__head-title {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}
.pd-action-card__head-price {
    margin-left: auto;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}
.pd-action-card--buy  .pd-action-card__head-price { color: var(--c-primary); }
.pd-action-card--sell .pd-action-card__head-price { color: var(--c-gold); }
.pd-action-card__head-price small {
    font-size: 11px;
    font-weight: 600;
    opacity: .6;
}
.pd-action-card__head-price--soon {
    font-size: 13px;
    font-weight: 700;
    color: rgba(219,232,255,.45) !important;
}
.pd-action-card__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}
.pd-action-card__field {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pd-action-card__field--total {
    min-width: 150px;
    align-items: flex-start;
    text-align: left;
}
/* Fiyat (toplam) en başta; stepper sağa yaslansın (buy/sell kartlarda denge için). */
.pd-action-card--buy  .pd-action-card__field--qty,
.pd-action-card--sell .pd-action-card__field--qty {
    margin-left: auto;
}
.pd-action-card__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: rgba(219,232,255,.5);
}
.pd-action-card__total-val {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
/* İndirimli toplamda eski fiyat ÜSTTE, indirimli fiyat ALTTA (dikey istif). */
.pd-action-card__total-val:has(.product-price__old) {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.15;
}
.pd-action-card__actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
/* Buy/Sell kartlarında butonlar sarmalayıcıyı tam doldurmasın; içeriği kadar
   boyutlanıp sağa yaslansın. (991px altında aşağıdaki media query tam genişlik yapar.) */
.pd-action-card--buy .pd-action-card__actions,
.pd-action-card--sell .pd-action-card__actions {
    justify-content: flex-end;
}
.pd-action-card--buy .pd-action-card__btn,
.pd-action-card--sell .pd-action-card__btn {
    flex: 0 1 auto;
}

/* Single purchase card for non-goldbar product details. */
.pd-action-card--legacy {
    margin-top: 16px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.pd-action-card--legacy .pd-action-card__field--total {
    margin-left: 0;
    align-items: flex-start;
    text-align: left;
}
.pd-action-card__info-field {
    flex: 1 1 220px;
    min-width: 220px;
}
.pd-action-card__info-field .input-o-label {
    white-space: nowrap;
}
.pd-action-card--legacy .pd-action-card__btn {
    min-height: 44px;
    padding-inline: 20px;
}
.pd-action-card--legacy .pd-action-card__btn--cart {
    border-width: 1.5px;
}
.pd-action-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .18s ease;
    white-space: nowrap;
}
.pd-action-card__btn--cart {
    background: transparent;
    border-color: rgba(87,176,255,.35);
    color: var(--c-primary);
}
.pd-action-card__btn--cart:hover {
    background: rgba(87,176,255,.08);
    border-color: var(--c-primary);
}
.pd-action-card__btn--buy {
    background: var(--c-primary);
    color: #0a1220;
}
.pd-action-card__btn--buy:hover {
    background: var(--c-primary-hover);
}
.pd-action-card__btn--sell {
    background: var(--c-gold);
    color: #1a1300;
}
.pd-action-card__btn--sell:hover {
    background: var(--c-gold-hover);
}

/* Stok yokken Al/Sepete-ekle: görsel olarak pasif, ama tıklanınca toast göstermek
   için tıklanabilir bırakılır (gerçek `disabled` attribute click event üretmez). */
.pd-action-card__btn--disabled,
.pd-action-card__btn--disabled:hover {
    opacity: .5;
    cursor: not-allowed;
    filter: grayscale(.4);
    background: var(--c-primary);
}
.pd-action-card__btn--cart.pd-action-card__btn--disabled,
.pd-action-card__btn--cart.pd-action-card__btn--disabled:hover {
    background: transparent;
}
.pd-action-card__btn--added {
    background: rgba(52,211,153,.12) !important;
    border-color: rgba(52,211,153,.35) !important;
    color: var(--c-success) !important;
}
.pd-trust-row__item {
	--pd-trust-tone: var(--c-primary);
	flex: 1 1 calc((100% - 30px) / 4);
	min-width: 160px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: rgba(24,27,33,.45);
	border: 1px solid var(--ov-06);
	border-radius: 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(219,232,255,.82);
	justify-content: center;
}
.pd-trust-row__item .material-symbols-outlined {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--pd-trust-tone);
	background: color-mix(in srgb, var(--pd-trust-tone) 16%, transparent);
}

/* Psikolojik tonlar — her güven mesajının anlamına göre ikon rengi. */
.pd-trust-row__item--safe    { --pd-trust-tone: #34d399; } /* güvenlik/koruma → yeşil */
.pd-trust-row__item--trust   { --pd-trust-tone: #60a5fa; } /* resmi/garanti → mavi */
.pd-trust-row__item--speed   { --pd-trust-tone: #fbbf24; } /* hız/anında → amber */
.pd-trust-row__item--support { --pd-trust-tone: #2dd4bf; } /* destek/iletişim → camgöbeği */
.pd-trust-row__item--premium { --pd-trust-tone: #c084fc; }
.pd-meta-row__sales {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(219,232,255,.6);
}
.pd-meta-row__sales .material-symbols-outlined {
    font-size: 16px;
    color: var(--c-gold);
}
.pd-meta-row__sales #detailSalesCount {
    color: #fff;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 991.98px) {
    .product-detail-layout {
        flex-direction: column;
    }
    .product-detail-layout__aside,
    .product-detail-layout__main {
        flex: 1 1 auto;
        width: 100%;
    }
    .pd-action-card__field { flex: 1 1 calc(50% - 9px); }
    .pd-action-card__actions {
        flex-basis: 100%;
        justify-content: stretch;
    }
    .pd-action-card__btn {
        flex: 1;
    }
    /* Buy/Sell: dar ekranda butonlar yine tam genişlik kaplasın (sağa yaslamayı geçersiz kıl). */
    .pd-action-card--buy .pd-action-card__actions,
    .pd-action-card--sell .pd-action-card__actions {
        justify-content: stretch;
    }
    .pd-action-card--buy .pd-action-card__btn,
    .pd-action-card--sell .pd-action-card__btn {
        flex: 1 1 auto;
    }
    /* Satır sığmayıp aksiyonlar (Sepete Ekle / Hemen Satın Al) kendi satırına
       sarınca, ms-auto ile sağa yaslı kalmasın — tam genişlik kaplasın. */
    .pd-action-card--legacy .pd-action-card__actions {
        margin-left: 0 !important;
        width: 100%;
    }
    .pd-trust-row__item { flex-basis: calc(50% - 5px); }
}
@media (max-width: 575.98px) {
    .pd-hdr {
        padding-right: 0;
    }
    .pd-hdr__fav {
        position: static;
        align-self: flex-start;
    }
    .pd-pkg { flex-basis: 100%; }
    .pd-hdr__title { font-size: 22px; }
    .pd-trust-row__item { flex-basis: 100%; }
    .pd-action-grid { grid-template-columns: 1fr; }
}

/* Mobile product detail and bottom purchase bar. */
@media (max-width: 767.98px) {
    .product-detail-view .floating-header__inner {
        width: calc(100vw - 24px);
        gap: 4px;
        padding-inline: 8px;
    }
    .product-detail-view .floating-header__brand {
        flex: 1 1 auto;
    }
    .product-detail-view .floating-header__brand img {
        width: 100%;
        max-width: 118px;
        height: 30px;
    }
    .product-detail-view .floating-header__menu,
    .product-detail-view .floating-header__actions .floating-header__icon-btn,
    .product-detail-view .floating-header__avatar,
    .product-detail-view .floating-header__login-btn {
        flex-shrink: 0;
        width: 36px;
        min-width: 36px;
        height: 40px;
        padding: 0;
    }
    .product-detail-view .floating-header__actions {
        gap: 2px;
    }
    .product-detail-view .floating-header__login-btn > span:not(.material-symbols-outlined) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .product-detail-view .page-breadcrumb ol {
        flex-wrap: wrap;
    }
    .product-detail-view .page-breadcrumb li,
    .product-detail-view .pd-hdr,
    .product-detail-view .pd-pkg__info {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .product-detail-view .pd-hdr {
        padding-right: 0;
    }
    .product-detail-view .pd-hdr__fav {
        position: static;
        align-self: flex-start;
        min-height: 44px;
    }
    .product-detail-view .tab-nav__btn {
        min-height: 44px;
        min-width: 0;
        white-space: normal;
        text-align: left;
    }
    .product-detail-view .detail-tabs-desc {
        overflow-wrap: anywhere;
        overflow-x: auto;
    }
    .product-detail-view .detail-tabs-desc :is(img, video, iframe) {
        max-width: 100%;
    }
    .product-detail-view .detail-tabs-desc :is(img, video) {
        height: auto;
    }
    body.pd-mobile-purchase {
        padding-bottom: var(--pd-mobile-purchase-height, calc(150px + env(safe-area-inset-bottom, 0px)));
    }
    html:has(body.pd-mobile-purchase) {
        scroll-padding-bottom: calc(var(--pd-mobile-purchase-height, 150px) + 16px);
    }
    .pd-mobile-purchase > .pd-action-card--legacy {
        position: fixed;
        inset: auto 0 0;
        z-index: 1030;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 12px;
        width: auto;
        max-height: 65vh;
        max-height: 65dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        margin: 0;
        padding: 12px max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
        border: 1px solid rgba(87,176,255,.24);
        border-bottom: 0;
        border-radius: 16px 16px 0 0;
        background: rgba(20,23,30,.98);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: 0 -8px 28px rgba(0,0,0,.28);
    }
    .pd-mobile-purchase > .pd-action-card--legacy::after {
        display: none;
    }
    .pd-mobile-purchase > .pd-action-card--legacy > .w-100 {
        display: none;
    }
    .pd-mobile-purchase > .pd-action-card--legacy .pd-pkg__badge {
        position: static;
        padding: 2px 5px;
        font-size: 10px;
        letter-spacing: 0;
    }
    .pd-mobile-purchase > .pd-action-card--legacy .pd-action-card__field {
        min-width: 0;
        gap: 4px;
    }
    .pd-mobile-purchase > .pd-action-card--legacy .pd-action-card__field--qty {
        align-items: flex-end;
    }
    .pd-mobile-purchase > .pd-action-card--legacy .pd-action-card__label {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        font-size: 10px;
        letter-spacing: .2px;
    }
    .pd-mobile-purchase > .pd-action-card--legacy .pd-action-card__total-val {
        font-size: 20px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }
    .pd-mobile-purchase > .pd-action-card--legacy .pd-action-card__total-val small {
        font-size: 12px;
    }
    .pd-mobile-purchase > .pd-action-card--legacy .product-price__old {
        font-size: 11px;
    }
    .pd-mobile-purchase > .pd-action-card--legacy .pd-action-card__stepper .btn-o,
    .pd-mobile-purchase > .pd-action-card--legacy .btn-group-o__input {
        width: 38px;
        min-width: 38px;
        height: 38px;
        font-size: 16px;
    }
    .pd-mobile-purchase > .pd-action-card--legacy .pd-action-card__actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 0;
    }
    .pd-mobile-purchase > .pd-action-card--legacy .pd-action-card__btn {
        min-width: 0;
        min-height: 44px;
        padding: 10px 8px;
        font-size: 12px;
        white-space: normal;
    }
    .pd-mobile-purchase > .pd-action-card--legacy .pd-action-card__btn .material-symbols-outlined {
        flex-shrink: 0;
        font-size: 18px;
    }
    .pd-mobile-purchase .pd-purchase-info {
        width: 100%;
        margin-top: 16px;
        padding: 14px;
        border: 1px solid var(--ov-08);
        border-radius: 14px;
        background: rgba(24,27,33,.65);
    }
    .pd-mobile-purchase .pd-purchase-info .pd-action-card__info-field {
        flex-basis: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .pd-mobile-purchase .pd-purchase-info .input-o-label {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .pd-mobile-purchase .pd-purchase-info :is(input, select, textarea) {
        font-size: 16px;
    }
}

/* Sol sütun güven kartı (hero görselin altında).
   Kapsayıcı düz kalır, YÜZEY her maddenin kendisindedir. Kart .pd-hero-card'ın
   İÇİNDE duruyor ve o kartın padding'i yok — bu yüzden yatay boşluğu buradaki
   padding veriyor, yoksa maddeler kart kenarlarına dayanıyor. Taban
   .pd-trust-card'ın zemin/blur/çerçevesi burada gereksiz, sıfırlanıyorlar. */
.pd-trust-card--overlay {
    position: static;
    margin: 0;
    padding: 12px;
    gap: 8px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
}
.pd-trust-card--overlay .pd-trust-card__item {
    gap: 10px;
    padding: 10px 12px;
    background: rgba(24,27,33,.45);
    border: 1px solid var(--ov-06);
    border-radius: 10px;
    transition: border-color .2s ease, background .2s ease;
}
.pd-trust-card--overlay .pd-trust-card__item:hover {
    background: rgba(24,27,33,.62);
    border-color: rgba(87,176,255,.35);
}
/* İkon: dairesel, sitenin tek vurgu rengiyle (maddeye göre renk değişmez). */
.pd-trust-card--overlay .pd-trust-card__icon {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    color: var(--c-primary);
    background: rgba(87,176,255,.1);
}
.pd-trust-card--overlay .pd-trust-card__icon .material-symbols-outlined { font-size: 17px; }
.pd-trust-card--overlay .pd-trust-card__text strong {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(235,242,255,.92);
}
.pd-trust-card--overlay .pd-trust-card__text small { font-size: 11px; }

/* Banner — bg-only variant (zero-height in flow, bg extends 600px and fades) */
.product-banner--bg-only {
    position: relative;
    height: 0;
    overflow: visible;
    z-index: 0;
    pointer-events: none;
}
.product-banner--bg-only .product-banner__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 600px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.55) 65%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.55) 65%, rgba(0,0,0,0) 100%);
}
.product-banner--bg-only .product-banner__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--product-banner-position, center 42%);
	opacity: .55;
	filter: none;
}
@media (max-width: 991.98px) {
    .product-banner--bg-only .product-banner__bg { height: 400px; }
    .product-banner--bg-only .product-banner__bg img {
        object-position: 75% var(--product-banner-focus-y, 42%);
    }
}

/* ===================================================================
   DISCOUNT COUNTDOWN � Flip-Clock Style (.pd-countdown / .flip-unit)
   =================================================================== */
.pd-countdown {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, rgba(255,90,90,.08) 0%, rgba(24,27,33,.65) 60%);
    border: 1px solid rgba(255,107,107,.22);
}
.pd-countdown__header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}
.pd-countdown__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,107,107,.14);
    border: 1px solid rgba(255,107,107,.35);
    color: #ff6b6b;
}
.pd-countdown__icon .material-symbols-outlined {
    font-size: 22px;
    text-transform: none;
    letter-spacing: 0;
}
.pd-countdown__sub {
    font-size: 12px;
    color: rgba(219,232,255,.6);
}
.pd-countdown__clock {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}
.pd-countdown--ended .pd-countdown__clock { opacity: .55; }

/* Flip unit */
.flip-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.flip-unit__card {
    position: relative;
    width: 46px;
    height: 60px;
    perspective: 500px;
    perspective-origin: 50% 50%;
    border-radius: 7px;
    box-shadow: 0 5px 14px rgba(0,0,0,.5);
    --flip-h: 60px;
}

/* Static faces (background showing current/next digit) */
.flip-unit__face {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flip-unit__face--top {
    top: 0;
    background: linear-gradient(180deg, #1c2230 0%, #131822 100%);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.flip-unit__face--bottom {
    bottom: 0;
    background: linear-gradient(180deg, #161c27 0%, #0f1420 100%);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.flip-unit__face .flip-unit__digit {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--flip-h, 72px);
    line-height: var(--flip-h, 72px);
}
.flip-unit__face--top .flip-unit__digit { top: 0; }
.flip-unit__face--bottom .flip-unit__digit { bottom: 0; }

/* Animated flap (single element with TWO faces — flips 180° forward) */
.flip-unit__flap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    transform-origin: 50% 100%;
    transform-style: preserve-3d;
    z-index: 4;
    will-change: transform;
}
.flip-unit__flap-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flip-unit__flap-face--front {
    background: linear-gradient(180deg, #1c2230 0%, #131822 100%);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.flip-unit__flap-face--back {
    transform: rotateX(180deg);
    background: linear-gradient(180deg, #161c27 0%, #0f1420 100%);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.flip-unit__flap-face .flip-unit__digit {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--flip-h, 72px);
    line-height: var(--flip-h, 72px);
}
/* Front face shows TOP half of OLD digit */
.flip-unit__flap-face--front .flip-unit__digit { top: 0; }
/* Back face: digit positioned so its bottom half is visible inside the (pre-flipped) face.
   After parent rotateX(-180°), it appears as the bottom half of the NEW digit upright. */
.flip-unit__flap-face--back .flip-unit__digit { bottom: 0; }

.flip-unit__digit {
    text-align: center;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
    text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

.flip-unit__hinge {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(0,0,0,.8);
    box-shadow: 0 1px 0 var(--ov-06);
    z-index: 5;
    pointer-events: none;
}

/* FORWARD 180° flip: top flap falls toward the viewer, revealing new digit on its back face */
@keyframes flap-fall-forward {
    0%   { transform: rotateX(0deg); }
    100% { transform: rotateX(-180deg); }
}
.flip-unit__card--flip .flip-unit__flap {
    animation: flap-fall-forward .6s cubic-bezier(.36, .14, .26, 1.02) forwards;
}

.flip-unit__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: rgba(219,232,255,.55);
}
.flip-unit__sep {
    font-size: 24px;
    font-weight: 800;
    color: rgba(255,107,107,.55);
    line-height: 60px;
    align-self: flex-start;
    -webkit-user-select: none;
    user-select: none;
}

/* ─── Inline variant for product list rows ────────────────────────── */
.pd-countdown--inline {
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,90,90,.1) 0%, rgba(24,27,33,.55) 70%);
    border: 1px solid rgba(255,107,107,.2);
}
.pd-countdown--inline .pd-countdown__clock { gap: 4px; }
.pd-countdown--inline .flip-unit { gap: 2px; }
.pd-countdown--inline .flip-unit__card {
    width: 26px;
    height: 34px;
    border-radius: 5px;
    --flip-h: 34px;
    box-shadow: 0 3px 8px rgba(0,0,0,.45);
}
.pd-countdown--inline .flip-unit__face--top,
.pd-countdown--inline .flip-unit__flap-face--front,
.pd-countdown--inline .flip-unit__flap-face--back {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.pd-countdown--inline .flip-unit__face--bottom {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.pd-countdown--inline .flip-unit__digit { font-size: 18px; }
.pd-countdown--inline .flip-unit__label {
    font-size: 8px;
    letter-spacing: .4px;
}
.pd-countdown--inline .flip-unit__sep {
    font-size: 14px;
    line-height: 34px;
    color: rgba(255,107,107,.5);
}

/* Product row info becomes flex when it contains an inline countdown */
.product-row__info:has(.pd-countdown--inline) {
    display: flex;
    align-items: center;
    gap: 16px;
}
.product-row__info-text {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 991.98px) {
    .pd-countdown { flex-direction: column; align-items: stretch; gap: 14px; }
    .pd-countdown__clock { justify-content: center; }
    .pd-countdown--inline { flex-direction: column; align-items: center; gap: 6px; }
    .product-row__info:has(.pd-countdown--inline) { flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .flip-unit__card { width: 38px; height: 50px; --flip-h: 50px; }
    .flip-unit__digit { font-size: 26px; }
    .flip-unit__sep { font-size: 20px; line-height: 50px; }
}

/* ===================================================================
   ITEM DETAIL - Product detail visual alignment
   =================================================================== */
.item-detail-page .product-banner--bg-only > .container {
    display: none;
}

.item-detail-page .product-banner--bg-only .product-banner__bg img {
    opacity: .5;
    filter: none;
}

.product-detail-page--item-detail .detail-tabs-left {
    top: 24px;
}

.product-detail-page--item-detail .detail-tabs-gallery {
    margin-bottom: 0;
    padding: 12px;
    border-radius: 16px;
    background: rgba(13,17,23,.72);
}

.product-detail-page--item-detail .detail-tabs-gallery__main {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--ov-08);
    border-radius: 12px;
    background: rgba(8,11,17,.78);
    overflow: hidden;
}

.product-detail-page--item-detail .detail-tabs-gallery__main img {
    -webkit-mask-image: none;
    mask-image: none;
    object-position: center;
}

.product-detail-page--item-detail .detail-tabs-gallery__ilan-no {
    top: 10px;
    left: 10px;
    bottom: auto;
    z-index: 3;
    background: rgba(13,17,23,.72);
    color: rgba(219,232,255,.72);
}

.product-detail-page--item-detail .detail-tabs-gallery__trust {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 10px 0 0;
    /* Yüzey artık maddelerin kendisinde; kapsayıcı iç içe kutu oluşturmasın. */
    padding: 0;
    box-shadow: none;
}

.product-detail-page--item-detail .detail-tabs-gallery__trust .pd-trust-card__icon {
    width: 34px;
    height: 34px;
}

.product-detail-page--item-detail .detail-tabs-gallery__trust .pd-trust-card__text strong {
    font-size: 13px;
}

.product-detail-page--item-detail .detail-tabs-gallery__trust .pd-trust-card__text small {
    font-size: 11.5px;
}

.product-detail-page--item-detail .detail-tabs-gallery__thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 10px;
}

.product-detail-page--item-detail .detail-tabs-gallery__thumb {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-width: 1px;
    border-color: var(--ov-08);
    background: rgba(24,27,33,.65);
}

.product-detail-page--item-detail .detail-tabs-gallery__thumb.active,
.product-detail-page--item-detail .detail-tabs-gallery__thumb:hover {
    border-color: rgba(87,176,255,.55);
}

.product-detail-page--item-detail .item-detail-details-card,
.product-detail-page--item-detail .item-detail-price-summary-card,
.product-detail-page--item-detail .item-detail-seller-card {
    height: auto;
}

.product-detail-page--item-detail .item-detail-meta-row {
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.product-detail-page--item-detail .item-detail-meta-row__details {
    flex: 0 1 calc(66.666% - 8px);
    min-width: 0;
}

.product-detail-page--item-detail .item-detail-meta-row__seller {
    display: flex;
    flex: 0 1 calc(33.333% - 8px);
    min-width: 0;
}

.product-detail-page--item-detail .item-detail-meta-row__details > .pd-card,
.product-detail-page--item-detail .item-detail-meta-row__seller > .pd-card {
    width: 100%;
    height: 100%;
}

.product-detail-page--item-detail .item-detail-price-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    height: auto;
    padding: 18px 20px;
}

.product-detail-page--item-detail .info-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: rgba(255,255,255,.86);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}

.product-detail-page--item-detail .pd-card__header .info-card__title {
    margin: 0;
}

.product-detail-page--item-detail .detail-tabs-price-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin: 0;
    padding: 0;
    border-top: 0;
    background: transparent;
}

.product-detail-page--item-detail .item-detail-price-summary-card .detail-tabs-price-block {
    flex: 0 1 clamp(260px, 34%, 380px);
}

.product-detail-page--item-detail .detail-tabs-price-block__top {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 0;
}

.product-detail-page--item-detail .detail-tabs-price-block__top--standalone {
    align-items: flex-start;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 0;
}

.product-detail-page--item-detail .detail-tabs-price-block__label {
    color: rgba(219,232,255,.54);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
}

.product-detail-page--item-detail .detail-tabs-price-block__amount {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
}

.product-detail-page--item-detail .detail-tabs-price-block__amount small {
    color: rgba(219,232,255,.62);
    font-size: 14px;
    font-weight: 700;
}

/* Yeni + eski fiyat sarmalayıcısı — ikisi aynı taban çizgisinde (baseline) hizalı */
.detail-tabs-price-block__prices {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.detail-tabs-price-block__current {
    line-height: 1;
}

/* İndirim rozeti — güncel fiyatın önünde (kırmızı pill) */
.detail-tabs-price-block__discount {
    align-self: center;
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid rgba(248,113,113,.42);
    border-radius: 6px;
    background: rgba(248,113,113,.14);
    color: var(--c-danger);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
}

.detail-tabs-price-block__amount del {
    margin: 0;
    color: rgba(219,232,255,.4);
    font-size: 16px;
    font-weight: 500;
}

.product-detail-page--item-detail .detail-tabs-price-block__buy-btn {
    width: auto;
    min-height: 0;
    margin: 0;
}

.product-detail-page--item-detail .detail-tabs-price-block__buy-btn {
    flex: 0 0 auto;
    padding: 10px 22px;
    background: var(--c-primary);
    color: #0a1220;
    border-radius: var(--r-md);
    font-size: 13px;
}

.product-detail-page--item-detail .detail-tabs-price-block__buy-btn:hover {
    background: var(--c-primary-hover);
    color: #0a1220;
}

/* Onay ekranı — yeni özet kart (.ipc-*) */
.ipc-timer {
    text-align: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--ov-07);
    background: rgba(87,176,255,.04);
}
.ipc-timer__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.ipc-timer__label .material-symbols-outlined { font-size: 15px; }
.ipc-timer__clock {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.ipc-timer__clock--danger { color: #f7b733; }
.ipc-timer__clock--expired { color: var(--c-danger, var(--c-danger-hover)); }

.ipc-rows {
    padding: 4px 0;
    border-bottom: 1px solid var(--ov-07);
}
.ipc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 24px;
    border-bottom: 1px solid var(--ov-05);
}
.ipc-row:last-child { border-bottom: none; }
.ipc-row__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--c-text-muted);
}
.ipc-row__status-icon { font-size: 15px; }
.ipc-row__value {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}
.ipc-row__value--amount {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}
.ipc-row__value--amount small { font-size: 13px; font-weight: 600; opacity: .7; }
.ipc-row--ok .ipc-row__label { color: #4ade80; }
.ipc-row--ok .ipc-row__value { color: #4ade80; }
.ipc-row--danger .ipc-row__label { color: var(--c-danger); }
.ipc-row--danger .ipc-row__value { color: var(--c-danger); }

.ipc-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--ov-07);
    font-size: 12px;
    color: rgba(219,232,255,.55);
    line-height: 1.5;
    background: rgba(87,176,255,.03);
}
.ipc-info .material-symbols-outlined {
    font-size: 16px;
    color: var(--c-primary);
    flex-shrink: 0;
    margin-top: 1px;
}
.ipc-info strong { color: rgba(219,232,255,.85); }

.ipc-actions {
    padding: 16px 20px 20px;
}
.ipc-insufficient {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-danger);
    margin-bottom: 10px;
}
.ipc-insufficient .material-symbols-outlined { font-size: 17px; }
.item-purchase-howto { line-height: 1.6; }
.item-purchase-listing-link {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}
.item-purchase-listing-link:hover {
    color: var(--c-primary, var(--c-primary));
    text-decoration: underline;
}

/* Header — devam eden ilan siparişi bandı */
.pending-order-bar {
    --pending-order-bar-top: 0px;
    --pending-order-bar-floating-top: 72px;
    position: sticky;
    top: var(--pending-order-bar-top);
    z-index: 1023;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(100deg, #2c2210 0%, #1d180e 55%, #15120b 100%);
    border-block: 1px solid rgba(247,183,51,.3);
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
    transition: top .24s ease, box-shadow .24s ease, border-radius .24s ease;
}
body.floating-header-visible .pending-order-bar {
	width: min(1600px, calc(100vw - 36px));
	margin-inline: auto;
	top: var(--pending-order-bar-floating-top);
	z-index: 1039;
	border: 1px solid rgba(247,183,51,.28);
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(0,0,0,.26);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	padding-top: 20px;
}
.pending-order-bar__link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 8px 0;
    color: #f7b733;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    outline: none;
    transition: color .18s ease;
}
.pending-order-bar__link:hover { color: #ffd574; }
.pending-order-bar__thumb {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(247,183,51,.4);
    background: rgba(247,183,51,.1);
    box-shadow: 0 8px 18px rgba(0,0,0,.26);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pending-order-bar__link:hover .pending-order-bar__thumb {
    border-color: rgba(247,183,51,.6);
    box-shadow: 0 8px 18px rgba(0,0,0,.28);
    transform: translateY(-1px);
}
.pending-order-bar__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pending-order-bar__label {
    font-size: 11px;
    font-weight: 800;
    color: rgba(247,183,51,.75);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pending-order-bar__listing {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffd574;
    line-height: 1.25;
}
.pending-order-bar__timer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(247,183,51,.28);
    border-radius: 8px;
    background: rgba(247,183,51,.1);
    color: #ffd574;
}
.pending-order-bar__timer .material-symbols-outlined { font-size: 18px; }
.pending-order-bar__clock {
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    letter-spacing: .02em;
}
.pending-order-bar__cta {
    flex: 0 0 auto;
    white-space: nowrap;
    border-radius: 8px;
}
@media (max-width: 991.98px) {
    .pending-order-bar { --pending-order-bar-floating-top: 82px; }
    .pending-order-bar__link {
        min-height: 54px;
        gap: 10px;
    }
    .pending-order-bar__thumb {
        width: 38px;
        height: 38px;
    }
}
@media (max-width: 575.98px) {
    .pending-order-bar { --pending-order-bar-floating-top: 76px; }
    .pending-order-bar__link { gap: 8px; }
    .pending-order-bar__label { display: none; }
    .pending-order-bar__listing { font-size: 12px; }
    .pending-order-bar__timer {
        min-height: 32px;
        padding: 0 9px;
    }
    .pending-order-bar__cta { display: none; }
}
.item-purchase-howto ul, .item-purchase-howto ol { padding-left: 1.2rem; }
.btn-o.disabled, .btn-o[disabled] { opacity: .55; pointer-events: none; cursor: default; }

/* Onay ekranı — koyu tema form alanları */
.item-purchase-page .form-control {
    background: var(--ov-05);
    border: 1px solid var(--ov-12);
    color: #e4e4e4;
    border-radius: 6px;
    padding: 10px 14px;
}
.item-purchase-page .form-control::placeholder { color: rgba(219,232,255,.4); }
.item-purchase-page .form-control:focus {
    background: rgba(87,176,255,.06);
    border-color: rgba(87,176,255,.45);
    box-shadow: none;
    color: #fff;
}
.item-purchase-page .form-label { color: #dbe8ff; font-weight: 600; }
.item-purchase-page .form-text { color: rgba(219,232,255,.5); }
.item-purchase-page .form-check-label { color: #cdd7e6; }
.item-purchase-page .form-check-input {
    background-color: var(--ov-06);
    border-color: rgba(255,255,255,.25);
}
.item-purchase-page .form-check-input:checked {
    background-color: var(--c-primary, var(--c-primary));
    border-color: var(--c-primary, var(--c-primary));
}

/* Anasayfa ilan bölümleri — listeleme sayfasıyla aynı 5'li kart düzeni (lg+) */
@media (min-width: 1200px) {
    .last-listings-section .oi-5col,
    .ko-items-section .oi-5col { flex: 0 0 auto; width: 20%; }
}

/* Son ilanlar: container tam genişliğine (1600px) ulaştığında 6'lı düzen.
   Eşik bilerek 1600px: .container max-width'i 1600px olduğu için bu noktadan
   sonra grid büyümüyor, yani kırılım "container tam açıldı" demek.
   Kart genişliği 5'liye göre ~299px'ten ~247px'e iner — hâlâ rahat.
   1200-1599 arası 5'li kalıyor; orada 6'lı olsaydı kart ~180px'e düşerdi. */
@media (min-width: 1600px) {
    .last-listings-section .oi-5col { width: 16.6667%; }
}

/* Satıcı değerlendirme formu + yıldız girişi */
.sp-review-form {
    background: var(--ov-03);
    border: 1px solid var(--ov-08);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
}
.sp-review-form__title { font-size: 15px; font-weight: 700; color: #dbe8ff; margin-bottom: 10px; }
.sp-star-input { display: inline-flex; gap: 4px; margin-bottom: 10px; }
.sp-star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.sp-star-input label { cursor: pointer; color: rgba(219,232,255,.28); line-height: 1; }
.sp-star-input label .material-symbols-outlined { font-size: 30px; }
.sp-star-input label.is-on { color: #f0b400; }
.sp-star-input label.is-on .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.sp-review-form .form-control {
    background: var(--ov-05);
    border: 1px solid var(--ov-12);
    color: #e4e4e4;
    border-radius: 8px;
}
.sp-review-form .form-control:focus { background: rgba(87,176,255,.06); border-color: rgba(87,176,255,.45); box-shadow: none; color: #fff; }

/* Yayıncı kartı — Twitch'te İzle butonu */
.broadcaster-card__watch {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 4px; padding: 3px 9px; border-radius: 999px;
    background: #9146ff; color: #fff !important; font-size: 11px; font-weight: 700;
    text-decoration: none; width: fit-content;
}
.broadcaster-card__watch:hover { background: #7d2ff5; }
.broadcaster-card__watch i { font-size: 12px; }

/* Yayıncı kartları — eşit yükseklik (içerik farklı olsa da) */
.broadcaster-grid > [class*="col-"],
#bcGrid > [class*="col-"] { display: flex; }
.broadcaster-grid .broadcaster-card,
#bcGrid .broadcaster-card { height: 100%; display: flex; flex-direction: column; }
.broadcaster-grid .broadcaster-card__info,
#bcGrid .broadcaster-card__info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }

/* ══ Twitch-benzeri 2 kolonlu yayıncı tarama: sol panel + sağ liste ══ */
.bcx-browse { display: flex; gap: 24px; align-items: flex-start; margin-top: 8px; }
.bcx-browse__side { flex: 0 0 248px; width: 248px; position: sticky; top: 104px; display: flex; flex-direction: column; gap: 18px; }
.bcx-browse__main { flex: 1 1 auto; min-width: 0; }

.input-o-wrap--block { width: 100%; }
.input-o-wrap--block .input-o { width: 100%; }

.bcx-side-block { display: flex; flex-direction: column; gap: 8px; }
.bcx-side-block__title {
    font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: rgba(219,232,255,.5); padding-bottom: 4px; border-bottom: 1px solid var(--ov-08); margin-bottom: 2px;
}

/* Dikey kategori listesi (Twitch sol menü gibi) */
.bcx-cats-vert { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
.bcx-cats-vert::-webkit-scrollbar { width: 6px; }
.bcx-cats-vert::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 999px; }
.bcx-catv {
    display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px;
    border: 0; background: transparent; cursor: pointer; text-align: left; width: 100%;
    transition: background .15s;
}
.bcx-catv:hover { background: var(--ov-05); }
.bcx-catv--active { background: rgba(145,70,255,.16); }
.bcx-catv__box {
    flex: 0 0 auto; width: 40px; height: 53px; border-radius: 5px; object-fit: cover;
    background: var(--ov-06); display: block;
}
.bcx-catv__box--all { display: flex; align-items: center; justify-content: center; color: rgba(219,232,255,.5); }
.bcx-catv__box--all .material-symbols-outlined { font-size: 22px; }
.bcx-catv__name { font-size: 13px; font-weight: 700; color: #dbe8ff; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcx-catv--active .bcx-catv__name { color: #b794ff; }
.bcx-catv__count { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(219,232,255,.55); font-weight: 600; }
.bcx-catv__count .bcx-live-dot { width: 7px; height: 7px; }

/* Sağ liste grid: Twitch gibi geniş kartlar (~5/sıra) */
.bcx-browse__main #bcGrid > .col-2 { flex: 0 0 auto; width: 20%; max-width: 20%; }
@media (max-width: 1399px) { .bcx-browse__main #bcGrid > .col-2 { width: 25%; max-width: 25%; } }
@media (max-width: 991.98px)  { .bcx-browse__main #bcGrid > .col-2 { width: 33.333%; max-width: 33.333%; } }
@media (max-width: 767.98px) {
    .bcx-browse { flex-direction: column; }
    .bcx-browse__side { position: static; width: 100%; flex-basis: auto; }
    .bcx-cats-vert { max-height: 260px; }
    .bcx-browse__main #bcGrid > .col-2 { width: 50%; max-width: 50%; }
}

/* ══ Öne çıkan canlı yayın carousel'ı (Twitch ana sayfa hero) ══ */
.bcx-section-head--sub { margin-top: 26px; }

/* Coverflow: merkezde büyük aktif yayın, sol/sağda komşu yayınların peek önizlemeleri */
.bcx-cf {
    position: relative; display: flex; justify-content: center; align-items: center;
    overflow: hidden; padding: 14px 0; isolation: isolate;
}
.bcx-feat__stage {
    position: relative; z-index: 2; flex: 0 0 auto; width: 74%; aspect-ratio: 16 / 9;
    border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.bcx-cf--single .bcx-feat__stage { width: 100%; }
.bcx-feat__player, .bcx-feat__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bcx-feat__player--empty { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.4); font-size: 14px; }

/* Yan peek önizleme kartları (komşu yayınlar) */
.bcx-cf__peek {
    position: absolute; top: 50%; z-index: 1; width: 30%; aspect-ratio: 16 / 9;
    padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
    background: #0b0e16; box-shadow: 0 10px 26px rgba(0,0,0,.45);
    transform: translateY(-50%) scale(.9); opacity: .9; transition: opacity .18s, filter .18s, transform .18s;
}
.bcx-cf__peek--prev { left: -4%; }
.bcx-cf__peek--next { right: -4%; }
.bcx-cf__peek:hover { opacity: 1; transform: translateY(-50%) scale(.94); }
.bcx-cf__peek-img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.62); transition: filter .18s; }
.bcx-cf__peek:hover .bcx-cf__peek-img { filter: brightness(.82); }
.bcx-cf__peek-chevron {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1;
}
/* Chevron + ad, peek'in GÖRÜNEN kenarında dursun (prev: sol, next: sağ) */
.bcx-cf__peek--prev .bcx-cf__peek-chevron { left: 8px; }
.bcx-cf__peek--next .bcx-cf__peek-chevron { right: 8px; }
.bcx-cf__peek:hover .bcx-cf__peek-chevron { background: #9146ff; }
.bcx-cf__peek-name {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 10px 7px;
    font-size: 12px; font-weight: 700; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.85));
}
.bcx-cf__peek--prev .bcx-cf__peek-name { text-align: left; }
.bcx-cf__peek--next .bcx-cf__peek-name { text-align: right; }

/* Kanal bilgi kartı — sahnenin sol altında, Twitch hero tarzı cam panel */
.bcx-feat__card {
    position: absolute; left: 18px; bottom: 18px; z-index: 3; max-width: min(420px, 72%);
    display: flex; flex-direction: column; gap: 9px; padding: 15px 16px;
    border-radius: 13px; background: rgba(12,15,22,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--ov-08); box-shadow: 0 10px 30px rgba(0,0,0,.45); color: #fff;
}
.bcx-feat__livetag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: #e53e3e; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 4px; letter-spacing: .3px; }
.bcx-feat__card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bcx-feat__avatar { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #9146ff; object-fit: cover; flex: 0 0 auto; }
.bcx-feat__card-id strong { font-size: 17px; font-weight: 800; color: #fff; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcx-feat__game { font-size: 12px; font-weight: 600; color: #c4a5ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcx-feat__viewers { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.88); }
.bcx-feat__viewers .material-symbols-outlined { font-size: 16px; color: #e53e3e; }
.bcx-feat__desc { margin: 0; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.8); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bcx-feat__watch {
    align-self: flex-start; margin-top: 2px;
    display: inline-flex; align-items: center; gap: 7px; background: #9146ff; color: #fff;
    padding: 9px 16px; border-radius: 7px; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap;
}
.bcx-feat__watch:hover { background: #7d2ff5; color: #fff; }

/* Nokta navigasyonu (carousel'in altında, ortalı) */
.bcx-feat__dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.bcx-feat__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.28); cursor: pointer; transition: background .15s, width .15s; }
.bcx-feat__dot:hover { background: rgba(255,255,255,.55); }
.bcx-feat__dot.is-active { width: 22px; background: #9146ff; }

/* Dar ekran: yan peek'leri gizle, sahneyi tam genişlik yap */
@media (max-width: 991.98px) {
    .bcx-cf { padding: 0; }
    .bcx-feat__stage { width: 100%; }
    .bcx-cf__peek { display: none; }
}
@media (max-width: 575.98px) {
    .bcx-feat__card { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 12px 13px; gap: 7px; }
    .bcx-feat__desc { -webkit-line-clamp: 1; line-clamp: 1; }
}

.product-detail-page--item-detail .detail-tabs-details-grid {
    gap: 10px 14px;
    margin-top: 0;
}

.product-detail-page--item-detail .detail-tabs-detail-item.epin-info-grid__cell {
    flex: 0 1 calc(50% - 7px);
    align-items: center;
    flex-direction: row;
    gap: 12px;
    padding: 10px 12px;
    background: var(--ov-02);
    border-color: var(--ov-06);
    border-radius: 10px;
}

.product-detail-page--item-detail .detail-tabs-detail-item .epin-info-grid__icon {
    flex: 0 0 44px;
}

.product-detail-page--item-detail .detail-tabs-detail-item .epin-info-grid__label {
    color: rgba(255,255,255,.55);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
}

.product-detail-page--item-detail .detail-tabs-detail-item .epin-info-grid__value {
    color: #fff;
    font-weight: 600;
    line-height: 1.25;
}

.product-detail-page--item-detail .detail-tabs-detail-item,
.product-detail-page--item-detail .detail-tabs-comment {
    background: rgba(13,17,23,.45);
    border-color: var(--ov-07);
}

.product-detail-page--item-detail .detail-tabs-detail-item__label {
    color: rgba(219,232,255,.48);
}

.product-detail-page--item-detail .detail-tabs-detail-item__value {
    color: rgba(255,255,255,.9);
}

.product-detail-page--item-detail .detail-tabs-detail-item__value--highlight,
.product-detail-page--item-detail .detail-tabs-comment-form__note a {
    color: var(--c-primary);
}

.product-detail-page--item-detail .detail-tabs-detail-item .epin-info-grid__value--success {
    color: #2ecc71;
}

.product-detail-page--item-detail .detail-tabs-seller-wrap {
    height: auto;
}

.product-detail-page--item-detail .item-detail-seller-card {
    background: rgba(24,27,33,.65);
    border-color: var(--ov-08);
    border-radius: 14px;
    padding: 18px;
}

/* İkon solda, sayı + etiket sağda (stacked) — 2'şerli dizilim */
.product-detail-page--item-detail .detail-tabs-seller-card__stat {
    flex: 1 1 calc(50% - 3px);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 1px;
    padding: 10px 12px;
    text-align: left;
    background: rgba(255,255,255,.035);
}

.product-detail-page--item-detail .detail-tabs-seller-card__stat .material-symbols-outlined {
    grid-row: 1 / 3;
    grid-column: 1;
    align-self: center;
    font-size: 32px;
    line-height: 1;
    color: rgba(219,232,255,.5);
}

.product-detail-page--item-detail .detail-tabs-seller-card__stat strong {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    line-height: 1;
}

.product-detail-page--item-detail .detail-tabs-seller-card__stat span {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    line-height: 1.15;
}

.product-detail-page--item-detail .detail-tabs-seller-card__stat--ok .material-symbols-outlined {
    color: var(--c-success);
}

.product-detail-page--item-detail .detail-tabs-seller-card__stat--fail .material-symbols-outlined {
    color: var(--c-danger);
}

.product-detail-page--item-detail .detail-tabs {
    background: rgba(24,27,33,.65);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--ov-08);
    border-radius: 14px;
    padding: 18px;
}

.product-detail-page--item-detail .tab-nav {
    border-bottom-color: var(--ov-08);
}

.product-detail-page--item-detail .tab-nav__btn.active {
    background: rgba(87,176,255,.12);
    border-color: rgba(87,176,255,.32);
    color: var(--c-primary);
}

.product-detail-page--item-detail .detail-tabs-desc,
.product-detail-page--item-detail .detail-tabs-comment__text {
    color: rgba(219,232,255,.72);
}

@media (max-width: 991.98px) {
    .product-detail-page--item-detail .item-detail-meta-row {
        flex-direction: column;
    }

    .product-detail-page--item-detail .item-detail-meta-row__details,
    .product-detail-page--item-detail .item-detail-meta-row__seller {
        flex: 1 1 auto;
        width: 100%;
    }

    .product-detail-page--item-detail .detail-tabs-price-block {
        flex-direction: column;
        align-items: stretch;
    }

    .product-detail-page--item-detail .detail-tabs-price-block__buy-btn {
        width: 100%;
        flex-basis: auto;
    }

    .product-detail-page--item-detail .detail-tabs-detail-item.epin-info-grid__cell { flex-basis: calc(50% - 7px); }
}

@media (max-width: 575.98px) {

    .product-detail-page--item-detail .item-detail-price-summary-card .detail-tabs-price-block {
        flex: 0 1 auto;
        width: 100%;
    }

    .product-detail-page--item-detail .detail-tabs-price-block__top--standalone {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-detail-page--item-detail .detail-tabs-detail-item.epin-info-grid__cell { flex-basis: 100%; }
}

/* ══════════════════════════════════════════
   BİRLEŞİK FİYAT / "TL" KISALTMA STİLİ
   - Boyut: fiyat font-size'ının 12/18'i (≈0.6667em)
   - Renk: fiyat rengini devral, opaklığı düşür
══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   MARKETPLACE — FEATURED PROMO ASIDE & LISTING TABS HEADER
══════════════════════════════════════════ */
.marketplace-grid {
    align-items: stretch;
}

/* Marketplace section: accent renkli yumuşak geçiş, sağa doğru kaybolur */
.marketplace-section {
    overflow: hidden;
    background: #10131a;
    position: relative;
    isolation: isolate;
    --promo-accent: #ff3b50;
}
.marketplace-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 10% 50%, color-mix(in srgb, var(--promo-accent) 28%, transparent) 0%, transparent 55%),
        linear-gradient(90deg, color-mix(in srgb, var(--promo-accent) 18%, transparent) 0%, transparent 70%);
    pointer-events: none;
    transition: background .6s ease;
}

.featured-promo {
    --promo-accent: #ff3b50;
    --promo-accent-soft: rgba(255,91,110,.15);
    position: relative;
    height: 100%;
    min-height: 460px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a0d12 0%, #14080d 50%, #0a0408 100%);
    border: 1px solid color-mix(in srgb, var(--promo-accent) 45%, var(--ov-08));
    isolation: isolate;
    transition: border-color .5s ease;
}
.featured-promo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 80% 40%, color-mix(in srgb, var(--promo-accent) 28%, transparent) 0%, transparent 55%),
        linear-gradient(110deg, rgba(15,8,12,.95) 0%, rgba(15,8,12,.55) 55%, rgba(15,8,12,.15) 100%);
    pointer-events: none;
    transition: background .5s ease;
}

.featured-promo__body {
    position: relative;
    z-index: 2;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: .85rem;
}

.featured-promo__label {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--promo-accent);
    text-transform: uppercase;
    transition: color .5s ease;
}

.featured-promo__title {
    margin: 0;
    font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem);
    font-weight: 900;
    line-height: 1.05;
    color: #ffffff;
    letter-spacing: .01em;
}
.featured-promo__title span {
    color: var(--promo-accent);
    transition: color .5s ease;
}

.featured-promo__desc {
    margin: 0;
    font-size: .85rem;
    color: rgba(219,232,255,.65);
    line-height: 1.6;
    max-width: 80%;
}

.featured-promo__features {
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.featured-promo__features li {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .82rem;
    color: rgba(219,232,255,.85);
}
.featured-promo__features .material-symbols-outlined {
    font-size: 18px;
    color: var(--promo-accent);
    background: color-mix(in srgb, var(--promo-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--promo-accent) 30%, transparent);
    border-radius: 8px;
    padding: 4px;
    flex-shrink: 0;
    transition: color .5s ease, background .5s ease, border-color .5s ease;
}

.featured-promo__cta {
    margin-top: auto;
    align-self: flex-start;
    color: var(--promo-accent) !important;
    border-color: color-mix(in srgb, var(--promo-accent) 62%, rgba(255,255,255,.16)) !important;
    transition: color .5s ease, border-color .5s ease, background .25s ease;
}
.featured-promo__cta:hover {
    background: color-mix(in srgb, var(--promo-accent) 12%, transparent) !important;
}

/* ─── Tab değişim animasyonları ─────────────────────────────── */
@keyframes promoFadeUp {
    from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}
@keyframes promoMediaSwap {
    from { opacity: 0;    transform: scale(1.08); }
    to   { opacity: .55;  transform: scale(1);    }
}
.featured-promo__body.is-animating > * {
    animation: promoFadeUp .55s cubic-bezier(.2,.7,.2,1) both;
}
.featured-promo__body.is-animating > *:nth-child(1) { animation-delay: 0s;    }
.featured-promo__body.is-animating > *:nth-child(2) { animation-delay: .06s;  }
.featured-promo__body.is-animating > *:nth-child(3) { animation-delay: .12s;  }
.featured-promo__body.is-animating > *:nth-child(4) { animation-delay: .18s;  }
.featured-promo__body.is-animating > *:nth-child(5) { animation-delay: .24s;  }

.featured-promo__media.is-animating {
    animation: promoMediaSwap .8s ease both;
}

/* ─── <img> elements inside featured-promo__media ───────────── */
.featured-promo__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 75%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 75%);
    background-image: none;
    opacity: 1;
}
.featured-promo__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    opacity: 0;
    transition: opacity .8s ease;
}
.featured-promo__img.is-active {
    opacity: .55;
}

/* ─── Multiple bodies — one per tab, show only is-active ─────── */
.featured-promo .featured-promo__body {
    display: none;
}
.featured-promo .featured-promo__body.is-active {
    display: flex;
}

/* ─── Listing tabs header (tabs left, "Tümünü Gör" right) ──── */
.listing-tabs__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.listing-tabs__head .nav-tabs {
    border-bottom: 0;
    margin: 0;
    flex: 1 1 auto;
}
.listing-tabs__all {
    flex-shrink: 0;
}

/* ─── Tab butonları kendi açacağı promo accent rengiyle uyumlu ─── */
.listing-tabs__nav .nav-link,
#myTab .nav-link {
    min-height: 46px;
    padding: 10px 18px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.65px;
    --tab-accent: var(--c-primary);
    position: relative;
    color: var(--c-text-muted);
    background: transparent;
    border: 1px solid var(--c-border);
    box-shadow: none;
    transition: color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.listing-tabs__nav .nav-link:hover,
#myTab .nav-link:hover,
.listing-tabs__nav .nav-link:focus-visible,
#myTab .nav-link:focus-visible {
    color: var(--c-text) !important;
    background: color-mix(in srgb, var(--tab-accent) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--tab-accent) 42%, rgba(255,255,255,.1)) !important;
    box-shadow: none !important;
}
.listing-tabs__nav .nav-link.active,
#myTab .nav-link.active {
    color: #ffffff !important;
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 52%), linear-gradient(135deg, color-mix(in srgb, var(--tab-accent) 88%, #ffffff 12%), color-mix(in srgb, var(--tab-accent) 70%, #040914 30%)) !important;
    border-color: color-mix(in srgb, var(--tab-accent) 72%, rgba(255,255,255,.18)) !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--tab-accent) 24%, transparent) !important;
}

/* ─── Marketplace tab-pane: 6'lı yerine 5'li kart grid (col-2 → 20%) ─── */
@media (min-width: 992px) {
    .marketplace-section .tab-pane > .row > .col-2 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* ─── Akrilik / cam efekti kartlar (marketplace-section içinde) ─── */
.marketplace-section .item-card {
    background: linear-gradient(135deg, var(--ov-06) 0%, var(--ov-02) 100%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
            backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--ov-12);
    box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.marketplace-section .item-card:hover {
    background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, var(--ov-04) 100%) !important;
    border-color: rgba(255,255,255,.18);
    box-shadow:
        0 12px 32px rgba(0,0,0,.35),
        0 0 0 1px var(--ov-08);
}

@media (max-width: 991.98px) {
    .featured-promo {
        min-height: 0;
    }
    .featured-promo__media {
        opacity: 0.35;
    }
}

/* ===== Error Page ===== */
.error-page {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, #0d0f16 0%, #10131a 48%, #0b0e15 100%);
}

.error-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(87,176,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(87,176,255,.055) 1px, transparent 1px);
    background-size: 68px 68px;
    opacity: 0.45;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 45%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 45%, transparent 100%);
}

.error-page__hero {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: calc(100vh - 258px);
    padding: 76px 0 82px;
}

.error-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
    align-items: center;
    gap: 56px;
}

.error-page__content {
    max-width: 740px;
}

.error-page__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    color: rgba(219,232,255,.56);
    font-size: 13px;
    font-weight: 600;
}

/* `.error-page` öneki: hero her temada koyu olduğundan
   themes.css'teki `[data-theme="light"] a` kuralını ezmek için. */
.error-page .error-page__breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(219,232,255,.64);
    text-decoration: none;
    transition: color 0.2s;
}

.error-page .error-page__breadcrumb a:hover {
    color: #dbe8ff;
}

.error-page__breadcrumb .material-symbols-outlined {
    font-size: 18px;
}

.error-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-bottom: 18px;
    padding: 8px 12px;
    border: 1px solid rgba(87,176,255,.24);
    border-radius: 999px;
    background: rgba(87,176,255,.09);
    color: #9fd0ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.error-page__eyebrow .material-symbols-outlined {
    font-size: 18px;
}

.error-page__code {
    margin-bottom: 14px;
    color: #fff;
    font-size: clamp(92px, 13vw, 178px);
    font-weight: 900;
    line-height: 0.82;
    letter-spacing: 0;
    text-shadow: 0 20px 70px rgba(87,176,255,.2);
}

.error-page__code span {
    color: var(--c-primary);
}

.error-page__content h1 {
    max-width: 660px;
    margin: 0 0 16px;
    color: #fff;
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: 0;
}

.error-page__content p {
    max-width: 650px;
    margin: 0 0 28px;
    color: #91a7c4;
    font-size: 16px;
    line-height: 1.72;
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.error-page__search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: min(100%, 560px);
    min-height: 56px;
    padding: 7px 7px 7px 16px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 8px;
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px 0 var(--ov-05), 0 18px 48px rgba(0,0,0,.22);
}

.error-page__search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #eef6ff;
    font-size: 14px;
}

.error-page__search input::placeholder {
    color: rgba(145,162,189,.78);
}

.error-page__search button {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 7px;
}

.error-page__quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.error-page .error-page__quick-links a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 11px;
    border: 1px solid var(--ov-08);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    color: #91a7c4;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.error-page .error-page__quick-links a:hover {
    border-color: rgba(87,176,255,.34);
    background: rgba(87,176,255,.08);
    color: #dbeeff;
}

.error-page__visual {
    position: relative;
    min-height: 500px;
}

.error-page__status {
    position: absolute;
    top: 24px;
    left: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: min(100%, 390px);
    padding: 14px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 8px;
    background: rgba(16,19,26,.9);
    box-shadow: 0 18px 48px rgba(0,0,0,.34);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.error-page__status > .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: rgba(87,176,255,.13);
    color: var(--c-primary);
    font-size: 24px;
}

.error-page__status strong,
.error-page__status small {
    display: block;
}

.error-page__status strong {
    color: #eef6ff;
    font-size: 13px;
    font-weight: 800;
}

.error-page__status small {
    margin-top: 3px;
    color: #7f92ae;
    font-size: 12px;
}

.error-page__status em {
    color: rgba(87,176,255,.72);
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
}

.error-game-stack {
    position: absolute;
    inset: 0;
}

.error-game-card {
    position: absolute;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    background: #151a23;
    box-shadow: 0 24px 70px rgba(0,0,0,.42);
}

.error-game-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 28%, rgba(5,7,12,.82) 100%);
}

.error-game-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.1) contrast(1.02);
}

.error-game-card span {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 13px;
    z-index: 1;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-shadow: 0 3px 12px rgba(0,0,0,.7);
}

.error-game-card--one {
    top: 78px;
    right: 48px;
    width: 270px;
    height: 330px;
}

.error-game-card--two {
    top: 164px;
    left: 20px;
    width: 220px;
    height: 272px;
}

.error-game-card--three {
    right: 0;
    bottom: 8px;
    width: 214px;
    height: 188px;
}

.error-game-card--four {
    left: 96px;
    bottom: 0;
    width: 174px;
    height: 148px;
}

.error-route-panel {
    position: absolute;
    right: 32px;
    top: 44%;
    z-index: 5;
    display: grid;
    grid-template-columns: auto minmax(48px, 84px) auto;
    align-items: center;
    gap: 8px;
    min-width: 250px;
    padding: 13px;
    border: 1px solid rgba(251,191,36,.22);
    border-radius: 8px;
    background: rgba(22,19,14,.88);
    box-shadow: 0 18px 46px rgba(0,0,0,.3);
    color: var(--c-warning);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.error-route-panel__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(251,191,36,.3);
}

.error-route-panel__dot--active {
    background: var(--c-warning);
    box-shadow: 0 0 0 5px rgba(251,191,36,.12);
}

.error-route-panel__line {
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(251,191,36,.24), rgba(251,191,36,.78));
}

.error-route-panel strong {
    grid-column: 1 / -1;
    margin-top: 4px;
    color: #fff4ce;
    font-size: 12px;
    font-weight: 800;
}

.error-route-panel small {
    grid-column: 1 / -1;
    color: rgba(255,244,206,.64);
    font-size: 11px;
}

.error-help {
    position: relative;
    z-index: 1;
    padding: 0 0 64px;
}

.error-help__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.error-page .error-help__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
    padding: 18px;
    border: 1px solid var(--ov-08);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s, border-color 0.2s, background 0.2s;
}

.error-help__item:hover {
    transform: translateY(-3px);
    border-color: rgba(87,176,255,.28);
    background: rgba(87,176,255,.055);
}

.error-help__item .material-symbols-outlined {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: rgba(87,176,255,.11);
    color: var(--c-primary);
    font-size: 23px;
}

.error-help__item strong {
    color: #eef6ff;
    font-size: 14px;
    font-weight: 800;
}

.error-help__item small {
    color: #8496b0;
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 1199.98px) {
    .error-page__grid {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
        gap: 38px;
    }

    .error-game-card--one {
        right: 24px;
        width: 238px;
        height: 306px;
    }

    .error-game-card--two {
        width: 194px;
        height: 248px;
    }

    .error-route-panel {
        right: 8px;
    }
}

@media (max-width: 991.98px) {
    .error-page__hero {
        min-height: 0;
        padding: 52px 0 54px;
    }

    .error-page__grid {
        grid-template-columns: 1fr;
    }

    .error-page__content {
        max-width: none;
    }

    .error-page__visual {
        min-height: 410px;
    }

    .error-page__status {
        left: 0;
        top: 0;
    }

    .error-game-card--one {
        top: 56px;
        right: 18%;
    }

    .error-game-card--two {
        top: 126px;
        left: 6%;
    }

    .error-game-card--three {
        right: 12%;
        bottom: 10px;
    }

    .error-game-card--four {
        left: 26%;
        bottom: 4px;
    }

    .error-route-panel {
        right: 4%;
        top: 46%;
    }

    .error-help__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .error-page__hero {
        padding: 36px 0 42px;
    }

    .error-page__breadcrumb {
        margin-bottom: 18px;
    }

    .error-page__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .error-page__actions .btn-o,
    .error-page__search {
        width: 100%;
    }

    .error-page__search {
        grid-template-columns: auto minmax(0, 1fr) 40px;
        min-height: 54px;
    }

    .error-page__visual {
        min-height: 360px;
    }

    .error-page__status {
        width: 100%;
    }

    .error-game-card--one {
        top: 72px;
        right: 0;
        width: 58%;
        height: 238px;
    }

    .error-game-card--two {
        top: 128px;
        left: 0;
        width: 48%;
        height: 216px;
    }

    .error-game-card--three,
    .error-game-card--four {
        display: none;
    }

    .error-route-panel {
        right: 0;
        top: auto;
        bottom: 0;
        min-width: 220px;
    }

    .error-help {
        padding-bottom: 42px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   YAYINCILAR SAYFASI v2 — Twitch tarzı canlı odaklı tasarım (bcx-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Hero ─── */
.bcx-hero {
    padding: 28px 0;
    background:
        radial-gradient(900px 280px at 12% -40%, rgba(87,176,255,.14), transparent 60%),
        radial-gradient(700px 240px at 88% -30%, rgba(229,62,62,.1), transparent 60%),
        rgba(255,255,255,.015);
    border-bottom: 1px solid var(--ov-05);
}
.bcx-hero__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.bcx-hero__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 800;
    color: #f1f5f9;
}
.bcx-hero__title .material-symbols-outlined { font-size: 30px; color: var(--c-primary); }
.bcx-hero__desc { font-size: 14px; color: #94a3b8; margin: 0; }
.bcx-hero__stats { display: flex; gap: 12px; }
.bcx-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 110px;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--ov-04);
    border: 1px solid var(--ov-07);
}
.bcx-hero__stat strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 20px;
    font-weight: 800;
    color: #f1f5f9;
}
.bcx-hero__stat span { font-size: 12px; color: #64748b; font-weight: 600; }
.bcx-hero__stat--live { border-color: rgba(229,62,62,.35); background: rgba(229,62,62,.07); }
.bcx-hero__stat--live strong { color: var(--c-danger); }

/* ─── Canlı nokta ─── */
.bcx-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e53e3e;
    box-shadow: 0 0 0 3px rgba(229,62,62,.25);
    animation: pulse-dot 1.6s ease-in-out infinite;
}
.bcx-live-dot--lg { width: 11px; height: 11px; }

/* ─── Bölüm başlıkları ─── */
.bcx-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.bcx-section-head__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #f1f5f9;
}
.bcx-section-head__title .material-symbols-outlined { font-size: 22px; }
.bcx-section-head__hint { font-size: 13px; color: #94a3b8; }

/* ─── Responsive ─── */

@media (max-width: 767.98px) {
    .bcx-hero__inner { flex-direction: column; align-items: flex-start; }
    .bcx-hero__stats { width: 100%; }
    .bcx-hero__stat { flex: 1; }
}

/* ─── Yayıncı detay: Twitch embed player ─── */
.bd-video__iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    background: #000;
}
.bd-video__streambar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--ov-03);
    border-top: 1px solid var(--ov-06);
}
.bd-video__live-badge--inline {
    position: static;
    flex-shrink: 0;
}
.bd-video__streambar-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.bd-video__streambar-meta strong {
    font-size: 13px;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bd-video__streambar-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #94a3b8;
}
.bd-video__streambar-meta span .material-symbols-outlined { font-size: 14px; }
.bd-video__streambar-viewers {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-danger);
}
.bd-video__streambar-viewers .material-symbols-outlined { font-size: 15px; }

/* ─── Yayıncı detay: çevrimdışı streambar ─── */
.bd-video__offline-badge {
    flex-shrink: 0;
    background: rgba(255,255,255,.1);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: .5px;
}
.bd-video__streambar-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #a970ff;
    text-decoration: none;
}
.bd-video__streambar-link:hover { color: #bf94ff; }

/* Sepet: görseli olmayan ürün için ikon fallback */
.cart-page__item-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 28px;
    color: rgba(255,255,255,.25);
    background: var(--ov-04);
}

/* ══════════════════════════════════════════
   KAMPANYA / AÇILIŞA ÖZEL LANDING (campaigns.show)
══════════════════════════════════════════ */
.campaign-hero {
    position: relative;
    overflow: hidden;
    padding: 56px 0 60px;
    border-bottom: 1px solid var(--ov-05);
    background:
        radial-gradient(120% 140% at 85% 0%, rgba(160,75,255,.14), transparent 55%),
        linear-gradient(135deg, rgba(87,176,255,.12), rgba(10,12,16,0) 60%);
}
.campaign-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .16;
    filter: blur(3px) saturate(1.1);
    transform: scale(1.06);
    pointer-events: none;
}
.campaign-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,12,16,.15), rgba(10,12,16,.65));
    pointer-events: none;
}

.campaign-hero__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.campaign-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
.campaign-pill--type {
    color: #cfe4ff;
    background: rgba(87,176,255,.14);
    border: 1px solid rgba(87,176,255,.3);
}
.campaign-pill--type i {
    font-size: 14px;
}

.campaign-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
.campaign-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.campaign-status--live {
    color: #4ade80;
    background: rgba(74,222,128,.12);
    border: 1px solid rgba(74,222,128,.3);
}
.campaign-status--live .campaign-status__dot {
    box-shadow: 0 0 0 0 rgba(74,222,128,.6);
    animation: campaignPulse 1.8s infinite;
}
.campaign-status--ended {
    color: #ff9b9b;
    background: rgba(255,107,107,.12);
    border: 1px solid rgba(255,107,107,.28);
}
.campaign-status--soon {
    color: #facc15;
    background: rgba(250,204,21,.1);
    border: 1px solid rgba(250,204,21,.28);
}
@keyframes campaignPulse {
    0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.55); }
    70%  { box-shadow: 0 0 0 7px rgba(74,222,128,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

.campaign-hero__title {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    color: #fff;
    line-height: 1.18;
    margin: 0 0 12px;
}
.campaign-hero__desc {
    max-width: 560px;
    color: rgba(219,232,255,.78);
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 20px;
}

.campaign-offer {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: rgba(0,0,0,.32);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    margin-bottom: 22px;
}
.campaign-offer__value {
    color: #fff;
    font-size: 19px;
    font-weight: 800;
}
.campaign-offer__sep {
    width: 1px;
    height: 22px;
    background: var(--ov-12);
}
.campaign-offer__code-label {
    color: rgba(255,255,255,.55);
    font-size: 13px;
}
.campaign-code {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(87,176,255,.15);
    border: 1px dashed rgba(87,176,255,.5);
    border-radius: 8px;
    color: #8ecbff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    cursor: pointer;
    transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.campaign-code:hover {
    background: rgba(87,176,255,.24);
    border-color: rgba(87,176,255,.8);
    color: #fff;
}
.campaign-code__icon {
    font-size: 16px;
}
.campaign-code.is-copied {
    color: #4ade80;
    border-color: rgba(74,222,128,.6);
    background: rgba(74,222,128,.14);
}

.campaign-countdown {
    margin-bottom: 22px;
}
.campaign-countdown__label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: rgba(255,255,255,.5);
    margin-bottom: 8px;
}
.campaign-countdown__units {
    display: flex;
    gap: 10px;
}
.campaign-countdown__unit {
    min-width: 66px;
    text-align: center;
    padding: 12px 8px;
    background: rgba(0,0,0,.38);
    border: 1px solid var(--ov-07);
    border-radius: 10px;
}
.campaign-countdown__num {
    display: block;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.campaign-countdown__cap {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: rgba(255,255,255,.5);
    margin-top: 6px;
}

.campaign-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}
.campaign-meta__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,.6);
}
.campaign-meta__item .material-symbols-outlined {
    font-size: 17px;
    color: var(--c-primary);
    flex-shrink: 0;
}

.campaign-hero__media img {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 24px 70px -24px rgba(0,0,0,.65);
}

/* Bölümler */
.campaign-section {
    padding: 32px 0;
}
.campaign-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 18px;
}
.campaign-cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--ov-04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background var(--tr), border-color var(--tr), transform var(--tr);
}
.campaign-cat:hover {
    background: rgba(87,176,255,.12);
    border-color: rgba(87,176,255,.4);
    transform: translateY(-2px);
    color: #fff;
}
.campaign-cat i {
    color: var(--c-primary);
}

.campaign-product {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px;
    background: var(--ov-04);
    border: 1px solid var(--ov-08);
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    transition: background var(--tr), border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.campaign-product:hover {
    background: var(--ov-06);
    border-color: rgba(87,176,255,.4);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -22px rgba(0,0,0,.7);
    color: #fff;
}
.campaign-product__thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    background: var(--ov-04);
}
.campaign-product__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--tr);
}
.campaign-product:hover .campaign-product__thumb img {
    transform: scale(1.05);
}
.campaign-product__thumb .material-symbols-outlined {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: rgba(255,255,255,.25);
}
.campaign-product__name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: auto;
}
.campaign-product__price {
    font-size: 14px;
    color: var(--c-primary);
    font-weight: 700;
    margin-top: 8px;
}

@media (max-width: 575.98px) {
    .campaign-hero {
        padding: 36px 0 40px;
    }
    .campaign-meta {
        grid-template-columns: minmax(0, 1fr);
    }
    .campaign-countdown__unit {
        min-width: 0;
        flex: 1;
    }
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: #16181f;
    border: 1px solid var(--ov-06);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.blog-card:hover {
    border-color: rgba(87,176,255,.35);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0,0,0,.25);
}

/* Kapak — görsel bağımlılığı olmadan degrade ile */
.blog-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.blog-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.14), transparent 45%);
}
.blog-cover--blue   { background: linear-gradient(135deg, #2b3cef, var(--c-primary)); }
.blog-cover--gold   { background: linear-gradient(135deg, #b46a00, #fb7600); }
.blog-cover--purple { background: linear-gradient(135deg, #5b13a8, #9400fe); }
.blog-cover--green  { background: linear-gradient(135deg, #137a3a, #4ade80); }

.blog-card__category {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(13,17,23,.72);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid var(--ov-12);
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 18px;
}
.blog-card__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: rgba(219,232,255,.45);
}
.blog-card__meta .material-symbols-outlined { font-size: 15px; }
.blog-card__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
}
.blog-card__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}
.blog-card__title a {
    color: #e6eefb;
    text-decoration: none;
}
.blog-card__title a:hover { color: var(--c-primary); }
.blog-card__excerpt {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(219,232,255,.55);
}
.blog-card__more {
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-primary);
    text-decoration: none;
}
.blog-card__more .material-symbols-outlined { font-size: 17px; transition: transform .2s; }
.blog-card__more:hover .material-symbols-outlined { transform: translateX(3px); }

/* ── Detay ── */
.blog-post {
    max-width: 820px;
    margin: 0 auto;
}
.blog-post__cover {
    aspect-ratio: 21 / 9;
    border-radius: 16px;
    margin-bottom: 22px;
}
.blog-post__title {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 10px;
}
.blog-post__header { margin-bottom: 22px; }
.blog-post__content {
    color: rgba(230,238,251,.82);
    font-size: 15.5px;
    line-height: 1.8;
}
.blog-post__content h2 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 26px 0 10px;
}
.blog-post__content p { margin: 0 0 16px; }
.blog-post__back { margin-top: 26px; }

.blog-related {
    max-width: 1100px;
    margin: 44px auto 0;
}
.blog-related__title {
    font-size: 18px;
    font-weight: 700;
    color: #e6eefb;
    margin: 0 0 18px;
}

@media (max-width: 991.98px) {
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .blog-grid { grid-template-columns: minmax(0, 1fr); }
    .blog-post__title { font-size: 24px; }
}

/* ── Blog anasayfası (hub) ── */
.blog-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 26px 28px;
    margin-bottom: 24px;
    border-radius: 18px;
    border: 1px solid var(--ov-07);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(87,176,255,.16), transparent 50%),
        radial-gradient(120% 140% at 0% 100%, rgba(148,0,254,.14), transparent 50%),
        #14161d;
}
.blog-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--c-primary);
    margin-bottom: 12px;
}
.blog-hero__eyebrow .material-symbols-outlined { font-size: 17px; }
.blog-hero__title {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 8px;
    max-width: 620px;
}
.blog-hero__desc {
    margin: 0;
    font-size: 14.5px;
    color: rgba(219,232,255,.6);
    max-width: 560px;
}
.blog-search {
    position: relative;
    flex: 0 0 320px;
    max-width: 320px;
}
.blog-search .material-symbols-outlined {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: rgba(219,232,255,.45);
    pointer-events: none;
}
.blog-search input {
    width: 100%;
    height: 46px;
    padding: 0 16px 0 42px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(13,17,23,.55);
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color .2s, background .2s;
}
.blog-search input::placeholder { color: rgba(219,232,255,.4); }
.blog-search input:focus {
    border-color: rgba(87,176,255,.5);
    background: rgba(13,17,23,.8);
}

/* Öne çıkan yazı */
.blog-featured {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 0;
    margin-bottom: 30px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--ov-07);
    background: #16181f;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.blog-featured:hover {
    border-color: rgba(87,176,255,.35);
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
    transform: translateY(-2px);
}
.blog-featured__cover {
    aspect-ratio: auto;
    min-height: 260px;
}
.blog-featured__flag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(13,17,23,.78);
    color: #fac850;
    border: 1px solid rgba(250,200,80,.3);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.blog-featured__flag .material-symbols-outlined { font-size: 15px; }
.blog-featured__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 30px 32px;
}
.blog-card__category--inline {
    position: static;
    inset: auto;
}
.blog-featured__title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
    margin: 0;
}
.blog-featured:hover .blog-featured__title { color: var(--c-primary); }
.blog-featured__excerpt {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(219,232,255,.6);
}

/* Araç çubuğu + filtre çipleri */
.blog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.blog-section-title {
    font-size: 20px;
    font-weight: 700;
    color: #e6eefb;
    margin: 0;
}
.blog-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    background: var(--ov-04);
    color: rgba(219,232,255,.7);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
}
.blog-chip span {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ov-08);
    color: rgba(219,232,255,.55);
}
.blog-chip:hover { border-color: rgba(87,176,255,.4); color: #fff; }
.blog-chip.is-active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #0d1117;
}
.blog-chip.is-active span { background: rgba(13,17,23,.2); color: #0d1117; }

/* İçerik + sidebar düzeni */
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}
.blog-layout__main .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blog-empty {
    text-align: center;
    padding: 50px 0;
    color: rgba(219,232,255,.5);
}
.blog-empty .material-symbols-outlined { font-size: 44px; }
.blog-empty p { margin: 10px 0 0; }

.blog-aside {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.blog-widget {
    background: #16181f;
    border: 1px solid var(--ov-06);
    border-radius: 14px;
    padding: 18px 18px 20px;
}
.blog-widget__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #e6eefb;
    margin: 0 0 14px;
}
.blog-widget__title .material-symbols-outlined { font-size: 19px; color: var(--c-primary); }

.blog-poplist { list-style: none; margin: 0; padding: 0; }
.blog-poplist li + li { margin-top: 4px; }
.blog-poplist a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 8px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .18s;
}
.blog-poplist a:hover { background: var(--ov-04); }
.blog-poplist__num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(87,176,255,.12);
    color: var(--c-primary);
    font-size: 13px;
    font-weight: 800;
}
.blog-poplist__title {
    font-size: 13px;
    font-weight: 600;
    color: #dbe8ff;
    line-height: 1.35;
}
.blog-poplist a:hover .blog-poplist__title { color: var(--c-primary); }
.blog-poplist__meta { font-size: 11px; color: rgba(219,232,255,.42); }

.blog-catlist { list-style: none; margin: 0; padding: 0; }
.blog-catlist li + li { margin-top: 4px; }
.blog-catlist__item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--ov-03);
    color: rgba(219,232,255,.75);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
}
.blog-catlist__item:hover {
    border-color: rgba(87,176,255,.35);
    color: #fff;
}
.blog-catlist__count {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ov-07);
    color: rgba(219,232,255,.55);
}

@media (max-width: 991.98px) {
    .blog-layout { grid-template-columns: minmax(0, 1fr); }
    .blog-aside { position: static; }
    .blog-featured { grid-template-columns: minmax(0, 1fr); }
    .blog-featured__cover { min-height: 200px; aspect-ratio: 16 / 9; }
}
@media (max-width: 575.98px) {
    .blog-layout__main .blog-grid { grid-template-columns: minmax(0, 1fr); }
    .blog-hero { padding: 22px; }
    .blog-hero__title { font-size: 24px; }
    .blog-search { flex-basis: 100%; max-width: 100%; }
}

/* =========================================================================
   Ürün indirim gösterimi (<x-product-price>) — orjinal fiyat üstü çizili
   + %X İNDİRİM rozeti. Host fiyat elemanının içine yerleşir; güncel fiyat
   host tipografisini miras alır. Tek satırlık kompakt düzen: kartların
   yüksekliğini değiştirmez (grid kayması olmaz).
   ========================================================================= */
.product-price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    min-width: 0;
    line-height: 1.1;
}
.product-price__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--c-danger-hover), #dc2626);
    box-shadow: 0 2px 8px rgba(220,38,38,.3);
    color: #fff;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}
/* .product-price sarmalayıcısı zaten gap kullanır; çift boşluk olmasın diye sıfırla. */
.product-price > .product-price__badge {
    margin-right: 0;
}
/* Alış tarafı (kullanıcı siteye satar) artış rozeti: yükselme kullanıcı lehine
   olduğu için yeşil. İndirim (kırmızı) ile karışmasın. */
.product-price__badge--up {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 2px 8px rgba(22,163,74,.3);
}
/* Goldbar kart alış tarafı artış rozeti (product-row) — yeşil. */
.product-row__discount--up {
    background: #16a34a;
}
.product-price__badge strong {
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}
.product-price__badge small {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1;
    color: #fff;
}
.product-price__col {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.product-price__old {
    font-size: .72em;
    font-weight: 600;
    color: rgba(226,232,240,.45);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    white-space: nowrap;
}
.product-price__old small {
    font-size: .85em;
    font-weight: 600;
    color: rgba(226,232,240,.4);
}
.product-price__current {
    white-space: nowrap;
}
/* Kart grid'lerinde (cash-card, item-card) rozet akıştan çıkarılır: kartın köşesine
   konumlanır, fiyat satırı tek satır kalır ve indirimli kart komşularıyla aynı
   yükseklikte olur (grid kayması olmaz). Kartlar zaten position:relative. */
.cash-card .product-price__badge,
.item-card .product-price__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
}
.cash-card .product-price,
.item-card .product-price {
    gap: 6px;
}

/* item-card: indirim rozeti — sağ üst köşe şeridi (corner ribbon).
   Kart position:relative + overflow:hidden olduğu için şeridin uçları
   kart köşesine kırpılır; fiyat satırı tek satır kalır (grid kayması olmaz). */
.item-card .product-price__badge {
    top: 17px;
    left: auto;
    right: -40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 140px;
    margin: 0;
    padding: 5px 0;
    border-radius: 0;
    box-shadow: 0 3px 6px rgba(0,0,0,.32);
    transform: rotate(45deg);
}
.item-card .product-price__badge strong {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .3px;
}
.item-card .product-price__badge small {
    font-size: 9px;
    letter-spacing: .6px;
}
.item-card .product-price__col {
    gap: 7px;
}
.item-card .product-price__old {
    font-size: .8em;
    font-weight: 600;
    color: rgba(226,232,240,.55);
}
.item-card .product-price__old small {
    color: rgba(226,232,240,.5);
}
.item-card .product-price__current {
    font-weight: 800;
}

/* Survey pages */
.survey-page {
    padding: 48px 0 64px;
    color: var(--c-text, #fff);
}
.survey-page--center {
    min-height: min(680px, calc(100vh - 120px));
    display: flex;
    align-items: center;
}
.survey-shell {
    width: min(100%, 860px);
    margin: 0 auto;
}
.survey-shell--form {
    width: min(100%, 820px);
}
.survey-card,
.survey-result-card {
    border: 1px solid rgba(148,163,184,.16);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(18,29,48,.98) 0%, rgba(12,18,29,.98) 100%);
    box-shadow: 0 24px 70px rgba(0,0,0,.42);
    overflow: hidden;
}
.survey-card__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(148,163,184,.14);
    background: rgba(5,10,20,.18);
}
.survey-card__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(87,176,255,.26);
    border-radius: 9px;
    background: rgba(87,176,255,.1);
    color: var(--c-primary, var(--c-primary));
    font-size: 19px;
}
.survey-card__title {
    margin: 0;
    color: #fff;
    font-size: 19px;
    font-weight: 750;
    line-height: 1.25;
}
.survey-card__desc {
    max-width: 680px;
    margin: 8px 0 0;
    color: #a9bdd9;
    font-size: 14px;
    line-height: 1.55;
}
.survey-card__body {
    padding: 26px 28px 30px;
}
.survey-alert-block {
    margin-bottom: 20px;
}
.survey-form {
    display: grid;
}
.survey-submit {
    width: 100%;
    justify-content: center;
    margin-top: 22px;
}
.survey-result-card {
    width: min(100%, 540px);
    margin: 0 auto;
    padding: 42px 36px;
    text-align: center;
}
.survey-result-card__icon {
    width: 68px;
    height: 68px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 18px;
    font-size: 36px;
}
.survey-result-card--success .survey-result-card__icon {
    border: 1px solid rgba(52,211,153,.3);
    background: rgba(52,211,153,.11);
    color: var(--c-success, var(--c-success));
}
.survey-result-card--info .survey-result-card__icon {
    border: 1px solid rgba(87,176,255,.28);
    background: rgba(87,176,255,.1);
    color: var(--c-primary, var(--c-primary));
}
.survey-result-card__title {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.25;
}
.survey-result-card__text {
    max-width: 420px;
    margin: 12px auto 24px;
    color: #a9bdd9;
    font-size: 14px;
    line-height: 1.6;
}
.survey-result-card__action {
    min-width: 132px;
    justify-content: center;
}

/* Survey rating picker */
.survey-rating {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    width: min(100%, 360px);
    margin-top: 10px;
}
.survey-rating__option {
    position: relative;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}
.survey-rating__option input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.survey-rating__card {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    color: #cdddf5;
    transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.survey-rating__icon {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,209,102,.5);
    font-size: 22px;
    line-height: 1;
    transition: color var(--tr);
}
.survey-rating__score {
    color: var(--c-text-muted, var(--c-text-muted));
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.survey-rating__suffix {
    display: none;
}
.survey-rating__option:hover .survey-rating__card,
.survey-rating__option input:focus-visible + .survey-rating__card {
    border-color: rgba(255,255,255,.2);
    background: var(--ov-06);
}
.survey-rating__option:hover .survey-rating__icon,
.survey-rating__option input:focus-visible + .survey-rating__card .survey-rating__icon {
    color: rgba(255,209,102,.82);
}
.survey-rating__option input:checked + .survey-rating__card {
    border-color: rgba(255,209,102,.52);
    background: rgba(255,209,102,.12);
}
.survey-rating__option input:checked + .survey-rating__card .survey-rating__icon {
    color: var(--c-gold, var(--c-gold));
}
.survey-rating__option input:checked + .survey-rating__card .survey-rating__score {
    color: var(--c-gold, var(--c-gold));
}

@media (max-width: 575.98px) {
    .survey-rating {
        gap: 6px;
    }
    .survey-rating__card {
        min-height: 44px;
    }
    .survey-rating__icon {
        font-size: 20px;
    }
    .survey-rating__score {
        font-size: 11px;
    }
}

/* Survey form controls */
.survey-q {
    padding: 18px 0;
    border-bottom: 1px solid var(--c-border, var(--ov-08));
}
.survey-q:first-child,
.survey-q:first-of-type,
.survey-q--first {
    padding-top: 0;
}
.survey-q:last-of-type,
.survey-q--last {
    padding-bottom: 0;
    border-bottom: 0;
}
.survey-q__label {
    display: block;
    margin-bottom: 8px;
    color: #dbe8ff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}
.survey-q__hint {
    display: block;
    margin: -2px 0 12px;
    color: var(--c-text-muted, var(--c-text-muted));
    font-size: 12px;
    line-height: 1.4;
}
.survey-choice-list {
    display: grid;
    gap: 8px;
}
.survey-choice-list .radio-o,
.survey-choice-list .check-o,
.survey-choice-list--inline .radio-o,
.survey-choice-list--inline .check-o {
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    color: #dbe8ff;
    transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.survey-choice-list--inline .radio-o,
.survey-choice-list--inline .check-o {
    min-width: 118px;
}
.survey-choice-list .radio-o:hover,
.survey-choice-list .check-o:hover,
.survey-choice-list--inline .radio-o:hover,
.survey-choice-list--inline .check-o:hover {
    border-color: rgba(255,255,255,.2);
    background: var(--ov-06);
}
.survey-choice-list .radio-o:has(input:checked),
.survey-choice-list .check-o:has(input:checked),
.survey-choice-list--inline .radio-o:has(input:checked),
.survey-choice-list--inline .check-o:has(input:checked) {
    border-color: rgba(87,176,255,.44);
    background: rgba(87,176,255,.1);
}
.survey-scale {
    --survey-scale-value: 44.444%;
    --survey-scale-track: rgba(255,255,255,.075);
    --survey-scale-side-pad: 28px;
    display: grid;
    gap: 10px;
    width: min(100%, 420px);
    margin-top: 10px;
}
.survey-scale__control {
    position: relative;
    height: 60px;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}
.survey-scale__visual {
    position: absolute;
    left: var(--survey-scale-side-pad);
    right: var(--survey-scale-side-pad);
    top: 28px;
    height: 24px;
    pointer-events: none;
}
.survey-scale__track,
.survey-scale__fill {
    position: absolute;
    left: 0;
    top: 50%;
    height: 8px;
    border-radius: 999px;
    transform: translateY(-50%);
}
.survey-scale__track {
    right: 0;
    border: 1px solid rgba(255,255,255,.1);
    background:
        linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px) 0 50% / 11.111% 8px repeat-x,
        var(--survey-scale-track);
}
.survey-scale__fill {
    width: var(--survey-scale-value);
    max-width: 100%;
    background: linear-gradient(90deg, var(--c-primary, var(--c-primary)), #8fd0ff);
}
.survey-scale__thumb {
    position: absolute;
    left: var(--survey-scale-value);
    top: 50%;
    width: 22px;
    height: 22px;
    border: 3px solid #101827;
    border-radius: 50%;
    background: #8fd0ff;
    box-shadow: 0 0 0 1px rgba(255,255,255,.24), 0 6px 16px rgba(0,0,0,.32);
    transform: translate(-50%, -50%);
    transition: transform var(--tr), background var(--tr), box-shadow var(--tr);
}
.survey-scale__bubble {
    position: absolute;
    left: var(--survey-scale-value);
    top: -30px;
    min-width: 34px;
    padding: 5px 9px;
    border: 1px solid rgba(87,176,255,.3);
    border-radius: 999px;
    background: #142136;
    box-shadow: 0 8px 18px rgba(0,0,0,.3);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    transform: translateX(-50%);
}
.survey-scale__bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 8px;
    height: 8px;
    border-right: 1px solid rgba(87,176,255,.3);
    border-bottom: 1px solid rgba(87,176,255,.3);
    background: #142136;
    transform: translateX(-50%) rotate(45deg);
}
.survey-scale__input {
    position: absolute;
    z-index: 2;
    left: var(--survey-scale-side-pad);
    right: var(--survey-scale-side-pad);
    top: 18px;
    display: block;
    width: calc(100% - (var(--survey-scale-side-pad) * 2));
    height: 34px;
    margin: 0;
    border: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    opacity: 0;
    touch-action: pan-y;
}
.survey-scale__input:focus {
    outline: none;
}
.survey-scale__control:hover .survey-scale__thumb,
.survey-scale__input:focus-visible ~ .survey-scale__visual .survey-scale__thumb {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 0 0 4px rgba(87,176,255,.16), 0 8px 18px rgba(0,0,0,.36);
}
.survey-scale__input:focus-visible ~ .survey-scale__visual .survey-scale__track {
    border-color: rgba(87,176,255,.35);
}
.survey-scale__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--survey-scale-side-pad);
    color: var(--c-text-muted, var(--c-text-muted));
    font-weight: 700;
}
.survey-scale__edge {
    min-width: 20px;
    color: rgba(139,163,199,.72);
    font-size: 11px;
    line-height: 1;
}
.survey-q textarea.input-o {
    min-height: 112px;
}

@media (pointer: coarse) {
    .survey-scale {
        --survey-scale-side-pad: 30px;
    }
    .survey-scale__control {
        height: 66px;
    }
    .survey-scale__input {
        top: 14px;
        height: 44px;
    }
}

@media (max-width: 767.98px) {
    .survey-page {
        padding: 28px 0 42px;
    }
    .survey-card__header,
    .survey-card__body {
        padding-left: 18px;
        padding-right: 18px;
    }
    .survey-card__title {
        font-size: 17px;
    }
    .survey-result-card {
        padding: 34px 22px;
    }
}