@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

@font-face {
    font-family: 'DrukCond';
    src: url('../fonts/DrukCond.otf') format('opentype');
    font-display: swap;
}

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

    /* ── Button Design Tokens ── */
    --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, 0.10);
    --c-border-hover: rgba(255, 255, 255, 0.18);
    --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'); }
.si-playstation { -webkit-mask-image: url('../images/brand/playstation.svg'); mask-image: url('../images/brand/playstation.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;
}

body.home-skeleton-loading {
    overflow: hidden;
}

.home-skeleton-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    overflow: hidden;
    background: #0d0f16;
    opacity: 1;
    visibility: visible;
    transition: opacity .35s ease, visibility .35s ease;
}

.home-skeleton-loader.is-hiding {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.home-skeleton-loader__inner {
    width: min(1600px, calc(100% - 48px));
    padding: 14px 0 42px;
}

.home-skeleton-loader__ghost {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, .052);
}

.home-skeleton-loader__ghost::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .11), transparent);
    animation: home-skeleton-shimmer 1.35s ease-in-out infinite;
}

.home-skeleton-loader__top,
.home-skeleton-loader__header,
.home-skeleton-loader__nav,
.home-skeleton-loader__hero,
.home-skeleton-loader__logo-strip,
.home-skeleton-loader__content {
    width: 100%;
}

.home-skeleton-loader__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 28px;
    margin-bottom: 8px;
}

.home-skeleton-loader__top-links,
.home-skeleton-loader__social,
.home-skeleton-loader__actions,
.home-skeleton-loader__nav-links {
    display: flex;
    align-items: center;
}

.home-skeleton-loader__top-links {
    gap: 12px;
}

.home-skeleton-loader__top-link {
    width: 76px;
    height: 14px;
    border-radius: 999px;
}

.home-skeleton-loader__top-link--wide {
    width: 112px;
}

.home-skeleton-loader__top-link--badge {
    width: 136px;
}

.home-skeleton-loader__social {
    gap: 12px;
}

.home-skeleton-loader__social-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.home-skeleton-loader__header {
    display: grid;
    grid-template-columns: 190px minmax(280px, 1fr) auto;
    gap: 16px;
    align-items: center;
    min-height: 62px;
    padding: 10px 0;
    margin-bottom: 0;
}

.home-skeleton-loader__menu {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
}

.home-skeleton-loader__logo {
    width: 170px;
    height: 42px;
}

.home-skeleton-loader__search {
    height: 44px;
    border-radius: 14px;
}

.home-skeleton-loader__actions {
    justify-content: flex-end;
    gap: 8px;
}

.home-skeleton-loader__action {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.home-skeleton-loader__lang {
    width: 78px;
    height: 40px;
    border-radius: 10px;
}

.home-skeleton-loader__login {
    width: 118px;
    height: 40px;
    border-radius: 10px;
}

.home-skeleton-loader__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    margin-bottom: 30px;
}

.home-skeleton-loader__nav-links {
    gap: 8px;
    min-width: 0;
}

.home-skeleton-loader__tab {
    width: 104px;
    height: 38px;
    border-radius: 8px;
}

.home-skeleton-loader__wallet {
    flex: 0 0 180px;
    height: 40px;
    border-radius: 8px;
}

.home-skeleton-loader__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(4, 150px);
    gap: 8px;
    height: 420px;
    margin-bottom: 24px;
    padding: 0;
    background: transparent;
}

.home-skeleton-loader__hero-main {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 14px;
    padding: 34px 40px;
    background: rgba(255, 255, 255, .046);
}

.home-skeleton-loader__tag {
    width: 74px;
    height: 28px;
    border-radius: 999px;
}

.home-skeleton-loader__title {
    width: min(430px, 76%);
    height: 68px;
}

.home-skeleton-loader__line {
    width: min(380px, 72%);
    height: 16px;
}

.home-skeleton-loader__line--short {
    width: min(300px, 54%);
}

.home-skeleton-loader__button {
    width: 128px;
    height: 40px;
    border-radius: 10px;
    background: rgba(87, 176, 255, .18);
}

.home-skeleton-loader__rail {
    display: contents;
}

.home-skeleton-loader__panel {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 420px;
    background: rgba(255, 255, 255, .045);
}

.home-skeleton-loader__panel i {
    display: block;
    width: 54%;
    height: 16px;
    margin-bottom: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
}

.home-skeleton-loader__logo-strip {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 14px;
    padding: 18px 0;
    margin-bottom: 28px;
}

.home-skeleton-loader__brand {
    height: 58px;
    border-radius: 8px;
}

.home-skeleton-loader__section-title {
    width: 220px;
    height: 32px;
    margin-bottom: 20px;
}

.home-skeleton-loader__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.home-skeleton-loader__card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 14px;
    aspect-ratio: 1 / 1.15;
    min-height: 196px;
    padding: 14px;
    background: rgba(255, 255, 255, .045);
}

.home-skeleton-loader__card i,
.home-skeleton-loader__card b {
    display: block;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
}

.home-skeleton-loader__card i {
    align-self: center;
    width: 58%;
    height: 42%;
    border-radius: 8px;
    margin-bottom: auto;
}

.home-skeleton-loader__card b {
    width: 72%;
    height: 16px;
}

@keyframes home-skeleton-shimmer {
    100% {
        transform: translateX(110%);
    }
}

@media (max-width: 991.98px) {
    .home-skeleton-loader__inner {
        width: min(760px, calc(100% - 28px));
        padding-top: 14px;
    }

    .home-skeleton-loader__header {
        grid-template-columns: 140px 42px minmax(0, 1fr) auto;
        gap: 12px;
    }

    .home-skeleton-loader__menu {
        display: block;
    }

    .home-skeleton-loader__login {
        display: none;
    }

    .home-skeleton-loader__nav {
        display: none;
    }

    .home-skeleton-loader__hero {
        grid-template-columns: 1fr;
        height: auto;
        margin-top: 18px;
    }

    .home-skeleton-loader__hero-main {
        min-height: 320px;
    }

    .home-skeleton-loader__rail {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .home-skeleton-loader__panel {
        height: 112px;
    }

    .home-skeleton-loader__logo-strip {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
    }

    .home-skeleton-loader__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .home-skeleton-loader__inner {
        width: calc(100% - 24px);
    }

    .home-skeleton-loader__top {
        display: none;
    }

    .home-skeleton-loader__header {
        grid-template-columns: 112px 38px minmax(0, 1fr);
        gap: 10px;
        margin-bottom: 14px;
    }

    .home-skeleton-loader__logo {
        width: 112px;
        height: 38px;
    }

    .home-skeleton-loader__menu {
        width: 38px;
        height: 38px;
    }

    .home-skeleton-loader__actions {
        display: none;
    }

    .home-skeleton-loader__search {
        height: 38px;
    }

    .home-skeleton-loader__nav {
        display: none;
    }

    .home-skeleton-loader__hero-main {
        min-height: 280px;
        padding: 24px;
    }

    .home-skeleton-loader__rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-skeleton-loader__panel {
        height: 96px;
    }

    .home-skeleton-loader__logo-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        padding: 14px 0;
        margin-bottom: 22px;
    }

    .home-skeleton-loader__brand {
        height: 48px;
    }

    .home-skeleton-loader__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .home-skeleton-loader__card {
        min-height: 166px;
        padding: 12px;
    }
}

body.games-skeleton-loading {
    overflow: hidden;
}

.games-skeleton-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    overflow: hidden;
    background: #0d0f16;
    opacity: 1;
    visibility: visible;
    transition: opacity .35s ease, visibility .35s ease;
}

.games-skeleton-loader.is-hiding {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.games-skeleton-loader__inner {
    width: min(1600px, calc(100% - 48px));
    padding: 14px 0 42px;
}

.games-skeleton-loader__ghost {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, .052);
}

.games-skeleton-loader__ghost::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .11), transparent);
    animation: home-skeleton-shimmer 1.35s ease-in-out infinite;
}

.games-skeleton-loader__top,
.games-skeleton-loader__header,
.games-skeleton-loader__nav,
.games-skeleton-loader__page {
    width: 100%;
}

.games-skeleton-loader__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 28px;
    margin-bottom: 8px;
}

.games-skeleton-loader__top-links,
.games-skeleton-loader__social,
.games-skeleton-loader__actions,
.games-skeleton-loader__nav-links,
.games-skeleton-loader__filters {
    display: flex;
    align-items: center;
}

.games-skeleton-loader__top-links {
    gap: 12px;
}

.games-skeleton-loader__top-link {
    width: 76px;
    height: 14px;
    border-radius: 999px;
}

.games-skeleton-loader__top-link--wide {
    width: 112px;
}

.games-skeleton-loader__top-link--badge {
    width: 136px;
}

.games-skeleton-loader__social {
    gap: 12px;
}

.games-skeleton-loader__social-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.games-skeleton-loader__header {
    display: grid;
    grid-template-columns: 190px minmax(280px, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 62px;
    padding: 10px 0;
}

.games-skeleton-loader__menu {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
}

.games-skeleton-loader__logo {
    width: 170px;
    height: 42px;
}

.games-skeleton-loader__search {
    height: 44px;
    border-radius: 14px;
}

.games-skeleton-loader__actions {
    justify-content: flex-end;
    gap: 8px;
}

.games-skeleton-loader__action {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.games-skeleton-loader__lang {
    width: 78px;
    height: 40px;
    border-radius: 10px;
}

.games-skeleton-loader__login {
    width: 118px;
    height: 40px;
    border-radius: 10px;
}

.games-skeleton-loader__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    margin-bottom: 44px;
}

.games-skeleton-loader__nav-links {
    gap: 8px;
    min-width: 0;
}

.games-skeleton-loader__tab {
    width: 104px;
    height: 38px;
}

.games-skeleton-loader__wallet {
    flex: 0 0 180px;
    height: 40px;
}

.games-skeleton-loader__page {
    padding: 0;
}

.games-skeleton-loader__page-head {
    margin-bottom: 20px;
}

.games-skeleton-loader__title {
    width: 245px;
    height: 38px;
    margin-bottom: 10px;
}

.games-skeleton-loader__desc {
    width: 360px;
    max-width: 55vw;
    height: 16px;
}

.games-skeleton-loader__controls {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.games-skeleton-loader__filters {
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.games-skeleton-loader__filter {
    width: 78px;
    height: 34px;
    border-radius: 999px;
}

.games-skeleton-loader__filter--wide {
    width: 132px;
}

.games-skeleton-loader__page-search {
    flex: 0 1 380px;
    height: 42px;
    border-radius: 12px;
}

.games-skeleton-loader__count {
    width: 145px;
    height: 14px;
    margin-bottom: 16px;
}

.games-skeleton-loader__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.games-skeleton-loader__card {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    aspect-ratio: 3 / 4;
    padding: 18px;
}

.games-skeleton-loader__card i {
    display: block;
    width: 62%;
    height: 28px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
}

@media (max-width: 991.98px) {
    .games-skeleton-loader__inner {
        width: min(760px, calc(100% - 28px));
    }

    .games-skeleton-loader__header {
        grid-template-columns: 140px 42px minmax(0, 1fr) auto;
        gap: 12px;
    }

    .games-skeleton-loader__menu {
        display: block;
    }

    .games-skeleton-loader__login {
        display: none;
    }

    .games-skeleton-loader__nav {
        display: none;
    }

    .games-skeleton-loader__page {
        padding-top: 32px;
    }

    .games-skeleton-loader__controls {
        flex-direction: column;
        align-items: stretch;
    }

    .games-skeleton-loader__page-search {
        flex-basis: auto;
        width: 100%;
    }

    .games-skeleton-loader__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .games-skeleton-loader__inner {
        width: calc(100% - 24px);
    }

    .games-skeleton-loader__top {
        display: none;
    }

    .games-skeleton-loader__header {
        grid-template-columns: 112px 38px minmax(0, 1fr);
        gap: 10px;
        margin-bottom: 18px;
    }

    .games-skeleton-loader__logo {
        width: 112px;
        height: 38px;
    }

    .games-skeleton-loader__menu {
        width: 38px;
        height: 38px;
    }

    .games-skeleton-loader__actions {
        display: none;
    }

    .games-skeleton-loader__search {
        height: 38px;
    }

    .games-skeleton-loader__page {
        padding-top: 18px;
    }

    .games-skeleton-loader__title {
        width: 210px;
        height: 32px;
    }

    .games-skeleton-loader__desc {
        width: 280px;
        max-width: 100%;
    }

    .games-skeleton-loader__filter {
        width: 72px;
        height: 30px;
    }

    .games-skeleton-loader__filter--wide {
        width: 112px;
    }

    .games-skeleton-loader__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .games-skeleton-loader__card {
        padding: 14px;
    }
}

body.product-list-skeleton-loading,
body.product-detail-skeleton-loading {
    overflow: hidden;
}

.product-skeleton-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    overflow: hidden;
    background: #0d0f16;
    opacity: 1;
    visibility: visible;
    transition: opacity .35s ease, visibility .35s ease;
}

.product-skeleton-loader.is-hiding {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.product-skeleton-loader__inner {
    width: min(1600px, calc(100% - 48px));
    padding: 14px 0 42px;
}

.product-skeleton-loader__ghost {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, .052);
}

.product-skeleton-loader__ghost::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .11), transparent);
    animation: home-skeleton-shimmer 1.35s ease-in-out infinite;
}

.product-skeleton-loader__top,
.product-skeleton-loader__header,
.product-skeleton-loader__nav,
.product-skeleton-loader__page {
    width: 100%;
}

.product-skeleton-loader__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 28px;
    margin-bottom: 8px;
}

.product-skeleton-loader__top-links,
.product-skeleton-loader__social,
.product-skeleton-loader__actions,
.product-skeleton-loader__nav-links,
.product-skeleton-loader__filters {
    display: flex;
    align-items: center;
}

.product-skeleton-loader__top-links {
    gap: 12px;
}

.product-skeleton-loader__top-link {
    width: 76px;
    height: 14px;
    border-radius: 999px;
}

.product-skeleton-loader__top-link--wide {
    width: 112px;
}

.product-skeleton-loader__top-link--badge {
    width: 136px;
}

.product-skeleton-loader__social {
    gap: 12px;
}

.product-skeleton-loader__social-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.product-skeleton-loader__header {
    display: grid;
    grid-template-columns: 190px minmax(280px, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 62px;
    padding: 10px 0;
}

.product-skeleton-loader__menu {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
}

.product-skeleton-loader__logo {
    width: 170px;
    height: 42px;
}

.product-skeleton-loader__search {
    height: 44px;
    border-radius: 14px;
}

.product-skeleton-loader__actions {
    justify-content: flex-end;
    gap: 8px;
}

.product-skeleton-loader__action {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.product-skeleton-loader__lang {
    width: 78px;
    height: 40px;
    border-radius: 10px;
}

.product-skeleton-loader__login {
    width: 118px;
    height: 40px;
    border-radius: 10px;
}

.product-skeleton-loader__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    margin-bottom: 22px;
}

.product-skeleton-loader__nav-links {
    gap: 8px;
    min-width: 0;
}

.product-skeleton-loader__tab {
    width: 104px;
    height: 38px;
}

.product-skeleton-loader__wallet {
    flex: 0 0 180px;
    height: 40px;
}

.product-skeleton-loader__page {
    padding: 0;
}

.product-skeleton-loader__crumb {
    width: 280px;
    height: 18px;
    margin-bottom: 16px;
}

.product-skeleton-loader__banner {
    width: 100%;
    height: 142px;
    margin-bottom: 22px;
}

.product-skeleton-loader__list-layout,
.product-skeleton-loader__detail-layout {
    display: grid;
    gap: 24px;
    align-items: start;
}

.product-skeleton-loader__list-layout {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
}

.product-skeleton-loader__detail-layout {
    grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
}

.product-skeleton-loader__side,
.product-skeleton-loader__list-main,
.product-skeleton-loader__detail-aside,
.product-skeleton-loader__detail-main {
    min-width: 0;
}

.product-skeleton-loader__side-media,
.product-skeleton-loader__detail-media {
    width: 100%;
    aspect-ratio: 1 / 1.08;
    margin-bottom: 16px;
}

.product-skeleton-loader__side-title,
.product-skeleton-loader__detail-title {
    width: 74%;
    height: 34px;
    margin-bottom: 12px;
}

.product-skeleton-loader__side-line,
.product-skeleton-loader__detail-line {
    width: 100%;
    height: 14px;
    margin-bottom: 10px;
}

.product-skeleton-loader__side-line--short,
.product-skeleton-loader__detail-line--short {
    width: 64%;
}

.product-skeleton-loader__side-button {
    width: 118px;
    height: 38px;
    margin: 18px 0 20px;
}

.product-skeleton-loader__trust {
    display: grid;
    gap: 10px;
}

.product-skeleton-loader__trust-row {
    height: 58px;
}

.product-skeleton-loader__filters {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.product-skeleton-loader__filter {
    width: 96px;
    height: 34px;
    border-radius: 999px;
}

.product-skeleton-loader__filter--wide {
    width: 144px;
}

.product-skeleton-loader__rows {
    display: grid;
    gap: 12px;
}

.product-skeleton-loader__row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 140px 116px;
    align-items: center;
    gap: 16px;
    min-height: 86px;
    padding: 14px;
}

.product-skeleton-loader__row i,
.product-skeleton-loader__row b,
.product-skeleton-loader__row em,
.product-skeleton-loader__row strong {
    display: block;
    min-width: 0;
    background: rgba(255, 255, 255, .1);
}

.product-skeleton-loader__row i {
    width: 64px;
    height: 58px;
    border-radius: 8px;
}

.product-skeleton-loader__row b {
    width: 62%;
    height: 18px;
    border-radius: 999px;
}

.product-skeleton-loader__row em {
    width: 118px;
    height: 28px;
    border-radius: 999px;
}

.product-skeleton-loader__row strong {
    width: 108px;
    height: 38px;
    border-radius: 10px;
}

.product-skeleton-loader__tabs {
    height: 146px;
    margin-top: 14px;
}

.product-skeleton-loader__detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.product-skeleton-loader__detail-pill {
    width: 180px;
    height: 36px;
    border-radius: 999px;
}

.product-skeleton-loader__detail-fav {
    width: 150px;
    height: 38px;
    border-radius: 10px;
}

.product-skeleton-loader__detail-title {
    width: min(520px, 72%);
    height: 48px;
}

.product-skeleton-loader__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.product-skeleton-loader__badge {
    width: 112px;
    height: 30px;
    border-radius: 999px;
}

.product-skeleton-loader__packages,
.product-skeleton-loader__action-card,
.product-skeleton-loader__info-card {
    margin-top: 16px;
}

.product-skeleton-loader__packages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.product-skeleton-loader__package {
    height: 116px;
}

.product-skeleton-loader__action-card {
    height: 128px;
}

.product-skeleton-loader__detail-strip {
    height: 56px;
    margin-top: 16px;
}

.product-skeleton-loader__info-card {
    height: 128px;
}

.product-skeleton-loader__detail-tabs {
    height: 170px;
    margin-top: 16px;
}

@media (max-width: 991.98px) {
    .product-skeleton-loader__inner {
        width: min(760px, calc(100% - 28px));
    }

    .product-skeleton-loader__header {
        grid-template-columns: 140px 42px minmax(0, 1fr) auto;
        gap: 12px;
    }

    .product-skeleton-loader__menu {
        display: block;
    }

    .product-skeleton-loader__login {
        display: none;
    }

    .product-skeleton-loader__nav {
        display: none;
    }

    .product-skeleton-loader__page {
        padding-top: 24px;
    }

    .product-skeleton-loader__list-layout,
    .product-skeleton-loader__detail-layout {
        grid-template-columns: 1fr;
    }

    .product-skeleton-loader__side-media,
    .product-skeleton-loader__detail-media {
        aspect-ratio: 16 / 9;
    }

    .product-skeleton-loader__row {
        grid-template-columns: 58px minmax(0, 1fr) 96px;
    }

    .product-skeleton-loader__row em {
        display: none;
    }

    .product-skeleton-loader__packages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .product-skeleton-loader__inner {
        width: calc(100% - 24px);
    }

    .product-skeleton-loader__top {
        display: none;
    }

    .product-skeleton-loader__header {
        grid-template-columns: 112px 38px minmax(0, 1fr);
        gap: 10px;
        margin-bottom: 18px;
    }

    .product-skeleton-loader__logo {
        width: 112px;
        height: 38px;
    }

    .product-skeleton-loader__menu {
        width: 38px;
        height: 38px;
    }

    .product-skeleton-loader__actions {
        display: none;
    }

    .product-skeleton-loader__search {
        height: 38px;
    }

    .product-skeleton-loader__crumb {
        width: 220px;
    }

    .product-skeleton-loader__banner {
        height: 108px;
    }

    .product-skeleton-loader__row {
        grid-template-columns: 52px minmax(0, 1fr);
        min-height: 78px;
    }

    .product-skeleton-loader__row strong {
        display: none;
    }

    .product-skeleton-loader__packages {
        grid-template-columns: 1fr;
    }

    .product-skeleton-loader__detail-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-skeleton-loader__detail-title {
        width: 100%;
        height: 42px;
    }
}

.line_shine::before {
	content: "";
	background: linear-gradient(to right,transparent,#2b2f39, transparent);
	width: 100%;
	height: 1px;
	top: 0;
	z-index: 1;
	display: block;
}
.line_shine::after {
	content: "";
	background: linear-gradient(to right,transparent,#2b2f39, transparent);
	width: 100%;
	height: 1px;
	bottom: 0;
	z-index: 1;
	display: block;
}
::-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;
}
.ms-n1{
   margin-left: calc(var(--bs-gutter-x) * -.5);
}
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;
    }
}
.marketplace-section {
    position: relative;
    overflow: hidden;
}

/* ── Section Alternating Backgrounds ─────────────────────────── */
.popular_game_sect {
    background: #10131a;
}
.ko-items-section {
    background: #0b0e15;
}
.marketplace-section {
    background: #10131a;
}
.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 {
	background: rgba(10, 12, 18, 0.88);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.header-top.site-header {
    position: relative;
    z-index: 1024;
    background: rgba(10, 12, 18, 0.88);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.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, .10);
    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 rgba(255, 255, 255, .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__nav {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex: 1 1 auto; /* eski grid minmax(0,1fr) sütununun karşılığı */
    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; /* nav gizliyken (mobil) aksiyonları sağa yaslar */
    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: rgba(255, 255, 255, .06);
    color: #fff;
}

.floating-header__icon-btn .material-symbols-outlined {
    font-size: 26px;
}

.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: #57b0ff;
    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 rgba(255, 255, 255, .07);
}

.floating-header__search-input {
    width: 100%;
    min-height: 48px;
    border: 0;
    outline: 0;
    padding: 0 48px;
    background: rgba(255, 255, 255, .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: rgba(255, 255, 255, .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 {
        top: 10px;
        left: 10px;
        right: 10px;
    }

    .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__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 0px;
}

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 {
    position: relative;
    z-index: 1;
}

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

.site-header__main > .site-header__search {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.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;
}

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

.site-header__main > .site-header__search .search-form-group input {
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.05);
    color: #e4e4e4;
    padding-left: 3.2rem;
    padding-right: 5.5rem;
    border-radius: 14px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.site-header__main > .site-header__search .search-form-group input.search-open {

    border-radius: 14px 14px 0 0;

}
.site-header__main > .site-header__search .search-form-group input::placeholder {
    color: rgba(180, 192, 215, 0.5);
}

.site-header__main > .site-header__search .search-form-group input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(87, 176, 255, 0.38);
    box-shadow: unset;
    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, 0.14);
    color: #9fcfff;
    font-size: 15px;
    pointer-events: none;
    z-index: 1;
}

.search-kbd {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: rgba(180, 192, 215, 0.45);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    padding: 3px 7px;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.search-suggestions {
	position: absolute;
	top: calc(100% + -1px);
	left: 0;
	right: 0;
	z-index: 30;
	border: 1px solid rgba(87, 176, 255, 0.28);
	border-radius: 0px 0px 14px 14px;
	background: linear-gradient(180deg, rgba(19, 24, 33, 0.98) 0%, rgba(12, 16, 22, 0.99) 100%);
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

.search-suggestions__header {
    padding: 12px 16px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(159, 207, 255, 0.82);
    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 rgba(255, 255, 255, 0.06);
}

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

.search-suggestion-item__thumb {
    width: 56px;
    height: 56px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}

.search-suggestion-item__thumb 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 rgba(255, 255, 255, 0.06);
    font-size: 13px;
    font-weight: 600;
    color: #57b0ff;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

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

/* ── Öneri grupları (Oyunlar/Ürünler · Son/Popüler Aramalar) ── */
.search-suggestion-group + .search-suggestion-group {
    border-top: 1px solid rgba(255, 255, 255, 0.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: #6f80a0;
}
.search-suggestion-clear {
    border: 0;
    background: transparent;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.2px;
    color: #57b0ff;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}
.search-suggestion-clear:hover {
    background: rgba(87, 176, 255, 0.12);
    color: #7dc4ff;
}

/* ── Klavye ile gezinilen aktif öğe ── */
.search-suggestion-item.is-active {
    background: rgba(87, 176, 255, 0.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: #57b0ff;
    background: rgba(87, 176, 255, 0.10);
}
.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: #57b0ff;
}

.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: #57b0ff;
    pointer-events: none;
}

.faq-search__input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.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, 0.40);
    background: rgba(87, 176, 255, 0.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 rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

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

.faq-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 {
    font-size: 20px;
}

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

.faq-sidebar__link.active {
    background: rgba(87, 176, 255, 0.14);
    color: #57b0ff;
}

/* 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 rgba(255, 255, 255, 0.08);
}

.faq-category__title .material-symbols-outlined {
    font-size: 24px;
    color: #57b0ff;
}

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

.faq-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
    transition: border-color 0.2s;
}

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

.faq-item[open] {
    border-color: rgba(87, 176, 255, 0.24);
    background: rgba(87, 176, 255, 0.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: #57b0ff;
    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: #57b0ff;
    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 rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

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

.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;
}

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

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

.kur-sidebar__link.active {
    background: rgba(87, 176, 255, 0.14);
    color: #57b0ff;
}

.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: #57b0ff;
}

.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 rgba(255, 255, 255, 0.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: #57b0ff;
    text-decoration: none;
}

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

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

.kur-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 13px;
}

.kur-table th,
.kur-table td {
    padding: 10px 14px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.kur-table th {
    background: rgba(87, 176, 255, 0.08);
    color: #c0d8f0;
    font-weight: 700;
}

.kur-table td {
    color: #91a2bd;
}

@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 rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    padding: 24px;
}

.cart-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.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: #57b0ff;
}

.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 rgba(255, 255, 255, 0.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 rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.cart-page__item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.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-qty .cart-page__qty-btn.is-remove {
    color: #ff7896;
}

.cart-page__item-line-total {
    font-size: 15px;
    font-weight: 700;
    color: #57b0ff;
    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 rgba(255, 255, 255, 0.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, 0.10);
    border-color: rgba(255, 107, 107, 0.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, 0.12);
    border: 1px solid rgba(255, 107, 107, 0.25);
    color: #ff9b9b;
}

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

.cart-page__item-badge--success {
    background: rgba(74, 222, 128, 0.10);
    border: 1px solid rgba(74, 222, 128, 0.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, 0.25);
    border-radius: 10px;
    background: rgba(250, 204, 21, 0.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 metin özeti; kalemle aynı alan inputa dönüşür */
.cart-page__item-meta {
    margin-top: 4px;
    font-size: 11px;
    color: #5e7089;
}

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

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

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

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

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

.cart-page__item-meta-form .input-o,
.cart-page__item-meta-form .select-o {
    width: auto;
    max-width: 160px;
    padding: 4px 8px;
    font-size: 11px;
}

.cart-page__item-meta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    color: #57b0ff;
    cursor: pointer;
    transition: color 0.2s;
}

.cart-page__item-meta-btn:hover {
    color: #8ecbff;
}

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

.cart-page__item-meta-btn--save {
    color: #4ade80;
}

.cart-page__item-meta-btn--save:hover {
    color: #86efac;
}

.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-btn--cancel {
    color: #e05666;
}

.cart-page__item-meta-btn--cancel:hover {
    color: #f08a96;
}

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

/* 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 rgba(255, 255, 255, 0.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 {
    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 rgba(255, 255, 255, 0.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 rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.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: #57b0ff;
}

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

.cart-page__trust {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cart-page__trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #5e7089;
}

.cart-page__trust-item .material-symbols-outlined {
    font-size: 18px;
    color: #4ade80;
}

@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: center;
    justify-content: center;
    gap: 0;
}

.checkout-steps__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* 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 {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #5e7089;
    transition: all 0.3s;
}

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

.checkout-steps__label {
    font-size: 12px;
    font-weight: 600;
    color: #5e7089;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.checkout-steps__item.active .checkout-steps__icon {
    border-color: #57b0ff;
    background: rgba(87, 176, 255, 0.12);
    color: #57b0ff;
}

.checkout-steps__item.active .checkout-steps__label {
    color: #57b0ff;
}

.checkout-steps__item.completed .checkout-steps__icon {
    border-color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
}

.checkout-steps__item.completed .checkout-steps__label {
    color: #4ade80;
}

.checkout-steps__line {
    width: 60px;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0 12px;
    margin-bottom: 22px;
    border-radius: 2px;
}

.checkout-steps__line.completed {
    background: #4ade80;
}

/* Checkout Cards */
.checkout-card {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.checkout-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(135deg, rgba(87, 176, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
    position: relative;
}



.checkout-card__header .material-symbols-outlined {
    font-size: 22px;
    color: #57b0ff;
}

.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: #57b0ff;
    background: rgba(87, 176, 255, 0.10);
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.checkout-card__badge--success {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
}
.checkout-card__badge--danger {
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
}
.checkout-card__badge--warning {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
}
.checkout-card__badge--muted {
    color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.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 rgba(255, 255, 255, 0.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, 0.48);
    font-size: 13px;
    flex-shrink: 0;
}
.checkout-info__row dd {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13.5px;
    text-align: right;
    word-break: break-word;
}

/* Sipariş ilerleme adımları */
.order-track {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 16px;
    margin-top: 20px;
    margin-bottom: 0;
}
.order-track__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.28);
    position: relative;
}
.order-track__item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 11px;
    top: calc(50% + 13px);
    width: 2px;
    height: calc(100% - 12px);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}
.order-track__item.is-done {
    color: #4ade80;
}
.order-track__item.is-done:not(:last-child)::after {
    background: rgba(74, 222, 128, 0.25);
}
.order-track__item.is-active {
    color: #fff;
    font-weight: 600;
}
.order-track__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.order-track__dot .material-symbols-outlined {
    font-size: 22px;
}
.order-track__item.is-active .order-track__dot .material-symbols-outlined {
    color: #57b0ff;
}
.order-track__label {
    font-size: 13.5px;
    line-height: 1.4;
}

/* 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 rgba(255, 255, 255, 0.04);
}

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

.checkout-item__thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.checkout-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.checkout-item__title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.checkout-item__meta {
    font-size: 12px;
    color: #5e7089;
}

.checkout-item__total {
    font-size: 14px;
    font-weight: 700;
    color: #57b0ff;
    white-space: nowrap;
}

/* Checkout Fields */
.checkout-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.checkout-field > span {
    font-size: 13px;
    font-weight: 600;
    color: #91a2bd;
}

/* Etiket + yardım (tooltip) ikonu aynı satırda hizalı dursun */
.checkout-field__label-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.checkout-field em {
    color: #ff6b6b;
    font-style: normal;
}

.checkout-field__card-input {
    position: relative;
}

.checkout-field__card-input .input-o {
    padding-right: 80px;
}

.checkout-field__card-icons {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
    align-items: center;
}

.checkout-field__card-icons img {
    height: 20px;
    opacity: 0.5;
}

/* Payment Methods */
.checkout-payment-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.checkout-payment-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.checkout-payment-option:hover {
    border-color: rgba(87, 176, 255, 0.20);
    background: rgba(87, 176, 255, 0.04);
}

.checkout-payment-option.active {
    border-color: rgba(87, 176, 255, 0.40);
    background: rgba(87, 176, 255, 0.06);
}

.checkout-payment-option input[type="radio"] {
    display: none;
}

.checkout-payment-option__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.checkout-payment-option__icon .material-symbols-outlined {
    font-size: 22px;
    color: #91a2bd;
}

.checkout-payment-option.active .checkout-payment-option__icon {
    background: rgba(87, 176, 255, 0.12);
}

.checkout-payment-option.active .checkout-payment-option__icon .material-symbols-outlined {
    color: #57b0ff;
}

.checkout-payment-option__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.checkout-payment-option__info strong {
    font-size: 14px;
    color: #fff;
}

.checkout-payment-option__info small {
    font-size: 12px;
    color: #5e7089;
}

.checkout-payment-option__check {
    opacity: 0;
    transition: opacity 0.2s;
}

.checkout-payment-option__check .material-symbols-outlined {
    font-size: 22px;
    color: #57b0ff;
}

.checkout-payment-option.active .checkout-payment-option__check {
    opacity: 1;
}

/* CC Form */
.checkout-cc-form {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Balance Payment */
.checkout-balance {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.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 rgba(255, 255, 255, 0.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, 0.25);
    border-radius: 10px;
    background: rgba(255, 107, 107, 0.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;
}

/* Agreement */
.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 rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    transition: border-color .2s, background .2s;
}

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

.checkout-agreement {
    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: #57b0ff;
    text-decoration: none;
    font-weight: 600;
}

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

/* Checkout Summary */
.checkout-summary {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.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 rgba(255, 255, 255, 0.06);
}

.checkout-summary__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 14px;
    max-height: 180px;
    overflow-y: auto;
}

.checkout-summary__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.checkout-summary__item-name {
    font-size: 13px;
    color: #91a2bd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkout-summary__item-qty {
    font-size: 12px;
    font-weight: 700;
    color: #ffd166;
    flex-shrink: 0;
}

.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 span:last-child {
    color: #fff;
    font-weight: 600;
}

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

.checkout-summary__row--fee span:last-child {
    color: #ffd166;
}

.checkout-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.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: #57b0ff;
}

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

.checkout-summary__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #4ade80;
    opacity: 0.7;
}

.checkout-summary__secure .material-symbols-outlined {
    font-size: 16px;
}

/* Checkout Success */
.checkout-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px 20px;
    text-align: center;
    border: 1px solid rgba(74, 222, 128, 0.15);
    border-radius: 14px;
    background: rgba(74, 222, 128, 0.04);
}

.checkout-success .material-symbols-outlined {
    font-size: 64px;
    color: #4ade80;
}

.checkout-success h2 {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.checkout-success p {
    font-size: 14px;
    color: #91a2bd;
    margin: 0;
    max-width: 400px;
}

.checkout-success__order {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

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

.checkout-success__order strong {
    font-size: 16px;
    color: #57b0ff;
}

@media (max-width: 575.98px) {
    .checkout-card__body {
        padding: 16px;
    }
    .checkout-card__header {
        padding: 14px 16px;
    }
    .checkout-steps__line {
        width: 30px;
        margin: 0 6px;
    }
    .checkout-summary {
        padding: 16px;
    }
    .checkout-info__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .checkout-info__row dd {
        text-align: left;
    }
}

/* ===== Order Result Pages ===== */
.checkout-steps__item.failed .checkout-steps__icon {
    border-color: #ff6b6b;
    background: rgba(255, 107, 107, 0.12);
    color: #ff6b6b;
}

.checkout-steps__item.failed .checkout-steps__label {
    color: #ff6b6b;
}

.checkout-steps__line.failed {
    background: #ff6b6b;
}

/* 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, 0.18);
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.06) 0%, rgba(74, 222, 128, 0.01) 100%);
}

.order-result__card--fail {
    border: 1px solid rgba(255, 107, 107, 0.18);
    background: linear-gradient(180deg, rgba(255, 107, 107, 0.06) 0%, rgba(255, 107, 107, 0.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, 0.15);
    animation: orderPulse 2s ease-in-out infinite;
}

.order-result__pulse--fail {
    background: rgba(255, 107, 107, 0.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 rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
    margin-bottom: 24px;
}

.order-detail__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

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

.order-detail__heading .material-symbols-outlined {
    font-size: 22px;
    color: #57b0ff;
}

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

.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: rgba(255, 255, 255, 0.08);
}

.order-timeline__step.is-done:not(:last-child)::before {
    background: rgba(74, 222, 128, 0.35);
}

.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 rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    color: #5e7089;
}

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

.order-timeline__step.is-done .order-timeline__marker {
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
}

.order-timeline__label {
    font-size: 14px;
    font-weight: 600;
    color: #5e7089;
}

.order-timeline__step.is-done .order-timeline__label {
    color: #fff;
}

.order-timeline__date {
    margin-left: auto;
    font-size: 12px;
    color: #5e7089;
}

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

.order-detail__info-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.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 {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.order-detail__info-value--highlight {
    color: #57b0ff;
    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, 0.10);
}

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

/* Order Detail Sections */
.order-detail__section {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.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 rgba(255, 255, 255, 0.04);
}

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

.order-detail__item-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.order-detail__item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.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: #57b0ff;
    white-space: nowrap;
    text-align: right;
}

.order-detail__empty {
    padding: 24px 0;
    text-align: center;
    font-size: 14px;
    color: #5e7089;
}

/* Order Summary Rows */
.order-detail__summary-rows {
    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 span:last-child {
    color: #fff;
    font-weight: 600;
}

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

.order-detail__summary-row--total {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.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: #57b0ff;
}

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

.order-detail__delivery > .material-symbols-outlined {
    font-size: 22px;
    color: #57b0ff;
    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: #57b0ff;
    font-size: inherit;
}

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

/* ===== Failed Page ===== */
.order-fail-reasons {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
    margin-bottom: 20px;
}

.order-fail-reasons__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.order-fail-reasons__header .material-symbols-outlined {
    font-size: 22px;
    color: #ffd166;
}

.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 rgba(255, 255, 255, 0.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 rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.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: rgba(255, 255, 255, 0.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 rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    text-align: center;
    transition: border-color 0.2s;
}

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

.order-fail-alternatives__card .material-symbols-outlined {
    font-size: 28px;
    color: #57b0ff;
}

.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 rgba(255, 255, 255, 0.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 {
        padding: 16px;
    }
    .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 rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background: linear-gradient(168deg, rgba(22, 33, 54, 0.92) 0%, rgba(13, 18, 28, 0.96) 100%);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 32px 80px rgba(0, 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, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(87, 176, 255, 0.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: rgba(255, 255, 255, 0.06);
    color: #95a5bd;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.login-modal__close:hover {
    background: rgba(255, 255, 255, 0.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, 0.10);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.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: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}
.login-modal__social-btn--discord:hover {
    border-color: rgba(88, 101, 242, 0.4);
    background: rgba(88, 101, 242, 0.10);
}

/* 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: rgba(255, 255, 255, 0.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, 0.10);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.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, 0.36);
}

.login-modal__input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(87, 176, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(87, 176, 255, 0.10);
}

.login-modal__input:focus ~ .login-modal__input-icon,
.login-modal__input-wrap:focus-within .login-modal__input-icon {
    color: #57b0ff;
}

/* 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: rgba(255, 255, 255, 0.08);
}

/* Meta row */
.login-modal__meta {
    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;
}

/* Demo info */
.login-modal__demo {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    color: #8b9cb8;
    font-size: 11px;
}
.login-modal__demo strong {
    color: #95a5bd;
}
.login-modal__demo span {
    font-family: monospace;
    color: #cfe3ff;
    font-size: 11px;
}
.login-modal__demo span + span::before {
    content: "·";
    margin-right: 6px;
    color: #475569;
}

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

/* Wallet button */
.header-btn--wallet {
    height: 40px;
    padding: 0 14px;
    font-size: 13px;
    border-radius: 10px;
    gap: 7px;
    border: none !important;
    background: transparent !important;
    color: #4ade80 !important;
    box-shadow: none !important;
}

.header-btn--wallet:hover {
    background: transparent !important;
    color: #6ef09e !important;
    border: none !important;
}

.header-btn--wallet__bal {
    padding: 1px 7px;
    background: rgba(74, 222, 128, 0.14);
    border: 1px solid rgba(74, 222, 128, 0.22);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #4ade80;
    margin-left: 2px;
}

/* ══════════════════════════════════════════
   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,
#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,
#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, 0.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,
#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,
#myTab .nav-link:hover,
#myTab .nav-link:focus-visible,
.login-modal__close:hover {
    background: rgba(255,255,255,0.06);
    color: var(--c-text);
    border-color: var(--c-border-hover);
    box-shadow: none;
}

/* ── Ghost Danger ── */
.auth-menu__logout {
    background: transparent;
    color: var(--c-danger);
    border: none;
    box-shadow: none;
}
.auth-menu__logout:hover {
    background: rgba(248,113,113,0.08);
    color: var(--c-danger-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;
}
.cart-menu__remove {
    background: transparent;
    color: var(--c-danger);
    border: none;
    box-shadow: none;
}
.cart-menu__remove:hover {
    background: rgba(248,113,113,0.08);
    box-shadow: none;
}

/* ── Soft Primary Card Buttons ── */
.item-card__button,
.item-card__button {
    background: rgba(87,176,255,0.12);
    color: var(--c-primary);
    border: none;
    box-shadow: none;
}
.item-card__button:hover,
.item-card__button:hover {
    background: rgba(87,176,255,0.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, 0.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, 0.10);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: #fca5a5;
}
.login-modal__feedback:not(.login-modal__feedback--error) {
    border: 1px solid rgba(87, 176, 255, 0.2);
    background: rgba(87, 176, 255, 0.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: rgba(255,255,255,.06);
    box-shadow: none;
}

.auth-panel__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(87, 176, 255, 0.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 rgba(255, 255, 255, 0.12);
	background: #1a1d24;
	box-shadow: 0 18px 40px rgba(0, 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 rgba(255, 255, 255, 0.06);
}

.auth-menu__label {
    display: block;
    margin-bottom: 4px;
    color: #8ba3c7;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.auth-menu__section strong {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.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: rgba(255,255,255,.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 {
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 12px 18px;
    font-size: 13px;
    text-align: center;
}

.auth-menu__logout:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.auth-menu__nav {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.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, 0.12);
    color: #fff;
}

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

/* Profile pages shared */
.profile-layout {
    display: flex;
    gap: 30px;
    padding: 40px 0 60px;
    align-items: flex-start;
}

.profile-sidebar {
    flex: 0 0 240px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    overflow: hidden;
}

.profile-sidebar__user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.profile-sidebar__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(87,176,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #8bc7ff;
    flex-shrink: 0;
}

.profile-sidebar__name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-sidebar__balance {
    font-size: 12px;
    color: #8ba3c7;
    margin-top: 2px;
}

.profile-sidebar__nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.profile-sidebar__nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    color: #b8ceea;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.18s, color 0.18s;
    border-left: 3px solid transparent;
}

.profile-sidebar__nav-item:hover {
    background: rgba(87,176,255,0.08);
    color: #fff;
}

.profile-sidebar__nav-item.active {
    background: rgba(87,176,255,0.1);
    border-left-color: rgb(87,176,255);
    color: #fff;
    font-weight: 600;
}

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

.profile-sidebar__nav-item.active i {
    color: rgb(87,176,255);
}

.profile-sidebar__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 6px 0;
}

.profile-sidebar__logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    font-size: 13px;
    color: var(--c-danger);
    background: transparent;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-radius: 0;
    cursor: pointer;
    transition: background var(--tr-btn), color var(--tr-btn);
    margin-top: 4px;
}

.profile-sidebar__logout:hover {
    background: rgba(248,113,113,0.08);
    color: var(--c-danger-hover);
}

.profile-sidebar__logout i {
    font-size: 15px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.profile-content {
    flex: 1 1 0%;
    min-width: 0;
}

.profile-content__header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.profile-content__title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}

.profile-content__desc {
    font-size: 13px;
    color: #8ba3c7;
    margin: 0;
}

.profile-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    padding: 24px;
    margin-bottom: 20px;
}

.profile-card h5 {
    font-size: 15px;
    font-weight: 700;
    color: #e6eefb;
    margin-bottom: 16px;
}

.profile-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.profile-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-form .form-group label {
    font-size: 12px;
    font-weight: 600;
    color: #8ba3c7;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.profile-form .form-control {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #e4e4e4;
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 13px;
}

.profile-form .form-control:focus {
    background: rgba(87,176,255,0.06);
    border-color: rgba(87,176,255,0.4);
    box-shadow: none;
    color: #fff;
}

.profile-form .btn-save {
    padding: 11px 28px;
    font-size: 13px;
    font-weight: 600;
    background: var(--c-primary);
    color: #0a0f18;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--tr-btn);
}

.profile-form .btn-save:hover {
    background: var(--c-primary-hover);
}

/* Profile Sidebar Badge */
.profile-sidebar__badge {
    font-size: 10px;
    font-weight: 600;
    color: #57b0ff;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.profile-sidebar__badge i { font-size: 10px; }

/* Profile Banner */
.profile-banner {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,.07);
}
.profile-banner__bg {
    height: 120px;
    background: linear-gradient(135deg, rgba(87,176,255,.15) 0%, rgba(43,124,255,.08) 50%, rgba(250,200,80,.06) 100%);
}
.profile-banner__body {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding: 0 24px;
    margin-top: -40px;
    position: relative;
    z-index: 1;
}
.profile-banner__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.profile-banner__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(87,176,255,.2), rgba(87,176,255,.08));
    border: 3px solid #0e1014;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #8bc7ff;
}
.profile-banner__avatar-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-primary);
    border: 2px solid #0e1014;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #0a0f18;
    cursor: pointer;
    transition: background .2s;
}
.profile-banner__avatar-edit:hover { background: var(--c-primary-hover); }
.profile-banner__info { padding-bottom: 14px; }
.profile-banner__name {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}
.profile-banner__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: #8ba3c7;
    margin: 0;
}
.profile-banner__meta i {
    margin-right: 4px;
    font-size: 12px;
}
.profile-banner__meta .bi-patch-check-fill { color: #57b0ff; }

/* Profile Stats */
.profile-stats {
    display: flex;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
}
.profile-stats__item {
    flex: 1;
    text-align: center;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.profile-stats__item + .profile-stats__item {
    border-left: 1px solid rgba(255,255,255,.06);
}
.profile-stats__value {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.profile-stats__label {
    font-size: 11px;
    color: #8ba3c7;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Profile Card Header */
.profile-card__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.profile-card__header h5 { margin-bottom: 2px; }
.profile-card__header p {
    font-size: 12px;
    color: #8ba3c7;
    margin: 0;
}
.profile-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(87,176,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #57b0ff;
    flex-shrink: 0;
}
.profile-card__icon--warning {
    background: rgba(250,200,80,.1);
    color: #fac850;
}
.profile-card__icon--info {
    background: rgba(87,176,255,.1);
    color: #57b0ff;
}
.profile-card__icon--danger {
    background: rgba(248,113,113,.1);
    color: #f87171;
}

/* 2FA Section */
.profile-2fa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.profile-2fa__info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.profile-2fa__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(250,200,80,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fac850;
    flex-shrink: 0;
}
.profile-2fa__info strong {
    font-size: 13px;
    color: #e6eefb;
    display: block;
}
.profile-2fa__info p {
    font-size: 12px;
    color: #8ba3c7;
    margin: 2px 0 0;
}

/* Notification Rows */
.profile-notifications {
    display: flex;
    flex-direction: column;
}
.profile-notif-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
    cursor: pointer;
}
.profile-notif-row:last-child { border-bottom: none; }
.profile-notif-row strong {
    font-size: 13px;
    color: #e6eefb;
    display: block;
}
.profile-notif-row span {
    font-size: 12px;
    color: #8ba3c7;
}

/* Toggle Switch */
.profile-toggle {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 22px;
    background: rgba(255,255,255,.1);
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: background .2s;
    flex-shrink: 0;
}
.profile-toggle::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #8ba3c7;
    transition: transform .2s, background .2s;
}
.profile-toggle:checked {
    background: rgba(87,176,255,.35);
}
.profile-toggle:checked::after {
    transform: translateX(18px);
    background: #57b0ff;
}

/* Danger Zone */
.profile-card--danger {
    border-color: rgba(248,113,113,.12);
}
.profile-danger-actions {
    display: flex;
    flex-direction: column;
}
.profile-danger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.profile-danger-row:last-child { border-bottom: none; }
.profile-danger-row strong {
    font-size: 13px;
    color: #e6eefb;
    display: block;
}
.profile-danger-row span {
    font-size: 12px;
    color: #8ba3c7;
}

/* === Dashboard Panel System === */
.profile-panel { display: none; }
.profile-panel.active { display: block; }

.dash-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}
.dash-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dash-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dash-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Quick Action Cards */
.dash-quick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    color: #c7d5e9;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background .2s, border-color .2s, transform .2s;
}
.dash-quick:hover {
    background: rgba(87,176,255,.08);
    border-color: rgba(87,176,255,.2);
    color: #fff;
    transform: translateY(-2px);
}
.dash-quick__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 20px;
    background: rgba(87,176,255,.12);
    color: #57b0ff;
}
.dash-quick__icon--gold  { background: rgba(255,193,7,.12);  color: #ffc107; }
.dash-quick__icon--green { background: rgba(34,197,94,.12);  color: #22c55e; }
.dash-quick__icon--purple{ background: rgba(168,85,247,.12); color: #a855f7; }

/* Order Rows */
.dash-orders { display: flex; flex-direction: column; }
.dash-order-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.dash-order-row:last-child { border-bottom: none; }
.dash-order-row__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-order-row__info strong {
    font-size: 13px;
    color: #e6eefb;
}
.dash-order-row__info span {
    font-size: 11px;
    color: #6b7f99;
}
.dash-order-row__status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.dash-order-row__status--success {
    background: rgba(34,197,94,.12);
    color: #22c55e;
}
.dash-order-row__status--pending {
    background: rgba(255,193,7,.12);
    color: #ffc107;
}
.dash-order-row__price {
    font-size: 13px;
    font-weight: 600;
    color: #57b0ff;
    white-space: nowrap;
}

/* Activity Feed */
.dash-activities { display: flex; flex-direction: column; }
.dash-activity {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.dash-activity:last-child { border-bottom: none; }
.dash-activity__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.dash-activity__dot--blue  { background: #57b0ff; }
.dash-activity__dot--green { background: #22c55e; }
.dash-activity__dot--gold  { background: #ffc107; }
.dash-activity__dot--red   { background: #ef4444; }
.dash-activity__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-activity__body strong {
    font-size: 13px;
    color: #e6eefb;
}
.dash-activity__body span {
    font-size: 11px;
    color: #6b7f99;
}

/* Wallet Stats */
.dash-wallet-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 12px;
    background: rgba(255,255,255,.03);
    border-radius: 10px;
    text-align: center;
}
.dash-wallet-stat__label {
    font-size: 12px;
    color: #6b7f99;
}
.dash-wallet-stat__value {
    font-size: 20px;
    font-weight: 700;
    color: #57b0ff;
}
.dash-wallet-stat__value--danger  { color: #ef4444; }
.dash-wallet-stat__value--success { color: #22c55e; }

/* Card Link */
.dash-card-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #57b0ff;
    text-decoration: none;
    border-top: 1px solid rgba(255,255,255,.06);
    transition: color .2s;
}
.dash-card-link:hover { color: #8ac9ff; }

/* Active sidebar state */
.profile-sidebar__nav-item[data-panel].active {
    background: rgba(87,176,255,.1);
    color: #57b0ff;
}

@media (max-width: 991.98px) {
    .profile-layout {
        flex-direction: column;
    }

    .profile-sidebar {
        flex: none;
        width: 100%;
    }

    .profile-banner__body { padding: 0 16px; }
    .profile-stats { flex-wrap: wrap; }
    .profile-stats__item { flex: 1 0 50%; }
    .profile-form .form-row { grid-template-columns: 1fr; }
    .profile-2fa { flex-direction: column; align-items: flex-start; }
    .profile-danger-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .profile-notif-row { flex-wrap: wrap; }
    .dash-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .dash-grid--2 { grid-template-columns: 1fr; }
    .dash-grid--3 { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .profile-form .form-row {
        grid-template-columns: 1fr;
    }
    .dash-grid--4 { grid-template-columns: 1fr 1fr; }
    .dash-wallet-stat__value { font-size: 16px; }
}

.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 rgba(255, 255, 255, 0.07);
    background:
        radial-gradient(circle at 12% 0%, rgba(87, 176, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(24, 29, 38, 0.94) 0%, rgba(17, 22, 30, 0.96) 100%);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    box-shadow: -24px 0 70px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.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, 0.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, 0.68);
    background: transparent;
    border-color: transparent;
}

.cart-menu__close {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    padding: 0;
    color: rgba(203, 218, 241, 0.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;
    /* Use scrollbar-color where supported; provide -webkit- rules below as a fallback for Safari/iOS */
    @supports (scrollbar-color: rgba(77, 166, 255, 0.32) transparent) {
        scrollbar-color: rgba(77, 166, 255, 0.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, 0.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 rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cart-menu__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

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

.cart-menu__title {
    color: rgba(249, 251, 255, 0.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, 0.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, 0.42);
    border-radius: 3px;
    background: rgba(8, 12, 18, 0.18);
    color: rgba(219, 232, 255, 0.78);
}

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

.cart-menu__remove:hover {
    background: linear-gradient(135deg, rgba(255, 114, 144, 0.14) 0%, rgba(255,255,255,0.04) 100%);
    border-color: rgba(255, 156, 176, 0.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, 0.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, 0.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%;
    }
}

/* Header action buttons */
.user-panel {
    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: rgba(255,255,255,.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 rgba(255,255,255,.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, 0.1);
    color: #57b0ff;
}
.lang-selector__item.active {
    color: #57b0ff;
    background: rgba(87, 176, 255, 0.06);
}

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

.header-btn--wallet {
    background: transparent;
    border: none;
    color: #ffd166;
    box-shadow: none;
}

.header-btn--wallet i {
    font-size: 16px;
    color: #ffd166;
}

.header-btn--wallet:hover {
    background: transparent;
    color: #ffe08a;
    box-shadow: none;
}

.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: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.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: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.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 {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
	background: #1a1d24;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
    border-radius: 10px;
    z-index: 35;
}

.notif-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.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: rgba(255,255,255,0.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, 0.15);
    color: #48c774;
}

.notif-item__icon--info {
    background: rgba(87, 176, 255, 0.15);
    color: #57b0ff;
}

.notif-item__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.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 rgba(255, 255, 255, 0.08);
    text-align: center;
}

.notif-menu__all {
    font-size: 12px;
    color: #57b0ff;
    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: #57b0ff;
    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 {

	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	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, 0.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, 0.1);
}

.site-nav .nav ul li.active > a,
.header-nav .nav ul li.active > a {
    color: #57b0ff;
    background: rgba(87, 176, 255, 0.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: #fbbf24;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.2);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.site-nav__promo:hover {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.35);
    color: #fbbf24;
}
.slider-menu {
    display: flex;
    height: 100%;
}
.slider-menu ul {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    padding-right: 1rem;

}
.slider-menu li {
    color: #40384f;
    border-bottom: 1px solid rgba(65, 57, 80, 0.1);
    display: flex;
    width: 100%;
    align-items: center;
}
.slider-menu li:last-child {

    border: 0;

}
.mega-game-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-self: center;
    width: 100%;
    padding: 0 1rem;
}
.mega-game-list a {
    flex: 0 1 20%;
    width: 180px;
    margin: 2rem 0;
    padding: 10px 24px !important;
}
.mega-game-list a img {
    display: block;
    height: 100px;
    object-fit: contain;
    object-position: center;
    width: 100%;
}
.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;
}

.featured-catalog figure,
.populer-games figure {
    position: relative;
    margin: 0;
    overflow: hidden;
}
.featured-catalog figure:hover > img,
.populer-games figure:hover > img {
    transform: scale(1.1);
    filter: blur(5px);
}
.featured-catalog figure:hover > .cover-logo,
.populer-games figure:hover > .cover-logo {
    transform: scale(0.9);
}
.featured-catalog figure>img,
.populer-games figure>img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    object-position: center;
    transition: all ease-in-out .2s;
}
.featured-catalog figure span.cover-logo,
.populer-games figure span.cover-logo {
    position: absolute;
    width: 100%;
    padding: 30px;
    z-index: 1;
    transition: all ease-in-out .2s;
    height: 100%;
    display: flex;
}
.featured-catalog figure span.cover-logo img,
.populer-games figure span.cover-logo img {
    object-fit: contain;
}

.account-section .account-card,
.accounts .accounts-card {
    position: relative;
    background: radial-gradient(farthest-corner at 50% 50%, #30343f 0%, #1e212b 100%);
    overflow: hidden;
}
.account-section .account-card.steam, .accounts .accounts-card.steam {
	background: radial-gradient(farthest-corner at 50% 50%,#1a9fff 0%, #0c4d7c 100%);
}

.account-section .account-card.netflix,
.accounts .accounts-card.netflix {
	background: radial-gradient(farthest-corner at 50% 50%, #fff 0%, #9f9f9f 100%);
}
.account-section .account-card.google,
.accounts .accounts-card.google {
	background: radial-gradient(farthest-corner at 50% 50%, #fff 0%, #9f9f9f 100%);
}
.account-section .account-card.xbox, .accounts .accounts-card.xbox {
	background: radial-gradient(farthest-corner at 50% 50%, #107c10 0%, #074207 100%);
}
.account-section .account-card.playstation, .accounts .accounts-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, .row.big .accounts-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;
}
.account-section figure span.cover-logo,
.accounts figure span.cover-logo {
    position: absolute;
    width: 100%;
    padding: 30px;
    z-index: 1;
    transition: all ease-in-out .2s;
    height: 100%;
    display: flex;
}
.account-section figure span.cover-logo img,
.accounts figure span.cover-logo img {
    object-fit: contain;
}

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

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

}
.product-card:hover .game-icon,
.collapse-card:hover .game-icon {

    transform: translateY(50%) scale(1.1);

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

}

.product-card figure span.game-icon,
.collapse-card figure span.game-icon {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 0px 50px;
    z-index: 1;
    transform: translateY(50%);
    transition: all ease-in-out .4s;
    display: none;
}
.product-card figure span.game-icon img,
.collapse-card figure span.game-icon img {
    aspect-ratio: unset;
    height: 36px;
}
.item-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-md);
    background: radial-gradient(circle at 50% 120%, #171b21 0%, #0e101400 100%);
    transition: all .25s;
    height: 100%;
}

.item-card:hover {
    border-color: rgba(87, 176, 255, 0.39);
    box-shadow: 0 8px 28px rgba(0,0,0,.45);
}

.item-card figure {
    display: block;
    width: 100%;
    z-index: 1;
    margin: 0;
    overflow: hidden;
}

.item-card figure img {
    display: block;
    width: 100%;

}

.item-card__stock {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 6px;
    background: rgba(6, 11, 19, 0.82);
    color: #cfe8ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.item-card__image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.35s ease, filter 0.35s ease, opacity 0.35s ease;
}

.item-card:hover .item-card__image--primary {
    transform: scale(1.04);
    filter: saturate(1.08);
}
.item-card article {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    height: auto;
    padding: 14px 16px 16px;
}

.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;
}
.news figure img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: contain;
    object-position: center;
    padding: 1rem;
}
/* ========== FOOTER ========== */
footer {
    position: relative;
    display: block;
    background: #0d0f16;
    border-top: 1px solid rgba(255, 255, 255, 0.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, 0.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, 0.5);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.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, 0.18); border-color: #5865F2; color: #5865F2; }
.footer-social-btn.youtube:hover   { background: rgba(255, 0,   0,   0.14); border-color: #ff0000; color: #ff0000; }
.footer-social-btn.instagram:hover { background: rgba(225, 48,  108, 0.14); border-color: #E1306C; color: #E1306C; }
.footer-social-btn.twitter:hover   { background: rgba(255, 255, 255, 0.08); border-color: rgba(255,255,255,0.3); color: #fff; }
.footer-social-btn.tiktok:hover    { background: rgba(233, 233, 233, 0.08); border-color: rgba(255,255,255,0.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, 0.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, 0.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: #57b0ff;
}

.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 rgba(255, 255, 255, 0.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 {
    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, 0.55);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
}

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

/* Bottom bar */
.footer-bottom {
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.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, 0.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, 0.35);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-bottom__links li a:hover {
    color: #57b0ff;
}

.footer-collapse-page {
    background: #1e212b;
    padding-top: 0px;
    padding-bottom: 40px;
}
.footer-sticky-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem .75rem;
    background: #1e212b;
    border-top: 1px solid rgba(65, 57, 80, 0.1);
}
.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 300px;
    padding: 1rem 0;
}
.footer-sticky-area .logo img{
width: 100px;
}

.footer-social{
    display: flex;
    margin: 0;
    padding: 0;
    justify-content: center;
}
.footer-social li + li{
    margin-left: 1.25rem;
}
.footer-social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(87, 176, 255, 0.1);
    color: rgba(255,255,255,0.7);
    font-size: 16px;
    transition: background 0.2s, color 0.2s;
}
.footer-social li a:hover {
    background: #57b0ff;
    color: #fff;
}
.footer-bottom ul li a {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    transition: color 0.2s;
}
.footer-bottom ul li a:hover {
    color: #57b0ff;
}

.inner-body {
    display: block;
    border: 1px solid rgba(65, 57, 80, 0.1);
    padding: 1rem;
    background: #30343f;
}
.inner-body h5 {
    color: #fc5065;
    font-weight: 500;
}
.inner-body p {
    font-size: 14px;
    color: #e4e4e4;
}
.style-radius figure,.style-radius-2 figure {
    margin: 0;
    background: linear-gradient(-45deg,#3e364d,#fc5065);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.style-radius figure img {
    border-radius: 50%/60% 0;
    transition: all ease-in-out .2s;
}
.style-radius figure::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset -5px -5px 10px 0 rgba(0, 0, 0, 0.4),inset 0px 0px 0px 1px rgb(255, 255, 255);
    border-radius: 50%/60% 0;
}
.style-radius figure::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,#4139500d,#4139500d);
    border-radius: 50%/60% 0;
}
.style-radius figure:hover img {

    border-radius:  50%/60% 0;

}
.style-radius figure:hover {

box-shadow: 0 0 0 0 black;

}
.style-radius-2 figure img {
    border: 1px solid rgba(65, 57, 80, 0.1);

    border-top-right-radius: 100% 30%;
    border-top-left-radius: 24% 127%;
}

.product-card article,
.collapse-card article {
    position: relative;
    padding: 14px 16px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: linear-gradient(120deg, #035db5, #0087ff);
}
.product-card article::after,
.collapse-card article::after {
    content: "";
    position: absolute;
    background: linear-gradient(to right,transparent,rgba(255, 255, 255, 0.36),transparent);
    top: 0px;
    left: 0;
    width: 100%;
    height: 1px;
}
.game-spec-card {
    position: relative;
    background: radial-gradient(farthest-corner at 0% 0%, #4b5163 0%, #1e212b 100%);
}
.game-spec-card figure {
    position: relative;
    aspect-ratio: 2/3;
}
.game-spec-card figure img {
    position: absolute;
    object-fit: cover;
    padding: 0rem 2rem 0rem 0rem;
    width: 100%;
    bottom: 0;
    left: -24px;
    filter: drop-shadow(3px 3px 0px #00000021);
}
.game-spec-card .cover-logo {
    position: absolute;
    bottom: 60px;
    right: 0;
    z-index: 1;
    width: 60%;
}
.game-spec-card .cover-logo img {
    position: relative;
    width: 100%;
    object-fit: contain;
    height: 120px;
    padding: 0;
    filter: drop-shadow(0 0 15px black);
}
.product-card h6,
.collapse-card h6 {
    text-align: left;
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    margin: 0;
}

.item-card__tag {
	display: inline-flex;
	align-self: flex-start;
	padding: 6px 10px;
	background: rgba(255, 255, 255, 0.14);
	color: #eaf5ff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	margin-top: -28px;
	z-index: 1;
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

.item-card__desc {
    margin: 0;
    color: rgba(231, 241, 255, 0.78);
    font-size: 12px;
    line-height: 1.55;
}

.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: #34d399;
    border-color: rgba(52,211,153,.3);
}
.grid-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.grid-col {
    width: 100%;
    padding: 1px;
    grid-row-end: span 1;
    grid-column-end: span 1;
}
.grid-col figure {
    transition:all ease-in-out .1s;
}

.grid-col:nth-child(5),.grid-col:nth-child(8) {
    grid-row-end: span 2;
    grid-column-end:span 2;

}

.grid-col:hover figure {
    box-shadow: 0 0 30px 0 #00000024;
    transform: scale(1.04);
}

.account-menu ul {
    padding: 1rem;
    margin: 0;
}
.account-menu ul li {
    margin-bottom: 12px;
    background: linear-gradient(to left,#413950,#ff596d);
    border-radius: 16px;
    box-shadow: 5px 2px 14px -11px #00000059;
}

.account-menu ul li a {
    padding: 8px 14px;
    background: white;
    display: block;
    border-radius: 14px;
    text-decoration: none;
    color: black;
    font-weight: 600;
    transition: all ease-in-out .2s;
    font-size: 14px;
}
.account-menu ul li a:hover {
    margin-left: 10px;
    box-shadow: -8px 0px 6px -4px #00000021,inset -8px 0px 6px -4px #00000017;
    border-radius: 16px 14px 14px 16px;
}
.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-top .section-shell {
    padding: 0;
    background: radial-gradient(farthest-corner at 50% 0px, #30343f85 0%, #1e212b00 70%);
    margin-left: -20px;
    margin-right: -20px;
}
.slider .section-shell{
    padding: 0;

}

.slider-right {
    display: flex;
    flex-wrap: wrap;
}
.slider-right figure {
    display: flex;
    margin: 0;
}
.slider-right figure{
    padding-top: calc(.75rem / 2);
    padding-bottom: calc(.75rem / 2);
}
.slider-right figure:first-child{
    padding-top: 0;
}
.slider-right figure:last-child{
    padding-bottom: 0;
}

.slider-right figure img {
    object-fit: cover;
}

.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 rgba(255, 255, 255, 0.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, 0.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, 0.15);
    color: #57b0ff;
}

.hero-side-card--currency .hero-side-card__icon {
    background: rgba(255, 209, 102, 0.15);
    color: #ffd166;
}

.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, 0.6);
    line-height: 1.5;
}

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

.hero-side-card:hover .hero-side-card__arrow {
    color: rgba(255,255,255,0.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-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--slider-active-accent);
    border: 1px solid color-mix(in srgb, var(--slider-active-accent) 38%, rgba(255,255,255,.12));
    background: rgba(8,12,18,.58);
    background: color-mix(in srgb, var(--slider-active-accent) 18%, rgba(8,12,18,.58));
    color: #ffffff;
    color: color-mix(in srgb, var(--slider-active-accent) 62%, #ffffff 38%);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    transition:
        opacity .28s ease,
        transform .46s cubic-bezier(.22, 1, .36, 1),
        color .42s ease,
        border-color .42s ease,
        background .42s ease;
}

.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), #f59e0b);
    background: linear-gradient(135deg, color-mix(in srgb, var(--slider-active-accent) 88%, #ffffff 12%), color-mix(in srgb, var(--slider-active-accent) 72%, #f59e0b 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), #f59e0b);
    background: linear-gradient(135deg, color-mix(in srgb, var(--slider-active-accent) 88%, #ffffff 12%), color-mix(in srgb, var(--slider-active-accent) 72%, #f59e0b 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), #f59e0b);
    background: linear-gradient(135deg, color-mix(in srgb, var(--slider-active-accent) 92%, #ffffff 8%), color-mix(in srgb, var(--slider-active-accent) 74%, #f59e0b 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), #f59e0b);
    background: linear-gradient(135deg, color-mix(in srgb, var(--slider-active-accent) 82%, #ffffff 8%), color-mix(in srgb, var(--slider-active-accent) 68%, #f59e0b 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, 0.14);
    box-shadow: 0 20px 70px rgba(0, 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, 0.14));
    box-shadow: 0 20px 70px rgba(0, 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, 0.35);
}

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

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

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

.slider-accordion-item--rise {
    --slider-preview-bg-start: #204715;
    --slider-preview-bg-end: #0b1309;
    --slider-preview-accent: rgba(117, 255, 117, 0.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, .10) 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, 0.18), rgba(5, 8, 15, 0.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, 0.36),
        0 0 42px rgba(87, 176, 255, 0.18);
    box-shadow:
        0 20px 70px rgba(0, 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, .30) 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: 768px) {
    /* Mobil: thumbs gallery — üstte yalnızca aktif slayt,
       altında tüm slaytların küçük resim şeridi (.slider-thumbs). */
    .slider-accordion {
        --slider-preview-width: 100%;
        --slider-panel-width: 100%;
        height: auto;
        flex-wrap: wrap; /* JS ölçüm guard'ı: mobilde panel genişliği %100 kabul edilir */
    }

    /* 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, #57b0ff);
        box-shadow: 0 0 0 1px var(--slider-active-accent, #57b0ff);
    }
}

@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;
}

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

.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: rgba(255, 255, 255, 0.06);
}

.topbar-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.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, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.18);
}

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

.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: rgba(255, 255, 255, 0.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 {
	position: relative;
	display: block;
	padding: 0;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 12px;
	text-align: left;
	transition: all .25s;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.broadcaster-card:hover {
    border-color: rgba(87, 176, 255, 0.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, 0.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,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: #57b0ff;
}

.broadcaster-card__followers {
    font-size: 11px;
    color: rgba(203,220,255,0.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,0.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: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.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: rgba(255,255,255,.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: #57b0ff;
}
.confidence-card__icon--green {
    background: rgba(52,211,153,.1);
    border: 1px solid rgba(52,211,153,.2);
    color: #34d399;
}
.confidence-card__icon--gold {
    background: rgba(255,209,102,.1);
    border: 1px solid rgba(255,209,102,.2);
    color: #ffd166;
}
.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, #8ba3c7);
    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; }
}

.nav-cat-mega-menu .game-list{
    padding: 2rem;
}
.nav-cat-mega-menu .game-list h4 {
    display: block;
    text-align: left;
    color: #fc5065;
    margin-bottom: 0.6rem;
}
.nav-cat-mega-menu .game-list h4::after {
    content: "";
    background: linear-gradient(to right,#e3e3e34a,transparent);
    display: block;
    width: 100%;
    height: 1px;
    margin-top: .6rem;
}
.nav-cat-mega-menu .game-list ul{
    display: block;
}

.nav-cat-mega-menu .game-list ul li {
    display: block;
    text-align: left;
    margin-bottom: 0.4rem;
}

.nav-cat-mega-menu .game-list ul li a{
    display: block;
}

.tabl {
    margin-left: -15px;
    margin-right: -15px;
    display: flex;

}

.tabl-cell {
    padding: 0 15px;
    flex: 1 0 0%;
    display: flex;
}

.tabl-cell-inner {
    background: #1d2630;
     border: 2px solid #273340;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 10px;
     background: radial-gradient(ellipse at bottom, #fc5e7287, #1d2630);
    overflow: hidden;
}
.tabl-cell-inner h4 {
    font-weight: 600;
    color: white;
    font-size: 21px;
    padding: 1rem 1rem;
    margin: 0;
    background: radial-gradient(ellipse at 0% 100%, #1b1e27, #1d2630);
    text-shadow: 2px 2px 3px #0000003b;
}
.tabl-cell-inner h4 span {
    font-size: 70%;
    color: white;
}
.tabl-cell-inner h6 {
    font-weight: 400;
    margin: 0;
    color: #f1f1f1;
    font-size: 13px;
    background: radial-gradient(ellipse at 0% 0%, #262b37, #1d2630);
    padding: 0.6rem 1rem;
}
.cl-1.tabl-cell-inner {
    border: 2px solid #31882b;
}
.cl-1.tabl-cell-inner h6 {
    background: radial-gradient(ellipse at 0% 0%, #328a2b, #1b5722);

}
.cl-2.tabl-cell-inner {
    border: 2px solid #2a887f;
}
.cl-2.tabl-cell-inner h6 {
    background: radial-gradient(ellipse at 0% 0%, #2b8a81, #1b5457);

}
.cl-3.tabl-cell-inner {
    border: 2px solid #882a2a;
}
.cl-3.tabl-cell-inner h6 {
    background: radial-gradient(ellipse at 0% 0%, #8a2b2b, #571b1b);

}
.cl-4.tabl-cell-inner {
    border: 2px solid #88672a;
}
.cl-4.tabl-cell-inner h6 {
    background: radial-gradient(ellipse at 0% 0%, #8a692b, #57421b);

}
.cl-5.tabl-cell-inner {
    border: 2px solid #293385;
}
.cl-5.tabl-cell-inner h6 {
    background: radial-gradient(ellipse at 0% 0%, #2b358a, #1b2457);

}

.colinner {
    background: radial-gradient(ellipse at 0% 100%, #1b1e27, #1d2630);
    padding: 1.5rem;
    border: 2px solid #273340;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    border-radius: 20px;
}

.colinner h4 {
    position: relative;
    font-size: 1.2rem;
}
.colinner p {
    position: relative;
    font-size: 0.8rem;
    color: #858a8e;
}
.colinner svg {
    top: 20px;
    left: 10px;
    width: 120px;
    height: 50px;
    display: block;
    flex: 0 1 auto;
    margin-right: 1.6rem;
    z-index: 0;
    fill: #999;
}
.colinner a {
    position: relative;
    padding: 7px 16px;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.8rem;
    background: #792829;
}
.colinner span {
    position: relative;
    flex: 0 1 auto;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: baseline;
    margin-left: 0rem;
    z-index: 2;
}

.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.type3 .price {
    display: block;
    font-size: 18px;
    font-weight: 600;
}
.game__card__container .game__card .price-colon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
}

.game__card__container .game__card .price span {
    color: #9e9e9e;
    font-size: 70%;
}
.game__card__container .game__card .price .price__old {
    color: #9e9e9e;
    font-size: 80%;
    margin-right: 10px;
    display: inline-block;
    align-self: center;
    position: relative;
    opacity: 1;
}
.game__card__container .game__card .price .price__old::after {
    content: "";
    position: absolute;
    transform: rotateZ(20deg);
    width: 100%;
    height: 2px;
    background: #f34d70;
    left: 0;
    top: calc(50% - 1px);
}
.game__card__container .game__card .price .price__new {
    color: white;

}

.game__card__container .game__card .price-discount {
    color: #fff;
    font-size: 70%;
}
.game__card__container .game__card.type3 .peace {
    display: flex;
    font-size: 18px;
    font-weight: 600;
    align-items: center;
}
.game__card__container .game__card.type3 .peace i {
    display: flex;
    font-size: 18px;
    font-weight: 600;
    font-style: normal;
    background: #273340;
    padding: 0 6px;
}
.game__card__container .game__card.type3 .peace span {
    display: flex;
    font-size: 18px;
    font-weight: 600;
    padding: 0 6px;
    background: #273340;
}
.game__card__container .game__card.type3 .price {
    display: flex;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}
.game__card__container .game__card.type3 .price-discount span {
    color: #fff;
    background: #fc586d;
    padding: 2px 3px;
    border-radius: 3px;
    font-weight: 700;
}
.game__card__container .game__card.type3 .price-discount span:last-child {
    color: #fff;
    background: #fc586d;
    padding: 2px 3px;
    border-radius: 3px;
    font-weight: 700;
}
.game__card__container .game__card .buy {
    display: flex;
    align-items: center;
    margin: 0;
}
.game__card__container .game__card.type2 .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;
}
.game__card__container .game__card.type3 .buy a {
   margin: 0;
}

.vertical-list {
    border: none !important;
}
.vertical-list li{
    display: block;
}

.vertical-list li button{
    display: block;
    width: 100%;
}

.col-25{
    width: 20%;
}

.pop-game-card {
	position: relative;
	display: block;
	padding: 82px 0px 32px 0px;
	transition: all ease-in-out .3s;
}

.pop-game-card figure {
	display: block;
	aspect-ratio: 1;
	margin: 0;
	background: #181b21;
	border-radius: 22px;
    transition: all ease-in-out .3s;
}
.pop-game-card figure img{
     transition: all ease-in-out 0s;
 -webkit-mask-image: linear-gradient(#000, transparent);
 mask-image: linear-gradient(#000, transparent);
	transform: translateY(-50px);
}

.pop-game-card .game-icon {
	display: flex;
	justify-content: center;
	margin-top: -90px;
    transition: all ease-in-out .3s;
}
.pop-game-card:hover figure {
	background: #002545;
}
.pop-game-card:hover .game-icon {
	transform: scale(1.1);
    filter: drop-shadow(0 0 10px black);
}
.pop-game-card .game-icon img {
	width: auto;
	height: 50px;
}
.pop-game-card h6 {
	display: none;
}
.pop-game-card:hover figure img{
transition: all ease-in-out 5s;
	transform: translateY(-60px) scale(1.05);
}
.popgamefav {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    overflow: hidden;
}

.popgamefav .featured-game-logo {
    display: flex;
    justify-content: center;
    flex: 1;
    min-width: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.popgamefav .featured-game-logo:last-child {
    border-right: none;

	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 92px;
}

.featured-game-logo figure {
	margin: 0;
	position: relative;
	display: inline-block;
	width: fit-content;
	line-height: 0;
}

.featured-game-logo img {
	display: block;
	max-height: 36px;
	width: auto;
	filter: brightness(0) invert(1);
	transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
	position: relative;
	z-index: 1;
}

.featured-game-logo figure::after {
	content: "";
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(135deg, #57b0ff 0%, #2b7cff 100%);
	-webkit-mask: var(--logo-mask) center / contain no-repeat;
	mask: var(--logo-mask) center / contain no-repeat;
	opacity: 0;
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
	z-index: 2;
}

.featured-game-logo:hover img {
	opacity: 0;

}

.featured-game-logo:hover figure::after {
	opacity: 1;

}
.clip {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	filter: blur(-1px);
	padding: 1px;
	pointer-events: none;
}
.clip::after {
	content: "";
	position: absolute;
	background: linear-gradient(to bottom,#f000,#57b0ff38);
	clip-path: content-box polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, calc(0% + 1px) 0%, calc(0% + 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(0% + 1px), 0% calc(0% + 1px));
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 1px;
     transition: all ease-in-out .3s;
}
.clip i {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	filter: blur(4px);
	padding: -1px;
    opacity: 0;
     transition: all ease-in-out .3s;
}
.clip i::after {
	content: "";
	position: absolute;
	background: linear-gradient(to bottom,#f000,#0087ff);
	clip-path: content-box polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, calc(0% + 1px) 0%, calc(0% + 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(0% + 1px), 0% calc(0% + 1px));
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 1px;
     transition: all ease-in-out .3s;
}

section {
	position: relative;

}
.pt-60 {

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

	padding-bottom: 60px;
}
footer::before {
	content: "";
	background: linear-gradient(to right,transparent,#57b0ff, 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,#57b0ff, transparent);
	position: absolute;
	width: 100%;
	height: 1px;
	top: 0;
	z-index: 1;
}

.fav_game_area {
	background: radial-gradient(farthest-corner at 50% 0%, #232834 0%, #10131a00 100%);
	background: linear-gradient(to left, transparent,#2328346b,transparent);
}

.item-card {
	position: relative;
	display: flex;
	isolation: isolate;
	flex-direction: column;
	align-items: stretch;
	border: 1px solid rgba(255,255,255,.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, 0.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;
	/* mask-image: radial-gradient(circle at center 0%, rgb(0, 0, 0) 66%, rgba(0, 0, 0, 0) 88%); */
	border-radius: 6px;
	border: 1px solid rgba(255,255,255,.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, 0.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, 0.15);
}
.starmeter .str_fill .material-symbols-outlined {
	color: #ffb703;
}

/* Starmeter context overrides — renk yalnızca .str_fill'e uygulanır, aksi halde sönük taban yıldızları da boyanır */
.product-detail-hero__stars .starmeter .material-symbols-outlined,
.cash-hero__stars .starmeter .material-symbols-outlined { font-size: 16px; }
.product-detail-hero__stars .starmeter .str_fill .material-symbols-outlined,
.cash-hero__stars .starmeter .str_fill .material-symbols-outlined { color: #ffc107; }
.detail-tabs__review-stars .starmeter .material-symbols-outlined { font-size: 16px; }
.detail-tabs__review-stars .starmeter .str_fill .material-symbols-outlined { color: #fac850; }
.detail-comment__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__offer {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 5;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 32px);
	/* padding: 4px 7px; */
	font-variant-numeric: tabular-nums;
}
.item-card__offer-label {
    display: none;
	font-size: 9px;
	font-weight: 500;
	color: rgba(219, 232, 255, 0.58);
	letter-spacing: 0;
	line-height: 1.2;
	white-space: nowrap;
}

.item-card__prices {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.item-card__rating {
	align-items: center;
}

.item-card__old {
	font-style: normal;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.35);
	text-decoration: line-through;
	white-space: nowrap;
}

.item-card__badge {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 4;
	padding: 4px 8px;
	border-radius: 3px;
	background: linear-gradient(135deg, #ef4444, #dc2626);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
	white-space: nowrap;
	line-height: 1.3;
	box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
	font-style: normal;
}
.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;
}

/* Item card countdown timer */
.item-card__timer {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 10px;
	color: rgba(219, 232, 255, 0.68);
	line-height: 1;
	border-radius: 3px;
	background: linear-gradient(135deg, #ef4444, #dc2626);
	border: 1px solid rgba(255, 255, 255, 0.11);
	padding: 4px;
}
.item-card__timer .material-symbols-outlined {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: rgba(219, 232, 255, 0.46);
}
.item-card__timer span {
	font-size: 0;
	font-weight: 600;
	color: rgba(219, 232, 255, 0.72);
}
.item-card__timer span:not(.material-symbols-outlined):not(:last-child)::after {
	content: ":";
	margin-left: 3px;
	font-size: 10px;
	color: rgba(219, 232, 255, 0.44);
}
.item-card__timer strong {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.82);
	font-weight: 600;
}

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

.listing-tabs > *,
.item_group_page > * {
	position: relative;
	z-index: 1;
}

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

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

#myTab .nav-link {
	min-height: 46px;
	padding: 10px 18px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.65px;
}

#myTab .nav-link:hover,
#myTab .nav-link:focus-visible {
	box-shadow: 0 12px 24px rgba(43, 124, 255, 0.2);
}

#myTab .nav-link.active {
	border-color: rgba(160, 220, 255, 0.2);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255,255,255,0) 48%),
		linear-gradient(135deg, #57b0ff 0%, #2b7cff 100%);
	color: #fff;
	box-shadow: 0 16px 32px rgba(43, 124, 255, 0.28);
}

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

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

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

#myTabContent .item-card,
#myTabContent .item-card,
#myTabContent .collapse-card.product-card {
	width: 100%;
}





#myTabContent .item-card,
#myTabContent .collapse-card.product-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;
	}

	#myTab {
		gap: 8px;
		margin-bottom: 14px;
	}

	#myTabContent {
		padding: 16px;
		border-radius: 20px;
	}
}

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

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

	#myTabContent {
		padding: 14px;
	}
}

.acr_back {
	position: absolute;
	width: 100%;
	height: 100%;
	clip-path: polygon(calc(0% + 20px) 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% calc(0% + 20px)) content-box;
}
.acr_back img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.acr_back::before {
	content: "";
	background: #1d212aeb;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-backdrop-filter: blur(45px) saturate(2) contrast(2);
	backdrop-filter: blur(45px) saturate(2) contrast(2);
}
.testcard {

	position: relative;
	aspect-ratio: 1;
}
.testcard::after {
	content: "";
	position: absolute;
	clip-path: content-box polygon(
        calc(0% + 30px) 0%,/* 1 */
        100% 0%,/* 2 */
        100% calc(100% - 30px),/*3 */
        calc(100% - 30px) 100%,/* 4 */
        0% 100%,/* 5 */
        0% calc(0% + 30px),/* 6 */
        calc(0% + 30px) 0%,/* 7 */
        calc(0% + 31px) calc(0% + 2px),/* 8 */
        calc(0% + 2px) calc(0% + 31px),/* 9 */
        calc(0% + 2px) calc(100% - 2px),/* 10 */
        calc(100% - 31px) calc(100% - 2px),/* 11 */
        calc(100% - 2px) calc(100% - 31px),/* 12 */
        calc(100% - 2px) calc(0% + 2px),/* 13 */
        calc(0% + 30px) calc(0% + 2px)/* 14 */
        );
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 1px;
	transition: all ease-in-out .3s;
	background: red;
}

/* =============================================
   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 rgba(255,255,255,0.05); margin-bottom: 32px; }
.page-hero .breadcrumb-nav { display:flex; align-items:center; gap:6px; font-size:12px; color:#8ba3c7; margin-bottom:8px; }
.page-hero .breadcrumb-nav a { color:#8ba3c7; text-decoration:none; }
.page-hero .breadcrumb-nav a:hover { color:rgb(var(--main--color)); }
.page-hero .breadcrumb-nav .sep { opacity:.4; }
.page-hero__title { font-size:26px; font-weight:800; color:#fff; margin:0 0 4px; }
.page-hero__desc { font-size:13px; color:#8ba3c7; margin:0; }

/* =============================================
   CATALOG LAYOUT
   ============================================= */
.catalog-layout { display:flex; gap:24px; padding-bottom:48px; }
.catalog-sidebar { flex: 0 0 224px; }
.catalog-main { flex: 1; min-width: 0; }
.filter-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:18px; margin-bottom:14px; }
.filter-card__title { font-size:11px; font-weight:700; color:#8ba3c7; text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.filter-option { display:flex; align-items:center; gap:8px; font-size:13px; color:#cfe8ff; padding:5px 0; cursor:pointer; -webkit-user-select:none; user-select:none; }
.filter-option input[type=checkbox],.filter-option input[type=radio] { accent-color:rgb(var(--main--color)); width:14px;height:14px; }
.filter-option:hover { color:#fff; }
.filter-search { width:100%; background:#16191f; border:1px solid rgba(255,255,255,0.1); color:#fff; border-radius:6px; padding:7px 10px; font-size:13px; margin-bottom:10px; }
.filter-search::placeholder { color:#8ba3c7; }
.filter-search:focus { outline:none; border-color:rgba(var(--main--color),.5); }
.catalog-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.catalog-toolbar__count { font-size:13px; color:#8ba3c7; }
.catalog-toolbar__sort select { background:#16191f; border:1px solid rgba(255,255,255,0.12); color:#cfe8ff; border-radius:6px; padding:6px 12px; font-size:13px; }
.game-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:10px; overflow:hidden; transition:border-color .2s,transform .2s; text-decoration:none; display:block; }
.game-card:hover { border-color:rgba(var(--main--color),0.4); transform:translateY(-3px); }
.game-card__cover { width:100%; aspect-ratio:16/9; object-fit:cover; }
.game-card__body { padding:12px; }
.game-card__top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.game-card__icon { width:28px; height:28px; border-radius:5px; object-fit:cover; }
.game-card__name { font-size:14px; font-weight:700; color:#fff; }
.game-card__tags { display:flex; gap:6px; flex-wrap:wrap; }
.game-card__tag { font-size:11px; background:rgba(var(--main--color),0.12); color:rgb(var(--main--color)); padding:2px 8px; border-radius:20px; }
.game-card__tag--orange { background:rgba(255,167,38,0.12); color:#ffa726; }

/* =============================================
   PRODUCT DETAIL
   ============================================= */
.product-detail { display:flex; gap:36px; padding-bottom:48px; }
.product-detail__gallery { flex: 0 0 420px; }
.product-detail__gallery img.main-img { width:100%; border-radius:12px; object-fit:cover; }
.product-detail__thumbnails { display:flex; gap:8px; margin-top:10px; }
img.product-detail__thumbnail { width:64px; height:64px; border-radius:6px; object-fit:cover; border:2px solid transparent; cursor:pointer; }
img.product-detail__thumbnail.active { border-color:rgb(var(--main--color)); }
.product-detail__image { width:100%; border-radius:12px; object-fit:cover; display:block; }
.product-detail__info { flex:1; }
.product-detail__breadcrumb { display:flex; align-items:center; gap:6px; font-size:12px; color:#8ba3c7; margin-bottom:12px; }
.product-detail__breadcrumb a { color:#8ba3c7; text-decoration:none; }
.product-detail__breadcrumb a:hover { color:rgb(var(--main--color)); }
.product-detail__title { font-size:24px; font-weight:800; color:#fff; margin:0 0 8px; }
.product-detail__meta { display:flex; align-items:center; gap:16px; color:#8ba3c7; font-size:13px; margin-bottom:20px; }
.product-detail__meta .rating { color:#ffbd3c; }
.product-options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:24px; }
.product-option { background:rgba(255,255,255,0.04); border:2px solid rgba(255,255,255,0.08); border-radius:8px; padding:14px 10px; text-align:center; cursor:pointer; transition:all .15s; }
.product-option:hover,.product-option.selected { border-color:rgb(var(--main--color)); background:rgba(var(--main--color),0.1); }
.product-option__amount { font-size:18px; font-weight:700; color:#fff; }
.product-option__bonus { font-size:11px; color:#81c784; margin-top:2px; }
.product-option__price { font-size:13px; color:#8ba3c7; margin-top:4px; }
.buy-section { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:20px; margin-bottom:20px; }
.buy-price { font-size:30px; font-weight:800; color:rgb(var(--main--color)); margin-bottom:16px; }
.buy-price small { font-size:14px; color:#8ba3c7; font-weight:400; }
.buy-btn { width:100%; padding:13px; background:rgb(var(--main--color)); border:none; color:#fff; font-size:15px; font-weight:700; border-radius:8px; cursor:pointer; transition:opacity .2s; }
.buy-btn:hover { opacity:.85; }
.buy-input { background:#16191f; border:1px solid rgba(255,255,255,0.1); color:#fff; border-radius:8px; padding:10px 14px; font-size:14px; width:100%; margin-bottom:10px; }
.buy-input:focus { outline:none; border-color:rgba(var(--main--color),.5); }
.buy-input::placeholder { color:#8ba3c7; }
.product-tabs .nav-link { color:#8ba3c7; background:none; border:none; border-bottom:2px solid transparent; border-radius:0; padding:10px 4px; margin-right:20px; font-size:14px; }
.product-tabs .nav-link.active { color:rgb(var(--main--color)); border-bottom-color:rgb(var(--main--color)); }
.product-tabs .tab-content { padding:20px 0; color:#cfe8ff; font-size:14px; line-height:1.7; }
.product-tabs__nav { display:flex; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:0; }
.product-tabs__btn { background:none; border:none; border-bottom:2px solid transparent; color:#8ba3c7; padding:10px 18px; font-size:14px; font-weight:500; cursor:pointer; transition:color .15s,border-color .15s; margin-bottom:-1px; }
.product-tabs__btn:hover { color:#cfe8ff; }
.product-tabs__btn.active { color:rgb(var(--main--color)); border-bottom-color:rgb(var(--main--color)); }
.product-tabs__pane { font-size:14px; color:#a0aec0; line-height:1.7; }
.info-row { display:flex; gap:0; border:1px solid rgba(255,255,255,0.07); border-radius:8px; overflow:hidden; margin-bottom:10px; }
.info-row__label { background:rgba(255,255,255,0.04); padding:10px 14px; font-size:12px; color:#8ba3c7; min-width:130px; display:flex; align-items:center; }
.info-row__val { padding:10px 14px; font-size:13px; color:#cfe8ff; }

/* =============================================
   MARKETPLACE LISTING
   ============================================= */
.marketplace-layout { display:flex; gap:24px; padding-bottom:48px; }
.marketplace-main { flex:1; min-width:0; }
.marketplace-panel { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:10px; overflow:hidden; }
.marketplace-table { width:100%; border-collapse:collapse; }
.marketplace-table th { padding:10px 16px; font-size:11px; font-weight:700; color:#8ba3c7; text-transform:uppercase; letter-spacing:.06em; text-align:left; background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.07); }
.marketplace-table td { padding:12px 16px; font-size:13px; color:#cfe8ff; border-bottom:1px solid rgba(255,255,255,0.04); vertical-align:middle; }
.marketplace-table tr:hover td { background:rgba(255,255,255,0.02); }
.marketplace-table tr:last-child td { border-bottom:none; }
.seller-info { display:flex; align-items:center; gap:8px; }
.seller-info__avatar { width:28px; height:28px; border-radius:50%; background:rgba(var(--main--color),0.2); display:flex; align-items:center; justify-content:center; font-size:12px; color:rgb(var(--main--color)); font-weight:700; flex-shrink:0; }
.seller-info__name { font-weight:600; color:#fff; }
.seller-info__score { font-size:11px; color:#81c784; }
.market-price { font-weight:700; color:rgb(var(--main--color)); }
.market-buy-btn { background:rgba(var(--main--color),0.15); border:1px solid rgba(var(--main--color),0.3); color:rgb(var(--main--color)); border-radius:6px; padding:5px 14px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition:all .15s; }
.market-buy-btn:hover { background:rgb(var(--main--color)); color:#fff; }
.item-thumb { width:40px; height:40px; border-radius:6px; object-fit:cover; }
.item-badge { display:inline-block; font-size:10px; padding:2px 7px; border-radius:20px; font-weight:600; }
.item-badge--rare { background:rgba(94,114,228,0.2); color:#7b8fe8; }
.item-badge--epic { background:rgba(168,85,247,0.2); color:#c779d0; }
.item-badge--legendary { background:rgba(255,167,38,0.2); color:#ffa726; }
.item-badge--common { background:rgba(255,255,255,0.1); color:#8ba3c7; }
.float-bar { display:flex; align-items:center; gap:6px; font-size:12px; }
.float-bar__track { flex:1; height:4px; background:rgba(255,255,255,0.1); border-radius:2px; position:relative; max-width:100px; }
.float-bar__fill { height:100%; background:rgb(var(--main--color)); border-radius:2px; }
.char-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:16px; display:flex; gap:14px; align-items:flex-start; }
.char-card__avatar { width:56px; height:56px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.char-card__name { font-size:15px; font-weight:700; color:#fff; margin-bottom:4px; }
.char-card__game { font-size:12px; color:#8ba3c7; margin-bottom:8px; }

/* ═══ PRODUCT PURCHASE DETAIL ══════════════════════════════════════════ */
/* Canonical classes are product-detail-*. cash-* remains as a legacy alias. */

/* Category Nav */
.product-detail-nav, .cash-cat-nav { border-bottom:1px solid rgba(255,255,255,0.08); padding-bottom:12px; }
.product-detail-nav__item, .cash-cat-nav__item {
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 20px; border-radius:8px; font-size:14px; font-weight:600;
    color:#8ba3c7; text-decoration:none;
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
    transition:all .2s;
}
.product-detail-nav__item:hover, .cash-cat-nav__item:hover { color:#fff; background:rgba(255,255,255,0.08); }
.product-detail-nav__item.active, .cash-cat-nav__item.active {
    color:rgb(var(--main--color)); background:rgba(var(--main--color),0.12);
    border-color:rgba(var(--main--color),0.3);
}

/* Hero (left column) */
.product-detail-hero, .cash-hero {
	position: relative;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 16px;
	overflow: hidden;
	/* backdrop-filter: blur(16px); */

	padding: 24px;
}

/* 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);
}

.product-detail-hero--ko-dynamic {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(140% 88% at 8% -6%, rgba(var(--hero-top-rgb), 0.16) 0%, rgba(var(--hero-top-rgb), 0.07) 34%, rgba(11, 14, 21, 0) 64%),
        radial-gradient(132% 86% at 2% 106%, rgba(var(--hero-bottom-cool-rgb), 0.18) 0%, rgba(var(--hero-bottom-cool-rgb), 0.08) 38%, rgba(11, 14, 21, 0) 72%),
        linear-gradient(104deg, #10131a 0%, #0d1118 34%, #0b0e15 100%);
}

.product-detail-purchase-card {
    position: relative;
    padding: 24px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    background:
        radial-gradient(140% 88% at 8% -6%, rgba(var(--hero-top-rgb), 0.14) 0%, rgba(var(--hero-top-rgb), 0.06) 34%, rgba(11, 14, 21, 0) 64%),
        radial-gradient(132% 86% at 2% 106%, rgba(var(--hero-bottom-cool-rgb), 0.16) 0%, rgba(var(--hero-bottom-cool-rgb), 0.07) 38%, rgba(11, 14, 21, 0) 72%),
        linear-gradient(104deg, #10131a 0%, #0d1118 34%, #0b0e15 100%);
}



.product-detail-purchase-card > * {
    position: relative;
    z-index: 1;
}

.product-detail-purchase-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 18px;
    align-items: start;
}

.product-detail-purchase-group .product-detail-options {
    margin-bottom: 0;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: stretch;
}

.product-detail-purchase-group .product-detail-option {
    min-height: 0;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    box-shadow: none;
    text-align: left;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.product-detail-purchase-group .product-detail-option:hover {
    border-color: rgba(87, 176, 255, 0.39);
    background: #111722;
    box-shadow: 0 8px 28px rgba(0,0,0,.45);
    transform: none;
}

.product-detail-purchase-group .product-detail-option::before {
    content: none;
}

.product-detail-purchase-group .product-detail-option.active::after {
    z-index: 3;
}

.product-detail-purchase-group .product-detail-option__icon {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1;
    opacity: 1;
    overflow: hidden;
    background: #0f131c;
}

.product-detail-purchase-group .product-detail-option__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .35s ease;
}

.product-detail-purchase-group .product-detail-option:hover .product-detail-option__icon img {
    transform: scale(1.05);
}

.product-detail-purchase-group .product-detail-option__name,
.product-detail-purchase-group .product-detail-option__price {
    position: relative;
    z-index: 1;
    padding-inline: 14px;
}

.product-detail-purchase-group .product-detail-option__name {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    margin-top: 0;
    padding-top: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-detail-purchase-group .product-detail-option__price {
    color: #fff;
    font-size: 16px;
    padding-bottom: 14px;
    margin-top: 5px;
}

.product-detail-purchase-group .product-detail-option__price small {
    color: #57b0ff;
    font-size: 11px;
}

.product-detail-purchase-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(87, 176, 255, 0.18);
    border-radius: 14px;
    background: rgba(9, 13, 20, 0.28);
}

.product-detail-purchase-side .product-detail-notice {
    margin-bottom: 0;
}

.product-detail-purchase-side .product-detail-checkout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    text-align: center;
    gap: 14px;
}

.product-detail-purchase-side .product-detail-checkout__qty,
.product-detail-purchase-side .product-detail-checkout__total-wrap {
    justify-content: center;
    align-items: center;
}

.product-detail-purchase-side .product-detail-checkout__actions {
    grid-column: 1 / -1;
    margin-left: 0;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.product-detail-purchase-side .product-detail-checkout__btn {
    width: 100%;
    justify-content: center;
}

@media (max-width: 991.98px) {
    .product-detail-purchase-group {
        grid-template-columns: 1fr;
    }

    .product-detail-purchase-group .product-detail-options {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}



.product-detail-hero__media, .cash-hero__img-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	/* aspect-ratio: 1; */
	height: 100%;
}
.product-detail-hero__media img, .cash-hero__img-wrap img {
	border-radius: 12px;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: top;
	box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.product-detail-hero__media .product-detail-hero__logo {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: min(72%, 160px);
    height: auto;
    transform: translateX(-50%);
    z-index: 2;
    border-radius: 0;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .65));
}
.product-detail-hero__body, .cash-hero__body { margin-top:24px; }
.product-detail-hero__title, .product-detail-title, .cash-hero__title { font-size:22px; font-weight:800; color:#fff; margin:0 0 8px; }
.product-detail-hero__rating, .product-detail-rating { display:flex; align-items:center; gap:10px; }
.product-detail-hero__stars, .cash-hero__stars { display:flex; }
.product-detail-hero__score, .cash-hero__score { font-size:16px; font-weight:700; color:#ffc107; }
.product-detail-hero__review-count, .cash-hero__review-count { font-size:13px; color:#8ba3c7; }
.product-detail-hero__desc, .cash-hero__desc { font-size:14px; color:#a0b3cc; line-height:1.6; margin:0; }
.product-detail-hero__badges, .product-detail-badges { display:flex; flex-wrap:wrap; gap:6px; }

.product-detail-hero__badge, .product-detail-badge, .cash-hero__badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:5px 10px; border-radius:6px; font-size:11px; font-weight:600;
    background:rgba(var(--main--color),0.1); color:rgb(var(--main--color));
    border:1px solid rgba(var(--main--color),0.15);
}

@media (min-width:992px) {
    .product-detail-hero { position:sticky; top:24px; }
}

/* Product Grid */
.product-detail-options, .cash-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin-bottom:16px;
}
.product-detail-purchase-card .product-detail-options {
    margin-bottom: 14px;
}
.product-detail-purchase-card > .product-detail-hero {
    position: relative;
    top: auto;
    padding: 0;
    margin-bottom: 16px;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}
.product-detail-page--flat .product-detail-purchase-card > .product-detail-hero {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.product-detail-purchase-card > .product-detail-hero .product-detail-hero__media {
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
    overflow: hidden;
}
.product-detail-purchase-card > .product-detail-hero .product-detail-hero__media img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-detail-purchase-card > .product-detail-hero .product-detail-hero__media {
    container-type: inline-size;
}
.product-detail-purchase-card > .product-detail-hero .product-detail-hero__body {
    margin-top: 0;
}
.product-detail-purchase-card .product-detail-purchase-group {
    grid-template-columns: 1fr;
}

/* ─── 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: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.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: rgba(255, 255, 255, 0.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, #57b0ff);
}
.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, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.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, 0.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;
}
.epin-info-grid__select {
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 600;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}
@media (max-width: 575.98px) {
    .epin-info-grid__cell {
        flex-basis: 100%;
        min-width: 0;
    }
}

/* Single-price block (replaces dual buy/sell) */
.product-detail-view__price-single {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}
.product-detail-view__price-single .product-detail-view__price-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.product-detail-view__price-single .product-detail-view__price-value {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}
.discount-countdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(250, 200, 80, 0.2);
    border-radius: 14px;
    background:
        radial-gradient(80% 100% at 0% 0%, rgba(250, 200, 80, 0.11), transparent 58%),
        rgba(8, 11, 17, 0.42);
        display: none !important;
}
.discount-countdown__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.discount-countdown__label {
    color: #fac850;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}
.discount-countdown__text strong {
    color: #fff;
    font-size: 14px;
    line-height: 1.25;
}
.discount-countdown__clock {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.discount-countdown__unit {
    display: grid;
    gap: 5px;
    justify-items: center;
}
.discount-countdown__flip {
    position: relative;
    width: 54px;
    height: 48px;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #111722;
    color: #fde68a;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 10px 22px rgba(0, 0, 0, 0.28);
    perspective: 260px;
    perspective-origin: 50% 100%;
    transform-style: preserve-3d;
}
.discount-countdown__card,
.discount-countdown__leaf-face {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    backface-visibility: hidden;
    background: #111722;
}
.discount-countdown__card--top {
    top: 0;
    z-index: 1;
    align-items: flex-start;
    padding-top: 11px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.64);
    background: #151d2b;
    transform-origin: bottom center;
}
.discount-countdown__card--bottom {
    bottom: 0;
    z-index: 1;
    align-items: flex-end;
    padding-bottom: 11px;
    background: #0f141e;
    transform-origin: top center;
}
.discount-countdown__card--bottom.is-catching {
    animation: discountBottomCatch 0.26s ease-out;
}
.discount-countdown__leaf {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    z-index: 3;
    height: 50%;
    overflow: visible;
    transform-origin: 50% 100% -2px;
    transform: rotateX(0deg) translate3d(0, 0, 2px);
    transform-style: preserve-3d;
    will-change: transform, filter;
}
.discount-countdown__leaf-face {
    inset: 0;
    height: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.64);
    background: #151d2b;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
}
.discount-countdown__leaf-face--front {
    align-items: flex-start;
    padding-top: 11px;
    transform: translateZ(1px);
}
.discount-countdown__leaf-face--back {
    align-items: flex-end;
    padding-bottom: 11px;
    background: #101722;
    transform: rotateX(-180deg) translateZ(1px);
}
.discount-countdown__flip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 4;
    top: 50%;
    height: 1px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 1px rgba(255, 255, 255, 0.08);
}
.discount-countdown__flip.is-flipping .discount-countdown__leaf {
    animation: discountLeafDrop 0.58s cubic-bezier(0.22, 0.72, 0.18, 1);
}
.discount-countdown__unit small {
    color: rgba(219, 232, 255, 0.55);
    font-size: 10px;
    font-weight: 700;
}
.discount-countdown__separator {
    align-self: flex-start;
    color: #fac850;
    font-size: 26px;
    font-weight: 900;
    line-height: 48px;
}
.discount-countdown.is-expired .discount-countdown__label,
.discount-countdown.is-expired .discount-countdown__separator,
.discount-countdown.is-expired .discount-countdown__flip {
    color: rgba(219, 232, 255, 0.5);
}
@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);
    }
}
@media (max-width: 575.98px) {
    .discount-countdown {
        align-items: stretch;
        flex-direction: column;
    }
    .discount-countdown__clock {
        justify-content: space-between;
    }
}
.product-detail-option, .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:rgba(255,255,255,0.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);
}
.product-detail-option:hover, .cash-card:hover { border-color:rgba(var(--main--color),0.3); background:rgba(var(--main--color),0.05); }
.product-detail-option.active, .cash-card.active {
    border-color:var(--c-primary); background:rgba(var(--main--color),0.1);
    box-shadow:none;
}
.product-detail-option.active::after, .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;
}
.product-detail-option__icon, .cash-card__icon { font-size:28px; color:rgb(var(--main--color)); opacity:.7; }
.product-detail-option__icon img {
    width:48px;
    height:48px;
    object-fit:contain;
    display:block;
}
.product-detail-option.active .product-detail-option__icon, .cash-card.active .cash-card__icon { opacity:1; }
.product-detail-option__name, .cash-card__name { font-size:13px; font-weight:600; color:#c8d6e5; line-height:1.3; }
.product-detail-option__price, .cash-card__price { font-size:16px; font-weight:800; color:#fff; }
.product-detail-option__price small, .cash-card__price small { font-size:12px; font-weight:600; color:#8ba3c7; }

.product-detail-page--ko-dynamic .product-detail-hero__badge,
.product-detail-page--ko-dynamic .product-detail-badge {
    background: rgba(var(--product-accent-rgb), 0.11);
    color: rgb(var(--product-accent-rgb));
    border-color: rgba(var(--product-accent-rgb), 0.18);
}

.product-detail-page--ko-dynamic .product-detail-option {
    background:
        radial-gradient(105% 120% at 50% -18%, rgba(var(--product-accent-rgb), 0.08), transparent 58%),
        rgba(255,255,255,0.03);
}

.product-detail-page--ko-dynamic .product-detail-option:hover {
    border-color: rgba(var(--product-accent-rgb), 0.34);
    background:
        radial-gradient(105% 120% at 50% -18%, rgba(var(--product-accent-rgb), 0.14), transparent 62%),
        rgba(var(--product-accent-rgb), 0.045);
}

.product-detail-page--ko-dynamic .product-detail-option.active {
    border-color: rgba(var(--product-accent-rgb), 0.72);
    background:
        radial-gradient(120% 126% at 50% -22%, rgba(var(--product-accent-rgb), 0.20), transparent 64%),
        rgba(var(--product-accent-rgb), 0.085);
    box-shadow: 0 12px 32px rgba(var(--product-accent-rgb), 0.12);
}

.product-detail-page--ko-dynamic .product-detail-option.active::after {
    background: rgb(var(--product-accent-rgb));
    color: #071018;
}

.product-detail-page--ko-dynamic .product-detail-option__icon {
    color: rgb(var(--product-accent-rgb));
}

/* Selection Notice */
.product-detail-notice, .cash-notice {
    display:flex; align-items:center; gap:8px; padding:12px 16px;
    border-radius:8px; font-size:13px; color:#8ba3c7;
    background:rgba(255,255,255,0.03); border:1px dashed rgba(255,255,255,0.1);
    margin-bottom:16px;
}
.product-detail-purchase-card .product-detail-notice {
    background: rgba(var(--product-accent-rgb), 0.055);
    border-color: rgba(var(--product-accent-rgb), 0.18);
    margin-bottom: 14px;
}
.product-detail-notice i, .product-detail-notice .material-symbols-outlined,
.cash-notice i, .cash-notice .material-symbols-outlined { color:rgb(var(--main--color)); }
.product-detail-page--ko-dynamic .product-detail-notice .material-symbols-outlined {
    color: rgb(var(--product-accent-rgb));
}

/* Product purchase primitives */
.product-detail-side {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.product-detail-title { color:#fff; font-weight:800; line-height:1.3; }
.product-detail-checkout { display:flex; align-items:center; gap:14px; }

/* Checkout Bar */
.product-detail-checkout, .cash-checkout {
    position:relative;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    border-radius:12px;
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.cash-checkout {
    padding:20px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
}
.product-detail-purchase-card .product-detail-checkout {
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.cash-checkout::before {
    content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 40%);
}
.product-detail-checkout__qty, .cash-checkout__qty, .product-detail-qty { display:flex; align-items:center; }
.product-detail-checkout__qty .btn-group-o, .cash-checkout__qty .btn-group-o { border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,0.1); }
.product-detail-checkout__qty .btn-group-o .btn-o, .cash-checkout__qty .btn-group-o .btn-o {
    width:40px; height:40px;
    background:var(--c-surface); color:var(--c-text);
}
.product-detail-checkout__qty .btn-group-o .btn-o:hover, .cash-checkout__qty .btn-group-o .btn-o:hover { background:var(--c-surface-hover); }
.product-detail-checkout__total-wrap, .cash-checkout__total-wrap, .product-detail-total-wrap { display:flex; flex-direction:column; gap:2px; }
.product-detail-checkout__total-label, .cash-checkout__total-label, .product-detail-total-label { font-size:11px; font-weight:600; color:#8ba3c7; text-transform:uppercase; letter-spacing:.5px; }
.product-detail-checkout__total-price, .cash-checkout__total-price, .product-detail-total-price { font-size:22px; font-weight:800; color:#fff; }
.product-detail-checkout__actions, .cash-checkout__actions, .product-detail-actions { display:flex; gap:10px; margin-left:auto; }
.product-detail-checkout__btn, .cash-checkout__btn, .product-detail-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:12px 24px; border-radius:var(--r-md); font-size:14px; font-weight:600;
    border:none; cursor:pointer; transition:all var(--tr-btn); white-space:nowrap;
}
.product-detail-checkout__btn--cart, .cash-checkout__btn--cart {
    background:rgba(87,176,255,0.12); color:var(--c-primary);
    border:1.5px solid var(--c-primary);
}
.product-detail-checkout__btn--cart:hover, .cash-checkout__btn--cart:hover { background:rgba(87,176,255,0.20); }
.product-detail-checkout__btn--buy, .cash-checkout__btn--buy {
    background:var(--c-primary); color:#0a0f18;
}
.product-detail-checkout__btn--buy:hover, .cash-checkout__btn--buy:hover { background:var(--c-primary-hover); box-shadow:none; filter:none; }

@media (max-width:767.98px) {
    .product-detail-options, .cash-grid { grid-template-columns:repeat(2,1fr); }
    .product-detail-checkout, .cash-checkout { flex-direction:column; align-items:stretch; text-align:center; }
    .product-detail-checkout__actions, .cash-checkout__actions, .product-detail-actions { margin-left:0; justify-content:center; }
    .product-detail-checkout__qty, .cash-checkout__qty, .product-detail-qty { justify-content:center; }
    .product-detail-checkout__total-wrap, .cash-checkout__total-wrap, .product-detail-total-wrap { align-items:center; }
    .product-detail-nav, .cash-cat-nav { flex-wrap:wrap; }
}
.char-card__stats { display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:#8ba3c7; }
.char-card__stats span { display:flex; align-items:center; gap:4px; }
.char-card__price { font-size:18px; font-weight:700; color:rgb(var(--main--color)); margin-top:8px; }
.char-card__foot { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }

/* =============================================
   STREAMER PAGES
   ============================================= */
.streamers-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:48px; }
.streamer-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:12px; overflow:hidden; transition:border-color .2s,transform .2s; text-decoration:none; display:block; }
.streamer-card:hover { border-color:rgba(var(--main--color),0.4); transform:translateY(-3px); }
.streamer-card__banner { width:100%; height:90px; object-fit:cover; background:linear-gradient(135deg,#1a2035 0%,#0e1014 100%); display:flex; align-items:center; justify-content:center; font-size:32px; color:rgba(var(--main--color),.3); }
.streamer-card__body { padding:0 14px 14px; }
.streamer-card__avatar-wrap { margin-top:-24px; margin-bottom:8px; display:flex; align-items:flex-end; justify-content:space-between; }
.streamer-card__avatar { width:48px; height:48px; border-radius:50%; border:3px solid #0e1014; background:rgba(var(--main--color),0.15); display:flex; align-items:center; justify-content:center; font-size:20px; color:rgb(var(--main--color)); overflow:hidden; }
.streamer-card__live { display:inline-flex; align-items:center; gap:4px; font-size:10px; background:rgba(229,57,53,.2); color:#ef5350; border-radius:20px; padding:3px 9px; font-weight:700; }
.streamer-card__live::before { content:''; width:5px; height:5px; background:#ef5350; border-radius:50%; display:inline-block; animation:pulse-dot 1.2s ease-in-out infinite; }
.streamer-card__name { font-size:15px; font-weight:700; color:#fff; margin-bottom:2px; }
.streamer-card__game { font-size:12px; color:#8ba3c7; margin-bottom:10px; }
.streamer-card__stats { display:flex; gap:14px; font-size:12px; color:#8ba3c7; }
.streamer-card__stats strong { color:#cfe8ff; display:block; font-size:13px; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
.streamer-detail { display:flex; gap:32px; padding-bottom:48px; }
.streamer-detail__sidebar { flex: 0 0 280px; }
.streamer-detail__content { flex:1; }
.streamer-profile-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:12px; overflow:hidden; margin-bottom:16px; }
.streamer-profile-banner { width:100%; height:110px; background:linear-gradient(135deg,#1a2540 0%,#0e1320 100%); display:flex; align-items:center; justify-content:center; font-size:48px; color:rgba(var(--main--color),.25); }
.streamer-profile-card__body { padding:0 20px 20px; }
.streamer-profile-card__avatar-wrap { margin-top:-28px; margin-bottom:12px; display:flex; align-items:flex-end; justify-content:space-between; }
.streamer-profile-card__avatar { width:56px; height:56px; border-radius:50%; border:3px solid #0e1014; background:rgba(var(--main--color),0.15); display:flex; align-items:center; justify-content:center; font-size:26px; color:rgb(var(--main--color)); }
.streamer-profile-card__name { font-size:18px; font-weight:800; color:#fff; margin-bottom:4px; }
.streamer-profile-card__tag { font-size:12px; color:#8ba3c7; margin-bottom:12px; }
.streamer-profile-card__desc { font-size:13px; color:#8ba3c7; margin-bottom:16px; line-height:1.6; }
.streamer-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.streamer-stat { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:8px; padding:10px; text-align:center; }
.streamer-stat__val { font-size:17px; font-weight:700; color:rgb(var(--main--color)); }
.streamer-stat__label { font-size:11px; color:#8ba3c7; margin-top:2px; }
.follow-btn { width:100%; padding:10px; background:rgb(var(--main--color)); border:none; color:#fff; font-size:13px; font-weight:700; border-radius:8px; cursor:pointer; }
.stream-schedule { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:10px; overflow:hidden; }
.stream-schedule__header { padding:12px 18px; border-bottom:1px solid rgba(255,255,255,0.07); font-size:13px; font-weight:700; color:#fff; }
.stream-schedule__item { display:flex; align-items:center; justify-content:space-between; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,0.04); font-size:13px; }
.stream-schedule__item:last-child { border-bottom:none; }
.stream-schedule__day { color:#8ba3c7; min-width:90px; }
.stream-schedule__time { color:#cfe8ff; font-weight:600; }
.stream-schedule__online { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:#81c784; }

/* =============================================
   RESPONSIVE OVERRIDES - NEW PAGES
   ============================================= */
@media (max-width:991.98px) {
    .catalog-layout,.marketplace-layout { flex-direction:column; }
    .catalog-sidebar { flex:none; width:100%; }
    .product-detail { flex-direction:column; }
    .product-detail__gallery { flex:none; }
    .streamers-grid { grid-template-columns:repeat(2,1fr); }
    .streamer-detail { flex-direction:column; }
    .streamer-detail__sidebar { flex:none; width:100%; }
    .product-options { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:575.98px) {
    .streamers-grid { grid-template-columns:1fr 1fr; }
    .product-options { grid-template-columns:repeat(2,1fr); }
}

/* ═══════════════════════════════════════════════════════════
   SHARED PAGE BREADCRUMB
   ═══════════════════════════════════════════════════════════ */
.page-breadcrumb {
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 12px 0;
}
.page-breadcrumb ol { font-size:13px; color:rgba(219,232,255,.5); }
.page-breadcrumb ol li+li::before {
    content:'\276F'; margin-right:6px; font-size:10px; opacity:.5;
}
.page-breadcrumb ol li a { color:rgba(219,232,255,.6); text-decoration:none; transition:color .2s; }
.page-breadcrumb ol li a:hover { color:#dbe8ff; }
.page-breadcrumb ol li.active {
	color: #57b0ff;
	font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════
   KNIGHT ONLINE — CATEGORY PAGE
   ═══════════════════════════════════════════════════════════ */
.game-side {
    display:flex;
    flex-direction:column;
    height:100%;
    background:linear-gradient(160deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 100%);
    border:1px solid rgba(255,255,255,.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;
}

/* 3D mavi başlık (#57b0ff temalı) — yığılı text-shadow tekniği
   Container .game-side__img-wrap'a göre absolute konumlanır, arka plan transparandır. */
.game-side__title-3d {
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    z-index: 3;                 /* hero image (1) ve logo (2) üstünde */
    margin: 0;
    padding: 0 8px;
    pointer-events: none;
    text-align: center;
    font-family: "Inter", "Arial Black", "Segoe UI", sans-serif;
    font-weight: 900;
    font-size: clamp(28px, 3.2vw, 46px);
    line-height: .95;
    letter-spacing: .02em;
    color: #dbeeff;             /* ön yüz: açık mavi-beyaz */
    text-transform: uppercase;
    /* 8 katmanlı stacked text-shadow: #57b0ff'ten koyu laciverte iniş + yumuşak gölge */
    text-shadow:
        0 1px 0  #57b0ff,
        0 2px 0  #4ea4ee,
        0 3px 0  #4598dd,
        0 4px 0  #3c8ccc,
        0 5px 0  #3380bb,
        0 6px 0  #2a74aa,
        0 7px 0  #216899,
        0 8px 0  #185c88,
        0 9px 6px  rgba(8, 32, 64, .55),
        0 11px 12px rgba(8, 32, 64, .35),
        0 14px 18px rgba(8, 32, 64, .22);
}
.game-side__title-3d span {
    display: block;
}

.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;
	top: 16px;
	left: 50%;
	transform: translateX(-50%) translateY(300%);
	z-index: 2;
	height: 67px;
	object-fit: contain;
	filter: drop-shadow(0px 10px 8px #000) !important;
    display: none;
}
.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:rgba(255,255,255,.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:#f87171; }
.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:rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#dbe8ff; }
.game-side__stats {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.5rem;
}
.game-side__stat {
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.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:rgba(255,255,255,.04); padding:4px 12px; border-radius:20px;
}

/* ── Category Card ── */
.game-category-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:1rem;
}
.game-category-card {
	--game-category-card-bg-start: #111827;
	--game-category-card-bg-end: #111827;
	--game-category-card-accent-rgb: 255,255,255;
	--game-category-card-title: #fff;
	--game-category-card-shadow-rgb: 0,0,0;
	--game-category-card-shadow-opacity: .5;
	--game-category-card-hover-border-opacity: .22;
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none !important;
	border: 1px solid rgba(var(--game-category-card-accent-rgb),.15);
	background: #15171e;
	transition: transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.game-category-card:hover {
    transform:translateY(-3px);
    border-color:rgba(var(--game-category-card-accent-rgb),var(--game-category-card-hover-border-opacity));
    box-shadow:0 20px 50px rgba(var(--game-category-card-shadow-rgb),var(--game-category-card-shadow-opacity));
}
.game-category-card__cover {
    position:relative;
    overflow:hidden;
    height:auto;
}
.game-category-card__cover img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.game-category-card:hover .game-category-card__cover img { transform:scale(1.06); }
.game-category-card__body {
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    flex-grow:1;
    padding:1rem;
}
.game-category-card__title {
    margin:0 0 .5rem;
    font-size:24px; font-weight:800; color:var(--game-category-card-title); line-height:1.2;
}
.game-category-card__desc {
    margin:0 0 1rem;
    font-size:13.5px; color:rgba(219,232,255,.6); line-height:1.65;
}
.game-category-card__cta {
    display:inline-flex; align-items:center; gap:.5rem;
    margin-top:auto;
    font-size:13px; font-weight:600; padding:9px 20px; border-radius:var(--r-md);
    transition:all var(--tr-btn); width:fit-content; text-decoration:none;
    background:rgba(var(--game-category-card-accent-rgb),.12);
    border:1.5px solid rgba(var(--game-category-card-accent-rgb),.4);
    color:var(--game-category-card-title);
}
.game-category-card__cta:hover { transform:translateX(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-card { flex-direction:column; min-height:unset; }
    .game-category-card__cover { flex:none; height:180px; }
    .game-category-card__cover::after { background:linear-gradient(180deg,transparent 60%,var(--game-category-card-bg-start) 100%); }
    .game-category-card__body { padding:20px 20px 24px; }
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT LIST PURCHASE PAGE
   ═══════════════════════════════════════════════════════════ */
.product-list-side {
    display:flex;
    flex-direction:column;
    background: rgba(24,27,33,.65);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    overflow:hidden;
}
.product-list-side__img-wrap {
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
    background:linear-gradient(180deg,rgba(18,23,32,.6) 0%,rgba(10,14,20,.8) 100%);
}

.product-list-side__img-wrap img {
    position:relative;
    z-index:1;
    width:100%;
    height:auto;
    filter:drop-shadow(0 20px 40px rgba(0,0,0,.6));
    transition:transform .4s ease;
}
.product-list-side__cover-title {
	left: 22px;
	bottom: 56px;
	font-size: clamp(38px, 4.3vw, 70px);
}

.product-list-side__body { padding:1.25rem 1.5rem 1.5rem; }
.product-list-side__title {
    display:flex; align-items:center; gap:.4rem;
    margin:0 0 .5rem;
    font-size:20px; font-weight:800; color:#fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.72);
}
.product-list-side__desc {
    margin:0 0 1rem;
    font-size:13px; color:rgba(219,232,255,.6); line-height:1.7;
    text-shadow: 0 2px 10px rgba(0,0,0,.64);
}
.product-list-side__badges {
    display:flex; flex-wrap:wrap; gap:.5rem;
    margin-bottom:1rem;
}
.product-list-side__badge {
    display:inline-flex; align-items:center; gap:.35rem;
    font-size:12px; font-weight:600; padding:6px 12px; border-radius:8px;
    border:1px solid rgba(255,255,255,.08); background:rgba(24,27,33,.55); color:rgba(219,232,255,.85);
}
.product-list-side__badge .material-symbols-outlined { font-size:16px; color: var(--c-primary); }
.product-list-side__back.btn-o--outline-light {
    background: rgba(13,17,23,.46);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    backdrop-filter: blur(12px) saturate(1.3);
    box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.product-list-side__back.btn-o--outline-light:hover {
    background: rgba(20,25,34,.62);
}
.product-list-side__back .material-symbols-outlined { font-size:16px; }

/* Trust card moved below body on product-list (page-scoped override) */
.product-list-side .pd-hero-card__image-wrap {
    aspect-ratio: 4/5;
    margin-bottom: -300px;
}

.product-list-side .pd-hero-card__logo {
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 2;
    width: min(68%, 180px);
    max-height: 84px;
    object-fit: contain;
    pointer-events: none;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.58));
}
.product-list-side__body {
    position: relative;
    z-index: 2;
}
.product-list-side__trust.pd-trust-card--overlay {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 2;
    margin: 0 12px 12px;
}

@media (min-width:992px) {
    .product-list-side { position:sticky; top:24px; }
}

/* Server filter */
.product-filter-btn {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Product Row */
.product-row {
	display: flex;
    flex-direction: column;
	align-items: stretch;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 14px;
	transition: all .25s ease;
	background: rgba(24,27,33,.65);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	padding: 10px 20px;
}
.product-row:hover {
    border-color:rgba(87, 176, 255, 0.39);

    transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,0,0,.3);
}
.product-row__content {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
}
.product-row__main {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    flex:1 1 auto;
}
.product-row__actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex:0 0 auto;
    margin-left:auto;
}
.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, 0.1);
	border: 1px solid rgba(250,200,80,.2);
	overflow: hidden;
}
.product-row__icon img {
    width:100%; height:100%; object-fit:cover;
}
.product-row__icon--cash img,
.product-row__icon--goldbar img,
.product-row__icon--epin img {
    filter:saturate(1.08) contrast(1.04);
}
.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:8px;
    flex-wrap:wrap;
    font-size:12px; color:rgba(219,232,255,.45);
}
.product-row__meta i { font-size:11px; }
.product-row__seller-avatar {
    width:28px; height:28px; border-radius:50%;
    background:rgba(255,255,255,.08); font-size:12px; color:rgba(219,232,255,.6);
}
.product-row__seller-name { font-size:12px; font-weight:600; color:rgba(219,232,255,.7); }
.product-row__seller-rating { font-size:11px; color:#fac850; }
.product-row__price { font-size:18px; font-weight:800; color:#fde68a; }
.product-row__price small { font-size:12px; font-weight:500; color:rgba(219,232,255,.4); }

/* Trade Areas (Buy/Sell) */
.product-row__trade {
    position: relative;
    flex:0 0 116px;
    min-height: 116px;
    text-align:center;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 10px;
    display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:6px;
}
.product-row__trade--discounted {
    padding-top: 28px;
    gap: 4px;
}
.product-row__trade--buy {
    background: rgba(87,176,255,.06);
    border-color: rgba(87,176,255,.24);
}
.product-row__trade--sell {
    background: rgba(255,255,255,.02);
}
.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); }
.product-row__trade-unit { font-size:11px; color:var(--c-text-subtle); }
.product-row__total { margin-top:2px; font-size:18px; font-weight:800; color:var(--c-text); white-space:nowrap; }
.product-row__total small { font-size:11px; font-weight:500; color:var(--c-text-subtle); }
.product-row__discount {
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 1;
    display:inline-block;
    background:var(--c-danger);
    color:#fff;
    font-size:10px;
    font-weight:800;
    padding:2px 6px;
    border-radius:var(--r-sm);
    letter-spacing:.3px;
    transform: translateX(-50%);
    pointer-events: none;
}
.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;
    flex-shrink:0;
    margin:0 8px 0 0;
    position:relative;
    z-index:2;
}
/* Detail Page Qty Stepper */
.product-detail-view__order-qty .btn-group-o { background:rgba(0,0,0,.3); border-color:rgba(255,255,255,.1); border-radius:8px; }
.product-detail-view__order-qty .btn-group-o .btn-o {
    width:32px; height:32px; background:var(--c-surface);
    color:var(--c-text-muted); font-size:16px;
}
.product-detail-view__order-qty .btn-group-o .btn-o:hover { background:var(--c-surface-hover); color:var(--c-text); }
.product-detail-view__order-qty .btn-group-o__input { width:40px; height:32px; font-size:13px; }
.product-row-qty-label {
    font-size:13px; font-weight:600; color:rgba(255,255,255,.7); white-space:nowrap;
}

/* ═══ Detail Tabs ════════════════════════════════════════════ */
.detail-tabs {
    position: relative;
    background: rgba(24,27,33,.65);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px; overflow: hidden;
    padding: 18px
}

.detail-tabs__nav {
    list-style:none; margin:0; padding:0; display:flex;
    background:rgba(0,0,0,.3); border-bottom:1px solid rgba(255,255,255,.06);
}
.detail-tabs__nav li { flex:1; }
.detail-tabs__btn {
    width:100%; padding:14px 16px; border:none; background:transparent;
    color:rgba(219,232,255,.5); font-size:14px; font-weight:600;
    cursor:pointer; transition:all .25s; display:flex; align-items:center;
    justify-content:center; gap:8px; position:relative;
}
.detail-tabs__btn:hover { color:rgba(219,232,255,.8); background:rgba(255,255,255,.03); }
.detail-tabs__btn.active {
    color:#fff; background:rgba(255,255,255,.04);
}
.detail-tabs__btn.active::after {
    content:''; position:absolute; bottom:0; left:20%; right:20%;
    height:2px; background:linear-gradient(90deg,#fac850,#e5a800); border-radius:2px 2px 0 0;
}
.detail-tabs__badge {
	font-size: 11px;
	font-weight: 700;
	background: rgba(87, 176, 255, 0.15);
	color: #57b0ff;
	padding: 2px 7px;
	border-radius: 10px;
}
.detail-tabs__panel {
    display:none; padding:16px;
}
.detail-tabs__panel.active { display:block; }
.detail-tabs__title {
    font-size:18px; font-weight:700; color:#fff; margin-bottom:12px;
}
.detail-tabs__subtitle {
    font-size:15px; font-weight:600; color:rgba(255,255,255,.85);
    margin-top:20px; margin-bottom:10px;
}
.detail-tabs__panel p {
    font-size:14px; color:rgba(219,232,255,.7); line-height:1.7;
}
.detail-tabs__list {
    padding-left:20px; margin:0;
}
.detail-tabs__list li {
    font-size:14px; color:rgba(219,232,255,.7); line-height:1.7;
    padding:3px 0;
}
.detail-tabs__list li i { margin-right:6px; }
.detail-tabs__note {
    margin-top:20px; padding:14px 18px; border-radius:10px;
    background:rgba(250,200,80,.08); border:1px solid rgba(250,200,80,.15);
    display:flex; align-items:flex-start; gap:10px;
    font-size:13px; color:rgba(250,200,80,.9); line-height:1.6;
}
.detail-tabs__note i { font-size:16px; flex-shrink:0; margin-top:2px; }

/* 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 rgba(255,255,255,.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: rgba(255,255,255,.07);
    color: #fac850;
    font-size: 20px;
}
.detail-tabs__review-state--login .detail-tabs__review-state-icon { color: #57b0ff; }
.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 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.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:rgba(255,255,255,.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 rgba(255,255,255,.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;
}
.product-detail-page--epin-detail .product-detail-view__starfill {
    width:94%;
}
.product-detail-page--epin-detail .product-detail-view__starfill--100 {
    width:100%;
}
.product-detail-page--epin-detail .product-detail-view__starfill--92 {
    width:92%;
}
.product-detail-page--epin-detail .product-detail-view__starfill--80 {
    width:80%;
}
: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:rgba(255,255,255,.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__comments {
    display:flex;
    flex-direction:column;
    gap:10px;
}
:is(.product-detail-page--epin-detail, .product-detail-page--flat) .detail-tabs__comment {
    padding:14px 16px;
    border:1px solid rgba(255,255,255,.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 {
        flex-direction: column;
        align-items: stretch;
    }
    .detail-tabs__review-state > .btn-o,
    .detail-tabs__review-form-footer .btn-o {
        width: 100%;
        justify-content: center;
    }
    .detail-tabs__review-form-footer {
        flex-direction: column;
        align-items: stretch;
    }
    :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;
    }
}

/* Comments — yeni review-card tasarımı (review-card sınıfları aşağıda) */
.detail-comment {
    padding:16px 0; border-bottom:1px solid rgba(255,255,255,.06);
}
.detail-comment:last-child { border-bottom:none; }
.detail-comment__avatar {
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.08); display:flex;
    align-items:center; justify-content:center;
    color:rgba(219,232,255,.5); font-size:16px;
}
.detail-comment__name { color:#fff; font-size:14px; }
.detail-comment__stars { color:#fac850; font-size:11px; }
.detail-comment__date { color:rgba(219,232,255,.35); font-size:12px; }
.detail-comment__text {
    margin:10px 0 0; font-size:14px; color:rgba(219,232,255,.7); line-height:1.6;
}

/* ── Review Card (yeni yorum tasarımı) ── */
.review-list {
    display:flex; flex-direction:column; gap:12px;
}
.review-card {
    position:relative;
    display:flex; gap:14px;
    padding:16px;
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border:1px solid rgba(255,255,255,.06);
    border-radius:14px;
    transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.review-card:hover {
    border-color:rgba(250,200,80,.25);
    background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
}
.review-card__avatar {
    flex-shrink:0;
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#0a0f18; font-weight:800; font-size:16px;
    background:linear-gradient(135deg,#57b0ff,#3a76b8);
    box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.review-card__body { flex:1; min-width:0; }
.review-card__head {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:10px; margin-bottom:6px;
}
.review-card__user {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.review-card__name {
    color:#fff; font-size:14px; font-weight:700;
}
.review-card__badge {
    display:inline-flex; align-items:center; gap:4px;
    padding:2px 8px; border-radius:999px;
    background:rgba(40,200,120,.12);
    border:1px solid rgba(40,200,120,.25);
    color:#5ee3a1; font-size:11px; font-weight:500;
}
.review-card__badge .material-symbols-outlined { font-size:13px; }
.review-card__date {
    color:rgba(219,232,255,.4); font-size:12px;
    white-space:nowrap;
}
.review-card__rating {
    display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.review-card__score {
    padding:2px 8px; border-radius:6px;
    background:rgba(250,200,80,.12);
    color:#fac850; font-size:12px; font-weight:700;
}
.review-card__text {
    margin:0; color:rgba(219,232,255,.78);
    font-size:13.5px; line-height:1.65;
    word-break:break-word;
}
.review-card__foot {
    display:flex; align-items:center; gap:6px; margin-top:10px;
    padding-top:10px; border-top:1px dashed rgba(255,255,255,.06);
}
.review-card__action {
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 10px; border-radius:8px;
    background:transparent; border:1px solid transparent;
    color:rgba(219,232,255,.5); font-size:12px; font-weight:500;
    cursor:pointer; transition:color .15s, background .15s, border-color .15s;
}
.review-card__action:hover {
    color:#fff;
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.08);
}
.review-card__action .material-symbols-outlined { font-size:14px; }
.review-card__action-count {
    color:#fac850; font-weight:700;
}
.review-list__footer {
    margin-top:14px; display:flex; justify-content:center;
}
.review-list__more {
    width:auto; min-width:220px;
}

@media (max-width: 575.98px) {
    .review-card { padding:14px; gap:10px; }
    .review-card__avatar { width:38px; height:38px; font-size:14px; }
    .review-card__head { flex-direction:column; gap:4px; }
    .review-card__date { font-size:11px; }
}

/* Textarea */
.detail-tabs__textarea-label {
    display:block; font-size:13px; font-weight:600;
    color:rgba(255,255,255,.7); margin-bottom:8px;
}
.detail-tabs__textarea {
    width:100%; padding:14px 16px; border-radius:10px;
    border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.3);
    color:#fff; font-size:14px; resize:vertical; min-height:100px;
    outline:none; transition:border-color .2s;
}
.detail-tabs__textarea::placeholder { color:rgba(219,232,255,.3); }
.detail-tabs__textarea:focus { border-color:rgba(250,200,80,.4); }

/* Action Buttons */
.product-row__action {
    white-space:nowrap; flex-shrink:0;
    width:100%;
    max-width:104px;
    margin:2px auto 0;
}

/* ═══ Sell Panel (Satışa Çıkar Detay) ═══ */
.product-sell-panel {
    display: none;
    margin-top: 14px;
    padding: 18px 20px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    animation: gbSellSlide .25s ease;
}
.product-sell-panel.open { display: block; }
@keyframes gbSellSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.product-sell-panel__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.product-sell-panel__title {
    font-size: 15px; font-weight: 700; color: #fff; margin: 0;
}
.product-sell-panel__close {
    flex-shrink: 0;
}
.product-sell-panel__close .material-symbols-outlined { font-size: 18px; }
.product-sell-panel__alert {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 8px; margin-bottom: 6px;
    background: rgba(87,176,255,.08);
    border: 1px solid rgba(87,176,255,.18);
    font-size: 12px; color: rgba(219,232,255,.55); line-height: 1.5;
}
.product-sell-panel__alert .material-symbols-outlined {
    font-size: 16px; color: var(--c-primary); flex-shrink: 0;
}
.product-sell-panel__field {
    margin: 14px 0 10px;
}
.product-sell-panel__label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--c-text-muted); margin-bottom: 6px;
}
.product-sell-panel__input {
    width: 100%; padding: 10px 14px; border-radius: 8px;
    border: 1px solid var(--c-border); background: rgba(0,0,0,.22);
    color: var(--c-text); font-size: 13px; outline: none; transition: border-color .2s;
}
.product-sell-panel__input::placeholder { color: rgba(219,232,255,.25); }
.product-sell-panel__input:focus { border-color: rgba(87,176,255,.45); }
.product-sell-panel__delivery {
    font-size: 12px; color: rgba(219,232,255,.45); margin: 10px 0 14px;
}
.product-sell-panel__delivery strong { color: rgba(219,232,255,.75); }
.product-sell-panel__location {
    width: 100%; height: 120px; border-radius: 8px; overflow: hidden;
    margin-bottom: 12px; border: 1px solid rgba(255,255,255,.06);
}
.product-sell-panel__location img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: brightness(.8);
}
.product-sell-panel__divider {
    height: 1px; background: var(--c-border); margin: 0 0 14px;
}
.product-sell-panel__product-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-radius: 8px;
    background: rgba(255,255,255,.03); border: 1px solid var(--c-border);
    margin-bottom: 14px;
}
.product-sell-panel__product-left {
    display: flex; align-items: center; gap: 10px;
}
.product-sell-panel__product-img {
    width: 40px; height: 40px; border-radius: 6px; overflow: hidden;
    background: rgba(87,176,255,.08); border: 1px solid rgba(255,255,255,.1);
    flex-shrink: 0;
}
.product-sell-panel__product-img img {
    width: 100%; height: 100%; object-fit: cover;
}
.product-sell-panel__product-name {
    font-size: 13px; font-weight: 600; color: #fff;
}
.product-sell-panel__product-qty {
    font-size: 11px; color: rgba(219,232,255,.4); margin-top: 1px;
}
.product-sell-panel__product-price {
    font-size: 16px; font-weight: 800; color: var(--c-primary); white-space: nowrap;
}
.product-sell-panel__terms {
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
}
.product-sell-panel__terms label {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--c-text-muted); cursor: pointer;
}
.product-sell-panel__terms input[type="checkbox"] {
    width: 16px; height: 16px; border-radius: 3px;
    border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.3);
    cursor: pointer; flex-shrink: 0;
    accent-color: var(--c-primary);
}
.product-sell-panel__terms a {
    color: var(--c-primary); text-decoration: none;
}
.product-sell-panel__terms a:hover { text-decoration: underline; }
.product-sell-panel__footer {
    display: flex; align-items: center; justify-content: flex-end;
}
.product-sell-panel__submit {
    min-width: 246px;
}
.product-sell-panel__submit .material-symbols-outlined { font-size: 18px; }

/* ═══ Buy Panel (Satın Al Detay) ═══ */
.product-buy-panel {
    display: none;
    margin-top: 14px;
    padding: 18px 20px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    animation: gbBuySlide .25s ease;
}
.product-buy-panel.open { display: block; }
@keyframes gbBuySlide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.product-buy-panel__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.product-buy-panel__title {
    font-size: 15px; font-weight: 700; color: #fff; margin: 0;
}
.product-buy-panel__close {
    flex-shrink: 0;
}
.product-buy-panel__close .material-symbols-outlined { font-size: 18px; }
.product-buy-panel__alert {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 8px; margin-bottom: 6px;
    background: rgba(87,176,255,.08);
    border: 1px solid rgba(87,176,255,.18);
    font-size: 12px; color: rgba(219,232,255,.55); line-height: 1.5;
}
.product-buy-panel__alert .material-symbols-outlined {
    font-size: 16px; color: var(--c-primary); flex-shrink: 0;
}
.product-buy-panel__field {
    margin: 14px 0 10px;
}
.product-buy-panel__label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--c-text-muted); margin-bottom: 6px;
}
.product-buy-panel__input {
    width: 100%; padding: 10px 14px; border-radius: 8px;
    border: 1px solid var(--c-border); background: rgba(0,0,0,.22);
    color: var(--c-text); font-size: 13px; outline: none; transition: border-color .2s;
}
.product-buy-panel__input::placeholder { color: rgba(219,232,255,.25); }
.product-buy-panel__input:focus { border-color: rgba(87,176,255,.45); }
.product-buy-panel__delivery {
    font-size: 12px; color: rgba(219,232,255,.45); margin: 10px 0 14px;
}
.product-buy-panel__delivery strong { color: rgba(219,232,255,.75); }
.product-buy-panel__location {
    width: 100%; height: 120px; border-radius: 8px; overflow: hidden;
    margin-bottom: 12px; border: 1px solid rgba(255,255,255,.06);
}
.product-buy-panel__location img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: brightness(.8);
}
.product-buy-panel__divider {
    height: 1px; background: var(--c-border); margin: 0 0 14px;
}
.product-buy-panel__product-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-radius: 8px;
    background: rgba(255,255,255,.03); border: 1px solid var(--c-border);
    margin-bottom: 14px;
}
.product-buy-panel__product-left {
    display: flex; align-items: center; gap: 10px;
}
.product-buy-panel__product-img {
    width: 40px; height: 40px; border-radius: 6px; overflow: hidden;
    background: rgba(87,176,255,.08); border: 1px solid rgba(87,176,255,.18);
    flex-shrink: 0;
}
.product-buy-panel__product-img img {
    width: 100%; height: 100%; object-fit: cover;
}
.product-buy-panel__product-name {
    font-size: 13px; font-weight: 600; color: #fff;
}
.product-buy-panel__product-qty {
    font-size: 11px; color: rgba(219,232,255,.4); margin-top: 1px;
}
.product-buy-panel__product-price {
    font-size: 16px; font-weight: 800; color: var(--c-primary); white-space: nowrap;
}
.product-buy-panel__terms {
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
}
.product-buy-panel__terms label {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--c-text-muted); cursor: pointer;
}
.product-buy-panel__terms input[type="checkbox"] {
    width: 16px; height: 16px; border-radius: 3px;
    border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.3);
    cursor: pointer; flex-shrink: 0;
    accent-color: var(--c-primary);
}
.product-buy-panel__terms a {
    color: var(--c-primary); text-decoration: none;
}
.product-buy-panel__terms a:hover { text-decoration: underline; }
.product-buy-panel__footer {
    display: flex; align-items: center; justify-content: flex-end;
}
.product-buy-panel__submit {
    min-width: 246px;
}
.product-buy-panel__submit .material-symbols-outlined,
.product-sell-panel__submit .material-symbols-outlined { font-size: 18px; }

.product-row__buy {
    font-size:12px; font-weight:700; color:#1a1300;
    background:linear-gradient(135deg,#fac850,#e5a800);
    border:none; border-radius:8px; padding:6px 14px; cursor:pointer; transition:all .2s; text-decoration:none;
}
.product-row__buy:hover { transform:translateY(-1px); box-shadow:0 4px 15px rgba(250,200,80,.3); color:#1a1300; }

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

/* Info Banner */
.product-info-banner {
    background:rgba(87, 176, 255, 0.06); border:1px solid rgba(250,200,80,.15); border-radius:14px;
}
.product-info-banner__icon { font-size:18px; color:#fac850; }
.product-info-banner__text { font-size:13px; color:rgba(219,232,255,.6); line-height:1.6; }
.product-info-banner__text strong { color:#fde68a; }

/* GB Product Card Link */
.product-row__name-link {
    color:inherit; text-decoration:none; transition:color .2s;
}


/* GB Responsive */
@media (max-width:991.98px) {
    .product-list-side { position:static; margin-bottom:32px; }
}
@media (max-width:767.98px) {
    .product-row { flex-wrap:wrap; }
    .product-row__content { flex-direction:column; align-items:stretch; }
    .product-row__main { width:100%; }
    .product-row__actions {
        width:100%;
        justify-content:flex-end;
        flex-wrap:wrap;
        margin-left:0;
    }
    .product-row__trade { flex:1 1 120px; }
    .product-row__seller { display:none; }
    .product-row__price-area { min-width:auto; }
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT DETAIL VIEW PAGE
   ═══════════════════════════════════════════════════════════ */

/* Left Panel */
.product-detail-view-left {
    position: relative;
    background: rgba(24,27,33,.65);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(250,200,80,.12);
    border-radius: 12px;
    overflow: hidden;
}
.product-detail-view-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(87, 176, 255, 0.06) 0%, transparent 40%);
    pointer-events: none;
    border-radius: inherit;
}
.product-detail-view__image-wrap {
    position:relative;

    display:flex; align-items:center; justify-content:center;
    padding:30px; min-height:220px;
    overflow:hidden;
    border-radius:12px 12px 0 0;
}

.product-detail-view__image {
    position:relative; z-index:1;
    max-width:220px; max-height:220px; width:100%;
    object-fit:contain; border-radius:14px;
    filter:drop-shadow(0 20px 40px rgba(0,0,0,.6));
    transition:transform .4s ease;
}
.product-detail-view__image-wrap:hover .product-detail-view__image {
    transform:scale(1.05);
}
.product-detail-view__logo {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(0,0,0,.35);
    padding: 4px;
    border: 1px solid rgba(255,255,255,.08);
    z-index: 2;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
.product-detail-view__header {
    padding:16px 16px 0;
}
.product-detail-view__title {
    font-size:18px; font-weight:800; color:#fff;
    margin-bottom:8px; line-height:1.3;
}
.product-detail-view__rating {
    display:flex; align-items:center; gap:10px;
    margin-bottom:10px;
}
.product-detail-view__rating .starmeter { font-size:14px; }
.product-detail-view__rating .starmeter .material-symbols-outlined { font-size:16px; letter-spacing:1px; }
.product-detail-view__rating .starmeter .str_fill .material-symbols-outlined { color:#fac850; }
.product-detail-view__rating-text {
    font-size:13px; color:rgba(219,232,255,.5);
}
.product-detail-view__delivery-note {
    font-size:13px; color:rgba(219,232,255,.55);
    line-height:1.6; margin-bottom:0;
    padding:10px 14px; border-radius:10px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
}
.product-detail-view__badges {
    display:flex; flex-wrap:wrap; gap:6px;
    padding:12px 16px;
}
.product-detail-view__fav-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:calc(100% - 32px); margin:0 16px 16px;
    padding:10px 16px; border-radius:var(--r-md);
    border:1.5px solid var(--c-border);
    background:transparent;
    color:var(--c-text-muted);
    font-size:13px; font-weight:600;
    cursor:pointer; transition:all var(--tr-btn);
}
.product-detail-view__fav-btn:hover {
    border-color:rgba(248,113,113,.4);
    background:rgba(248,113,113,.08);
    color:var(--c-danger);
}
.product-detail-view__fav-btn--active {
    border-color:rgba(248,113,113,.4);
    background:rgba(248,113,113,.12);
    color:var(--c-danger);
}

/* Right Panel */
.product-detail-view-right {
    position: relative;
    background: rgba(24,27,33,.65);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.product-detail-view-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, transparent 40%);
    pointer-events: none;
    border-radius: inherit;
}

/* Purchase Card (right column: price + qty + total + actions) */
.product-detail-view-purchase {
    position: relative;
    background: rgba(24,27,33,.65);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    top: 16px;
}
.product-detail-view-purchase::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, transparent 40%);
    pointer-events: none;
    border-radius: inherit;
}
.product-detail-view-purchase > * {
    position: relative;
    z-index: 1;
}
.product-detail-view-purchase .product-detail-view__order-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
.product-detail-view-purchase .product-detail-view__order-qty,
.product-detail-view-purchase .product-detail-view__order-total {
    justify-content: space-between;
    width: 100%;
}
.product-detail-view-purchase .product-detail-view__actions {
    flex-direction: column;
    margin-left: 0;
    width: 100%;
}
.product-detail-view-purchase .product-detail-view__btn {
    width: 100%;
}

/* ── Top Row: Prices + Character/Delivery ── */
.product-detail-view-top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: stretch;
}
.product-detail-view-top__fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Price Box */
.product-detail-view__price-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.product-detail-view__price-col {
    --product-detail-price-bg: rgba(87,176,255,0.06);
    --product-detail-price-border: rgba(250,200,80,.15);
    --product-detail-price-label: #fac850;
    --product-detail-price-value: #fde68a;
    padding: 12px 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 190px;
    background: var(--product-detail-price-bg);
    border: 1px solid var(--product-detail-price-border);
}
.product-detail-view__price-col--buy {
    --product-detail-price-bg: rgba(87,176,255,0.06);
    --product-detail-price-border: rgba(250,200,80,.15);
    --product-detail-price-label: #fac850;
    --product-detail-price-value: #fde68a;
}
.product-detail-view__price-col--sell {
    --product-detail-price-bg: rgba(99,179,237,.06);
    --product-detail-price-border: rgba(99,179,237,.15);
    --product-detail-price-label: #63b3ed;
    --product-detail-price-value: #90cdf4;
}
.product-detail-view__price-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}
.product-detail-view__price-col .product-detail-view__price-label { color: var(--product-detail-price-label); }
.product-detail-view__price-value {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}
.product-detail-view__price-col .product-detail-view__price-value { color: var(--product-detail-price-value); }

/* Character Name Field */
.product-detail-view__field {
    flex: 1;
}
.product-detail-view__field-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.5);
    margin-bottom: 6px;
    letter-spacing: .3px;
}
.product-detail-view__field-label i { color: #fac850; margin-right: 4px; }
.product-detail-view__field-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(0,0,0,.3);
    color: #fff;
    font-size: 13px;
    outline: none;
    transition: border-color .2s;
}
.product-detail-view__field-input::placeholder { color: rgba(219,232,255,.3); }
.product-detail-view__field-input:focus { border-color: rgba(250,200,80,.4); }

/* Delivery Box — inline */
.product-detail-view__delivery-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 8px;
    background: rgba(250,200,80,.04);
    border: 1px solid rgba(250,200,80,.10);
    font-size: 12px;
    color: rgba(219,232,255,.55);
}
.product-detail-view__delivery-box i { color: #fac850; font-size: 13px; flex-shrink: 0; }

/* ── Bottom Row: Qty + Total + Buttons ── */
.product-detail-view__order-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.product-detail-view__order-qty {
    display: flex;
    align-items: center;
    gap: 10px;
}
.product-detail-view__order-qty-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(219,232,255,.45);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.product-detail-view__order-total {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.product-detail-view__order-total-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(219,232,255,.4);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.product-detail-view__order-total-value {
    font-size: 22px;
    font-weight: 800;
    color: #fde68a;
    line-height: 1;
}

/* Action Buttons */
.product-detail-view__actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
}
.product-detail-view__btn {
    padding: 10px 20px;
    border-radius: var(--r-md);
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--tr-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.product-detail-view__btn--cart {
    color:var(--c-text-muted);
    background:var(--c-surface);
    border:1.5px solid var(--c-border);
}
.product-detail-view__btn--cart:hover {
    background:var(--c-surface-hover);
    border-color:var(--c-border-hover);
    color:var(--c-text);
    transform:none;
    box-shadow:none;
}
.product-detail-view__btn--buy {
    color:#1a1300;
    background:var(--c-gold);
}
.product-detail-view__btn--buy:hover {
    background:var(--c-gold-hover);
    transform:none;
    box-shadow:none;
}
.product-detail-view__btn--added {
    background:rgba(52,211,153,.12) !important;
    border-color:rgba(52,211,153,.3) !important;
    color:var(--c-success) !important;
}

/* Agreements */
.product-detail-view__agreements {
    display:flex; flex-direction:column; gap:10px;
}
.product-detail-view__agreement {
    font-size:12px; color:rgba(219,232,255,.5);
}
.product-detail-view__agreement-link {
    color:#fac850; text-decoration:underline;
    text-decoration-color:rgba(250,200,80,.3);
}
.product-detail-view__agreement-link:hover { color:#fde68a; text-decoration-color:#fde68a; }

/* Other Products List */
.product-detail-view__other-list,
.product-detail-view__other-products {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}
.product-detail-view__other-item {
    flex:1 1 calc(50% - 6px);
    min-width:260px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:12px;
    background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
    text-decoration:none;
    transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.product-detail-view__other-item:hover {
    border-color:rgba(250,200,80,.24);
    background:linear-gradient(180deg, rgba(250,200,80,.06), rgba(87,176,255,.035));
    transform:translateY(-1px);
}
.product-detail-view__other-icon {
    flex:0 0 54px;
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:1px solid rgba(250,200,80,.16);
    border-radius:10px;
    background:rgba(87,176,255,.08);
}
.product-detail-view__other-icon img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.product-detail-view__other-info {
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:5px;
}
.product-detail-view__other-name {
    color:#fff;
    font-size:13.5px;
    font-weight:700;
    line-height:1.35;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.product-detail-view__other-price {
    align-self:flex-start;
    padding:3px 8px;
    border:1px solid rgba(250,200,80,.14);
    border-radius:999px;
    background:rgba(250,200,80,.08);
    color:#fac850;
    font-size:12px;
    font-weight:800;
    line-height:1.25;
}
.product-detail-view__other-arrow {
    flex:0 0 34px;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.07);
    border-radius:10px;
    color:rgba(219,232,255,.45);
    background:rgba(255,255,255,.025);
    transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.product-detail-view__other-arrow .material-symbols-outlined {
    font-size:20px;
}
.product-detail-view__other-item:hover .product-detail-view__other-arrow {
    border-color:rgba(250,200,80,.2);
    background:rgba(250,200,80,.08);
    color:#fac850;
}
.product-detail-view__other-empty {
    width:100%;
    padding:14px 16px;
    border:1px dashed rgba(255,255,255,.1);
    border-radius:12px;
    color:rgba(219,232,255,.58);
    font-size:13px;
    text-align:center;
    background:rgba(255,255,255,.02);
}

/* Steps List */
.detail-tabs__list--steps li {
    padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,.04);
}
.detail-tabs__list--steps li:last-child { border-bottom:none; }
.detail-tabs__list--steps li strong { color:#fde68a; }

/* Product Detail View Responsive */
@media (max-width:991.98px) {
    .product-detail-view-left { position:static !important; margin-bottom:24px; }
}
@media (max-width:767.98px) {
    .detail-tabs__nav { overflow-x:auto; flex-wrap:nowrap; }
    .detail-tabs__nav::-webkit-scrollbar { display:none; }
    .detail-tabs__nav li { flex:0 0 auto; }
    .detail-tabs__btn { white-space:nowrap; font-size:12px; padding:12px 14px; }
}
@media (max-width:575.98px) {
    .product-detail-view-top { grid-template-columns: 1fr; }
    .product-detail-view__price-row { flex-direction: row; }
    .product-detail-view__price-col { min-width: 0; flex: 1; }
    .product-detail-view__order-row { justify-content: space-between; }
    .product-detail-view__actions { width: 100%; }
    .product-detail-view__btn { flex: 1; }
    .product-detail-view__order-total-value { font-size: 20px; }
    .product-detail-view__title { font-size:18px; }
    .product-detail-view__image-wrap { padding:24px; min-height:200px; }
    .product-detail-view__image { max-width:160px; max-height:160px; }
    .product-detail-view__header { padding:16px 16px 0; }
    .product-detail-view__badges { padding:12px 16px; }
    .product-detail-view__fav-btn { width:calc(100% - 32px); margin:0 16px 16px; }
    .product-detail-view-right { padding:14px; }
    .product-detail-view__other-list,
    .product-detail-view__other-products {
        flex-direction:column;
    }
    .product-detail-view__other-item {
        flex-basis:auto;
        min-width:0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   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:rgba(255,255,255,.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:rgba(255,255,255,.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, 0.39); background:rgba(87, 176, 255, 0.06);
}
.ag-filter-btn.active {
    color:#fac850; border-color:rgba(250,200,80,.45); background:rgba(87, 176, 255, 0.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 rgba(255,255,255,.08); border-radius:var(--ag-card-radius);
    text-decoration:none; color:#fff;
    transition:all .3s ease; overflow:hidden; height:100%;
    aspect-ratio:3/4;
}
.ag-card:hover {
    border-color:rgba(87, 176, 255, 0.39);
    transform:translateY(-6px);
    box-shadow:0 18px 45px rgba(0, 0, 0, 0.55), 0 0 28px rgba(45, 156, 255, 0.25);
    color:#fff;
}

.ag-card.overlay::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%);
}

.ag-card.overlay .ag-card__logo {
    z-index:3;
}




.ag-card__logo::before {
    content:"";
    position:absolute;
    top:-40%;
    left:-80%;
    width:55%;
    height:180%;
    pointer-events:none;
    z-index:0;
    background:linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 35%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0.08) 65%,
        transparent 100%
    );
    background-repeat:no-repeat;
    transform:rotate(18deg);
    opacity:0;
}

.ag-card:hover .ag-card__logo::before {
    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%;
}

.ag-card__image img {
    width:100%; height:100%; object-fit:cover;
    transition:transform .6s ease, filter .4s ease;
     transform: scale(1.2);
}
.ag-card:hover .ag-card__image img {
    transform: scale(1);
}

/* 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;
    transition:opacity .4s ease;
}



/* Logo Overlay — centered */
.ag-card__logo {
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translate(-50%,-50%) scale(1);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: transform .4s ease;
	width: 100%;
	height: 100%;
}




.ag-card:hover .ag-card__logo {
    transform:translate(-50%,-50%) scale(1.05);
}
.ag-card__logo img {
    position:relative;
    z-index:1;
	max-width: 60%;
	max-height: 60%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

/* ── All-Games Responsive ──────────────────────────────────────────── */
@media (max-width:991px) {
    .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:575px) {
    .ag-header__title { font-size:22px; }
    .ag-card__logo img { height:32px; max-width:90px; }
    .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; }
.ag-card--square .ag-card__logo img { height:44px; }

#agGrid:has(.ag-card--has-video:hover) .ag-card--has-video:not(:hover),
#allGamesGrid:has(.ag-card--has-video:hover) .ag-card--has-video:not(:hover),
.ag-card-col:has(.ag-card--has-video:hover) ~ .ag-card-col .ag-card--has-video,
.ag-card-col:has(~ .ag-card-col .ag-card--has-video:hover) .ag-card--has-video {
    opacity: .5;
}

/* ═══════════════════════════════════════════════════════════════════════
   SEARCH RESULTS — bölüm başlıkları + sonuç kartları (.search-*)
   ═══════════════════════════════════════════════════════════════════════ */
/* Header arama formu — .input-group-o bileşeni, header içinde esner */
.search-header-form {
    flex: 1 1 320px;
    max-width: 480px;
}

/* ── 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__form {
    display: flex;
    gap: 10px;
    align-items: center;
}
.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: rgba(255,255,255,.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: rgba(255,255,255,.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 { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chips--center { justify-content: center; }
.sp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255,255,255,.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: rgba(255,255,255,.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: rgba(255,255,255,.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-sidebar { position: sticky; top: 88px; }
.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: rgba(255,255,255,.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: rgba(255,255,255,.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 { font-size: 18px; color: var(--c-primary); }
.sp-section__count {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-subtle);
    background: rgba(255,255,255,.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: rgba(255,255,255,.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__body { flex: 1; min-width: 0; }
.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: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-item-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-item-card__thumb .material-symbols-outlined { font-size: 24px; color: var(--c-text-subtle); }
.sp-item-card__body { flex: 1; min-width: 0; }
.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,#f59e0b); 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); }

/* Filters Row */
.ko-item-filters__row {
    display:flex; flex-wrap:wrap; gap:10px;
}
.ko-item-filter {
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    color:rgba(255,255,255,.7); padding:8px 14px; border-radius:10px;
    font-size:13px; cursor:pointer; transition:all .2s; outline:none;
    -webkit-appearance:none;
    appearance:none;
    min-width:140px;
}
.ko-item-filter option { background:#1a1d24; color:#fff; }
.ko-item-filter:focus { border-color:rgba(250,200,80,.4); }

/* Item Card */
.ko-item-card {
    display:flex; align-items:stretch; gap:0;
    background: radial-gradient(circle at 100% 150%, #171b21 0%, #0e101400 100%);
    border:1px solid rgba(255,255,255,.08); border-radius:14px;
    transition:all .25s ease; overflow:hidden;
}
.ko-item-card:hover {
    border-color:rgba(250,200,80,.2);
    box-shadow:0 4px 20px rgba(0,0,0,.3);
}

.ko-item-card__main {
    flex:1; display:flex; align-items:center; gap:16px; padding:16px; min-width:0;
}

/* Thumbnail */
.ko-item-card__thumb {
    width:72px; height:72px; flex-shrink:0; border-radius:10px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.ko-item-card__thumb img {
    width:100%; height:100%; object-fit:cover; border-radius:9px;
}

/* Info */
.ko-item-card__info { min-width:0; flex:1; }
.ko-item-card__name {
    display:block; font-size:15px; font-weight:600; color:#fff;
    text-decoration:none; margin-bottom:4px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:color .2s;
}
.ko-item-card__name:hover { color:#fde68a; }

.ko-item-card__meta {
    display:flex; align-items:center; gap:10px; margin-bottom:6px;
    font-size:12px; color:rgba(255,255,255,.45);
}
.ko-item-card__meta i { font-size:11px; }

/* Seller */
.ko-item-card__seller {
    display:flex; align-items:center; gap:6px; font-size:12px;
    color:rgba(255,255,255,.5);
}
.ko-item-card__seller > i { font-size:14px; color:rgba(255,255,255,.3); }
.ko-item-card__seller-name { font-weight:500; color:rgba(255,255,255,.65); }
.ko-item-card__seller-stats { display:inline-flex; gap:8px; margin-left:4px; }
.ko-item-card__stat { display:inline-flex; align-items:center; gap:3px; font-size:11px; }
.ko-item-card__stat--ok { color:#34d399; }
.ko-item-card__stat--ok i { font-size:11px; }
.ko-item-card__stat--fail { color:#f87171; }
.ko-item-card__stat--fail i { font-size:11px; }

/* Right Panel */
.ko-item-card__right {
    display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
    gap:6px; padding:14px 18px; min-width:180px;
    border-left:1px solid rgba(255,255,255,.06);
    background:rgba(255,255,255,.015);
}

/* Countdown */
.ko-item-card__countdown {
    font-size:11px; color:rgba(255,255,255,.4);
    display:flex; align-items:center; gap:4px;
}
.ko-item-card__countdown i { font-size:12px; }

/* Price */
.ko-item-card__price-box { text-align:right; }
.ko-item-card__old-price {
    font-size:12px; color:rgba(255,255,255,.35);
    text-decoration:line-through; margin-bottom:1px;
}
.ko-item-card__price {
    font-size:20px; font-weight:700; color:#fff;
}
.ko-item-card__price small { font-size:13px; font-weight:500; color:rgba(255,255,255,.5); }
.ko-item-card__discount {
    display:inline-block; font-size:10px; font-weight:600;
    color:#34d399; background:rgba(52,211,153,.1);
    padding:2px 8px; border-radius:6px; margin-top:2px;
}

/* Status */
.ko-item-card__status {
    font-size:11px; font-weight:500; padding:3px 10px; border-radius:8px;
}
.ko-item-card__status--online {
    color:#34d399; background:rgba(52,211,153,.1);
}
.ko-item-card__status--offline {
    color:rgba(255,255,255,.4); background:rgba(255,255,255,.05);
}

/* Action Buttons */
.ko-item-card__actions { display:flex; gap:6px; }
.ko-item-card__btn {
    font-size:12px; font-weight:600; padding:6px 14px; border-radius:8px;
    text-decoration:none; transition:all .2s; white-space:nowrap;
}
.ko-item-card__btn--detail {
    color:rgba(255,255,255,.6); background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
}
.ko-item-card__btn--detail:hover {
    color:#fff; border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.1);
}
.ko-item-card__btn--buy {
    color:#0e1014; background:linear-gradient(135deg,#fac850,#f59e0b);
    border:none;
}
.ko-item-card__btn--buy:hover { filter:brightness(1.1); color:#0e1014; }

/* 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:rgba(255,255,255,.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, 0.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 ──────────────────────────────────────────── */
@media (max-width:991px) {
    .ko-item-card { flex-direction:column; }
    .ko-item-card__right {
        flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between;
        border-left:none; border-top:1px solid rgba(255,255,255,.06);
        min-width:0; padding:12px 16px; gap:10px;
    }
    .ko-item-card__price-box { text-align:left; }
    .ko-item-filter { min-width:120px; }
}
@media (max-width:575px) {
    .ko-item-card__thumb { width:56px; height:56px; }
    .ko-item-card__name { font-size:13px; }
    .ko-item-card__price { font-size:17px; }
    .ko-item-card__actions { width:100%; }
    .ko-item-card__btn { flex:1; text-align:center; }
    .ko-item-filters__row { gap:6px; }
    .ko-item-filter { min-width:0; flex:1; font-size:12px; padding:7px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FILTER BAR — .o-sidebar  (horizontal top layout)
   ═══════════════════════════════════════════════════════════════════════ */
.o-sidebar {
    background: #181b21;
    border: 1px solid rgba(255,255,255,.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,.40);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.o-sidebar__select {
    width: 100%;
    background: rgba(255,255,255,.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: rgba(255,255,255,.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;
}
.o-choices.is-open .choices__inner {
    border-color: rgba(87,176,255,0.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,0.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: #57b0ff; 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__toggle {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 14px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md);
    background: rgba(255,255,255,.03); color: #dbe8ff;
    font-size: 13px; font-weight: 600; white-space: nowrap;
    transition: border-color .15s, background .15s;
}
.o-sidebar__toggle:has(input:checked) {
    border-color: #f7b733;
    background: linear-gradient(90deg, rgba(247,183,51,.18), rgba(252,74,26,.14));
    color: #ffd27a;
}
.o-sidebar__toggle input { accent-color: #f7b733; width: 15px; height: 15px; }
.o-sidebar__toggle .material-symbols-outlined { font-size: 16px; color: #f7b733; }
.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);
}
.o-sidebar__info {
    padding: 16px 18px;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.o-sidebar__back {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    transition: color .2s;
}
.o-sidebar__back:hover { color: #fac850; }

@media (max-width:991px) {
    .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 ─────────────────────────────────────────────────────────── */
.page-breadcrumb.page-breadcrumb--glass {
    position: relative;
    z-index: 2;
    background: rgba(14,16,20,.5);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.product-banner {
    position: relative;
    overflow: hidden;
    height: 600px;
    margin-top: -48px;
    padding-top: 48px;
}
.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%;
    max-width: 2000px;
    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 + section {
    position: relative;
    z-index: 1;
}
.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, 0.06);
    background: #181b21;
}
.product-banner__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.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__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.product-banner__tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,.07);
    -webkit-backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.1);
}
.product-banner__tag i {
    color: #fac850;
    font-size: 13px;
}
.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__tag { font-size: 11px; padding: 3px 8px; }
    .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 rgba(255,255,255,.08);
    aspect-ratio: 1/1;
    display: flex; align-items: center; justify-content: center;
}
.detail-tabs-gallery__main img {
    width: 100%; height: 100%; object-fit: cover;
}
.detail-tabs-gallery__fav {
    position: absolute; top: 14px; right: 14px;
    background: rgba(14,16,20,.75); border: 1px solid var(--c-border);
    color: var(--c-danger); font-size: 18px; border-radius: var(--r-md);
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all var(--tr-btn); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.detail-tabs-gallery__fav:hover, .detail-tabs--faved .detail-tabs-gallery__fav { background: rgba(248,113,113,.12); }
.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 rgba(255,255,255,.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 img { width: 100%; height: 100%; object-fit: cover; }
.detail-tabs-gallery__thumb.active,
.detail-tabs-gallery__thumb:hover { border-color: #fac850; }

/* Title */
.detail-tabs-title-block { margin-bottom: 12px; }
.detail-tabs-title {
    font-size: 18px; font-weight: 700; color: #f1f5f9; margin: 0 0 6px;
}
.detail-tabs-title-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-tabs-title-meta__tag {
    font-size: 12px; font-weight: 600; color: #94a3b8;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
    padding: 4px 10px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px;
}
.detail-tabs-title-meta__tag i { color: #fac850; font-size: 13px; }

/* 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;
}
.detail-tabs-price-block__fav-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px; border-radius: var(--r-md);
    background: transparent; border: 1.5px solid var(--c-border);
    color: var(--c-text-muted); font-weight: 600; font-size: 14px;
    cursor: pointer; transition: all var(--tr-btn);
}
.detail-tabs-price-block__fav-btn:hover { border-color: rgba(248,113,113,.4); color: var(--c-danger); background: rgba(248,113,113,.06); }
.detail-tabs--faved .detail-tabs-price-block__fav-btn { border-color: rgba(248,113,113,.4); color: var(--c-danger); }

/* Sections */
.info-card {
    position: relative;
    background: rgba(24,27,33,.65);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px; padding: 16px; margin-bottom: 14px;
    overflow: hidden;
}

.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 rgba(255,255,255,.06);
}
.info-card__title i { color: #fac850; font-size: 18px; }

/* Details Grid */
.detail-tabs-details-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.detail-tabs-detail-item {
    flex: 1 1 calc(50% - 5px);
    min-width: 180px;
    display: flex; flex-direction: column; gap: 2px;
    background: rgba(255,255,255,.03); border-radius: 8px; padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.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; }

/* Seller Card */
.detail-tabs-seller-wrap {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.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 rgba(255,255,255,.06);
}
.detail-tabs-seller-card__avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #64748b; border: 2px solid rgba(255,255,255,.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: rgba(255,255,255,.03); border-radius: 8px; padding: 8px 4px;
    border: 1px solid rgba(255,255,255,.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: #ef4444; }
.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 rgba(255,255,255,.06); padding-bottom: 10px;
}
.tab-nav__btn {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.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; }

/* Recent Items */
.detail-tabs-recent-items { display: flex; flex-direction: column; gap: 10px; }
.detail-tabs-recent-card {
    display: flex; align-items: center; gap: 14px;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px; padding: 10px; text-decoration: none; transition: all .2s;
}
.detail-tabs-recent-card:hover { border-color: rgba(250,200,80,.2); background: rgba(255,255,255,.05); }
.detail-tabs-recent-card img { width: 60px; height: 45px; border-radius: 6px; object-fit: cover; }
.detail-tabs-recent-card__name { font-size: 13px; font-weight: 600; color: #f1f5f9; }
.detail-tabs-recent-card__price { font-size: 13px; font-weight: 700; color: #22c55e; margin-top: 2px; }

/* Stats */
.detail-tabs-stat-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.detail-tabs-stat-row:last-child { border-bottom: none; }
.detail-tabs-stat-row span { font-size: 13px; color: #94a3b8; }
.detail-tabs-stat-row strong { font-size: 14px; color: #f1f5f9; }

/* Fiyat değişim grafiği + özet kartları */
.detail-price-chart {
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border: 1px solid rgba(255,255,255,.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: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.price-stat:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.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__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.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, #57b0ff); }
.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: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.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: rgba(255,255,255,.02);
    border-radius: 10px; border: 1px dashed rgba(255,255,255,.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-title { font-size: 17px; }
    .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; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE ITEM CARD — .listing-card  (vertical card matching oyuneks design)
   ═══════════════════════════════════════════════════════════════════════ */
.listing-card {
    background: #181b21;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    overflow: hidden;
    transition: all .25s;
    height: 100%;
    display: flex;
    flex-direction: column;
    container-type: inline-size;
}

@container (max-width: 213px) {
    .listing-card__actions {
        flex-direction: column;
    }
}
.listing-card:hover {
	border-color: rgba(87, 176, 255, 0.39);
	box-shadow: 0 8px 28px rgba(0,0,0,.45);
}

/* ── Header ─────────────────────────────────────────────────────────── */
.listing-card__header {
    position: relative;
    aspect-ratio: 1 / 1;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #14171c;
    text-align: center;
    overflow: hidden;
}

/* ── Order Status Badge ─────────────────────────────────────────────── */
.listing-card__order-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.4;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.listing-card__order-badge--active {
    background: rgba(72, 187, 120, .15);
    color: #48bb78;
    border: 1px solid rgba(72, 187, 120, .3);
}
.listing-card__order-badge--completed {
    background: rgba(87, 176, 255, .12);
    color: #57b0ff;
    border: 1px solid rgba(87, 176, 255, .25);
}
.listing-card__order-badge--cancelled {
    background: rgba(252, 129, 129, .12);
    color: #fc8181;
    border: 1px solid rgba(252, 129, 129, .25);
}

/* Bottom gradient for text readability */
.listing-card__header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(14,17,22,.9) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}
.listing-card:hover .listing-card__header::after { height: 65%; }
.listing-card__item-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.listing-card__thumb {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border-radius: 0;
    background: #181b21;
    border: none;
    overflow: hidden;
    box-shadow: none;
    z-index: 0;
    color: inherit;
    text-decoration: none;
}
.listing-card:hover .listing-card__thumb {
    border-color: transparent;
    box-shadow: none;
}
.listing-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .35; transition: opacity .3s; }
.listing-card:hover .listing-card__thumb img { opacity: .5; }
/* İlan kartı — görsel sayısı + 7/24 teslimat rozetleri (thumb üzeri overlay) */
.listing-card__img-count {
    position: absolute; top: 8px; left: 8px; z-index: 4;
    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; }

/* İlan kartı — 7/24 anında teslimat çipi (info/body bölümünde) */
.listing-card__delivery-24h {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px;
    background: linear-gradient(90deg, rgba(247,183,51,.16), rgba(252,74,26,.16));
    border: 1px solid rgba(247,183,51,.45);
    color: #ffce7a;
    font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .3px;
    text-transform: uppercase; white-space: nowrap;
}
.listing-card__delivery-24h .material-symbols-outlined { font-size: 13px; color: #f7b733; }

/* 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;
}
.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 {
    stroke: url(#oi24hGrad); stroke-width: .8;
    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; }
}
.listing-card__thumb .listing-card__btn--detail {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    opacity: 0;
    transition: opacity .25s;
    flex: none;
    padding: 6px 14px;
    white-space: nowrap;
}
.listing-card:hover .listing-card__thumb .listing-card__btn--detail { opacity: 1; }
.listing-card__item-info { text-align: center; min-width: 0; position: relative; z-index: 3; text-shadow: 0 1px 6px rgba(0,0,0,.8); pointer-events: none; }
.listing-card__item-name {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}
.listing-card__item-server {
    font-size: 10px;
    color: #90cdf4;
    margin-top: 2px;
}
.listing-card__fav {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 3;
    background: rgba(20,23,28,.7);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-sm);
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-danger);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    transition: all var(--tr-btn);
}
.listing-card__fav:hover { color: var(--c-success); background: rgba(255,255,255,.06); }
.listing-card__fav--active { color: var(--c-danger); background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.4); }
.listing-card__fav--active:hover { color: var(--c-danger); background: rgba(239,68,68,.24); }

/* Detail button (siparis-ilan) */
.listing-card__detail {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 3;
    background: rgba(20,23,28,.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    color: rgba(255,255,255,.7);
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .3px;
    cursor: pointer;
    transition: all var(--tr-btn);
}
.listing-card__detail .material-symbols-outlined { font-size: 14px; }
.listing-card__detail:hover {
    color: #fff;
    background: rgba(87,176,255,.15);
    border-color: rgba(87,176,255,.3);
}

/* ── Body ───────────────────────────────────────────────────────────── */
.listing-card__body {
    padding: 12px 14px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Seller */
.listing-card__seller {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,.6);
}
.listing-card__seller > i { font-size: 16px; color: rgba(255,255,255,.35); }
.listing-card__seller-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255,255,255,.7);
    font-weight: 500;
}
.listing-card__stars {
    display: flex;
    gap: 1px;
}
.listing-card__stars .starmeter .material-symbols-outlined {
    font-size: 10px;
    letter-spacing: 1px;
}
.listing-card__rating {
    font-size: 11px;
    color: #fac850;
    font-weight: 600;
}

/* Stats */
.listing-card__stats {
    display: flex;
    gap: 6px;
}
.listing-card__stat {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 5px 0;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.08);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.listing-card__stat--ok  { color: #48bb78; border-color: rgba(72,187,120,.15); }
.listing-card__stat--ok i { color: #48bb78; }
.listing-card__stat--fail { color: #fc8181;  border-color: rgba(252,129,129,.15); }
.listing-card__stat--fail i { color: #fc8181; }
.listing-card__stat strong { font-weight: 700; }
.listing-card__stat strong>span{ color: #cbcbcb; }

/* Timer */
.listing-card__timer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 8px;
    color: rgba(255,255,255,.55);
    padding: 6px 0;
}
.listing-card__timer > i { color: #48bb78; font-size: 13px; }
.listing-card__timer strong { color: #fff; font-weight: 700; font-size: 12px; }

/* Price row */
.listing-card__price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.listing-card__price-col { display: flex; flex-direction: column; justify-content: flex-end; min-height: 38px; }
.listing-card__discount-label {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #48bb78;
    background: rgba(72,187,120,.12);
    border: 1px solid rgba(72,187,120,.2);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
    letter-spacing: .3px;
    align-self: center;
    height: 30px;
}
.listing-card__old-price {
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    text-decoration: line-through;
}
.listing-card__price {
    font-size: 18px;
    font-weight: 700;
    color: #48bb78;
    line-height: 1.1;
}
.listing-card__price small { font-size: 13px; font-weight: 600; }

/* Status badge */
.listing-card__status {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
}
.listing-card__status .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}
.listing-card__status small {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    line-height: 1;
    white-space: nowrap;
}
.listing-card__status--offline .material-symbols-outlined {
    color: rgba(255,255,255,.3);
}
.listing-card__status--offline small {
    color: rgba(255,255,255,.35);
}
.listing-card__status--online .material-symbols-outlined {
    color: #48bb78;
}
.listing-card__status--online small {
    color: rgba(72,187,120,.8);
}

/* Action buttons */
.listing-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.listing-card__btn--detail,
.listing-card__btn--cart {
    background: transparent;
    border: 1.5px solid var(--c-border);
    color: var(--c-text-muted);
}
.listing-card__btn--detail:hover,
.listing-card__btn--cart:hover {
    border-color: var(--c-border-hover);
    color: var(--c-text);
    background: rgba(255,255,255,.04);
}
.listing-card__btn--buy {
    background: var(--c-primary);
    color: #0a0f18;
    flex: 1;
}
.listing-card__btn--buy:hover {
    background: var(--c-primary-hover);
    color: #0a0f18;
    box-shadow: none;
}
.listing-card__btn--detail,
.listing-card__btn--cart {
    flex: 1;
}
.listing-card__btn .material-symbols-outlined {
    font-size: 14px;
}
.listing-card__btn.listing-card__btn--reserved {
    white-space: normal;
    line-height: 1.3;
    height: auto;
    text-align: center;
}

/* Responsive */
@media (max-width:575px) {
    .listing-card__item-name { font-size: 12px; }
    .listing-card__price { font-size: 16px; }
    .listing-card__btn { font-size: 10px; padding: 8px 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE HAMBURGER BUTTON
   ═══════════════════════════════════════════════════════════════════════ */
/* Shared listing card shell */
.listing-card {
    position: relative;
    min-height: 0;
    padding: 16px;
    border-radius: 18px;
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 22px 60px rgba(0,0,0,.32);
}



.listing-card:hover {
    border-color: rgba(255,255,255,.34);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 28px 70px rgba(0,0,0,.42),
        0 0 0 1px rgba(87,176,255,.14);
}

.listing-card__header,
.listing-card__body {
    position: relative;
    z-index: 1;
}

.listing-card__header {
    aspect-ratio: auto;

    display: block;
    overflow: visible;
    text-align: left;
    background: transparent;
}

.listing-card__header::after {
    display: none;
}

.listing-card__item-row {
    position: relative;
    display: block;
    width: 100%;
}

.listing-card__thumb {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1.06 / 1;
    border-radius: 14px;

    background: #080b0f;
    box-shadow:0 16px 34px rgba(0,0,0,.44);
}

.listing-card__thumb::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 55%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8,11,15,0), rgba(8,11,15,.72) 52%, rgba(8,11,15,.96));
}

.listing-card__thumb img {
    width: 100%;
    height: 100%;
    opacity: 1;
    object-fit: cover;
    border-radius: inherit;
    transform: scale(1);
    transition: transform .28s ease, filter .28s ease;
}

.listing-card:hover .listing-card__thumb img {
    opacity: 1;
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.05);
}

.listing-card__item-info {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0,0,0,.65);
    pointer-events: none;
}

.listing-card__item-name {
    font-size: 13px;
    line-height: 1.28;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,.95);
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.listing-card__item-server {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(226,232,240,.88);
    text-shadow: 0 2px 8px rgba(0,0,0,.9);
}

.listing-card__body {
    padding: 14px 0 0;
    gap: 10px;
}

.listing-card__seller {
    gap: 8px;

    color: rgba(226,232,240,.82);
}



.listing-card__seller-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(226,232,240,.82);
}

.listing-card__stars {
    margin-left: auto;
}

.listing-card__stars .starmeter {
    width: 18px;
    height: 18px;
    overflow: hidden;
}

.listing-card__stars .starmeter .material-symbols-outlined {
    font-size: 18px;
    letter-spacing: 0;
}

.listing-card__rating {
    font-size: 12px;
    color: #fbbf24;
}

.listing-card__status {
    width: 100%;
    gap: 8px;

}

.listing-card__status .material-symbols-outlined {
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0;
    background: rgba(148,163,184,.9);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

.listing-card__status small {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
}

.listing-card__status--online .material-symbols-outlined {
    background: #48d87c;
    box-shadow: 0 0 16px rgba(72,216,124,.25);
}

.listing-card__status--online small {
    color: #48d87c;
}

.listing-card__status--offline .material-symbols-outlined {
    background: #a8b3c4;
}

.listing-card__status--offline small {
    color: rgba(226,232,240,.72);
}

.listing-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.listing-card__stat {

    flex-direction: row;
    align-items: center;
    justify-content: flex-start;


    border-radius: 10px;

    border-color: rgba(255,255,255,.10);
    font-size: 0;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.2;
    text-align: left;
    overflow: hidden;
}

.listing-card__stat .material-symbols-outlined {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;

}

.listing-card__stat--ok .material-symbols-outlined {
    color: #48d87c;

}

.listing-card__stat--fail .material-symbols-outlined {
    color: #ff616c;

}

.listing-card__stat strong {
    display: block;
    font-size: 16px;
    line-height: 1;
    margin: 0;
    min-width: 0;
}

.listing-card__stat strong span {
    display: block;
    margin-top: 5px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1;
    text-align: left;
}

.listing-card__timer {
	/* justify-content: center; */
	gap: 8px;
	padding: 6px;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,.10);
	color: rgba(226,232,240,.72);
	font-size: 8px;
	font-variant-numeric: tabular-nums;
}

.listing-card__timer .material-symbols-outlined {
    color: rgba(226,232,240,.72);
    font-size: 18px;
}

.listing-card__timer strong {
	font-size: 12px;
	color: #f8fafc;
	margin-right: 2px;
}

.listing-card__price-row {
	position: relative;
	align-items: flex-end;
	gap: 10px;
	/* height: auto; */
	/* min-height: 45px; */
	flex: 1 0 auto;
}

.listing-card__price-col {
    min-height: 0;
    gap: 3px;
}

.listing-card__discount-label {
    width: 42px;
    height: 36px;
    justify-content: center;
    border-radius: 9px;
    font-size: 14px;
    color: #48d87c;
    background: rgba(72,216,124,.10);
    border-color: rgba(72,216,124,.34);
}

.listing-card__old-price {
    font-size: 12px;
    color: rgba(226,232,240,.44);
}

.listing-card__price {
    color: white;
    letter-spacing: 0;

}

.listing-card__price small {
    font-size: 13px;
}

.listing-card__actions {
    gap: 8px;
    margin-top: 0;
}

.listing-card__btn {
min-width: 102px;
    letter-spacing: 0;
}

.listing-card__btn .material-symbols-outlined {
    font-size: 16px;
}

.listing-card__btn--detail,
.listing-card__btn--cart {
    background: rgba(15,23,42,.22);
    border: 1px solid rgba(226,232,240,.22);
    color: rgba(226,232,240,.82);
}

.listing-card__btn--detail:hover,
.listing-card__btn--cart:hover {
    background: rgba(226,232,240,.07);
    border-color: rgba(226,232,240,.35);
}

.listing-card__btn--buy {
    background: linear-gradient(135deg, #2785ff, #155fff);
    color: #fff;
    border: 1px solid rgba(117,176,255,.55);
}

.listing-card__btn--buy:hover {
    background: linear-gradient(135deg, #3295ff, #1d6cff);
    color: #fff;
}

@media (max-width: 767.98px) {
    .listing-card {
        padding: 18px;
    }

    .listing-card__item-info {
        text-align: center;
    }

    .listing-card__seller-name {
        font-size: 18px;
    }

    .listing-card__stats,
    .listing-card__actions {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .listing-card__timer {
        flex-wrap: wrap;
    }

    .listing-card__price {
        font-size: 36px;
    }

    .listing-card__btn {
        font-size: 16px;
    }
}

.mob-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 8px 7px;
    background: rgba(255,255,255,.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 {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    z-index: 1000001;
    background: #12151b;
    border-right: 1px solid rgba(255,255,255,.07);
    display: flex;
    flex-direction: column;
    transition: left .3s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;

}
.mob-drawer.active {
    left: 0;
}
.mob-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.mob-drawer__head .header-brand img { height: 26px; }
.mob-drawer__close {
    width: 34px; height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    color: rgba(255,255,255,.6);
    font-size: 16px;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.mob-drawer__close:hover { background: rgba(255,255,255,.1); color: #fff; }
.mob-drawer__nav {
    padding: 8px 0;
}
.mob-drawer__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mob-drawer__nav ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(200,215,240,.7);
    text-decoration: none;
    transition: color .2s, background .2s;
}
.mob-drawer__nav ul li a i { font-size: 15px; opacity: .7; width: 20px; text-align: center; }
.mob-drawer__nav ul li a:hover,
.mob-drawer__nav ul li.active a {
    color: #57b0ff;
    background: rgba(87,176,255,.08);
}
.mob-drawer__nav ul li.active a i { opacity: 1; }
.mob-drawer__actions {
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(255,255,255,.05);
}
.mob-drawer__action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}
.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 {
    background: linear-gradient(135deg, rgba(87,176,255,.15), rgba(43,124,255,.12));
    color: #8bc7ff;
    border: 1px solid rgba(87,176,255,.2);
}
.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 {
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid rgba(255,255,255,.05);
}
.mob-drawer__links a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    font-size: 12px;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    transition: color .2s;
}
.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 {
    padding: 12px 16px;
    display: flex;
    gap: 8px;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,.05);
}
.mob-drawer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 8px;
    color: rgba(255,255,255,.4);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    text-decoration: none;
    font-size: 15px;
    transition: color .2s, background .2s;
}
.mob-drawer__social a:hover { color: #fff; background: rgba(255,255,255,.1); }

.mob-drawer {
    left: 0;
    width: min(360px, calc(100vw - 28px));
    height: 100vh;
    height: 100dvh;
    padding: 14px;
    gap: 12px;
    background:
        radial-gradient(circle at 18% 0%, rgba(87, 176, 255, .16), transparent 34%),
        linear-gradient(180deg, #111720 0%, #0c1018 100%);
    border-right: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 28px 0 70px rgba(0, 0, 0, .52);
    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) rgba(255, 255, 255, .05);
    }
}

.mob-drawer::-webkit-scrollbar {
    width: 10px;
}

.mob-drawer::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .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);
}

.mob-drawer__head {
    padding: 0 0 2px;
    border-bottom: 0;
}

.mob-drawer__head .header-brand img {
    height: 31px;
}

.mob-drawer__close {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .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 rgba(255, 255, 255, .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__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mob-drawer__account-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.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 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    border-top: 0;
}

.mob-drawer__action-btn {
    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 rgba(255, 255, 255, .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 {
    grid-column: 1 / -1;
    justify-content: center;
    background: linear-gradient(135deg, rgba(87, 176, 255, .20), 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 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mob-drawer__nav ul li a {
    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, .10);
    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 {
    gap: 7px;
    border-top: 0;
}

.mob-drawer__links a {
    padding: 9px 4px;
    color: rgba(219, 232, 255, .70);
    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 {
    justify-content: space-between;
    padding: 0;
    margin-top: auto;
    border-top: 0;
}

.mob-drawer__social a {
    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: sabit header tamamen gizli — yerine floating header kullanılır
       (JS updateFloatingHeader mobilde her zaman görünür yapar). */
    .header-top.site-header { display: none; }
    /* 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 { display: none !important; }
    .site-header__main > .user-panel {
        margin-left: auto;
        gap: 4px;
    }
    /* Hide wallet text on tablet */
    .header-btn--wallet span:not(.header-btn--wallet__bal) { display: none; }
    .header-btn--wallet { padding: 0 8px; gap: 4px; }
    /* 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; }

    /* Site nav: hide desktop nav */
    .header-nav.site-nav { display: none; }

    /* Hero section */
    .hero-section .col-9 { flex: 0 0 100%; max-width: 100%; }
    .hero-section .col-3 { flex: 0 0 100%; max-width: 100%; }
    .hero-section .col-3 {
        flex-direction: row !important;
        gap: 14px;
    }
    .hero-side-card { flex: 1; min-height: 180px; }

    /* Pop game logos: scrollable */
    .popgamefav { overflow-x: auto; }
    .popgamefav .featured-game-logo { min-width: 120px; flex: 0 0 auto; }

    /* 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 { 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 */
    .listing-card__body { padding: 10px 12px 12px; gap: 8px; }
    .listing-card__stats { gap: 4px; }
    .listing-card__stat { font-size: 9px; padding: 4px 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — 575px (mobile portrait)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    /* Container padding */
    .container { padding-left: 12px; padding-right: 12px; }

    /* Header main row tighter */
    .site-header__main { padding: 8px 0; }
    .header-brand img { height: 26px; }

    /* Hide wallet balance badge on phone */
    .header-btn--wallet__bal { display: none; }
    .header-btn--wallet { width: 38px; height: 38px; padding: 0; }
    .header-btn--wallet span { display: none; }
    .header-btn--wallet i { font-size: 16px; }
    .header-btn--notif,
    .header-btn--cart { width: 36px; height: 36px; font-size: 15px; }

    /* Slider section */
    section.slider, section.hero-section { padding: 16px 0; }

    /* Pop game logos */
    .popgamefav .featured-game-logo { min-width: 100px; }
    .popgamefav .featured-game-logo figure img { max-height: 28px; }

    /* Section spacing */
    .section-block.pt-60 { padding-top: 32px !important; }
    .section-block.pb-60 { padding-bottom: 32px !important; }

    /* HIC cards tighter */
    .listing-card__header { padding: 10px; }
    .listing-card__thumb { border-radius: 0; }
    .listing-card__item-name { font-size: 11px; }
    .listing-card__price { font-size: 15px; }
    .listing-card__btn { font-size: 10px; padding: 7px 0; border-radius: 6px; }
    .listing-card__actions { gap: 6px; }
    .listing-card__seller { font-size: 11px; }
    .listing-card__timer { font-size: 10px; gap: 4px; }

    /* 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;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   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__content {
    flex: 1;
    min-width: 0;
}
.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: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.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: rgba(255,255,255,.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: #52b6ff;
    --promo-gold: #facc15;
    --promo-amber: #f59e0b;
    --promo-rose: #ff5f7e;
    position: relative;
    isolation: isolate;
    padding: 74px 0;
    overflow: hidden;
    background: #070a10;
}
.parallax-promo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 28% 96%, rgba(250, 204, 21, .34) 0%, rgba(250, 204, 21, .16) 28%, transparent 60%),
        radial-gradient(ellipse at 72% 16%, rgba(82, 182, 255, .2) 0%, transparent 44%),
        linear-gradient(90deg, rgba(7, 10, 16, .98) 0%, rgba(7, 10, 16, .82) 46%, rgba(7, 10, 16, .94) 100%);
}
.parallax-promo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(7, 10, 16, .92) 0%, transparent 18%, transparent 78%, rgba(7, 10, 16, .96) 100%),
        linear-gradient(90deg, rgba(255, 255, 255, .06), transparent 14%, transparent 86%, rgba(255, 255, 255, .05));
    opacity: .82;
}
.parallax-promo__bg {
    position: absolute;
    inset: -18% 0;
    z-index: 0;
    background-image: url('../images/row-wp-leftsided-zoomed-in.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: saturate(1.22) contrast(1.08);
    opacity: .36;
}
.parallax-promo__glow {
    position: absolute;
    left: 50%;
    bottom: -240px;
    z-index: 1;
    width: min(980px, 88vw);
    height: 430px;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(250, 204, 21, .28) 0%, rgba(255, 95, 126, .15) 36%, transparent 72%);
    filter: blur(10px);
    opacity: .95;
}
.parallax-promo .container {
    position: relative;
    z-index: 3;
}
.parallax-promo__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(340px, .78fr);
    align-items: center;
    gap: clamp(28px, 5vw, 76px);
    min-height: 370px;
}
.parallax-promo__content {
    max-width: 650px;
}
.parallax-promo__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    margin-bottom: 18px;
    border: 1px solid rgba(250, 204, 21, .28);
    border-radius: 8px;
    background: rgba(250, 204, 21, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    color: var(--promo-gold);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.parallax-promo__badge .material-symbols-outlined {
    font-size: 18px;
}
.parallax-promo__title {
    max-width: 620px;
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(36px, 4.7vw, 68px);
    font-weight: 900;
    line-height: .98;
    text-transform: uppercase;
}
.parallax-promo__title span {
    display: inline-block;
    background: linear-gradient(135deg, #fff5b5 0%, var(--promo-gold) 36%, var(--promo-amber) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 22px rgba(250, 204, 21, .24));
}
.parallax-promo__desc {
    max-width: 540px;
    margin: 0 0 24px;
    color: rgba(221, 232, 255, .72);
    font-size: 16px;
    line-height: 1.65;
}
.parallax-promo__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
}
.parallax-promo__code,
.parallax-promo__limit {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    border-radius: 8px;
    background: rgba(10, 16, 28, .62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 34px rgba(0, 0, 0, .22);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.parallax-promo__code {
    gap: 14px;
    padding: 8px 10px 8px 18px;
    border: 1px dashed rgba(250, 204, 21, .42);
}
.parallax-promo__code span {
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}
.parallax-promo__code small {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    padding: 0 12px;
    border-radius: 6px;
    background: rgba(250, 204, 21, .14);
    color: rgba(250, 204, 21, .92);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.parallax-promo__limit {
    gap: 8px;
    padding: 0 16px;
    border: 1px solid rgba(82, 182, 255, .24);
    color: rgba(221, 232, 255, .74);
    font-size: 13px;
    font-weight: 700;
}
.parallax-promo__limit .material-symbols-outlined {
    color: var(--promo-blue);
    font-size: 19px;
}
.parallax-promo__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.parallax-promo .parallax-promo__cta.btn-o {
    border: 1px solid rgba(255, 245, 181, .42);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(135deg, #fff06f 0%, var(--promo-gold) 42%, var(--promo-amber) 100%);
    color: #10131a;
    box-shadow: 0 14px 36px rgba(245, 158, 11, .3), inset 0 1px 0 rgba(255, 255, 255, .52);
}
.parallax-promo .parallax-promo__cta.btn-o:hover,
.parallax-promo .parallax-promo__cta.btn-o:focus-visible {
    border-color: rgba(255, 245, 181, .68);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(135deg, #fff7a3 0%, #fbd23d 42%, #f59e0b 100%);
    color: #0b0f16;
    transform: translateY(-2px);
}
.parallax-promo .parallax-promo__link.btn-o {
    border-color: rgba(221, 232, 255, .18);
    background: rgba(10, 16, 28, .48);
    color: rgba(236, 244, 255, .86);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.parallax-promo .parallax-promo__link.btn-o:hover,
.parallax-promo .parallax-promo__link.btn-o:focus-visible {
    border-color: rgba(82, 182, 255, .46);
    background: rgba(82, 182, 255, .12);
    color: #fff;
}
.parallax-promo__showcase {
    position: relative;
    min-height: 330px;
}
.parallax-promo__showcase::before,
.parallax-promo__showcase::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.parallax-promo__showcase::before {
    inset: 34px 20px 26px;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(82, 182, 255, .26) 0%, rgba(255, 95, 126, .14) 38%, transparent 72%);
    filter: blur(18px);
}
.parallax-promo__showcase::after {
    right: 2%;
    bottom: 22px;
    width: 86%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(250, 204, 21, .72), transparent);
    box-shadow: 0 0 30px rgba(250, 204, 21, .34);
}
.parallax-promo__game {
    position: absolute;
    display: block;
    width: 168px;
    aspect-ratio: 4 / 5;
    border-radius: 8px;
    object-fit: cover;
    /* box-shadow: 0 28px 60px rgba(0, 0, 0, .45); */
}
/* Tek vitrin görseli (panelden yönetilen) — üst üste binen kart düzeni yerine ortalanmış tek görsel */
.parallax-promo__showcase--single {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.parallax-promo__game--single {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: auto;
    height: auto;
    z-index: 3;
    object-fit: contain;
    transform: none;
}
.parallax-promo__game--valorant {
    right: 22%;
    top: 8px;
    z-index: 3;
    width: 230px;
    transform: rotate(-3deg);
    border-color: rgba(255, 95, 126, .46);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 42px rgba(255, 95, 126, .18);
}
.parallax-promo__game--pubg {
    right: 0;
    top: 62px;
    z-index: 2;
    transform: rotate(5deg);
    opacity: .92;
}
.parallax-promo__game--lol {
    left: 4%;
    bottom: 18px;
    z-index: 1;
    transform: rotate(-7deg);
    opacity: .86;
}
.parallax-promo__discount {
    position: absolute;
    right: 6%;
    bottom: 18px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 118px;
    height: 118px;
    border: 1px solid rgba(255, 245, 181, .45);
    border-radius: 50%;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .24), transparent 32%),
        linear-gradient(135deg, #fff06f 0%, var(--promo-gold) 46%, var(--promo-amber) 100%);
    color: #11151d;
    box-shadow: 0 18px 46px rgba(245, 158, 11, .34), inset 0 1px 0 rgba(255, 255, 255, .56);
    text-transform: uppercase;
}
.parallax-promo__discount strong {
    margin-top: 12px;
    font-size: 34px;
    font-weight: 950;
    line-height: .9;
}
.parallax-promo__discount span {
    margin-top: -12px;
    font-size: 11px;
    font-weight: 900;
}

@media (max-width: 991.98px) {
    .parallax-promo {
        padding: 60px 0;
    }
    .parallax-promo__bg {
        background-attachment: scroll;
    }
    .parallax-promo__inner {
        grid-template-columns: 1fr;
        gap: 34px;
        min-height: 0;
    }
    .parallax-promo__content {
        max-width: 100%;
    }
    .parallax-promo__showcase {
        min-height: 290px;
    }
    .parallax-promo__game--valorant {
        left: 50%;
        right: auto;
        transform: translateX(-50%) rotate(-3deg);
    }
    .parallax-promo__game--pubg {
        right: 12%;
    }
    .parallax-promo__game--lol {
        left: 12%;
    }
    .parallax-promo__showcase--single {
        min-height: 0;
    }
    .parallax-promo__game--single {
        max-width: 360px;
    }
}

@media (max-width: 575.98px) {
    .parallax-promo {
        padding: 48px 0 42px;
    }
    .parallax-promo__title {
        font-size: 34px;
    }
    .parallax-promo__desc {
        font-size: 14px;
    }
    .parallax-promo__meta,
    .parallax-promo__actions {
        align-items: stretch;
        flex-direction: column;
    }
    .parallax-promo__code,
    .parallax-promo__limit,
    .parallax-promo .parallax-promo__cta.btn-o,
    .parallax-promo .parallax-promo__link.btn-o {
        width: 100%;
        justify-content: center;
    }
    .parallax-promo__showcase {
        min-height: 230px;
    }
    .parallax-promo__game {
        width: 124px;
    }
    .parallax-promo__showcase--single {
        min-height: 0;
    }
    .parallax-promo__game--single {
        width: 100%;
        max-width: 300px;
    }
    .parallax-promo__game--valorant {
        width: 168px;
        top: 10px;
    }
    .parallax-promo__game--pubg {
        right: -6px;
        top: 54px;
    }
    .parallax-promo__game--lol {
        left: -6px;
        bottom: 10px;
    }
    .parallax-promo__discount {
        right: 8px;
        bottom: 4px;
        width: 92px;
        height: 92px;
    }
    .parallax-promo__discount strong {
        font-size: 27px;
    }
    .parallax-promo__discount span {
        font-size: 10px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   BROADCASTER HORIZONTAL SCROLL
══════════════════════════════════════════════════════════════════════ */
.broadcaster-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;

    padding-bottom: 8px;
    margin: 0 -4px;
}

.broadcaster-grid {
    row-gap: 14px;
}

.broadcaster-grid .broadcaster-card {
    min-width: unset;
    flex-shrink: unset;
    height: 100%;
}
.broadcaster-scroll::-webkit-scrollbar {
    height: 4px;
}
.broadcaster-scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,.03);
    border-radius: 2px;
}
.broadcaster-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1);
    border-radius: 2px;
}
.broadcaster-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.2);
}
.broadcaster-scroll > .broadcaster-card {
    scroll-snap-align: start;
    min-width: 180px;
    flex: 0 0 180px;
}

@media (max-width: 767.98px) {
    .broadcaster-scroll > .broadcaster-card {
        min-width: 160px;
        flex: 0 0 160px;
    }
}

/* ══════════════════════════════════════════
   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, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(87, 176, 255, 0.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, 0.92) 0%, rgba(13, 18, 28, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 28px 70px rgba(0, 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, 0.12);
    border: 1px solid rgba(87, 176, 255, 0.22);
    color: #57b0ff;
    font-size: 24px;
}
.auth-card__icon--success {
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.22);
    color: #34d399;
}
.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: rgba(255, 255, 255, 0.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: rgba(255, 255, 255, 0.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: #f87171; }
.auth-card__pw-strength[data-level="1"] small { color: #f87171; }
.auth-card__pw-strength[data-level="2"] .auth-card__pw-bar span { width: 50%; background: #fbbf24; }
.auth-card__pw-strength[data-level="2"] small { color: #fbbf24; }
.auth-card__pw-strength[data-level="3"] .auth-card__pw-bar span { width: 75%; background: #57b0ff; }
.auth-card__pw-strength[data-level="3"] small { color: #57b0ff; }
.auth-card__pw-strength[data-level="4"] .auth-card__pw-bar span { width: 100%; background: #34d399; }
.auth-card__pw-strength[data-level="4"] small { color: #34d399; }

/* Meta row (remember me + forgot link) */
.auth-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.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, 0.10);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: #fca5a5;
}
.auth-card__feedback--success {
    background: rgba(52, 211, 153, 0.10);
    border: 1px solid rgba(52, 211, 153, 0.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: rgba(255, 255, 255, 0.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, 0.10);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.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: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}
.auth-card__social-btn--discord:hover {
    border-color: rgba(88, 101, 242, 0.4);
    background: rgba(88, 101, 242, 0.10);
}
.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 rgba(255, 255, 255, 0.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, 0.10);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    caret-color: #57b0ff;
    transition: border-color .2s, background .2s, box-shadow .2s;
    outline: none;
}
.otp-input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(87, 176, 255, 0.50);
    box-shadow: 0 0 0 0.18rem rgba(87, 176, 255, 0.14);
}
.otp-input.filled {
    border-color: rgba(87, 176, 255, 0.35);
    background: rgba(87, 176, 255, 0.06);
}
.otp-input.is-invalid {
    border-color: rgba(248, 113, 113, 0.6);
    box-shadow: 0 0 0 0.18rem rgba(248, 113, 113, 0.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; }
}

/* ══════════════════════════════════════════
   SETTINGS PAGE (profilim.html)
══════════════════════════════════════════ */

/* Layout */
.settings-layout {
    display: flex;
    max-width: 1600px;
    margin: 0 auto;
    padding: 32px 24px 80px;
    gap: 0;
}

/* Sidebar */
.settings-sidebar {
    flex: 0 0 220px;
    padding-right: 24px;
}

.settings-sidebar__title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
    padding: 0 12px;
}

.settings-sidebar__nav {
    display: flex;
    flex-direction: column;
}

.settings-sidebar__item {
    display: block;
    padding: 10px 12px;
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--c-text-muted, #8ba3c7);
    text-decoration: none;
    transition: background .18s, color .18s;
    cursor: pointer;
}

.settings-sidebar__nav > .settings-sidebar__item > .material-symbols-outlined:not(.settings-sidebar__arrow),
.settings-sidebar__sub-item > .material-symbols-outlined {
    color: #57b0ff !important;
}

.settings-sidebar__item:hover {
    background: rgba(87, 176, 255, .08);
    color: #fff;
}

.settings-sidebar__item.active {
    background: rgba(87, 176, 255, .12);
    color: #fff;
    font-weight: 600;
}

/* 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__sub-item {
    display: block;
    padding: 7px 12px;
    border-radius: var(--r-sm);
    font-size: 12px;
    color: var(--c-text-subtle, #5a6b82);
    text-decoration: none;
    transition: background .18s, color .18s;
    cursor: pointer;
    position: relative;
}

.settings-sidebar__sub-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--c-primary);
    border-radius: 2px;
    transition: height .18s;
}

.settings-sidebar__sub-item:hover {
    background: rgba(87, 176, 255, .06);
    color: var(--c-text-muted, #8ba3c7);
}

.settings-sidebar__sub-item.active {
    color: var(--c-primary);
    background: rgba(87, 176, 255, .08);
}

.settings-sidebar__sub-item.active::before {
    height: 16px;
}

.settings-sidebar__item--has-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.settings-sidebar__item--has-sub .settings-sidebar__arrow {
    margin-left: auto;
}

.settings-sidebar__item--has-sub .settings-sidebar__arrow {
    font-size: 12px;
    transition: transform .2s;
    margin-left: auto;
}

.settings-sidebar__item--has-sub.active .settings-sidebar__arrow {
    transform: rotate(180deg);
}

/* Main Content */
.settings-content {
    flex: 1 1 0%;
    min-width: 0;
    padding-left: 40px;
    border-left: 1px solid rgba(255, 255, 255, .07);
}

/* Panel visibility */
.settings-panel {
    display: none;
}

.settings-panel.active {
    display: block;
}

/* Section Header */
.settings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 24px;
}

.settings-header__text {
    flex: 1;
}

.settings-header__title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}

.settings-header__desc {
    font-size: 13px;
    color: var(--c-text-muted, #8ba3c7);
    margin: 0 0 6px;
    line-height: 1.5;
}

.settings-header__meta {
    font-size: 12px;
    color: var(--c-text-subtle, #5a6b82);
    margin: 0;
}

.settings-header__illustration {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(87, 176, 255, .15) 0%, rgba(87, 176, 255, .06) 50%, rgba(250, 200, 80, .08) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.settings-header__illustration i {
    font-size: 48px;
    color: rgba(87, 176, 255, .7);
}

.settings-header__illustration::before {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    background: rgba(248, 113, 113, .35);
    border-radius: 50%;
    top: 12px;
    right: 18px;
}

.settings-header__illustration::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: rgba(250, 200, 80, .4);
    border-radius: 50%;
    top: 6px;
    right: 8px;
}

/* Divider */
.settings-divider {
    height: 1px;
    background: rgba(255, 255, 255, .06);
    margin: 28px 0;
}

/* Section Block */
.settings-block {
    margin-bottom: 32px;
}

/* Card variant (product-detail-view-right style) */
.settings-block--card {
    position: relative;
    background: rgba(24, 27, 33, .65);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 20px;
    overflow: hidden;
}

.settings-block__title {
    font-size: 15px;
    font-weight: 700;
    color: #e6eefb;
    margin: 0 0 6px;
}

.settings-block__desc {
    font-size: 12px;
    color: var(--c-text-subtle, #5a6b82);
    margin: 0 0 20px;
    line-height: 1.5;
}

/* Profile Row */
.settings-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.settings-profile__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(87, 176, 255, .2), rgba(87, 176, 255, .08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #8bc7ff;
    flex-shrink: 0;
    overflow: hidden;
}

.settings-profile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-profile__name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

/* Settings Row */
.settings-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 0;
}

.settings-row + .settings-row {
    border-top: 1px solid rgba(255, 255, 255, .04);
}

.settings-row__label {
    flex: 0 0 180px;
    font-size: 13px;
    color: var(--c-text-muted, #8ba3c7);
    padding-top: 2px;
}

.settings-row__content {
    flex: 1;
}

/* Links */
.link-primary {
    color: var(--c-primary);
    text-decoration: none;
    font-size: 13px;
    display: inline-block;
    margin-bottom: 6px;
    transition: color .18s;
}

.link-primary:hover {
    color: #8ac9ff;
}

.link-primary--block {
    display: block;
}

.text-muted-o {
    font-size: 12px;
    color: var(--c-text-subtle, #5a6b82);
    margin: 2px 0 0;
}

/* Stats grid */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.stat-card {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    height: 100%;
}

.stat-card__value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.stat-card__label {
    font-size: 11px;
    color: var(--c-text-subtle, #5a6b82);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.stat-card--primary .stat-card__value {
    color: var(--c-primary);
}

.stat-card--primary {
    background: rgba(87, 176, 255, .06);
    border-color: rgba(87, 176, 255, .18);
}

.stat-card--success .stat-card__value {
    color: var(--c-success, #34d399);
}

.stat-card--success {
    background: rgba(52, 211, 153, .06);
    border-color: rgba(52, 211, 153, .18);
}

.stat-card--gold .stat-card__value {
    color: var(--c-warning, #fbbf24);
}

.stat-card--gold {
    background: rgba(251, 191, 36, .06);
    border-color: rgba(251, 191, 36, .18);
}

.stat-card--danger .stat-card__value {
    color: var(--c-danger, #f87171);
}

.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 rgba(255,255,255,.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__avatar img { width: 100%; height: 100%; object-fit: cover; }
.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: #fbbf24; }
.sp-banner__review-count { font-size: 13px; color: #64748b; }
.sp-banner__actions { flex-shrink: 0; }

/* Sidebar */
.sp-sidebar { display: flex; flex-direction: column; gap: 16px; }
.sp-stat-card {
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px; padding: 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-card__title .material-symbols-outlined { font-size: 18px; color: var(--c-primary); }
/* .sp-stat-grid düzeni Bootstrap .row g-2 + .col-6 ile sağlanır */
.sp-stat-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: rgba(255,255,255,.03); border-radius: 8px; padding: 10px 6px;
    border: 1px solid rgba(255,255,255,.04); text-align: center;
}
.sp-stat-item .material-symbols-outlined { font-size: 18px; color: #64748b; }
.sp-stat-item strong { font-size: 20px; color: #f1f5f9; }
.sp-stat-item > span:not(.material-symbols-outlined) { font-size: 11px; color: #64748b; font-weight: 600; }
.sp-stat-item--ok > .material-symbols-outlined { color: #22c55e; }
.sp-stat-item--fail > .material-symbols-outlined { color: #ef4444; }

/* 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 rgba(255,255,255,.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; }

/* Listing cards */
.sp-listings { display: flex; flex-direction: column; gap: 10px; }
.sp-listing-card {
    display: flex; align-items: center; gap: 16px;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px; padding: 14px; text-decoration: none;
    transition: border-color .2s, background .2s;
}
.sp-listing-card:hover {
    border-color: rgba(87,176,255,.3); background: rgba(87,176,255,.04);
}
.sp-listing-card__img {
    width: 64px; height: 64px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
    background: rgba(255,255,255,.04);
}
.sp-listing-card__img img { width: 100%; height: 100%; object-fit: cover; }
.sp-listing-card__body { flex: 1; min-width: 0; }
.sp-listing-card__game { font-size: 11px; color: #64748b; font-weight: 600; margin-bottom: 2px; }
.sp-listing-card__name {
    font-size: 15px; font-weight: 700; color: #f1f5f9; margin: 0 0 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-listing-card__meta { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-listing-card__tag {
    font-size: 11px; color: #94a3b8; display: inline-flex; align-items: center; gap: 3px;
    background: rgba(255,255,255,.04); padding: 2px 8px; border-radius: 4px;
}
.sp-listing-card__tag .material-symbols-outlined { font-size: 14px; }
.sp-listing-card__price {
    font-size: 18px; font-weight: 800; color: #fbbf24; white-space: nowrap; flex-shrink: 0;
}
.sp-listing-card__price small { font-size: 12px; font-weight: 600; opacity: .7; }

/* Reviews */
.sp-review-summary {
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px; padding: 20px; margin-bottom: 16px; text-align: center;
}
.sp-review-summary__score strong {
    font-size: 40px; font-weight: 800; color: #fbbf24; 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 {
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px; padding: 16px;
}
.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; }
.sp-review-item__product {
    font-size: 12px; color: #64748b; display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,.04); padding: 4px 10px; border-radius: 4px;
}
.sp-review-item__product .material-symbols-outlined { font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   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 rgba(255,255,255,.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: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.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; }

/* Filter Sidebar */
.bc-filter {
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px; padding: 16px;
}
.bc-filter__header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.bc-filter__title {
    font-size: 15px; font-weight: 700; color: #f1f5f9; margin: 0;
    display: flex; align-items: center; gap: 6px;
}
.bc-filter__title .material-symbols-outlined { font-size: 18px; color: var(--c-primary); }
.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: rgba(255,255,255,.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 rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 14px 18px;
}
.bc-content__toolbar-left {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.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 { 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: 991px) {
    #bcGrid > .col-2 { flex: 0 0 25%; max-width: 25%; }
}
@media (max-width: 575px) {
    #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: #ef4444; 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: #57b0ff; }
.bd-video__play .material-symbols-outlined { font-size: 40px; color: #fff; }
.bd-video__meta {
    position: absolute; bottom: 14px; left: 14px;
    display: flex; gap: 16px; font-size: 12px; color: rgba(255,255,255,.85);
}
.bd-video__meta span { display: flex; align-items: center; gap: 4px; }
.bd-video__meta .material-symbols-outlined { font-size: 16px; }

/* Streamer Info Bar */
.bd-streamer-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.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: rgba(255,255,255,.06); padding: 3px 8px; border-radius: 4px;
}
.bd-tag--live { color: #ef4444; 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: #57b0ff; }

/* Info Cards */
.bd-info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bd-info-card {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px; padding: 18px 16px;
}
.bd-info-card__icon { font-size: 28px; color: #57b0ff; 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: #57b0ff; }

/* Recent Donations */
.bd-recent-donations {
    display: flex; flex-direction: column; gap: 1px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px; overflow: hidden;
}
.bd-donation-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; background: rgba(255,255,255,.02);
}
.bd-donation-item + .bd-donation-item { border-top: 1px solid rgba(255,255,255,.06); }
.bd-donation-item__avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.bd-donation-item__content { flex: 1; min-width: 0; }
.bd-donation-item__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.bd-donation-item__header strong { font-size: 13px; color: #e2e8f0; }
.bd-donation-item__amount {
    font-size: 13px; font-weight: 700; color: #57b0ff;
    background: rgba(87,176,255,.1); padding: 2px 8px; border-radius: 4px;
}
.bd-donation-item__content p { font-size: 12px; color: #cbd5e1; margin: 2px 0; }
.bd-donation-item__content small { font-size: 11px; color: #475569; }

/* ─── Sidebar ─────────────────── */
.bd-sidebar { display: flex; flex-direction: column; gap: 12px; }

/* Donate Panel */
.bd-donate-panel {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px; overflow: hidden;
}
.bd-donate-panel__header {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(87,176,255,.04);
}
.bd-donate-panel__header .material-symbols-outlined { font-size: 20px; color: #57b0ff; }
.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: rgba(255,255,255,.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: #57b0ff; background: rgba(87,176,255,.08); }
.bd-quick-amount--active,
.bd-quick-amount.is-active {
    border-color: #57b0ff; color: #57b0ff; 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: rgba(255,255,255,.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; }
.bd-donate-panel__currency { font-size: 13px; font-weight: 700; color: #64748b; }

/* 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: rgba(255,255,255,.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; }

/* Checkbox */
.bd-donate-panel__check {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 12px; color: #94a3b8;
}
.bd-donate-panel__check input { accent-color: #57b0ff; }

/* 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 rgba(255,255,255,.06);
}
.bd-donate-panel__balance .material-symbols-outlined { font-size: 16px; }
.bd-donate-panel__balance strong { color: #cbd5e1; }
.bd-donate-panel__balance a { color: #57b0ff; margin-left: auto; font-weight: 600; text-decoration: none; }
.bd-donate-panel__balance a:hover { text-decoration: underline; }

/* Chat Panel */
.bd-chat-panel {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
}
.bd-chat-panel__header {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.bd-chat-panel__header .material-symbols-outlined { font-size: 18px; color: #57b0ff; }
.bd-chat-panel__header h4 { font-size: 14px; font-weight: 700; color: #f1f5f9; margin: 0; flex: 1; }
.bd-chat-panel__count { font-size: 11px; color: #64748b; }

.bd-chat-panel__messages {
    height: 320px; overflow-y: auto; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 8px;
}
.bd-chat-panel__messages::-webkit-scrollbar { width: 8px; }
.bd-chat-panel__messages::-webkit-scrollbar-track { background: transparent; }
.bd-chat-panel__messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }
.bd-chat-msg { font-size: 13px; color: #cbd5e1; line-height: 1.5; }
.bd-chat-msg strong { font-size: 12px; margin-right: 4px; }
.bd-chat-msg--donation {
    background: rgba(87,176,255,.08); border-radius: 6px; padding: 6px 10px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.bd-chat-msg--donation .material-symbols-outlined { font-size: 14px; color: #57b0ff; }
.bd-chat-msg--donation strong { color: #57b0ff; }
.bd-chat-msg--donation em { font-size: 11px; color: #94a3b8; font-style: normal; }
.bd-chat-msg--donation > span:last-child { width: 100%; font-size: 12px; color: #e2e8f0; margin-top: 2px; }

.bd-chat-panel__input-area {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.06);
}
.bd-chat-panel__input {
    flex: 1; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px; padding: 8px 12px; font-size: 13px; color: #f1f5f9;
    outline: none; transition: border-color .2s;
}
.bd-chat-panel__input:focus { border-color: rgba(87,176,255,.5); }
.bd-chat-panel__input::placeholder { color: #475569; }
.bd-chat-panel__send {
    background: #57b0ff; border: none; border-radius: 6px; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .15s;
}
.bd-chat-panel__send:hover { background: #3d9ae8; }
.bd-chat-panel__send .material-symbols-outlined { font-size: 18px; color: #0a0f18; }

/* Responsive — Broadcaster Detail */
@media (max-width: 991px) {
    .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: 575px) {
    .bd-video__play { width: 56px; height: 56px; }
    .bd-video__play .material-symbols-outlined { font-size: 32px; }
}

/* Responsive */
@media (max-width: 767px) {
    .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; }
    .sp-listing-card { flex-direction: column; text-align: center; }
    .sp-listing-card__meta { justify-content: center; }
}

/* Membership badge */
.badge-membership {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(87, 176, 255, .1);
    border: 1px solid rgba(87, 176, 255, .15);
    color: var(--c-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
}

/* Dashboard Quick Actions Grid */
.settings-quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.settings-quick-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    transition: background .18s, border-color .18s;
}

.settings-quick-card:hover {
    background: rgba(87, 176, 255, .08);
    border-color: rgba(87, 176, 255, .18);
    color: #fff;
}

.settings-quick-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(87, 176, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #57b0ff;
    flex-shrink: 0;
}

.settings-quick-card__icon--gold {
    background: rgba(251, 191, 36, .12);
    color: #fbbf24;
}

.settings-quick-card__icon--green {
    background: rgba(52, 211, 153, .12);
    color: #34d399;
}

.settings-quick-card__icon--purple {
    background: rgba(167, 139, 250, .12);
    color: #a78bfa;
}

.settings-quick-card__text {
    flex: 1;
}

.settings-quick-card__text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.settings-quick-card__text span {
    font-size: 12px;
    color: var(--c-text-subtle, #5a6b82);
}

.settings-quick-card__arrow {
    color: var(--c-text-subtle, #5a6b82);
    font-size: 14px;
    flex-shrink: 0;
}

/* Dashboard Two Column */
.settings-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

/* Dashboard Order List */
.settings-order-list {
    display: flex;
    flex-direction: column;
}

.settings-order-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

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

.settings-order-item__info {
    flex: 1;
}

.settings-order-item__info strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #e6eefb;
    margin-bottom: 2px;
}

.settings-order-item__info span {
    font-size: 11px;
    color: var(--c-text-subtle, #5a6b82);
}

.settings-order-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.settings-order-badge--success {
    background: rgba(52, 211, 153, .12);
    color: var(--c-success, #34d399);
}

.settings-order-badge--pending {
    background: rgba(251, 191, 36, .12);
    color: var(--c-warning, #fbbf24);
}

.settings-order-item__price {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-primary);
    white-space: nowrap;
}

.settings-order-item__report {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(239, 68, 68, .25);
    background: rgba(239, 68, 68, .08);
    color: #f87171;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, border-color .2s;
}

.settings-order-item__report:hover {
    background: rgba(239, 68, 68, .18);
    border-color: rgba(239, 68, 68, .45);
}

.settings-order-item__report .material-symbols-outlined {
    font-size: 14px;
}

/* Report Modal (modal-o component) */
.report-modal .modal-o {
    max-width: 480px;
    position: relative;
    border: 1px solid rgba(239, 68, 68, .18);
    border-radius: 0;
    background:
        linear-gradient(145deg, rgba(239, 68, 68, .08) 0%, rgba(180, 40, 40, .03) 100%),
        radial-gradient(circle at top, rgba(34, 40, 56, .96) 0%, rgba(11, 14, 20, .98) 100%);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .45);
    overflow: hidden;
}

.report-modal .modal-o::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(239, 68, 68, .1) 0%, rgba(239, 68, 68, 0) 28%);
    pointer-events: none;
}

.report-modal__body {
    position: relative;
    z-index: 1;
    padding: 30px 30px 26px;
}

.report-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 0;
    background: rgba(255, 255, 255, .06);
    color: #dbe8ff;
    transition: background .2s ease, transform .2s ease;
}

.report-modal__close:hover {
    background: rgba(255, 255, 255, .14);
    transform: rotate(90deg);
}

.report-modal__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.report-modal__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(239, 68, 68, .12);
    color: #f87171;
    flex-shrink: 0;
}

.report-modal__icon .material-symbols-outlined {
    font-size: 24px;
}

.report-modal__title {
    margin: 0 0 2px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.report-modal__order-info {
    margin: 0;
    color: #95a5bd;
    font-size: 12px;
}

.report-modal__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.report-modal__form .select-o-group,
.report-modal__form .input-o-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.report-modal__form .select-o-label,
.report-modal__form .input-o-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .4);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.report-modal__form .input-o {
    width: 100%;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    padding: 11px 14px;
    transition: border-color .2s;
    outline: none;
}

.report-modal__form .input-o:focus {
    border-color: rgba(239, 68, 68, .5);
}

.report-modal__form .input-o::placeholder {
    color: #64748b;
}

.report-modal__form textarea.input-o {
    resize: vertical;
    min-height: 80px;
}

.report-modal__form .o-choices.is-open .choices__inner {
    border-color: rgba(239, 68, 68, .4) !important;
}

.report-modal__form .o-choices .choices__list--dropdown,
.report-modal__form .o-choices .choices__list[aria-expanded] {
    border-color: rgba(239, 68, 68, .4) !important;
}

.report-modal__form .o-choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
.report-modal__form .o-choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: rgba(239, 68, 68, .1) !important;
    color: #f87171 !important;
}

.report-modal__form .o-choices .choices__list--dropdown .choices__item--selectable.is-selected {
    color: #f87171 !important;
}

.report-modal__form .o-choices.is-open::after {
    border-color: transparent transparent #f87171 !important;
}

.report-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.report-modal__submit {
    background: rgba(239, 68, 68, .15) !important;
    border: 1px solid rgba(239, 68, 68, .3) !important;
    color: #f87171 !important;
    font-weight: 600;
    transition: background .2s, border-color .2s;
}

.report-modal__submit:hover {
    background: rgba(239, 68, 68, .28) !important;
    border-color: rgba(239, 68, 68, .5) !important;
}

/* Invoice Table — simple-datatables v9 dark theme */
.invoice-table-wrap {
    margin-top: 16px;
}

/* Reset library defaults */
.invoice-table-wrap .datatable-wrapper.no-header .datatable-container,
.invoice-table-wrap .datatable-wrapper.no-footer .datatable-container {
    border: none;
}

.invoice-table-wrap .datatable-wrapper .datatable-top::after,
.invoice-table-wrap .datatable-wrapper .datatable-bottom::after {
    display: none;
}

/* ── DataTable Top / Bottom Controls ── */
.invoice-table-wrap .datatable-top,
.invoice-table-wrap .datatable-bottom {
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.invoice-table-wrap .datatable-top {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    padding-bottom: 14px;
    margin-bottom: 0;
}

.invoice-table-wrap .datatable-bottom {
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding-top: 14px;
    margin-top: 0;
}

/* ── Per-page Selector (Choices.js) ── */
.invoice-table-wrap .datatable-dropdown {
    font-size: 13px;
    color: var(--c-text-muted);
}

.invoice-table-wrap .datatable-dropdown label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.invoice-table-wrap .datatable-dropdown .o-choices {
    min-width: 70px;
}

/* ── Search Input ── */
.invoice-table-wrap .datatable-search {
    display: flex;
    align-items: center;
}

.invoice-table-wrap .datatable-input {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    padding: 8px 14px;
    outline: none;
    min-width: 180px;
    transition: border-color .15s, background .15s;
}

.invoice-table-wrap .datatable-input::placeholder {
    color: #64748b;
}

.invoice-table-wrap .datatable-input:focus {
    border-color: rgba(87, 176, 255, .5);
    background: rgba(87, 176, 255, .06);
}

/* ── Info Text ── */
.invoice-table-wrap .datatable-info {
    font-size: 13px;
    color: var(--c-text-muted);
}

/* ── Table ── */
.invoice-table-wrap .datatable-container {
    overflow-x: auto;
}

.invoice-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.invoice-table thead th {
	color: rgba(255, 255, 255, .45);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	padding: 12px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
	white-space: nowrap;
}

/* Sorter arrows */
.invoice-table .datatable-sorter {
    color: inherit;
}

.invoice-table .datatable-sorter::before,
.invoice-table .datatable-sorter::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: .25;
}

.invoice-table .datatable-sorter::before {
    border-top-color: #fff;
}

.invoice-table .datatable-sorter::after {
    border-bottom-color: #fff;
}

.invoice-table thead th.datatable-ascending .datatable-sorter::after {
    opacity: .85;
    border-bottom-color: #57b0ff;
}

.invoice-table thead th.datatable-descending .datatable-sorter::before {
    opacity: .85;
    border-top-color: #57b0ff;
}

.invoice-table tbody td {
    padding: 12px 14px;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    white-space: nowrap;
}

.invoice-table tbody tr {
    transition: background .12s;
}

.invoice-table tbody tr:hover td {
    background: rgba(255, 255, 255, .025);
}

/* ── Badges ── */
.invoice-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.invoice-badge--success {
    background: rgba(52, 211, 153, .12);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, .18);
}

.invoice-badge--pending {
    background: rgba(251, 191, 36, .12);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, .18);
}

/* ── Action buttons ── */
.invoice-view-btn {
    gap: 4px;
}

.invoice-view-btn .material-symbols-outlined,
.invoice-pending-btn .material-symbols-outlined {
    font-size: 15px;
}

.invoice-pending-btn {
    gap: 4px;
    opacity: .5;
    cursor: not-allowed;
}

/* ── Pagination ── */
.invoice-table-wrap .datatable-pagination-list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.invoice-table-wrap .datatable-pagination-list li {
    float: none;
}

.invoice-table-wrap .datatable-pagination-list button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.invoice-table-wrap .datatable-pagination-list button:hover {
    background: rgba(255, 255, 255, .06);
    color: #e2e8f0;
}

.invoice-table-wrap .datatable-pagination-list .datatable-active button {
    background: rgba(87, 176, 255, .15);
    border-color: rgba(87, 176, 255, .3);
    color: #57b0ff;
}

.invoice-table-wrap .datatable-pagination-list .datatable-disabled button {
    opacity: .3;
    pointer-events: none;
    cursor: not-allowed;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .invoice-table-wrap .datatable-top,
    .invoice-table-wrap .datatable-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .invoice-table-wrap .datatable-input {
        min-width: 100%;
    }
}

/* Dashboard Activity List */
.settings-activity-list {
    display: flex;
    flex-direction: column;
}

.settings-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
}

.settings-activity-item + .settings-activity-item {
    border-top: 1px solid rgba(255, 255, 255, .04);
}

.settings-activity-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

.settings-activity-dot--blue {
    background: var(--c-primary);
}

.settings-activity-dot--green {
    background: var(--c-success, #34d399);
}

.settings-activity-dot--gold {
    background: var(--c-warning, #fbbf24);
}

.settings-activity-dot--red {
    background: var(--c-danger, #f87171);
}

.settings-activity-item strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #e6eefb;
    margin-bottom: 2px;
}

.settings-activity-item span {
    font-size: 11px;
    color: var(--c-text-subtle, #5a6b82);
}

/* ── Settings Page Responsive ── */
@media (max-width: 991.98px) {
    .settings-layout {
        flex-direction: column;
        padding: 20px 16px 60px;
    }

    .settings-sidebar {
        flex: none;
        padding-right: 0;
        margin-bottom: 20px;
    }

    .settings-sidebar__nav {
        flex-direction: row;
        overflow-x: auto;
        gap: 4px;
        padding-bottom: 8px;
    }

    .settings-sidebar__item {
        white-space: nowrap;
        font-size: 12px;
        padding: 8px 14px;
    }

    .settings-content {
        padding-left: 0;
        border-left: none;
    }

    .settings-header {
        flex-direction: column-reverse;
        gap: 16px;
    }

    .settings-header__illustration {
        width: 80px;
        height: 80px;
    }

    .settings-header__illustration i {
        font-size: 36px;
    }

    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .settings-row {
        flex-direction: column;
        gap: 4px;
    }

    .settings-row__label {
        flex: none;
        font-size: 12px;
    }

    .settings-quick-grid {
        grid-template-columns: 1fr;
    }

    .settings-two-col {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ── Dashboard Welcome Banner ── */
.dash-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(87,176,255,.08) 0%, rgba(87,176,255,.02) 100%);
    border: 1px solid rgba(87,176,255,.12);
    border-radius: 10px;
    margin-bottom: 8px;
}

.dash-welcome__body {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    min-width: 0;
}

.dash-welcome__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(87,176,255,.2), rgba(87,176,255,.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #8bc7ff;
    flex-shrink: 0;
    overflow: hidden;
}

.dash-welcome__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dash-welcome__info {
    min-width: 0;
}

.dash-welcome__name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-welcome__meta {
    font-size: 12px;
    color: var(--c-text-subtle, #5a6b82);
    margin: 0 0 8px;
}

.dash-welcome__badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dash-welcome__member-since {
    font-size: 11px;
    color: var(--c-text-subtle, #5a6b82);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dash-welcome__wallet {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.dash-welcome__wallet-label {
    font-size: 11px;
    color: var(--c-text-subtle, #5a6b82);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.dash-welcome__wallet-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--c-success, #34d399);
}

/* ── Dashboard Pending Items ── */
.dash-pending-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.dash-pending-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    text-decoration: none;
    color: #fff;
    transition: background .18s, border-color .18s;
}

.dash-pending-item:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
    color: #fff;
}

.dash-pending-item__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.dash-pending-item__icon--warning {
    background: rgba(251,191,36,.1);
    color: #fbbf24;
}

.dash-pending-item__icon--info {
    background: rgba(87,176,255,.1);
    color: #57b0ff;
}

.dash-pending-item__icon--danger {
    background: rgba(248,113,113,.1);
    color: #f87171;
}

.dash-pending-item__info {
    flex: 1;
    min-width: 0;
}

.dash-pending-item__info strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #e6eefb;
    margin-bottom: 2px;
}

.dash-pending-item__info span {
    font-size: 11px;
    color: var(--c-text-subtle, #5a6b82);
}

/* ── Dashboard Wallet Progress Bar ── */
.dash-wallet-bar {
    margin-top: 20px;
}

.dash-wallet-bar__header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--c-text-subtle, #5a6b82);
    margin-bottom: 8px;
}

.dash-wallet-bar__track {
    height: 6px;
    background: rgba(255,255,255,.06);
    border-radius: 3px;
    overflow: hidden;
}

.dash-wallet-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-primary), var(--c-success, #34d399));
    border-radius: 3px;
    transition: width .4s ease;
}

/* ── Block Header Row (title + link) ── */
.settings-block__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.settings-block__header-row .settings-block__title {
    margin-bottom: 0;
}

.settings-block__header-row .link-primary {
    font-size: 12px;
    margin-bottom: 0;
    white-space: nowrap;
}

/* ── Dashboard Responsive ── */
@media (max-width: 991.98px) {
    .dash-welcome {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .dash-welcome__wallet {
        align-items: flex-start;
        flex-direction: row;
        gap: 12px;
    }
}

@media (max-width: 575.98px) {
    .dash-welcome__body {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ── Dashboard Grid Variants ── */
.stat-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.stat-grid--5 {
    grid-template-columns: repeat(5, 1fr);
}

.settings-quick-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ── Dashboard Star Rating ── */
.star-rating {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.star-rating .material-symbols-outlined {
    font-size: 10px;
}

.star-rating .material-symbols-outlined.filled {
    color: #fbbf24;
}

.star-rating .material-symbols-outlined:not(.filled) {
    color: var(--c-text-subtle, #5a6b82);
}

/* ── Dashboard Inline-style Replacements ── */
.settings-order-badge--info {
    background: rgba(87, 176, 255, .12);
    color: #57b0ff;
}

.settings-block__title-icon {
    font-size: 18px;
    margin-right: 6px;
    vertical-align: middle;
}

.settings-block__title-icon--warning {
    color: #fbbf24;
}

.settings-order-item__comment {
    font-size: 12px;
    font-weight: 400;
    color: var(--c-text-muted, #8ba3c7);
    white-space: normal;
}

.stat-card__value .material-symbols-outlined {
    font-size: 13px;
    vertical-align: middle;
}

/* ── Dashboard Grid Responsive ── */
@media (max-width: 991.98px) {
    .stat-grid--5 {
        grid-template-columns: repeat(3, 1fr);
    }

    .settings-quick-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .stat-grid--5 {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .settings-quick-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ══════════════════════════════════════════
   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: rgba(255, 255, 255, 0.04);
}

.payment-method-tab .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 19px;
}

.payment-method-tab__text {
    display: grid;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.payment-method-tab__text strong,
.payment-method-tab__text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-method-tab__text small {
    color: currentColor;
    font-size: 11px;
    font-weight: 500;
    opacity: .72;
}

.payment-method-tab.is-active {
    color: #fff;
    background: rgba(87, 176, 255, .15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.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-grid {
    /* Düzen Bootstrap .row g-2 ile sağlanır (havale banka listesiyle aynı) */
}

.payment-provider-card {
    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: rgba(255, 255, 255, .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: 140px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.payment-provider-card span {
    font-size: 12px;
    color: var(--c-text-muted);
    font-weight: 500;
}

.payment-security-note {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, .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,.10);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), transparent 34%),
        rgba(26,29,36,.95);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 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;
}

.payment-action-card__total-group {
    display: grid;
    gap: 6px;
    min-width: 150px;
}

.payment-action-card__total {
    display: flex;
    align-items: center;
    min-height: 44.6px;
    height: 44.6px;
    padding: 0 14px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: rgba(255,255,255,.03);
}

.payment-action-card__total strong {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}


.payment-method-summary__row strong small,
.payment-action-card__total strong small {
    color: rgb(87, 176, 255);

}

#cardPayBtn,
#havaleNotifyBtn {
    min-height: 44.6px;
    height: 44.6px;
}

.payment-gateway-frame {
    margin-top: 18px;
    border: 1px solid rgba(87,176,255,.18);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,.03);
}

.payment-gateway-frame__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #fff;
    font-size: 13px;
}

.payment-gateway-frame__head .material-symbols-outlined {
    color: var(--c-primary);
    font-size: 19px;
}

.payment-gateway-frame iframe {
    display: block;
    width: 100%;
    height: 310px;
    border: 0;
    background: #fff;
}

/* 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: rgba(255, 255, 255, .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 .material-symbols-outlined {
    color: var(--c-primary);
    font-size: 18px;
}

.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 rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
}

.bank-detail-card__payment {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed rgba(255,255,255,.10);
}

.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__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bank-detail-card__value--mono {
    display: inline-block;
    font-size: 13px;
    color: #fff;
    font-family: monospace;
    word-break: break-all;
}

.bank-detail-card__copy {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
    color: var(--c-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all .15s;
}

.bank-detail-card__copy:hover {
    border-color: rgba(87, 176, 255, .45);
    background: rgba(87, 176, 255, .12);
    color: var(--c-primary);
}

.bank-detail-card__copy .material-symbols-outlined {
    font-size: 16px;
    line-height: 1;
}

/* Layout + Summary (odeme-bakiye-ekle) */
.payment-method-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 20px;
    align-items: start;
}

.payment-method-main {
    min-width: 0;
}

.payment-method-summary {
    position: sticky;
    top: 16px;
    padding: 16px;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
}

.payment-method-summary__title {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.payment-method-summary__rows {
    display: grid;
    gap: 10px;
}

.payment-method-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--c-text-muted);
}

.payment-method-summary__row strong {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
}

.payment-method-summary__note {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--c-border);
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: var(--c-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.payment-method-summary__note .material-symbols-outlined {
    color: var(--c-primary);
    font-size: 18px;
    line-height: 1;
}

@media (max-width: 991.98px) {
    .payment-method-layout {
        grid-template-columns: 1fr;
    }

    .payment-method-summary {
        position: static;
    }

    .payment-action-card__form,
    .bank-detail-card__payment {
        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: #57b0ff;
}

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,
.site-header__main > .user-panel,
.site-nav .nav,
.header-nav .nav,
.product-row__content,
.product-row__main,
.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 {
    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 {
        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;
    }

    .product-row__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
    }

    .product-row-qty {
        grid-column: 1 / -1;
        justify-content: flex-end;
        margin: 0;
    }

    .product-row__trade {
        min-width: 0;
        padding: 8px;
    }

    .product-row__action {
        max-width: none;
    }

    .product-banner + section {
        margin-top: 0;
    }
}

@media (max-width: 575.98px) {
    .site-header__main {
        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;
    }

    .product-row__actions {
        grid-template-columns: 1fr;
    }

    .product-row-qty {
        justify-content: flex-start;
    }

    .product-row__trade {
        align-items: stretch;
        text-align: left;
    }

    .product-row__trade-label {
        justify-content: flex-start;
    }

    .product-sell-panel__product-card,
    .product-buy-panel__product-card,
    .payment-action-card__head,
    .bank-detail-card__row {
        flex-wrap: wrap;
    }
    /* (bank-detail-card__grid mobil kırılımı Bootstrap col-md-6 ile çözülür) */
}


.product-detail-page--flat .product-detail-hero, .product-detail-page--flat .product-detail-purchase-card, .product-detail-page--flat .product-detail-view-left, .product-detail-page--flat .product-detail-view-right, .product-detail-page--flat .product-detail-view-purchase, .product-detail-page--flat .product-detail-side, .product-detail-page--flat .detail-tabs {
	background: #16181f;
	/* background: radial-gradient(110% 80% at 50% 0%, rgba(87, 176, 255, 0.08), transparent 62%), linear-gradient(180deg, rgba(18, 23, 32, 0.96), rgba(10, 14, 20, 0.97)); */
}

.product-detail-page--flat .product-detail-hero {
    background:
        radial-gradient(110% 80% at 50% 0%, rgba(87, 176, 255, 0.08), transparent 62%),
        linear-gradient(180deg, rgba(18, 23, 32, 0.96), rgba(10, 14, 20, 0.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 .product-detail-hero,
.product-detail-page--flat.product-detail-page--cash-principles .product-detail-purchase-card,
.product-detail-page--flat.product-detail-page--cash-principles .product-detail-view-left,
.product-detail-page--flat.product-detail-page--cash-principles .product-detail-view-right,
.product-detail-page--flat.product-detail-page--cash-principles .product-detail-view-purchase,
.product-detail-page--flat.product-detail-page--cash-principles .detail-tabs {
    background: #16181f;
    border-color: rgba(255, 255, 255, 0.08);

}




.product-detail-page--cash-principles .product-detail-view__price-col,
.product-detail-page--cash-principles .product-detail-view__price-col--buy,
.product-detail-page--cash-principles .product-detail-view__price-col--sell {
    --product-detail-price-bg: rgba(var(--cash-principle-accent-rgb), 0.06);
    --product-detail-price-border: rgba(var(--cash-principle-accent-rgb), 0.16);
    --product-detail-price-label: rgb(var(--cash-principle-accent-rgb));
    --product-detail-price-value: #ffffff;
}

.product-detail-page--cash-principles .product-detail-view__delivery-box,
.product-detail-page--cash-principles .product-detail-view__field-input:focus {
    border-color: rgba(var(--cash-principle-accent-rgb), 0.28);
}

.product-detail-page--cash-principles .product-detail-view__delivery-box {
    background: rgba(var(--cash-principle-accent-rgb), 0.055);
}

.product-detail-page--cash-principles .product-detail-view__delivery-box .material-symbols-outlined,
.product-detail-page--cash-principles .product-detail-view__field-label .material-symbols-outlined,
.product-detail-page--cash-principles .detail-tabs__note .material-symbols-outlined,
.product-detail-page--cash-principles .product-detail-view__other-arrow {
    color: rgb(var(--cash-principle-accent-rgb));
}

.product-detail-page--cash-principles .detail-tabs__bar-fill {
    background: rgb(var(--cash-principle-accent-rgb));
}

.product-detail-page--cash-principles .product-detail-view__order-total-value,
.product-detail-page--cash-principles .product-detail-view__agreement-link,
.product-detail-page--cash-principles .detail-tabs__list--steps li strong {
    color: #ffffff;
}

.product-detail-page--cash-principles .product-detail-view__agreement-link {
    text-decoration-color: rgba(var(--cash-principle-accent-rgb), 0.35);
}

.product-detail-page--cash-principles .product-detail-view__agreement-link:hover,
.product-detail-page--cash-principles .product-detail-view__other-item:hover .product-detail-view__other-arrow {
    color: rgb(var(--cash-principle-accent-rgb));
    text-decoration-color: rgba(var(--cash-principle-accent-rgb), 0.7);
}

/* Goldbar detail purchase panel layout */
.product-detail-page--goldbar-detail .product-detail-view-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    overflow: visible;
}

.product-detail-page--goldbar-detail .product-detail-view-right {
    padding: 20px;
    gap: 18px;
}

.product-detail-page--goldbar-detail .product-detail-view__image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
}

.product-detail-page--goldbar-detail .product-detail-view__image {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}

.product-detail-page--goldbar-detail .product-detail-view__header,
.product-detail-page--goldbar-detail .product-detail-view__badges {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    text-align: center;
}

.product-detail-page--goldbar-detail .product-detail-view__header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-detail-page--goldbar-detail .product-detail-view__title,
.product-detail-page--goldbar-detail .product-detail-view__delivery-note {
    text-align: center;
}

.product-detail-page--goldbar-detail .product-detail-view__delivery-note {
    width: 100%;
}

.product-detail-page--goldbar-detail .product-detail-view__rating,
.product-detail-page--goldbar-detail .product-detail-view__badges.product-detail-badges {
    justify-content: center;
}

.product-detail-page--goldbar-detail .product-detail-badge {
    justify-content: center;
}

.product-detail-page--goldbar-detail .product-detail-view__fav-btn {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.product-detail-page--goldbar-detail .product-detail-view-top {
    grid-template-columns: 1fr;
    gap: 16px;
}

.product-detail-page--goldbar-detail .product-detail-view__price-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.product-detail-page--goldbar-detail .product-detail-view__price-col {
    min-width: 0;
    justify-content: space-between;
    padding: 16px 18px;
}

.product-detail-page--goldbar-detail .product-detail-view__price-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.product-detail-page--goldbar-detail .product-detail-view__price-value {
    font-size: 24px;
}

.product-detail-page--goldbar-detail .product-detail-view-top__fields {
    gap: 12px;
}

.product-detail-page--goldbar-detail .product-detail-view__field-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.product-detail-page--goldbar-detail .product-detail-view__field-input {
    height: 52px;
    padding: 0 18px;
    font-size: 15px;
}

.product-detail-page--goldbar-detail .product-detail-view__delivery-box {
    min-height: 50px;
    padding: 12px 18px;
    font-size: 14px;
}

.product-detail-page--goldbar-detail .product-detail-view__agreements {
    padding-top: 2px;
}

.product-detail-page--goldbar-detail .product-detail-view__agreement {
    align-items: center;
    color: rgba(219, 232, 255, 0.72);
    font-size: 14px;
}

.product-detail-page--goldbar-detail .product-detail-view__category-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.product-detail-page--goldbar-detail .product-detail-view__category-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    color: #fff;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.product-detail-page--goldbar-detail .product-detail-view__category-card:hover {
    border-color: rgba(var(--cash-principle-accent-rgb), 0.28);
    background: rgba(var(--cash-principle-accent-rgb), 0.065);
    transform: translateY(-2px);
}

.product-detail-page--goldbar-detail .product-detail-view__category-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.product-detail-page--goldbar-detail .product-detail-view__category-image img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
}

.product-detail-page--goldbar-detail .product-detail-view__category-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.product-detail-page--goldbar-detail .product-detail-view__category-body strong {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

.product-detail-page--goldbar-detail .product-detail-view__category-body small {
    overflow: hidden;
    color: rgba(219, 232, 255, 0.58);
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    .product-detail-page--goldbar-detail .product-detail-view-right {
        padding: 16px;
    }

    .product-detail-page--goldbar-detail .product-detail-view__price-row {
        grid-template-columns: 1fr;
    }

    .product-detail-page--goldbar-detail .product-detail-view__category-links {
        grid-template-columns: 1fr;
    }

}

/* Cash detail: purchase card and tabs share one body */
.product-detail-purchase-card > .detail-tabs {
    margin: 22px 0 0;
    padding: 20px 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    background: transparent;
    overflow: visible;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* 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 rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    background: rgba(7, 10, 17, 0.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, 0.08);
    border-color: transparent;
}

.product-detail-page--cash-tabs .tab-nav__btn.active {
    color: #07111d;
    background: linear-gradient(135deg, #57b0ff 0%, #2b7cff 100%);
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(43, 124, 255, 0.34);
}

.product-detail-page--cash-tabs .detail-tabs__badge {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.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, 0.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;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   KNIGHT ONLINE CASH — REDESIGN (scoped)
   Body class: .ko-cash-redesign
   Modern dark / refined glassmorphism. Hiçbir başka sayfayı etkilemez.
   ═══════════════════════════════════════════════════════════════════ */

.ko-cash-redesign {
    --koc-accent: #fac850;
    --koc-accent-rgb: 250, 200, 80;
    --koc-accent-2: #57b0ff;
    --koc-accent-2-rgb: 87, 176, 255;
    --koc-bg: #0b0d12;
    --koc-surface: #16181f;
    --koc-surface-2: #1c1f28;
    --koc-border: rgba(255, 255, 255, 0.07);
    --koc-border-strong: rgba(255, 255, 255, 0.12);
    --koc-text: #e6ecf5;
    --koc-text-muted: rgba(219, 232, 255, 0.6);
    --koc-radius-lg: 18px;
    --koc-radius-md: 12px;
    --koc-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.85);
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(var(--koc-accent-rgb), 0.06), transparent 60%),
        radial-gradient(900px 500px at -10% 30%, rgba(var(--koc-accent-2-rgb), 0.05), transparent 60%),
        var(--koc-bg);
}

/* ── Topbar / Header / Nav refinement ── */
.ko-cash-redesign .site-header__topbar {
    background: rgba(11, 13, 18, 0.85);
    border-bottom: 1px solid var(--koc-border);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.ko-cash-redesign .site-header {
    background: linear-gradient(180deg, rgba(22, 24, 31, 0.92), rgba(11, 13, 18, 0.92));
    border-bottom: 1px solid var(--koc-border);
}
.ko-cash-redesign .site-nav {
    background: rgba(11, 13, 18, 0.7);
    border-bottom: 1px solid var(--koc-border);
}
.ko-cash-redesign .site-nav .nav li.active > a {
    color: var(--koc-accent);
}

/* ── Breadcrumb ── */
.ko-cash-redesign .page-breadcrumb {
    background: linear-gradient(180deg, rgba(22, 24, 31, 0.55), rgba(11, 13, 18, 0));
    border-bottom: 1px solid var(--koc-border);
}
.ko-cash-redesign .page-breadcrumb .active--gold {
    color: var(--koc-accent);
}

/* ── Banner ── */
.ko-cash-redesign .product-banner {
    position: relative;
    overflow: hidden;
    padding: 48px 0 56px;
    margin-bottom: 8px;
}
.ko-cash-redesign .product-banner__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 13, 18, 0.45) 0%, rgba(11, 13, 18, 0.85) 60%, var(--koc-bg) 100%),
        radial-gradient(60% 80% at 30% 50%, rgba(var(--koc-accent-rgb), 0.18), transparent 60%);
    pointer-events: none;
}
.ko-cash-redesign .product-banner__bg img {
    filter: saturate(1.05) contrast(1.05);
}
.ko-cash-redesign .product-banner__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 28px;
}
.ko-cash-redesign .product-banner__thumb {
    width: 130px;
    height: 130px;
    border-radius: var(--koc-radius-lg);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--koc-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--koc-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.ko-cash-redesign .product-banner__thumb img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}
.ko-cash-redesign .product-banner__title {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 10px;
    background: linear-gradient(90deg, #fff 0%, #fde68a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ko-cash-redesign .product-banner__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.ko-cash-redesign .product-banner__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--koc-text);
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--koc-border-strong);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.ko-cash-redesign .product-banner__tag .material-symbols-outlined {
    font-size: 16px;
    color: var(--koc-accent);
}
.ko-cash-redesign .product-banner__rating {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ko-cash-redesign .product-banner__score {
    font-size: 16px;
    font-weight: 800;
    color: var(--koc-accent);
}
.ko-cash-redesign .product-banner__review-count {
    font-size: 13px;
    color: var(--koc-text-muted);
}

/* ── Main section background flat (override --flat) ── */
.ko-cash-redesign .product-detail-page {
    padding-top: 24px !important;
    padding-bottom: 56px !important;
}

/* ── Left Hero card ── */
.ko-cash-redesign .product-detail-hero {
    position: relative;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(var(--koc-accent-rgb), 0.08), transparent 60%),
        linear-gradient(180deg, var(--koc-surface-2), var(--koc-surface));
    border: 1px solid var(--koc-border-strong);
    border-radius: var(--koc-radius-lg);
    overflow: hidden;
    box-shadow: var(--koc-shadow);
}
.ko-cash-redesign .product-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--koc-accent-rgb), 0.06), transparent 35%);
    pointer-events: none;
}
.ko-cash-redesign .product-detail-hero__media {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(90% 90% at 50% 30%, rgba(var(--koc-accent-rgb), 0.12), transparent 70%),
        rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border-bottom: 1px solid var(--koc-border);
}
.ko-cash-redesign .product-detail-hero__media img:first-child {
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.6));
}
 .product-detail-hero__cash-text {
    position: absolute;
    left: 50%;
    top: 42%;
    z-index: 1;
    transform: translate(-50%, -50%);
    color: #f8d967;
    font-size: clamp(28px, 5vw, 76px);
    font-size: clamp(28px, 22cqi, 76px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow:
        0 2px 0 rgba(76, 38, 0, 0.9),
        0 7px 16px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(var(--koc-accent-rgb), 0.45);
    -webkit-text-stroke: 1px rgba(74, 35, 0, 0.85);
    pointer-events: none;
    white-space: nowrap;
}
.ko-cash-redesign .product-detail-hero__logo {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 56px;
    height: 56px;
    object-fit: contain;
    opacity: 0.9;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}
.ko-cash-redesign .product-detail-hero__body {
    padding: 18px 18px 20px;
    position: relative;
    z-index: 1;
}
.ko-cash-redesign .product-detail-hero__title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.ko-cash-redesign .product-detail-hero__score {
    color: var(--koc-accent);
    font-weight: 700;
}
.ko-cash-redesign .product-detail-hero__review-count {
    color: var(--koc-text-muted);
    font-size: 12px;
}
.ko-cash-redesign .product-detail-hero__desc {
    font-size: 13px;
    color: var(--koc-text-muted);
    line-height: 1.65;
}
.ko-cash-redesign .product-detail-hero__desc strong {
    color: var(--koc-accent);
}
.ko-cash-redesign .product-detail-hero__badges {
    border-top: 1px solid var(--koc-border);
    padding-top: 12px;
    margin-top: 14px !important;
}
.ko-cash-redesign .product-detail-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--koc-accent);
    background: rgba(var(--koc-accent-rgb), 0.08);
    border: 1px solid rgba(var(--koc-accent-rgb), 0.2);
}
.ko-cash-redesign .product-detail-hero__badge .material-symbols-outlined {
    font-size: 14px;
}

@media (min-width: 992px) {
    .ko-cash-redesign .product-detail-hero {
        position: sticky;
        top: 90px;
    }
}

/* ── Right: Purchase card ── */
.ko-cash-redesign .product-detail-purchase-card {
    background: linear-gradient(180deg, var(--koc-surface-2), var(--koc-surface));
    border: 1px solid var(--koc-border-strong);
    border-radius: var(--koc-radius-lg);
    padding: 22px;
    box-shadow: var(--koc-shadow);
    position: relative;
    overflow: hidden;
}
.ko-cash-redesign .product-detail-purchase-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--koc-accent-rgb), 0.4), transparent);
}

/* Product option grid */
.ko-cash-redesign .product-detail-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.ko-cash-redesign .product-detail-option {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
    border: 1px solid var(--koc-border-strong);
    border-radius: var(--koc-radius-md);
    padding: 18px 14px 16px;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.2s, background 0.2s, box-shadow 0.2s;
    text-align: center;
    overflow: hidden;
}
.ko-cash-redesign .product-detail-option::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(80% 80% at 50% 0%, rgba(var(--koc-accent-rgb), 0.12), transparent 60%);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.ko-cash-redesign .product-detail-option:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--koc-accent-rgb), 0.35);
    background: rgba(var(--koc-accent-rgb), 0.04);
}
.ko-cash-redesign .product-detail-option:hover::before {
    opacity: 1;
}
.ko-cash-redesign .product-detail-option.active {
    border-color: var(--koc-accent);
    background: rgba(var(--koc-accent-rgb), 0.1);
    box-shadow: 0 0 0 1px rgba(var(--koc-accent-rgb), 0.4) inset, 0 10px 24px -12px rgba(var(--koc-accent-rgb), 0.5);
}
.ko-cash-redesign .product-detail-option.active::before {
    opacity: 1;
}
.ko-cash-redesign .product-detail-option.active::after {
    content: "\2714";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--koc-accent);
    color: #0a0f18;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(var(--koc-accent-rgb), 0.5);
}
.ko-cash-redesign .product-detail-option__icon img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
    transition: transform 0.2s;
}
.ko-cash-redesign .product-detail-option:hover .product-detail-option__icon img {
    transform: scale(1.06);
}
.ko-cash-redesign .product-detail-option__name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--koc-text);
    margin-top: 8px;
    line-height: 1.3;
}
.ko-cash-redesign .product-detail-option__price {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-top: 4px;
    letter-spacing: -0.01em;
}
.ko-cash-redesign .product-detail-option__price small {
    font-size: 11px;
    font-weight: 600;
    color: var(--koc-text-muted);
    margin-left: 2px;
}

/* Notice */
.ko-cash-redesign .product-detail-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--koc-text-muted);
    background: rgba(var(--koc-accent-2-rgb), 0.06);
    border: 1px dashed rgba(var(--koc-accent-2-rgb), 0.25);
    border-radius: var(--koc-radius-md);
    padding: 10px 14px;
    margin-bottom: 14px;
}
.ko-cash-redesign .product-detail-notice .material-symbols-outlined {
    color: var(--koc-accent-2);
    font-size: 18px;
}

/* Checkout bar */
.ko-cash-redesign .product-detail-checkout {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--koc-border);
    border-radius: var(--koc-radius-md);
    flex-wrap: wrap;
}
.ko-cash-redesign .product-detail-checkout__total-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    margin-right: auto;
}
.ko-cash-redesign .product-detail-checkout__total-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--koc-text-muted);
}
.ko-cash-redesign .product-detail-checkout__total-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--koc-accent);
    letter-spacing: -0.01em;
}
.ko-cash-redesign .product-detail-checkout__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Tabs (within purchase card body, after options) ── */
.ko-cash-redesign .detail-tabs {
    margin-top: 22px !important;
    padding-top: 22px;
    border-top: 1px solid var(--koc-border);
    background: transparent !important;
}
.ko-cash-redesign .tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--koc-border);
    border-radius: 999px;
    margin-bottom: 18px;
    width: fit-content;
    max-width: 100%;
}
.ko-cash-redesign .tab-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--koc-text-muted);
    background: transparent;
    border: 0;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.ko-cash-redesign .tab-nav__btn .material-symbols-outlined {
    font-size: 16px;
}
.ko-cash-redesign .tab-nav__btn:hover {
    color: var(--koc-text);
}
.ko-cash-redesign .tab-nav__btn.active {
    color: #0a0f18;
    background: linear-gradient(135deg, var(--koc-accent), #fde68a);
    box-shadow: 0 6px 16px -6px rgba(var(--koc-accent-rgb), 0.55);
}
.ko-cash-redesign .detail-tabs__badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    color: inherit;
}
.ko-cash-redesign .tab-nav__btn:not(.active) .detail-tabs__badge {
    background: rgba(255, 255, 255, 0.08);
    color: var(--koc-text-muted);
}

.ko-cash-redesign .detail-tabs__title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}
.ko-cash-redesign .detail-tabs__subtitle {
    font-size: 14px;
    font-weight: 700;
    color: var(--koc-accent);
    margin: 18px 0 8px;
}
.ko-cash-redesign .detail-tabs__list {
    color: var(--koc-text-muted);
    font-size: 13.5px;
    line-height: 1.8;
    padding-left: 20px;
}
.ko-cash-redesign .detail-tabs__list li::marker {
    color: var(--koc-accent);
}
.ko-cash-redesign .detail-tabs__list strong {
    color: var(--koc-text);
}
.ko-cash-redesign .detail-tabs__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: var(--koc-radius-md);
    background: rgba(255, 200, 100, 0.06);
    border: 1px solid rgba(var(--koc-accent-rgb), 0.2);
    color: var(--koc-text-muted);
    font-size: 13px;
    line-height: 1.6;
}
.ko-cash-redesign .detail-tabs__note .material-symbols-outlined {
    color: var(--koc-accent);
    font-size: 20px;
}

/* Reviews */
.ko-cash-redesign .detail-tabs__review-summary {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--koc-border);
    border-radius: var(--koc-radius-md);
    padding: 18px;
}
.ko-cash-redesign .detail-tabs__review-big {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    color: var(--koc-accent);
    letter-spacing: -0.02em;
}
.ko-cash-redesign .detail-tabs__review-score small {
    color: var(--koc-text-muted);
    font-size: 12px;
}
.ko-cash-redesign .detail-tabs__bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--koc-text-muted);
    margin-bottom: 6px;
}
.ko-cash-redesign .detail-tabs__bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}
.ko-cash-redesign .detail-tabs__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--koc-accent), #fde68a);
    border-radius: 999px;
}

/* Comments */
.ko-cash-redesign .detail-tabs__comments {
    display: grid;
    gap: 10px;
}
.ko-cash-redesign .detail-comment {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
    border: 1px solid var(--koc-border);
    border-radius: var(--koc-radius-md);
    padding: 14px 16px;
    transition: border-color 0.2s, background 0.2s;
}
.ko-cash-redesign .detail-comment:hover {
    border-color: var(--koc-border-strong);
    background: rgba(255, 255, 255, 0.03);
}
.ko-cash-redesign .detail-comment__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--koc-accent-rgb), 0.85), rgba(var(--koc-accent-2-rgb), 0.85));
    color: #0a0f18;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ko-cash-redesign .detail-comment__name {
    color: var(--koc-text);
    font-size: 13.5px;
}
.ko-cash-redesign .detail-comment__date {
    color: var(--koc-text-muted);
    font-size: 11.5px;
}
.ko-cash-redesign .detail-comment__text {
    margin: 8px 0 0;
    color: var(--koc-text-muted);
    font-size: 13px;
    line-height: 1.65;
}

/* Starmeter color */
.ko-cash-redesign .starmeter .str_fill .material-symbols-outlined {
    color: var(--koc-accent);
}
.ko-cash-redesign .starmeter .str .star-outline {
    color: rgba(255, 255, 255, 0.12);
}

/* ── Footer refinement ── */
.ko-cash-redesign footer {
    background: linear-gradient(180deg, var(--koc-bg) 0%, #07090d 100%);
    border-top: 1px solid var(--koc-border);
}
.ko-cash-redesign .footer-bottom {
    border-top: 1px solid var(--koc-border);
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .ko-cash-redesign .product-banner {
        padding: 32px 0 36px;
    }
    .ko-cash-redesign .product-banner__inner {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    .ko-cash-redesign .product-banner__meta,
    .ko-cash-redesign .product-banner__rating {
        justify-content: center;
    }
    .ko-cash-redesign .product-detail-hero {
        margin-bottom: 14px;
    }
}
@media (max-width: 575.98px) {
    .ko-cash-redesign .product-detail-purchase-card {
        padding: 16px;
    }
    .ko-cash-redesign .product-detail-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .ko-cash-redesign .product-detail-checkout {
        padding: 12px;
    }
    .ko-cash-redesign .product-detail-checkout__total-price {
        font-size: 18px;
    }
}

.display-none{
    display: none !important;
}

/* ===================================================================
   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 rgba(255,255,255,.08);
    border-radius: 14px;
    overflow: hidden;
}
.pd-hero-card__image-wrap {
	position: relative;
	aspect-ratio: 4/5;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.pd-hero-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	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(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%);
}

.pd-hero-card__logo--detail {
	position: absolute;
	left: 50%;
	top: 38%;
	z-index: 2;
	width: min(66%, 190px);
	max-height: 86px;
	object-fit: contain;
	pointer-events: none;
	transform: translate(-50%, -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 rgba(255,255,255,.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,.10);
    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 rgba(255,255,255,.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 4px 6px;
    background: rgba(24,27,33,.65);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(219,232,255,.85);
}
.pd-hdr__game-pill img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 50%;
}
.pd-hdr__title {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}
.pd-hdr__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pd-hdr__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(24,27,33,.55);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(219,232,255,.85);
}
.pd-hdr__badge .material-symbols-outlined {
    font-size: 16px;
    color: var(--c-primary);
}
.pd-hdr__rating {
    display: flex;
    align-items: center;
    gap: 10px;
}
.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-score {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.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 rgba(255,255,255,.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;
}
.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;
}

/* Packages Grid */
.pd-packages {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pd-pkg {
    position: relative;
    flex: 0 1 calc((100% - 20px) / 3);
    min-width: 180px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(13,17,23,.55);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.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: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(87,176,255,.10);
    border: 1px solid rgba(87,176,255,.20);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pd-pkg__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}
/* Görseli olmayan paket için ikon fallback */
.pd-pkg__icon--fallback .material-symbols-outlined {
    font-size: 20px;
    color: rgba(219, 232, 255, 0.55);
}
.pd-pkg__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.pd-pkg__name {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-pkg__sub {
    font-size: 11px;
    color: rgba(219,232,255,.5);
}
.pd-pkg__price-row {
    display: flex;
    align-items: baseline;
    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__price-old {
    font-size: 11px;
    color: rgba(219,232,255,.4);
    text-decoration: line-through;
}
.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-primary);
    color: #0a1220;
}
.pd-pkg__badge--popular {
    background: var(--c-gold);
    color: #1a1300;
}

/* Action Card */
.pd-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}
.pd-action-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pd-action-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.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 {
    margin-left: auto;
    align-items: flex-end;
    text-align: right;
}
.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;
}
.pd-action-card__actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pd-action-card--buy .pd-action-card__btn,
.pd-action-card--sell .pd-action-card__btn {
    flex: 1 1 auto;
}

/* İlk tasarım (legacy) — tek satır, goldbar dışı layout'lar için */
.pd-action-card--legacy {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}
.pd-action-card--legacy .pd-action-card__field--total {
    margin-left: 0;
}
.pd-action-card--legacy .pd-action-card__actions {
    flex: 1 1 320px;
    margin-top: 0;
    justify-content: flex-end;
}
.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);
}
.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;
}

/* Trust Row */
.pd-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    background: rgba(24,27,33,.45);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
}
.pd-trust-row__item {
    flex: 1 1 calc((100% - 30px) / 4);
    min-width: 160px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(219,232,255,.75);
    justify-content: center;
}
.pd-trust-row__item .material-symbols-outlined {
    font-size: 16px;
    color: var(--c-primary);
}

/* Meta Row (Sales + Fav) */
.pd-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.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;
}
.pd-meta-row__fav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(219,232,255,.85);
    cursor: pointer;
    transition: all .18s ease;
}
.pd-meta-row__fav:hover {
    border-color: rgba(255,107,107,.45);
    color: #ff6b6b;
}
.pd-meta-row__fav--active {
    border-color: rgba(255,107,107,.55);
    background: rgba(255,107,107,.10);
    color: #ff6b6b;
}
.pd-meta-row__fav--active .material-symbols-outlined.filled { color: #ff6b6b; }

/* Responsive */
@media (max-width: 991px) {
    .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;
    }
    .pd-trust-row__item { flex-basis: calc(50% - 5px); }
}
@media (max-width: 575px) {
    .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; }
}

/* PD Hero Card - Trust Card Overlay variant */
.pd-hero-card--with-trust .pd-hero-card__image-wrap {
    aspect-ratio: 3/4;
}
.pd-trust-card--overlay {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    padding: 10px 12px;
    gap: 8px;
    background: rgba(13,17,23,.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
}
.pd-trust-card--overlay .pd-trust-card__item { gap: 10px; }
.pd-trust-card--overlay .pd-trust-card__icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}
.pd-trust-card--overlay .pd-trust-card__icon .material-symbols-outlined { font-size: 16px; }
.pd-trust-card--overlay .pd-trust-card__text strong { font-size: 11.5px; }
.pd-trust-card--overlay .pd-trust-card__text small { font-size: 10px; }

/* 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;
	opacity: .55;
	filter: blur(52px);
}
/* Detail page content sits above the banner backdrop */
.product-detail-page {
    position: relative;
    z-index: 1;
}
.product-list-page {
    position: relative;
    z-index: 1;
}
@media (max-width: 991px) {
    .product-banner--bg-only .product-banner__bg { height: 400px; }
}

/* ===================================================================
   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__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pd-countdown__title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.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 {
    /* Pre-flip so that after parent 180° rotation the digit reads upright */
    transform: rotateX(180deg);
    background: linear-gradient(180deg, #161c27 0%, #0f1420 100%);
    /* Visually these become the bottom corners after the flap rotates */
    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 rgba(255,255,255,.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,.10) 0%, rgba(24,27,33,.55) 70%);
    border: 1px solid rgba(255,107,107,.20);
}
.pd-countdown--inline .pd-countdown__inline-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #ff8a8a;
    white-space: nowrap;
}
.pd-countdown--inline .pd-countdown__inline-label .material-symbols-outlined {
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
}
.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: 991px) {
    .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: blur(48px) saturate(1.08);
}

.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 rgba(255,255,255,.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__fav {
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(13, 17, 23, .72);
    color: rgba(255, 255, 255, .74);
}

.product-detail-page--item-detail .detail-tabs-gallery__fav:hover,
.product-detail-page--item-detail .detail-tabs-gallery__fav.detail-tabs--faved {
    border-color: rgba(255, 107, 107, .45);
    background: rgba(255, 107, 107, .12);
    color: #ff6b6b;
}

.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-top: 10px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(8, 11, 17, .72);
    border-color: rgba(87,176,255,.14);
    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: rgba(255,255,255,.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 .detail-tabs-title-block {
    display: none;
}

.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 .info-card__title .material-symbols-outlined {
    color: var(--c-primary);
    font-size: 18px;
}

.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: baseline;
    gap: 6px;
    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;
}

.product-detail-page--item-detail .detail-tabs-price-block__buy-btn,
.product-detail-page--item-detail .detail-tabs-price-block__fav-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;
}

.product-detail-page--item-detail .detail-tabs-price-block__fav-btn {
    flex: 0 1 180px;
    padding-inline: 16px;
}

/* İlan satın alma onay ekranı */
.item-purchase-timer__clock {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.1;
    color: #fff;
}
.item-purchase-timer__clock--danger { color: #f7b733; }
.item-purchase-timer__clock--expired { color: var(--c-danger, #ef4444); }

/* Onay ekranı — yeni özet kart (.ipc-*) */
.ipc-timer {
    text-align: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,.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, #ef4444); }

.ipc-rows {
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.ipc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 24px;
    border-bottom: 1px solid rgba(255,255,255,.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: #f87171; }
.ipc-row--danger .ipc-row__value { color: #f87171; }

.ipc-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255,255,255,.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: #f87171;
    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, #57b0ff);
    text-decoration: underline;
}

/* Header — devam eden ilan siparişi bandı */
.pending-order-bar {
    background: linear-gradient(90deg, rgba(247,183,51,.16), rgba(247,183,51,.08));
    border-block: 1px solid rgba(247,183,51,.35);
}
.pending-order-bar__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    color: #f7b733;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.pending-order-bar__link:hover { color: #ffd574; }
.pending-order-bar__thumb {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(247,183,51,.4);
}
.pending-order-bar__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.pending-order-bar__label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(247,183,51,.75);
    letter-spacing: .02em;
}
.pending-order-bar__listing {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}
.pending-order-bar__timer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}
.pending-order-bar__timer .material-symbols-outlined { font-size: 18px; }
.pending-order-bar__clock { font-variant-numeric: tabular-nums; font-size: 14px; }
.pending-order-bar__cta { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 575.98px) {
    .pending-order-bar__link { gap: 8px; }
    .pending-order-bar__label { display: none; }
    .pending-order-bar__listing { font-size: 12px; }
    .pending-order-bar__cta { display: none; }
}
.item-purchase-howto ul, .item-purchase-howto ol { padding-left: 1.2rem; }
.item-purchase-steps li { font-weight: 600; }
.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: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.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,0.06);
    border-color: rgba(87,176,255,0.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: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.25);
}
.item-purchase-page .form-check-input:checked {
    background-color: var(--c-primary, #57b0ff);
    border-color: var(--c-primary, #57b0ff);
}

/* 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%; }
}

/* Satıcı değerlendirme formu + yıldız girişi */
.sp-review-form {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.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: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.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; }
.sp-review-item__response {
    margin-top: 8px;
    padding: 8px 10px;
    border-left: 3px solid var(--c-primary, #57b0ff);
    background: rgba(87,176,255,.06);
    border-radius: 4px;
    font-size: 13px;
    color: rgba(219,232,255,.8);
}
.sp-review-item__response strong { display: inline-flex; align-items: center; gap: 4px; color: var(--c-primary, #57b0ff); }
.sp-review-item__response .material-symbols-outlined { font-size: 16px; }

/* 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 rgba(255,255,255,.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: rgba(255,255,255,.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: rgba(255,255,255,.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__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.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: 991px)  { .bcx-browse__main #bcGrid > .col-2 { width: 33.333%; max-width: 33.333%; } }
@media (max-width: 767px) {
    .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 rgba(255,255,255,.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 { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.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; -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: 991px) {
    .bcx-cf { padding: 0; }
    .bcx-feat__stage { width: 100%; }
    .bcx-cf__peek { display: none; }
}
@media (max-width: 575px) {
    .bcx-feat__card { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 12px 13px; gap: 7px; }
    .bcx-feat__desc { -webkit-line-clamp: 1; }
}

.product-detail-page--item-detail .detail-tabs-price-block__fav-btn.detail-tabs--faved {
    border-color: rgba(255, 107, 107, .42);
    background: rgba(255, 107, 107, .08);
    color: #ff6b6b;
}

.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: 1 1 calc(50% - 7px);
    align-items: center;
    flex-direction: row;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,.02);
    border-color: rgba(255,255,255,.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,
.product-detail-page--item-detail .detail-tabs-recent-card,
.product-detail-page--item-detail .detail-tabs-stat-row {
    background: rgba(13,17,23,.45);
    border-color: rgba(255,255,255,.07);
}

.product-detail-page--item-detail .detail-tabs-detail-item__label,
.product-detail-page--item-detail .detail-tabs-stat-row span {
    color: rgba(219,232,255,.48);
}

.product-detail-page--item-detail .detail-tabs-detail-item__value,
.product-detail-page--item-detail .detail-tabs-stat-row strong {
    color: rgba(255,255,255,.9);
}

.product-detail-page--item-detail .detail-tabs-detail-item__value--highlight,
.product-detail-page--item-detail .detail-tabs-recent-card__price,
.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: rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 18px;
}

.product-detail-page--item-detail .detail-tabs-seller-card__stat {
    background: rgba(255,255,255,.035);
}

.product-detail-page--item-detail .detail-tabs-seller-card__stat .material-symbols-outlined {
    color: rgba(219,232,255,.5);
}

.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 rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 18px;
}

.product-detail-page--item-detail .tab-nav {
    border-bottom-color: rgba(255,255,255,.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,
    .product-detail-page--item-detail .detail-tabs-price-block__fav-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 {
        align-items: stretch;
        flex-direction: column;
    }

    .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
══════════════════════════════════════════ */
.header-btn--wallet__bal small,
.listing-card__price small,
.listing-card__old-price small,
.buy-price small,
.product-detail-option__price small,
.cash-card__price small,
.product-row__price small,
.product-row__total small,
.ko-item-card__price small,
.product-banner__price-amount small,
.detail-tabs-price-block__amount small,
.detail-tabs-recent-card__price small,
.sp-listing-card__price small,
.epin-order__amount small,
.pd-pkg__price small,
.payment-method-summary__row strong small,
.payment-action-card__total strong small,
.o-price-text small,
.item-card__current > small,
.item-card__current + small,
.item-card__price small,
.item-card__price-current small {
    font-size: 0.6667em !important;   /* 12/18 oran */
    font-weight: inherit;
    color: inherit !important;
    opacity: 0.65 !important;
    letter-spacing: 0.01em;
    vertical-align: baseline;
    line-height: 1;
}

/* ══════════════════════════════════════════
   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 {
    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;
}
.marketplace-section > .container {
    position: relative;
    z-index: 1;
}

.featured-promo {
    --promo-accent: #ff3b50;
    --promo-accent-soft: rgba(255, 91, 110, 0.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%, rgba(255,255,255,.08));
    isolation: isolate;
    transition: border-color .5s ease;
}

.featured-promo__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../images/cover/valorant_cover.png');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    opacity: 0.55;
    -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%);
}
.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 {
    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 ─── */
#myTab .nav-link {
    --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;
}
#myTab .nav-link:hover,
#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;
}
#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, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
            backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow:0 8px 24px rgba(0, 0, 0, .25);
}
.marketplace-section .item-card:hover {
    background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%) !important;
    border-color: rgba(255, 255, 255, .18);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, .35),
        0 0 0 1px rgba(255, 255, 255, .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, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(87, 176, 255, 0.055) 1px, transparent 1px);
    background-size: 68px 68px;
    opacity: 0.45;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.72) 45%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,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, 0.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, 0.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, 0.24);
    border-radius: 999px;
    background: rgba(87, 176, 255, 0.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, 0.2);
}

.error-page__code span {
    color: #57b0ff;
}

.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, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 48px rgba(0,0,0,0.22);
}

.error-page__search > .material-symbols-outlined {
    color: #57b0ff;
    font-size: 22px;
}

.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, 0.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 rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.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, 0.34);
    background: rgba(87, 176, 255, 0.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, 0.11);
    border-radius: 8px;
    background: rgba(16, 19, 26, 0.9);
    box-shadow: 0 18px 48px rgba(0, 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, 0.13);
    color: #57b0ff;
    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, 0.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, 0.1);
    border-radius: 8px;
    background: #151a23;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.error-game-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 28%, rgba(5, 7, 12, 0.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,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, 0.22);
    border-radius: 8px;
    background: rgba(22, 19, 14, 0.88);
    box-shadow: 0 18px 46px rgba(0,0,0,0.3);
    color: #fbbf24;
    -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, 0.3);
}

.error-route-panel__dot--active {
    background: #fbbf24;
    box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.12);
}

.error-route-panel__line {
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.24), rgba(251, 191, 36, 0.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, 0.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 rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.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, 0.28);
    background: rgba(87, 176, 255, 0.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, 0.11);
    color: #57b0ff;
    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, .10), transparent 60%),
        rgba(255, 255, 255, .015);
    border-bottom: 1px solid rgba(255, 255, 255, .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: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .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: #f87171; }

/* ─── 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; }

/* ─── Şu An Canlı kartları ─── */
.bcx-live {
    background: linear-gradient(180deg, rgba(229, 62, 62, .045), transparent 70%);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.bcx-live-card {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    text-decoration: none;
    color: inherit;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.bcx-live-card:hover {
    transform: translateY(-3px);
    border-color: rgba(229, 62, 62, .45);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    color: inherit;
    text-decoration: none;
}
.bcx-live-card__cover {
    position: relative;
    aspect-ratio: 16 / 9;
}
.bcx-live-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(229, 62, 62, .92);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    box-shadow: 0 2px 10px rgba(229, 62, 62, .45);
}
.bcx-live-card__badge .bcx-live-dot { width: 6px; height: 6px; background: #fff; box-shadow: none; animation: pulse-dot 1.2s ease-in-out infinite; }
.bcx-live-card__support {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.bcx-live-card__support .material-symbols-outlined { font-size: 13px; color: #f87171; }
.bcx-live-card__body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}
.bcx-live-card__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(229, 62, 62, .7);
    flex-shrink: 0;
}
.bcx-live-card__avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
}
.bcx-live-card__meta { min-width: 0; flex: 1; }
.bcx-live-card__meta h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bcx-live-card__meta span {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bcx-live-card__platform {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
}

/* ─── Liderlik şeridi ─── */
.bcx-lb { border-bottom: 1px solid rgba(255, 255, 255, .04); }
.bcx-lb__periods {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
}
.bcx-lb__period {
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-decoration: none;
    transition: all .18s;
}
.bcx-lb__period:hover { color: #f1f5f9; }
.bcx-lb__period.is-active { background: var(--c-gold, #ffd166); color: #0f1419; }
.bcx-lb__strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.bcx-lb-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.bcx-lb-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .4); color: inherit; }
.bcx-lb-card--1 { border-color: rgba(255, 215, 0, .45); background: linear-gradient(135deg, rgba(255, 209, 102, .12), rgba(255, 255, 255, .03)); }
.bcx-lb-card--2 { border-color: rgba(192, 192, 192, .40); background: linear-gradient(135deg, rgba(192, 192, 192, .10), rgba(255, 255, 255, .03)); }
.bcx-lb-card--3 { border-color: rgba(205, 127, 50, .40); background: linear-gradient(135deg, rgba(205, 127, 50, .10), rgba(255, 255, 255, .03)); }
.bcx-lb-card__rank {
    position: absolute;
    top: -9px;
    right: 10px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: #0f1419;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.bcx-lb-card--1 .bcx-lb-card__rank { background: #ffd700; }
.bcx-lb-card--2 .bcx-lb-card__rank { background: #c0c0c0; }
.bcx-lb-card--3 .bcx-lb-card__rank { background: #cd7f32; }
.bcx-lb-card__avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .18);
}
.bcx-lb-card--1 .bcx-lb-card__avatar { border-color: #ffd700; }
.bcx-lb-card--2 .bcx-lb-card__avatar { border-color: #c0c0c0; }
.bcx-lb-card--3 .bcx-lb-card__avatar { border-color: #cd7f32; }
.bcx-lb-card__avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-weight: 800;
}
.bcx-lb-card__meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bcx-lb-card__meta strong {
    font-size: 14px;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bcx-lb-card__meta small { font-size: 12px; color: #94a3b8; }
.bcx-lb__rest { margin-top: 14px; }
.bcx-lb__rest summary { font-size: 13px; color: #94a3b8; cursor: pointer; }
.bcx-lb__rest summary:hover { color: #f1f5f9; }
.bcx-lb__rest-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    font-size: 13px;
}
.bcx-lb__rest-rank { min-width: 32px; color: #64748b; font-weight: 700; }
.bcx-lb__rest-row a { color: #f1f5f9; text-decoration: none; }
.bcx-lb__rest-row a:hover { color: var(--c-primary); }
.bcx-lb__rest-amount { margin-left: auto; color: #94a3b8; font-size: 12px; }

/* ─── Responsive ─── */
@media (max-width: 991.98px) {
    .bcx-lb__strip { grid-template-columns: 1fr; }
}
@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: rgba(255, 255, 255, .03);
    border-top: 1px solid rgba(255, 255, 255, .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: #f87171;
}
.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: rgba(255, 255, 255, .04);
}

/* ══════════════════════════════════════════
   KAMPANYA / AÇILIŞA ÖZEL LANDING (campaigns.show)
══════════════════════════════════════════ */
.campaign-hero {
    position: relative;
    overflow: hidden;
    padding: 56px 0 60px;
    border-bottom: 1px solid rgba(255, 255, 255, .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__inner {
    position: relative;
    z-index: 1;
}

.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__icon {
    font-size: 22px;
    color: #57b0ff;
}
.campaign-offer__value {
    color: #fff;
    font-size: 19px;
    font-weight: 800;
}
.campaign-offer__sep {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, .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 rgba(255, 255, 255, .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: #57b0ff;
    flex-shrink: 0;
}
.campaign-meta__item strong {
    color: #fff;
    font-weight: 600;
}

.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-section__title .material-symbols-outlined {
    color: #57b0ff;
    font-size: 22px;
}

.campaign-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.campaign-cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .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: #57b0ff;
}

.campaign-product {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .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: rgba(255, 255, 255, .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: rgba(255, 255, 255, .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: #57b0ff;
    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 (statik)
══════════════════════════════════════════ */
.blog-page__header {
    margin-bottom: 26px;
}
.blog-page__title {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
}
.blog-page__desc {
    margin: 0;
    color: rgba(219, 232, 255, .55);
    font-size: 14px;
}

.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 rgba(255, 255, 255, .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, #57b0ff); }
.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 rgba(255, 255, 255, .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: #57b0ff; }
.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: #57b0ff;
    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 rgba(255, 255, 255, .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: #57b0ff;
    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 rgba(255, 255, 255, .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: #57b0ff; }
.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-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.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: rgba(255, 255, 255, .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: rgba(255, 255, 255, .08);
    color: rgba(219, 232, 255, .55);
}
.blog-chip:hover { border-color: rgba(87, 176, 255, .4); color: #fff; }
.blog-chip.is-active {
    background: #57b0ff;
    border-color: #57b0ff;
    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 rgba(255, 255, 255, .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: #57b0ff; }

.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: rgba(255, 255, 255, .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: #57b0ff;
    font-size: 13px;
    font-weight: 800;
}
.blog-poplist__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.blog-poplist__title {
    font-size: 13px;
    font-weight: 600;
    color: #dbe8ff;
    line-height: 1.35;
}
.blog-poplist a:hover .blog-poplist__title { color: #57b0ff; }
.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: rgba(255, 255, 255, .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: rgba(255, 255, 255, .07);
    color: rgba(219, 232, 255, .55);
}

.blog-newsletter__desc {
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(219, 232, 255, .55);
}
.blog-newsletter__form { display: flex; gap: 8px; }
.blog-newsletter__form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(13, 17, 23, .55);
    color: #fff;
    font-size: 13px;
    outline: none;
}
.blog-newsletter__form input::placeholder { color: rgba(219, 232, 255, .4); }
.blog-newsletter__form input:focus { border-color: rgba(87, 176, 255, .5); }

@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%; }
}

/* ══════════════════════════════════════════
   Hızlı tutar seçimi (amount-presets)
══════════════════════════════════════════ */
.amount-preset {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 9px 15px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .035);
    color: #dbe8ff;
    line-height: 1;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.amount-preset__amount {
    font-size: 14px;
    font-weight: 700;
}
.amount-preset__unit {
    font-size: 11px;
    font-weight: 600;
    opacity: .55;
}
.amount-preset:hover {
    border-color: rgba(87, 176, 255, .5);
    background: rgba(87, 176, 255, .09);
    transform: translateY(-1px);
}
.amount-preset:active {
    transform: translateY(0);
}
.amount-preset.is-active {
    border-color: transparent;
    background: linear-gradient(135deg, #57b0ff, #2b3cef);
    color: #fff;
    box-shadow: 0 6px 16px rgba(43, 60, 239, .32);
}
.amount-preset.is-active .amount-preset__unit {
    opacity: .85;
    color: #fff;
}