:root {
    --gradient-color1: #FFC85B;
    --gradient-color2: #DB46FF;
    --gradient1: linear-gradient(to right, #FFC85B, #DB46FF);
    --main: hsl(44, 95%, 58%);
    --mainsec: hsl(43 87% 48%);
    --mainthi: hsl(44, 100%, 62%);
    --mainfou: hsl(44, 100%, 54%);
    --mainfif: hsl(155, 85%, 55%);
    --mainsix: hsl(70, 90%, 55%);
    --mainsev: hsl(146, 80%, 72%);
    --mainfif-sec: hsl(155, 65%, 45%);
    --mainfif-thi: hsl(155, 60%, 38%);
    --mainfif-fou: hsl(155, 55%, 28%);

    --mainsix-sec: hsl(70, 70%, 45%);
    --mainsix-thi: hsl(70, 65%, 38%);
    --mainsix-fou: hsl(70, 60%, 28%);

    --text-color: hsl(216, 12%, 84%);
    --text-color2: hsl(213, 24%, 93%);
    --text-color-3: hsl(216deg 8.01% 54.78%);
    --text-color-4: hsl(216deg 8.27% 48.29%);
    --text-color-5: hsl(236, 17%, 82%);
    --text-color-6: hsl(231, 17%, 8%);
    --text-color-7: hsla(227, 100%, 95%, 0.86);
    --text-color-h: hsl(216deg 12% 84% / 75%);
    --cxbgmain: hsl(210deg 10% 7.84%);
    --cxbgmainsec: hsl(216, 10%, 10%);
    --cxbgmainthi: hsl(218, 10%, 11%);
    --cxbgmainfou: hsl(218, 10%, 12.5%);
    --cxbgmainfiv: hsl(218, 9%, 15%);
    --cxbgmainfiv-sec: hsl(218, 9%, 18%);
    --cxbgmainfiv-thi: hsl(218, 9%, 12%);
    --cxbmainfo: hsl(235, 14%, 17%);
    --cxbcolor: hsl(215, 12%, 18%);
    --cxbcolor-2: hsl(215, 10%, 15%);
    --cxbcolor-3: hsl(215, 18%, 25%);
    --cxbcolor-4: hsl(240, 18%, 7%);
    --cxcolor-1: hsl(0, 84%, 60%);
    --cxcolor-2: hsl(45, 93%, 47%);
    --cxcolor-3: hsl(45, 100%, 50%);
    --cxcolor-5: #2ed573;
    --cxcolor-6: hsl(96, 100%, 33%);
    --cxcolor-7: hsl(96deg 100% 39.44%);
    --cxcolor-8: hsl(120deg 65% 33.60%);
    --cxcolor-9: hsl(206.67deg 100% 46.18%);
    --cxcolor-10: hsl(219, 19%, 35%);
    --cxcolor-11: hsl(219deg 91.91% 92.06%);
    --cxcolor-12: hsl(219deg 7.04% 55.08%);
    --cxcolor-13: hsl(222.86deg 19.41% 18.1%);
    --cxcolor-14: hsl(282, 100%, 41%);
    --cxcolor-15: hsl(271, 76%, 53%);
    --cxcolor-16: hsl(343, 72%, 53%);
    --cxcolor-17: hsl(51, 74%, 67%);
    --cxcolor-18: hsl(0, 70%, 80%);
    --cxcolor-19: hsl(33, 100%, 82%);
    --cxcolor-20: hsl(140, 51%, 75%);
    --cxcolor-21: hsl(211, 58%, 79%);
    --cxcolor-22: hsl(259, 100%, 83%);
    --cxcolor-23: hsl(152, 47%, 65%);
    --cxcolor-24: hsl(213, 100%, 75%);
    --cxcolor-25: hsl(44, 85%, 72%);
    --cxcolor-26: hsl(0, 95%, 78%);
    --cxcolor-27: hsl(355, 85%, 76%);
    --cxcolor-28: hsl(330, 90%, 78%);
    --cxcolor-29: hsl(320, 95%, 75%);
    --cxcolor-30: hsl(300, 85%, 77%);
    --cxcolor-31: hsl(190, 90%, 74%);
    --cxcolor-32: hsl(185, 80%, 72%);
    --cxcolor-33: hsl(170, 70%, 70%);
    --cxcolor-34: hsl(165, 65%, 72%);
    --cxcolor-35: hsl(205, 95%, 76%);
    --cxcolor-36: hsl(220, 85%, 78%);
    --cxcolor-37: hsl(235, 80%, 79%);
    --cxcolor-38: hsl(270, 95%, 80%);
    --cxcolor-39: hsl(280, 85%, 78%);
    --cxcolor-40: hsl(90, 75%, 70%);
    --cxcolor-41: hsl(120, 70%, 72%);
    --cxcolor-42: hsl(145, 70%, 70%);
    --cxcolor-43: hsl(25, 90%, 74%);
    --cxcolor-44: hsl(40, 85%, 73%);
    --cxcolor-45: hsl(50, 80%, 70%);
    --cxcolor-46: hsl(270, 90%, 78%);
    --cxcolor-47: hsl(0, 75%, 65%);
    --cxcolor-48: hsl(0, 70%, 60%);
    --cxcolor-49: hsl(0, 72%, 63%);
    --cxcolor-50: hsl(0, 68%, 58%);

    --cxcolor-star: hsl(41, 74%, 52%);
    --cxopcolor-1: hsl(43, 80%, 82%);
    --cxopcolor-2: hsl(216deg 1.9% 69.65%);
    --cxopcolor-3: hsl(45.4deg 93.39% 47.45% / 15%);
    --cxopcolor-4: hsl(0deg 84.24% 60.2% / 15%);
    --cxopcolor-5: rgba(46, 213, 115, 0.10);
    --cxopcolor-6: hsl(206.67deg 100% 44.12% / 20%);
    --cxopcolor-7: hsl(219deg 19% 35% / 47%);
    --cxopcolor-8: hsl(43deg 100% 72.25% / 27%);
    --cxopcolor-9: hsl(240deg 14% 11% / 50%);
    --cxopcolor-10: hsl(282deg 100% 41% / 20%);
    --cxopcolor-11: hsl(271deg 76% 53% / 20%);
    --cxopcolor-12: hsl(343deg 72% 53% / 20%);
    --cxopcolor-13: hsl(51deg 74% 67% / 20%);
    --cxopcolor-18: hsl(349, 25%, 14%);
    --cxopcolor-19: hsl(33, 45%, 16%);
    --cxopcolor-20: hsl(138, 18%, 14%);
    --cxopcolor-21: hsl(211, 26%, 16%);
    --cxopcolor-22: hsl(262, 33%, 18%);
    --cxopcolor-23: hsl(153, 36%, 17%);
    --cxopcolor-24: hsl(214, 42%, 17%);
    --cxopcolor-25: hsl(44, 40%, 17%);
    --cxopcolor-26: hsl(0, 40%, 16%);
    --cxopcolor-27: hsl(355, 32%, 17%);
    --cxopcolor-28: hsl(330, 35%, 17%);
    --cxopcolor-29: hsl(320, 38%, 18%);
    --cxopcolor-30: hsl(300, 30%, 17%);
    --cxopcolor-31: hsl(190, 40%, 16%);
    --cxopcolor-32: hsl(185, 32%, 17%);
    --cxopcolor-33: hsl(170, 35%, 16%);
    --cxopcolor-34: hsl(165, 28%, 15%);
    --cxopcolor-35: hsl(205, 36%, 17%);
    --cxopcolor-36: hsl(220, 35%, 16%);
    --cxopcolor-37: hsl(235, 32%, 17%);
    --cxopcolor-38: hsl(270, 30%, 17%);
    --cxopcolor-39: hsl(280, 35%, 18%);
    --cxopcolor-40: hsl(90, 28%, 16%);
    --cxopcolor-41: hsl(120, 30%, 16%);
    --cxopcolor-42: hsl(145, 32%, 17%);
    --cxopcolor-43: hsl(25, 40%, 17%);
    --cxopcolor-44: hsl(40, 38%, 17%);
    --cxopcolor-45: hsl(50, 35%, 16%);
    --cxopcolor-46: hsl(270, 35%, 16%);
    --cxopcolor-47: hsl(0, 50%, 16%);
    --cxopcolor-48: hsl(0, 48%, 16%);
    --cxopcolor-49: hsl(0, 46%, 16%);
    --cxopcolor-50: hsl(0, 44%, 16%);

    --cxcolor-18-hover: hsl(0, 70%, 86%);
    --cxcolor-19-hover: hsl(33, 100%, 88%);
    --cxcolor-20-hover: hsl(140, 51%, 80%);
    --cxcolor-21-hover: hsl(211, 58%, 85%);
    --cxcolor-22-hover: hsl(259, 100%, 88%);
    --cxcolor-23-hover: hsl(152, 47%, 70%);
    --cxcolor-24-hover: hsl(213, 100%, 80%);
    --cxcolor-25-hover: hsl(44, 85%, 77%);
    --cxcolor-26-hover: hsl(0, 95%, 84%);
    --cxcolor-27-hover: hsl(355, 85%, 82%);
    --cxcolor-28-hover: hsl(330, 90%, 84%);
    --cxcolor-29-hover: hsl(320, 95%, 82%);
    --cxcolor-30-hover: hsl(300, 85%, 84%);
    --cxcolor-31-hover: hsl(190, 90%, 80%);
    --cxcolor-32-hover: hsl(185, 80%, 78%);
    --cxcolor-33-hover: hsl(170, 70%, 76%);
    --cxcolor-34-hover: hsl(165, 65%, 78%);
    --cxcolor-35-hover: hsl(205, 95%, 82%);
    --cxcolor-36-hover: hsl(220, 85%, 84%);
    --cxcolor-37-hover: hsl(235, 80%, 84%);
    --cxcolor-38-hover: hsl(270, 95%, 85%);
    --cxcolor-39-hover: hsl(280, 85%, 83%);
    --cxcolor-40-hover: hsl(90, 75%, 76%);
    --cxcolor-41-hover: hsl(120, 70%, 78%);
    --cxcolor-42-hover: hsl(145, 70%, 76%);
    --cxcolor-43-hover: hsl(25, 90%, 80%);
    --cxcolor-44-hover: hsl(40, 85%, 78%);
    --cxcolor-45-hover: hsl(50, 80%, 76%);
    --cxcolor-46-hover: hsl(270, 90%, 83%);
    --cxcolor-47-hover: hsl(0, 75%, 70%);
    --cxcolor-48-hover: hsl(0, 70%, 66%);
    --cxcolor-49-hover: hsl(0, 72%, 68%);
    --cxcolor-50-hover: hsl(0, 68%, 63%);

    --cxopcolor-18-hover: hsl(349, 25%, 20%);
    --cxopcolor-19-hover: hsl(33, 45%, 20%);
    --cxopcolor-20-hover: hsl(138, 18%, 18%);
    --cxopcolor-21-hover: hsl(211, 26%, 20%);
    --cxopcolor-22-hover: hsl(262, 33%, 22%);
    --cxopcolor-23-hover: hsl(153, 36%, 21%);
    --cxopcolor-24-hover: hsl(214, 42%, 21%);
    --cxopcolor-25-hover: hsl(44, 40%, 21%);
    --cxopcolor-26-hover: hsl(0, 40%, 22%);
    --cxopcolor-27-hover: hsl(355, 32%, 22%);
    --cxopcolor-28-hover: hsl(330, 35%, 22%);
    --cxopcolor-29-hover: hsl(320, 38%, 23%);
    --cxopcolor-30-hover: hsl(300, 30%, 22%);
    --cxopcolor-31-hover: hsl(190, 40%, 22%);
    --cxopcolor-32-hover: hsl(185, 32%, 22%);
    --cxopcolor-33-hover: hsl(170, 35%, 22%);
    --cxopcolor-34-hover: hsl(165, 28%, 21%);
    --cxopcolor-35-hover: hsl(205, 36%, 22%);
    --cxopcolor-36-hover: hsl(220, 35%, 22%);
    --cxopcolor-37-hover: hsl(235, 32%, 22%);
    --cxopcolor-38-hover: hsl(270, 30%, 22%);
    --cxopcolor-39-hover: hsl(280, 35%, 23%);
    --cxopcolor-40-hover: hsl(90, 28%, 22%);
    --cxopcolor-41-hover: hsl(120, 30%, 22%);
    --cxopcolor-42-hover: hsl(145, 32%, 22%);
    --cxopcolor-43-hover: hsl(25, 40%, 22%);
    --cxopcolor-44-hover: hsl(40, 38%, 22%);
    --cxopcolor-45-hover: hsl(50, 35%, 22%);
    --cxopcolor-46-hover: hsl(270, 35%, 22%);
    --cxopcolor-47-hover: hsl(0, 50%, 22%);
    --cxopcolor-48-hover: hsl(0, 48%, 22%);
    --cxopcolor-49-hover: hsl(0, 46%, 22%);
    --cxopcolor-50-hover: hsl(0, 44%, 22%);
    --cx-boxcolor-1: hsl(240, 14%, 20%);
    --br-0: .3rem;
    --br-1: 10px;
    --br-1-3: 13px;
    --br-1-5: 15px;
    --br-2: 20px;
    --br-2-5: 25px;
    --br-3: 30px;
    --br-3-5: 35px;
    --br-4: 40px;
    --br-4-5: 45px;
    --br-5: 50px;
    --br-5-5: 55px;
    --br-6: 60px;
    --br-6-5: 65px;
    --br-7: 70px;
    --br-7-5: 75px;
    --fs: 10px;
    --fs-0: 12px;
    --fs-1: 14px;
    --fs-2: 16px;
    --fs-3: 18px;
    --fs-4: 20px;
}

a {
    color: var(--text-color);
    transition: all .15s;
}

a:hover {
    color: var(--main);
}

ol,
ul {
    padding-left: 0 !important;
}

html {
    overflow-x: clip;
}

body {
    font-family: "Wix Madefor Display", sans-serif;
    height: 100%;
    background-color: var(--cxbgmain) !important;
    color: var(--text-color) !important;
    scrollbar-width: thin;
    scrollbar-color: var(--cxbcolor-3) transparent;
    scroll-behavior: smooth;
    overflow-x: clip;
    transition: all .15s;
    font-size: 14px;
}

/* Site geneli: profil çekmecesi (.cx-profile-drawer) ile aynı ince scrollbar */
::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background-color: var(--cxbcolor-3) !important;
    border-radius: var(--br-1) !important;
    border: 0 !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--cxbcolor-3) !important;
}


img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    user-select: none;
    -webkit-user-select: none;
}

.tippy-box[data-animation=scale][data-placement^=top] {
    transform-origin: bottom
}

.tippy-box[data-animation=scale][data-placement^=bottom] {
    transform-origin: top
}

.tippy-box[data-animation=scale][data-placement^=left] {
    transform-origin: right
}

.tippy-box[data-animation=scale][data-placement^=right] {
    transform-origin: left
}

.tippy-box[data-animation=scale][data-state=hidden] {
    transform: scale(.5);
    opacity: 0
}

.tippy-box[data-animation=fade][data-state=hidden] {
    opacity: 0
}

[data-tippy-root] {
    max-width: calc(100vw - 10px)
}

.tippy-box {
    position: relative;
    background: linear-gradient(145deg, rgba(42, 48, 60, 0.95), rgba(24, 28, 36, 0.98));
    color: var(--text-color);
    border-radius: var(--br-1);
    font-size: var(--fs-0);
    line-height: 1.4;
    outline: 0;
    transition-property: transform, visibility, opacity;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(130, 140, 165, 0.5);
}

.tippy-arrow {
    display: none !important;
}

.tippy-box[data-placement^=top]>.tippy-arrow {
    bottom: 0
}

.tippy-box[data-placement^=top]>.tippy-arrow:before {
    bottom: -6px;
    left: 0;
    border-width: 8px 8px 0;
    border-top-color: initial;
    transform-origin: center top
}

.tippy-box[data-placement^=bottom]>.tippy-arrow {
    top: 0
}

.tippy-box[data-placement^=bottom]>.tippy-arrow:before {
    top: -6px;
    left: 0;
    border-width: 0 8px 8px;
    border-bottom-color: initial;
    transform-origin: center bottom
}

.tippy-box[data-placement^=left]>.tippy-arrow {
    right: 0
}

.tippy-box[data-placement^=left]>.tippy-arrow:before {
    border-width: 8px 0 8px 8px;
    border-left-color: initial;
    right: -6px;
    transform-origin: center left
}

.tippy-box[data-placement^=right]>.tippy-arrow {
    left: 0
}

.tippy-box[data-placement^=right]>.tippy-arrow:before {
    left: -6px;
    border-width: 8px 8px 8px 0;
    border-right-color: initial;
    transform-origin: center right
}

.tippy-box[data-inertia][data-state=visible] {
    transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11)
}

.tippy-arrow:before {
    content: "";
    position: absolute;
    border-color: transparent;
    border-style: solid
}

.tippy-content {
    position: relative;
    padding: 5px 10px;
    z-index: 1
}

.cx-br-0 {
    border-radius: var(--br-0);
}

.cx-mra {
    margin-right: auto;
}

.cx-wh-15 {
    width: 15px !important;
    height: 15px !important;
}

.cx-wh-20 {
    width: 20px !important;
    height: 20px !important;
}

.cx-wh-25 {
    width: 25px !important;
    height: 25px !important;
}

.cx-wh-30 {
    width: 30px !important;
    height: 30px !important;
}

.cx-wh-35 {
    width: 35px !important;
    height: 35px !important;
}

.cx-wh-40 {
    width: 40px !important;
    height: 40px !important;
}

.cx-wh-45 {
    width: 45px !important;
    height: 45px !important;
}

.cx-wh-50 {
    width: 50px !important;
    height: 50px !important;
}

.cx-wh-60 {
    width: 60 !important;
    height: 60px !important;
}

.cx-wh-70 {
    width: 70px !important;
    height: 70px !important;
}

.cx-wh-80 {
    width: 80px !important;
    height: 80px !important;
}

.cx-wh-100 {
    width: 100px !important;
    height: 100px !important;
}

.cx-fs {
    font-size: var(--fs) !important;
}

.cx-fs-0 {
    font-size: var(--fs-0) !important;
}

.cx-fs-1 {
    font-size: var(--fs-1) !important;
}

.cx-fs-2 {
    font-size: var(--fs-2) !important;
}

.cx-fs-3 {
    font-size: var(--fs-3) !important;
}

.cx-fs-4 {
    font-size: var(--fs-4) !important;
}

.cxbb-1 {
    border-bottom: 1px solid var(--cxbcolor);
}

.cx-only-1 {
    color: var(--cxcolor-1) !important;
}

.cx-only-2 {
    color: var(--cxcolor-2) !important;
}

.cx-only-3 {
    color: var(--cxcolor-3) !important;
}

.cx-only-4 {
    color: var(--cxcolor-4) !important;
}

.cx-only-5 {
    color: var(--cxcolor-5) !important;
}

.cx-only-6 {
    color: var(--cxcolor-6) !important;
}

.cx-only-7 {
    color: var(--cxcolor-7) !important;
}

.cx-only-8 {
    color: var(--cxcolor-8) !important;
}

.cx-only-9 {
    color: var(--cxcolor-9) !important;
}

.cx-only-10 {
    color: var(--cxcolor-10) !important;
}

.cx-only-11 {
    color: var(--cxcolor-11) !important;
}

.cx-only-12 {
    color: var(--cxcolor-12) !important;
}

.cx-mt-5 {
    margin-top: 5px !important;
}

.cx-mt-10 {
    margin-top: 10px !important;
}

.cx-mt-15 {
    margin-top: 15px !important;
}

.cx-mt-20 {
    margin-top: 20px !important;
}

.cx-mt-25 {
    margin-top: 25px !important;
}

.cx-mt-30 {
    margin-top: 30px !important;
}

.cx-mt-35 {
    margin-top: 35px !important;
}

.cx-mt-40 {
    margin-top: 40px !important;
}

.cx-mt-45 {
    margin-top: 45px !important;
}

.cx-mt-50 {
    margin-top: 50px !important;
}

.cx-mb-5 {
    margin-bottom: 5px !important;
}

.cx-mb-10 {
    margin-bottom: 10px !important;
}

.cx-mb-15 {
    margin-bottom: 15px !important;
}

.cx-mb-20 {
    margin-bottom: 20px !important;
}

.cx-mb-25 {
    margin-bottom: 25px !important;
}

.cx-mb-30 {
    margin-bottom: 30px !important;
}

.cx-mb-50 {
    margin-bottom: 50px !important;
}

.cx-mt-5 {
    margin-top: 5px !important;
}

.cx-mt-10 {
    margin-top: 10px !important;
}

.cx-mb-15 {
    margin-bottom: 15px !important;
}

.cx-mt-20 {
    margin-top: 20px !important;
}

.cx-mt-25 {
    margin-top: 25px !important;
}

.cx-mt-30 {
    margin-top: 30px !important;
}

.cx-mt-50 {
    margin-top: 50px !important;
}

.cx-mb-5 {
    margin-bottom: 5px !important;
}

.cx-mb-10 {
    margin-bottom: 10px !important;
}

.cx-mb-15 {
    margin-bottom: 15px !important;
}

.cx-mb-20 {
    margin-bottom: 20px !important;
}

.cx-mb-25 {
    margin-bottom: 25px !important;
}

.cx-mb-30 {
    margin-bottom: 30px !important;
}

.cx-mb-50 {
    margin-bottom: 50px !important;
}

.cx-p-5 {
    padding: 5px !important
}

.cx-p-10 {
    padding: 10px !important;
}

.cx-p-15 {
    padding: 15px !important;
}

.cx-p-20 {
    padding: 20px !important;
}

.cx-p-25 {
    padding: 25px !important;
}

.cx-p-30 {
    padding: 30px !important;
}

.cx-p-50 {
    padding: 50px !important;
}

.cx-pt-5 {
    padding-top: 5px !important
}

.cx-pt-10 {
    padding-top: 10px !important;
}

.cx-pb-15 {
    padding-bottom: 15px !important;
}

.cx-pt-20 {
    padding-top: 20px !important;
}

.cx-pt-25 {
    padding-top: 25px !important;
}

.cx-pt-30 {
    padding-top: 30px !important;
}

.cx-pt-50 {
    padding-top: 50px !important;
}

.cx-pb-5 {
    padding-bottom: 5px !important;
}

.cx-pb-10 {
    padding-bottom: 10px !important;
}

.cx-pb-15 {
    padding-bottom: 15px !important;
}

.cx-pb-20 {
    padding-bottom: 20px !important;
}

.cx-pb-25 {
    padding-bottom: 25px !important;
}

.cx-pb-30 {
    padding-bottom: 30px !important;
}

.cx-pb-50 {
    padding-bottom: 50px !important;
}

.btn {
    border-radius: var(--br-1);
    height: 50px;
    /* 50px */
}

.cx-b-none {
    border: none !important;
}

.cx-lg-3 {
    flex: 0 0 auto;
    width: 23%;
}

.cx-lg-9 {
    flex: 0 0 auto;
    width: 77%;
}

.cxtopbar {
    background-color: var(--cxbgmainsec);
}

.cxtopbar .icon-announce {
    background-color: var(--main);
    color: var(--text-color);
    min-width: 40px;
    height: 40px;
    text-align: center;
    line-height: 56px;
    margin-right: 10px;
}

.cxtopbar .icon-announce i {
    font-size: 26px;
}

.cxtopbar .announce {
    width: 100%;
}

.announce-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 300;
    font-size: 15px;
    display: block;
}

.announce {
    height: 40px;
}

.announce .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.cxtopbar .buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
}

.cxtopbar .buttons a {
    font-size: var(--fs-0);
    font-weight: 500;
    padding: 0 5px;
}

.cxtopbar .buttons .dropdown-item {
    font-size: var(--fs-1);
}

.cxtopbar .social-media-icons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.cxtopbar .social-media-icons .social-icon {
    font-size: 14px;
    color: var(--text-color);
    transition: all 0.15s;
}

.cxtopbar .social-media-icons .social-icon:hover i {
    color: var(--main);
}

.btn-transparent {
    color: var(--text-color) !important;
}

.dropdown {
    position: relative !important;
}

.dropdown-menu {
    background-color: var(--cxbgmainsec) !important;
    color: var(--text-color) !important;
    padding: 0 !important;
    border-radius: var(--br-0) !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999;
    min-width: 250px;
    text-align: left;
}

.dropdown-menu .dropdown-item {
    color: var(--text-color-3);
    transition: all .15s;
}

.dropdown-menu .dropdown-item:hover {
    background-color: var(--cxbgmainfou) !important;
    color: var(--text-color);
    transform: scale(1.01);
}

.dropdown-menu ul {
    list-style: none;
}

.cxheader {
    padding: 20px 0;
    background: var(--cxbgmainsec);
    border-bottom: 1px solid var(--cxbcolor);
    border-top: 1px solid var(--cxbcolor);
}

.cxheader .form-search {
    position: relative;
}

.formControl {
    font-size: var(--fs-1);
    height: 45px;
    /* 50px */
    border-radius: var(--br-1) !important;
    border: 2px solid var(--cxbcolor);
    background-color: var(--cxbgmainsec);
    color: var(--text-color);
    width: 100%;
    position: relative;
    padding: 5px 15px;
    -moz-appearance: textfield;
    z-index: 1;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.formControl.gray {
    border: 1px solid var(--cxbcolor);
    background-color: var(--cxbgmain);
}

.formControl::placeholder {
    color: var(--text-color-h);
}

/* CS2 top filters — toolbarActions ile aynı görünüm */
.cxCs2TopFiltersBar .toolbarActions.cxCs2TopFilters {
    width: 100%;
    flex-wrap: nowrap;
}

.cxCs2TopFiltersBar .toolbarActions.cxCs2TopFilters>[role="tablist"] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.cxCs2TopFiltersBar .toolbarActions.cxCs2TopFilters .toolbarSelect {
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
}

.cxCs2TopFiltersBar .toolbarActions.cxCs2TopFilters .toolbarSelect .select2-container {
    align-self: center;
    vertical-align: middle;
}

@media (max-width: 575.98px) {
    .cxCs2TopFiltersBar .toolbarActions.cxCs2TopFilters {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .cxCs2TopFiltersBar .toolbarActions.cxCs2TopFilters>[role="tablist"] {
        width: 100%;
        justify-content: stretch;
    }

    .cxCs2TopFiltersBar .toolbarActions.cxCs2TopFilters>[role="tablist"] .toolbarBtn {
        flex: 1 1 0;
    }

    .cxCs2TopFiltersBar .toolbarActions.cxCs2TopFilters .toolbarSelect {
        margin-left: 0;
        width: 100%;
        border-left: none;
        padding-left: 0;
    }

    .cxCs2TopFiltersBar .toolbarActions.cxCs2TopFilters .toolbarSelect .select2-container {
        width: 100% !important;
        min-width: 0;
    }
}

.cxTopFiltersSearchCol {
    flex: 1 1 auto;
    min-width: 0;
}

.cxTopFiltersActionsCol {
    flex: 0 0 auto;
}

.cxTopFilters .input-group-text {
    height: 40px;
    border-radius: var(--br-1) 0 0 var(--br-1);
    border: 2px solid var(--cxbcolor);
    border-right: 0;
    background-color: var(--cxbgmainsec);
    color: var(--text-color);
    padding: 0 12px;
}

.cxTopFilters .cxTopFiltersSearch .formControl {
    height: 40px;
    font-size: var(--fs-0);
    filter: none;
    padding-right: 42px;
}

.cxTopFilters .cxTopFiltersSearch .formSearch-icon {
    pointer-events: auto;
    cursor: pointer;
    right: 2px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-right: 0;
    border-radius: var(--br-1);
}

.cxTopFilters .cxTopFiltersSearch .formSearch-icon:hover {
    color: var(--text-color);
}

.cxTopFilters .cxTopFilterSwitch {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1);
    background-color: var(--cxbgmainsec);
    height: 40px;
}

.cxTopFilters .cxTopFilterSwitch span {
    font-size: var(--fs-0);
    color: var(--text-color);
    white-space: nowrap;
    flex: 1 1 auto;
}

.cxTopFilters .cxTopFilterSwitch .cx-switch {
    width: 50px;
    min-width: 50px;
    height: 24px;
    margin-left: auto;
}

.cxTopFilters .cxTopFilterSwitch .cx-switch-slider:before {
    width: 16px;
    height: 16px;
    top: 3px;
}

.cxTopFilters .cxTopFilterSwitch .cx-switch input:checked+.cx-switch-slider:before {
    transform: translate3d(28px, 0, 0);
}

.cxTopFilters .select2-container .select2-selection--single {
    height: 40px;
}

.cxTopFilters .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 12px;
    line-height: 17px;
}

.cxTopFilters #sortingSelect.formControl {
    height: 40px;
    font-size: var(--fs-0);
    filter: none;
    width: auto !important;
    min-width: 190px;
}

/* Select2 init sonrası select2-container'ın width:100%!important override'ını engelle */
.cxTopFilters .select2-container {
    width: auto !important;
    min-width: 190px;
    max-width: 240px;
    flex: 0 1 auto;
}

.cxTopFilters .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 8px;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .cxTopFilters.row>.col-lg-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cxTopFilters.row>.col-lg-5 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cxTopFilters.row>.col-lg-5>.d-flex {
        justify-content: flex-start !important;
    }
}

@media (max-width: 991.98px) {

    .cxTopFiltersSearchCol,
    .cxTopFiltersActionsCol {
        width: 100%;
    }

    .cxTopFiltersActionsCol {
        flex-wrap: wrap;
    }

    .cxTopFilters #sortingSelect.formControl {
        width: 100% !important;
        min-width: 0;
        flex: 1 1 100%;
    }

    .cxTopFilters .cxTopFilterSwitch {
        flex: 1 1 auto;
    }

    .cxTopFilters .cxTopFilterSwitch span {
        white-space: normal;
    }
}

.cxStoreFilterPanel .cxStoreCard {
    overflow: hidden;
}

.cxStoreFilterPanel .cxStoreCard.category {
    border-bottom: none;
}

.cxStoreFilterPanel .cxStoreCard.otherFilters {}

.cxStoreFilterPanel .cxStoreCardTitle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    background: var(--cxbgmainsec);
    backdrop-filter: blur(10px);
}

.cxStoreFilterPanel .cxStoreCardTitle.other {
    border-top: 1px dashed var(--cxbcolor);
    padding-top: 15px;
}

.cxStoreFilterPanel .cxStoreCardTitle i {
    color: var(--main);
}

.cxStoreFilterPanel .cxStoreInput,
.cxStoreFilterPanel .cxStoreInput:focus,
.cxStoreFilterPanel .cxStoreInput:active {
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1);
    height: 40px;
    font-size: 12px;
    color: var(--text-color);
}

/* Filter sidebar: tüm native select ve Select2 (ilan + CS2) */
.cxStoreFilterPanel select,
.cxStoreFilterPanel select.formControl,
.cxStoreFilterPanel select.cxStoreInput {
    font-size: 12px;
}

.cxStoreFilterPanel .select2-container--default .select2-selection--single {
    height: 40px;
    font-size: 12px;
}

.cxStoreFilterPanel .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 12px;
    line-height: 16px;
}

.cxStoreFilterPanel .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    top: 0;
}

.cxStoreFilterPanel .select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 50%;
    margin-top: -2px;
}

.cxStoreFilterPanel .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px;
}

.cxFilterAccordion .select2-results__option,
.cxFilterAccordion .select2-search__field {
    font-size: 12px;
}

.cxStoreFilterPanel .cxStoreSearch {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 15px 10px 15px;
}

.cxStoreFilterPanel .cxStoreSearch .cxStoreInput {
    padding-right: 42px !important;
    height: 40px;
    font-size: 12px;
}

.cxStoreFilterPanel .cxStoreSearch .formSearch-icon {
    pointer-events: none;
    right: 18px;
    top: 44%;
    font-size: 12px;
}

.cxFilterAccordion .cxStoreFilterPanel .cxStoreOtherBody .cxStoreSearch {
    padding: 0;
}

.cxStoreFilterPanel .cxStoreOtherFilters .cxStoreOtherBody {
    padding: 0 15px 5px 15px;
    border-bottom: 1px dashed var(--cxbcolor);
}


.cxStoreFilterPanel .cxStoreOtherFilters .cxStoreOtherBody label {
    font-size: 12px;
    font-weight: 500;
}

.cxStoreFilterPanel .cxStoreOtherFilters .cxStoreOtherSectionTitle {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 10px;
}

.cxStoreFilterPanel .cxStoreOtherFilters .cxStoreBudgetGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.cxStoreFilterPanel .cxStoreOtherFilters .cxStoreBudgetGrid .formControl {
    margin: 0 !important;
    width: 100% !important;
}

.cxStoreFilterPanel .cxStoreOtherFilters .cxStoreSwitchList {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.cxStoreFilterPanel .cxStoreOtherFilters .cxStoreSwitchRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.cxStoreFilterPanel .cxStoreOtherFilters .cxStoreSwitchLeft {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cxStoreFilterPanel .cxStoreOtherFilters .cxStoreSwitchLeft i {
    color: var(--main);
    opacity: 0.95;
    flex: 0 0 auto;
}

.cxStoreFilterPanel .cxStoreOtherFilters .cxStoreSwitchLeft span {
    font-size: 12px;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.9);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cxStoreFilterPanel .cxStoreOtherFilters .cx-switch {
    width: 54px;
    min-width: 54px;
    height: 26px;
}

.cxStoreFilterPanel .cxStoreOtherFilters .cx-switch-slider:before {
    width: 16px;
    height: 16px;
    top: 4.5px;
}

.cxStoreFilterPanel .cxStoreOtherFilters .cx-switch input:checked+.cx-switch-slider:before {
    transform: translate3d(30px, 0, 0);
}

.cxStoreFilterPanel .cxStoreCatList {
    padding: 12px 15px 12px 15px;
}

.cxStoreFilterPanel .cxStoreCatItems {
    padding: 0 !important;
    margin: 0;
    list-style: none;
}

.cxStoreFilterPanel .cxStoreCatItem {
    margin-bottom: 3px;
}

.cxStoreFilterPanel .cxStoreCatToggle {
    padding: 10px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid transparent;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
    cursor: pointer;
}

.cxStoreFilterPanel .cxStoreCatToggle:hover {
    background: var(--cxbgmainfiv);
    color: var(--text-color);
}

.cxStoreFilterPanel .cxStoreCatToggle.active {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22);
}

.cxStoreFilterPanel .cxStoreCatNameIcon {
    min-width: 0;
    gap: 10px;
}

.cxStoreFilterPanel .cxStoreCatIcon {
    border-radius: 12px;
    overflow: hidden;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

.cxStoreFilterPanel .cxStoreCatIcon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.cxStoreFilterPanel .cxStoreCatName {
    font-weight: 650;
    font-size: 12px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cxStoreFilterPanel .cxStoreCatToggle i {
    transition: transform .18s ease;
    opacity: 0.8;
    margin-left: 10px;
    font-size: 10px !important;
    flex: 0 0 auto;
}

.cxStoreFilterPanel .cxStoreCatToggle.is-open i {
    transform: rotate(180deg);
}

.cxStoreFilterPanel .cxStoreSubcats ul.cxStoreSubcatTree {
    padding: 8px 10px 4px 10px !important;
    margin: 0;
    list-style: none;
    position: relative;
}

/* Dikey dashed omurga (alt kategori listesi) */
.cxStoreFilterPanel .cxStoreSubcats ul.cxStoreSubcatTree::before {
    content: "";
    position: absolute;
    left: 16px;
    /* rail merkezi */
    top: 2px;
    bottom: 10px;
    width: 0;
    border-left: 1px dashed rgba(255, 255, 255, 0.22);
    pointer-events: none;
}

.cxStoreFilterPanel .cxStoreSubcatItem {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 0;
    border-radius: 11px;
    background: transparent;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease;
    margin: 0 0 3px 0;
    overflow: hidden;
}

.cxStoreFilterPanel .cxStoreSubcatTreeRail {
    position: relative;
    width: 34px;
    flex: 0 0 14px;
}

/* Her alt kategori satırına yatay dashed bağlantı (omurgadan checkbox'a) */
.cxStoreFilterPanel .cxStoreSubcatItem::before {
    content: "";
    position: absolute;
    left: 8px;
    /* omurga hizası */
    top: 50%;
    width: 24px;
    height: 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.22);
    ;
    pointer-events: none;
    z-index: 0;
}

.cxStoreFilterPanel .cxStoreSubcatBody {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px;
    gap: 10px;
}

.cxStoreFilterPanel .cxStoreSubcatBody>.d-flex {
    min-width: 0;
    flex: 1 1 auto;
}

.cxStoreFilterPanel .cxStoreSubcatItem label {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.86);
    margin-left: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cxStoreFilterPanel .cxStoreSubcatCount {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    flex: 0 0 auto;
}

.cxStoreFilterPanel .cxStoreSubcatCheck {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
}

/* Sidebar'da global checkbox (cxcustcb) daha kompakt olsun */
.cxStoreFilterPanel .cxStoreSubcatCheck.cxcustcb-small .cbx span:last-child {
    font-size: 11px;
    padding-left: 6px;
    line-height: 1.15;
}

.cxStoreFilterPanel .cxStoreSubcatCheck.cxcustcb-small .cbx span:first-child {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    overflow: hidden;
    /* ripple/animasyon dışarı taşmasın */
}

.cxStoreFilterPanel .cxStoreSubcatCheck.cxcustcb-small .cbx span:first-child svg {
    top: 1.2px;
    left: 1px;
    height: 7.5px;
    width: 9px;
}

/* Sidebar'da checkbox ripple animasyonu daha küçük olsun */
.cxStoreFilterPanel .cxStoreSubcatCheck.cxcustcb-small .inp-cbx:checked+.cbx span:first-child:before {
    transform: scale(2.2);
}

.cxStoreFilterPanel .cxStoreSubcatLabelText {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cxStoreFilterPanel .cxStoreSubcatBody {
    padding: 5px 8px;
}

.cxStoreFilterPanel .cxfilterbtn {
    padding: 20px 12px 12px 12px;
    background-color: var(--cxbgmainfiv-thi);
}

.cxStoreFilterPanel .cxfilterbtn .btnmainsec {
    background: var(--main);
    border: 0;
    border-radius: var(--br-1-3);
    height: 45px;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.3);
}

.cxStoreFilterPanel .cxfilterbtn .btnmainsec:hover {
    background: var(--mainfou);
}

.cxStoreFilterPanel .cxStoreClear {
    border-radius: var(--br-1-3);
    background: transparent;
    border: 2px solid var(--cxbcolor);
    padding: 9px 11px;
    color: var(--text-color);
    text-align: center;
    font-size: 12px;
}

.cxStoreFilterPanel .cxStoreClear i {
    margin-right: 5px;
    font-size: 11px;
}

.cxStoreFilterPanel .cxStoreClear:hover {
    color: var(--cxcolor-48);
    background: var(--cxopcolor-48);
    border-color: var(--cxopcolor-48-hover);
}

/* ── CS2 Filter Sidebar ─────────────────────────────────────────────────── */
.cs2FilterSidebar .cxStoreOtherBody {
    padding: 0 15px 10px 15px;
}

.cs2FilterSidebar .cxStoreFilterPanel .cxStoreCardTitle.other {
    border-top: 1px dashed var(--cxbcolor);
}

.cs2FilterSidebar .cxStoreFilterPanel .cxCs2FilterSection:first-child .cxStoreCardTitle.other {
    border-top: none;
}

/* Budget grid yan yana */
.cs2FilterSidebar .cxStoreBudgetGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cs2FilterSidebar .cxStoreBudgetGrid .formControl {
    margin: 0 !important;
    width: 100% !important;
}

/* Wear butonları */
.cs2FilterSidebar .cs2WearBtnGroup {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-top: 10px;
}

.cs2WearBtn {
    padding: 5px 2px;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--br-1);
    border: 2px solid var(--cxbcolor);
    background: transparent;
    color: var(--text-muted, #9a9ab0);
    cursor: pointer;
    text-align: center;
    transition: background .15s, color .15s, border-color .15s;
    letter-spacing: .02em;
}

.cs2WearBtn:hover {
    border-color: var(--mainsec);
    color: var(--mainsec);
}

.cs2WearBtn.active {
    background: var(--mainsec);
    border-color: var(--mainsec);
    color: #fff;
}

/* Special 2x2 grid */
.cs2SpecialGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    padding-top: 4px;
}

.cs2SpecialText--orange {
    color: #f97316;
    font-weight: 600;
}

.cs2SpecialText--yellow {
    color: #eab308;
    font-weight: 600;
}

.cs2SpecialText--blue {
    color: #3b82f6;
    font-weight: 600;
}

/* Sticker slot */
.cs2StickerSlot {
    margin-bottom: 8px;
}

.cs2StickerSlot:last-child {
    margin-bottom: 0;
}

.cs2StickerSlotLabel {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}

.cs2StickerSlotRow {
    display: flex;
    gap: 6px;
    align-items: center;
}

.cs2StickerSlotRow .cs2StickerSearch+.select2-container,
.cs2StickerSlot .select2-container:first-child {
    flex: 1;
    min-width: 0;
}

.cs2StickerSlot .cs2StickerPos,
.cs2StickerSlot .select2-container:last-child {
    width: 72px !important;
    flex-shrink: 0;
}

/* Nadirlik renkli dot */
.cs2RarityDot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Aktif filtre göstergesi */
.cs2FilterDot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3b82f6;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

.cx-nouislider {
    margin: 8px 4px 4px;
}

/* CS2 filter: range slider (Wear / Fade / Pattern) */
.cs2FilterSidebar .cs2RangeBlock {
    margin-bottom: 4px;
}

.cs2FilterSidebar .cs2FieldBlock {
    margin-bottom: 14px;
}

/* Paint Seed tag input */
.cs2FilterSidebar .cs2PaintSeedTags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 8px;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1);
    background: var(--cxbgmainsec);
    cursor: text;
}

.cs2FilterSidebar .cs2PaintSeedTags-list {
    display: contents;
}

.cs2FilterSidebar .cs2PaintSeedTag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    border-radius: 8px;
    background: var(--cxbgmainfiv);
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}

.cs2FilterSidebar .cs2PaintSeedTag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.cs2FilterSidebar .cs2PaintSeedTag-remove:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.cs2FilterSidebar .cs2PaintSeedTag-remove i {
    font-size: 9px;
}

.cs2FilterSidebar .cs2PaintSeedTags-input {
    flex: 1 1 48px;
    min-width: 48px;
    width: auto;
    height: 26px;
    padding: 0 4px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-color);
    font-size: 12px;
}

.cs2FilterSidebar .cs2PaintSeedTags-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.cs2FilterSidebar .cs2RangeLabel {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 6px;
}

.cs2FilterSidebar .cs2RangeInputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}

.cs2FilterSidebar .cs2RangeInputCol .cxStoreInput {
    width: 100%;
    margin: 0;
}

.cs2FilterSidebar .cs2RangeSlider {
    margin: 10px 6px 18px;
    height: 8px;
    border: none;
    box-shadow: none;
    background: transparent;
}

.cs2FilterSidebar .cs2RangeSlider.noUi-horizontal {
    height: 8px;
}

.cs2FilterSidebar .cs2RangeSlider .noUi-connects {
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.cs2FilterSidebar .cs2RangeSlider .noUi-connect {
    background: transparent;
}

.cs2FilterSidebar .cs2RangeSlider--wear .noUi-connects {
    background: linear-gradient(90deg,
            #2a8f1a 0%,
            #2a8f1a 7%,
            #3dcc28 7%,
            #3dcc28 15%,
            #9ae620 15%,
            #9ae620 38%,
            #e85a5a 38%,
            #e85a5a 45%,
            #ff3030 45%,
            #ff3030 100%);
}

.cs2FilterSidebar .cs2RangeSlider--fade .noUi-connects {
    background: linear-gradient(90deg,
            #d9bba5 0%,
            #e5903b 33%,
            #db5977 66%,
            #6775e1 100%);
}

.cs2FilterSidebar .cs2RangeSlider--pattern .noUi-connects,
.cs2FilterSidebar .cs2RangeSlider--price .noUi-connects {
    background: var(--cxbcolor);
}

.cs2FilterSidebar .cs2RangeSlider--pattern .noUi-connect,
.cs2FilterSidebar .cs2RangeSlider--price .noUi-connect {
    background: var(--mainsec);
}

.cs2FilterSidebar .cs2RangeInputCol .iconInput {
    width: 100%;
}

.cs2FilterSidebar .cs2RangeInputCol .iconInput .cxStoreInput {
    width: 100%;
}

.cs2FilterSidebar .cs2RangeSlider .noUi-handle {
    width: 0;
    height: 0;
    border: none;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid #fff;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    cursor: grab;
}

.cs2FilterSidebar .cs2RangeSlider .noUi-handle:before,
.cs2FilterSidebar .cs2RangeSlider .noUi-handle:after {
    display: none;
}

.cs2FilterSidebar .cs2RangeSlider.noUi-horizontal .noUi-handle {
    width: 0;
    height: 0;
    right: -7px;
    top: 10px;
}

.cs2FilterSidebar .cs2RangeSlider .noUi-origin {
    z-index: 2;
}

/* ── /CS2 Filter Sidebar ─────────────────────────────────────────────────── */

.formControl-white {
    background-color: var(--text-color);
    border: 1px solid var(--text-color);
    color: var(--text-color-h);
}

.formControl-white::placeholder {
    color: var(--text-color-h);
}

.formControl:disabled,
.formControl[readonly] {
    background-color: var(--cxbgmainsec);
    color: var(--text-color);
}

.cx-file-upload {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cx-file-input.formControl {
    height: auto;
    min-height: 45px;
    padding: 6px 8px;
    line-height: 1.3;
}

.cx-file-input::file-selector-button {
    border: 1px solid var(--cxbcolor);
    background: var(--cxbgmainfiv);
    color: var(--text-color);
    border-radius: 8px;
    padding: 9px 14px;
    margin-right: 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cx-file-input::-webkit-file-upload-button {
    border: 1px solid var(--cxbcolor);
    background: var(--cxbgmainfiv);
    color: var(--text-color);
    border-radius: 8px;
    padding: 9px 14px;
    margin-right: 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cx-file-input:hover::file-selector-button,
.cx-file-input:hover::-webkit-file-upload-button {
    background: var(--cxbgmainfiv-sec);
}

.cx-file-upload-help {
    margin: 0;
    font-size: 12px;
    color: var(--text-color-h);
    line-height: 1.5;
}

.fileUpload {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fileUpload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fileUpload-control {
    width: 100%;
    min-height: 45px;
    border-radius: var(--br-1);
    border: 2px solid var(--cxbcolor);
    background-color: var(--cxbgmainsec);
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.fileUpload-control:hover {
    border-color: var(--cxbcolor-3);
    background-color: var(--cxbgmainthi);
}

.fileUpload-trigger {
    height: 100%;
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-right: 2px solid var(--cxbcolor);
    background-color: var(--cxbgmainfiv);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.fileUpload-control:hover .fileUpload-trigger {
    border-color: var(--cxbcolor-3);
}

.fileUpload-name {
    flex: 1;
    min-width: 0;
    padding: 0 12px;
    font-size: 12px;
    color: var(--text-color-h);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fileUpload-input:focus-visible+.fileUpload-control {
    border-color: var(--cxbcolor-3);
    box-shadow: 0 0 0 3px rgba(34, 207, 122, 0.16);
}

.fileUpload-mini .fileUpload-control {
    min-height: 38px;
}

.fileUpload-mini .fileUpload-trigger {
    min-height: 36px;
    padding: 0 10px;
    font-size: 11px;
}

.fileUpload-mini .fileUpload-name {
    font-size: 11px;
}

.identity-non-tc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.btn:focus,
.formControl:focus {
    box-shadow: none;
}

.formGroup {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.formGroup .formLabel {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-color);
}

.formTextarea {
    height: auto;
    padding: 10px;
}

.formTextarea,
textarea {
    scrollbar-width: thin;
    scrollbar-color: var(--cxbcolor-3) transparent;
}

.formTextarea::-webkit-scrollbar,
textarea::-webkit-scrollbar {
    width: 4px;
}

.formTextarea::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
    background: transparent;
}

.formTextarea::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
    background: var(--cxbcolor-3);
    border-radius: var(--br-1);
}

.formTextareaRn {
    resize: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
}

.formControl:focus {
    border: 2px solid var(--cxbcolor);
    background-color: var(--cxbgmainthi);
    color: var(--text-color);
    outline: none;
}

.cxheader .form-search .formControl {
    background-color: var(--cxbgmain);
    border: 2px solid var(--cxbcolor);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
    height: 45px;
    /* 50px */
    border-radius: var(--br-1);
    padding: 0 30px;
    width: 100%;
    font-size: var(--fs-1);
    display: block;
}

.cxheader .form-search .button {
    height: 45px;
    /* 50px */
    width: 45px;
    /* 50px */
    border-radius: 100%;
    display: inline-block;
    text-align: center;
    line-height: 45px;
    /* 50px */
    font-size: 18px;
    color: var(--text-color);
    position: absolute;
    top: 2px;
    right: 6px;
}

.search-list {
    position: absolute;
    width: 100%;
    background-color: var(--cxbgmain);
    border: 1px solid #353353;
    padding: 5px;
    border-radius: var(--br-1);
    z-index: 999;
    margin-top: 10px;
}

.search-list .product {
    padding: 15px;
    border-radius: var(--br-1);
    cursor: pointer;
}

.search-list .product:hover {
    background-color: #201f2c;
}

.search-list .product .img {
    width: 100px;
    margin-right: 20px;
}

.search-list .product .content {
    width: 100%;
}

.search-list .product .productname {
    font-size: 18px;
}

.search-list .product .price {
    font-size: 22px;
    font-weight: 600;
    color: var(--cxcolor-7);
}

.btn-header {
    color: var(--text-color);
    position: relative;
}

.material-icons {
    cursor: pointer;
}

.headerRight {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.profileHeader {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 0;
    background: var(--cxbgmainthi);
    border-radius: var(--br-2);
    border: 2px solid var(--cxbcolor);
    min-width: 120px;
    justify-content: space-between;
    cursor: pointer;
}

.profileHeader .profileHeaderImage {
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.50));
}

.profileHeader .profileHeaderImage .profileImage {
    width: 40px;
    height: 40px;
    position: relative;
    background: var(--cxbgmainthi);
    border-radius: var(--br-1-5);
    z-index: 1;
}

.profileHeader .profileHeaderImage .profileImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--br-1-5);
}

.profileHeader .profileHeaderDetails {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.profileHeader .profileHeaderDetails .profileInfo {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
}

.profileHeader .profileHeaderDetails .profileInfo .profileTitle {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profileHeader .profileHeaderDetails .profileInfo .profileBalance {
    font-size: 11px;
    color: var(--main);
    font-weight: 500;
}

.btn.btnhlr {
    padding: 10px 20px !important;
    background-color: var(--cxbgmainfiv);
    transition: ease .15s;
    border-radius: var(--br-1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn.btnhlr:hover {
    background-color: var(--cxbgmainfiv-sec);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.btn.btnhlr .title {
    color: var(--text-color);
    font-weight: 500;
}

.btn.btnhlrr {
    padding: 10px 20px !important;
    border: 1px solid var(--cxbcolor);
    border-radius: var(--br-1);
    background-color: var(--main);
    transition: ease .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
}

.btn.btnhlrr:hover {
    background-color: var(--mainsec);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--mainsec) 32%, transparent);
}

.btn.btnhlrr .title {
    color: var(--cxbgmainsec);
    font-weight: 500;
}

.btn.green {
    border: 1px solid var(--cxcolor-7);
    box-shadow: 0 3px 6px rgba(49, 255, 159, 0.25);
}

.btn.green .title {
    color: var(--cxcolor-7);
    text-shadow: 0 0 6px var(--cxcolor-7);
}

.btn.green .material-icons {
    background-color: var(--cxcolor-7)
}

.btn.yellow {
    border: 1px solid #FF9F31;
    box-shadow: 0 3px 6px rgba(255, 159, 49, 0.25);
}

.btn.yellow .title {
    color: #FF9F31;
    text-shadow: 0 0 6px #FF9F31;
}

.btn.yellow .material-icons {
    background-color: #FF9F31
}

.cxmidhome .buyhomebtn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--mainsec);
    background-color: var(--mainsec) !important;
}

.cxmidhome .buyhomebtn .title {
    margin: 0 10px;
    font-size: 16px;
    color: #ffff !important;
    text-shadow: none !important;
}

.cxnavbar {
    background-color: var(--cxbgmainsec);
    position: relative;
    border-bottom: 1px solid var(--cxbcolor);
}

/* Mobil / tablet: üst pill şeridi tamamen gizli (tam ekran menü + cxMobileNavOpenBtn ile uyumlu) */
@media (max-width: 991.98px) {
    nav.cxnavbar.navbar.navbar-expand-lg {
        display: none !important;
    }
}

/* Header pills (Kategoriler + max 8 menu) */
.cxnavpills {
    width: 100%;
    align-items: center;
    position: relative;
}

.cxnavbar .container {
    position: relative;
}

.cxnavpillsMenu {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.cxnavpillwrap {
    position: relative;
}

.cxnavpillwrap--panel button.cxnavpill {
    cursor: pointer;
}

.cxnavpill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: var(--br-1-3);
    background: transparent;
    border: 0;
    color: var(--text-color);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    transition: all .15s ease;
}

.cxnavpill:hover,
.cxnavpill:focus {
    color: var(--text-color);
    background: transparent;
    border-color: transparent;
}

.cxnavpillIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--br-1-3);
    background: rgba(0, 0, 0, 0.18);
    flex: 0 0 auto;
    color: inherit;
}

.cxnavpillIcon img {
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
}

.cxnavpillIcon i,
.cxnavpillIcon svg {
    color: inherit;
    fill: currentColor;
    font-size: 16px;
}

.cxnavpillText {
    font-weight: 600;
    font-size: 14px;
    text-transform: none;
}

.cxnavpillChev {
    opacity: 0.7;
    font-size: 12px;
}

.cxnavpill--categories {
    background: transparent;
    border-color: transparent;
    color: var(--text-color);
    flex: 0 0 auto;
}

.cxnavpill--categories:hover,
.cxnavpill--categories:focus {
    background: transparent;
    color: var(--text-color);
}

.cxnavpill--categories .cxnavpillIcon {
    background: var(--cxopcolor-25);
    color: var(--mainfou);
}

/* Categories dropdown (navbar) */
.cxCatDropdown {
    position: absolute;
    top: calc(100% + 0px);
    left: 0;
    right: 0;
    width: 100%;
    background: var(--cxbgmainsec);
    border-top: 1px solid var(--cxbcolor);
    border-bottom: 1px solid var(--cxbcolor);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    padding: 14px;
    z-index: 2000;
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: none;
}

/* Üst menü alt öğe paneli (kategoriler paneli 14px kalır) */
.cxCatDropdown.cxNavMenuDropdown {
    padding: 30px;
}

.cxCatDropdown.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: none;
}

.cxCatDropdown.is-open.is-closing {
    visibility: visible;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: transform .25s ease, opacity .2s ease, visibility .2s ease;
}

.cxCatDropdownHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cxCatDropdownTitle {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-color);
}

.cxCatDropdownActions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.cxCatDropdownSearch {
    position: relative;
    max-width: 420px;
    width: 100%;
}

.cxCatDropdownSearch .formControl {
    color: var(--text-color);
    height: 40px;
    font-size: var(--fs-0);
}

.cxCatDropdownAll {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: var(--br-1-3);
    background: var(--cxbgmainfou);
    border: 2px solid var(--cxbcolor);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    font-size: 11px;
    height: 40px;
}

.cxCatDropdownAll:hover {
    color: var(--text-color);
    background: var(--cxbgmainthi);
    border-color: var(--cxbcolor-3);
}

.cxCatDropdownGrid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.cxCatDropdownGridEmpty {
    display: none;
    grid-column: 1 / -1;
    margin: 0;
    text-align: center;
    padding: 32px 16px;
    color: var(--text-color-3);
    font-size: 12px;
    font-weight: 500;
}

.cxCatDropdownGridEmpty.is-visible {
    display: block;
}

.cxCatItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 14px;
    border: 2px solid var(--cxbcolor);
    color: var(--text-color);
    text-decoration: none;
    transition: all .15s ease;
    min-height: 52px;
    min-width: 0;
}

.cxCatItem:hover {
    background: var(--catItemHoverBg,
            color-mix(in srgb, var(--catIconBg, var(--main)) 14%, var(--cxbgmainthi)));
    border-color: var(--catItemHoverBorder, var(--catIconBg, var(--cxbcolor-3)));
    color: var(--text-color);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--catIconBg, var(--main)) 22%, transparent);
}

.cxCatItem:hover .cxCatItemText {
    color: var(--text-color);
}

.cxCatItem:hover .cxCatItemIconText {
    color: var(--catIconFg, var(--text-color));
}

.cxCatItemIcon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--catIconBg, rgba(0, 0, 0, 0.22));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
    transition: background-color .15s ease;
}

.cxCatItem:hover .cxCatItemIcon {
    background: var(--catIconBg, rgba(0, 0, 0, 0.22));
}

.cxCatItemIcon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.cxCatItemIconText {
    font-weight: 800;
    font-size: 13px;
    color: var(--catIconFg, var(--text-color));
}

.cxCatItemText {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.1;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 1400px) {
    .cxCatDropdownGrid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .cxCatDropdownGrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.cxnavbar .navbar-nav {
    justify-content: space-between;
    text-transform: uppercase;
    margin-right: auto;
}

.nav-link {
    color: var(--text-color);
}

.cxnavbar .nav-link {
    color: var(--text-color);
    font-size: 14px;
    text-align: center;
}

.cxnavbar .nav-link:hover,
.cxnavbar .nav-link:focus {
    color: var(--main);
}

.cxnavbar .navbar-toggler {
    color: var(--text-color);
    outline: none !important;
    width: 100%;
    text-align: center;
}

.cxnavbar .navbar-toggler:focus {
    box-shadow: none !important;
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: -300px;
    width: 250px;
    height: 100%;
    background-color: var(--cxbgmainsec);
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    padding: 20px;
    transition: left 0.3s ease-in-out;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}


.mobile-menu .nav-link {
    color: var(--text-color);
    font-size: var(--fs-1);
    font-weight: 300;
}

.mobile-menu.open {
    left: 0;
}

.cxhome-slider {
    margin-top: 30px;
}

.cxhome-slider .owl-carousel .item img {
    border-radius: 29px;
}

.cxhome-slider .owl-dots {
    position: relative;
    top: -50px;
    margin-top: 0;
}

.cxhome-slider .owl-dots span {
    height: 20px !important;
    width: 20px !important;
    box-shadow: 0 0 6px var(--text-color);
}

.cxhome-slider .owl-dots .active span {
    background-color: transparent !important;
    border: 1px solid var(--text-color);
    box-shadow: none;
}

.cxshortcuts {
    margin-bottom: 30px;
}

.cxshortcut {
    background: linear-gradient(to right, var(--text-color), var(--text-color));
    border-radius: 16px;
    padding: 10px;
    display: flex;
    align-items: center;
    color: #484848;
    transition: 0.3s;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    margin: 10px 0;
}

.cxshortcut .img {
    height: 83px;
    min-width: 40px;
    max-width: 110px;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cxshortcut .img2 {
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
    display: none !important;
}

.cxshortcut .content {
    text-align: center;
}

.cxshortcut .title {
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.cxshortcut .subtitle {
    font-size: 13px;
    font-weight: 300 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.cxshortcut:hover {
    background: linear-gradient(to top right, var(--gradient-color1), var(--gradient-color2));
    box-shadow: 0 0 15px rgba(255, 200, 91, 0.8);
    color: var(--text-color);
}

.cxshortcut:hover .img1 {
    display: none;
}

.cxshortcut:hover .img2 {
    visibility: visible;
    opacity: 1;
    display: block !important;
}

.cxshortcut:hover .title {
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.cxauth {
    display: flex;
    align-items: center;
    /*background:
        radial-gradient(1200px 520px at 50% 20%, rgba(120, 76, 255, 0.14), rgba(0, 0, 0, 0) 60%),
        radial-gradient(900px 420px at 15% 35%, rgba(51, 255, 181, 0.08), rgba(0, 0, 0, 0) 55%),
        radial-gradient(900px 420px at 85% 35%, rgba(255, 68, 148, 0.08), rgba(0, 0, 0, 0) 55%);*/
}

.cxauth .cxauth-topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    background: var(--cxbgmainsec);
    border-bottom: 1px solid var(--cxbcolor-2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.cxauth .cxauth-topbar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
}

.cxauth .cxauth-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cxauth .cxauth-brand img {
    height: 42px;
    width: auto;
    max-width: min(320px, 78vw);
    object-fit: contain;
}

.cxauth .container-fluid.cxauth-has-topbar {
    padding-top: 105px;
}

.cxauth .img-auth {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.cxauth .img-auth.img-auth-left {
    right: inherit;
    left: 0;
}

.cxauth .img-logo {
    display: block;
    margin: auto;
    z-index: 2;
    position: relative;
}

.cxauth .left {
    position: relative;
    z-index: 3;
    padding-left: 40px;
}

.cxauth .left.register {
    padding-left: 0;
    padding-right: 60px;
}

.cxauth form label {
    display: block;
    margin-bottom: 3px;
}

.cxauth-forgot {
    color: var(--text-color);
    font-size: var(--fs-1);
    text-align: end;
    margin-top: -10px;
}

.cxauth-2fa-link {
    text-align: end;
    margin: -5px 0 10px 0;
    font-size: 14px;
    color: var(--text-color);
}

.cxauth-2fa-link .resendBtn {
    color: var(--text-color);
    background: none;
    border: none;
    outline: none;
}

.cxauth-2fa-link .resendBtn:disabled {
    opacity: 0.7;
}

.cxauth-2fa-logout {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--text-color);
}

.cxauth-2fa-logout .logoutBtn {
    color: var(--text-color);
    background: none;
    border: none;
    outline: none;
}

.btnmain {
    border: 1px solid var(--mainsec) !important;
    background-color: var(--mainsec) !important;
    color: #fff !important;
    transition: all .15s;
    border-radius: var(--br-0);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mainsec) 25%, transparent);
}

.btnmain:hover {
    border: 1px solid var(--main) !important;
    background-color: var(--main) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--main) 32%, transparent) !important;
}

.btnstreamerP {
    border: 1px solid var(--mainsec) !important;
    background-color: var(--mainsec) !important;
    color: #fff !important;
    transition: all .15s;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mainsec) 25%, transparent);
}

.btnstreamerP:hover {
    border: 1px solid var(--main) !important;
    background-color: var(--main) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--main) 32%, transparent) !important;
}

.btn-red-blur {
    border: 3px solid #FF2A4E !important;
    background-color: #FF2A4E !important;
    box-shadow: 0 0 15px #FF2A4E;
    color: var(--text-color) !important;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
}

.btn-red-blur.bordered {
    color: #FF2A4E !important;
    background-color: transparent !important;
}

.formControl-border.formControl {
    background-color: var(--cxbgmainsec) !important;
    border: 1px solid var(--cxbcolor) !important;
    padding: 10px 15px;
}

.password-input-wrapper {
    position: relative;
}

.password-input-wrapper .formControl {
    padding-right: 45px;
}

.password-toggle-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #a0a0a8;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.password-toggle-icon:hover {
    color: var(--text-color);
}

.cx-password-field {
    position: relative;
}

.cx-password-input {
    padding-right: 44px !important;
}

.cx-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #a0a0a8;
    z-index: 2;
}

.cx-password-toggle:hover {
    color: var(--text-color);
}

.cxmodal-login .modal-title {
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 34px;
}

.cxmodal-login .body {
    padding: 20px;
}

.cxmodal-login .head {
    text-align: center;
    padding-top: 15px;
}

.cxmodal-login .btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
}

.cxmodal-login .btn {
    padding: 10px;
    font-size: 18px;
    font-weight: 500;
    border-radius: 4px !important;
}

.cxmodal-login .formControl {
    height: 52px;
    border: 1px solid var(--cxbcolor) !important;
}

.cxmodal-login form label {
    display: block;
    margin-bottom: 3px;
}

.cxmodal-login .btn-success {
    margin-bottom: 5px;
}

.register-text {
    font-weight: 300;
    text-align: center;
    display: block;
    margin-top: 3px;
    font-size: var(--fs-1);
}

.register-text a {
    color: var(--main);
    font-weight: 500;
}

.register-text a:hover {
    color: var(--mainsec) !important;
}

.btn-social {
    background-color: var(--text-color) !important;
    color: var(--cxbcolor) !important;
    position: relative;
    margin: 5px 0;
    padding: 10px !important;
    transition: 0.2s !important;
}

.btn-social img {
    position: absolute;
    left: 7px;
    top: 4px;
}

.btn-social:hover {
    transform: scale(1.02);
}

.btn-twitch {
    background-color: #8E24AA !important;
    color: var(--text-color) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, #8E24AA 25%, transparent);
}

.btn-twitch:hover {
    box-shadow: 0 4px 16px color-mix(in srgb, #8E24AA 32%, transparent);
}

.btn-discord {
    background-color: #5865F2 !important;
    color: var(--text-color) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, #5865F2 25%, transparent);
}

.btn-discord:hover {
    box-shadow: 0 4px 16px color-mix(in srgb, #5865F2 32%, transparent);
}

.btn-steam {
    background-color: #1b2838 !important;
    color: var(--text-color) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.btn-steam:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
}

.cxprofile {
    margin-bottom: 50px;
}

.cxprofile span {
    display: block;
    font-weight: 300;
}

.cxprofile .profilehead {
    position: relative;
    background-color: var(--cxbgmainsec);
    border-radius: var(--br-0);
    padding: 30px;
}

.cxprofile .cover {
    position: relative;
    z-index: 2;
}

.cxprofile .cover img {
    border-radius: var(--br-0);
    max-height: 270px;
    min-height: 170px;
    width: 100%;
    object-fit: cover;
}

.cxprofile .cover::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--br-0);
    border: 3px solid var(--main);
    background-color: rgba(7, 3, 3, 1);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.7;
}

.cxprofile .user-info {
    text-align: center;
}

.cxprofile .user-info .img-profile {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: var(--br-0);
    position: relative;
    z-index: 3;
    margin-bottom: 10px;
}

.cxprofile .user-info .name {
    font-size: 30px;
    color: var(--text-color);
}

.cxprofile .user-info .text {
    font-size: 18px;
    margin-bottom: -6px;
}

.cxprofile .list {
    display: flex;
    align-items: center;
}

.cxprofile .list .li {
    text-align: center;
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid var(--cxbcolor);
    font-size: 17px;
}

.cxprofile .list .li .value {
    color: var(--cxcolor-2);
    font-weight: 500;
}

.cxprofile .list .li:last-child {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
}

.cxprofilewalleti {
    color: var(--cxcolor-2);
}

.cxprofile .list .li .text {
    font-weight: 500 !important;
}

.cxprofile .btn-edit {
    box-shadow: none !important;
    font-size: 18px;
    font-weight: 300;
    padding-left: 40px !important;
    padding-right: 40px !important;
    position: absolute;
    right: 40px;
    z-index: 3;
    color: #fff !important;
}

.cxprofile .btn-edit img {
    width: 23px;
    height: 23px;
    margin-right: 15px;
    position: relative;
    top: -1px;
}

.cxprofilebox {}

/* Sidebar Profile Section */
.sidebar-profile-section {
    padding: 20px 0;
    border-bottom: 1px solid var(--cxbgmainfiv);
}

.sidebar-profile-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 10px;
}

.sidebar-profile-icon-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.sidebar-profile-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--br-1);
    background: var(--cxbgmainfiv);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--main);
    overflow: hidden;
}

.sidebar-profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--br-1);
}

.sidebar-profile-initials {
    font-size: 20px;
    font-weight: 600;
    color: var(--main);
    text-transform: uppercase;
}

.sidebar-profile-edit {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--main);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-6);
    font-size: 10px;
    cursor: pointer;
    z-index: 1;
}

.sidebar-profile-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sidebar-name-surname {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 2px;
}

.sidebar-username {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 400;
}

.sidebar-balance-wrapper {
    display: flex;
    align-items: center;
}

.sidebar-balance {
    display: flex;
    align-items: center;
    color: var(--main);
    font-size: 12px;
    font-weight: 500;
}

.sidebar-balance span {
    color: var(--text-color-6);
}

.sidebar-balance-load {
    color: var(--cxbgmain);
    font-size: 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    transition: opacity 0.2s;
    background: var(--main);
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--br-1);
    height: 30px;
}

.sidebar-balance-load:hover {
    background: var(--mainfou);
    color: var(--cxbgmain);
}

body.creator-active .sidebar-profile-info {
    filter: blur(2px);
}

body.creator-active .profileInfo {
    filter: blur(2px);
}

body.creator-active .cx-profile-drawer-user-info {
    filter: blur(2px);
}

body.creator-active .cx-profile-balance-amount {
    filter: blur(3px);
}

/* Sidebar Menu */
.sidebar-menu {
    padding: 20px 0;
    overflow: visible;
}

.sidebar-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

.sidebar-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 12px;
    transition: all 0.2s;
    border-radius: 8px;
}

.sidebar-menu-item:hover {
    color: var(--main);
    transform: translateX(3px);
}

.sidebar-menu-item.active {
    color: var(--main);
}

.sidebar-menu-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--cxbgmainfiv-thi);
    box-shadow: 0 0 0 4px var(--cxbgmainfiv);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-menu-icon i {
    color: var(--main);
    font-size: 14px;
}

.sidebar-menu-item.active .sidebar-menu-icon {
    background: var(--cxbgmainfiv-sec);
}

.sidebar-menu-text {
    flex: 1;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
}

.sidebar-menu-item.active .sidebar-menu-text {
    color: var(--main);
}

.sidebar-menu-chevron {
    color: var(--text-color);
    font-size: 12px;
    opacity: 0.6;
}

.sidebar-menu-item.active .sidebar-menu-chevron {
    color: var(--main);
}

.sidebar-menu-chevron-dropdown {
    color: var(--text-color);
    font-size: 12px;
    opacity: 0.6;
    margin-left: auto;
    transition: transform 0.3s ease;
}

.sidebar-menu-item-has-dropdown:hover .sidebar-menu-chevron-dropdown {
    transform: rotate(-90deg);
    color: var(--main);
}

.sidebar-icon-chevron i {
    font-size: 10px;
}

/* Sidebar Menu Dropdown */
.sidebar-menu-item-has-dropdown {
    position: relative;
    overflow: visible;
}

.col-lg-2 {
    overflow: visible;
}

.sidebar-menu-dropdown {
    position: absolute;
    left: calc(100% + 8px);
    top: 0;
    background: var(--cxbgmainthi);
    border-radius: 8px;
    padding: 8px 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    pointer-events: none;
}

.sidebar-menu-dropdown::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 0;
    width: 16px;
    height: 100%;
    z-index: 10001;
    background: transparent;
}

.sidebar-menu-item-has-dropdown::before {
    content: '';
    position: absolute;
    right: -16px;
    top: 0;
    width: 24px;
    height: 100%;
    z-index: 9999;
    background: transparent;
}

.sidebar-menu-item-has-dropdown:hover .sidebar-menu-dropdown,
.sidebar-menu-item-has-dropdown:hover::before,
.sidebar-menu-dropdown:hover,
.sidebar-menu-dropdown:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.sidebar-menu-item-has-dropdown:hover .sidebar-menu-dropdown,
.sidebar-menu-dropdown:hover {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

/* Dropdown açıkken parent'ın hover state'ini koru */
.sidebar-menu-item-has-dropdown:hover .sidebar-menu-item {
    color: var(--main);
    transform: translateX(3px);
}

/* Dropdown hover olduğunda parent'ın hover state'ini koru */
.sidebar-menu-dropdown:hover::before {
    pointer-events: auto;
}

.sidebar-menu-dropdown:hover~.sidebar-menu-item .sidebar-menu-chevron-dropdown,
.sidebar-menu-item-has-dropdown:hover .sidebar-menu-chevron-dropdown {
    transform: rotate(-90deg);
    color: var(--main);
}

.sidebar-menu-item-has-dropdown:hover .sidebar-menu-item {
    color: var(--main);
    transform: translateX(3px);
}

.sidebar-menu-dropdown-item {
    display: block;
    padding: 5px 20px;
    color: var(--text-color);
    font-size: 12px;
    text-decoration: none;
    transition: all 0.2s;
}

.sidebar-menu-dropdown-item:hover {
    transform: translateX(3px);
    color: var(--main);
}

.sidebar-menu-dropdown-item.active {
    transform: translateX(3px);
    color: var(--main);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .sidebar-profile-section {
        padding: 15px;
        flex-direction: column;
        align-items: center;
    }

    .sidebar-profile-info {
        align-items: start;
        text-align: start;
    }

    .sidebar-balance-wrapper {
        justify-content: center;
    }

    .sidebar-menu {
        padding: 0 15px 15px;
    }

    .sidebar-menu-item {
        padding: 10px 12px;
    }

    .profileHeader {
        min-width: 0;
        padding: 6px 8px;
    }

    .profileHeader .profileHeaderDetails .profileInfo .profileTitle {
        max-width: 80px;
    }

    .cxtopbar {
        display: none;
    }
}

.cxprofiletitle {
    background: var(--cxbmainfo);
    padding: 12px 18px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.cxprofiletitle .title {
    font-size: var(--fs-4);
    margin-bottom: 0;
    font-weight: 500 !important;
}

.cxPageHead {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.cxPageHeadTitle {
    color: var(--text-color);
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    padding: 0;
    padding-left: 15px;
    position: relative;
    display: inline-block;
}

.cxPageHeadTitle::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    background: var(--main);
    border-radius: 2px;
}

.cxPageHead::after {
    display: none;
}

.cxPageHeadTitle.has-icon {
    padding-left: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cxPageHeadTitle.has-icon::before {
    display: none;
}

.cxPageHeadTitleIcon {
    width: 32px;
    height: 32px;
    border-radius: var(--br-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* background: var(--cxopcolor-44); */
    color: var(--main);
    background: var(--cxbgmainfiv-thi);
    box-shadow: 0 0 0 4px var(--cxbgmainfiv);
    font-size: 14px;
}

/* Çekmece başlık satırı (ikon + metin; dashboard .cxPageHeadTitleIcon ile aynı kutu) */
.cxDrawerHeadTitle.has-icon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cxDrawerHeadTitleIcon {
    width: 32px;
    height: 32px;
    border-radius: var(--br-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--main);
    background: var(--cxbgmainfiv-thi);
    box-shadow: 0 0 0 4px var(--cxbgmainfiv);
    font-size: 14px;
    flex-shrink: 0;
}

.cxDrawerHeadTitle.has-icon strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.2;
}

/* Genel çekmece üst şeridi: başlık (sol) + aksiyonlar (sağ) */
.cxDrawerHead {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid var(--cxbcolor);
    background: linear-gradient(180deg, var(--cxbgmainthi) 0%, var(--cxbgmainsec) 100%);
}

.cxDrawerHeadActions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Çekmece başlığındaki küçük ikon / link düğmeleri */
.cxDrawerHeadIconBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 8px;
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainfou);
    color: var(--text-color);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.cxDrawerHeadIconBtn:hover {
    border-color: var(--cxbcolor-3);
    background: var(--cxbgmainthi);
    color: var(--text-color);
}

.cxDrawerHeadIconBtn i {
    font-size: 13px;
}

.customize-area {
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    color: var(--text-color);
    padding: 8px 16px;
    border-radius: var(--br-1-3);
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.customize-area:hover {
    background: var(--cxbgmainfiv-thi);
    color: var(--text-color);
}

.customize-area i {
    font-size: 12px;
}

.customize-area.important-info-button {
    background-color: var(--cxopcolor-18);
    color: var(--cxcolor-1);
    border: 2px solid var(--cxopcolor-4);
}

.customize-area.important-info-button:hover {
    background-color: var(--cxopcolor-4);
    color: var(--cxcolor-1);
    border: 2px solid var(--cxopcolor-4);
}

.customize-area.streamerApply {
    background-color: var(--mainsix);
    color: var(--text-color-6);
}

.customize-area.streamerApply:hover {
    background-color: var(--mainsix-sec);
    color: var(--text-color-6);
}

@media (max-width: 768px) {
    .cxPageHead {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .customize-area {
        width: 100%;
        justify-content: center;
    }
}

.user-info-form {
    margin-top: 20px;
}

.user-info-form .formGroup {
    margin-bottom: 20px;
}

.user-info-form .row {
    margin-left: -10px;
    margin-right: -10px;
}

.user-info-form .row>[class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

.user-info-form .form-label {
    display: block;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.cxprofiletitle .nav {
    justify-content: space-between;
}

.cxprofiletitle .nav .nav-link {
    background-color: transparent !important;
    color: var(--text-color);
    border-radius: 0 !important;
    font-size: var(--fs-4);
    padding: 6px var(--fs-1) !important;
    font-weight: 300;
}

.cxprofiletitle .nav .nav-link.active {
    border-bottom: 3px solid var(--text-color);
}

.table-profile tr:first-child td {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.table-profile td {
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
    font-weight: 300;
    font-size: 17px;
    padding: 9px 18px !important;
}

.table-profile td:first-child {
    color: #FF31C1;
}

.table-profile td:last-child {
    text-align: right;
    color: rgba(255, 255, 255, 0.7);
}

.table-gradient.table {
    background: var(--cxbgmainsec) !important;
    border-radius: 8px;
}

.table-gradient thead th {
    background-color: transparent !important;
    border-bottom: 0 !important;
}

.table-gradient tbody {
    border-top: 0 !important;
    background: var(--cxbgmainthi);
}

.table-gradient thead {
    background: var(--cxbmainfo);
}

.table-gradient thead th:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.table-gradient thead th:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.table th,
.table td {
    font-weight: 300;
}

.table th {
    font-size: var(--fs-1);
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

.table-gradient tbody tr:last-child td {
    border-bottom: 0;
}

.table-gradient tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

.table-gradient tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

.table-gradient td {
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* Payment: right panel */
.payCard {
    background-color: var(--cxbgmainsec);
    border-radius: 16px;
    padding: 18px;
    border: 2px solid var(--cxbcolor);
}

.payCard-head {
    margin-bottom: 15px;
    border-bottom: 1px solid var(--cxbcolor);
    padding-bottom: 15px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.payCard-headLeft {
    min-width: 0;
}

.payCard-headRight {
    flex: 0 0 auto;
}

.payCard-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.payCard-sub {
    margin-top: 6px;
    font-size: var(--fs-0);
    opacity: 0.8;
}

.payCommissionBadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 2px solid var(--cxbcolor);
    background-color: rgba(255, 255, 255, 0.02);
    white-space: nowrap;
}

.payCommissionBadge-label {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.8;
}

.payCommissionBadge-value {
    font-size: var(--fs-0);
    font-weight: 800;
}

.payHero {
    margin: 14px 0 16px 0;
    padding: 8px 0;
    border-radius: 16px;
    background: transparent;
    border: 0;
    text-align: center;
}

.payHero-label {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 10px;
}

.payHero-value {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    justify-content: center;
}

.payHero-input {
    width: 220px;
    max-width: 100%;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--cxbcolor);
    outline: none;
    color: inherit;
}

.payHero-input::placeholder {
    opacity: 0.55;
}

.payHero-input:focus-visible {
    outline: none;
    border: none;
    border-bottom: 2px solid var(--cxbcolor-3);
}

.payHero-currency {
    font-size: 18px;
    font-weight: 700;
    opacity: 0.8;
}

.payCard-body {
    margin-top: 10px;
}

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

.payGrid--compact {
    margin-top: 12px;
}

.payField {}

.payField--full {
    grid-column: 1 / -1;
}

.payLabel {
    display: block;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.85;
    margin-bottom: 8px;
}

.payInput.form-control {
    border-radius: 12px;
    padding: 12px 12px;
}

.payReadonlyValue {
    border-radius: 12px;
    padding: 12px 12px;
    border: 2px solid var(--cxbcolor);
    background-color: rgba(255, 255, 255, 0.02);
    font-weight: 800;
    font-size: var(--fs-1);
}

.payTotalValue {
    font-weight: 800;
}

.paySubmitBtn {
    width: 100%;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: var(--br-1-5);
    font-weight: 700;
    background-color: var(--main);
    color: var(--text-color-6);
    border: none;
    cursor: pointer;
    font-size: var(--fs-1);
    transition: all 0.15s ease;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
}

.paySubmitBtn:hover {
    background-color: var(--mainfou);
    color: var(--text-color-6);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--main) 32%, transparent);
}

.payHelpCard {
    margin-top: 12px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 2px solid var(--cxbcolor);
    background-color: rgba(255, 255, 255, 0.02);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.payHelpCard:hover {
    transform: translateY(-1px);
    border-color: var(--cxbcolor-3);
    color: var(--text-color-7);
}

.payHelpCard-logo {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
}

.payHelpCard-logo img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

.payHelpCard-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.payHelpCard-title {
    font-size: var(--fs-1);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payHelpCard-link {
    font-size: var(--fs-0);
    opacity: 0.85;
    line-height: 1.25;
}

.payHelpCard-linkAccent {
    text-decoration: underline;
    font-weight: 600;
}

.payCouponCard {
    margin-top: 12px;
}

@media (max-width: 991.98px) {
    .payGrid {
        grid-template-columns: 1fr;
    }
}

.cxcart-steps {
    margin: 20px 0 30px 0;
}

.cxcart-steps .step {
    position: relative;
    text-align: center;
}

.cxcart-steps .step .bar {
    height: 2px;
    width: 100%;
    background-color: var(--cxbgmainsec);
    position: absolute;
    top: 30px;
}

.cxcart-steps .step .circle {
    background-color: var(--cxbgmainsec);
    height: 65px;
    width: 65px;
    border-radius: 100%;
    text-align: center;
    line-height: 65px;
    font-size: 24px;
    margin: auto;
    margin-bottom: 10px;
    outline: 5px solid var(--cxbgmain);
    position: relative;
    z-index: 2;
    user-select: none;
    font-weight: 300;
}

.cxcart-steps .step .text {
    font-size: 24px;
    color: #43415A;
    display: block;
}

.cxcart-steps .step.active .bar,
.cxcart-steps .step.active .circle {
    background-color: #DE5853;
}

.cxcart-steps .step.active .text {
    color: #DE5853;
    text-shadow: 0 0 15px rgba(222, 88, 83, 0.47);
}

.cxcart-list {
    background-color: var(--cxbgmainsec);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.36);
    padding: 40px 20px;
    border-radius: var(--br-0);
}

.cxcart-list .head {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #707070;
    padding-bottom: 10px;
    padding-right: 20px;
}

.cxcart-list .head .td {
    font-size: 15px;
    text-align: center;
}

.cxcart-list .head .td:first-child {
    width: 10%
}

.cxcart-list .head .td:nth-child(2) {
    width: 40%
}

.cxcart-list .head .td:nth-child(3) {
    width: 25%
}

.cxcart-list .head .td:nth-child(4) {
    width: 25%
}

.cxcart-item {
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 0;
    border-bottom: 1px solid #707070;
}

.cxcart-item .td:first-child {
    width: 10%
}

.cxcart-item .td:nth-child(2) {
    width: 40%
}

.cxcart-item .td:nth-child(3) {
    width: 25%
}

.cxcart-item .td:nth-child(4) {
    width: 25%
}

.cxcart-item .delete {
    color: rgba(255, 255, 255, 0.52);
    transition: 0.2s;
    background: transparent;
    border: none;
}

.cxcart-item .delete:hover {
    color: #f7353585;
}

.cxcart-item .img-product {
    max-width: 100px;
    margin-right: 20px;
}

.cxcart-item .info .productname {
    margin-bottom: 0;
}

.cxcart-item .info .category {
    color: rgba(255, 255, 255, 0.2);
    font-size: var(--fs-0);
    display: block;
}

.cxcart-item .prices span {
    display: block;
}

.cxcart-item .oldprice {
    font-size: 11px;
    color: #C93E3E;
    text-decoration: line-through;
    font-weight: 700;
    font-style: italic;
}

.cxcart-item .price {
    font-size: 18px;
}


.cxcart-total {
    background-color: var(--cxbgmainsec);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    padding: 20px;
    border-radius: var(--br-0);
}

.cxcart-total .title {
    font-size: 22px;
    border-bottom: 1px solid #707070;
    padding-bottom: 10px;
    margin-bottom: 15px;
    padding-left: 8px;
}

.cxcart-total .table td {
    color: var(--text-color);
    border: 0 !important;
    font-size: var(--fs-1);
    font-weight: 400;
}

.cxcart-total .table td:last-child {
    text-align: right;
}

.cxcart-total .table tbody tr:last-child td {
    padding-bottom: 20px;
}

.cxcart-total .table tfoot tr:first-child td {
    padding-top: 20px;
}

.cxcart-total .table tfoot {
    border-top: 1px solid #707070;
}

.cxcart-total .btn i {
    font-size: 22px;
    position: absolute;
}

/* Sepet ana panel arka planı (boş + dolu için ortak) */
.cart-panel {
    background-color: var(--cxbgmainsec);
    border-radius: 16px;
    padding: 10px 30px;
}

@media (min-width: 992px) {
    .cart-row {
        flex-wrap: nowrap;
        align-items: stretch;
    }
}

/* Boş sepet modern tasarımı */
.cart-empty-modern {
    min-height: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cart-empty-icon {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    background-color: var(--cxbgmainfiv-thi);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.cart-empty-icon i {
    font-size: 42px;
    color: #ffc83a;
}

.cart-empty-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

.cart-empty-subtitle {
    font-size: 14px;
    color: var(--text-color-h);
    max-width: 420px;
    margin: 0 auto 28px auto;
}

.cart-empty-button {
    background-color: #ffc83a;
    color: var(--text-color-6);
    border-radius: var(--br-1);
    padding: 12px 32px;
    font-weight: 600;
    text-transform: none;
    box-shadow: 0 2px 10px color-mix(in srgb, #ffc83a 25%, transparent);
}

.cart-empty-button .title {
    font-size: 15px;
}

.cart-empty-button:hover {
    background-color: #ffb800;
    color: var(--text-color-6);
    box-shadow: 0 4px 16px color-mix(in srgb, #ffb800 32%, transparent);
}

.cart-summary-modern {
    background-color: var(--cxbgmainsec);
    border-radius: 16px;
    padding: 20px 25px 25px 25px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cart-summary-title {
    font-size: 15px;
    font-weight: 600;
}

.cart-summary-clear {
    font-size: 12px;
    color: var(--cxcolor-1);
    cursor: default;
}

.cart-summary-clear:hover {
    color: hsl(357deg 80.04% 53.4%);
}

.cart-summary-amount-value {
    font-size: 28px;
    font-weight: 700;
}

.cart-summary-button {
    background-color: #ffc83a;
    color: var(--text-color-6);
    border-radius: var(--br-1);
    padding: 10px 18px;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
    box-shadow: 0 2px 10px color-mix(in srgb, #ffc83a 25%, transparent);
}

.cart-summary-button .loginRequired {
    opacity: 0.6;
}

.cart-summary-button:hover {
    background-color: #ffc83a;
    color: var(--text-color-6);
    box-shadow: 0 4px 16px color-mix(in srgb, #ffc83a 32%, transparent);
}

.cart-summary-breakdown {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
}

.cart-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-summary-row-code {
    border-top: 1px solid var(--cxbcolor);
    padding-top: 12px;
}

.cart-summary-row-code i,
.cart-summary-code-icon {
    font-size: 12px;
}

.cart-summary-row-code {
    cursor: pointer;
}

.cart-summary-row-code .cart-summary-code-icon {
    transition: transform 0.2s ease;
}

.cart-summary-row-code.open .cart-summary-code-icon {
    transform: rotate(180deg);
}

.cart-discount-collapse {
    display: none;
    margin-top: 10px;
}

.btn-discount-apply {
    background-color: var(--cxbgmainfiv);
    color: var(--text-color);
    border-radius: var(--br-1);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-discount-apply:hover {
    background-color: var(--cxbgmainfiv-sec);
    color: var(--text-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.input-discount-code {
    background-color: var(--cxbgmainfou);
    border-radius: var(--br-1);
    border: 1px solid var(--cxbcolor);
    color: var(--text-color);
}

.input-discount-code::placeholder {
    color: var(--text-color-h);
}

.cart-summary-breakdown-main {
    margin-top: 14px;
}

.cart-summary-row-total {
    border-top: 1px solid var(--cxbcolor);
    padding-top: 12px;
    margin-top: 4px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .cart-empty-modern {
        margin-bottom: 16px;
        padding: 32px 20px;
        min-height: 260px;
    }

    .cart-empty-title {
        font-size: 20px;
    }

    .cart-summary-modern {
        margin-top: 8px;
    }
}

.text-green {
    color: var(--cxcolor-7);
}

.accordion-faq .accordion-item {
    background-color: var(--cxbgmain);
    margin: 10px 0;
    border-radius: 20px !important;
}

.accordion-faq .accordion-button {
    background: var(--gradient1);
    color: var(--text-color) !important;
    border-radius: 20px !important;
}

.accordion-faq .accordion-button:focus {
    box-shadow: none !important;
}

.accordion-faq .accordion-button::after {
    filter: invert(1) sepia(1) saturate(200) hue-rotate(267deg) !important;
}

.accordion-faq .accordion-body {
    font-size: 16px;
    font-weight: 300;
    color: #8B87AF;
}

.cxforgot-pw {
    padding: 30px 40px;
    background-color: var(--cxbgmainsec);
    border-radius: 25px;
}

.cxforgot-pw .btn-color {
    font-size: 22px;
    padding: 16px 20px !important;
    font-weight: 300;
}

.cxforgot-pw .formControl {
    height: 65px;
    border-radius: var(--br-0);
}

.btn-color {
    background: var(--main);
    color: var(--text-color) !important;
    padding: 12px 20px !important;
    border: 0 !important;
    font-weight: 600 !important;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
}

.btn-colorsec {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main);
    padding: 12px 20px;
    border: 0;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
    outline: none;
    font-weight: 600;
    color: var(--text-color-6);
    transition: ease .15s;
    border-radius: var(--br-1);
}

.btn-colorsec:hover {
    background: var(--mainfou);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--main) 32%, transparent);
}

.cxproduct {
    background-color: var(--cxbgmainsec);
    text-align: center;
    border-radius: 29px;
    margin: 30px 0;
    position: relative;
}

.cxproduct .img-product {
    height: 126px;
    width: 95%;
    border-radius: 23px;
    position: relative;
    top: -20px;
    object-fit: cover;
}

.cxproduct .product-content {
    padding-bottom: 15px;
    border-bottom: 1px solid #707070;
}

.cxproduct .product-content .name {
    font-size: var(--fs-1);
    margin-bottom: 3px;
}

.cxproduct .product-content .subtitle {
    font-size: var(--fs-1);
    color: #676677;
    margin-bottom: 3px;
}

.cxproduct .product-content .price {
    background-color: var(--cxbgmain);
    font-size: 15px;
    font-weight: 300;
    display: inline-block;
    padding: 4px var(--fs-1);
    border-radius: 7px;
}

.cxproduct .buttons {
    padding: 20px;
}

.btn-border {
    height: 48px;
    color: var(--text-color) !important;
    position: relative;
    padding: 3px !important;
    background-color: var(--cxbgmain) !important;
    box-shadow: none !important;
}

.btn-border .material-icons {
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    border-radius: 100%;
    line-height: 40px;
    font-size: 25px;
}

.btn-border .content {
    display: flex;
    align-items: center;
}

.btn-border .title {
    margin: 0 10px;
    font-size: 13px;
    color: var(--text-color) !important;
    text-shadow: none !important;
}

.btn-border.green .material-icons {
    box-shadow: 0 3px 6px rgba(48, 254, 158, 0.34);
}

.btn-border.green:hover {
    background-color: var(--cxcolor-7) !important;
}

.btn-border.buyhomebtn .material-icons {
    box-shadow: 0 3px 6px var(--cxopcolor-3);
}

.btn-border.buyhomebtn:hover {
    background-color: var(--main) !important;
}

.categoriesTabs {
    display: flex;
    gap: 12px;
    margin: 24px 0;
    align-items: center;
    border-radius: var(--br-1-5);
    background-color: var(--cxbgmainthi);
    padding: 10px;
}

.categoriesTabs-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 12px;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 600;
    flex: 1;
}

.categoriesTabs-item:hover {
    background-color: var(--cxbgmainfiv);
    color: var(--text-color);
}

.categoriesTabs-item-active {
    background-color: var(--main);
    color: var(--cxbgmain);
}

.categoriesTabs-item-active:hover {
    background-color: var(--main);
    color: var(--cxbgmain);
}

.categoriesTabs-flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.categoriesTabs-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

@media (max-width: 768px) {
    .categoriesTabs {
        gap: 8px;
        margin: 20px 0 24px 0;
    }

    .categoriesTabs-item {
        padding: 8px 14px;
        gap: 8px;
        font-size: 13px;
    }

    .categoriesTabs-flag {
        font-size: 16px;
    }

    .categoriesTabs-text {
        font-size: 13px;
    }
}

/* Oyun sayfası: üst segment şeridi + arama (alt .cxgame-tabs / .cxgame-tab-content’ten ayrı) */
.cxgame-segments-bar {
    margin-bottom: 1rem;
}

.cxgame-segments-tabs-col {
    min-width: 0;
}

.cxgame-segments-bar .categoriesTabs {
    margin: 0;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.cxgame-segments-bar .categoriesTabs .categoriesTabs-item {
    flex: 1 1 auto;
    min-width: 4.5rem;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cxgame-segments-bar .categoriesTabs .categoriesTabs-text {
    white-space: nowrap;
}

.categoriesTabs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    background: var(--mainsec, #6366f1);
    color: #fff;
}

.categoriesTabs-item-active .categoriesTabs-badge {
    background: rgba(255, 255, 255, 0.22);
    color: inherit;
}

.cx-fav-card {
    position: relative;
}

.listingCardsGrid>.cx-fav-listing-slot {
    min-width: 0;
    position: relative;
}

.listingCardsGrid-empty {
    grid-column: 1 / -1;
}

.cxgame-segment-products-slot .listingCardsGrid {
    margin-top: 0;
}

.cx-fav-card-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--br-1-3);
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.cx-fav-card-remove:hover {
    background: rgba(220, 38, 38, 0.92);
    transform: scale(1.05);
}

.cx-favorites-page .cx-favorites-search-empty {
    margin-top: 1rem;
}

/* Segment ürün alanı: alt sekme panelleriyle aynı kutu görünümünü paylaşmasın */
.cxgame-segment-products-slot {
    margin-bottom: 12px;
}

.cxgame-segment-products-slot .cxgame-tab-pane {
    background: transparent;
    margin-bottom: 0;
    border-radius: var(--br-1-5, 12px);
    box-shadow: none;
    border: none;
}

.cxproducts-table {
    margin-top: 10px;
    /* hero ile birleÅŸmesin */
    margin-bottom: 20px;
}

/*
.cxproducts-header {
    display: flex;
    align-items: center;
    background-color: var(--cxbgmainthi);
    margin-bottom: 15px;
    border-radius: var(--br-1-5);
}

.cxproducts-header-field {
    text-align: center;
    padding: 12px 2px;
}

.cxproducts-header-field:first-child {
    width: 35%;
    padding: 0;
}

.cxproducts-header-field:nth-child(2) {
    width: 12%;
}

.cxproducts-header-field:nth-child(3) {
    width: 12%;
}

.cxproducts-header-field:nth-child(4) {
    width: 12%;
}

.cxproducts-header-field:nth-child(5) {
    width: 12%;
}

.cxproducts-header-field:nth-child(6) {
    width: 17%;
}*/
.cxproducts-tab-content {
    padding: 20px;
}

.cxproduct-item {
    display: flex;
    align-items: center;
    background-color: var(--cxbgmainthi);
    margin-bottom: 15px;
    border-radius: var(--br-1-5);
    border: 2px solid var(--cxbcolor);
    padding: 5px 8px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    transition: all .15s;
}

.cxproduct-item:hover {
    border-color: var(--cxbcolor-3);
}

.cxproduct-field {
    text-align: center;
    padding: 12px 2px;
}

.cxproduct-field:first-child {
    width: 35%;
    padding: 0;
}

.cxproduct-field:nth-child(2) {
    width: 12%;
}

.cxproduct-field:nth-child(3) {
    width: 12%;
}

.cxproduct-field:nth-child(4) {
    width: 12%;
}

.cxproduct-field:nth-child(5) {
    width: 12%;
}

.cxproduct-field:nth-child(6) {
    width: 17%;
}

/* Game products table: iki blok (sol sabit / saÄŸ sabit) */
.cxproduct-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-right: 12px;
    flex: 1;
    min-width: 0;
}

.cxproduct-right .cxproduct-field {
    width: auto;
    padding: 0;
}

.cxproduct-right .discountArea,
.cxproduct-right .bonusArea,
.cxproduct-right .priceArea {
    min-width: 108px;
}

.cxproduct-right .cxproduct-buttons {
    width: auto;
    flex: 0 0 auto;
    margin-left: 8px;
}

/* Buton grubu: detail.blade.php ile aynı kompakt ölçü */
.cxproduct-right .cxgp-buy-group {
    width: 210px;
    height: 45px;
}

.cxproduct-field-main {
    display: flex;
    align-items: center;
}

.cxproduct-item .img {
    max-width: 100px;
    min-width: 100px;
    display: flex;
    align-items: center;
    border-radius: var(--br-1-5);
    justify-content: center;
    padding: 10px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.50));
}

.cxproduct-item .productname {
    font-size: 15px;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 0;
}

.cxproduct-item .info {
    text-align: left;
    padding-left: 5px;
}

.cxproduct-left-discount .discountArea {
    justify-content: flex-start;
}

.cxproduct-left-discount .discountText,
.cxproduct-left-discount .discountArea i {
    width: 34px;
    height: 24px;
    font-size: 11px;
}

.cxproduct-left-discount .discountText {
    width: auto;
    max-width: 100px;
    padding: 0 10px;
    white-space: nowrap;
}

.cxproduct-item .info small {
    font-size: 11px;
}

.cxproduct-item .bonus {
    color: var(--cxcolor-6);
}

.cxproduct-item .price span {
    font-size: var(--fs-1);
    color: var(--cxcolor-1);
    text-decoration: line-through;
}

.cxproduct-field:last-child {
    min-width: 0;
}

.cxproduct-buttons {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}


.cxproduct-buttons .buy-now,
.cxproduct-buttons .buy-now-extra {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    padding: 0 8px;
}

.btnAddCart {
    flex-shrink: 0;
    max-width: 48px;
    min-width: 48px;
    width: 48px;
}

/* game-products-table.blade.php: quantity yokken boşluk kalmasın (buton en sağda) */
/* quantity yok: eski tablo kolon düzeni (split olmayan satırlar) */
.cxproduct-item--no-qty:not(.cxproduct-item--split) .cxproduct-field:nth-child(2),
.cxproduct-item--no-qty:not(.cxproduct-item--split) .cxproduct-field:nth-child(3),
.cxproduct-item--no-qty:not(.cxproduct-item--split) .cxproduct-field:nth-child(4) {
    width: 16%;
}

.cxproduct-item--no-qty:not(.cxproduct-item--split) .cxproduct-field:nth-child(5) {
    width: 17%;
}

/* split card: quantity yokken sağ blokta boşluk kalmasın */
.cxproduct-item--split.cxproduct-item--no-qty .cxproduct-right {
    justify-content: flex-end;
}

.cxproduct-item--split.cxproduct-item--no-qty .cxproduct-right .cxproduct-field {
    flex: 0 0 auto;
}

@media (max-width: 1400px) {
    .cxproduct-field:last-child {
        padding: 0 8px;
    }

    .cxproduct-buttons {
        gap: 5px;
    }

    .cxproduct-buttons .buy-now,
    .cxproduct-buttons .buy-now-extra {
        font-size: 12px;
        padding: 0 6px;
    }

}

.cxproduct-item .img a img {
    border-radius: var(--br-1-5);
}

.btn-red {
    background-color: var(--cxcolor-1) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cxcolor-1) 25%, transparent);
}

.btn-red:hover {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--cxcolor-1) 32%, transparent);
}

.btn-green {
    background-color: var(--cxcolor-7) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cxcolor-7) 25%, transparent);
}

.btn-green:hover {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--cxcolor-7) 32%, transparent);
}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* Adet stepper (ilan, oyun listesi, sepet) — kompakt, br-1-5; hover alanı çerçeveden içte */
.qty-stepper.number-input {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.125rem;
    min-width: 120px;
    max-width: 100%;
    height: 45px;
    min-height: 45px;
    padding: 5px 8px;
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.qty-stepper.number-input,
.qty-stepper.number-input * {
    box-sizing: border-box;
}

.qty-stepper.number-input button:before,
.qty-stepper.number-input button:after {
    content: none !important;
    display: none !important;
}

.qty-stepper__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    min-width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: calc(var(--br-1-5) - 6px);
    background-color: transparent;
    color: #fff;
    cursor: pointer;
    position: relative;
    align-self: center;
    transition: background-color 0.18s ease, color 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.qty-stepper__btn:hover {
    background-color: #1e232b;
}

.qty-stepper__btn:active {
    background-color: #252b35;
}

.qty-stepper__btn:focus {
    outline: none;
}

.qty-stepper__btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.45);
}

.qty-stepper__btn:disabled,
.qty-stepper__btn[aria-disabled="true"] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.qty-stepper__glyph {
    display: block;
    font-size: 0.9375rem;
    line-height: 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    user-select: none;
}

.qty-stepper__field {
    flex: 1 1 auto;
    min-width: 1.25rem;
    width: 1.75rem;
    max-width: 3.25rem;
    height: 1.75rem;
    align-self: center;
    margin: 0;
    padding: 0 0.125rem;
    border: none;
    border-radius: calc(var(--br-1-5) - 8px);
    background: transparent !important;
    color: #fff !important;
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.qty-stepper__field::-webkit-outer-spin-button,
.qty-stepper__field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-stepper__field:hover,
.qty-stepper__field:focus,
.qty-stepper__field:active {
    border: none;
    outline: none;
    box-shadow: none;
}

.qty-stepper__field:focus-visible {
    border: none;
    outline: none;
}

.quanityBg.qty-stepper.number-input {
    width: auto;
}

/* Sepet: ilan satırı — adet stepper görünür ama değiştirilemez */
.qty-stepper.number-input.qty-stepper--locked {
    cursor: default;
}

.qty-stepper.number-input.qty-stepper--locked .qty-stepper__field:disabled {
    opacity: 0.95;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .qty-stepper__btn {
        transition: none;
    }

    .qty-stepper__btn:active {
        transform: none;
    }
}

.cxproducts-comment .head-area .title {
    font-size: 23px;
    color: var(--text-color);
    margin: 0 !important;
}

.cxgame-tabs {
    display: flex;
    gap: 0;
    margin: 30px 0 0 0;
    background-color: var(--cxbgmainthi);
    border-top-right-radius: var(--br-1-5);
    border-top-left-radius: var(--br-1-5);
    overflow-x: auto;
    border-bottom: 1px solid var(--cxbcolor-2);
}

.cxgame-tabs::-webkit-scrollbar {
    height: 4px;
}

.cxgame-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.cxgame-tabs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.cxgame-tab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 20px;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    flex: 1;
    justify-content: center;
    min-width: fit-content;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.cxgame-tab-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--cxbcolor);
}

.cxgame-tab-item i {
    font-size: 16px;
    opacity: 0.8;
}

.cxgame-tab-item:hover {
    background-color: var(--cxbgmainfiv);
    color: var(--text-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.cxgame-tab-item:hover i {
    opacity: 1;
}

.cxgame-tab-active {
    background-color: var(--main);
    color: var(--cxbgmain);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.cxgame-tab-active i {
    opacity: 1;
}

.cxgame-tab-active:hover {
    background-color: var(--main);
    color: var(--cxbgmain);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.cxgame-tab-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

@media (max-width: 992px) {
    .cxgame-tabs {
        gap: 4px;
        padding: 6px;
    }

    .cxgame-tab-item {
        padding: 10px 14px;
        font-size: 13px;
        flex: 0 1 auto;
    }

    .cxgame-tab-item i {
        font-size: 14px;
    }

    .cxgame-tab-text {
        font-size: 13px;
    }
}

@media (max-width: 1200px) {
    .cxgame-tabs {
        flex-direction: column;
        gap: 4px;
    }

    .cxgame-tab-item {
        width: 100%;
        justify-content: flex-start;
        padding: 12px 16px;
    }

    .cxgame-tab-item:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .cxgame-tab-item {
        padding: 10px 16px;
    }

    .cxgame-tab-item i {
        font-size: 18px;
    }

    .cxgame-reviews {
        padding: 20px;
    }

    .cxgame-reviews-content {
        flex-direction: column;
        gap: 24px;
    }

    .cxgame-reviews-card {
        width: 160px;
        height: 160px;
        margin: 0 auto;
    }

    .cxgame-reviews-middle {
        width: 100%;
    }

    .cxgame-reviews-ratingStars {
        justify-content: center;
    }

    .cxgame-reviews-ratingNumber {
        font-size: 40px;
    }
}

.cxgame-tab-content {
    margin-top: 0;
}

.cxgame-tab-pane {
    display: none;
}

.cxgame-tab-pane.active {
    display: block;
}

/* Sadece açıklama / değerlendirme vb. alt sekmeler; segment ürün panelleri hariç */
.cxgame-tab-content .cxgame-tab-pane {
    background-color: var(--cxbgmainsec);
    border-radius: var(--br-1-5);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom: 20px;
}

.cxgame-reviews {
    padding: 20px;
}

.cxgame-reviews-header {
    margin-bottom: 14px;
}

.cxgame-reviews-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

.cxgame-reviews-content {
    display: flex;
    gap: 24px;
    margin-bottom: 30px;
    align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cxbcolor);
}

.cxgame-reviews-card {
    flex: 0 0 auto;
    width: 140px;
    height: 140px;
    border-radius: var(--br-2);
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    border: 2px solid var(--cxbcolor);
    background: rgba(0, 0, 0, 0.25);
}

.cxgame-reviews-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 28%, rgba(0, 0, 0, 0) 55%);
    z-index: 2;
    pointer-events: none;
}

.cxgame-reviews-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0) 60%);
    z-index: 2;
    pointer-events: none;
}

.cxgame-reviews-middle {
    flex: 1;
    display: flex;
    gap: 24px;
    align-items: center;
}

.cxgame-reviews-cardbg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.04);
    position: relative;
    z-index: 1;
}

.loadMoreReviewsBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainfou);
    color: var(--text-color);
    max-width: 180px;
    width: 100%;
    height: 45px;
    transition: all .15s;
    border-radius: var(--br-1);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.loadMoreReviewsBtn:hover {
    color: var(--text-color);
    background: var(--cxbgmainthi);
    border-color: var(--cxbcolor-3);
}

.cxgame-reviews-logoWrap {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.05) 100%);
    z-index: 3;
}

.cxgame-reviews-logo {
    max-width: 70px;
    max-height: 70px;
    width: 75%;
    height: 75%;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55));
}

.cxgame-reviews-rating {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.cxgame-reviews-ratingNumber {
    font-size: 45px;
    font-weight: 400;
    color: var(--text-color);
    line-height: 1;
}

.cxgame-reviews-ratingStars {
    display: flex;
    gap: 3px;
}

.cxgame-reviews-ratingStars i {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.22);
}

.cxgame-reviews-ratingStars i.is-filled {
    color: var(--cxcolor-star);
}

.cx-comment-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 6px;
}

.cx-comment-rating-display {
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    min-height: 1em;
}

.cx-comment-rating-stars {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.cx-comment-rating-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--br-1, 8px);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.28);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.cx-comment-rating-star:hover,
.cx-comment-rating-star:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 193, 7, 0.65);
    outline: none;
}

.cx-comment-rating-star.is-active {
    color: var(--cxcolor-star);
    background: rgba(255, 193, 7, 0.12);
}

.cx-comment-rating-star i {
    font-size: 14px;
    line-height: 1;
}

.cxgame-reviews-breakdown-wrapper {
    flex: 1;
}

.cxgame-reviews-breakdown {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cxgame-reviews-breakdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.cxgame-reviews-breakdown-star {
    color: var(--text-color);
    min-width: 28px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cxgame-reviews-breakdown-star i {
    font-size: 14px;
    color: var(--cxcolor-star);
}

.cxgame-reviews-breakdown-star-text {
    font-size: 12px;
    color: var(--text-color);
}

.cxgame-reviews-breakdown-bar {
    flex: 1;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.cxgame-reviews-breakdown-barFill {
    height: 100%;
    background-color: var(--cxcolor-star);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.cxgame-reviews-breakdown-count {
    color: var(--text-color);
    min-width: 25px;
    font-size: 12px;
}

.cxgame-reviews-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cxgame-info {
    border-radius: var(--br-1);
    padding: 15px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.cxgame-info.cxgame-info-danger {
    background-color: var(--cxopcolor-18);
    color: var(--cxcolor-18);
}

.cxgame-info.cxgame-info-warning {
    background-color: var(--cxopcolor-19);
    color: var(--cxcolor-19);
}

.cxgame-info.cxgame-info-success {
    background-color: var(--cxopcolor-20);
    color: var(--cxcolor-20);
}

.cxgame-info.cxgame-info-info {
    background-color: var(--cxopcolor-21);
    color: var(--cxcolor-21);
}

.cxgame-info i {
    font-size: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}

.cxgame-infoText {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cxgame-infoText-title {
    font-size: 12px;
    font-weight: 600;
}

.cxgame-infoText-text {
    font-size: 12px;
}

.cxgame-reviews-total {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.cxgame-reviews-list {
    margin-top: 30px;
}

.cxgame-reviews-write {
    margin-bottom: 24px;
}

/* Oyun sayfası: Yorum Yap + bilgi kutusu yan yana, dar sütunda kırılma olmasın */
.cxgame-reviews-write--row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.cxgame-reviews-write--row>.cxalertMain {
    flex: 1 1 auto;
    min-width: 0;
}

.cxgame-reviews-comment {
    display: flex;
    gap: 16px;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    margin-bottom: 20px;
}

.cxgame-reviews-comment-avatar {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: var(--br-1-5);
    overflow: hidden;
    background-color: var(--cxbgmainfiv);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 1;
}

.cxgame-reviews-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cxgame-reviews-comment-initials {
    color: var(--text-color);
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cxgame-reviews-comment-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cxgame-reviews-comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cxgame-reviews-comment-date {
    color: var(--text-color);
    font-size: 12px;
    flex: 0 0 auto;
    margin-left: auto;
}

.cxgame-reviews-comment-name {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
    flex: 0 0 auto;
    border-right: 1px solid var(--cxbcolor);
    padding-right: 10px;
}

.cxgame-reviews-comment-stars {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
}

.cxgame-reviews-comment-stars i {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.22);
}

.cxgame-reviews-comment-stars i.is-filled {
    color: var(--cxcolor-star);
}

.cxgame-reviews-comment-text {
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.5;
    padding: 15px;
    background-color: var(--cxbgmainfiv);
    border-radius: var(--br-1-5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin-top: 4px;
}

.cxproducts-comment {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    margin-bottom: 0;
}

.comment .text {
    padding: 20px;
    font-size: var(--fs-1);
}

.commentuname {}

.commentuarea {
    padding: 10px 20px;
    background-color: var(--cx-boxcolor-1);
    border-top-right-radius: var(--br-0);
    border-top-left-radius: var(--br-0);
}

.cxproducts-comment .comment {
    background-color: var(--cxbgmainthi);
    border-radius: var(--br-0);
    margin: 15px 0;
}

.cxproducts-comment .comment .stars i {
    font-size: var(--fs-1);
    color: var(--cxcolor-3);
}

.cxproducts-system {
    padding: 40px;
    background-color: var(--cxbgmainsec);
    border-radius: 26px;
    color: var(--text-color);
}

.cxproducts-system .title {
    font-size: 32px;
    margin-bottom: 30px;
}

.cxproducts-system p {
    font-size: 18px;
    margin-bottom: 7px;
}

.cxcategory-images {
    margin-bottom: 20px;
}

.cxcategory-images img {
    max-height: 400px;
    display: block;
    margin: auto;
}

.cxcategory-info {
    background-color: var(--cxbgmainsec);
    border-radius: var(--br-0);
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
}

.cxcategory-info img {
    width: 100%;
    object-fit: cover;
    border-radius: var(--br-0);
}

.cxcategory-info .content {
    padding: 20px;
    height: 95%;
    overflow-y: auto;
}

.cxcategory-info .title {
    font-size: 26px;
    font-weight: 600 !important;
    color: var(--mainsec);
}

.cxcategory-info p {
    color: #69687B;
    font-size: 13px;
    margin-bottom: 0;
}

.cxcategoryinfo {
    background-color: var(--cxbgmainsec);
    border-radius: var(--br-0);
    display: flex;
    flex-direction: column;
}

.cxcategoryinfo img {
    max-width: 100%;
    object-fit: cover;
    border-radius: var(--br-0);
}

.cxcategoryinfo .content {
    padding: 20px;
    height: 95%;
    overflow-y: auto;
}

.cxcategoryinfo .title {
    font-size: 26px;
    font-weight: 600 !important;
    color: var(--mainsec);
}

.cxcategoryinfo p {
    color: var(--cxopcolor-2);
    font-size: 13px;
    margin-bottom: 0;
    max-height: 300px;
}

/* Game page hero (themes/default/game.blade.php) */
.cxgamehero-bleed {
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
    margin-right: calc((100% - 100vw) / 2);
    border-radius: var(--br-0);
    margin-bottom: 24px;
    margin-top: -30px;
}

.cxgamehero-bleed::before {
    content: "";
    position: absolute;
    inset: -30px;
    background-image: var(--cxgamehero-bg);
    background-size: cover;
    background-position: var(--cxgamehero-bg-pos, center top);
    filter: none;
    /* tam blur kaldırıldı */
    transform: scale(1.05);
    opacity: 0.55;
}

.cxgamehero-blur {
    position: absolute;
    top: -30px;
    bottom: -30px;
    width: 22vw;
    min-width: 140px;
    max-width: 360px;
    background-image: var(--cxgamehero-bg);
    background-size: cover;
    background-position: var(--cxgamehero-bg-pos, center top);
    filter: blur(16px);
    opacity: 0.40;
    /* kenarlar biraz daha kararsın */
    pointer-events: none;
    z-index: 0;
}

.cxgamehero-blur::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    /* blur üstüne hafif karartma */
    pointer-events: none;
}

.cxgamehero-blur-left {
    left: -40px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-image: linear-gradient(to right,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.98) 12%,
            rgba(0, 0, 0, 0.85) 28%,
            rgba(0, 0, 0, 0.55) 48%,
            rgba(0, 0, 0, 0.25) 68%,
            rgba(0, 0, 0, 0.08) 82%,
            rgba(0, 0, 0, 0) 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-image: linear-gradient(to right,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.98) 12%,
            rgba(0, 0, 0, 0.85) 28%,
            rgba(0, 0, 0, 0.55) 48%,
            rgba(0, 0, 0, 0.25) 68%,
            rgba(0, 0, 0, 0.08) 82%,
            rgba(0, 0, 0, 0) 100%);
}

.cxgamehero-blur-right {
    right: -40px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-image: linear-gradient(to left,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.98) 12%,
            rgba(0, 0, 0, 0.85) 28%,
            rgba(0, 0, 0, 0.55) 48%,
            rgba(0, 0, 0, 0.25) 68%,
            rgba(0, 0, 0, 0.08) 82%,
            rgba(0, 0, 0, 0) 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-image: linear-gradient(to left,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.98) 12%,
            rgba(0, 0, 0, 0.85) 28%,
            rgba(0, 0, 0, 0.55) 48%,
            rgba(0, 0, 0, 0.25) 68%,
            rgba(0, 0, 0, 0.08) 82%,
            rgba(0, 0, 0, 0) 100%);
}

.cxgamehero-bleed::after {
    content: "";
    position: absolute;
    inset: 0;
    /* sağ taraf açık kalmasın: tüm genişlikte koyu overlay */
    background: linear-gradient(90deg,
            rgba(10, 10, 18, 0.90) 0%,
            rgba(10, 10, 18, 0.42) 42%,
            rgba(10, 10, 18, 0.34) 52%,
            rgba(10, 10, 18, 0.42) 62%,
            rgba(10, 10, 18, 0.80) 100%);
}

.cxgamehero-wrap {
    position: relative;
    z-index: 2;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 12px;
}

.cxgamehero {
    position: relative;
    border-radius: var(--br-0);
    padding: 28px;
    background: transparent;
    /* istek: cxgamehero'da bg olmasın */
    border: none;
    /* istek: cxgamehero'da border olmasın */
}

.cxgamehero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 26px;
}

.cxgamehero-card {
    width: 180px;
    min-width: 180px;
    height: 180px;
    border-radius: var(--br-3-5);
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    border: 1px solid var(--cxbcolor);
    background: rgba(0, 0, 0, 0.25);
}

.cxgameCategoryColorBg.cxgamehero-card,
.cxgameCategoryColorBg.cxgame-reviews-card {
    background-color: var(--cxgame-category-color, #d4a82a);
    /*background-image:
        linear-gradient(to top right, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 30%),
        linear-gradient(160deg, var(--cxgame-category-color, #d4a82a) 0%, var(--cxgame-category-color, #d4a82a) 48%, rgba(0, 0, 0, 0.50) 100%);*/
    background-repeat: no-repeat;
    background-size: cover;
}

.cxgameCategoryColorBg .cxgamehero-logoWrap,
.cxgameCategoryColorBg .cxgame-reviews-logoWrap {
    background: transparent;
}

.cxgamehero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 28%, rgba(0, 0, 0, 0) 55%);
    z-index: 2;
    pointer-events: none;
}

.cxgamehero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0) 60%);
    z-index: 2;
    pointer-events: none;
}

.cxgamehero-cardbg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.04);
}

.cxgamehero-logoWrap {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.05) 100%);
    z-index: 3;
}

.cxgamehero-logo {
    width: 90px;
    height: 90px;
    max-width: 90px;
    max-height: 90px;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55));
}

.cxgamehero-meta {
    min-width: 0;
    flex: 1;
}

.cxgamehero-title {
    margin: 0 0 10px 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #fff;
}

.cxgamehero-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
}

.cxgamehero-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
}

.cxgamehero-stars i {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.22);
}

.cxgamehero-stars i.is-filled {
    color: var(--cxcolor-star);
}

.cxgamehero-rating {
    opacity: 0.9;
}

.cxgamehero-dot {
    opacity: 0.65;
}

.cxgamehero-comments {
    color: var(--text-color);
}

.cxgamehero-desc {
    margin: 0;
    max-width: 820px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.55;
}

@media (max-width: 992px) {
    .cxgamehero-bleed {
        margin-bottom: 22px;
    }

    .cxgamehero-wrap {
        padding: 0 10px;
    }

    .cxgamehero {
        padding: 18px;
    }

    .cxgamehero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .cxgamehero-card {
        width: 160px;
        min-width: 160px;
        height: 160px;
    }

    .cxgamehero-logo {
        width: 80px;
        height: 80px;
        max-width: 80px;
        max-height: 80px;
    }

    .cxgamehero-title {
        font-size: 20px;
    }

    .cxgamehero-stats {
        font-size: 12px;
    }

    .cxgamehero-stars,
    .cxgamehero-stars i {
        font-size: 12px;
    }

    .cxgamehero-desc {
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    .cxgamehero {
        padding: 14px;
    }

    .cxgamehero-inner {
        gap: 14px;
    }

    .cxgamehero-card {
        width: 140px;
        min-width: 140px;
        height: 140px;
    }

    .cxgamehero-logo {
        width: 72px;
        height: 72px;
        max-width: 72px;
        max-height: 72px;
    }

    .cxgamehero-title {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .cxgamehero-stats {
        font-size: 12px;
        gap: 8px;
        margin-bottom: 10px;
    }

    .cxgamehero-stars,
    .cxgamehero-stars i {
        font-size: 12px;
    }

    .cxgamehero-desc {
        font-size: 12px;
        line-height: 1.5;
    }
}

/* Home page hero (themes/default/store/home.blade.php) */
.marketplaceHero-bleed {
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
    margin-right: calc((100% - 100vw) / 2);
    border-radius: var(--br-0);
    margin-bottom: 24px;
    margin-top: -30px;
}

.marketplaceHero-bleed::before {
    content: "";
    position: absolute;
    inset: -30px;
    background-image: var(--marketplaceHero-bg);
    background-size: cover;
    background-position: var(--marketplaceHero-bg-pos, center top);
    filter: none;
    transform: scale(1.05);
    opacity: 0.55;
}

.marketplaceHero-blur {
    position: absolute;
    top: -30px;
    bottom: -30px;
    width: 22vw;
    min-width: 140px;
    max-width: 360px;
    background-image: var(--marketplaceHero-bg);
    background-size: cover;
    background-position: var(--marketplaceHero-bg-pos, center top);
    filter: blur(16px);
    opacity: 0.40;
    pointer-events: none;
    z-index: 0;
}

.marketplaceHero-blur::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.marketplaceHero-blur-left {
    left: -40px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-image: linear-gradient(to right,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.98) 12%,
            rgba(0, 0, 0, 0.85) 28%,
            rgba(0, 0, 0, 0.55) 48%,
            rgba(0, 0, 0, 0.25) 68%,
            rgba(0, 0, 0, 0.08) 82%,
            rgba(0, 0, 0, 0) 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-image: linear-gradient(to right,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.98) 12%,
            rgba(0, 0, 0, 0.85) 28%,
            rgba(0, 0, 0, 0.55) 48%,
            rgba(0, 0, 0, 0.25) 68%,
            rgba(0, 0, 0, 0.08) 82%,
            rgba(0, 0, 0, 0) 100%);
}

.marketplaceHero-blur-right {
    right: -40px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-image: linear-gradient(to left,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.98) 12%,
            rgba(0, 0, 0, 0.85) 28%,
            rgba(0, 0, 0, 0.55) 48%,
            rgba(0, 0, 0, 0.25) 68%,
            rgba(0, 0, 0, 0.08) 82%,
            rgba(0, 0, 0, 0) 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-image: linear-gradient(to left,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.98) 12%,
            rgba(0, 0, 0, 0.85) 28%,
            rgba(0, 0, 0, 0.55) 48%,
            rgba(0, 0, 0, 0.25) 68%,
            rgba(0, 0, 0, 0.08) 82%,
            rgba(0, 0, 0, 0) 100%);
}

.marketplaceHero-bleed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(10, 10, 18, 0.90) 0%,
            rgba(10, 10, 18, 0.42) 42%,
            rgba(10, 10, 18, 0.34) 52%,
            rgba(10, 10, 18, 0.42) 62%,
            rgba(10, 10, 18, 0.80) 100%);
}

.marketplaceHero-wrap {
    position: relative;
    z-index: 2;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 12px;
}

.marketplaceHero {
    position: relative;
    border-radius: var(--br-0);
    padding: 28px;
    min-height: 220px;
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
}

.marketplaceHero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 26px;
    width: 100%;
}

.marketplaceHero-card {
    width: 150px;
    min-width: 150px;
    height: 150px;
    border-radius: var(--br-3);
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    border: 1px solid var(--cxbcolor);
    background: rgba(0, 0, 0, 0.25);
    color: rgba(215, 220, 235, 0.9);
    display: grid;
    place-items: center;
}

.marketplaceHero-cardImg {
    width: 68px;
    height: 68px;
    max-width: 68px;
    max-height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55));
    position: relative;
    z-index: 3;
}

.marketplaceHero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 28%, rgba(0, 0, 0, 0) 55%);
    z-index: 2;
    pointer-events: none;
}

.marketplaceHero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0) 60%);
    z-index: 2;
    pointer-events: none;
}

.marketplaceHero-card i {
    font-size: 60px;
    line-height: 1;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55));
}

/* Resim stillerini kaldırmıyoruz: başka sayfalarda gerekebilir */
.cxhomehero-cardbg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.04);
}

.cxhomehero-logoWrap {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.05) 100%);
    z-index: 3;
}

.cxhomehero-logo {
    max-width: 160px;
    max-height: 160px;
    width: 75%;
    height: 75%;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55));
}

.marketplaceHero-meta {
    min-width: 0;
    flex: 1;
}

.marketplaceHero-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.marketplaceHero-actions .btnmainsec {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
}

/* Hero CTA card (shared) */
.heroCtaCard {
    width: 320px;
    max-width: 100%;
    padding: 18px;
    border-radius: 16px;
    background: rgb(37 42 53 / 22%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: rgba(215, 220, 235, 0.9);
}

.heroCtaCard-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: #fff;
    line-height: 1.15;
}

.heroCtaCard-subtitle {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0.85;
}

.heroCtaCard-primary {
    margin-top: 14px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    color: var(--text-color-6);
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(90deg, var(--mainsec) 0%, var(--mainfou) 38%, var(--main) 72%, var(--mainthi) 100%);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
}

.heroCtaCard-primary:hover {
    color: var(--text-color-6);
    filter: brightness(1.04);
}

.heroCtaCard-primary i {
    font-size: 14px;
}

.heroCtaCard-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.heroCtaCard-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(215, 220, 235, 0.9);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.heroCtaCard-chip:hover {
    color: rgba(215, 220, 235, 1);
    background: rgba(255, 255, 255, 0.09);
}

@media (max-width: 992px) {
    .heroCtaCard {
        width: 100%;
    }

    .heroCtaCard-row {
        grid-template-columns: 1fr 1fr;
    }
}

.marketplaceHero-title {
    margin: 0 0 10px 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text-color);
    text-transform: uppercase;
}

.marketplaceHero-desc {
    margin: 0;
    max-width: 820px;
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 992px) {
    .marketplaceHero-bleed {
        margin-bottom: 22px;
    }

    .marketplaceHero-wrap {
        padding: 0 10px;
    }

    .marketplaceHero {
        padding: 18px;
        min-height: 200px;
    }

    .marketplaceHero-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .marketplaceHero-actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: 10px;
        margin-left: 0;
    }

    .marketplaceHero-card {
        width: 132px;
        min-width: 132px;
        height: 132px;
    }

    .marketplaceHero-card i {
        font-size: 52px;
    }

    .marketplaceHero-cardImg {
        width: 60px;
        height: 60px;
        max-width: 60px;
        max-height: 60px;
    }

    .marketplaceHero-title {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .marketplaceHero-desc {
        font-size: 11px;
    }
}

@media (max-width: 576px) {
    .marketplaceHero {
        padding: 14px;
    }

    .marketplaceHero-inner {
        gap: 14px;
    }

    .marketplaceHero-card {
        width: 118px;
        min-width: 118px;
        height: 118px;
    }

    .marketplaceHero-card i {
        font-size: 46px;
    }

    .marketplaceHero-cardImg {
        width: 54px;
        height: 54px;
        max-width: 54px;
        max-height: 54px;
    }
}

/* Category page hero (themes/default/store/category.blade.php) */
.categoryHero-bleed {
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
    margin-right: calc((100% - 100vw) / 2);
    border-radius: var(--br-0);
    margin-bottom: 24px;
    margin-top: -30px;
}

.categoryHero-bleed::before {
    content: "";
    position: absolute;
    inset: -30px;
    background-image: var(--categoryHero-bg);
    background-size: cover;
    background-position: var(--categoryHero-bg-pos, center top);
    filter: none;
    transform: scale(1.05);
    opacity: 0.55;
}

.categoryHero-blur {
    position: absolute;
    top: -30px;
    bottom: -30px;
    width: 22vw;
    min-width: 140px;
    max-width: 360px;
    background-image: var(--categoryHero-bg);
    background-size: cover;
    background-position: var(--categoryHero-bg-pos, center top);
    filter: blur(16px);
    opacity: 0.40;
    pointer-events: none;
    z-index: 0;
}

.categoryHero-blur::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.categoryHero-blur-left {
    left: -40px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-image: linear-gradient(to right,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.98) 12%,
            rgba(0, 0, 0, 0.85) 28%,
            rgba(0, 0, 0, 0.55) 48%,
            rgba(0, 0, 0, 0.25) 68%,
            rgba(0, 0, 0, 0.08) 82%,
            rgba(0, 0, 0, 0) 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-image: linear-gradient(to right,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.98) 12%,
            rgba(0, 0, 0, 0.85) 28%,
            rgba(0, 0, 0, 0.55) 48%,
            rgba(0, 0, 0, 0.25) 68%,
            rgba(0, 0, 0, 0.08) 82%,
            rgba(0, 0, 0, 0) 100%);
}

.categoryHero-blur-right {
    right: -40px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-image: linear-gradient(to left,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.98) 12%,
            rgba(0, 0, 0, 0.85) 28%,
            rgba(0, 0, 0, 0.55) 48%,
            rgba(0, 0, 0, 0.25) 68%,
            rgba(0, 0, 0, 0.08) 82%,
            rgba(0, 0, 0, 0) 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-image: linear-gradient(to left,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.98) 12%,
            rgba(0, 0, 0, 0.85) 28%,
            rgba(0, 0, 0, 0.55) 48%,
            rgba(0, 0, 0, 0.25) 68%,
            rgba(0, 0, 0, 0.08) 82%,
            rgba(0, 0, 0, 0) 100%);
}

.categoryHero-bleed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(10, 10, 18, 0.90) 0%,
            rgba(10, 10, 18, 0.42) 42%,
            rgba(10, 10, 18, 0.34) 52%,
            rgba(10, 10, 18, 0.42) 62%,
            rgba(10, 10, 18, 0.80) 100%);
}

.categoryHero-wrap {
    position: relative;
    z-index: 2;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 12px;
}

.categoryHero {
    position: relative;
    border-radius: var(--br-0);
    padding: 28px;
    min-height: 220px;
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
}

.categoryHero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 26px;
    width: 100%;
}

.categoryHero-badge {
    width: 150px;
    min-width: 150px;
    height: 150px;
    border-radius: var(--br-3);
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    border: 1px solid var(--cxbcolor);
    display: grid;
    place-items: center;
}

.categoryHero-badgeImg {
    width: 68px;
    height: 68px;
    max-width: 68px;
    max-height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55));
}

.categoryHero-meta {
    min-width: 0;
    flex: 1;
}

.categoryHero-title {
    margin: 0 0 10px 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text-color);
}

.categoryHero-desc {
    margin: 0;
    max-width: 820px;
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.55;
}

.categoryHero-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.categoryHero-actions .btnmainsec {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 992px) {
    .categoryHero-bleed {
        margin-bottom: 22px;
    }

    .categoryHero-wrap {
        padding: 0 10px;
    }

    .categoryHero {
        padding: 18px;
        min-height: 200px;
    }

    .categoryHero-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .categoryHero-actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: 10px;
        margin-left: 0;
    }

    .categoryHero-badge {
        width: 132px;
        min-width: 132px;
        height: 132px;
    }

    .categoryHero-badgeImg {
        width: 60px;
        height: 60px;
        max-width: 60px;
        max-height: 60px;
    }

    .categoryHero-title {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .categoryHero-desc {
        font-size: 11px;
    }
}

@media (max-width: 576px) {
    .categoryHero {
        padding: 14px;
    }

    .categoryHero-inner {
        gap: 14px;
    }

    .categoryHero-badge {
        width: 118px;
        min-width: 118px;
        height: 118px;
    }

    .categoryHero-badgeImg {
        width: 54px;
        height: 54px;
        max-width: 54px;
        max-height: 54px;
    }
}

.cxcategory-letter .link {
    display: inline-block;
    background-color: var(--text-color);
    color: #363636;
    border-radius: 8px;
    min-width: 47px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    margin-right: 5px;
    margin-bottom: 5px;
    transition: 0.2s;
}


.cxcategory-letter .link.cxminic {
    background: var(--mainsec);
    color: var(--text-color);
}

.cxcategory-letter .link:hover {
    transform: scale(1.08);
}

.cxcatbox-atropos {
    width: 100%;
    aspect-ratio: 3 / 4;
    /* 3 / 4*/
    margin-bottom: 10px;
}

.cxcatbox-atropos .atropos-inner {
    width: 100%;
    height: 100%;
    border-radius: var(--br-1-5);
    overflow: hidden;
    position: relative;
}

.cxcatbox {
    border-radius: var(--br-1-5);
    transition: all 0.15s;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.cxcatbox img.cxcatboxbg {
    height: 100%;
    width: 100%;
    border-radius: var(--br-1-5);
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.cxcatbox .content {
    padding: var(--fs-1) 10px;
    text-align: center;
}

.cxcatbox .title {
    font-weight: 300 !important;
    font-size: var(--fs-4);
}

.cxcatboxlogo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(1, 0, 0.2, 1);
    z-index: 3;
}

.cxcatboxlogo::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    z-index: -1;
    pointer-events: none;
    filter: blur(15px);
}

.category-logo-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    max-width: 110px;
    max-height: 110px;
    object-fit: contain;
    transform: translate(-50%, -50%);
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

.cxindirim .box {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 36px;
    box-shadow: 0 0 15px #125ece;
}

.cxindirim .box .content {
    padding: 80px 0;
}

.cxindirim .box .content .title {
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.cxyayinci-banner .box {
    border-radius: 36px;
    box-shadow: 0 0 15px #514326;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 36px;
}

.cxyayinci-banner .box .content {
    padding: 40px 0;
}

.cxyayinci-banner .box .content .title {
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.cxstreamer {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
}

.cxstreamer img {
    display: block;
    margin: auto;
    border-radius: var(--br-0);
    height: 280px;
    width: 216px;
    object-fit: cover;
}

.cxstreamer .name {
    font-size: 16px;
    color: var(--text-color);
}

.cxstreamer .name:hover {
    font-size: 16px;
    color: var(--main);
}

.cxstreamer .badge-live {
    background-color: #FF2C2C;
    border-radius: 9px;
    padding: 3px 10px;
    position: absolute;
    top: 10px;
    right: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.cxstreamer.live img {
    outline: 2px solid #FF4141;
    box-shadow: 0 0 15px rgba(255, 72, 72, 0.71);
}

/* ============================
   Streamers page - left sidebar
   (Only layout; colors inherited)
   ============================ */
.cx-streamers-page {
    width: 100%;
}

.cx-streamers-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
}

.cx-streamers-sidebar {
    position: sticky;
    top: 92px;
    background: var(--cxbgmainsec);
    overflow: hidden;
    padding: 10px;
    padding-top: 30px;
    height: 100%;
}

.cx-streamers-sidebar-head {
    padding: 12px 12px 0 12px;
}

.cx-streamers-sidebar-block+.cx-streamers-sidebar-block {
    margin-top: 12px;
}

.cx-streamers-sidebar-divider {
    height: 2px;
    width: 42px;
    background: var(--mainsec);
    border-radius: 999px;
    margin-top: 10px;
    opacity: .85;
}

.cx-streamers-sidebar-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text-color);
}

.cx-streamers-sidebar-body {
    display: grid;
    gap: 6px;
    padding: 6px 10px;
    overscroll-behavior: contain;
}

.cx-streamers-sidebar-body--compact {
    max-height: 240px;
    overflow: hidden;
}

.cx-streamers-sidebar-body--scroll {
    max-height: 340px;
    overflow: auto;
    padding-right: 6px;
}

.cx-streamers-sidebar-body.is-expanded {
    max-height: none;
    overflow: visible;
}

.cx-streamers-sidebar-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 5px;
    border-radius: var(--br-1);
    background: var(--cxbgmainsec);
    color: inherit;
    text-decoration: none;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.cx-streamers-sidebar-item:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.03);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cx-streamers-sidebar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cx-streamers-sidebar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cx-streamers-sidebar-meta {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.cx-streamers-sidebar-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cx-streamers-sidebar-sub {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-color-h);
    letter-spacing: 0.4px;
}

.cx-streamers-sidebar-status {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 4px 8px;
    border-radius: 8px;
    white-space: nowrap;
}

.cx-streamers-sidebar-status--online {
    background: var(--cxopcolor-41);
    color: var(--cxcolor-41);
}

.cx-streamers-sidebar-status--offline {
    background: var(--cxopcolor-47);
    color: var(--cxcolor-47);
}

.cx-streamers-sidebar-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 12px;
}

.cx-streamers-sidebar-more,
.cx-streamers-sidebar-less {
    border: none;
    background: transparent;
    color: var(--text-color);
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    padding: 0;
}

.cx-streamers-sidebar-more:hover,
.cx-streamers-sidebar-less:hover {
    color: var(--text-color-h);
    text-decoration: none;
}

.cx-streamers-sidebar-more:focus-visible,
.cx-streamers-sidebar-less:focus-visible {
    outline: 2px solid var(--mainsec);
    outline-offset: 2px;
}

.cx-streamers-sidebar-more.is-hidden,
.cx-streamers-sidebar-less.is-hidden {
    display: none;
}


.cx-streamers-sidebar-empty {
    padding: 14px 10px;
    text-align: center;
    color: var(--text-color-h);
    font-size: 12px;
}

.cx-streamers-main-head {
    margin-bottom: 12px;
}

.cx-streamers-main-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-color);
}

.cx-streamers-main-body {
    position: relative;
}

.cx-streamers-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1);
    background: var(--cxbgmainsec);
    padding: 10px;
    margin-bottom: 16px;
}

.cx-streamers-toolbar-left,
.cx-streamers-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cx-streamers-toolbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    color: var(--text-color);
    border-radius: var(--br-1);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.cx-streamers-toolbar-chip:hover {
    background: var(--cxbgmainfiv-thi);
    color: var(--text-color);
}

.cx-streamers-toolbar-chip.is-active {
    background: var(--main);
    color: var(--text-color-6);
    border-color: transparent;
}

.cx-streamers-toolbar-chip i {
    font-size: 12px;
}

.cx-streamers-grid {
    width: calc(100% + 20px);
    display: grid;
    grid-template-columns: repeat(9, 11.5%);
    margin-left: -10px;
    margin-right: -10px;
}

.cx-streamers-grid-card {
    width: 100%;
    padding: 10px;
}

.cx-streamers-grid-link {
    position: relative;
}

.cx-streamers-card-mainlink {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: inherit;
    text-decoration: none;
}

.cx-streamers-card-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
    border-radius: var(--br-1-5);
    overflow: hidden;
    position: relative;
}

.cx-streamers-card-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cx-streamers-card-status {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 5px;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    backdrop-filter: blur(2px);
    background: rgba(0, 0, 0, 0.52);
}

.cx-streamers-card-status.is-online .cx-streamers-card-status-dot {
    background: #2ecf76;
}

.cx-streamers-card-status.is-offline .cx-streamers-card-status-dot {
    background: #ff4d4f;
}

.cx-streamers-card-status-dot {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #fff;
}

.cx-streamers-card-userpill {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 5px 8px;
    border-radius: var(--br-1);
    background: rgb(15 17 22 / 40%);
    color: var(--text-color2);
    text-align: left;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

.cx-streamers-card-userpill-icon {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    flex-shrink: 0;
}

.cx-streamers-card-userpill-text {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cx-streamers-card-platformpeek {
    position: absolute;
    left: 8px;
    bottom: 23px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 6px 8px;
    border-radius: var(--br-1) var(--br-1) 0 0;
    background: rgb(15 17 22 / 40%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 0;
    backdrop-filter: blur(10px);
    filter: none;
    opacity: .72;
    transform: translateY(8px);
    transition: all .18s ease;
    pointer-events: auto;
    z-index: 2;
    max-height: 34px;
    overflow: hidden;
}

.cx-streamers-card-platformpeek::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -6px;
    height: 8px;
    background: rgb(15 17 22 / 40%);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.cx-streamers-grid-link:hover .cx-streamers-card-platformpeek {
    opacity: 1;
    transform: translateY(-12px);
    z-index: 2;
    max-height: 220px;
}

.cx-streamers-card-platformpeek-item {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .2s ease, transform .24s ease;
}

.cx-streamers-card-platformpeek-item:nth-child(n+2) {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.cx-streamers-grid-link:hover .cx-streamers-card-platformpeek-item {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: calc(var(--peek-index, 0) * 45ms);
}

.cx-streamers-grid-empty {
    grid-column: 1 / -1;
}

@media (max-width: 1600px) {
    .cx-streamers-grid {
        grid-template-columns: repeat(8, 12.5%);
    }
}

@media (max-width: 1400px) {
    .cx-streamers-grid {
        grid-template-columns: repeat(7, 14.285%);
    }
}

@media (max-width: 1200px) {
    .cx-streamers-grid {
        grid-template-columns: repeat(6, 16.666%);
    }
}

@media (max-width: 992px) {
    .cx-streamers-layout {
        grid-template-columns: 1fr;
    }

    .cx-streamers-sidebar {
        position: relative;
        top: auto;
    }

    .cx-streamers-sidebar-body {
        max-height: none;
    }

    .cx-streamers-grid {
        grid-template-columns: repeat(5, 20%);
    }

    .cx-streamers-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 768px) {
    .cx-streamers-grid {
        grid-template-columns: repeat(4, 25%);
    }

    .cx-streamers-grid-card {
        padding: 8px;
    }

    .cx-streamers-card-userpill {
        left: 6px;
        right: 6px;
        bottom: 6px;
        padding: 7px 10px;
        gap: 6px;
    }

    .cx-streamers-card-userpill-text {
        font-size: 12px;
    }

    .cx-streamers-card-platformpeek-item {
        width: 16px;
        height: 16px;
        font-size: 8px;
    }
}

@media (max-width: 576px) {
    .cx-streamers-grid {
        grid-template-columns: repeat(3, 33.333%);
    }

    .cx-streamers-card-status {
        top: 5px;
        right: 5px;
        font-size: 10px;
        padding: 3px 7px 3px 4px;
    }

    .cx-streamers-card-status-dot {
        width: 14px;
        height: 14px;
        font-size: 7px;
    }

    .cx-streamers-card-userpill {
        left: 5px;
        right: 5px;
        bottom: 5px;
        padding: 6px 8px;
    }

    .cx-streamers-card-platformpeek {
        left: 8px;
        bottom: 14px;
    }

    .cx-streamers-card-userpill-text {
        font-size: 11px;
    }
}

/* =========================================================
 * Cart seller header (satıcı avatar + isim)
 * ========================================================= */
.cx-cart-seller-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cx-cart-seller-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cx-cart-seller-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--br-1);
    overflow: hidden;
    flex: 0 0 28px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cx-cart-seller-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cx-cart-seller-name {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

.cx-cart-seller-name:hover {
    text-decoration: none;
    opacity: 0.9;
}

.cx-cart-seller-chevron {
    opacity: 0.5;
    user-select: none;
}

/* Cart: satır silme butonu (küçük ikon, dar alan) */
.cxcart-remove-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: var(--br-1);
    line-height: 1;
}

.cxcart-remove-btn i {
    font-size: 14px;
    line-height: 1;
}

/* Cart: cxproduct-field kolon genişlikleri (silme kolonu geniş kalmasın) */
.cxcart-products-table .cxcart-product-card .cxproduct-field-actions {
    width: 48px;
    min-width: 48px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cxcart-products-table .cxcart-product-card .cxproduct-field-actions .cxcart-remove-btn {
    margin-left: auto;
    margin-right: auto;
}

/* Sepet sayfası: adet stepper daha kompakt */
.cxcart-products-table .qty-stepper.number-input {
    height: 40px;
    min-height: 40px;
    padding: 3px 6px;
}

.cxcart-products-table .qty-stepper__btn {
    width: 28px;
    min-width: 28px;
    height: 28px;
}

.cxcart-products-table .qty-stepper__field {
    height: 1.5rem;
    font-size: 0.8125rem;
}

/* Sepet: chip satırı — site (indirim yanı) + marketplace (ilan no / ek alanlar); 24px pill, yan yana */
.cxcart-site-promo-row,
.cxcart-mp-meta-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cxcart-site-promo-row {
    margin-bottom: 6px;
}

.cxcart-mp-meta-row {
    margin-top: 6px;
}

.cxcart-site-promo-row .cxproduct-left-discount {
    flex: 0 0 auto;
}

.cxcart-site-promo-row .cxcart-extra-fields-inline,
.cxcart-mp-meta-row .cxcart-extra-fields-inline {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.cxcart-site-promo-row .cxcart-extra-chip,
.cxcart-mp-meta-row .cxcart-extra-chip {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    overflow: hidden;
}

.cxcart-site-promo-row .cxcart-extra-chip__ico,
.cxcart-mp-meta-row .cxcart-extra-chip__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    height: 24px;
    flex-shrink: 0;
    background: linear-gradient(145deg, #0f766e 0%, #0d5c56 100%);
    color: #ecfdf5;
    font-size: 11px;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.cxcart-site-promo-row .cxcart-extra-chip__txt,
.cxcart-mp-meta-row .cxcart-extra-chip__txt {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    height: 24px;
    min-height: 24px;
    padding: 0 10px;
    background: rgba(15, 118, 110, 0.28);
    color: #ccfbf1;
    font-size: 11px;
    line-height: 1;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    border-left: 1px solid rgba(15, 118, 110, 0.45);
    white-space: nowrap;
    min-width: 0;
    max-width: min(220px, 52vw);
    overflow: hidden;
}

.cxcart-site-promo-row .cxcart-extra-chip__label,
.cxcart-mp-meta-row .cxcart-extra-chip__label {
    font-weight: 600;
    color: #5eead4;
    flex-shrink: 0;
}

.cxcart-site-promo-row .cxcart-extra-chip__val,
.cxcart-mp-meta-row .cxcart-extra-chip__val {
    color: #ccfbf1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Marketplace: ilan no chip — mor ton (Oyuncu ID vb. teal chip’lerden ayrı) */
.cxcart-mp-meta-row .cxcart-extra-chip--listing-no .cxcart-extra-chip__ico {
    background: linear-gradient(145deg, #7c3aed 0%, #5b21b6 100%);
    color: #f5f3ff;
}

.cxcart-mp-meta-row .cxcart-extra-chip--listing-no .cxcart-extra-chip__txt {
    background: rgba(124, 58, 237, 0.32);
    color: #ede9fe;
    border-left-color: rgba(124, 58, 237, 0.55);
}

.cxcart-mp-meta-row .cxcart-extra-chip--listing-no .cxcart-extra-chip__label {
    color: #c4b5fd;
}

.cxcart-mp-meta-row .cxcart-extra-chip--listing-no .cxcart-extra-chip__val {
    color: #ede9fe;
}

@media (max-width: 400px) {
    .cx-streamers-grid-card {
        padding: 6px;
    }
}

/* Streamer panel (profile dashboard) — kart boyutu yayıncılar grid hücresi ile aynı mantık */
.cx-streamer-panel-hero {
    margin-bottom: 8px;
}

.cx-streamer-panel-identity-grid.cx-streamers-grid {
    display: block;
    width: 172px;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.cx-streamer-panel-identity-grid .cx-streamers-grid-card {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 576px) {
    .cx-streamer-panel-identity-grid.cx-streamers-grid {
        width: 154px;
    }

    .cx-streamer-panel-identity-grid .cx-streamers-grid-card {
        padding: 0;
    }
}

@media (min-width: 1200px) {
    .cx-streamer-panel-identity-grid.cx-streamers-grid {
        width: 188px;
    }
}

@media (min-width: 1600px) {
    .cx-streamer-panel-identity-grid.cx-streamers-grid {
        width: 204px;
    }
}

/* Panel yayıncı kartı içi — özel sınıflar (dış kutu genişliğine göre kademeli) */
.cx-streamer-panel-identity .cx-streamer-panel-card-pill {
    left: 6px;
    right: 6px;
    bottom: 6px;
    padding: 4px 7px;
    gap: 5px;
}

.cx-streamer-panel-identity .cx-streamer-panel-card-pill-icon {
    width: 15px;
    height: 15px;
    font-size: 9px;
}

.cx-streamer-panel-identity .cx-streamer-panel-card-pill-text {
    font-size: 10px;
}

.cx-streamer-panel-identity .cx-streamer-panel-card-peek {
    left: 6px;
    bottom: 20px;
    padding: 3px 5px 7px;
    gap: 3px;
}

.cx-streamer-panel-identity .cx-streamer-panel-card-peek-item {
    width: 15px;
    height: 15px;
    font-size: 9px;
}

@media (min-width: 1200px) {
    .cx-streamer-panel-identity .cx-streamer-panel-card-pill {
        left: 8px;
        right: 8px;
        bottom: 8px;
        padding: 6px 9px;
        gap: 6px;
    }

    .cx-streamer-panel-identity .cx-streamer-panel-card-pill-icon {
        width: 18px;
        height: 18px;
        font-size: 11px;
    }

    .cx-streamer-panel-identity .cx-streamer-panel-card-pill-text {
        font-size: 11px;
    }

    .cx-streamer-panel-identity .cx-streamer-panel-card-peek {
        left: 8px;
        bottom: 24px;
        padding: 4px 6px 8px;
    }

    .cx-streamer-panel-identity .cx-streamer-panel-card-peek-item {
        width: 17px;
        height: 17px;
        font-size: 10px;
    }
}

@media (min-width: 1600px) {
    .cx-streamer-panel-identity .cx-streamer-panel-card-pill {
        padding: 7px 10px;
        gap: 7px;
    }

    .cx-streamer-panel-identity .cx-streamer-panel-card-pill-icon {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .cx-streamer-panel-identity .cx-streamer-panel-card-pill-text {
        font-size: 12px;
    }

    .cx-streamer-panel-identity .cx-streamer-panel-card-peek {
        bottom: 26px;
    }

    .cx-streamer-panel-identity .cx-streamer-panel-card-peek-item {
        width: 18px;
        height: 18px;
        font-size: 11px;
    }
}

.cx-streamer-panel-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}

.cx-streamer-panel-actionBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--br-1);
    border: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
    box-sizing: border-box;
}

.cx-streamer-panel-actionBtn i {
    font-size: 13px;
    flex-shrink: 0;
    line-height: 1;
}

.cx-streamer-panel-actionBtn--settings {
    background-color: var(--main);
    color: var(--text-color-6);
}

.cx-streamer-panel-actionBtn--settings:hover {
    background-color: var(--mainfou);
    color: var(--text-color-6);
}

.cx-streamer-panel-block-head {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 18px;
    border-radius: var(--br-1-5);
    background-color: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    color: var(--text-color);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.2;
    box-sizing: border-box;
}

.cx-streamer-panel-block-head i {
    font-size: 14px;
    color: var(--main);
    flex-shrink: 0;
}

a.cx-streamer-panel-withdraw-cta {
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

a.cx-streamer-panel-withdraw-cta:hover {
    border-color: var(--main);
    color: var(--main);
    background-color: var(--cxbgmainfiv-thi);
}

h3.cx-streamer-panel-promo-head {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: inherit;
    font-weight: inherit;
}

.cx-streamer-panel-balance.balance-dashboard {
    padding: 0;
    background-color: transparent;
}

.cx-streamer-panel-stat-full {
    margin-bottom: 16px;
}

.cx-streamer-panel-stat-bottom.balance-cards-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.balance-card-amount--plain {
    color: var(--text-color2);
}

@media (max-width: 576px) {
    .cx-streamer-panel-stat-bottom.balance-cards-container {
        grid-template-columns: 1fr;
    }
}

/* Yayıncı paneli — paylaşım linkleri (sipariş orderCard-code ile aynı görünüm, ayrı sınıflar) */
.cx-streamer-panel-links {
    margin-top: 6px;
}

.cx-streamer-shareRow {
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
    color: var(--text-color);
    border-radius: var(--br-1);
    min-height: 38px;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 600;
    transition: all .15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    flex-wrap: wrap;
}

.cx-streamer-shareLabel {
    flex-shrink: 0;
    color: var(--text-color-h);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.cx-streamer-shareUrl {
    flex: 1;
    min-width: 0;
    color: var(--text-color);
    font-size: 13px;
    letter-spacing: 0.2px;
    word-break: break-all;
}

.cx-streamer-shareCopy {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainsec);
    color: var(--text-color-h);
    border-radius: var(--br-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s ease;
}

.cx-streamer-shareCopy i {
    font-size: 12px;
}

.cx-streamer-shareCopy:hover:not(.disabled) {
    color: var(--text-color);
    background: var(--cxbgmainfou);
}

.cx-streamer-shareCopy.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 576px) {
    .cx-streamer-shareRow {
        font-size: 11px;
        padding: 6px 8px;
    }
}

/* Streamer preview page */
.cx-streamer-preview-page {
    width: 100%;
}

.cx-streamer-preview-layout {
    align-items: stretch;
}

.cx-streamer-preview-player,
.cx-streamer-preview-donate {
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-2);
    overflow: hidden;
}

.cx-streamer-preview-media {
    position: relative;
    background: #000;
    height: 560px;
}

.cx-streamer-preview-media iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.cx-streamer-preview-status {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: blur(3px);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    z-index: 2;
}

.cx-streamer-preview-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.cx-streamer-preview-status.is-online {
    color: var(--cxcolor-41);
}

.cx-streamer-preview-status.is-offline {
    color: var(--cxcolor-47);
}

.cx-streamer-preview-platform {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    z-index: 2;
}

.cx-streamer-preview-donate-head {
    padding: 14px 14px;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
}

.cx-streamer-preview-form {
    padding: 14px;
    display: grid;
    gap: 12px;
}

.cx-streamer-preview-row2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 175px;
    gap: 10px;
}

.cx-streamer-preview-field {
    display: grid;
    gap: 6px;
    position: relative;
}

.cx-streamer-preview-label {
    font-size: 12px;
    color: var(--text-color-h);
    margin: 0;
}

.cx-streamer-preview-textarea:focus {
    outline: none;
}

.cx-streamer-preview-form .iconInput .formControl {
    padding-right: 34px;
}

.cx-streamer-preview-textarea {
    width: 100%;
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
    color: var(--text-color);
    border-radius: 10px;
    padding: 10px 11px;
    font-size: 12px;
    resize: vertical;
    min-height: 84px;
}

.cx-streamer-preview-char {
    text-align: right;
    margin-top: -2px;
    color: var(--text-color-h);
    font-size: 11px;
}

.cx-streamer-preview-quick {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.cx-streamer-preview-quickbtn {
    border: 1px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
    color: var(--text-color);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 0;
    transition: all .15s ease;
}

.cx-streamer-preview-quickbtn:hover {
    border-color: var(--main);
    color: var(--main);
    background: var(--cxbgmainfou);
}

.cx-streamer-preview-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
}

.cx-streamer-preview-bottom .cxcustcb {
    margin: 0;
}

.cx-streamer-preview-bottom .cxcustcb span:last-child {
    font-size: 12px;
}

.cx-streamer-preview-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--br-1);
    background: var(--main);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
    color: var(--text-color-6);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all .15s ease;
    border: none;
    white-space: nowrap;
}

.cx-streamer-preview-submit:hover {
    color: var(--text-color-6);
    background: var(--mainfou);
    text-decoration: none;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--main) 32%, transparent);
}

.cx-streamer-preview-note {
    margin-top: 14px;
}

@media (max-width: 992px) {
    .cx-streamer-preview-media {
        height: 460px;
    }
}

@media (max-width: 768px) {
    .cx-streamer-preview-row2 {
        grid-template-columns: 1fr;
    }

    .cx-streamer-preview-quick {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cx-streamer-preview-media {
        height: 320px;
    }

    .cx-streamer-preview-bottom {
        flex-wrap: wrap;
    }
}


.cxgamehead {
    margin: 20px 0;
    background-color: var(--cxbgmainthi);
    padding: 10px 20px;
    border-radius: var(--br-0);
}

.cxgamehead .title a {
    color: var(--text-color);
    font-size: 34px;
}


.cxfilter-empty {
    background-color: var(--text-color);
    color: #363636;
    border-radius: 11px;
    padding: 20px 30px;
    margin-bottom: 20px;
}

.cxfilter-empty .left {
    display: flex;
    align-items: center;
    margin-right: 15px;
    border-right: 1px solid #505050;
    padding-right: 15px;
}

.cxfilter-empty .text1,
.cxfilter-empty .material-icons {
    color: #6094FF;
}

.cxfilter-empty .text {
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.cxshop-filter {
    padding: 20px 25px;
    border-radius: 16px;
    color: #212121;
    position: relative;
    margin-bottom: 20px;
}

.cxshop-filter .head-title {
    font-size: var(--fs-1);
    font-weight: 300 !important;
    border-bottom: 1px solid #333;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.cxshop-filter .range {
    position: relative;
    top: -20px;
}

.cxshop-filter .filter {
    margin-bottom: 10px;
}

.cxshop-filter .btn-filter {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: var(--fs-0);
    padding: 6px 20px !important;
    z-index: 2;
}

.btn-filter {
    background: linear-gradient(to right, #5B97FF, #DB46FF);
    border: 0 !important;
    color: var(--text-color) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, #5B97FF 25%, transparent);
}

.btn-filter:hover {
    box-shadow: 0 4px 16px color-mix(in srgb, #5B97FF 32%, transparent);
}

.cxtitle-gradient {
    background-color: var(--cxbgmainsec);
    position: relative;
    padding-left: 12px;
    margin-bottom: 15px;
}

.cxtitle-gradient::before {
    content: "";
    display: block;
    height: 100%;
    width: 12px;
    background: linear-gradient(to bottom, var(--gradient-color1), var(--gradient-color2));
    position: absolute;
    left: 0;
    top: 0;
}

.cxtitle-gradient .nav .nav-link {
    font-size: 22px;
    background-color: transparent !important;
    font-weight: 300;
    padding: 25px 20px;
    color: var(--text-color);
}

.cxtitle-gradient .nav .nav-link.active {
    color: #DB46FF;
}

.bg-darken {
    background-color: var(--cxbgmainsec);
}

.bg-success {
    background-color: var(--cxcolor-6) !important;
}


.border-start {
    border-left: 1px solid #707070 !important;
}

.cxpi-box {
    background-color: var(--cxbgmainsec);
    padding: 15px;
    border-radius: 7px;
    margin-bottom: 20px;
}

.kural {
    margin: 7px 0;
}

.kural .left {
    background-color: #FAB670;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 24px;
    margin-right: 10px;
}

.cxilanver {
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 20px;
}

.cxilanver .head {
    font-size: var(--fs-4);
    background: linear-gradient(to left, #DB46FF, #5B97FF);
    border-radius: var(--fs-1);
    text-align: center;
    padding: 10px;
    margin-bottom: 20px;
}

.cxilanver .head .title {
    font-size: 22px;
    font-weight: 300 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cxilanver .list-group-item {
    position: relative;
    font-size: 15px;
}

.cxilanver .list-group-item i {
    position: absolute;
    right: 10px;
    top: 7px;
}

.cxilanver .formControl {
    font-size: 15px;
    padding-right: 30px !important;
}

.cxproduct-detay {
    background-color: var(--cxbgmainsec);
    border: 1px solid #0F0E20;
    border-radius: var(--br-1);
    padding: 20px;
    margin-bottom: 10px;
}

.price-box {
    border: 0;
    padding: 0 30px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: 600;
}

.cxproduct-detay .productimg {
    border-radius: 9px;
}

.cxproduct-detay .productname {
    font-size: 23px;
    font-weight: 500;
}

.cxproduct-detay .table {
    margin-bottom: 10px;
}

.cxproduct-detay .table td {
    font-size: var(--fs-0);
}

.cxproduct-detay .table tr:first-child td {}

.cxproduct-detay .table td:last-child {
    text-align: right;
}

.cxproduct-detay .btn .material-icons {
    position: relative;
    top: 3px;
}



.cxbenzer-urunler {
    background-color: var(--cxbgmainsec);
    border-radius: var(--br-1);
}

.cxbenzer-urunler .title {
    font-size: var(--fs-4);
    padding: 15px;
    padding-bottom: 5px;
    font-weight: 500 !important;
}

.cxbenzer-urunler .urun:first-child {}

.cxbenzer-urunler .urun {
    padding: 15px 20px;
    border-top: 1px solid #606060;
}

.cxbenzer-urunler .urun img {
    height: auto;
    width: 65px;
    border-radius: 11px;
    object-fit: cover;
    margin-right: 10px;
}

.cxbenzer-urunler .urun .left {
    display: flex;
    align-items: center;
}

.cxbenzer-urunler .urun .right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.cxbenzer-urunler .urun .stars i {
    font-size: var(--fs-1);
}

.cxbenzer-urunler .urun .productname {
    font-size: 16px;
    margin-bottom: 0;
}

.cxbenzer-urunler .urun .author {
    font-size: var(--fs-0);
}

.cxbenzer-urunler .urun .price {
    font-size: 15px;
}

.cxbenzer-urunler .urun .stars {
    margin: 0 10px;
}

.cxbenzer-urunler .urun .stars i {
    margin: 0 -2px;
}

.cxbenzer-urunler .urun .check {
    background-color: var(--cxcolor-6);
    color: var(--text-color);
    height: 25px;
    width: 25px;
    display: block;
    border-radius: 100%;
    line-height: 35px;
    text-align: center;
}

.cxbenzer-urunler .urun .check i {
    font-size: 18px;
}

.cxproduct-tabs .nav {
    background-color: var(--cxbgmainsec);
    border-radius: var(--br-0);
    padding: 5px;
    margin-bottom: 20px;
}

.cxproduct-tabs .nav .nav-link {
    color: var(--text-color);
    font-size: 18;
}

.cxproduct-tabs .nav .nav-link.active {
    color: var(--main) !important;
    background-color: transparent !important;
}

.cxproduct-tabs .box {
    background-color: var(--cxbgmainsec);
    border-radius: var(--br-0);
    padding: 20px;
}

.cxproduct-comments .charts .list {
    margin: 10px 0;
}

.cxproduct-comments .charts .list .titlechart {
    font-size: 18px;
    display: block;
    margin-right: 20px;
    width: 10%;
}

.cxproduct-comments .charts .list .stars i {
    font-size: 18px;
    margin: 0 -2px;
}

.cxproduct-comments .charts .list .progress {
    width: 30%;
    margin-left: 40px;
}

.write-comment.flex-start {
    align-items: flex-start !important;
}

.write-comment .profile {
    min-width: 120px;
    max-width: 120px;
    height: 120px;
    border-radius: 100%;
    border: 1px solid #FF31C1 !important;
    box-shadow: 0 3px 6px rgba(255, 49, 193, 0.32);
    margin-right: 20px;
}

.write-comment form {
    width: 70%;
    position: relative;
}

.write-comment .formControl {
    border: 1px solid #FF31C1 !important;
    box-shadow: 0 0 6px rgba(255, 49, 193, 0.32);
}

.write-comment form .btn-pink {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding-left: 30px;
    padding-right: 30px;
}

.btn-pink {
    background-color: #FF31C1 !important;
    color: var(--text-color) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, #FF31C1 25%, transparent);
}

.btn-pink:hover {
    box-shadow: 0 4px 16px color-mix(in srgb, #FF31C1 32%, transparent);
}

.progress {
    background-color: #999999 !important;
}

i.star {
    color: var(--cxcolor-3);
}

.number-input-new {
    position: relative;
}

.number-input.number-input-new {
    display: block;
    width: 100%;
}

.number-input.number-input-new,
.number-input.number-input-new * {
    box-sizing: border-box;
}

.number-input.number-input-new>button {
    outline: none;
    -webkit-appearance: none;
    background-color: var(--cxbgmainfiv-sec);
    border: none;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    cursor: pointer;
    margin: 0;
    position: relative;
}

.number-input.number-input-new>button:before,
.number-input.number-input-new>button:after {
    display: inline-block;
    position: absolute;
    content: '';
    width: .7rem;
    height: 2px;
    background-color: var(--text-color);
    transform: translate(-50%, -50%);
}

.number-input.number-input-new>button.plus:after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.number-input-new .quantity {
    height: 45px !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    border-radius: 4px;
    background-color: var(--cx-boxcolor-1) !important;
    font-weight: 300 !important;
    font-size: 22px !important;
    padding: 0 30px !important;
}

.number-input-new button {
    display: block;
    z-index: 99;
    height: 22px;
}

.number-input-new .step {
    position: absolute;
    top: 12px;
    left: 0;
}

.number-input-new .plus {
    position: absolute;
    top: 12px;
    right: 0;
}

.number-input-new .right {
    width: 30px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.cxsenddonatepage {
    background-color: var(--cxbgmainsec);
    border-radius: var(--br-0);
    padding: 30px;
}

.cxinfo-box {
    padding: 10px 0;
    margin: 4px 0;
}

.cxinfo-box::before {
    content: "";
    display: block;
    background-image: url("../img/contact-divider.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 4px;
    width: 100%;
    margin-bottom: 5px;
}

.cxinfo-box::after {
    content: "";
    display: block;
    background-image: url("../img/contact-divider.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 4px;
    width: 100%;
    margin-top: 5px;
}

.cxinfo-box h2,
.cxinfo-box span {
    font-size: 17px;
    margin-bottom: 0;
    font-weight: 300;
}

.cxsenddonatepage .page-title {
    font-size: 26px;
    margin-bottom: 15px;
}

.cxsenddonatepage .form .icon {
    position: relative;
}

.cxsenddonatepage .form .icon i {
    position: absolute;
    top: 7px;
    right: 10px;
    color: #DE51F2;
}

.cxsenddonatepage .form .btn-gradient {
    font-size: 22px;
    font-weight: 300;
}

.modern-split-blog-card {
    display: flex;
    background: var(--cxbgmainsec);
    border-radius: var(--br-2);
    overflow: hidden;
    min-height: 260px;
    transition: all .15s ease;
}

.modern-split-blog-card:hover {
    transform: scale(1.01);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.split-card-left {
    flex: 0 0 40%;
    position: relative;
    background: #0a0a0a;
    background-image:
        radial-gradient(circle at 15% 30%, rgba(255, 255, 255, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 85% 70%, rgba(255, 255, 255, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.025) 0%, transparent 35%),
        radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.025) 0%, transparent 35%);
    background-size: 100% 100%;
    overflow: hidden;
}

.card-image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.card-image-wrapper a {
    display: block;
    width: 100%;
    height: 100%;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease, transform 0.5s ease;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
    pointer-events: none;
}

.split-card-right {
    flex: 1;
    background: var(--cxbgmainsec);
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.card-content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.reading-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 12px;
    align-self: flex-end;
}

.reading-time i {
    font-size: 12px;
}

.card-title {
    margin: 0 0 15px 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-color);
}

.card-title a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.card-title a:hover {
    color: var(--text-color-h);
}

.card-excerpt {
    color: var(--text-color-h);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 18px 0;
    flex: 1;
}

.card-author-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.author-avatar {
    width: 45px;
    height: 45px;
    /* 45px */
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

.author-details {
    flex: 1;
}

.author-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 3px;
}

.post-date {
    font-size: 13px;
    color: #6b7280;
}

.read-more-btn {
    display: inline-block;
    padding: 12px 24px;
    background: #1a1a1a;
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.read-more-btn:hover {
    background: #4f46e5;
    color: #ffffff;
    transform: translateX(5px);
}

.pagination-wrapper {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

/* Blog Sidebar Styles */
.blog-sidebar {
    padding: 0 20px;
    margin-bottom: 20px;
}

.sidebar-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-color);
    padding-bottom: 15px;
}

.blog-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog-category-item {
    margin: 0;
}

.blog-category-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    background-color: var(--cxbgmainsec);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    color: var(--text-color);
}

.blog-category-item a:hover {
    opacity: 0.9;
    transform: translateX(3px);
}

.category-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cxbgmainsec);
}

.category-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    padding: 8px;
}

.category-icon-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}

.category-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    flex: 1;
}

.popular-blogs-sidebar {
    margin-top: 30px;
}

.popular-blogs-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.popular-blog-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    max-height: 180px;
    background: #000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.popular-blog-card:hover {
    transform: scale(1.01);
}

.popular-blog-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
    min-height: 130px;
}

.popular-blog-image-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.popular-blog-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.popular-blog-card:hover .popular-blog-image {
    transform: scale(1.05);
}

.popular-blog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.85) 100%);
    pointer-events: none;
    z-index: 1;
}

.popular-blog-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px 15px 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 3;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 80%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 80%, rgba(0, 0, 0, 0) 100%);
    transition: padding 0.7s ease-out, align-items 0.7s ease-out;
}

.popular-blog-card:hover .popular-blog-footer {
    padding: 15px 15px 15px 15px;
    align-items: flex-start;
}

.popular-blog-message {
    flex: 1;
    padding-right: 15px;
}

.popular-blog-message .popular-blog-title {
    margin: 0;
}

.popular-blog-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.popular-blog-title a {
    color: #ffffff;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.popular-blog-title a:hover {
    color: rgba(255, 255, 255, 0.9);
}

.popular-blog-content {
    color: #ffffff;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.2px;
    margin-top: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.7s ease-out, max-height 0.7s ease-out, margin-top 0.7s ease-out;
}

.popular-blog-card:hover .popular-blog-content {
    opacity: 0.85;
    max-height: 60px;
    margin-top: 6px;
}

/* Responsive Styles for Popular Blogs */
@media screen and (max-width: 991px) {
    .popular-blog-card {
        max-height: 160px;
    }

    .popular-blog-image-wrapper {
        min-height: 160px;
    }

    .popular-blog-title {
        font-size: 13px;
    }
}

@media screen and (max-width: 767px) {
    .popular-blog-card {
        max-height: 150px;
    }

    .popular-blog-image-wrapper {
        min-height: 150px;
    }

    .popular-blog-footer {
        padding: 12px 12px 10px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .popular-blog-card:hover .popular-blog-footer {
        padding: 12px;
        gap: 6px;
    }

    .popular-blog-message {
        padding-right: 0;
    }

    .popular-blog-message .popular-blog-title {
        font-size: 12px;
    }
}

/* Blog List Page - Large Horizontal Cards */
.blog-list-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.blog-list-card {
    display: flex;
    background: var(--cxbgmainsec);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    min-height: 300px;
}

.blog-list-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: scale(1.01);
}

.blog-list-card-left {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--cxbgmain);
    max-width: 300px;
    min-height: 300px;
}

.blog-list-image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.blog-list-image-wrapper a {
    display: block;
    width: 100%;
    height: 100%;
}

.blog-list-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-list-card:hover .blog-list-image {
    transform: scale(1.05);
}

.blog-list-card-right {
    flex: 1;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.blog-list-content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-list-reading-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-color-h);
    margin-bottom: 12px;
    align-self: flex-end;
}

.blog-list-reading-time svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.blog-list-title {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-color);
}

.blog-list-title a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-list-title a:hover {
    color: var(--main);
}

.blog-list-excerpt {
    margin: 0 0 15px 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-color);
    flex: 1;
}

.blog-list-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 0;
}

.blog-list-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
}

.blog-list-author-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--br-1);
    overflow: hidden;
    background: var(--main);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.blog-list-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-list-author-initials {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-list-author-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.blog-list-author-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
    line-height: 1.2;
}

.blog-list-date {
    font-size: 10px;
    color: var(--text-color-h);
    line-height: 1.2;
}

.blog-list-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--main);
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.blog-list-read-more:hover {
    background: var(--main);
    opacity: 0.9;
    transform: translateX(4px);
}

.blog-list-read-more svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Responsive Styles for Blog List */
@media screen and (max-width: 991px) {
    .blog-list-card {
        flex-direction: column;
        min-height: auto;
    }

    .blog-list-card-left {
        flex: 0 0 300px;
        min-height: 300px;
    }

    .blog-list-card-right {
        padding: 25px 30px;
    }

    .blog-list-title {
        font-size: 16px;
    }
}

@media screen and (max-width: 767px) {
    .blog-list-card-left {
        flex: 0 0 250px;
        min-height: 250px;
    }

    .blog-list-card-right {
        padding: 20px 25px;
    }

    .blog-list-title {
        font-size: 14px;
    }

    .blog-list-excerpt {
        font-size: 12px;
    }

    .blog-list-reading-time {
        font-size: 10px;
    }
}

/* Responsive Styles */
@media (max-width: 991px) {
    .modern-split-blog-card {
        flex-direction: column;
        min-height: auto;
    }

    .split-card-left {
        flex: 0 0 300px;
        min-height: 300px;
    }

    .split-card-right {
        padding: 30px 25px;
    }

    .card-title {
        font-size: 22px;
    }

    .blog-sidebar {
        position: relative;
        top: 0;
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .split-card-left {
        flex: 0 0 250px;
        min-height: 250px;
    }

    .split-card-right {
        padding: 25px 20px;
    }

    .card-title {
        font-size: 20px;
    }

    .card-excerpt {
        font-size: 14px;
    }

    .reading-time {
        font-size: 12px;
    }

    .sidebar-title {
        font-size: 14px;
    }

    .category-name {
        font-size: 14px;
    }

    .category-icon {
        width: 35px;
        height: 35px;
    }
}

/* Legacy blog-grid styles (for backward compatibility) */
.blog-grid {
    margin-top: 15px;
    margin-bottom: 15px;
}

.blog-grid .blog-img {
    position: relative;
    overflow: hidden;
}

.blog-grid .blog-img .date {
    position: absolute;
    background: var(--cxbcolor);
    color: var(--text-color);
    padding: 8px 15px;
    left: 0;
    top: 10px;
    font-size: var(--fs-1);
}

.blog-grid .blog-info {
    box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
    border-radius: var(--br-0);
    background: var(--cxbgmainthi);
    padding: 20px;
    margin: -30px 20px 0;
    position: relative;
}

.blog-grid .blog-info h5 {
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 10px;
}

.blog-grid .blog-info h5 a {
    color: var(--text-color);
    font-size: 16px;
}

.blog-grid .blog-info p {
    margin: 0;
    font-size: var(--fs-1);
    color: var(--cxopcolor-2);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2em;
    max-height: 6.6em;
}

.blog-grid .blog-info .btn-bar {
    margin-top: 20px;
}

.blog-img img {
    border-radius: var(--br-0);
}

.cxpage {
    margin-top: 30px;
    margin-bottom: 30px;
}

.cxpopular-box {
    margin: 15px 0;
    border: 2px solid var(--red);
    box-shadow: 0 0 15px var(--red);
    transition: 0.2s;
}

.cxpopular-box:hover {
    transform: scale(1.015);
}

.cxpopular-box.large {
    height: 415px;
}

.cxpopular-box.mini {
    height: 200px;
}

.cxpopular-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cxfooter {
    background-color: var(--cxbgmainsec);
    margin-top: 100px;
}

.cxfeatures {
    border: 15px solid var(--cxbgmainsec);
    border-top-left-radius: 67px;
    border-top-right-radius: 67px;
    background-color: var(--cxbgmain);
    padding: 20px;
    position: relative;
    top: -50px;
}

.cxfeatures .box {
    display: flex;
    align-items: center;
    margin: 5px 0;
}

.cxfeatures .box .icon {
    height: 100px;
    width: 100px;
    min-width: 100px;
    background-color: var(--red);
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.cxfeatures .box .title {
    font-size: var(--fs-4);
    color: var(--red);
}

.cxfeatures .box .text {
    font-size: var(--fs-0);
    margin-bottom: 0;
}

.cxfooter .contact-box {
    display: flex;
    margin: 10px 0;
    align-items: center;
    font-weight: 300;
}

.cxfooter .contact-box i {
    background-color: var(--red);
    border-radius: 8px;
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    margin-right: 10px;
}

.cxfooter .contact-box span {
    text-shadow: 0 3px 6px var(--red);
    color: var(--red);
}

.cxfooter .footer-title {
    text-shadow: 0 3px 6px var(--red);
    color: var(--red);
    font-weight: 300 !important;
    font-size: 18px;
}

.cxfooter .footer-title::after {
    content: "";
    display: block;
    background-image: url("../img/footer-divider.png");
    height: 2px;
    width: auto;
    background-repeat: no-repeat;
    margin: 6px 0;
}

.cxfooter ul li a {
    color: var(--text-color);
    display: inline-block;
    margin: 2px 0;
    transition: 0.2s;
}

.cxfooter ul li a:hover {
    color: var(--red);
}

.cxcopyright img {
    height: 2px;
}

.cxsection {
    margin-bottom: 30px;
}

.cxsectionhead {
    margin-bottom: 20px;
}

.cxsectionhead .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 20px;
    font-size: 29px;
}

.cxsectionhead .title-red span {
    color: var(--red);
    text-shadow: 0 0 15px rgba(255, 42, 64, 0.48);
}

.cxsectionhead .title span {
    white-space: pre;
}

.cxsectionhead .title::before {
    content: "";
    display: inline-block;
    background-image: url("../img/divider-left.png");
    height: 3px;
    width: 100%;
    background-repeat: no-repeat;
    margin-right: 20px;
    background-position: left;
}

.cxsectionhead .title::after {
    content: "";
    display: inline-block;
    background-image: url("../img/divider-right.png");
    height: 3px;
    width: 100%;
    background-repeat: no-repeat;
    margin-left: 20px;
    background-position: right;
}

.modal-content {
    background-color: var(--cxbgmain);
    border-radius: var(--br-1-5);
}

.modal-header {
    border-bottom: 1px solid var(--cxbcolor);
}

.modal-footer {
    border-top: 1px solid var(--cxbcolor);
}

.modal-header .modal-title {
    font-weight: 600;
    font-size: 16px;
}

.modal-header .cxBtnClose {
    border-radius: var(--br-1);
    color: var(--text-color);
    background-color: var(--cxbgmainthi);
    border: none;
    outline: none;
    width: 35px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.15s;
}

.modal-header .cxBtnClose:hover {
    background-color: var(--cxbgmainfou);
    color: var(--text-color-2);
}

/* Profil paneli özelleştir (dashboard widgets) */
.cx-widget-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

/* Modal footer: iki buton yan yana */
.cx-widget-modal .modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Arama inputu: global form-search tasarımı kullanır */

.cx-widget-hint {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cx-widget-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--br-1);
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
    color: var(--text-color);
}

.cx-widget-pill.muted {
    opacity: .65;
}

.cx-widget-pill-btn {
    cursor: pointer;
    color: var(--text-color-6);
    outline: none;
    background: var(--main);
    transition: ease .15s;
    font-weight: 600;
}

.cx-widget-pill-btn:hover {
    background: var(--mainfou);
}

.cx-widget-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 992px) {
    .cx-widget-layout {
        grid-template-columns: 1fr;
    }
}

.cx-widget-panel {
    border: 1px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    background: var(--cxbgmainthi);
    padding: 14px;
}

.cx-widget-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cx-widget-panel-title {
    font-weight: 700;
    color: var(--text-color);
}

.cx-widget-panel-desc {
    font-size: 12px;
    opacity: .75;
    color: var(--text-color);
}

.cx-widget-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-height: 120px;
}

/* Modal içinde her panelin scroll'u ayrı olsun */
.cx-widget-grid-scroll {
    max-height: min(56vh, 520px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    /* scrollbar boÅŸluÄŸu */
}

@media (max-width: 576px) {
    .cx-widget-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobilde alttaki bottom tab modalın üstüne binmesin */
@media (max-width: 992px) {
    .cx-widget-modal .modal-dialog {
        margin-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
}

/* Bottom tab (z-index:9990) üstte kalmasın */
.cx-widget-modal.modal {
    z-index: 10040;
}

/* DÄ°KKAT:
   Backdrop z-index'i global yükseltmek diğer tüm modalları bozuyor.
   Bu yüzden sadece cx-widget-modal için backdrop'ı yukarı alıyoruz. */
.modal-backdrop.show {
    z-index: 1050;
    /* Bootstrap default */
}

.cx-widget-modal.modal.show~.modal-backdrop.show {
    z-index: 10030;
}

.cx-widget-card {
    cursor: pointer;
    user-select: none;
}

.cx-widget-card.disabled {
    cursor: not-allowed;
    opacity: .55;
}

.cx-widget-card-inner {
    position: relative;
}

/* Modal içi kartlar: mevcut card tasarımı ile aynı olsun */
.cx-widget-card-inner.balance {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-radius: var(--br-1-5);
    border: 2px solid var(--cxbcolor);
    background-color: var(--cxbgmainsec);
}

.cx-widget-card-inner.shortcut {
    border-radius: 12px;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid var(--cxbcolor);
    background-color: var(--cxbgmainsec);
    min-height: 120px;
}

.cx-widget-card:hover .cx-widget-card-inner.shortcut,
.cx-widget-card:hover .cx-widget-card-inner.balance {
    background-color: var(--cxbgmainthi);
    border-color: var(--main);
}

/* Seçili rengi: önceki gibi yeşil */
.cx-widget-card.selected .cx-widget-card-inner.balance,
.cx-widget-card.selected .cx-widget-card-inner.shortcut {
    border-color: rgba(34, 197, 94, .45);
    background: rgba(34, 197, 94, .08);
}

.cx-widget-select-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
}

.cx-widget-card.selected .cx-widget-select-indicator {
    border-color: rgba(34, 197, 94, .45);
    background: rgba(34, 197, 94, .15);
}

/* Drag hedefini göstermek için dashed border */
.cx-widget-card.cx-widget-drop-target .cx-widget-card-inner.balance,
.cx-widget-card.cx-widget-drop-target .cx-widget-card-inner.shortcut {
    border-style: dashed;
    border-color: var(--main);
}

.cx-widget-card.dragging,
.cx-widget-card.draggable-source--is-dragging {
    opacity: .6;
}

.draggable-mirror.cx-widget-card {
    z-index: 10050;
    pointer-events: none;
    opacity: .92;
}

.draggable-mirror.cx-widget-card .cx-widget-card-inner.balance,
.draggable-mirror.cx-widget-card .cx-widget-card-inner.shortcut {
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

.btn-block {
    width: 100%;
    display: block;
}

.btn-success {
    background-color: var(--cxcolor-6) !important;
    border-color: var(--cxcolor-6) !important;
    color: #fff !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    border-radius: var(--br-0) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cxcolor-6) 25%, transparent) !important;
}

.btn-success:hover {
    background-color: var(--cxcolor-5) !important;
    border-color: var(--cxcolor-5) !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--cxcolor-5) 32%, transparent) !important;
}

.bordercolor-1 {
    border-color: var(--main) !important;
    border: 1px solid var(--main) !important;
}

.flex-start {
    display: flex;
    align-items: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

a {
    text-decoration: none !important;
}

.table-dark td {
    background-color: transparent !important;
    font-size: var(--fs-1);
}

.box-shadow {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.text-shadow {
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.irs--big .irs-line {
    height: 3px !important;
    border: 0 !important;
    background: #DBE8FA !important;
    box-shadow: 0 !important;
}

.irs--big .irs-bar {
    height: 3px !important;
    border: 0 !important;
    background: #333 !important;
    box-shadow: 0 !important;
}

.irs--big .irs-handle {
    border: 0px !important;
    box-shadow: 0 !important;
    background: linear-gradient(to bottom right, #5F95FF, #DB46FF) !important;
    height: 18px !important;
    width: 18px !important;
    top: 26px !important;
    box-shadow: none !important;
}

.irs--big .irs-single {
    font-weight: 400 !important;
    font-family: "Wix Madefor Display", sans-serif;
    ;
}

.irs-to,
.irs-from {
    background: none !important;
    color: #1D1D1B !important;
    font-weight: 400 !important;
    font-size: var(--fs-1);
    font-family: "Wix Madefor Display", sans-serif;
    ;
    top: 50px !important;
    position: relative;
}

.irs-min,
.irs-max {
    visibility: hidden !important;
}

.col-1-5 {
    width: 20% !important;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1550px;
    }

    .cxstbw5 .col-lg-5 {
        width: 46.66666667%;
    }

    .cxstbw5 .col-md-5 {
        width: 46.66666667%;
    }
}

@media (max-width: 1400px) {
    .btn-header .title {
        position: relative;
        top: 2px;
    }

    .btn-border .title {
        font-size: 10px;
    }

    .cxmidhome .productcard-main {
        padding-top: 260px !important;
    }

    .cxmidhome .productcard-image {
        height: 250px !important;
    }

    .cxpibtn {
        font-size: var(--fs-0) !important;
    }
}


@media (max-width: 1200px) {
    .cxauth .left {
        padding: 30px !important;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .cxproduct-item .img {
        max-width: 140px;
    }

    .cxfeatures .box .icon {
        height: 75px;
        width: 75px;
        min-width: 75px;
        border-radius: 20px;
    }

    .cxfeatures .box .title {
        font-size: 17px;
    }

    .cxprofile .user-info .img-profile {
        width: 125px;
        height: 125px;
    }

    .cxprofile .list .li {
        font-size: var(--fs-1);
    }

    .cxcart-steps .step .text {
        font-size: 18px;
    }

    .cxbannerarea .cxbanneritem .cxbannerdetails .cxbannerTitle {
        font-size: 12px !important;
    }

    .cxbannerarea .cxbanneritem .cxbannerdetails .cxbannersub {
        font-size: 10px !important;
    }

    .cxsmdfunction {
        flex-direction: column;
        gap: 10px;
    }

    .cxsmdprice {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .cxsmdpicon {
        margin-bottom: 5px;
    }

    .oldprice {
        font-size: var(--fs-1);
    }

    .cxsmdbtns {
        width: 100%;
        justify-content: space-between;
        margin-top: 10px;
    }

    .cxsmdoffer,
    .cxsmdbuy {
        width: 48%;
    }

    .cxsmdbuy {
        text-align: center;
    }

    .cxsutbitems {
        overflow-x: scroll;
    }

    .cxspnavs {
        display: flex;
        overflow: hidden;
        width: 100%;
        position: relative;
    }

    .cxspnavs .nav {
        display: flex;
        padding: 10px 30px;
        flex-wrap: nowrap;
        white-space: nowrap;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .cxspnavs .nav::-webkit-scrollbar {
        display: none;
    }

    .cxfilterarea {
        position: fixed;
        left: -100%;
        top: 0;
        width: 250px;
        height: 100vh;
        transition: left 0.3s ease-in-out;
        z-index: 999999;
    }

    .cxfilterarea.open {
        left: 0;
    }

    .cxprofilesbarea {
        position: fixed;
        left: -100%;
        top: 0;
        width: 250px;
        padding-top: 30px;
        height: 100vh;
        transition: left 0.3s ease-in-out;
        z-index: 999999;
    }

    .cxprofilesbarea.open {
        left: 0;
    }

    .cxfiltertoggle {
        position: fixed;
        top: 410px;
        z-index: 111;
        background: var(--main);
        color: white;
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        border-radius: 5px;
    }

    .cxfiltertoggle.hidden {
        display: none;
    }

    .cx-lg-12 {
        flex: 0 0 auto;
        width: 100% !important;
    }

    .cxfxlmain {
        flex-direction: row;
    }

    .cxspnotifymain {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .cxpnotifyname {
        font-size: var(--fs-0) !important;
    }

    .cxpnotifydesc {
        font-size: var(--fs) !important;
    }
}

@media (max-width: 1024px) {
    .cxsutbitems {
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .cxsutbitem {
        flex: 0 0 auto;
        min-width: 150px;
        text-align: center;
    }

    .cxsutbname {
        font-size: var(--fs-2);
    }

    .cxscpscname span {
        font-size: var(--fs-0) !important;
    }
}

@media (min-width: 992px) {
    .cxpibtns {
        margin-right: 38px;
    }
}

@media (max-width: 992px) {
    .cxauth .left {
        padding: 20px;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .cxauth .img-logo {
        display: none;
    }

    .cxcart-steps .step .text {
        font-size: 15px;
    }

    .cxsenddonatepage .info {
        margin-bottom: 20px;
    }

    .cxprofile {
        margin-bottom: 20px;
    }

    .cxprofilebox {
        padding: 20px;
    }

    .cxprofile .cover img {
        height: 120px;
        min-height: inherit;
        max-height: inherit;
    }


    .table-profile td {
        font-size: 15px;
    }

    .cxprofile .cover::after,
    .cxprofile .cover img {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .cxprofile .btn-edit {
        padding: 12px 20px !important;
        font-size: 16px;
    }

    .cxprofile .list {
        justify-content: center;
        margin: 20px 0;
    }

    .cxprofile .user-info {
        display: flex;
        align-items: center;
        text-align: left;
        margin-bottom: 10px;
    }

    .cxprofile .user-info .img-profile {
        margin-right: 15px;
        height: 75px;
        width: 75px;
    }

    .cxprofile .profilehead {
        top: inherit;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .cxprofile .btn-edit {
        position: relative;
        top: inherit;
        right: inherit;
    }

    .col-1-5 {
        width: 25%;
        float: left;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .cxproduct-detay .productimg {
        margin-bottom: 10px;
    }

    .cxproduct-tabs .nav .nav-link {
        font-size: var(--fs-1);
    }

    .cxproduct-comments .charts .list .titlechart {
        font-size: 16px;
        width: 15%;
    }

    .cxproducts-header {
        display: none;
    }

    .cxproducts-comment {
        padding: 20px;
    }

    .cxproducts-comment .head-area .title,
    .cxproducts-comment .head-area .title i {
        font-size: var(--fs-4);
    }

    .cxproduct-item:not(.cxproduct-item--split) {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .cxproduct-item--split {
        flex-direction: column;
        align-items: stretch;
    }

    /* Yeni card: saÄŸ blok mobilde alta insin */
    .cxproduct-item--split .cxproduct-right {
        width: 100%;
        order: 2;
        margin-left: 0;
        padding: 0 10px 10px 10px;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }

    .cxproduct-item--split .cxproduct-right .cxproduct-field {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cxproduct-item--split .cxproduct-right .discountArea,
    .cxproduct-item--split .cxproduct-right .bonusArea,
    .cxproduct-item--split .cxproduct-right .priceArea {
        min-width: 0;
    }

    .cxproduct-item--split .cxproduct-right .cxproduct-buttons {
        width: 100%;
        margin-left: 0;
    }

    .cxproduct-item--split .cxproduct-right .cxgp-buy-group {
        width: 100%;
    }

    .cxproduct-field {
        padding: 8px 4px !important;
    }

    .cxproduct-item:not(.cxproduct-item--split) .cxproduct-field:first-child {
        width: 100% !important;
        order: 1;
        padding: 0 !important;
        margin-bottom: 10px;
    }

    .cxproduct-item:not(.cxproduct-item--split) .cxproduct-field:nth-child(2),
    .cxproduct-item:not(.cxproduct-item--split) .cxproduct-field:nth-child(3),
    .cxproduct-item:not(.cxproduct-item--split) .cxproduct-field:nth-child(4) {
        width: auto !important;
        flex: 1;
        min-width: 0;
        order: 2;
        padding: 8px 4px !important;
        font-size: 13px;
    }

    .cxproduct-item:not(.cxproduct-item--split) .cxproduct-field:nth-child(5) {
        width: auto !important;
        flex: 1;
        min-width: 0;
        order: 2;
        padding: 8px 4px !important;
        font-size: 13px;
    }

    .cxproduct-item:not(.cxproduct-item--split) .cxproduct-field:last-child {
        width: 100% !important;
        order: 3;
        padding: 10px !important;
    }

    .cxproduct-buttons {
        gap: 8px;
        flex-direction: row;
        width: 100%;
    }

    .cxproduct-buttons .buy-now,
    .cxproduct-buttons .buy-now-extra {
        min-width: 120px;
        flex: 1;
        font-size: 14px;
    }


    .cxproduct-cart-icon i {
        font-size: 16px;
    }
}

@media (max-width: 574px) {
    .cxproduct-item:not(.cxproduct-item--split) {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .cxproduct-item--split {
        flex-direction: column;
        align-items: stretch;
    }

    /* Yeni card: çok küçük ekranda sağ blok dikey */
    .cxproduct-item--split .cxproduct-right {
        gap: 8px;
        flex-direction: column;
        align-items: stretch;
    }

    .cxproduct-item--split .cxproduct-right .cxproduct-field {
        flex: 1 1 100%;
    }

    /* Mobil: quantity ve butonlar alt alta, tam geniÅŸlik */
    .cxproduct-item--split .cxproduct-right .cxproduct-field-qty,
    .cxproduct-item--split .cxproduct-right .cxproduct-field-actions {
        width: 100%;
        flex: 0 0 100%;
    }

    .cxproduct-item--split .cxproduct-right .cxproduct-field-qty {
        order: 10;
    }

    .cxproduct-item--split .cxproduct-right .cxproduct-field-actions {
        order: 20;
    }

    .cxproduct-item--split .cxproduct-right .cxproduct-field-qty .quanityBg,
    .cxproduct-item--split .cxproduct-right .cxproduct-field-qty .qty-stepper.number-input {
        width: 100%;
    }

    .cxproduct-item--split .cxproduct-right .cxproduct-field-actions .cxproduct-buttons {
        width: 100%;
    }

    .cxproduct-item--split .cxproduct-right .cxgp-buy-group {
        height: 45px;
    }

    .cxproduct-item:not(.cxproduct-item--split) .cxproduct-field:first-child {
        width: 100% !important;
        order: 1;
        padding: 0 !important;
        margin-bottom: 10px;
    }

    /* Ä°ndirim, Bonus, Tutar - 3 tanesi yan yana */
    .cxproduct-item:not(.cxproduct-item--split) .cxproduct-field:nth-child(2),
    .cxproduct-item:not(.cxproduct-item--split) .cxproduct-field:nth-child(3),
    .cxproduct-item:not(.cxproduct-item--split) .cxproduct-field:nth-child(4) {
        width: auto !important;
        flex: 1;
        min-width: 0;
        order: 2;
        padding: 8px 4px !important;
        font-size: 13px;
        margin-top: 0 !important;
    }

    /* Quantity - Tam genişlik, butonların üstünde */
    .cxproduct-item:not(.cxproduct-item--split) .cxproduct-field:nth-child(5) {
        width: 100% !important;
        order: 3 !important;
        padding: 8px 4px !important;
        margin-top: 8px !important;
        margin-bottom: 0 !important;
        flex: none !important;
        min-width: auto !important;
    }

    .cxproduct-item:not(.cxproduct-item--split) .cxproduct-field:nth-child(5) .quanityBg {
        width: 100% !important;
    }

    .cxproduct-item:not(.cxproduct-item--split) .cxproduct-field:nth-child(5) .qty-stepper.number-input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .cxproduct-item:not(.cxproduct-item--split) .cxproduct-field:nth-child(5) .qty-stepper__field {
        flex: 1 1 auto;
        max-width: none !important;
        width: auto !important;
    }

    /* Butonlar - En altta tam geniÅŸlik */
    .cxproduct-item:not(.cxproduct-item--split) .cxproduct-field:last-child {
        width: 100% !important;
        order: 4;
        padding: 10px !important;
    }

    .cxproduct-buttons {
        gap: 8px;
        flex-direction: row;
        width: 100%;
    }

    .cxproduct-buttons .buy-now,
    .cxproduct-buttons .buy-now-extra {
        min-width: 100px;
        flex: 1;
        font-size: 13px;
    }

    .btnAddCart {

        flex-shrink: 0;
    }

    .cxproduct-cart-icon i {
        font-size: 16px;
    }

    .cxproduct-buttons .buy-now,
    .cxproduct-buttons .buy-now-extra {
        min-width: 100px;
        font-size: 13px;
    }

    .cxproduct-cart-icon i {
        font-size: 16px;
    }

    .col-1-5 {
        width: 50% !important;
    }

    .cxheader .buttons {
        justify-content: center;
    }


    .cxheader .form-search {
        margin: 20px 0;
    }

    .cxheader .img-logo {
        display: block;
        margin: auto;
    }

    .cxheader {
        padding: 10px 0;
    }

    .cxheaderMobileBarWrap {
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
    }

    .cxpopular-box.large,
    .cxpopular-box.small {
        height: 180px;
    }

    .cxheader .form-search .formControl {
        height: 45px;
        /* 50px */
    }

    .cxheader .form-search .button {
        height: 40px;
        width: 40px;
        line-height: 52px;
    }

    .navcartarea {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ccampaign {
        padding: 0 20px 20px;
    }

    .cxsfxlcheck {
        margin-top: 5px;
    }

    .cxsfxlselect {
        width: 100%;
    }

}


@media (max-width: 768px) {
    .caticon {
        width: 25px;
        height: 25px;
        top: 5px;
        right: 5px;
    }

    .cxp20px768 {
        padding: 20px;
    }

    .cxalignstart768 {
        align-items: start !important;
    }

    .cxaligncenter768 {
        align-items: center !important;
    }

    .cxprlb20px768 {
        padding: 0 20px 20px 20px;
    }

    .cxcmdtop {
        flex-direction: column;
    }

    .cxtopbar .col-lg-7 {
        padding: 0;
    }

    .cxtopbar .buttons {
        justify-content: center;
    }

    .cxmodal-login .body {
        padding: 0;
    }

    .cxindirim .box .content .title,
    .cxyayinci-banner .box .content .title {
        font-size: 28px;
    }

    .cxindirim .box .content {
        padding: 50px 0;
    }

    .cxsectionhead .title {
        justify-content: center;
    }

    .cxsectionhead .title::before,
    .cxsectionhead .title::after {
        display: none;
    }

    .cxcopyright .flex-between {
        display: block;
    }

    .cxcopyright span {
        display: block;
        text-align: center;
        margin: 5px 0;
        font-size: var(--fs-1);
    }

    .cxcart-list .head {
        display: none;
    }

    .cxcart-item {
        flex-direction: column;
        padding-right: 0;
    }

    .cxcart-item .td {
        width: 100% !important;
    }

    .cxcart-item .td:first-child {
        text-align: left !important;
    }

    .cxcart-steps .step .text {
        font-size: 10px;
    }

    .cxcart-steps .step .circle {
        height: 45px;
        /* 45px */
        width: 45px;
        line-height: 45px;
        /* 45px */
        font-size: var(--fs-4);
        outline-width: 2px;
    }

    .cxcart-steps .step .bar {
        top: 22px;
    }


    .col-1-5 {
        width: 50%;
        float: left;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .cxproduct .img-product {
        height: 90px;
    }

    .cxtitle-gradient .nav .nav-link {
        font-size: 13px;
        padding: 20px;
    }

    .kural .right {
        font-size: var(--fs-1);
    }

    .cxbenzer-urunler .urun.flex-between {
        display: block;
    }

    .cxproduct-tabs .nav {
        padding: 5px;
    }

    .cxproduct-tabs .nav .nav-link {
        font-size: 13px;
    }

    .cxproduct-comments .charts .list .progress {
        margin-left: 20px;
    }

    .cxproduct-comments .charts .list .titlechart {
        font-size: var(--fs-1);
        width: 23%;
    }

    .write-comment.flex-start {
        display: block;
    }

    .write-comment .profile {
        width: 60px;
        height: 60px;
        min-width: 60px;
        margin-bottom: 10px;
    }

    .write-comment form {
        width: 100%;
    }

    .cxheader .buttons .btn-header .title {
        color: #fff !important;
        font-weight: 500;
    }


    .btn-border {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
    }

    .cxproduct .buttons {
        padding: 10px;
    }

    .btn-header .material-icons {
        height: 45px;
        /* 45px */
        min-width: 45px;
        line-height: 40px;
    }

    .btn-header img {
        height: 45px !important;
        min-width: 45px !important;
        width: 45px !important;
    }

    .btn-header.pink .name {
        font-size: 18px;
    }

    .btn-header {
        height: 55px;
    }

    .cxfeatures {
        top: -30px;
    }

    .search-list .product .productname {
        font-size: var(--fs-1);
    }

    .search-list .product .price {
        font-size: 16px;
    }

    .search-list .product .img {
        margin-right: 10px;
    }

    .col.footertopsingle {
        margin-bottom: 15px;
    }

    .cxbehind {
        flex-direction: column;
        gap: 15px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .cxbehind .cxshowcase-container {
        margin-right: 0;
        align-items: center;
    }

    .cxbehind .form-search {
        max-width: 100%;
        margin-left: 0;
        width: 100%;
    }

    .cxstreamer img {
        width: 100%;
        height: 180px;
    }

    .cxhomeslider {
        height: 310px !important;
    }

    .cxhomeslider .cxhomeslider-slide img {
        object-fit: contain;
    }

    .cxhomeslider .swiper-pagination-bullet {
        width: 15px;
        height: 5px;
    }

    .cxmidhome .productcard-main {
        padding-top: 210px !important;
    }

    .cxmidhome .productcard-image {
        height: 200px !important;
    }

    .cxssellerinfo {
        padding: 10px;
    }

    .cxsstm {
        text-align: center;
    }

    .cxssimg img {
        max-width: 100%;
    }

    .cxssblinks a {
        width: 100%;
    }

    .cxssmiddle {
        text-align: center;
    }

    .col-12 {
        width: 100%;
    }

    .cxsimg {
        margin-bottom: 1rem;
    }

    .cxsmidbg {
        text-align: center;
    }

    .cxsssellerinfo {
        text-align: center;
        margin-bottom: 1rem;
    }

    .cxssblinks a {
        margin-bottom: 0.5rem;
    }

    .cxsmbcmain {
        flex-direction: column;
        gap: 1rem;
    }

    .cxsmbcrl {
        width: 100%;
        text-align: start;
    }

    .cxsmbcleft,
    .cxsmbcright {
        flex-direction: column;
        align-items: center;
        text-align: start;
    }

    .cxsmbcimg img,
    .cxsmbcrlimg img {
        max-width: 100px;
        max-height: 100px;
        width: auto;
        height: auto;
    }

    .cxsmbcrlimg {
        padding-left: 0 !important;
    }

    .cxsmbcright {
        margin-top: 10px;
    }

    .cxsslcbdate {
        display: block;
        margin-top: 5px;
    }

    .cxsmbcrl+.cxsmbcrl::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background-color: var(--cxbcolor);
        top: 100%;
        transform: translateY(-50%);
    }

    .cxsmbcrl {
        width: 100%;
    }

    .cxspitop {
        display: flex;
        flex-direction: column !important;
        padding: 6px 10px;
    }

    .cxspimg {
        transform: translateY(-18px);
        margin-bottom: -12px;
    }

    .cxpibtns {
        flex: 1;
    }

    .cxspActionCol {
        margin-top: 6px !important;
        transform: none;
    }

    .cxfxlmain {
        font-size: var(--fs-1);
    }

    .cxsfright {
        gap: 20px !important;
    }

    .cxssbadge img {
        width: 16px !important;
        height: 16px !important;
    }

    .cxsaprodname .d-flex {
        flex-direction: column;
        gap: 10px;
    }

    .cxsaprodname .d-flex .gap-2 {
        flex-direction: column;
    }

    .cxsaprodname .formControl,
    .cxsaprodname .btnmain {
        width: 100%;
    }

    .cxitsk-item {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .cxscpbottom .row {
        margin: -5px;
    }

    .cxscpbottom .col-4 {
        padding: 5px;
    }

    .cxscpdetail {
        padding: 10px;
    }

    .cxsapcnextprevious {
        flex-direction: column;
        gap: 10px;
    }

    .cxsapcnextprevious button {
        width: 100%;
    }
}


@media (max-width: 574px) {
    .cxpopular-box.mini {
        height: 150px;
    }

    .cxpopular-box.large {
        height: 150px;
        margin: 0;
    }

    .price-box {
        font-size: 18px;
    }

    .oldprice2 {
        font-size: 16px;
    }

    .cxfxlmain {
        font-size: var(--fs-0);
    }

    .cxscpbprice {
        font-size: var(--fs-0);
    }

    .cxscpsname {
        font-size: var(--fs-0) !important;
    }

    .cxscpsdisc {
        font-size: var(--fs-0) !important;
    }

    .cxscpdname a {
        font-size: var(--fs-0) !important;
    }

    .cxsaptitle {
        flex-direction: column;
        align-items: flex-start;
    }

    .cxsaptitle button {
        width: 100%;
    }
}

.navcarticon {
    color: var(--text-color);
    display: flex;
    align-items: center;
    transition: ease .15s;
    justify-content: center;
}

.navcarticon:hover {
    color: var(--main);
}

.twcolor {
    color: var(--text-color) !important;
}

.dflextopl {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.mbordertop {
    font-size: var(--fs-0);
    position: relative;
    top: 2px;
}

.customtopbtn {
    color: var(--main) !important;
}

.headerCartBtn {
    position: relative;
    top: 0;
    color: var(--text-color);
    transition: all .15s;
    font-size: var(--fs-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--br-1);
    background: var(--cxbgmainfou);
    border: 2px solid var(--cxbcolor);
    margin-right: 3px;
}

.headerCartBtn:hover {
    color: var(--text-color);
    background: var(--cxbgmainthi);
    border-color: var(--cxbcolor-3);
}

.headerCartBtn i {
    font-size: var(--fs-1);
}


.footerarea {
    padding: 30px 0;
    padding-top: 100px;
    background-color: var(--cxbgmainsec);
    position: relative;
}

.elementor-shape {
    direction: ltr;
    left: 0;
    line-height: 0;
    overflow: hidden;
    position: absolute;
    width: 100%;
}

.elementor-shape-top {
    top: -1px;
    height: 80px;
}

.elementor-shape svg {
    display: block;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    width: calc(100% + 1.3px);
    height: 80px;
}

.elementor-shape .elementor-shape-fill {
    fill: var(--cxbgmain);
    transform-origin: center;
}

.footer-logo-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(960px, 100%);
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 2;
}

.footer-notch-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.footer-logo-img {
    max-height: 44px;
    width: auto;
}

.footerNotchSocials {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.footerSocialBtn {
    width: 36px;
    height: 36px;
    border-radius: var(--br-1-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cxbgmainfou);
    border: 2px solid var(--cxbcolor);
    color: var(--text-color) !important;
    font-size: 14px;
    transition: all .15s ease;
}

.footerSocialBtn:hover {
    background: var(--cxbgmainthi);
    border-color: var(--main);
    color: var(--main) !important;
}

.footerTitle {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-color-7);
    text-transform: uppercase;
}

.footerliarea a {
    font-size: 13px;
    color: var(--text-color) !important;
    transition: ease .15s;
    line-height: 2;
}

.footerliarea a:hover {
    color: var(--main) !important;
    padding-left: 3px;
    transition: ease .15s;
}

.footerTb {
    border: 1px solid var(--cxbcolor);
    margin: 5px 0;
}

.bordermid {
    border: 1px solid var(--cxbcolor) !important;
}

.footertop {
    background-color: var(--cxbgmainthi);
    padding: 35px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footertopicon {
    width: 55px;
    height: 55px;
    position: relative;
    border-radius: 50%;
    background: var(--cxbgmainfiv-thi);
    box-shadow: 0 0 0 6px var(--cxbgmainfiv);
    font-size: 24px;
    color: var(--main);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footertoptext {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
}

.footertopsingle {
    display: flex;
    gap: 16px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.footerMain {
    padding-top: 8px;
}

.footerLinksRow {
    margin-bottom: 2rem;
}

.footerBrandCol {
    margin-bottom: .5rem;
}

.footerColTitle {
    display: block;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 10px 0;
}

.footerBrandCol .footerliarea,
.footerPopularList {
    margin-top: 0;
}

.footerPopularGrid {
    margin-top: 0 !important;
    --bs-gutter-y: 0;
}

.footerPopularGrid>[class*="col-"] {
    padding-top: 0;
    margin-top: 0;
}

.footerPopularList li a {
    line-height: 2;
}

.footerMetaBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.25rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--cxbcolor);
    border-bottom: 1px solid var(--cxbcolor);
    margin-bottom: 1.25rem;
}

.footerBadges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.footerBadgeLink {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    opacity: .95;
    transition: opacity .15s ease;
    border: 2px solid var(--cxbcolor);
    padding: 8px;
    border-radius: var(--br-1-5);
}

.footerBadgeLink:hover {
    opacity: 1;
}

.footerBadgeImg {
    height: 32px;
    width: auto;
    display: block;
    border-radius: 4px;
}

.footerPayments {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    gap: 12px;
}

.footerPaymentImg {
    max-height: 28px;
    width: auto;
    opacity: .9;
}

.footerBottomBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 5px 0 0 0;
}

.footerCopy {
    margin: 0;
}

.footerCopy small {
    opacity: .75;
}

.footerLegalNav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.footerLegalNav a {
    font-size: 12px;
    color: var(--text-color) !important;
    opacity: .8;
    transition: color .15s ease, opacity .15s ease;
}

.footerLegalNav a:hover {
    color: var(--main) !important;
    opacity: 1;
}

@media (max-width: 767.98px) {
    .footer-logo-notch {
        flex-direction: column;
        height: auto;
        padding: 12px 16px 8px;
        gap: 10px;
        position: relative;
    }

    .footerNotchSocials {
        width: 100%;
        justify-content: center;
    }

    .footerarea {
        padding-top: 120px;
    }

    .footerBottomBar {
        flex-direction: column;
        align-items: flex-start;
    }

    .footerLegalNav {
        justify-content: flex-start;
    }
}

.footer-top-second {
    background-color: var(--cxbgmainsec);
    padding: 35px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    clear: both;
}

.footer-top-single-second {
    display: flex;
    gap: 15px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
}

.footer-top-icon-second {
    width: 45px;
    /* 50px */
    height: 45px;
    /* 50px */
    min-width: 45px;
    /* 50px */
    position: relative;
    border-radius: 50%;
    background: var(--cxbgmainfiv-thi);
    box-shadow: 0 0 0 6px var(--cxbgmainfiv);
    font-size: 24px;
    color: var(--main);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.footer-top-text-second {
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    line-height: 1.5;
}

.footer-top-text-second strong {
    color: var(--main);
    font-weight: 600;
}

.footer-top-copyright {
    text-align: center;
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid var(--cxbcolor);
}

.footer-top-copyright p {
    margin: 0;
    color: var(--text-color);
    font-size: 13px;
}

.footer-top-copyright strong {
    color: var(--main);
    font-weight: 600;
}

@media (max-width: 992px) {
    .footer-top-single-second {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .footer-top-text-second {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .footer-top-second {
        padding: 30px 0;
    }

    .footer-top-icon-second {
        width: 60px;
        height: 60px;
        min-width: 60px;
        font-size: 28px;
    }
}

.commenthead {
    margin-bottom: 10px;
    background-color: var(--cxbmainfo);
    padding: 10px 20px;
    border-top-right-radius: var(--br-0);
    border-top-left-radius: var(--br-0);
}

span.name {
    font-size: var(--fs-1);
    font-weight: 600;
}

.blogdesc {
    padding: 20px;
    font-size: var(--fs-1);
    font-weight: 400;
}


.cxprofileaddbtn {
    background-color: var(--mainsec) !important;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 16px auto 0;
    padding: 0;
    list-style: none;
}

.pagination .page-item {
    margin: 0 !important;
}

.pagination .page-item:not(:first-child) .page-link {
    margin-left: 0 !important;
}

.page-link {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--br-1) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color) !important;
    font-weight: 600;
    text-decoration: none;
    background-color: var(--cxbgmainsec) !important;
    border: 1px solid var(--cxbcolor) !important;
    transition: all .2s ease;
}

.page-link:hover {
    background-color: var(--cxbgmainfiv-thi) !important;
    border-color: var(--cxbcolor) !important;
    color: var(--text-color) !important;
}

.page-link:focus,
.page-link:focus-visible {
    outline: none;
}

.page-item.active .page-link {
    z-index: 3;
    color: var(--text-color-6) !important;
    background: var(--mainsec) !important;
    border-color: var(--mainsec) !important;
}

.page-item.disabled .page-link {
    color: rgba(255, 255, 255, 0.45) !important;
    pointer-events: none;
    background-color: var(--cxbgmainsec) !important;
    border-color: var(--cxbcolor) !important;
    box-shadow: none;
    opacity: .7;
}

@media (max-width: 575.98px) {
    .pagination {
        gap: 5px;
    }

    .page-link {
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 0 !important;
        font-size: 12px;
    }
}


.locationcat {
    margin-top: 10px;
}

.locationcat a {
    color: var(--cxopcolor-2);
    transition: ease .15s;
}

.locationcat a:hover {
    color: var(--mainsec);
}

.loccolor {
    color: var(--main);
    cursor: context-menu;
    margin-left: 5px;
}

.productcatare {
    background-color: var(--cxbgmainsec);
}

.ccampaign {
    padding: 0 20px 20px;
}

.ccampaign img {
    width: 80%;
}

.cxautharea {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: calc(100vh - 105px);
    padding: 20px 0;
}

.cxauthwrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.cxauth-card {
    background: var(--cxbgmainthi);
    padding: 30px;
    border-radius: var(--br-2);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    overflow: hidden;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}

.cxauth-form-card {
    margin-top: 0;
}

.cxauth-title {
    font-size: 24px;
    font-weight: 600;
    padding: 0 0 20px 0;
    text-align: center;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.cxauth-description {
    color: var(--cxcolor-19);
    background-color: var(--cxopcolor-19);
    border-radius: var(--br-1-5);
    padding: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cxauth-description i {
    color: var(--cxcolor-19);
    font-size: 20px;
    margin-right: 10px;
}

.cxauth-description span {
    font-size: 12px;
    line-height: 1.6;
}

.cxauth-btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 12px;
    border: none;
    cursor: pointer;
}

.cxauth-btn-social svg {
    flex-shrink: 0;
}

.cxauth-btn-google {
    background: #f5f5f5;
    color: #000000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.cxauth-btn-google:hover {
    background: var(--text-color);
    color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.cxauth-btn-facebook {
    background: #1877f2;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(24, 119, 242, 0.3);
}

.cxauth-btn-facebook:hover {
    background: #166fe5;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(24, 119, 242, 0.3);
}

.cxauth-btn-apple {
    background: #000000;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.cxauth-btn-apple:hover {
    background: #1a1a1a;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.cxauth-btn-steam {
    background: #1b2838;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(27, 40, 56, 0.4);
}

.cxauth-btn-steam:hover {
    background: #2a3a4f;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(27, 40, 56, 0.3);
}

.cxauth-btn-twitch {
    background: #9146ff;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(145, 70, 255, 0.3);
}

.cxauth-btn-twitch:hover {
    background: #7c3aed;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(145, 70, 255, 0.3);
}

.cxauth-btn-discord {
    background: #5865f2;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(88, 101, 242, 0.3);
}

.cxauth-btn-discord:hover {
    background: #4752c4;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(88, 101, 242, 0.3);
}

.cxauth-btn-social img {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.cxauth-legal-text {
    margin-top: 20px;
    border-radius: 8px;
    font-size: 9px;
    line-height: 1.6;
    text-align: center;
    color: #a0a0a8;
}

.cxauth-legal-text p {
    margin: 0 0 10px 0;
}

.cxauth-legal-text p:last-child {
    margin-bottom: 0;
}

.cxauth-legal-text strong {
    color: #c0c0c8;
    font-weight: 600;
}

.cxauth-legal-text a {
    color: #a0a0a8;
    text-decoration: underline;
    transition: color 0.2s;
}

.cxauth-legal-text a:hover {
    color: #ffffff;
}

.cxauth-separator {
    text-align: center;
    margin: 20px 0;
    position: relative;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.cxauth-separator::before,
.cxauth-separator::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 40px);
    height: 1px;
    background: #2d2d35;
}

.cxauth-separator::before {
    left: 0;
}

.cxauth-separator::after {
    right: 0;
}

.cxauth-separator span {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding: 0 15px;
    background: transparent;
}

.form-options {
    margin-bottom: 20px;
}

.cxauth-formarea .cxcustcb .cbx {
    color: var(--text-color);
    margin: 0;
}

.cxauth-formarea .cxcustcb .cbx span:last-child {
    padding-top: 1px;
}


.cxauth-formarea .cxcustcb .cbx span:first-child {
    border-color: #5a5a6a;
}

.cxauth-formarea .cxcustcb .cbx:hover span:first-child {
    border-color: var(--mainsec);
}

.cxauth-formarea .cxcustcb .inp-cbx:checked+.cbx span:first-child {
    background: var(--mainsec);
    border-color: var(--mainsec);
}

.reginfop .cxcustcb {
    margin-bottom: 0;
}

.reginfop .cxcustcb .cbx {
    margin: 0;
    display: flex;
    align-items: flex-start;
}

.reginfop .cxcustcb .cbx span:first-child {
    flex-shrink: 0;
    margin-top: 2px;
}

.reginfop .cxcustcb .cbx span:last-child {
    flex: 1;
    padding-left: 8px;
    line-height: 1.5;
}

.cxauth-register-link {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--text-color);
}

.cxauth-register-link a {
    color: var(--text-color);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.cxauth-register-link a:hover {
    color: var(--main);
    text-decoration: underline;
}

.loginbgarea {
    background: #1a1a1f;
    border: 1px solid #2d2d35;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    max-width: 500px;
    margin: 0 auto;
}

.lgnh1 {
    font-size: 24px;
    font-weight: 600;
    padding: 30px 30px 20px;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.lgnformarea {
    padding: 16px;
}

@media (max-width: 768px) {
    .cxauth-card {
        max-width: 100%;
        margin: 0 15px;
    }

    .cxauth-title {
        font-size: 20px;
    }

    .cxauth-separator {
        margin: 15px 15px;
    }

    .cxauth-description {
        font-size: 10px;
    }
}

.lgnpageLogo {
    padding-bottom: 20px;
    padding-top: 50px;
}

.lgnpageLogo img {
    max-width: 100%;
    width: 300px;
}

.regbgarea {
    background: var(--cxbgmainsec);
    border: 1px solid var(--cxbcolor);
    padding: 1rem;
    border-radius: var(--br-0);
}

.regh1 {
    font-size: var(--fs-4);
    padding: 10px 20px;
}

.reginfop span {
    font-size: var(--fs-0);
}

.reginfop span a {
    color: var(--text-color);
    transition: all .15s;
}

.reginfop span a:hover {
    color: var(--text-color-h);
    transition: all .15s;
}

.regformarea {
    padding: 16px;
}

.regpageLogo {
    padding-bottom: 20px;
    padding-top: 20px;
}

.regpageLogo img {
    max-width: 100%;
    width: 180px;
}

.blogcatli {
    padding-left: 0;
    list-style: none;
    display: flex;
    padding: 5px 0;
}

.blogcatli a {
    padding-right: 20px;
    color: var(--text-color);
    transition: ease .15s;
    font-size: var(--fs-1);
    font-weight: 500;
}

.blogcatli a:hover {
    color: var(--cxopcolor-2);
}

.blogtitle {
    padding: 30px 10px 0 20px;
    font-size: 18px;
}

.cxpagealert {
    background-color: var(--cxopcolor-3);
    color: var(--main);
    padding: 20px;
    font-size: var(--fs-0);
    border-radius: var(--br-0);
    line-height: 1.5;
    margin-top: 30px;
}

.alrettext {
    align-items: center;
    display: grid;
}

/* Payment: sidebar method card list */
.paySidebar {
    padding: 16px;
    border-radius: 14px;
    background-color: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.paySidebar-title {
    font-size: var(--fs-1);
    font-weight: 600;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--cxbcolor);
    padding-bottom: 10px;
}

.paySidebar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.paySidebar-item {
    width: 100%;
}

.paySidebar-btn {
    width: 100%;
    border: 0;
    padding: 14px 14px;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    text-align: start;
    background-color: var(--cxbgmainfou);
    color: var(--text-color);
    border: 2px solid var(--cxbcolor);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.paySidebar-btn:hover {
    background-color: transparent;
    border: 2px solid var(--cxbcolor-3);
    color: var(--text-color-7);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.paySidebar-btn.active {
    background-color: transparent;
    border: 2px dashed var(--mainfif-sec);
    color: var(--text-color-7);
}

.paySidebar-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--br-1);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.paySidebar-logo img {
    max-width: 34px;
    max-height: 34px;
    width: auto;
    height: auto;
    display: block;
}

.paySidebar-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.paySidebar-name {
    font-size: var(--fs-1);
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.paySidebar-commission {
    font-size: var(--fs-0);
    line-height: 1.15;
    color: var(--cxcolor-41);
}

.paySidebar-badge {
    font-size: 12px;
    line-height: 1;
    padding: 8px 10px;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
    background-color: rgba(0, 0, 0, 0.08);
    color: inherit;
}

.paySidebar-badge--default {}

@media (max-width: 991.98px) {
    .paySidebar {
        margin-bottom: 12px;
    }
}

/* (removed) cxpaymrname / cxpaymrinp - payment redesigned */


#notfound {
    position: relative;
    height: 100vh;
}

#notfound .notfound {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#notfound .notfound-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

#notfound .notfound-bg>div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--cxbmainfo);
}

#notfound .notfound-bg>div:nth-child(1) {
    left: 20%;
}

#notfound .notfound-bg>div:nth-child(2) {
    left: 40%
}

#notfound .notfound-bg>div:nth-child(3) {
    left: 60%
}

#notfound .notfound-bg>div:nth-child(4) {
    left: 80%
}

#notfound .notfound-bg>div:after {
    content: '';
    position: absolute;
    top: 0px;
    left: -0.5px;
    -webkit-transform: translateY(-160px);
    -ms-transform: translateY(-160px);
    transform: translateY(-160px);
    height: 160px;
    width: 2px;
    background-color: hsl(43, 80%, 56%);
}

@-webkit-keyframes drop {
    90% {
        height: 20px;
    }

    100% {
        height: 160px;
        -webkit-transform: translateY(calc(100vh + 160px));
        transform: translateY(calc(100vh + 160px));
    }
}

@keyframes drop {
    90% {
        height: 20px;
    }

    100% {
        height: 160px;
        -webkit-transform: translateY(calc(100vh + 160px));
        transform: translateY(calc(100vh + 160px));
    }
}

#notfound .notfound-bg>div:nth-child(1):after {
    -webkit-animation: drop 3s infinite linear;
    animation: drop 3s infinite linear;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

#notfound .notfound-bg>div:nth-child(2):after {
    -webkit-animation: drop 2s infinite linear;
    animation: drop 2s infinite linear;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

#notfound .notfound-bg>div:nth-child(3):after {
    -webkit-animation: drop 3s infinite linear;
    animation: drop 3s infinite linear;
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

#notfound .notfound-bg>div:nth-child(4):after {
    -webkit-animation: drop 2s infinite linear;
    animation: drop 2s infinite linear;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

.notfound {
    max-width: 520px;
    width: 100%;
    text-align: center;
}

.notfound .notfound-404 {
    height: 210px;
    line-height: 210px;
}

.notfound .notfound-404 h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 188px;
    font-weight: 700;
    margin: 0px;
    text-shadow: 4px 4px 0px hsl(43, 80%, 56%);
}

.notfound h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 42px;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1.6px;
}

.notfound p {
    font-family: 'Lato', sans-serif;
    color: var(--text-color);
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 25px;
}

.notfound a {
    font-family: 'Lato', sans-serif;
    padding: 10px 30px;
    display: inline-block;
    color: var(--text-color);
    font-weight: 400;
    text-transform: uppercase;
    -webkit-box-shadow: 0px 0px 0px 2px var(--text-color), 2px 2px 0px 2px hsl(43, 80%, 56%);
    box-shadow: 0px 0px 0px 2px var(--text-color), 2px 2px 0px 2px hsl(43, 80%, 56%);
    text-decoration: none;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
}

.notfound a:hover {
    background-color: hsl(43, 80%, 56%);
    -webkit-box-shadow: 0px 0px 0px 0px var(--text-color), 0px 0px 0px 2px hsl(43, 80%, 56%);
    box-shadow: 0px 0px 0px 0px var(--text-color), 0px 0px 0px 2px hsl(43, 80%, 56%);
}

.notfound-social {
    margin-top: 35px;
}

.notfound-social>a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0px;
    margin: 0px 5px;
}

.notfound-social>a:hover {
    background-color: hsl(43, 80%, 56%);
    -webkit-box-shadow: 0px 0px 0px 0px var(--text-color), 0px 0px 0px 2px hsl(43, 80%, 56%);
    box-shadow: 0px 0px 0px 0px var(--text-color), 0px 0px 0px 2px hsl(43, 80%, 56%);
}

@media (max-width: 480px) {
    .caticon {
        width: 20px;
        height: 20px;
        top: 5px;
        right: 5px;
    }

    .notfound .notfound-404 {
        height: 122px;
        line-height: 122px;
    }

    .notfound .notfound-404 h1 {
        font-size: 122px;
    }

    .notfound h2 {
        font-size: 26px;
    }

    .cxhomeslider {
        height: 210px !important;
    }

    .cxhomeslider .cxhomeslider-slide img {
        object-fit: contain;
    }


    .cxmidhome .productcard-main {
        padding-top: 210px !important;
    }

    .cxmidhome .productcard-image {
        height: 200px !important;
    }

    .cxgame-reviews-comment-date {
        margin-left: 0;
    }
}

@media (max-width: 340px) {
    .cxproduct-item .productname {
        font-size: 12px;
    }

    .cxproduct-item .info small {
        font-size: 10px;
    }
}

.cxbehind {
    margin: 30px 0 20px 0;
    border-radius: var(--br-0);
    font-size: var(--fs-4);
    font-weight: 600;
    align-items: center;
    display: flex;
    gap: 20px;
}

.cxbehindGame {
    margin: 0;
}

.cxbehind .title {
    margin-top: 5px;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
}

.cxbehind .form-search {
    flex: 1;
    max-width: 300px;
    margin-left: auto;
}

.cxbehindmid {
    margin: 30px 0 0 0;
    border-radius: var(--br-0);
    font-size: var(--fs-4);
    font-weight: 600;
    align-items: center;
    display: flex;
}

.cxshowcase-container {
    margin-right: auto;
    display: flex;
    flex-direction: column;
}

.cxshowcase-subtext {
    opacity: 0.8;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 600;
    display: flex;
    text-transform: uppercase;
}

.cxshowcase-subtext:where(ul) {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    gap: .35rem;
}

.cxshowcase-subtext:where(ul) li {
    display: inline-flex;
}

.cxshowcase-subtext a {
    margin-right: 5px;
}

.cxmidbtn {
    float: right;
    font-size: var(--fs-1);
    display: flex;
    align-items: center;
    background: var(--cxopcolor-3);
    color: var(--mainsec);
    padding: 5px 10px;
    border-radius: var(--br-0);
    transition: all .15s ease;
    cursor: pointer;
}

.cxmidbtn:hover {
    transform: scale(1.02);
    color: var(--mainsec);
}

.cxmidpopcat {
    margin-top: 30px;
}

.cxmidpoptitle {
    text-align: center;
    margin-top: 10px;
    color: var(--text-color);
    font-weight: 600;
}

.pdetail {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdetail2 {
    font-size: 16px !important;
}


.cxmstarea img {
    max-width: 100%;
    height: 100px;
    object-fit: cover;
    width: 100px;
    border-radius: var(--br-0);
}

.cxmstarea {
    display: flex;
    gap: 5px;
    align-items: center;
}

.cxmstarea .title {
    color: var(--text-color);
    font-weight: 500;
    font-size: 16px;
    margin: 0 10px;
}

.titles {
    color: var(--text-color);
    font-weight: 500;
    margin-left: 5px;
    font-size: 16px;
    transition: ease .15s
}

.titles:hover {
    color: var(--main);
}

.cxmidstreamers {
    margin: 1.5rem 0;
}

.streamersocial i {
    color: var(--text-color);
    transition: ease .15s
}

.streamersocial i:hover {
    color: var(--main);
}

.streamersocial a {
    margin-right: 5px;
}

.streamersocial {
    text-align: center;
    padding-top: 5px;
}

.cxbannerarea .cxbanneritem {
    position: relative;
    display: flex;
    border-radius: var(--br-1);
    transition: all 0.3s ease-in-out;
    padding: 5px 0;
}

.cxbannerarea .cxbanneritem .cxbannerdetails {
    position: absolute;
    display: flex;
    flex-direction: column;
    transition: all 0.15s ease-in-out;
    margin-left: 20px;
    height: 100%;
    top: -1px;
    justify-content: center;
    text-shadow: 4px 2px 4px rgba(0, 0, 0, 0.6);
}

.cxbannerarea .cxbanneritem .cxbannerdetails .cxbannersub {
    font-family: "Wix Madefor Display", sans-serif;
    ;
    font-size: 16px;
    line-height: normal;
    color: #fff;
}

.cxbannerarea .cxbanneritem .cxbannerdetails .cxbannerTitle {
    font-family: "Wix Madefor Display", sans-serif;
    ;
    font-size: var(--fs-4);
    line-height: normal;
    color: #fff;
    font-weight: 700;
}

.cxbannerarea .cxbanneritem img {
    border-radius: var(--br-0);
}

.cxmb1_5 {
    margin: 1.5rem 0;
}

.cxmb_0-5 {
    margin-bottom: var(--br-0);
}

.cxcatPop span.name {
    font-size: 16px;
    font-weight: 500;
    margin-top: 12px;
    display: block;
    transition: color 0.3s ease;
}

.cxcatPop {
    margin: 5px 0;
}

.cxcatPop .cxcatlink {
    color: var(--text-color);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    text-decoration: none;
}

.cxcatPop .cxcatlink:hover {
    color: var(--main);
}

.cxcatPop .cxcatlink:hover .name {
    color: var(--main);
    transform: translateY(-2px);
}

.cxcatPop .name {
    transition: all 0.3s ease;
}

.cxHlogo {
    width: 180px;
}

.productRiA {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1.2;
    margin-left: 1em;
}

.inProdPr {
    display: flex;
    align-items: center;
}

.alert-warning {
    color: var(--cxopcolor-1) !important;
    background-color: var(--cxopcolor-3) !important;
    border: 0 !important;
}

.nav-tabs .nav-link {
    color: var(--text-color);
}

.cxmidhome .tab-content {
    background-color: var(--cxbgmainsec);
    padding: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
}

.cxmidhome .nav-tabs {
    border: none;
}

.cxmidhome.nav-link {
    color: var(--text-color);
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #fff;
    align-items: center;
}

.cxmidhome .nav-link img {
    width: 40px;
    height: 40px;
    background-color: var(--cx-boxcolor-1);
    padding: 5px;
    border-radius: var(--br-0);
}

.cxmidhome .nav-link.active {
    background-color: transparent !important;
    color: var(--main) !important;
    border-bottom: 2px solid var(--main) !important;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
}

.cxmidhome .nav-link:hover {
    border-bottom: 2px solid var(--main) !important;
    background-color: transparent !important;
    color: var(--main) !important;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
    transition: 0.5s;
}

.cxmidhome .productcard {
    padding: 10px;
    width: 100%;
}

.cxmidhome .productcard-main {
    box-shadow: 0 5px 5px 0 rgb(33 33 33/9%);
    background: var(--cxbgmainsec);
    position: relative;
    padding-top: 310px;
    padding-bottom: 5px;
    border-radius: var(--br-1-5);
}

.cxmidhome .productcard-image {
    width: 100%;
    height: 300px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    background-size: cover !important;
    position: absolute;
    top: 0;
    left: 0;
}

.cxmidhome .productcard-small {
    font-size: var(--fs-0);
    padding: 0 15px;
    color: #a5a5a5;
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cxmidhome .productcard-title {
    font-size: var(--fs-1);
    font-weight: 500;
    padding: 0 15px;
    padding-top: 6px;
    overflow: hidden;
    color: var(--text-color);
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 300px;
    display: block;
}

.cxmidhome .productcard-price {
    display: flex;
    padding-inline: 15px;
    flex-direction: row-reverse;
    gap: 10px;
    justify-content: flex-end;
}

.cxmidhome .productcard-price-1 {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 5px;
}

.cxmidhome .productcard-price-2 {
    font-size: 16px;
    font-weight: 500;
    color: var(--cxcolor-7);
}

.cxmidhome .productcard-price-3 {
    font-size: var(--fs-1);
    text-decoration: line-through;
    color: var(--cxcolor-1);
    font-weight: bold !important;
}

.cxmidhome .productcard-price-4 span {
    background-color: var(--mainsec);
    padding: 6px 10px;
    text-align: center;
    border-radius: 5px;
    color: rgb(255 255 255);
    font-size: 15px;
    line-height: 12px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
}

.cxmidhome .btn-block {
    width: calc(100% - 20px);
    color: rgb(236 238 255);
    margin-inline: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
}

.cxhomeslider-right {
    position: relative;
    display: block;
    width: 100%;
    height: 140px;
    margin-bottom: 15px;
    border-radius: var(--br-1);
    overflow: hidden;
    text-decoration: none;
}

.cxhomeslider-right img,
.cxhomeslider-right video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cxslider {
    position: relative;
}

.cxslider .slider-bottom {
    height: 80px;
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 2;
}

.cxslider .carousel-thumb-images {
    list-style: none;
    padding: 0;
    margin: 5px;
    position: absolute;
    width: 100%;
}

.cxslider .carousel-thumb-images li {
    margin: 5px;
    cursor: pointer;
    display: inline-block;
}

.cxslider .carousel-thumb-images li img {
    border: 1px solid var(--cxbgmainsec);
    border-radius: var(--br-1);
    width: 76px;
    height: 51px;
}

.cxslider .carousel-thumb-images li img:hover {
    border: 1px solid var(--main);
}

.cxslider .carousel-thumb-images li.active img {
    border: 1px solid var(--main);
}

.blogBox .blog-box {
    background-color: var(--cxbgmainsec);
    border: 1px solid var(--cxbgmainsec);
    border-radius: 6px;
    display: block;
    box-shadow: 0 5px 30px rgb(0 0 0/5%);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.blogBox .blog-content {
    padding: 20px;
    min-height: 154px;
}

.blogBox .blog-title {
    margin-bottom: 10px;
    font-size: 17px
}

.blogBox .blog-img img {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.blogBox .blog-title a {
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mainsec);
    line-height: 22px;
    font-weight: 500
}

.blogBox p.blog-desc {
    display: block;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #979aae
}

.blogBox .extra.content {
    width: 100%;
    padding: 10px 20px;
    border-top: 1px solid #f5f5f5;
    color: #979aae;
    font-size: var(--fs-0);
    border-color: #393c50;
}

.blogBox .extra.content a {
    color: var(--main);
}

/* Modern Blog Card Styles */
.modern-blog-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    max-height: 400px;
    background: #000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.modern-blog-card:hover {
    transform: scale(1.01);
}

.modern-blog-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
    min-height: 250px;
}

.modern-blog-image-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.modern-blog-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.modern-blog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.85) 100%);
    pointer-events: none;
    z-index: 1;
}

.modern-blog-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 2;
    pointer-events: none;
}

.modern-blog-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.modern-blog-title a {
    color: #ffffff;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.modern-blog-title a:hover {
    color: rgba(255, 255, 255, 0.9);
}

.modern-blog-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 3;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 80%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 80%, rgba(0, 0, 0, 0) 100%);
    transition: padding 0.7s ease-out, align-items 0.7s ease-out;
}

.modern-blog-card:hover .modern-blog-footer {
    padding: 20px 20px 20px 20px;
    align-items: flex-start;
}

.modern-blog-message {
    flex: 1;
    padding-right: 15px;
}

.modern-blog-message .modern-blog-title {
    margin: 0;
}

.modern-blog-content {
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.2px;
    margin-top: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.7s ease-out, max-height 0.7s ease-out, margin-top 0.7s ease-out;
}

.modern-blog-card:hover .modern-blog-content {
    opacity: 0.85;
    max-height: 100px;
    margin-top: 8px;
}

/* Mobile Responsive */
@media screen and (max-width: 991px) {
    .modern-blog-card {
        max-height: 350px;
    }

    .modern-blog-image-wrapper {
        min-height: 200px;
    }

    .modern-blog-message .modern-blog-title {
        font-size: 14px;
    }

    .modern-blog-read-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
}

@media screen and (max-width: 767px) {
    .modern-blog-card {
        max-height: 320px;
    }

    .modern-blog-image-wrapper {
        min-height: 180px;
    }

    .modern-blog-footer {
        padding: 15px 15px 12px 15px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .modern-blog-card:hover .modern-blog-footer {
        padding: 15px;
        gap: 8px;
    }

    .modern-blog-message {
        padding-right: 0;
    }

    .modern-blog-message .modern-blog-title {
        font-size: 14px;
    }

    .modern-blog-read-btn {
        width: 100%;
        justify-content: center;
    }

    .modern-blog-title {
        font-size: 14px;
    }
}

@media screen and (max-width: 575px) {
    .modern-blog-card {
        max-height: 300px;
    }

    .modern-blog-image-wrapper {
        min-height: 160px;
    }
}

/* Ana sayfa — Hikaye (home block) — tek zemin, bitişik segmentler */
.homeStories {
    margin-bottom: 16px;
    margin-top: 16px;
}

.homeStoriesScroller {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.homeStoriesScroller::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.homeStoriesScroller.homeStoriesDragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.homeStoriesTrack {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: max-content;
    min-width: 100%;
    background-color: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-3);
    overflow: hidden;
}

.homeStoriesItem {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 102px;
    height: 46px;
    padding: 6px 9px;
    text-decoration: none;
    scroll-snap-align: start;
    background-color: transparent;
    border: none;
    border-right: 1px solid var(--cxbcolor);
    border-radius: 0;
    transition: background-color 0.2s ease;
}

.homeStoriesItem:last-child {
    border-right: none;
}

.homeStoriesItem:hover,
.homeStoriesItem.homeStoriesItemActive {
    background-color: var(--cxbgmainfou);
}

@media (prefers-reduced-motion: reduce) {
    .homeStoriesItem {
        transition: none;
    }
}

.homeStoriesLogoImg {
    display: block;
    max-width: 100%;
    max-height: 24px;
    height: 100%;
    width: auto;
    object-fit: contain;
    pointer-events: none;
}

/* Masaüstü: 12 segment tek satırda, eşit genişlik */
@media screen and (min-width: 992px) {
    .homeStoriesScroller {
        overflow-x: hidden;
        cursor: default;
    }

    .homeStoriesTrack {
        width: 100%;
        max-width: 100%;
    }

    .homeStoriesItem {
        flex: 0 0 calc(100% / 12);
        width: calc(100% / 12);
        min-width: 0;
        height: 48px;
        padding: 6px 9px;
    }

    .homeStoriesLogoImg {
        max-height: 24px;
    }
}

@media screen and (max-width: 767px) {
    .homeStoriesItem {
        width: 94px;
        height: 44px;
        padding: 5px 8px;
    }

    .homeStoriesLogoImg {
        max-height: 24px;
    }
}

.storiesArea {
    height: 130px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    border-radius: 5px;
    margin-bottom: 30px;
    padding-inline: 10px;
    margin-top: 30px;
}


.storiesArea .storiesArea-item {
    padding: 13.5px 10px;
}

.storiesArea .storiesArea-item-image img {
    width: 105px !important;
    transition: all .15s;
    border-radius: 50%;
}

.storiesArea .storiesArea-item-image img:hover {
    background-color: var(--main);
    border-radius: 50%;
}


@media screen and (max-width: 767px) {
    .storiesArea {
        overflow-x: auto;
    }

    .storiesArea .storiesArea-item {
        flex: 0 0 calc(22% - 10px);
    }

    .storiesArea::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .storiesArea .storiesArea-item-image img {
        object-fit: contain;
    }
}

.slider-side-right {
    transition: all 0.3s;
    height: 100%;
}

.slider-side-right a:first-child .slider-right-side {
    margin-bottom: 10px !important;
}

.slider-right-side video {
    width: 100%;
    height: 192px;
    object-fit: cover;
    border-radius: 4px;
}

.slider-right-side img {
    width: 100%;
    height: 192px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}



.greencross {
    font-size: 18px;
    color: #25ff0b;
    text-shadow: none;
}


.blue-cross {
    font-size: 18px;
    color: #0bd2ff;
    text-shadow: none;
}


.warning {
    font-size: 18px;
    color: #ffb40b;
    text-shadow: none;
}


.danger {
    font-size: 18px;
    color: #ff0303;
    text-shadow: none;
}


.alertprimary {
    font-size: 18px;
    color: #03d0ff;
    text-shadow: none;
}

.square_box {
    position: absolute;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-top-left-radius: 45px;
    opacity: 0.302;
}

.square_box.box_three {
    background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    opacity: 0.059;
    left: -80px;
    top: -60px;
    width: 500px;
    height: 500px;
    border-radius: 45px;
}

.square_box.box_four {
    background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    opacity: 0.059;
    left: 150px;
    top: -25px;
    width: 550px;
    height: 550px;
    border-radius: 45px;
}


.fa-times {
    -webkit-animation: blink-1 2s infinite both;
    animation: blink-1 2s infinite both;
}

@-webkit-keyframes blink-1 {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

@keyframes blink-1 {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

.homeblogimg img {
    height: 205px !important;
    object-fit: cover !important;
}

.blogpimg img {
    width: 485px !important;
    height: 325px !important;
    object-fit: cover;
}

.cxLRmar {
    margin-top: 100px;
}

.btnProdBuy {
    padding: 10px;
    color: var(--text-color) !important;
    border: 1px solid var(--text-color) !important;
    transition: ease .15s;
}

.btnProdBuy:hover {
    color: #fff !important;
    background-color: var(--main);
    border: 1px solid var(--main) !important;
}

.btnprodnowbuy {
    color: #fff !important;
    background-color: var(--mainsec) !important;
    padding: 10px;
    transition: ease .15s;

}

.btnprodnowbuy:hover {
    color: #fff !important;
    background-color: var(--main) !important;
    transition: ease .15s;
}

/* Kurumsal / bilgi sayfaları (pages/show) */
.page-layout {
    margin-top: 30px;
    margin-bottom: 30px;
}

.infoPageGrid {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.infoPageContent {
    background-color: var(--cxbgmainthi);
    border-radius: var(--br-1-5);
    overflow: hidden;
}

.infoPageSidebar {
    position: sticky;
    top: 20px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--cxbgmainthi);
    border-radius: var(--br-1-5);
    overflow: hidden;
}

.infoPageSidebarHead {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    background-color: var(--cxbgmainfou);
    border-bottom: 1px solid var(--cxbcolor);
}

.infoPageSidebarHeadIcon {
    width: 30px;
    height: 30px;
    border-radius: var(--br-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--main);
    background: var(--cxbgmainfiv-thi);
    box-shadow: 0 0 0 3px var(--cxbgmainfiv);
    font-size: 13px;
    flex-shrink: 0;
}

.infoPageSidebarHeadTitle {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-color2);
    line-height: 1.35;
}

.infoPageNav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 10px 14px;
}

.infoPageNavDivider {
    margin: 8px 2px 2px;
    padding-top: 8px;
    border-top: 1px solid var(--cxbcolor);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-color-3);
}

.infoPageNavLink {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.infoPageNavLink:hover {
    color: var(--main);
}

.infoPageNavIcon {
    width: 15px;
    text-align: center;
    font-size: 13px;
    color: var(--text-color-3);
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.infoPageNavText {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.infoPageNavChevron {
    font-size: 10px;
    opacity: 0.9;
    flex-shrink: 0;
}

.infoPageNavLink.active {
    background-color: var(--main);
    color: var(--text-color-6);
}

.infoPageNavLink.active .infoPageNavIcon,
.infoPageNavLink.active .infoPageNavChevron {
    color: var(--text-color-6);
}

.infoPageFiles {
    margin-top: auto;
    border-top: 1px solid var(--cxbcolor);
    padding: 10px 10px 12px;
}

.infoPageFilesTitle {
    margin: 0 2px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-color-3);
}

.infoPageFilesList {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.infoPageFilesLink {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.infoPageFilesLink:hover {
    color: var(--main);
    background-color: color-mix(in srgb, var(--main) 8%, transparent);
}

.infoPageFilesIcon {
    width: 15px;
    text-align: center;
    font-size: 13px;
    color: var(--text-color-3);
    flex-shrink: 0;
}

.infoPageFilesText {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
    word-break: break-word;
}

.infoPageContentBody {
    padding: 14px 20px 20px;
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.75;
}

.infoPageContentBody> :first-child {
    margin-top: 0;
}

.infoPageContentBody h1,
.infoPageContentBody h2,
.infoPageContentBody h3,
.infoPageContentBody h4 {
    color: var(--text-color2);
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 14px;
}

.infoPageContentBody h2 {
    font-size: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cxbcolor);
}

.infoPageContentBody h3 {
    font-size: 16px;
    margin-top: 24px;
}

.infoPageContentBody p {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--text-color);
}

.infoPageContentBody strong,
.infoPageContentBody b {
    color: var(--text-color2);
    font-weight: 600;
}

.infoPageContentBody a {
    color: var(--main);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.infoPageContentBody a:hover {
    color: var(--mainthi);
}

.infoPageContentBody ul,
.infoPageContentBody ol {
    margin: 0 0 14px;
    padding-left: 1.25rem;
}

.infoPageContentBody li {
    margin-bottom: 6px;
}

@media (max-width: 991.98px) {
    main.site-main {
        padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    }

    .infoPageGrid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .infoPageSidebar {
        position: relative;
        top: 0;
        max-width: none;
    }

    .infoPageContentBody {
        padding: 20px 18px 24px;
    }
}

@media (max-width: 380px) {
    main.site-main {
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    }
}

.sselectplat {
    width: 70%;
}

.cxcategorys {
    text-align: center;
}

.cxcategorysHov {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
    transition: all .15s;
}



.cxcategorysHov .name:hover {
    color: var(--main);
}

.cxcategorys .name {
    font-size: 16px;
}

.cxcategorys a {
    color: var(--text-color);
}

.cxcategorys a:hover {
    color: var(--main);
}

/* Games page - compact category grid (gamesGrid / gamesCard) */
.cxcategorys .gamesGrid {
    width: calc(100% + 20px);
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, 12.5%);
    margin-left: -10px;
    margin-right: -10px;
}

.cxcategorys .gamesGrid .gamesCard {
    width: 100%;
    position: relative;
    padding: 10px;
}

.cxcategorys .gamesGrid .gamesCard .cxcatlink {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Kategori kartı görseli: cxgamehero-card ile aynı çift gradient overlay */
.cxcategorys .gamesGrid .gamesCard .cxcatlink .cxcatbox::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 28%, rgba(0, 0, 0, 0) 55%);
    z-index: 2;
    pointer-events: none;
}

.cxcategorys .gamesGrid .gamesCard .cxcatlink .cxcatbox::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0) 60%);
    z-index: 2;
    pointer-events: none;
}

.cxcategorys .gamesGrid .gamesCard .cxcatbox-atropos {
    width: 100%;
    aspect-ratio: 3 / 4;
    margin-bottom: 6px;
}

.cxcategorys .gamesGrid .gamesCard .cxcatbox-atropos .atropos-inner {
    width: 100%;
    height: 100%;
}

.cxcategorys .gamesGrid .gamesCard .cxcatbox img.cxcatboxbg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cxcategorys .gamesGrid .gamesCard .category-logo-center {
    max-width: 80px;
    max-height: 80px;
}

.cxcategorys .gamesGrid .gamesCard .caticon {
    width: 22px;
    height: 22px;
    top: 6px;
    right: 6px;
}

.cxcategorys .gamesGrid .gamesCard .caticon img {
    width: 100%;
    height: 100%;
}

.cxcategorys .gamesGrid .gamesCard .name {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.cxcategorys .gamesGrid .gamesGrid-empty {
    grid-column: 1 / -1;
}

@media (max-width: 1600px) {
    .cxcategorys .gamesGrid {
        grid-template-columns: repeat(7, 14.285%);
    }
}

@media (max-width: 1400px) {
    .cxcategorys .gamesGrid {
        grid-template-columns: repeat(6, 16.666%);
    }
}

@media (max-width: 1200px) {
    .cxcategorys .gamesGrid {
        grid-template-columns: repeat(5, 20%);
    }
}

@media (max-width: 992px) {
    .cxcategorys .gamesGrid {
        grid-template-columns: repeat(4, 25%);
    }
}

@media (max-width: 768px) {
    .cxcategorys .gamesGrid {
        grid-template-columns: repeat(3, 33.333%);
    }

    .cxcategorys .gamesGrid .gamesCard {
        padding: 8px;
    }

    .cxcategorys .gamesGrid .gamesCard .category-logo-center {
        max-width: 65px;
        max-height: 65px;
    }

    .cxcategorys .gamesGrid .gamesCard .name {
        font-size: 11px;
    }
}

@media (max-width: 576px) {
    .cxcategorys .gamesGrid {
        grid-template-columns: repeat(2, 50%);
    }

    .cxcategorys .gamesGrid .gamesCard .category-logo-center {
        max-width: 55px;
        max-height: 55px;
    }

    .cxcategorys .gamesGrid .gamesCard .caticon {
        width: 18px;
        height: 18px;
        top: 5px;
        right: 5px;
    }
}

@media (max-width: 400px) {
    .cxcategorys .gamesGrid .gamesCard {
        padding: 6px;
    }
}

.quanityBg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxslider {
    width: 100%;
    margin: 0 auto;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-2);
}

.cxhomeslider-container {
    width: 100%;
    margin: auto;
}

.cxhomeslider {
    width: 100%;
    height: 478px;
    border-radius: 20px;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .cxhomeslider {
        height: 395px;
        border-radius: 18px;
    }

    .cxhomeslider-right {
        height: 135px;
    }

    .cxslider {
        width: 100% !important;
        margin: 0 auto !important;
    }

    .cxhomeslider-right {
        height: 130px;
    }

    .slider-side-right {
        display: none !important;
    }

    .cxhomeslider-right {
        height: 135px;
    }
}

@media (max-width: 991px) {
    .cxhomeslider {
        height: 360px;
        border-radius: var(--br-1-5);
    }

    .cxhomeslider-right {
        height: 130px;
    }

    .cxslider {
        width: 100% !important;
        margin: 0 auto !important;
    }

    .cxhomeslider-right {
        height: 130px;
    }
}

@media (max-width: 768px) {
    .cxhomeslider {
        height: 260px;
        border-radius: var(--br-1);
    }

    .cxslider {
        width: 100% !important;
        margin: 0 !important;
    }

    .cxhomeslider .swiper-pagination-bullet {
        width: 8px;
        height: 3px;
        margin: 0 3px !important;
    }

    .cxhomeslider .swiper-pagination-bullet-active {
        width: 20px;
    }

    .cxhomeslider-right {
        height: 120px;
        margin-bottom: 10px;
    }
}

.cxhomeslider .cxhomeslider-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-1);
    overflow: hidden;
}

.cxhomeslider .cxhomeslider-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.cxhomeslider .swiper-pagination {
    position: absolute;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50% !important;
}

.cxhomeslider .swiper-pagination-bullet {
    background-color: #fff;
    opacity: .5;
    border: 1px solid #fff;
    width: 10px;
    height: 4px;
    margin: 0 5px !important;
    border-radius: var(--br-1);
    transition: all 0.3s ease;
}

.cxhomeslider .swiper-pagination-bullet-active {
    background-color: #fff;
    opacity: 1;
    border: none;
    width: 25px;
}


.cart-badge {
    top: -6px;
    right: -6px;
}

.cxidalert {
    background-color: var(--cxopcolor-3);
    padding: 20px;
    margin-bottom: 20px;
    color: var(--cxopcolor-1);
    font-size: var(--fs-0);
    border-radius: var(--br-0);
}

.cxHomecn-container {
    width: 100%;
    display: flex;
}

.cxHomecn-list {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap !important;
    list-style-type: none;
    overflow-y: hidden;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cxHomecn-list::-webkit-scrollbar {
    display: none;
}

.img-fluidhcat {
    object-fit: cover;
    margin-right: 8px;
}

.cxHomecn-item {
    flex: 0 0 auto;
    margin-right: 15px;
    text-align: center;
    border-radius: 5px;
    min-width: 150px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .cxHomecn-item {
        min-width: 120px;
    }

    .noQuantityA {
        margin: 1rem 0;
    }

    .cxsmbcright {
        margin-top: 0 !important;
    }

    .cxsmbcname {
        margin-top: -5px;
    }
}

.productmainasc {
    transition: all .15s;
}

.productmainasc:hover {
    transform: scale(1.01);
}

.homeproductcard {
    background-color: var(--cxbgmain) !important;
    border-top-left-radius: var(--br-0);
    border-top-right-radius: var(--br-0);
}

.cxprofileL {
    overflow: visible;
}

.cxprofileR {
    padding: 20px;
}

.btn-h-5 {
    height: 50px;
}

.btn-h-6 {
    height: 60px;
}

.cx-security-card {
    background: var(--cxbgmainsec);
    border-radius: var(--br-1-5);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 2px solid var(--cxbcolor);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    transition: transform .2s ease, border-color .2s ease;
}

.cx-security-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--br-1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cxbgmainfiv-thi);
    box-shadow: 0 0 0 4px var(--cxbgmainfiv);
    color: var(--main);
    font-size: 18px;
}

.cx-security-content {
    flex: 1;
    min-width: 0;
}

.cx-security-content span {
    display: block;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
}

.cx-security-content p {
    margin: 5px 0 0;
    font-size: 12px;
    color: var(--text-color-3);
    line-height: 1.5;
}

.cx-switch {
    position: relative;
    display: inline-block;
    width: 58px;
    height: 28px;
    min-width: 58px;
}

.cx-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cx-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: var(--cxbgmainfou);
    border: 1px solid var(--cxbcolor);
    transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
    border-radius: var(--br-1);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.cx-switch-slider:before {
    position: absolute;
    content: "";
    width: 18px;
    height: 18px;
    top: 4.5px;
    left: 2px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
    transform: translate3d(0, 0, 0);
    transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .2s ease;
    will-change: transform;
    backface-visibility: hidden;
    transform-origin: left center;
}

.cx-switch input:checked+.cx-switch-slider {
    background: linear-gradient(90deg, #10935a 0%, #17a667 100%);
    border-color: rgba(23, 166, 103, 0.7);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.22);
}

.cx-switch input:checked+.cx-switch-slider:before {
    transform: translate3d(34px, 0, 0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    transform-origin: right center;
}

.cx-switch input:focus-visible+.cx-switch-slider {
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.22), 0 0 0 3px rgba(34, 207, 122, 0.24);
}

.cx-switch input:not(:checked)+.cx-switch-slider:before {
    transform-origin: left center;
}

.cx-switch input:active+.cx-switch-slider:before {
    transform: translate3d(2px, 0, 0) scaleX(1.08);
}

.cx-switch input:checked:active+.cx-switch-slider:before {
    transform: translate3d(32px, 0, 0) scaleX(1.08);
}

.cx-security-action-btn {
    height: 34px;
    min-width: 78px;
    border-radius: var(--br-1);
    border: 1px solid var(--cxbcolor);
    background: var(--cxbgmainfou);
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
    padding: 0 14px;
    transition: all .2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cx-security-action-btn:hover {
    border: 1px solid var(--cxbcolor);
    color: var(--text-color-6);
    background: var(--mainfou);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--main) 32%, transparent);
}

.cx-device-card {
    position: relative;
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.22);
}

.cx-device-current-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--cxbgmainfou);
    color: var(--text-color);
    padding: 5px 10px;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1);
    font-weight: 500;
    font-size: 12px;
    z-index: 1;
}

.cx-device-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--cxbcolor-2);
}

.cx-device-label {
    font-size: 12px;
    color: var(--text-color-h);
    min-width: 90px;
}

.cx-device-value {
    font-size: 12px;
    color: var(--text-color);
    text-align: right;
    word-break: break-word;
}

.cx-device-inline-row {
    margin-top: -2px;
    border-bottom: 1px solid var(--cxbcolor-2);
    padding-bottom: 8px;
}

.cx-device-item-inline {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
}

.cx-device-item-inline .cx-device-label {
    min-width: auto;
}

.cx-device-item-inline .cx-device-value {
    text-align: left;
}

.cx-device-item-browser {
    align-items: flex-start;
}

.cx-device-item-device-type {
    align-items: flex-end;
}

.cx-device-item-device-type .cx-device-label,
.cx-device-item-device-type .cx-device-value {
    text-align: right;
}

.cx-device-logout-btn {
    width: 100%;
    border-radius: var(--br-1);
    height: 38px;
    background-color: var(--cxopcolor-18);
    color: var(--cxcolor-1);
    border: 2px solid var(--cxopcolor-4);
    font-size: 12px;
    font-weight: 500;
    transition: all .2s ease;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--cxcolor-1) 20%, transparent);
}

.cx-device-logout-btn:hover {
    background-color: var(--cxopcolor-4);
    color: var(--cxcolor-1);
    border: 2px solid var(--cxopcolor-4);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cxcolor-1) 30%, transparent);
}

.cx-device-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cxbcolor-2);
}

.cx-device-icon-area {
    font-size: 22px;
    color: var(--main);
    min-width: 32px;
    text-align: center;
}

.cx-device-header-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cx-device-browser {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

.cx-device-platform {
    font-size: 11px;
    color: var(--text-color-h);
}

@media (max-width: 767.98px) {
    .cx-security-card {
        padding: 14px;
        gap: 10px;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .cx-security-icon {
        margin-top: 1px;
    }

    .cx-security-content {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
        flex: 1 1 0;
    }

    .cx-security-content span {
        flex: 0 0 auto;
    }

    .cx-security-content p {
        flex: 0 0 100%;
        margin-top: 2px;
    }

    .cx-switch {
        flex: 0 0 auto;
        margin-left: auto;
        margin-right: auto;
    }

    .cx-security-action-btn {
        flex: 0 0 auto;
        margin-top: 6px;
        margin-left: auto;
    }

    .cx-security-content span {
        font-size: 14px;
    }

    .cx-security-content p {
        font-size: 12px;
    }

    .cx-device-item {
        flex-direction: column;
        gap: 4px;
    }

    .cx-device-value {
        text-align: left;
    }
}

.btnmainsec {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main);
    padding: 12px 20px;
    border: 0;
    height: 45px;
    outline: none;
    font-weight: 600;
    color: var(--text-color-6);
    transition: ease .15s;
    border-radius: var(--br-1);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
}

.btnmainsec:hover {
    background: var(--mainfou);
    color: var(--text-color-6);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--main) 32%, transparent);
}

.btnmainsec i {
    margin: 0 5px;
}

.btnmainsec--danger {
    background: var(--cxopcolor-47);
    border: 2px solid var(--cxopcolor-47-hover);
    color: var(--cxcolor-47);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cxcolor-47) 15%, transparent);
}

.btnmainsec--danger:hover {
    background: var(--cxopcolor-47-hover);
    border-color: var(--cxopcolor-48-hover);
    color: var(--cxcolor-47-hover);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--cxcolor-47) 22%, transparent);
}

.btnBuyNow {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--main);
    border: none;
    width: 100%;
    height: 45px;
    /* 50px */
    transition: all .15s;
    color: var(--text-color-6);
    border-radius: var(--br-1);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
}

.btnBuyNow:hover {
    background-color: var(--mainsec);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--mainsec) 32%, transparent);
}

.btnAddCart {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--cxbgmainfiv);
    border: 1px solid var(--cxbcolor);
    max-width: 45px;
    /* 50px */
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    height: 45px;
    /* 50px */
    transition: all .15s;
    color: var(--text-color);
    border-radius: var(--br-1);
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
}

.btnAddCart:hover {
    background-color: var(--cxbgmainfiv-sec);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.discountArea {
    display: flex;
    align-items: center;
    justify-content: center;
}

.discountText {
    background-color: var(--cxopcolor-24);
    color: var(--cxcolor-24);
    width: 45px;
    /* 50px */
    height: 45px;
    /* 50px */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

.discountArea i {
    background-color: #142233;
    color: var(--cxcolor-24);
    display: flex;
    height: 45px;
    /* 50px */
    width: 45px;
    /* 50px */
    font-size: 16px;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.bonusArea {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bonusText {
    background-color: var(--cxopcolor-22);
    color: var(--cxcolor-22);
    width: 45px;
    /* 50px */
    height: 45px;
    /* 50px */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-top-right-radius: var(--br-1);
    border-bottom-right-radius: var(--br-1);
}

.bonusArea i {
    background-color: #241a38;
    color: var(--cxcolor-22);
    display: flex;
    height: 45px;
    /* 50px */
    width: 45px;
    /* 50px */
    font-size: 16px;
    align-items: center;
    justify-content: center;
    border-top-left-radius: var(--br-1);
    border-bottom-left-radius: var(--br-1);
}

.priceArea {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.priceNew {}

.priceArea .priceNewText {
    width: 100%;
    height: 30px;
    background-color: var(--cxopcolor-23);
    color: var(--cxcolor-23);
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-right-radius: var(--br-1);
    border-bottom-right-radius: var(--br-1);
    padding: 5px;
}

.priceNew i {
    background-color: #152d22;
    color: var(--cxcolor-23);
    height: 30px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: var(--br-1);
    border-bottom-left-radius: var(--br-1);
}

.priceNew {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.priceArea .priceOldText {
    width: 100%;
    height: 24px;
    background-color: #3a1b1e;
    color: #f29aa0;
    text-decoration: line-through;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: 5px;
}

.priceOld {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.priceOld i {
    background-color: #2a1416;
    color: #f29aa0;
    height: 24px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.verify-premium {}

.verify-premium-head {
    padding: 18px;
    border-radius: var(--br-1-5);
    border: 2px solid var(--cxbcolor);
    background-color: var(--cxbgmainsec);
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.verify-premium-title {
    margin: 0 0 8px;
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
}

.verify-premium-subtitle {
    margin: 0;
    color: var(--text-color-h);
    font-size: 12px;
    line-height: 1.6;
    max-width: 760px;
}

.verify-premium-badge {
    min-width: 135px;
    text-align: center;
    padding: 12px 16px;
    border-radius: var(--br-1);
    border: 1px solid var(--cxbcolor);
    background-color: var(--cxbgmainsec);
}

.verify-premium-badge span {
    display: block;
    color: var(--text-color-h);
    font-size: 11px;
    margin-bottom: 3px;
}

.verify-premium-badge strong {
    display: block;
    color: var(--main);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.verify-insight-card {
    height: 100%;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    background-color: var(--cxbgmainsec);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.verify-insight-score {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    background: linear-gradient(180deg, var(--cxbgmainfou) 0%, var(--cxbgmainsec) 100%);
}

.verify-score-ring {
    --score: 0;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main);
    font-weight: 700;
    font-size: 18px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    background: conic-gradient(from -90deg,
            var(--main) 0deg,
            var(--main) calc((var(--score) / 100) * 360deg),
            var(--cxbgmainsec) calc((var(--score) / 100) * 360deg),
            var(--cxbgmainsec) 360deg);
    box-shadow: inset 0 0 0 6px rgba(12, 17, 27, 0.65), 0 8px 20px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.verify-score-ring::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: var(--cxbgmainfou);
    border: 1px solid var(--cxbcolor);
    z-index: 1;
}

.verify-score-value {
    position: relative;
    z-index: 2;
}

.verify-score-text h4 {
    margin: 0;
    font-size: 15px;
    color: var(--text-color);
}

.verify-score-text p {
    margin: 4px 0 0;
    color: var(--text-color-h);
    font-size: 12px;
}

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

.verify-timeline li {
    position: relative;
    padding: 10px 12px 10px 36px;
    border-radius: var(--br-1-5);
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainfou);
    color: var(--text-color-h);
    font-size: 13px;
    font-weight: 500;
}

.verify-timeline li::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--cxbcolor-3);
    background-color: transparent;
}

.verify-timeline li.is-complete {
    color: var(--text-color);
    border-color: var(--cxopcolor-5);
    background-color: var(--cxopcolor-5);
}

.verify-timeline li.is-complete::before {
    border-color: var(--cxcolor-7);
    background-color: var(--cxcolor-7);
}

.verify-timeline li.is-upcoming {
    border-style: dashed;
}

.verify-card-modern {
    height: 100%;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    background-color: var(--cxbgmainsec);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all .2s ease;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.verify-card-modern:hover {
    transform: translateY(-2px);
    border-color: var(--main);
}

.verify-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.verify-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background-color: var(--cxbgmainfiv-thi);
    box-shadow: 0 0 0 4px var(--cxbgmainfiv);
    color: var(--main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.verify-card-state {
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
}

.verify-card-modern.is-complete .verify-card-state {
    color: var(--cxcolor-7);
    background-color: var(--cxopcolor-5);
}

.verify-card-modern.is-pending .verify-card-state,
.verify-card-modern.is-upcoming .verify-card-state {
    color: var(--main);
    background-color: var(--cxopcolor-3);
}

.verify-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.verify-card-step {
    color: var(--text-color-h);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.verify-card-title {
    margin: 0;
    color: var(--text-color);
    font-size: 18px;
    font-weight: 600;
}

.verify-card-desc {
    margin: 0;
    color: var(--text-color-h);
    font-size: 13px;
    line-height: 1.6;
    min-height: 62px;
}

.verify-card-value {
    width: 100%;
    text-align: center;
    padding: 10px 12px;
    border: 1px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    background-color: var(--cxbgmainthi);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.verify-card-btn {
    margin-top: auto;
    min-height: 42px;
    border: none;
    border-radius: var(--br-1-5);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main);
    color: var(--text-color-6);
    font-size: 14px;
    font-weight: 600;
    transition: all .15s;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
}

.verify-card-btn:hover {
    background-color: var(--mainfou);
    color: var(--text-color-6);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--main) 32%, transparent);
}

.verify-card-btn.is-disabled {
    border: 1px solid var(--cxbcolor);
    background-color: var(--cxbgmainfou);
    color: var(--text-color-h);
    pointer-events: none;
}

.verify-card-modern.is-upcoming {
    border-style: dashed;
}

@media (max-width: 991px) {
    .verify-premium-title {
        font-size: 20px;
    }

    .verify-card-desc {
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .verify-premium {
        padding: 14px;
    }

    .verify-premium-head,
    .verify-insight-card,
    .verify-card-modern {
        padding: 14px;
    }

    .verify-premium-badge {
        width: 100%;
    }

    .verify-card-title {
        font-size: 16px;
    }
}

.product-card {
    background-color: var(--cxbgmainsec);
    border-radius: var(--br-0);
}

.product-card img {
    border-top-right-radius: var(--br-0);
    border-top-left-radius: var(--br-0);
}

.product-card a {
    color: var(--text-color);
    transition: all .15s;
}

.product-card .price span {
    font-size: var(--fs-1);
    color: var(--cxcolor-1);
    text-decoration: line-through;
}

.product-card a:hover {
    color: var(--main);
}

.productcardtext {
    padding: 10px 20px;
}

.productcardtext small {
    font-size: var(--fs-0);
}

.productname {
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
}


.cximgbox img.loadimg {
    height: 285px;
    width: 100%;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
}

.cximgbox img.loadimg.loaded {
    height: 285px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in-out, visibility 0s linear 0s;
    border-radius: var(--br-0);
}

.commentinfo {
    background-color: var(--cxopcolor-4);
    color: var(--cxcolor-1);
    font-size: 16px;
    padding: 10px 20px;
    border-radius: var(--br-0);
}

.quantitybasket {
    border-radius: var(--br-0) !important;
}

.cxinfodanger {
    background-color: var(--cxopcolor-4);
    color: var(--cxcolor-1);
    font-size: 16px;
    padding: 10px 20px;
    border-radius: var(--br-0);
}

.cxalert {
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--br-1-5);
    font-size: var(--fs-0);
}

.cxalertd {
    background-color: var(--cxopcolor-4);
    color: var(--cxcolor-1);
}

.cxalertd-sec {
    background-color: var(--cxopcolor-18);
    color: var(--cxcolor-18);
}

.cxalertw {
    color: var(--cxcolor-25);
    background-color: var(--cxopcolor-25);
}

.cxalerts {
    color: var(--cxcolor-23);
    background-color: var(--cxopcolor-23);
}

.cxalerti {
    color: var(--cxcolor-24);
    background-color: var(--cxopcolor-24);
}

.cxalertMain {
    width: 100%;
    position: relative;
    min-height: 120px;
    display: flex;
    align-items: center;
    border-radius: var(--br-1-5);
    background: var(--cxbgmainsec);
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.25);
}

.cxalertMain.style2 {
    min-height: auto;
}

.cxalertMain .cxalertMainIcon {
    width: 60px;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    background: var(--cxbgmainfou);
    font-size: 18px;
    color: var(--main);
    border-radius: 15px 0px 0px 15px;
}

.cxalertMain .cxalertMainIcon.iconstyle2 {
    font-size: 24px;
}

.cxalertMain .cxalertMainText {
    width: calc(100% - 60px);
    padding: 10px;
    position: relative;
    color: var(--text-color);
    font-size: 14px;
}

.cxalertMain .cxalertMainIcon.danger {
    color: var(--cxcolor-1);
}

.cxalertMain .cxalertMainIcon.success {
    color: var(--cxcolor-41);
}

.cxalertMain .cxalertMainIcon.info {
    color: var(--cxcolor-35);
}

.confirm-btn {
    background-color: var(--mainsec);
    border: none;
    outline: none;
    box-shadow: none;
    text-shadow: none;
}

.confirm-btn-2 {
    padding: 12px 25px;
    border: none;
    border-radius: var(--br-0);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: var(--fs-1);
}

.cxcolor-g,
.cxcolor-r,
.cxcolor-r2,
.cxcolor-o,
.cxcolor-b,
.cxcolor-l,
.cxcolor-l2,
.cxcolor-y {
    font-size: var(--fs-0);
    border-radius: 3px;
    font-weight: 500;
    cursor: default;
    padding: 5px;
}

.cxcolor-g {
    color: var(--cxcolor-7);
    background-color: var(--cxopcolor-5);
}

.cxoutofstock {
    background-color: var(--cxopcolor-4);
    color: var(--cxcolor-1);
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    width: 100%;
    height: 50px;
    /* 50px */
    transition: all .15s;
    border-radius: var(--br-1);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
}

.cxcolor-r {
    background-color: var(--cxopcolor-4);
    color: var(--cxcolor-1);
}

.cxcolor-o {
    color: var(--cxcolor-3);
    background-color: var(--cxopcolor-3);
}

.cxcolor-b {
    color: var(--cxcolor-9);
    background-color: var(--cxopcolor-6);
}

.cxcolor-l {
    color: var(--cxcolor-14);
    background-color: var(--cxopcolor-10);
}

.cxcolor-l2 {
    color: var(--cxcolor-15);
    background-color: var(--cxopcolor-11);
}

.cxcolor-r2 {
    color: var(--cxcolor-16);
    background-color: var(--cxopcolor-12);
}

.cxcolor-y {
    color: var(--cxcolor-17);
    background-color: var(--cxopcolor-13);
}

.completed,
.pending,
.canceled {
    font-size: var(--fs-0);
    text-transform: uppercase;
    border-radius: 3px;
    font-weight: 500;
    cursor: default;
    padding: 5px;
}

.completed {
    color: var(--cxcolor-7);
    background-color: var(--cxopcolor-5);
}

.pending {
    color: var(--cxcolor-3);
    background-color: var(--cxopcolor-3);
}

.canceled {
    background-color: var(--cxopcolor-4);
    color: var(--cxcolor-1);
}

.noQuantity {
    opacity: 0.8;
    cursor: no-drop !important;
}

.noQuantityA {
    border-radius: var(--br-1);
    font-size: var(--fs-0);
    padding: 5px 10px;
    height: 50px;
    /* 50px */
    display: flex;
    align-items: center;
    justify-content: center;
}

.cxdonatearearight {
    background-color: var(--cxbgmainthi);
    padding: 20px;
    border-radius: var(--br-0);
}

.headerNotifyWrap {
    position: relative;
    display: inline-flex;
}

.headerButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--br-1);
    text-decoration: none;
    border: 0;
    transition: all .15s;
    font-size: var(--fs-1);
}

.headerNotifyBtn {
    position: relative;
}

.headerNotifyBtnMessage {
    color: var(--text-color);
    background: var(--cxbgmainfou);
    border: 2px solid var(--cxbcolor);
}

.headerNotifyBtnMessage:hover {
    color: var(--text-color);
    background: var(--cxbgmainthi);
    border-color: var(--cxbcolor-3);
}

.headerNotifyBtnBell {
    color: var(--text-color);
    background: var(--cxbgmainfou);
    border: 2px solid var(--cxbcolor);
}

.headerNotifyBtnBell:hover {
    color: var(--text-color);
    background: var(--cxbgmainthi);
    border-color: var(--cxbcolor-3);
}

/* Store profile aksiyon ikon butonları (header notify tasarımı) */
.cxspIconBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--br-1);
    text-decoration: none;
    border: 2px solid var(--cxbcolor);
    transition: all .15s;
    font-size: var(--fs-1);
    position: relative;
    color: var(--text-color);
    background: var(--cxbgmainfou);
}

.cxspIconBtn:hover {
    color: var(--text-color);
    background: var(--cxbgmainthi);
    border-color: var(--cxbcolor-3);
}

/* Mobil header: menü | logo | sepet (< lg) */
.cxheaderMobileBar {
    min-height: 48px;
    padding: 4px 0;
    gap: 8px;
}

.cxheaderMobileLogoLink {
    max-width: 55%;
    z-index: 1;
}

.cxheaderMobileLogoImg {
    max-height: 38px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.cxMobileHeaderCart {
    position: relative;
    flex-shrink: 0;
    margin-right: 0 !important;
}

/* Mobil alt tab bar — sayfa üstünde kalır; drawer / overlay (9998+) altında kalmalı */
.cxBottomTab {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
    padding: 8px 2px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--cxbgmainsec);
    border-top: 2px solid var(--cxbcolor);
    box-sizing: border-box;
    min-height: 52px;
    overflow: visible;
    filter: drop-shadow(0 -8px 20px rgba(0, 0, 0, 0.38));
    transition: transform 0.32s ease;
}

.cxBottomTab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    max-width: 68px;
    padding: 1px 1px 0;
    text-decoration: none;
    color: var(--text-color);
    line-height: 1.1;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease;
    position: relative;
    overflow: visible;
}

.cxBottomTab-item:active {
    opacity: 0.88;
}

.cxBottomTab-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-color-h);
    line-height: 1;
    margin: 0;
}

.cxBottomTab-ico i {
    margin: 0;
    line-height: 1;
    vertical-align: 0;
}

.cxBottomTab-item.is-active .cxBottomTab-ico {
    color: var(--text-color);
}

.cxBottomTab-lbl {
    display: block;
    font-size: 9px;
    font-weight: 500;
    color: var(--text-color-h);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.cxBottomTab-item.is-active .cxBottomTab-lbl {
    color: var(--text-color);
}

/* Sepet: balon barın üstüne taşar; yazı çubuğu diğerleriyle hizada (flex-end) */
.cxBottomTab-item--cart {
    padding-top: 0;
    z-index: 3;
    min-height: 42px;
    justify-content: flex-end;
}

.cxBottomTab-item--cart .cxBottomTab-lbl {
    margin-top: 0;
    position: relative;
    z-index: 1;
}

.cxBottomTab-bubble {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 22px);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(165deg, #f7d24a 0%, #e8a213 50%, #cf8b0a 100%);
    color: #fff;
    font-size: 19px;
    line-height: 1;
    box-shadow:
        0 0 16px rgba(232, 162, 19, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.32);
    pointer-events: none;
}

.cxBottomTab-bubble i {
    color: #fff;
}

.cxBottomTab-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--main);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--cxbgmainsec);
    line-height: 1;
}

body.modal-open .cxBottomTab,
body.swal2-shown .cxBottomTab {
    transform: translateY(100%);
    pointer-events: none;
}

@media (max-width: 380px) {
    .cxBottomTab {
        padding: 6px 1px calc(10px + env(safe-area-inset-bottom, 0px));
        min-height: 48px;
        filter: drop-shadow(0 -6px 16px rgba(0, 0, 0, 0.35));
    }

    .cxBottomTab-item {
        max-width: 62px;
        gap: 4px;
    }

    .cxBottomTab-ico {
        font-size: 16px;
    }

    .cxBottomTab-lbl {
        font-size: 8px;
    }

    .cxBottomTab-item--cart {
        min-height: 38px;
    }

    .cxBottomTab-bubble {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 17px;
        bottom: calc(100% - 18px);
    }

    .cxBottomTab-badge {
        min-width: 14px;
        height: 14px;
        font-size: 7px;
        padding: 0 2px;
    }
}

/* Mobil: üst bar alt çizgi; headerRight aynı masaüstü bileşenleriyle, yalnızca alt satırda sağa hizalı */
@media (max-width: 991.98px) {
    .cxheaderMobileBarWrap {
        border-bottom: 1px solid var(--cxbcolor);
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .cxheaderRightCol {
        padding-top: 0;
    }

    .cxheaderRightColInner {
        justify-content: flex-end;
    }

    .cxheader .profileHeader .profileHeaderImage .profileImage {
        width: 32px;
        height: 32px;
    }

    main.cxmain {
        padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 380px) {
    main.cxmain {
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    }
}

/* Mobil menü — profil çekmecesi ile aynı açılış/kapanış (cxMenuDrawerOverlay + panel transition) */
body.cx-mobile-nav-open {
    overflow: hidden;
}

.cxMobileNavShell {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: min(360px, 90vw);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    background: var(--cxbgmainsec);
    border-right: 2px solid var(--cxbcolor);
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow: hidden;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
}

.cxMobileNavShell.is-open {
    transform: translateX(0);
}

@media (max-width: 991.98px) {
    .cxMobileNavShell {
        width: 100vw;
        max-width: 100vw;
    }
}

@media (prefers-reduced-motion: reduce) {

    .cxMobileNavOverlay,
    .cxMobileNavShell {
        transition: none;
    }
}

.cxMobileNavTop {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--cxbcolor);
    background: var(--cxbgmainsec);
    flex-shrink: 0;
}

/* Profil çekmecesindeki .cx-profile-drawer-close ile aynı görünüm */
.cxMobileNavCloseBtn {
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--cxbgmainfou);
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cxMobileNavCloseBtn:hover,
.cxMobileNavCloseBtn:focus-visible {
    background: var(--cxbgmainthi);
    color: var(--text-color);
    outline: none;
}

.cxMobileNavTopLogo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cxMobileNavTopLogo img {
    max-height: 36px;
    width: auto;
    max-width: 100%;
}

.cxMobileNavTopSpacer {
    width: 32px;
    height: 32px;
}

.cxMobileNavBody {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.cxMobileNavRail {
    width: 92px;
    flex-shrink: 0;
    border-right: 1px solid var(--cxbcolor);
    background: var(--cxbgmainsec);
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
}

.cxMobileNavRailItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: var(--br-1);
    border: 0;
    background: transparent;
    color: var(--text-color-h);
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cxMobileNavRailItem--link {
    color: var(--text-color-h);
}

.cxMobileNavRailItem:hover,
.cxMobileNavRailItem:focus-visible {
    color: var(--text-color);
    background: var(--cxbgmainthi);
    outline: none;
}

.cxMobileNavRailDetails {
    margin: 0;
    padding: 0;
    border: 0;
}

.cxMobileNavRailDetails summary.cxMobileNavRailItem--summary {
    list-style: none;
}

.cxMobileNavRailDetails summary.cxMobileNavRailItem--summary::-webkit-details-marker {
    display: none;
}

.cxMobileNavRailItem--summary {
    cursor: pointer;
}

.cxMobileNavRailItem--sub {
    padding: 6px 2px;
    margin-left: 0;
}

.cxMobileNavRailItem--sub .cxMobileNavRailIcon {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.cxMobileNavRailItem--sub .cxMobileNavRailIcon img {
    width: 18px;
    height: 18px;
}

.cxMobileNavRailItem--sub .cxMobileNavRailLabel {
    font-size: 8px;
    white-space: normal;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cxMobileNavRailLabel {
    white-space: normal;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.4em;
}

/* Navbar "Kategoriler" pill (.cxnavpill--categories .cxnavpillIcon) ile aynı arka plan / ikon rengi */
.cxMobileNavRailIcon {
    width: 38px;
    height: 38px;
    border-radius: var(--br-1-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--cxopcolor-25);
    color: var(--mainfou);
    font-size: 16px;
    flex: 0 0 auto;
}

.cxMobileNavRailIcon i,
.cxMobileNavRailIcon svg {
    color: inherit;
    fill: currentColor;
}

.cxMobileNavRailIcon img {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
}

.cxMobileNavMain {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 12px 16px;
    min-height: 0;
}

.cxMobileNavSearch {
    position: relative;
    flex-shrink: 0;
    margin-bottom: 12px;
}

.cxMobileNavSearch .formControl {
    width: 100%;
    height: 46px;
    padding: 0 44px 0 14px;
    border-radius: var(--br-1);
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainsec);
    color: var(--text-color);
    font-size: var(--fs-1);
}

.cxMobileNavSearch .formSearch-icon {
    right: 4px;
    pointer-events: none;
}

.cxMobileNavScroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
}

.cxMobileNavRail::-webkit-scrollbar,
.cxMobileNavScroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

/* Mobil menü — kategori satırları masaüstü cxCatItem kartı ile aynı sınıfları kullanır (.cxCatItem--mobileNav = dikey liste aralığı) */
.cxMobileNavBlock .cxCatItem--mobileNav {
    width: 100%;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.cxMobileNavBlock .cxCatItem--mobileNav:last-child {
    margin-bottom: 0;
}

.cxMobileNavSearchEmpty {
    margin: 16px 0;
    text-align: center;
    color: var(--text-color-h);
    font-size: var(--fs-0);
}

.cxMobileNavSearchEmpty.is-visible {
    display: block;
}

.cxMobileNavAuth {
    margin-top: 20px;
    padding-top: 8px;
    border-top: 1px solid var(--cxbcolor);
}

@media (min-width: 992px) {

    .cxMobileNavOverlay,
    .cxMobileNavShell {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.cx-mobile-nav-open {
        overflow: unset;
    }
}

.cx-header-notify-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

.cx-header-notify-item {
    margin-bottom: 0;
}

.cxnotificationbody .cx-notify-empty-list {
    min-height: 180px;
    padding: 26px 12px;
}

.cxnotificationsinfo {
    font-size: var(--fs-1);
    min-width: 0;
}

.cxnotificationsinfo strong {
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: 0.15s;
    overflow: hidden;
}

.cxnotificationsinfo span {
    font-size: 11px;
    color: var(--text-color-h);
    margin-top: 2px;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    transition: 0.15s;
    overflow: hidden;
}

.cxnotificationitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1);
    background-color: var(--cxbgmainsec);
    cursor: pointer;
    transition: all .18s ease;
    margin-bottom: 6px;
    position: relative;
}

.cxnotificationitem:hover {
    background-color: var(--cxbgmainthi);
    border-color: var(--main);
}

.cxnotificationitem.unread-notification::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--main);
    transform: translateY(-50%);
}

.cxnotificationitem.unread-notification {
    padding-left: 22px;
}

.cxnotificationitem-empty {
    border-style: dashed;
    cursor: default;
}

.cxnotificationitem-empty:hover {
    border-color: var(--cxbcolor);
    background-color: var(--cxbgmainsec);
}

.cxnotificationitem img {
    width: 40px;
    height: 40px;
    border-radius: var(--br-0);
    object-fit: cover;
    flex-shrink: 0;
    border-radius: var(--br-1);
    background: var(--cxbgmainthi);
    border: 2px solid var(--cxbcolor);
    flex-shrink: 0;
    font-size: 14px;
    color: var(--main);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxnotificationitem i {
    font-size: 15px;
    color: var(--main);
}

.cxmarkallread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--cxcolor-7);
    background: var(--cxopcolor-5);
    border-radius: 8px;
    transition: all .2s ease;
    border: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2));
}

.cxmarkallread:hover {
    color: var(--cxcolor-7);
    background: var(--cxopcolor-5);
    transform: translateY(-1px);
}

.cxheaddelete {
    color: var(--cxcolor-1);
    background: var(--cxopcolor-4);
    padding: 5px 10px;
    border-radius: var(--br-0);
    transition: all .15s;
    border: none;
}

.cxheaddelete:hover {
    opacity: .9;
}

.cxnotificationfbtn {
    text-align: center;
    padding: 11px 14px;
    background-color: var(--cxbgmainfiv-thi);
    border-top: 1px solid var(--cxbcolor);
    border-radius: 0 0 var(--br-1) var(--br-1);
    transition: all .18s;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color-h);
}

.cxnotificationfbtn:hover {
    background-color: var(--cxbgmainthi);
    color: var(--main);
}

.cxbtnhead {
    padding: 13px;
    font-size: var(--fs-1);
    border: none;
    display: flex;
    align-items: center;
    height: 40px;
    width: 40px;
    text-align: center;
    justify-content: center;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    border-radius: var(--br-1);
}

.cxbtnhead1 {
    color: var(--cxcolor-7);
    background: var(--cxopcolor-5);
    transition: all .15s;
}

.cxbtnhead1:hover {
    background: var(--cxcolor-7);
    color: #fff;
}

.cxbtnhead1only {
    background: var(--cxcolor-7);
    color: #fff;
    transition: all .15s;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cxcolor-7) 25%, transparent);
}

.cxbtnhead1hover {
    background: var(--cxcolor-7);
    color: #fff;
    transition: all .15s;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cxcolor-7) 25%, transparent);
}

.cxbtnhead1hover:hover {
    color: var(--cxcolor-7);
    background: var(--cxopcolor-5);
}

.cxbtnhead2 {
    color: var(--mainsec);
    background: var(--cxopcolor-3);
    transition: all .15s;
}

.cxbtnhead2:hover {
    background: var(--mainsec);
    color: #fff !important;
}

.cxbtnhead2only {
    background: var(--mainsec);
    color: #fff;
    transition: all .15s;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mainsec) 25%, transparent);
}

.cxbtnhead2hover {
    background: var(--mainsec);
    color: #fff;
    transition: all .15s;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mainsec) 25%, transparent);
}

.cxbtnhead2hover:hover {
    color: var(--mainsec);
    background: var(--cxopcolor-3);
}

.cxbtnhead3 {
    color: var(--cxcolor-1);
    background: var(--cxopcolor-4);
    transition: all .15s;
}

.cxbtnhead3:hover {
    background-color: var(--cxcolor-1);
    color: #fff;
}

.cxbtnhead3only {
    background-color: var(--cxcolor-1);
    color: #fff;
    transition: all .15s;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cxcolor-1) 25%, transparent);
}

.cxbtnhead3hover {
    background-color: var(--cxcolor-1);
    color: #fff;
    transition: all .15s;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cxcolor-1) 25%, transparent);
}

.cxbtnhead3hover:hover {
    color: var(--cxcolor-1);
    background: var(--cxopcolor-4);
}

.cxbtnhead4 {
    color: var(--cxcolor-9);
    background-color: var(--cxopcolor-6);
    transition: all .15s;
}

.cxbtnhead4:hover {
    background-color: var(--cxcolor-9);
    color: #fff;
}

.cxbtnhead4only {
    background-color: var(--cxcolor-9);
    color: #fff;
    transition: all .15s;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cxcolor-9) 25%, transparent);
}

.cxbtnhead4hover {
    background-color: var(--cxcolor-9);
    color: #fff;
    transition: all .15s;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cxcolor-9) 25%, transparent);
}

.cxbtnhead4hover:hover {
    color: var(--cxcolor-9);
    background-color: var(--cxopcolor-6);
}

.cxbtnhead5 {
    color: var(--cxcolor-15);
    background: var(--cxopcolor-11);
    transition: all .15s;
}

.cxbtnhead5:hover {
    background-color: var(--cxcolor-15);
    color: #fff;
}

.cxbtnhead5only {
    background-color: var(--cxcolor-15);
    color: #fff;
    transition: all .15s;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cxcolor-15) 25%, transparent);
}

.cxbtnhead5hover {
    background-color: var(--cxcolor-15);
    color: #fff;
    transition: all .15s;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cxcolor-15) 25%, transparent);
}

.cxbtnhead5hover:hover {
    color: var(--cxcolor-15);
    background: var(--cxopcolor-11);
}

.cxbtnhead6 {
    color: var(--cxcolor-16);
    background: var(--cxopcolor-12);
    transition: all .15s;
}

.cxbtnhead6:hover {
    background-color: var(--cxcolor-16);
    color: #fff;
}

.cxbtnhead6only {
    background-color: var(--cxcolor-16);
    color: #fff;
    transition: all .15s;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cxcolor-16) 25%, transparent);
}

.cxbtnhead6hover {
    background-color: var(--cxcolor-16);
    color: #fff;
    transition: all .15s;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cxcolor-16) 25%, transparent);
}

.cxbtnhead6hover:hover {
    color: var(--cxcolor-16);
    background: var(--cxopcolor-12);
}

.cxchreport {
    height: 40px;
    width: 40px;
    border: none;
}

.cxnotificationboth {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 6px;
}

.cxnotificationicon {
    display: flex;
    justify-content: center;
}

.cxnotificationsno {
    font-size: 12px;
    color: var(--text-color-h);
}

.cxnotificationicon i {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cxbgmainthi);
    color: var(--main);
    margin-bottom: 10px;
    border-radius: var(--br-0);

}

.cxnotification-empty-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 8px 4px;
}

.cxnotification-empty-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cxbgmainthi);
    border: 1.5px solid var(--cxbcolor);
}

.cxnotification-empty-icon i {
    font-size: 18px;
    color: var(--text-color-h);
}

.cxnotification-empty-list span {
    font-size: 12px;
    color: var(--text-color-h);
    line-height: 1.45;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.cxclbg-1 {
    background-color: var(--cxbgmainthi);
    min-height: 648px;
    border-top-left-radius: var(--br-0);
    border-bottom-left-radius: var(--br-0);
    border: 1px solid var(--cx-boxcolor-1);
    border-right: 0;
}

.cxclbg-2 {
    background-color: var(--cxbgmainsec);
    min-height: 648px;
    border-top-right-radius: var(--br-0);
    border-bottom-right-radius: var(--br-0);
    border: 1px solid var(--cx-boxcolor-1);
}

.cxNopending {
    flex-direction: column;
    text-align: center;
    padding-top: 20px;
}

.cxnoPi i {
    font-size: var(--fs-4);
    background-color: var(--cxopcolor-3);
    padding: 10px;
    border-radius: var(--br-0);
    color: var(--main);
    margin-bottom: 10px;
}

.cxpendingorderTitle {
    font-weight: 500;
    text-transform: uppercase;
}

div.cxpendingorderList {
    padding: 20px;
    border-bottom: 1px solid var(--cx-boxcolor-1);
}

.cxclimg img {
    max-width: 45px;
    max-height: 45px;
    /* 50px */
    min-height: 45px;
    /* 50px */
    min-width: 45px;
    /* 50px */
    margin-right: 15px;
    border-radius: var(--br-1);
}

.cxcliname {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.cxclilastmsg {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    font-size: var(--fs-0);
    color: var(--text-color-h);
}

.loadmore {
    border: none;
    background-color: var(--mainsec);
    color: #fff;
    border-radius: var(--br-0);
    padding: 10px 15px;
    width: 100%;
    transition: all .15s;
}

.loadmore:hover {
    opacity: .9;
}

.cxchatLM {
    margin-top: 40px;
}

.cxclinfo {
    width: 210px;
}

.cxchatListM {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 15px;
}

.cxchatList {
    padding: 15px;
    background-color: var(--cxbmainfo);
    transition: all .15s;
    cursor: pointer;
    border-radius: var(--br-0);
}

.cxchatList:hover {
    background-color: var(--cxbgmainsec);
}

.cxchatList.active {
    padding: 15px;
    background-color: var(--mainsec);
    border-radius: var(--br-0);
    transition: all .15s;
    color: #fff;
    cursor: pointer;
}

.cxcheader {
    padding: 15px;
    border-bottom: 1px solid var(--cxbcolor);
    background-color: var(--cxbgmainthi);
    display: flex;
    align-items: center;
}

.cxcinfo {
    display: flex;
    flex-direction: column;
    margin-right: auto;
}

.cxcinfo span {
    font-weight: 500;
    transition: all .15s;
    color: var(--text-color);
}

.cxcinfo a:hover {
    opacity: .9;
}

.cxclastT.offline {
    font-size: 10px;
    background-color: var(--cxopcolor-4);
    padding: 2px 8px;
    text-align: center;
    border-radius: 6px;
    color: var(--cxcolor-1);
    cursor: default;
}

.cxclastT.online {
    font-size: 10px;
    background-color: var(--cxopcolor-5);
    padding: 2px 8px;
    text-align: center;
    border-radius: 6px;
    color: var(--cxcolor-7);
    cursor: default;
}

.cxcof.on {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--cxcolor-6);
    cursor: default;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
    animation: cx-online-pulse 1.8s ease-out infinite;
}

.cxcarea {
    padding: 15px;
}

.cxcof.of {
    width: 10px;
    height: 10px;
    border-radius: 50% !important;
    background-color: var(--cxcolor-1);
    border-radius: var(--br-0);
    cursor: default;
    opacity: 0.7;
    animation: cx-offline-breathe 2.4s ease-in-out infinite;
}

@keyframes cx-online-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
    }

    70% {
        transform: scale(1.08);
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@keyframes cx-offline-breathe {

    0%,
    100% {
        opacity: 0.55;
        transform: scale(1);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.03);
    }
}

small.cxminidate {
    text-align: center;
    display: block;
    margin-bottom: 15px;
    color: var(--text-color-2);
    font-size: 11px;
    font-weight: 500;
    opacity: 0.45;
    position: relative;
}

.cxcmsgs {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 485px;
    overflow-y: auto;
    overflow-x: hidden;
}

.cxcleft,
.cxcright {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
    position: relative;
}

.cxcleft .cxcmsgD {
    align-self: flex-start;
    margin-bottom: 5px;
    color: var(--cxcolor-12);
    font-size: 11px;
    font-weight: 500;
}

.cxcright {
    align-items: flex-end;
}

.cxcright .cxcmsgD {
    align-self: flex-end;
    margin-bottom: 5px;
    color: var(--cxcolor-12);
    font-size: 11px;
    font-weight: 500;
}

li.cxcright .cxcmsg {
    background-color: var(--cxopcolor-7);
    color: var(--cxcolor-11);
    padding: 10px;
    border-radius: var(--br-0);
    font-size: 13px;
    width: 50%;
}

li.cxcleft .cxcmsg {
    background-color: var(--cxcolor-13);
    color: var(--cxcolor-11);
    padding: 10px;
    border-radius: var(--br-0);
    font-size: 13px;
    width: 50%;
}

.cxcmsgread {
    letter-spacing: -.5em;
    color: var(--cxcolor-2);
    padding: 0 8px;
    display: flex;
    justify-content: flex-end;

}

.cxcreceived,
.cxcrejected,
.cxcreceivedsec,
.cxcrejectedsec,
.cxchatordersbtn {
    margin-top: 10px;
    padding: 10px;
    border: none;
    transition: all .15s;
    cursor: pointer;
}

.cxcreceived:hover {
    background-color: var(--cxcolor-6);
    color: #fff;
}

.cxcrejected:hover {
    background-color: var(--cxcolor-1);
    color: #fff;
}

.cxcreceivedsec {
    background-color: var(--cxcolor-6);
    color: #fff;
}

.cxcrejectedsec {
    background-color: var(--cxcolor-1);
    color: #fff;
}

.cxchatordersbtn:hover {
    background-color: var(--cxcolor-6);
    color: #fff;
}

.cxcotomsgtitle {
    font-size: var(--fs-1);
}

.cxcotoprod {
    display: flex;
    flex-direction: column;
    list-style: none;
    background-color: var(--cxopcolor-7);
    border: 1px solid var(--cxcolor-10);
    padding: 15px;
    border-radius: var(--br-0);
    text-align: center;
    margin: 15px 0;
}

.cxcotoprodsec {
    display: flex;
    flex-direction: column;
    list-style: none;
    background-color: var(--cxopcolor-7);
    color: var(--cxcolor-11);
    border: 1px solid var(--cxcolor-10);
    padding: 15px;
    border-radius: var(--br-0);
    text-align: center;
    margin: 15px 0;
}

.cxcotoprodthi {
    list-style: none;
    background-color: var(--cxopcolor-7);
    color: var(--cxcolor-11);
    border: 1px solid var(--cxcolor-10);
    padding: 15px;
    border-radius: var(--br-0);
    text-align: center;
    margin: 15px 0;
}

.cxcwrite {
    margin-top: 15px;
}

.cxcotomsgtitle {
    flex-direction: column;
    font-size: 18px;
    gap: 5px;
}

.cxcotomsgtitle span {
    font-size: var(--fs-1);
}

.modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90vh;
}

.cxcreport-content {
    max-width: 500px;
    margin: auto;
}

.cxcreport-header {
    background-color: var(--cxbgmainsec);
    color: var(--text-color);
}

.cxcreport-title {
    font-size: 16px;
}

.cxcreport-body {
    padding: 20px;
    background-color: var(--cxbgmainsec);
}

.cxcreport-select,
.cxcreport-textarea {
    border: 1px solid #ddd;
    border-radius: 5px;
}

.cxcreport-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background-color: var(--cxbgmainsec);
}

.cxcreport-submit {
    width: 100%;
    color: #fff;
    border: none;
}

.modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90vh;
}

.cxcreport-content {
    max-width: 500px;
    margin: auto;
}

.cxcreport-header {
    background-color: var(--cxbgmainsec);
    color: var(--text-color);
}

.cxcreport-title {
    font-size: 16px;
}

.cxcreport-body {
    padding: 20px;
    background-color: var(--cxbgmainsec);
}

.cxcreport-select,
.cxcreport-textarea {
    border: 1px solid #ddd;
    border-radius: 5px;
}

.cxcreport-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background-color: var(--cxbgmainsec);
}

.cxcreport-submit {
    width: 100%;
    color: #fff;
    border: none;
}

.modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90vh;
}

.cxctip-content {
    max-width: 500px;
    margin: auto;
}

.cxctip-header {
    background-color: var(--cxbgmainsec);
    color: var(--text-color);
}

.cxctip-title {
    font-size: 16px;
}

.cxctip-body {
    padding: 20px !important;
    background-color: var(--cxbgmainsec);
}

.cxctip-select {
    border: 1px solid #ddd;
    border-radius: 5px;
}

.cxctip-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background-color: var(--cxbgmainsec);
}

.cxsmidbg {
    background-color: var(--cxbgmainsec);
    border-top-right-radius: var(--br-1-5);
    border-bottom-right-radius: var(--br-1-5);
    padding: 20px;
}

.cxsspbg {
    background-color: var(--cxbgmainsec);
    border-top-left-radius: var(--br-1-5);
    border-bottom-left-radius: var(--br-1-5);
    padding: 20px;
}

.cxsspbg,
.cxsmidbg {
    margin-top: 0;
}

.cxctip-submit {
    width: 100%;
    color: #fff;
    border: none;
}

.cxsimg {
    background-color: var(--cxbgmainsec);
    border-radius: var(--br-1-5);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Kare görünüm için */
    position: relative;
    overflow: hidden;
}

.cxsimg .swiper-slide {
    width: 100%;
    height: 100%;
}

.cxsimg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* veya cover, tercihinize göre */
    object-position: center;
    cursor: pointer;
}


.cxssimg {
    width: 80px;
    height: 80px;
    border-radius: var(--br-0);
}

.cxssimg img {
    border-radius: var(--br-0);
}

.cxsstm {
    flex-direction: column;
}

.cxssibg {
    background-color: var(--cxbgmainfou);
    padding: 15px;
}

.cxssellerinfo {
    border-radius: var(--br-0);
}

.cxsseller {
    border-radius: var(--br-0);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cxssmiddle {
    background-color: var(--cxbmainfo);
    padding: 10px;
    border-radius: var(--br-0);
}



.cxsslastseen {
    width: 100%;
    font-size: var(--fs-0);
    padding: 5px 0;
}

.cxssbottom {
    padding: 0 15px 0 15px !important;
}

.cxssblsonof {
    padding: 5px 8px;
    border-radius: var(--br-0);
    width: 60%;
    text-align: center;
}

.cxssblinks .cxssblmsg,
.cxssblsms {
    padding: 10px 15px;
    text-align: center;
}

/* Detail page seller card refresh (scoped) */
.cxsDetail .cxssibg {
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    padding: 15px;
}

.cxsDetail .cxsseller {
    gap: 12px;
}

.cxsDetail .cxssimg img {
    border-radius: 12px;
    border: 1px solid var(--cxbcolor);
}

.cxssname {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Store profil sayfası: mağaza adı + rozetleri büyüt */
.cxsprofile .cxspinfo .cxssname {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.15;
}

.cxsprofile .cxspinfo .cxssbadges {
    margin-top: 0;
    gap: 6px;
    display: inline-flex;
    align-items: center;
}

.cxsDetail .cxsstm .cxssname a {
    font-weight: 700;
}

.cxsDetail .cxssbadges-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cxsDetail .cxssstatsline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.cxsDetail .cxssratingchip,
.cxsDetail .cxsssuccesschip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--cxbgmainfou);
    border: 1px solid var(--cxbcolor);
    font-size: 12px;
    line-height: 1;
}

.cxsDetail .cxssratingchip i {
    color: #22c55e;
}

.cxsDetail .cxsssuccesschip i {
    color: var(--mainsec);
}

.cxsDetail .cxssratingchip strong {
    font-weight: 700;
    color: var(--text-color);
}

.cxsDetail .cxssratingchip small {
    color: var(--text-color-h);
    font-size: 11px;
}

.cxsDetail .cxssheader-actions {
    margin-left: auto;
}

.cxsDetail .cxssother {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: var(--br-1);
    background: var(--cxbgmainfou);
    border: 1px solid var(--cxbcolor);
}

.cxsDetail .cxssmiddle {
    background: var(--cxbgmainfou);
    border: 1px solid var(--cxbcolor);
    padding: 10px 12px;
}

.cxsDetail .cxssmtotal {
    gap: 10px;
}

.cxsDetail .cxsssun {
    gap: 8px;
}

.cxsDetail .cxssmsuccessful,
.cxsDetail .cxssmunsuccessful {
    border: 1px solid transparent;
}

.cxsDetail .cxssbottom {
    padding: 0 !important;
}

.cxsDetail .cxsslastcomments .cxsslcbox {
    background: var(--cxbgmainfou);
    border: 1px solid var(--cxbcolor);
    border-radius: var(--br-1);
    padding: 10px;
}

.cxsDetailHeader {
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxsifs {
    padding: 10px;
    background-color: var(--cxopcolor-7);
    border-radius: var(--br-0);
    color: var(--cxcolor-11);
}

.cxsmdinfo {
    padding-left: 15px;
}

.cxsmdoffer,
.cxsmdbuy {
    border: none;
    transition: all .15s;
}

.cxsmdbuy {
    background-color: var(--mainsec);
    border: none;
    width: 100%;
    transition: all .15s;
    color: #fff;
    border-radius: var(--br-0);
    font-weight: 500;
    font-size: var(--fs-1);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mainsec) 25%, transparent);
}

.cxsmdbuy i {
    margin-right: 5px;
}

.cxsmdbuy:hover {
    opacity: .9;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--mainsec) 32%, transparent);
}

.cxsmdoffer {
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cxopcolor-21);
    color: var(--cxcolor-21);
    transition: all .15s ease;
    border: 2px solid var(--cxopcolor-21-hover);
    border-radius: var(--br-1);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxsmdoffer:hover {
    color: var(--cxcolor-21-hover);
    filter: brightness(1.2);
}

.cxs-buy-group {
    display: flex;
    width: 100%;
    align-items: center;
    height: 45px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxs-buy-group .cxs-buy-main-btn,
.cxs-buy-group .cxs-buy-icon-btn {
    border-radius: 0;
    box-shadow: none;
}

.cxs-buy-group > .cxs-buy-icon-btn:first-child {
    border-top-left-radius: var(--br-1);
    border-bottom-left-radius: var(--br-1);
}

.cxs-buy-group > .cxs-buy-main-btn:last-child {
    border-top-right-radius: var(--br-1);
    border-bottom-right-radius: var(--br-1);
}

.cxs-buy-group > .cxs-buy-main-btn:only-child {
    border-radius: var(--br-1);
}

.cxs-buy-group .cxs-buy-main-btn:hover,
.cxs-buy-group .cxs-buy-icon-btn:hover {
    box-shadow: none;
}

.cxs-buy-main-btn,
.cxs-buy-icon-btn {
    border: 0;
    transition: all .15s;
    color: var(--text-color-6);
}

.cxs-buy-main-btn {
    flex: 1;
    background-color: var(--main);
    font-size: var(--fs-0);
    font-weight: 600;
    padding: 0 15px;
    color: var(--text-color-6);
    border-radius: var(--br-1-3);
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
}

.cxs-buy-icon-btn {
    width: 45px;
    min-width: 45px;
    height: 45px;
    background-color: var(--mainsec);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-6);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mainsec) 25%, transparent);
}

.cxs-buy-main-btn:hover,
.cxs-buy-icon-btn:hover {
    opacity: .9;
    color: var(--text-color-6);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--main) 32%, transparent);
}

.cxs-buy-icon-btn i {
    margin: 0;
}

.cxs-buy-notify-btn {
    background-color: var(--cxopcolor-50);
    color: var(--cxcolor-50);
    box-shadow: none;
    cursor: pointer;
    border-radius: var(--br-1);
}

.cxs-buy-notify-btn:hover {
    background-color: var(--cxopcolor-47);
    color: var(--cxcolor-50);
    opacity: 0.9;
    box-shadow: none;
}

.cxs-buy-notify-btn.notify-stock-active {
    background-color: var(--cxopcolor-41);
    color: var(--cxcolor-41);
    cursor: default;
}

.cxs-buy-notify-btn.notify-stock-active:hover {
    background-color: var(--cxopcolor-41-hover);
    color: var(--cxcolor-41-hover);
    opacity: 1;
}

/* game-products-table.blade.php: store/detail.blade.php buton stili (sayfaya özel) */
.cxgp-buy-group {
    display: inline-flex;
    width: 100%;
    border-radius: var(--br-1);
    overflow: hidden;
    align-items: center;
    height: 45px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxgp-buy-main-btn,
.cxgp-buy-icon-btn {
    border: 0;
    transition: all .15s;
    color: var(--text-color-6);
}

.cxgp-buy-main-btn {
    flex: 1;
    background-color: var(--main);
    font-size: var(--fs-0);
    font-weight: 600;
    padding: 0 15px;
    color: var(--text-color-6);
    height: 45px;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
}

.cxgp-buy-icon-btn {
    width: 45px;
    min-width: 45px;
    height: 45px;
    background-color: var(--mainsec);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-6);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mainsec) 25%, transparent);
}

.cxgp-buy-main-btn:hover,
.cxgp-buy-icon-btn:hover {
    opacity: .9;
    color: var(--text-color-6);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--main) 32%, transparent);
}

.cxgp-buy-icon-btn i {
    margin: 0;
}

/* Game products table: stokta yok butonu (sepete ekle stili) */
.cxgp-buy-group--disabled {
    pointer-events: none;
    opacity: 0.65;
    filter: grayscale(0.15);
}

.cxgp-buy-group--disabled .cxgp-buy-main-btn,
.cxgp-buy-group--disabled .cxgp-buy-icon-btn {
    cursor: not-allowed;
}

.cxgp-buy-group--disabled .cxgp-buy-main-btn {
    background-color: var(--cxopcolor-50);
    color: var(--cxcolor-50);
}

.cxgp-buy-group--disabled .cxgp-buy-icon-btn {
    background-color: var(--cxopcolor-47);
    color: var(--cxcolor-47);
}

.cxgp-buy-group--notify .cxgp-buy-main-btn {
    background-color: var(--cxopcolor-50);
    color: var(--cxcolor-50);
    box-shadow: none;
}

.cxgp-buy-group--notify .cxgp-buy-icon-btn {
    background-color: var(--cxopcolor-47);
    color: var(--cxcolor-47);
    box-shadow: none;
}

.cxgp-buy-group--notify:hover .cxgp-buy-main-btn,
.cxgp-buy-group--notify:hover .cxgp-buy-icon-btn {
    opacity: 0.85;
}

.cxgp-buy-group--notify.notify-stock-active .cxgp-buy-main-btn {
    background-color: var(--cxopcolor-41);
    color: var(--cxcolor-41);
    cursor: pointer;
}

.cxgp-buy-group--notify.notify-stock-active .cxgp-buy-icon-btn {
    background-color: var(--cxopcolor-42);
    color: var(--cxcolor-42);
    cursor: pointer;
}

/* cxproduct-buttons içindeki eski flex kuralları buy-now sınıfını eziyor; sadece bu sayfadaki yeni grup için düzelt */
.cxgp-buy-group .buy-now,
.cxgp-buy-group .buy-now-extra {
    flex: 0 0 45px;
    width: 45px;
    min-width: 45px;
    padding: 0;
}

.cxgp-buy-group .add-cart,
.cxgp-buy-group .add-cart-extra {
    flex: 1 1 auto;
    min-width: 0;
}

.cxsmdfunction {
    padding: 15px;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
}

.cxsmdprice {
    display: flex;
    font-size: 16px;
    font-weight: 600;
    align-items: center;
    position: relative;
}

.cxsmdprice .listingCardPriceLine {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cxsmdprice .cxsmdpicon > i {
    position: relative;
    background-color: var(--cxopcolor-24);
    color: var(--cxcolor-24);
    margin-right: 10px;
    border-radius: var(--br-1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

/* indirim chip içindeki ikon, fiyat ikon stilini almasın */
.cxsmdprice .listingCardDiscountChip i {
    background: none;
    color: inherit;
    width: auto;
    height: auto;
    margin: 0 6px;
    border-radius: 0;
    display: inline;
    font-size: inherit;
    filter: none;
}

/* Ürün detay fiyatında chip biraz daha büyük dursun (kartları etkilemez) */
.cxsmdprice .listingCardDiscountChip {
    padding: 4px 10px;
    font-size: 10px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--cxcolor-5) 22%, transparent);
    background: color-mix(in srgb, var(--cxopcolor-5) 80%, transparent);
    letter-spacing: .2px;
}

.cxsmdprice .total-price {
    font-size: 17px;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.2px;
}

.cxsmdprice .oldprice {
    font-size: 12px;
    color: var(--cxcolor-1);
    text-decoration: line-through;
    margin-bottom: -5px;
    z-index: 999;
}

.cxsmdpdiscount {
    text-decoration: none !important;
    color: var(--cxcolor-9) !important;
    padding: 3px;
    border-radius: var(--br-0);
    background-color: var(--cxopcolor-6);
    position: absolute;
    top: -10px;
    right: 2px;
    font-size: var(--fs-0);
}

.cxsmdmid,
.cxsslcbdate {
    color: var(--text-color-h);
}

.cxsslcbrname span i,
.cxsmbcname span i {
    color: var(--main);
    font-size: var(--fs);
}

.cxsmdmid .cxsmdname {
    font-weight: 600;
}

.cxsmdmid .cxsmddesc {
    font-weight: 300;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
    transition: 0.5s;
}

.favorite {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    text-decoration: none;
    border-radius: var(--br-1);
    border: 2px solid var(--cxopcolor-49-hover);
    background: var(--cxopcolor-48);
}

.favorite:hover {
    color: var(--cxcolor-48);
}

.favoriteBtn {
    color: var(--text-color);
    font-size: var(--fs-1);
    transition: all .15s ease;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.favoriteBtnHover {
    background-color: var(--cxopcolor-47);
    color: var(--cxcolor-48);
    border-color: color-mix(in srgb, var(--cxcolor-48) 30%, transparent);
    box-shadow: 0 0 28px color-mix(in srgb, var(--cxcolor-48) 18%, transparent);
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.favorite[aria-busy="true"],
.favorite[aria-disabled="true"] {
    pointer-events: none;
    opacity: .55;
    cursor: wait;
}

/* İlan detay — favori (pembe/kırmızı) & şikayet (site vurgu rengi) */
.cxsDetailHeader .cxsDetailActionGroup {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cxsDetailHeader .cxsDetailFavBtn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    text-decoration: none;
    border-radius: var(--br-1);
    border: 2px solid rgba(232, 93, 122, 0.38);
    background: rgba(232, 93, 122, 0.12);
    color: #e85d7a;
    font-size: var(--fs-1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.cxsDetailHeader .cxsDetailFavBtn i {
    transition: transform 0.25s cubic-bezier(0.34, 1.35, 0.64, 1), color 0.25s ease;
}

.cxsDetailHeader .cxsDetailFavBtn:hover {
    background: rgba(232, 93, 122, 0.2);
    border-color: rgba(232, 93, 122, 0.5);
    color: #ff6b88;
}

.cxsDetailHeader .cxsDetailFavBtn:active {
    transform: scale(0.92);
}

.cxsDetailHeader .cxsDetailFavBtnActive {
    background: rgba(232, 93, 122, 0.24);
    color: #ff4d6d;
    border-color: rgba(232, 93, 122, 0.58);
    box-shadow: 0 0 18px rgba(232, 93, 122, 0.38);
}

.cxsDetailHeader .cxsDetailFavBtnActive i {
    transform: scale(1.1);
}

.cxsDetailHeader .cxsDetailFavBtn.is-busy {
    pointer-events: none;
    cursor: wait;
}

.cxsDetailHeader .cxsDetailReportBtn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    text-decoration: none;
    border-radius: var(--br-1);
    border: none;
    background: var(--cxopcolor-47);
    color: var(--cxcolor-47);
    font-size: var(--fs-1);
    backdrop-filter: blur(30px);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
    transition: background 0.15s ease, color 0.15s ease;
}

.cxsDetailHeader .cxsDetailReportBtn:hover {
    background: var(--cxopcolor-47-hover);
    color: var(--cxcolor-47);
}

.cxsDetailHeader .cxsDetailReportBtnPending {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--br-1);
    background: var(--cxopcolor-46);
    color: var(--cxcolor-46);
    font-size: var(--fs-1);
    opacity: .85;
    cursor: default;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
}

.cxsname {
    font-size: 16px;
    font-weight: 600;
}

.cxsmdcdet {
    color: var(--main);
}

.cxsmdinfo-container {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: scroll;
    padding: 0 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
}

.cxsmdinfo-container::-webkit-scrollbar {
    display: none;
}

.cxsmditem {
    flex: 0 0 auto;
    min-width: 150px;
    margin-right: 15px;
    scroll-snap-align: start;
    text-align: center;
}

.cxsslcbox {
    border: 1px solid var(--cxbcolor);
    padding: 5px 10px;
    border-radius: var(--br-0);
    background-color: var(--cxbmainfo);
}

.cxsslcbright {
    flex: 1;
    color: var(--text-color);
}

.cxssrating {
    margin: 25px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cxssratingmain {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--fs-3);
    font-weight: bold;
    color: white;
    text-align: center;
    background: var(--main);
    transition: background 0.5s ease;
}

.cxssrmtext {
    z-index: 2;
    text-shadow: 0px 0px 20px #000000;
}

.cxssratingmain::before {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    background: inherit;
    border-radius: 50%;
    opacity: 0.4;
    animation: expand 2s infinite ease-in-out;
}

@keyframes expand {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.2);
        opacity: 0;
    }
}

.cxssbadges {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
}

.cxssbadge {
    cursor: pointer;
}

.cxssbadge img {
    width: 21px;
    height: 21px;
    object-fit: contain;
}

.cxsutbname {
    padding: 20px 15px;
    background: var(--cxbgmainfou);
    border-top-right-radius: var(--br-0);
    border-top-left-radius: var(--br-0);
    font-size: var(--fs-3);
    font-weight: 600;
}

.cxsutbitems {
    display: flex;
    gap: 10px;
    font-size: var(--fs-2);
    padding: 15px;
    background-color: var(--cxbmainfo);
    flex-wrap: wrap;
    border-bottom-right-radius: var(--br-0);
    border-bottom-left-radius: var(--br-0);
}

.cxsutbitem {
    background-color: var(--cxopcolor-7);
    padding: 10px 15px;
    border-radius: var(--br-0);
    font-size: var(--fs-1);
    font-weight: 500;
}

.cxsutbitems::-webkit-scrollbar {
    display: none;
}

.cxsumdesc {
    font-size: var(--fs-1);
    padding: 0 15px;
    padding-bottom: 20px;
    overflow-wrap: break-word;
}

.cxs-detail-attrs-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 0 20px;
}

.cxs-detail-attr-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1);
    background: var(--cxbgmainthi);
    min-height: 76px;
}

.cxs-detail-attr-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-color-h);
    line-height: 1.2;
}

.cxs-detail-attr-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.3;
    word-break: break-word;
}

.cxs-detail-section-title {
    padding: 15px;
    padding-top: 20px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.cxs-detail-section-title-secondary {
    margin-top: 4px;
    margin-bottom: 0;
}

.cxsumdesc * {
    margin-bottom: 5px;
}

.cxsumdesc ul {
    margin-left: 25px;
    font-size: var(--fs-1);
}

.cxsumdesc ol {
    margin-left: 20px;
    font-size: var(--fs-1);
}

@media (max-width: 1200px) {
    .cxs-detail-attrs-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .cxs-detail-attrs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .cxs-detail-attrs-grid {
        grid-template-columns: 1fr;
        padding: 0 15px;
    }

    .cxs-detail-section-title {
        margin-left: 15px;
        margin-right: 15px;
    }
}

.cxsmbhb {
    background-color: var(--cxbmainfo);
    padding: 0 20px;
    border-top-right-radius: var(--br-0);
    border-top-left-radius: var(--br-0);
    font-size: var(--fs-1);
}

.cxsmbhb li button {
    background: transparent;
    color: var(--text-color);
    border: none;
    transition: all .15s;
    padding: 20px;
}

.cxsmbhb li button:hover {
    background: transparent;
    color: var(--main);
    border-bottom: 1px solid var(--main);
}

.cxsmbhb li button.active {
    background: transparent;
    color: var(--main);
    border-bottom: 1px solid var(--main);
}

.cxsprofile .cxsmidbody .cxstabpane {
    display: none;
}

.cxsprofile .cxsmidbody .cxstabpane.active-content {
    display: block;
}

.cxsmbcmain {
    display: flex;
    font-size: var(--fs-2);
    padding: 20px;
    background-color: var(--cxbmainfo);
    border-bottom-right-radius: var(--br-0);
    border-bottom-left-radius: var(--br-0);
    margin-bottom: 10px;
}

.cxsmbcright {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cxsmbcrlimg {
    padding-left: 20px;
}

.cxsmbcmain {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.cxsmbcrl {
    flex: 1;
}

.cxsmbcrl+.cxsmbcrl::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--cxbcolor);
    left: 50%;
    transform: translateX(-1px);
}


.cxsmbcrl {
    border-bottom: none;
}

.close-btn {
    background-color: var(--cxcolor-1);
    color: var(--text-color);
    border: none;
    border-radius: var(--br-0);
    width: 30px;
    height: 30px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.close-btn:hover {
    background-color: #d32f2f;
}

.cxsmbccomment {
    font-size: var(--fs-0);
    margin-bottom: 10px;
}

.cxsmbcrright {
    padding-right: 20px;
}

.cxsmbcbuttons button {
    border: none;
}

.cxsbmbcleftcenter {
    align-items: center;
}

.cxscmname {
    white-space: nowrap;
}

.cxprofileBanner {
    position: relative;
}

.cxprofileBannerMain {
    margin-top: 30px;
    margin-bottom: 0;
    width: 100%;
    z-index: 5;
}

.cxprofileBannerMain img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-top-left-radius: var(--br-1-5);
    border-top-right-radius: var(--br-1-5);
}

.cxspinfo {
    background-color: var(--cxbgmainsec);
    /*backdrop-filter: blur(50px);*/
    margin-top: 0;
    z-index: 100;
    position: relative;
    border-bottom-left-radius: var(--br-1-5);
    border-bottom-right-radius: var(--br-1-5);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

@media (max-width: 1200px) {
    .cxprofileBannerMain {
        margin-top: 30px;
    }

    .cxprofileBannerMain img {
        height: 220px;
    }
}

@media (max-width: 768px) {
    .cxprofileBannerMain {
        margin-top: 30px;
    }

    .cxprofileBannerMain img {
        height: 165px;
    }
}

.cxspitop {
    display: flex;
    gap: 16px;
    padding: 0 15px 6px;
}

.cxspimg {
    width: 124px;
    height: 124px;
    position: relative;
    border-radius: var(--br-1-5);
    overflow: visible;
    transform: translateY(-30px);
    margin-bottom: -24px;
    border: 4px solid var(--cxbcolor-2);
}

.cxspimg .cxspAvatar {
    width: 100%;
    height: 100%;
    border-radius: var(--br-1-5);
}

.spAvatarFrame {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    max-width: none;
    max-height: none;
    object-fit: fill;
    pointer-events: none;
    z-index: 2;
    border-radius: 0;
}

/* detail sayfası satıcı avatarı (38px) */
.cxs-detail-seller-inline-avatar .spAvatarFrame {
    inset: -6%;
    width: 114%;
    height: 114%;
    border-radius: 15px;
    border: none;
}

/* listing card satıcı logosu (28px) */
.listingCardStoreLogo .spAvatarFrame {
    inset: -11%;
    width: 118%;
    height: 118%;
    border-radius: 13px;
    border: none;
}

.cxspimg .cxspstatus {
    z-index: 3;
}

.cxspstatus {
    position: absolute;
    left: 50%;
    top: -8px;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -100%);
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1;
    border-radius: var(--br-1);
    background: var(--cxspstatus-bg, #2ecc71);
    color: #fff;
    box-shadow: 0 0 0 3px var(--cxspstatus-ring, rgba(46, 204, 113, 0.18)), 0 8px 14px rgba(0, 0, 0, 0.24);
    animation: cxspStatusPulse 2.2s ease-in-out infinite;
    z-index: 3;
}


.cxspstatus-text {
    white-space: nowrap;
}

.cxspstatus-online {
    --cxspstatus-bg: #24b15d;
    --cxspstatus-ring: rgba(46, 204, 113, 0.20);
    color: #fff;
}

.cxspstatus-offline {
    --cxspstatus-bg: #c23b36;
    --cxspstatus-ring: rgba(231, 76, 60, 0.20);
    color: #fff;
}

@keyframes cxspStatusPulse {

    0%,
    100% {
        box-shadow: 0 0 0 3px var(--cxspstatus-ring, rgba(46, 204, 113, 0.18)), 0 8px 14px rgba(0, 0, 0, 0.24);
    }

    50% {
        box-shadow: 0 0 0 6px var(--cxspstatus-ring, rgba(46, 204, 113, 0.18)), 0 10px 18px rgba(0, 0, 0, 0.28);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cxspstatus {
        animation: none;
    }
}


.cxpiname {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cxspnavs .nav {
    gap: 20px;
    align-items: center;
}

.cxspnavs .nav li a {
    padding: 10px 30px;
    border-radius: var(--br-0);
    transition: all .15s;
    background-color: var(--cxopcolor-7);
    font-size: var(--fs-1);
    color: var(--cxcolor-11) !important;

}

.cxspnavs .nav li a:hover {
    background-color: var(--mainsec);
    color: #fff !important;
}

.cxspnavs .nav li a i {
    margin-right: 5px;
}

.cxspibottom {
    padding-left: 15px;
}

.cxspopac {
    opacity: .8;
    font-size: var(--fs-1);
    margin-left: 5px;
}

.cxspnavs .nav li a.active {
    background-color: var(--mainsec);
    color: #fff !important;
}

/* Profil alt tab menusu duzeni */
.cxsprofile .cxspnavs {
    width: 100%;
    overflow: hidden;
}

.cxsprofile .cxspnavs .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cxsprofile .cxspnavs .nav .nav-item {
    margin: 0;
}

.cxsprofile .cxspnavs .nav .nav-item a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 48px;
    padding: 11px 20px;
    border-radius: var(--br-1-5);
    border: 1px solid var(--cxbcolor);
    background: linear-gradient(180deg, var(--cxbgmainfou), var(--cxbgmainsec));
    color: var(--text-color) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: all .18s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

.cxsprofile .cxspnavs .nav .nav-item a i {
    margin-right: 0;
    color: var(--text-color-h);
    font-size: 13px;
    transition: color .18s ease;
}

.cxsprofile .cxspopac {
    margin-left: 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--cxbcolor);
    color: var(--text-color-h);
    font-size: 13px;
    font-weight: 700;
    opacity: 1;
}

.cxsprofile .cxspnavs .nav .nav-item a:hover {
    border-color: var(--cxbcolor-3);
    background: linear-gradient(180deg, var(--cxbgmainsec), var(--cxbgmainfou));
    color: var(--text-color-6);
}

.cxsprofile .cxspnavs .nav .nav-item a:hover i {
    color: #fff;
}

.cxsprofile .cxspnavs .nav .nav-item a.active {
    border-color: transparent;
    background: linear-gradient(135deg, var(--mainsec), var(--main));
    color: var(--text-color-6) !important;
    box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.14), 0 8px 14px rgba(0, 0, 0, 0.24);
}

.cxsprofile .cxspnavs .nav .nav-item a.active i {

    color: var(--text-color-6);
}

.cxsprofile .cxspnavs .nav .nav-item a.active .cxspopac {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.26);

    color: var(--text-color-6);
}

@media (max-width: 992px) {
    .cxsprofile .cxspnavs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cxsprofile .cxspnavs .nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        min-width: max-content;
        padding-bottom: 6px;
        gap: 8px;
    }

    .cxsprofile .cxspnavs .nav .nav-item a {
        min-height: 42px;
        padding: 9px 14px;
        font-size: 13px;
    }
}

.cxpibtns {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cxpibtn {
    width: auto;
    padding: 10px 20px;
    border: none;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: var(--br-0);
    font-size: var(--fs-1);
    text-align: center;
    justify-content: center;
    white-space: nowrap;
}

/* Profil üst alanı aksiyon butonları (özel class) */
.cxspActionButtons {
    gap: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.cxspActionBtn {
    border: 1px solid transparent;
    border-radius: var(--br-1-3);
    min-height: 40px;
    padding: 8px 16px;
    font-size: var(--fs-1);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    text-decoration: none;
    transition: all .15s ease;
}

.cxspActionCol {
    align-items: center !important;
    align-self: center;
    margin-top: 0 !important;
    transform: none;
}

/* 768-991 arası: profil aksiyon butonları taşmasın */
@media (min-width: 768px) and (max-width: 991px) {
    .cxsprofile .cxspitop {
        gap: 10px;
        flex-wrap: wrap;
    }

    /* cxspitop bir .row değil; col-* class'ları flex içinde taşabiliyor */
    .cxsprofile .cxspitop>[class*="col-"] {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
    }

    .cxsprofile .cxspActionCol {
        width: 100%;
        justify-content: center !important;
    }

    .cxsprofile .cxspActionButtons {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .cxsprofile .cxspActionButtons .cxspActionBtn {
        padding: 8px 12px;
        font-size: 13px;
    }
}

.cxspActionBtnEdit {
    background: var(--cxopcolor-25);
    color: var(--cxcolor-25);
}

.cxspActionBtnEdit:hover {
    background: var(--cxopcolor-25-hover);
    color: var(--cxcolor-25-hover);
}

.cxspActionBtnOutline {
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
    color: var(--text-color);
}

.cxspActionBtnOutline:hover {
    background: var(--cxbgmainthi);
    border-color: var(--cxbcolor-3);
    color: var(--text-color);
}

.cxspActionBtnMembership,
.cxspActionBtnSms,
.cxspActionBtnMessage {
    background: transparent;
    color: var(--text-color);
}

.cxspActionBtnMembership:hover,
.cxspActionBtnSms:hover,
.cxspActionBtnMessage:hover {
    color: var(--cxcolor-25);
}

.cxspActionBtnFollow {
    border: 2px solid var(--cxbcolor);
    color: var(--text-color);
    background: var(--cxbgmainfou);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cxspActionBtnFollow:hover {
    border: 2px solid var(--cxbcolor-3);
    color: var(--text-color);
    background: var(--cxbgmainthi);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.cxspActionBtnFollowed {
    border: 2px solid var(--cxbcolor-3);
    color: var(--text-color);
    background: var(--cxbgmainthi);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cxspActionBtnFollowed:hover {
    border: 2px solid var(--cxbcolor);
    color: var(--text-color);
    background: var(--cxbgmainfou);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.cxspActionBtn:hover {}

.cxspBannerMeta {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
}

.cxspireg {
    position: absolute;
    right: 10px;
    bottom: 10px;
    border-radius: var(--br-1);
    padding: 10px 20px;
    font-size: 11px;
    color: #fff;
    font-weight: 700;
    backdrop-filter: blur(30px);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
}

.cxspBannerReportBtn {
    border-radius: var(--br-1);
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    color: var(--cxcolor-47);
    background: var(--cxopcolor-47);
    backdrop-filter: blur(30px);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.cxspBannerReportBtn:hover {
    background: var(--cxopcolor-47-hover);
    color: var(--cxcolor-47);
}

.cxspBannerReportPending {
    border-radius: var(--br-1);
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    color: var(--cxcolor-46);
    background: var(--cxopcolor-46);
    backdrop-filter: blur(30px);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    cursor: default;
    user-select: none;
}

.cxssellerdesc {
    font-size: var(--fs-1);
    background-color: var(--cxbgmainfou);
    border-radius: var(--br-0);
    color: var(--text-color-h);
}

.cxssdname {
    padding: 15px;
    font-size: var(--fs-2);
    border-bottom: 1px solid var(--cxbcolor);
    font-weight: 600;
}

.cxssdesc {
    font-size: var(--fs-1);
    padding: 15px;
    font-weight: 400;
}

input[type=checkbox] {
    margin-right: 5px;
}

input[type=checkbox]:checked {
    background-color: var(--mainsec) !important;
    color: #fff !important;
    border: 1px solid var(--mainsec) !important;
}

input[type=checkbox]:focus {
    border: 1px solid var(--mainsec) !important;
}


.cxsellerfilterXL {
    background-color: var(--cxbgmainfou);
    padding: 15px;
    border-radius: var(--br-0);
}

.cxsfilterXL {
    background-color: var(--cxbgmainfou);
    padding: 15px;
    border-radius: var(--br-0);
}

.cxsfright {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 30px;
}

.cxsfxlcheck ul {
    margin-bottom: 0 !important;
    display: flex;
    gap: 10px;
}

.cxsfxlcheck {
    display: flex;
    justify-content: start;
    flex: 1 0 0%;
}

.cxsfxlselect {
    display: flex;
    justify-content: end;
    flex: 0 0 auto;
}

.formControl-s {
    width: 70% !important;
}

.cxsfxlclist {
    font-size: var(--fs-0);
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
}

.cxsfxlclist input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cxsfxlcslider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cc1100;
    transition: .4s;
    border-radius: 7px;
}

.cxsfxlcslider:before {
    position: absolute;
    content: "";
    height: 1.1em;
    width: 1.1em;
    border-radius: 8px;
    left: 0.45em;
    bottom: 0.45em;
    background-color: #fff;
    transition: .4s;
}

.cxsfxlclist input:checked+.cxsfxlcslider {
    background-color: #21cc4c;
}

.cxsfxlclist input:checked+.cxsfxlcslider:before {
    transform: translateX(1.4em);
}

.cxfxlmain {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: var(--br-0);
}

.cxfxlmain span {
    font-size: var(--fs-1);
}

.cxsstip {
    text-decoration: none !important;
    background-color: var(--cxopcolor-5) !important;
    border-radius: var(--br-0);
    color: var(--cxcolor-7) !important;
    font-size: var(--fs-1);
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.cxsstipp {
    text-decoration: none !important;
    color: #fff !important;
    padding: 3px;
    border-radius: var(--br-0);
    background-color: var(--cxcolor-7) !important;
    position: absolute;
    top: -12px;
    right: -6px;
    padding: 3px 4px;
    font-size: var(--fs-0);
}

.cxssnotfound {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--cxbgmainfou);
    border-radius: var(--br-1-5);
    padding: 15px;
    text-align: center;
    font-size: var(--fs-1);
}

.cxssnotfound i {
    font-size: 30px;
    margin-bottom: 10px;
}

.cxssfdetail {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--cxbmainfo);
    border-radius: var(--br-0);
}

.cxssfdleft {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cxssfdright button {
    border: none !important;
}

.cxssfdlname {
    color: var(--text-color);
    transition: all .15s;
}

.cxssfdlname:hover {
    color: var(--text-color-h);
}

.cxssfdlfollowers {
    color: var(--text-color-h);
}

.cxcustcb input[type="checkbox"] {
    display: none;
    visibility: hidden;
}

.cxcustcb .cbx {
    margin: auto;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

.cxcustcb .cbx span {
    display: inline-block;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}

.cxcustcb .cbx span:first-child {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    transform: scale(1);
    vertical-align: middle;
    border: 1px solid #9098a9;
    transition: all 0.2s ease;
}

.cxcustcb .cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}

.cxcustcb .cbx span:first-child:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--mainsec);
    display: block;
    transform: scale(0);
    opacity: 1;
    border-radius: 50%;
}

.cxcustcb .cbx span:last-child {
    padding-left: 8px;
}

.cxcustcb .cbx:hover span:first-child {
    border-color: var(--mainsec);
}

.cxcustcb .inp-cbx:checked+.cbx span:first-child {
    background: var(--mainsec);
    border-color: var(--mainsec);
    animation: cxcustcb1 0.4s ease;
}

.cxcustcb .inp-cbx:checked+.cbx span:first-child svg {
    stroke-dashoffset: 0;
}

.cxcustcb .inp-cbx:checked+.cbx span:first-child:before {
    transform: scale(3.5);
    opacity: 0;
    transition: all 0.6s ease;
}

@keyframes cxcustcb1 {
    50% {
        transform: scale(0.9);
    }
}

.cxcustcb-small .cbx span:last-child {
    font-size: 12px;
    padding-left: 6px;
}

.cxcustcb-small .cbx span:first-child {
    width: 16px;
    height: 16px;
}

.cxcustcb-small .cbx span:first-child svg {
    top: 2px;
    left: 1.5px;
    height: 9px;
    width: 11px;
}

.cx-radio-group {
    margin-bottom: 20px;
}

.cx-radio-group .cx-radio-label-title {
    display: block;
    margin-bottom: 12px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
}

.cx-radio-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.cx-radio-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.cx-radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cx-radio-custom {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #9098a9;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.cx-radio-custom::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--mainsec);
    transition: all 0.2s ease;
}

.cx-radio-label:hover .cx-radio-custom {
    border-color: var(--mainsec);
}

.cx-radio-label input[type="radio"]:checked+.cx-radio-custom {
    border-color: var(--mainsec);
    background-color: transparent;
}

.cx-radio-label input[type="radio"]:checked+.cx-radio-custom::before {
    transform: translate(-50%, -50%) scale(1);
}

.cx-radio-text {
    color: var(--text-color);
    font-size: 14px;
    vertical-align: middle;
}

/*
.cx-radio-group-small .cx-radio-label-title {
    font-size: 12px;
    margin-bottom: 8px;
}*/

.cx-radio-group-small .cx-radio-text {
    font-size: 12px;
}

.cx-radio-group-small .cx-radio-custom {
    width: 16px;
    height: 16px;
    border-width: 1.5px;
    margin-right: 8px;
}

.cx-radio-group-small .cx-radio-custom::before {
    width: 8px;
    height: 8px;
}

.cxscproduct {
    position: relative;
    transition: all .15s;
}

.cxscproduct:hover {
    transform: scale(1.02);
}

.cxscproductbox {
    background-color: var(--cxbgmainfou);
    border-radius: var(--br-1-5);
    border: 2px solid var(--cxbcolor);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
    overflow: hidden;
}

.cxscpimg {
    position: relative !important;
    background-color: var(--cxbgmainfou);
    z-index: 2;
    overflow: hidden;
}

.cxscpimg img {
    object-fit: cover;
    aspect-ratio: 1 / 1.01;
    width: 100%;
    padding: 0;
    border-top-left-radius: var(--br-1-5);
    border-top-right-radius: var(--br-1-5);
}

img.cxauthorimage {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: var(--br-1);
}

.cxscpdetail {
    padding: 14px 15px 10px;
}

.cxscpbottom {
    padding: 12px 15px;
}

.cxscpseller {
    position: absolute;
    background-color: var(--cxopcolor-9);
    z-index: 2;
    width: 100%;
    padding: 5px;
    min-height: 40px;
    height: auto;
    bottom: 0;
    backdrop-filter: blur(4px);
}

.cxscpsname {
    font-size: var(--fs-1);
    color: var(--text-color2);
    font-weight: 500;
    transition: all .15s;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

}

.cxscpbot {
    background: var(--cxbgmainsec);
    border-bottom-left-radius: var(--br-1-5);
    border-bottom-right-radius: var(--br-1-5);
    z-index: 2;
    position: relative;
    overflow: hidden;
}

.cxscpseller a {
    display: flex;
    align-items: center;
}

.cxscpseller a img {
    margin-right: 6px;
    background: var(--mainsec);
    border-radius: var(--br-1);
}

.cxscpsdisc {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-1);
}

.cxscpgame {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 2;
    border-radius: var(--br-1);
    overflow: hidden;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
}

.cxscpgame img {
    width: 30px;
    height: 30px;
    padding: 3px;
    object-fit: contain;
}

.cxs-detail-hero-desc {
    margin-top: 6px;
    max-width: 720px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.5;
}

.cxs-detail-hero-desc p:last-child {
    margin-bottom: 0;
}

.cxs-detail-heading .cxs-detail-category-logo {
    position: static;
    right: auto;
    top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 45px;
    height: 45px;
}

.cxs-detail-seller-inline {
    margin-top: 20px;
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainsec);
    border-radius: var(--br-1-5);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxs-detail-seller-inline-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cxs-detail-seller-inline-avatar {
    position: relative;
}

.cxs-detail-seller-inline-avatar img {
    width: 38px;
    height: 38px;
    border-radius: var(--br-1);
    object-fit: cover;
    border: 1px solid var(--cxbcolor);
}

.cxs-detail-seller-inline-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 6px;
}

.cxs-detail-seller-inline-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.cxs-detail-seller-inline-name a {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.cxs-detail-seller-inline-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.cxs-detail-seller-inline-status .cxcof {
    display: inline-block;
    flex: 0 0 auto;
}

.cxs-detail-seller-inline-status.is-online {
    color: #22c55e;
}

.cxs-detail-seller-inline-status.is-offline {
    color: var(--text-color-h);
}

.cxs-profile-seller-inline-rating {
    display: inline-flex;
    align-items: center;
    gap: 0;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.cxpiname .cxs-profile-seller-inline-rating {
    margin-top: 6px;
}

.cxs-profile-seller-inline-rating-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--br-1);
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainfou);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxs-profile-seller-inline-rating i {
    background-color: var(--mainsix);
    color: var(--text-color-6);
    font-size: 10px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.cxs-profile-seller-inline-rating strong {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 700;
}

.cxs-profile-seller-inline-rating small {
    color: var(--text-color-h);
    font-size: 12px;
}

.cxs-detail-seller-inline-rating {
    display: inline-flex;
    align-items: center;
    gap: 0;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.cxs-detail-seller-inline-rating-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--br-1);
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainfou);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxs-detail-seller-inline-rating i {
    background-color: var(--mainsix);
    color: var(--text-color-6);
    width: 18px;
    height: 18px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    font-size: 10px;
    border-radius: 6px;
}

.cxs-detail-seller-inline-rating strong {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 700;
}

.cxs-detail-seller-inline-rating small {
    color: var(--text-color-h);
    font-size: 12px;
}

.cxs-detail-seller-inline-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.cxs-detail-seller-inline-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}


.cxs-detail-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--br-1);
    text-decoration: none;
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainfou);
    color: var(--text-color);
    font-size: var(--fs-1);
    transition: all .15s ease;
}

.cxs-detail-contact-btn:hover {
    color: var(--text-color);
    background: var(--cxbgmainthi);
    border-color: var(--cxbcolor-3);
}

.cxs-detail-contact-btn-message,
.cxs-detail-contact-btn-sms,
.cxs-detail-contact-btn-tip {
    position: relative;
}

.cxsSellerSmilar {
    width: 100%;
}

.cxs-seller-similar-card {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    background: var(--cxbgmainthi);
    padding: 8px;
    padding-right: 44px;
    min-height: 66px;
    transition: all .15s ease;
    position: relative;
    overflow: hidden;
}

.cxs-seller-similar-card:hover {
    border-color: var(--cxbcolor-3);
    background: var(--cxbgmainfou);
}

.cxs-seller-similar-thumb {
    width: 45px;
    height: 45px;
    border-radius: var(--br-1-5);
    overflow: hidden;
    flex: 0 0 auto;
    border: 2px solid var(--cxbcolor);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxs-seller-similar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cxs-seller-similar-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 6px;
    flex: 1 1 auto;
}

.cxs-seller-similar-title {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cxs-seller-similar-price {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.cxs-seller-similar-go {
    width: 34px;
    height: 34px;
    border-radius: 10px 0 0 10px;
    background: var(--main);
    color: var(--text-color-6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    box-shadow: 0 0 0 0 rgba(255, 214, 0, 0.30), 0 6px 12px rgba(0, 0, 0, 0.20);
    transition: right .12s ease-out, background .12s ease-out, box-shadow .12s ease-out;
}

.cxs-seller-similar-card:hover .cxs-seller-similar-go {
    right: 0;
    box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.16), 0 8px 14px rgba(0, 0, 0, 0.24);
}

.cxs-seller-similar-go:hover {
    background: var(--mainfou);
}

.cxs-detail-feature-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0;
}

@media (max-width: 576px) {
    .cxs-detail-seller-inline {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .cxs-detail-seller-inline-right {
        width: 100%;
        justify-content: space-between;
    }

    .cxs-detail-seller-inline-actions {
        width: auto;
    }
}

.cxs-detail-feature-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    background: var(--cxbgmainthi);
    padding: 5px 12px 5px 8px;
    cursor: pointer;
    transition: all .2s ease;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxs-detail-feature-pill:hover {
    transform: translateY(-0.5px);
}

.cxs-detail-feature-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--br-1);
    background: var(--cxbgmainfou);
    color: var(--text-color);
    flex: 0 0 auto;
    font-size: 12px;
}

.cxs-feature-identity .cxs-detail-feature-icon {
    background: rgba(34, 197, 94, 0.18);
    color: #22c55e;
}

.cxs-feature-delivery .cxs-detail-feature-icon {
    background: rgba(236, 72, 153, 0.18);
    color: #ec4899;
}

.cxs-feature-home .cxs-detail-feature-icon {
    background: rgba(59, 130, 246, 0.18);
    color: #3b82f6;
}

.cxs-feature-category .cxs-detail-feature-icon {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
}

.cxs-feature-delivery-time .cxs-detail-feature-icon {
    background: rgba(14, 165, 233, 0.18);
    color: #0ea5e9;
}

.cxs-detail-feature-text {
    font-size: 13px;
    font-weight: 700;
    color: #e2e8f0;
    white-space: nowrap;
    line-height: 1;
}

.cxs-detail-meta-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.cxs-detail-mini-chip {
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
    color: var(--text-color);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    white-space: nowrap;
}

.cxs-detail-mini-chip i {
    font-size: 10px;
}

/* İlan detay — özellik pill SweetAlert (iconHtml); popup tema ile, ikon kutusu genel Swal ikon boyutu */
.swal2-container .swal2-popup.cxs-feature-alert-popup {
    background: var(--cxbgmain) !important;
    border: 1px solid var(--cxbgmainsec) !important;
    color: var(--text-color) !important;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45) !important;
}

.swal2-container .swal2-popup.cxs-feature-alert-popup h2.swal2-title {
    color: var(--text-color) !important;
}

.swal2-container .swal2-popup.cxs-feature-alert-popup .swal2-html-container {
    color: var(--text-color) !important;
    opacity: 0.92;
}

/* Özel ikon kutusu: sweetalert2.min.css ile aynı ölçü (3.25rem / 14px radius); arka plan + ikon aynı vurgu renginden (kutu soluk, glyph doygun) */
.swal2-container .swal2-popup.cxs-feature-alert-popup .swal2-icon.cxs-feature-alert-icon {
    width: 3.25rem !important;
    height: 3.25rem !important;
    min-width: 3.25rem !important;
    min-height: 3.25rem !important;
    margin: 18px auto 10px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    background: color-mix(in srgb, var(--cxs-feature-accent, var(--main)) 30%, var(--cxbgmainthi)) !important;
    color: var(--cxs-feature-accent, var(--main)) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35) !important;
}

.swal2-container .swal2-popup.cxs-feature-alert-popup .swal2-icon.cxs-feature-alert-icon .swal2-icon-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1 !important;
    color: inherit !important;
}

.swal2-container .swal2-popup.cxs-feature-alert-popup .swal2-icon.cxs-feature-alert-icon i {
    font-size: 1.35rem !important;
    line-height: 1 !important;
    color: inherit !important;
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .swal2-container .swal2-popup.cxs-feature-alert-popup .swal2-icon.cxs-feature-alert-icon {
        background: var(--cxbgmainthi) !important;
        box-shadow: inset 0 0 0 1px var(--cxbcolor), 0 10px 26px rgba(0, 0, 0, 0.35) !important;
    }
}

.cxscpvideo {
    position: absolute;
    left: 5px;
    top: 5px;
    border-radius: var(--br-1);
    overflow: hidden;
}

.cxscpvideo img {
    width: 35px;
    height: 35px;
    padding: 3px;
    object-fit: contain;
}

.cxscpedit {
    position: absolute;
    right: 5px;
    top: -35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-1);
}

.cxscdoping {
    position: absolute;
    right: 5px;
    top: -70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-1);
}


.cxscpdname a {
    font-weight: 600;
    color: var(--text-color);
    font-size: 13px;
    transition: all .15s;
    height: 20px;
    max-height: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cxscpdname a:hover {
    font-weight: 600;
    color: var(--main);
}

.cxscpbottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.autodelivery,
.cxscpfav,
.cxslists {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--br-1) !important;
    font-size: var(--fs-1);
}

.cxscpbprice {
    font-size: 14px;
    font-weight: 700;
}

.cxscpbright {
    display: flex;
    gap: 10px;
}

.showcase.color-1 {
    box-shadow: 0 0 0 3px #ffbf00, 0 0 15px rgba(255, 204, 51, .8);
    border-radius: var(--br-0);
}

.showcase.color-2 {
    box-shadow: 0 0 0 3px #BF00FF, 0 0 15px rgba(191, 0, 255, 0.8);
    border-radius: var(--br-0);
}

.showcase.color-3 {
    box-shadow: 0 0 0 3px #0070FF, 0 0 15px rgba(0, 112, 255, 0.8);
    border-radius: var(--br-0);
}

.showcase.color-4 {
    box-shadow: 0 0 0 3px #FF3800, 0 0 15px rgba(255, 56, 0, 0.8);
    border-radius: var(--br-0);
}


.cxscpscname {
    text-align: center;
    color: #fff !important;
    font-weight: 500;
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    border-radius: var(--br-0);
    width: max-content;
}

.cxscpscname span {
    text-transform: uppercase;
    padding: 5px 15px;
    font-size: var(--fs-1);
}

.cxcusteffect-1 {
    position: relative;
    overflow: hidden;
}


.cxcusteffect-1::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(252, 204, 51, 0) 0%, rgba(252, 204, 51, 0.3) 100%);
    transform: skewX(-25deg);
    animation: ga 8s infinite ease-in-out;
}

.cxcusteffect-2 {
    position: relative;
    overflow: hidden;
}


.cxcusteffect-2::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(191, 0, 255, 0) 0%, rgba(191, 0, 255, 0.8) 100%);
    transform: skewX(-25deg);
    animation: ga 8s infinite ease-in-out;
}

.cxcusteffect-3 {
    position: relative;
    overflow: hidden;
}


.cxcusteffect-3::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 112, 255, 0) 0%, rgba(0, 112, 255, 0.8) 100%);
    transform: skewX(-25deg);
    animation: ga 8s infinite ease-in-out;
}

.cxcusteffect-4 {
    position: relative;
    overflow: hidden;
}


.cxcusteffect-4::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 56, 0, 0) 0%, rgba(255, 56, 0, 0.8) 100%);
    transform: skewX(-25deg);
    animation: ga 8s infinite ease-in-out;
}

@keyframes ga {
    0% {
        left: -100%;
        opacity: 1;
    }

    50% {
        left: 150%;
        opacity: 1;
    }

    55% {
        opacity: 0;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

.cxfilterarea {
    position: fixed;
    left: -100%;
    top: 0;
    width: 250px;
    height: 100vh;
    transition: left 0.3s ease-in-out;
    z-index: 9999999;
    overflow-y: auto;
    max-height: 100%;
    background-color: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
}

.cxfilterarea::-webkit-scrollbar {
    display: none;
}

.cxfilterarea {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.cxfilterarea.open {
    left: 0;
}

.cxprofilesbarea {
    position: fixed;
    left: -100%;
    top: 0;
    width: 280px;
    height: 100vh;
    transition: left 0.3s ease-in-out;
    z-index: 9999999;
    overflow-y: auto;
    overflow-x: visible;
    max-height: 100%;
}

.cxprofilesbarea::-webkit-scrollbar {
    display: none;
}

.cxprofilesbarea {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.cxprofilesbarea.open {
    left: 0;
}

.hidden {
    display: none !important;
}

.cxfilterclose {
    background-color: var(--cxcolor-1);
    color: var(--text-color);
    border: none;
    border-radius: var(--br-0);
    width: 30px;
    height: 30px;
    font-size: 16px;
    position: absolute;
    cursor: pointer;
    top: 10px;
    display: flex;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.cxfilterclose:hover {
    background-color: #d32f2f;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.overlay.visible {
    display: block;
    opacity: 1;
}

/* Profile sidebar: closed state shows a compact header bar (mobile/tablet),
   open state becomes the drawer (keeps existing .open behavior). */
@media (max-width: 1200px) {

    /* Bootstrap `col-lg-2` still applies down to 992px; force the bar to full width
       as soon as the profile sidebar switches to drawer behavior. */
    [data-cx-profile-sidebar].col-lg-2 {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    [data-cx-profile-sidebar] .cxprofilesbarea {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        padding-top: 0;
        transition: none;
        z-index: auto;
        overflow: visible;
        background: transparent;
    }

    [data-cx-profile-sidebar] .cxprofilesbarea.open {
        /* accordion style: open in-flow (not off-canvas) */
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        z-index: auto;
        overflow: visible;
        background: transparent;
        transition: none;
    }

    [data-cx-profile-sidebar] .sidebar-menu {
        display: block;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transform: translateY(-6px);
        transition: max-height 260ms ease, opacity 180ms ease, transform 220ms ease;
    }

    [data-cx-profile-sidebar] .cxprofilesbarea.open .sidebar-menu {
        max-height: 80vh;
        opacity: 1;
        transform: translateY(0);
    }

    [data-cx-profile-sidebar] .cxfilterclose {
        display: none;
    }

    [data-cx-profile-sidebar] .cxprofilesbarea.open .cxfilterclose {
        display: flex;
    }

    /* Make the profile section look like the wide bar in your screenshot */
    [data-cx-profile-sidebar] .sidebar-profile-section {
        position: relative;
        padding: 14px 14px;
        border-bottom: 0;
        border-radius: 14px;
        background: var(--cxbgmain);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    }

    [data-cx-profile-sidebar] .sidebar-profile-header {
        align-items: center;
        margin-bottom: 12px;
    }

    /* Override existing fixed-position .cxfiltertoggle on mobile for this specific area */
    [data-cx-profile-sidebar] .cxfiltertoggle.cxProfileSidebarToggleBtn {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 5;
        margin-left: 0;
        width: 38px;
        height: 38px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: var(--text-color);
        background: var(--cxbgmainfou);
        border: 2px solid var(--cxbcolor);
        font-size: 16px;
        line-height: 1;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
        cursor: pointer;
    }

    [data-cx-profile-sidebar] .cxfiltertoggle.cxProfileSidebarToggleBtn:hover {
        filter: brightness(1.05);
    }

    /* When drawer is open, keep overlay usable */
    [data-cx-profile-sidebar] .overlay {
        display: none !important;
    }

    /* Responsive tweaks */
    [data-cx-profile-sidebar] .sidebar-menu-list {
        gap: 0;
    }

    /* Dropdowns: inline expandable (no absolute hover menu) */
    [data-cx-profile-sidebar] .sidebar-menu-item-has-dropdown {
        overflow: hidden;
    }

    [data-cx-profile-sidebar] .sidebar-menu-item-has-dropdown .sidebar-menu-chevron-dropdown {
        transform: rotate(0deg);
        transition: transform 220ms ease;
    }

    [data-cx-profile-sidebar] .sidebar-menu-item-has-dropdown.is-open .sidebar-menu-chevron-dropdown {
        transform: rotate(180deg);
    }

    [data-cx-profile-sidebar] .sidebar-menu-dropdown {
        position: static;
        left: auto;
        top: auto;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        background: transparent;
        padding: 0 0 0 40px;
        margin: 0;
        border-radius: 0;
        max-height: 0;
        overflow: hidden;
        transform: translateY(-6px);
        transition: max-height 260ms ease, opacity 180ms ease, transform 220ms ease;
        opacity: 0;
    }

    [data-cx-profile-sidebar] .sidebar-menu-item-has-dropdown.is-open .sidebar-menu-dropdown {
        max-height: 480px;
        opacity: 1;
        transform: translateY(0);
        /* keep padding/margin stable to avoid left-shift on close */
    }

    [data-cx-profile-sidebar] .sidebar-menu-dropdown::before,
    [data-cx-profile-sidebar] .sidebar-menu-item-has-dropdown::before {
        display: none;
        content: none;
    }
}

@media (min-width: 1201px) {
    .cxfilterarea {
        position: static;
        width: auto;
        height: auto;
        box-shadow: none;
        transition: none;
    }

    .cxfiltertoggle {
        display: none;
    }

    .cxfilterclose {
        display: none;
    }

    .cxfxlmain {
        flex-direction: row;
    }

    .cxprofilesbarea {
        position: static;
        width: auto;
        height: auto;
        box-shadow: none;
        transition: none;
        overflow: visible;
    }
}

/* Filtre bar: masaüstünde gizli, 1200px ve altı görünür */
.cxFilterBar {
    display: none;
}

/* 1200px ve altı: sidebar off-canvas yerine aşağı açılır filtre paneli */
@media (max-width: 1200px) {

    .overlay,
    .cxfiltertoggle,
    .cxfilterclose {
        display: none !important;
    }

    /* Exception: profile sidebar uses its own toggle + overlay on mobile */
    [data-cx-profile-sidebar] .cxfiltertoggle.cxProfileSidebarToggleBtn {
        display: inline-flex !important;
    }

    [data-cx-profile-sidebar] .overlay {
        display: none !important;
    }

    .cxFilterBar {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        border-radius: var(--br-1);
        border: 2px solid var(--cxbcolor);
        background: var(--cxbgmainsec);
        color: var(--text-color);
        cursor: pointer;
        user-select: none;
        margin-bottom: 10px;
    }

    .cxFilterBarLeft {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        min-width: 0;
    }

    .cxFilterBarLeft i {
        color: var(--main);
    }

    .cxFilterBarChevron {
        transition: transform 0.25s ease;
    }

    .cxFilterBar.is-open .cxFilterBarChevron {
        transform: rotate(180deg);
    }

    .cxfilterarea {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.35s ease, opacity 0.2s ease;
    }

    .cxfilterarea.open {
        max-height: 5000px;
        opacity: 1;
    }
}

.cxsaphead {
    background-color: var(--cxbgmainfou);
    padding: 15px;
    border-radius: var(--br-0);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cxsaphimg {
    width: auto;
    object-fit: contain;
    height: 150px;
}

.cxaphleft {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cxaphleftinfo {}

.cxsapcenter {
    background-color: var(--cxbgmainfou);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
}

.cxsapccenter {
    padding: 20px;
}

.cxsapcnextprevious {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    gap: 10px;
    align-items: center;
}

.cxaphlicatinf ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: var(--fs-1);
}

.cxsapdelivery .cxsapdellist {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-radius: var(--br-0);
    background: transparent;
    box-sizing: border-box;
    padding: 0;
    width: auto;
    max-width: 560px;
    font-size: var(--fs-1);
}

.cxsapdelivery .cxsapdellist .cxsapdelltype {
    flex: 1 1 240px;
    margin: 0;
}

.cxsapdelivery .cxsapdellist .cxsapdelltype input {
    display: none;
}

.cxsapdelivery .cxsapdellist .cxsapdelltype .cxsapdelltname {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    border-radius: var(--br-1);
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainsec);
    padding: 8px 10px;
    color: var(--text-color);
    transition: all .15s ease-in-out;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxsapdelivery .cxsapdellist .cxsapdelltype input:checked+.cxsapdelltname {
    border-color: var(--mainfou);
    background: var(--cxbgmainthi);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    font-weight: 600;
}

.cxsapdelivery .cxsapdellicon {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainfou);
    color: var(--text-color);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

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

.cxsapdelivery .cxsapdelltitle {
    font-size: var(--fs-0);
    font-weight: 600;
    line-height: 1.2;
}

.cxsapdelivery .cxsapdelldesc {
    font-size: 11px;
    color: var(--text-color-h);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cxsaptitle {
    margin-bottom: 5px;
    font-weight: 600;
    font-size: var(--fs-1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.cxsaptitle i {
    font-size: var(--fs-2);
}

.cxsapdetail label {
    font-size: var(--fs-1);
    font-weight: 600;
    margin-bottom: 5px;
}

.cxsaptitlesec {
    margin-bottom: 30px;
    font-weight: 600;
    font-size: var(--fs-3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--cxbcolor);
    padding-bottom: 30px;
}


.cxsapwarlist {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 10px;
    font-size: var(--fs-1);
}

.cxsapcwartitle {
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    font-size: var(--fs-3);
    margin-bottom: 15px;
}

.cxsapwimp {
    color: var(--main);
    font-weight: 500;
}

.cxprofileRoute {
    font-size: var(--fs-2);
    margin-bottom: 20px;
}

.cxprofileRoute button {
    color: var(--text-color);
    font-weight: 500;
    border: none;
    padding: 15px 30px;
    border-radius: var(--br-0);
    width: 100%;
    background-color: var(--cxbgmainfou);
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cxprofileRoute button:hover {
    color: #fff;
    background-color: var(--main);
}

.cxprofileRoute button.active {
    color: #fff;
    background-color: var(--mainsec);
}

.orderdetinfo {
    display: flex;
    flex-direction: column;
    font-size: var(--fs-1);
    gap: 5px;
}

.orderdetinfs {
    font-weight: 500;
}

.orderdetinfsPn {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.orderdetalert {
    padding: 10px;
}

.cxsuorderfunc {
    display: flex;
    gap: 10px;
    font-size: var(--fs-2);
    justify-content: end;
}

.cxsuorderfunc a {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.orderdetsend {
    border: 0;
    padding: 10px 15px !important;
    border-radius: var(--br-0);
    background: var(--main);
    width: 15%;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    transition: all .15s;
    flex: 1 0 0;
}

.orderdetsend:hover {
    background-color: var(--mainsec);
    color: #fff;
}

.cx-long-t-1 {
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.mr-0 {
    margin-right: .5rem;
}

.cx-mr-01 {
    margin-right: .1rem;
}

.cx-mr-02 {
    margin-right: .2rem;
}

.cx-mr-03 {
    margin-right: .3rem;
}

.cx-mr-05 {
    margin-right: .5rem;
}

.cx-mr-075 {
    margin-right: .75rem;
}

.cx-mr-1 {
    margin-right: 1rem;
}

.cxddMenuPL {
    display: flex;
    gap: 10px;
    background-color: var(--cxopcolor-7);
    color: var(--text-color);
    padding: 5px;
    border-radius: var(--br-0);
    transition: all .15s;
}

.cxddMenuPL:hover {
    color: var(--text-color);
    opacity: .9;
}

.cxddMenuPR i {
    justify-content: center;
    align-items: center;
    display: flex;
    width: 45px;
    /* 50px */
    height: 45px;
    /* 50px */
    color: #fff;
    background-color: var(--cxcolor-7);
    border-radius: var(--br-0);
    cursor: pointer;
    transition: all .15s;
}

.cxddMenuPR i:hover {
    opacity: .8;
    cursor: pointer;
}

.cxddMenuUn {
    display: flex;
    flex-direction: column;
}

.cxsapccustimg {
    height: 200px;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--cxbcolor);
    background-color: var(--cxbmainfo);
    padding: 1.5rem;
    border-radius: var(--br-0);
    box-shadow: 0px 48px 35px -48px rgba(0, 0, 0, 0.1);
}

.cxsapccustimg .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cxsapccustimg .icon i {
    font-size: 70px;
    color: var(--text-color);
}

.cxsapccustimg .text {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cxsapccustimg .text span {
    font-weight: 400;
    color: var(--text-color);
}

.cxsapccustimg input {
    display: none;
}

.cxsapccustvideo input {
    display: block !important;
    content: '';
}

.cxsapccicenter {
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 15px;
}

.cxsapccustvideo .icon i {
    height: 25px;
    font-size: 70px;
    color: var(--text-color);
}

.cxsapccustvideo .cxsapccicenter {
    gap: 0;
    margin-top: -25px;
}

.cxsapccustvideo .cxsapccicenter iframe {

    border-radius: var(--br-0);
}

.cxsapccustvideo .cxsapccvif {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cxsapccvarea {
    position: absolute;
    width: 250px;
    bottom: -23px;
    left: 27px;
}

#uploadKey {
    font-weight: 400;
}


.cxcimgprwcont {
    position: relative;
    display: inline-block;
    width: 100%;
}

.cxcimgprw {
    display: none;
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 5px;
}

.remove-image {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: none;
}

.cxsnext,
.cxsprev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background: var(--text-color);
    border-radius: var(--br-0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cxbgmain);
    font-size: var(--fs-4);
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
}

.cxsnext {
    right: 10px;
}

.cxsprev {
    left: 10px;
}

.cxsnext:hover,
.cxsprev:hover {
    background: var(--mainsec);
    color: #fff;
}

.cxspnotifymain {
    background-color: var(--cxbgmainfou);
    border-radius: var(--br-0);
    padding: 15px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 100%;
}

.cxpnotifyname {
    color: var(--text-color);
    font-size: var(--fs-2);
    font-weight: 600;
}

.cxpnotifydesc {
    font-size: var(--fs-1);
    font-weight: 400;
}

.unread-notification {
    transform: scale(1.005);
    transition: transform 0.3s ease-in-out;
    background-color: var(--cxbmainfo);
    border-left: 5px solid var(--main);
}

.cxssselectavatar button {
    position: absolute;
    top: -13px;
    right: -10px;
    background: var(--cxcolor-7);
    border-radius: var(--br-0);
    color: #fff;
    transition: all .15s;
}

.cxssselectavatar label {
    position: absolute;
    top: -13px;
    right: -10px;
    background: var(--cxcolor-7);
    border-radius: var(--br-0);
    color: #fff;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cxssselectavatar {
    transition: all .15s;
}

.cxssselectavatar:hover {
    opacity: .8;
    color: var(--cxcolor-7);
}

.cxsstoreavatarlist.selected-avatar {
    box-shadow: inset 0 0 0 3px var(--mainsec);
    transition: all 0.2s ease-in-out;
    border-radius: var(--br-1-5);
}

.cxsstoreavatarlist.selected-avatar::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--mainsec);
    border-radius: var(--br-1-5);
    z-index: 3;
    pointer-events: none;
}

.cxsstoreavatar {
    display: flex;
    gap: 20px;
    background-color: var(--cxbgmainsec);
    padding: 20px;
    border-radius: var(--br-1-5);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxsstoreavatarright {
    flex: 1;
}

/* Varsayılan avatar grid: taşmayı önler (flex/col içinde min-width: 0) */
.cxs-default-avatar-grid-outer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.cxs-default-avatar-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-content: stretch;
    padding: 20px 0;
}

.cxs-default-avatar-item {
    width: 100%;
    min-width: 0;
}

.cxsstoreavatarlist {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.cxs-default-avatar-grid .cxsstoreavatarlist img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease;
}

.cxsstoreavatarlist::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 75%;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    opacity: 0;
    transform: translateY(100%);
    transition: transform .25s ease, opacity .25s ease;
    pointer-events: none;
    z-index: 1;
}

.cxsstoreavatarlist:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.cxsstoreavatarlist:hover {
    box-shadow: 0 12px 20px rgba(0, 0, 0, .28);
}

.cxsstoreavatarlist:hover img {
    filter: brightness(.9);
}

@media (max-width: 1199.98px) {
    .cxs-default-avatar-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .cxs-default-avatar-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


.cxs-default-banner-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cxs-default-banner-item {
    min-width: 0;
}

.cxsstorebannerlist {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.cxsstorebannerlist img {
    width: 100%;
    aspect-ratio: 16 / 4;
    object-fit: cover;
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease;
}

.cxsstorebannerlist::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 75%;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    opacity: 0;
    transform: translateY(100%);
    transition: transform .25s ease, opacity .25s ease;
    pointer-events: none;
    z-index: 1;
}

.cxsstorebannerlist:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.cxsstorebannerlist:hover {
    box-shadow: 0 12px 20px rgba(0, 0, 0, .28);
}

.cxsstorebannerlist:hover img {
    filter: brightness(.9);
}

.cxsstorebannerlist.selected-banner {
    box-shadow: inset 0 0 0 3px var(--mainsec);
    transition: all 0.2s ease-in-out;
}

.cxsstorebannerlist.selected-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--mainsec);
    border-radius: 8px;
    z-index: 3;
    pointer-events: none;
}

.cxsstorebanner {
    background-color: var(--cxbgmainsec);
    padding: 20px;
    border-radius: var(--br-1-5);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxsstorebanner.cxsstorebanner-stack {
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
}

.cxsstorebanner-stack .cxsstorebannerleft.cxsstorebanner-current {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.cxsstorebanner-stack .cxsstorebannerleft.cxsstorebanner-current img {
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: var(--br-1-5);
}

.cxsstorebanner-stack .cxsstorebannerright {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.cxsstorebanner-stack .cxsstorebannerright .cxssainfo {
    flex: 1;
}

.cxsstorebanner-stack .cxsstorebannerright .fileUpload {
    margin-top: 0 !important;
    min-width: 360px;
    max-width: 460px;
    width: 100%;
}

@media (max-width: 767.98px) {
    .cxsstorebanner-stack .cxsstorebannerright {
        flex-direction: column;
        align-items: stretch;
    }

    .cxsstorebanner-stack .cxsstorebannerright .fileUpload {
        max-width: 100%;
        min-width: 0;
    }
}

.cxsstoreavatarleft {
    background-color: var(--cxbgmainsec);
    border-radius: var(--br-1-5);
}

.cxsstoreavatarleft img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--br-1-5);
}

.cxsstorebannerleft {
    background-color: var(--cxbgmainsec);
    border-radius: var(--br-1-5);
    display: flex;
    align-items: center;
}

.cxsstorebannerleft img {
    width: 100%;
    object-fit: cover;
}

.cxssainfo {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cxssainfo span {
    font-size: var(--fs-1);
}

.cxssainfo small {
    font-size: var(--fs-0);
    color: var(--text-color-h);
}

.cxbtndoping {
    padding: 10px;
}

.cxsapdopingbox {
    padding: 15px;
    border: 1px solid var(--cxbcolor);
    border-radius: var(--br-0);
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: var(--cxbmainfo);
}

/* ============================================================
   BOOST — Card-Select Design
   ============================================================ */

.cxBoostCard {
    --bc: var(--main);
    --bc-bg: var(--cxopcolor-3);
    /* Neutral defaults — color variant classes override these */
    --cx-card-border: color-mix(in srgb, var(--bc) 20%, hsl(215deg 15% 100% / 7%));
    --cx-card-hover-border: color-mix(in srgb, var(--bc) 40%, hsl(215deg 15% 100% / 7%));
    --cx-name-color: var(--text-color);
    --cx-icon-color: var(--bc);
    --cx-icon-bg: linear-gradient(180deg, color-mix(in srgb, var(--bc) 30%, transparent), color-mix(in srgb, var(--bc) 10%, transparent));
    --cx-icon-border: transparent;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bc) 5%, hsl(217deg 16% 13%)), color-mix(in srgb, var(--bc) 2%, hsl(217deg 18% 9%)));
    border: 1px solid var(--cx-card-border);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color .2s ease;
}

.cxBoostCard:hover {
    border-color: var(--cx-card-hover-border);
}

.cxBoostCardActive {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--bc);
    background: color-mix(in srgb, var(--bc) 14%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--bc) 22%, transparent);
}

.cxBoostCardActiveDot {
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    background: var(--bc);
    animation: cxBoostPulse 1.6s ease-out infinite;
}

.cxBoostCardActiveTimer {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--text-color);
}

@keyframes cxBoostPulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bc) 55%, transparent); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.cxBoostCardBody {
    padding: 20px 20px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 14px;
}

.cxBoostCardHeader {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cxBoostCardIcon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 11px;
    background: var(--cx-icon-bg);
    border: 1px solid var(--cx-icon-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--cx-icon-color);
    flex-shrink: 0;
}

.cxBoostCardName {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--cx-name-color);
    line-height: 1.3;
}

.cxBoostCardDesc {
    font-size: 13px;
    color: var(--text-color-h);
    line-height: 1.7;
    flex: 1;
}

.cxBoostCardDesc p { margin: 0; }

.cxBoostCardDesc strong,
.cxBoostCardDesc b {
    color: var(--text-color);
    font-weight: 700;
}

.cxBoostCardSelectWrap { margin-top: auto; }

.cxBoostCardSelect { width: 100%; }

/* Select2 inside boost cards */
.cxBoostCard .select2-container { width: 100% !important; }

.cxBoostCard .select2-container--default .select2-selection--single {
    background: hsl(216deg 12% 7%);
    border: 1px solid hsl(215deg 15% 100% / 8%);
    border-radius: 10px;
    height: 40px;
    transition: border-color .15s, box-shadow .15s;
}

.cxBoostCard .select2-container--default.select2-container--open .select2-selection--single,
.cxBoostCard .select2-container--default.select2-container--focus .select2-selection--single {
    outline: none;
    box-shadow: none;
    border-color: hsl(215deg 15% 100% / 16%);
}

.cxBoostCard .select2-container--default .select2-selection--single .select2-selection__rendered {
    top: 0;
    line-height: 38px;
    padding-left: 16px;
    padding-right: 32px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);
}

.cxBoostCard .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--text-color);
}

.cxBoostCard .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    height: 40px;
    right: 12px;
}

.cxBoostCard .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-color-h) transparent transparent transparent;
}

/* Select2 dropdown for boost cards */
.cxBoostSelect2Drop {
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}

.cxBoostSelect2Drop .select2-search--dropdown {
    padding: 8px;
}

.cxBoostSelect2Drop .select2-search--dropdown .select2-search__field {
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 13px;
}

.cxBoostSelect2Drop .select2-results__option {
    font-size: 14px;
    padding: 9px 14px;
}

/* Color variants — apply ->color as class */
/* Each variant sets --bc/--bc-bg and activates bc-based styles via --cx-* overrides */
.cxBoostCard.cx-blue,    .cxBoostCard.blue    { --bc: #3b82f6; }
.cxBoostCard.cx-sky,     .cxBoostCard.sky     { --bc: #0ea5e9; }
.cxBoostCard.cx-indigo,  .cxBoostCard.indigo  { --bc: #6366f1; }
.cxBoostCard.cx-violet,  .cxBoostCard.violet  { --bc: #7c3aed; }
.cxBoostCard.cx-purple,  .cxBoostCard.purple  { --bc: #a855f7; }
.cxBoostCard.cx-pink,    .cxBoostCard.pink    { --bc: #ec4899; }
.cxBoostCard.cx-rose,    .cxBoostCard.rose    { --bc: #f43f5e; }
.cxBoostCard.cx-red,     .cxBoostCard.red     { --bc: #ef4444; }
.cxBoostCard.cx-orange,  .cxBoostCard.orange  { --bc: #f97316; }
.cxBoostCard.cx-amber,   .cxBoostCard.amber   { --bc: #f59e0b; }
.cxBoostCard.cx-yellow,  .cxBoostCard.yellow  { --bc: #eab308; }
.cxBoostCard.cx-lime,    .cxBoostCard.lime    { --bc: #84cc16; }
.cxBoostCard.cx-green,   .cxBoostCard.green   { --bc: #22c55e; }
.cxBoostCard.cx-emerald, .cxBoostCard.emerald { --bc: #10b981; }
.cxBoostCard.cx-teal,    .cxBoostCard.teal    { --bc: #14b8a6; }
.cxBoostCard.cx-cyan,    .cxBoostCard.cyan    { --bc: #06b6d4; }

@media (max-width: 767px) {
    .cxBoostCardIcon { width: 40px; height: 40px; min-width: 40px; font-size: 16px; }
    .cxBoostCardName { font-size: 14.5px; }
}


.cxsapdbdesc {
    font-size: var(--fs-0);
}

.cxsapdbdesc p {
    margin: 0;
    padding: 0;
}

.cxsapdbicon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    /* 50px */
    height: 45px;
    /* 50px */
    border-radius: var(--br-0);
    background-color: var(--cxcolor-13);
    margin-right: 15px;
}

.cxsapdbifir {
    color: var(--main);
}

.cxsapdbisec {
    color: var(--cxcolor-15);
}

.cxsapdbname {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    bottom: 50px;
    background: var(--cxbgmainthi);
    border-radius: var(--br-0);
    padding: 5px 20px;
    font-size: var(--fs-0);
    border: 1px solid var(--cxbcolor);
}

.cxsapdbdopname {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    top: 10px;
    background: var(--cxbgmainthi);
    border-radius: var(--br-0);
    padding: 2px;
    font-size: var(--fs-0);
    z-index: 10;
    overflow: hidden;
}

.emoji-mart,
.emoji-mart * {
    box-sizing: border-box;
    line-height: 1.15;
}

.emoji-mart {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: 16px;
    display: inline-block;
    color: #222427;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    background: #fff;
}

.emoji-mart .emoji-mart-emoji {
    padding: 6px;
}

.emoji-mart-bar {
    border: 0 solid #d9d9d9;
}

.emoji-mart-bar:first-child {
    border-bottom-width: 1px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.emoji-mart-bar:last-child {
    border-top-width: 1px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.emoji-mart-anchors {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 6px;
    line-height: 0;
}

.emoji-mart-anchor {
    position: relative;
    display: block;
    flex: 1 1 auto;
    color: #858585;
    text-align: center;
    padding: 12px 4px;
    overflow: hidden;
    transition: color .1s ease-out;
    margin: 0;
    box-shadow: none;
    background: none;
    border: none;
}

.emoji-mart-anchor:focus {
    outline: 0
}

.emoji-mart-anchor:hover,
.emoji-mart-anchor:focus,
.emoji-mart-anchor-selected {
    color: #464646;
}

.emoji-mart-anchor-selected .emoji-mart-anchor-bar {
    bottom: 0;
}

.emoji-mart-anchor-bar {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #464646;
}

.emoji-mart-anchors i {
    display: inline-block;
    width: 100%;
    max-width: 22px;
}

.emoji-mart-anchors svg,
.emoji-mart-anchors img {
    fill: currentColor;
    height: 18px;
    width: 18px;
}

.emoji-mart-scroll {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 270px;
    padding: 0 6px 6px 6px;
    will-change: transform;
}

.emoji-mart-search {
    margin-top: 6px;
    padding: 0 6px;
    position: relative;
}

.emoji-mart-search input {
    font-size: 16px;
    display: block;
    width: 100%;
    padding: 5px 25px 6px 10px;
    border-radius: 5px;
    border: 1px solid #d9d9d9;
    outline: 0;
}

.emoji-mart-search input,
.emoji-mart-search input::-webkit-search-decoration,
.emoji-mart-search input::-webkit-search-cancel-button,
.emoji-mart-search input::-webkit-search-results-button,
.emoji-mart-search input::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.emoji-mart-search-icon {
    position: absolute;
    top: 7px;
    right: 11px;
    z-index: 2;
    padding: 2px 5px 1px;
    border: none;
    background: none;
}

.emoji-mart-category .emoji-mart-emoji span {
    z-index: 1;
    position: relative;
    text-align: center;
    cursor: default;
}

.emoji-mart-category .emoji-mart-emoji:hover:before {
    z-index: 0;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    border-radius: 100%;
}

.emoji-mart-category-label {
    z-index: 2;
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.emoji-mart-category-label span {
    display: block;
    width: 100%;
    font-weight: 500;
    padding: 5px 6px;
    background-color: #fff;
    background-color: rgba(255, 255, 255, .95);
}

.emoji-mart-category-list {
    margin: 0;
    padding: 0;
}

.emoji-mart-category-list li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}

.emoji-mart-emoji {
    position: relative;
    display: inline-block;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.emoji-mart-emoji-native {
    font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
}

.emoji-mart-no-results {
    font-size: var(--fs-1);
    text-align: center;
    padding-top: 70px;
    color: #858585;
}

.emoji-mart-no-results-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.emoji-mart-no-results .emoji-mart-category-label {
    display: none;
}

.emoji-mart-no-results .emoji-mart-no-results-label {
    margin-top: .2em;
}

.emoji-mart-no-results .emoji-mart-emoji:hover:before {
    content: none;
}

.emoji-mart-preview {
    position: relative;
    height: 70px;
}

.emoji-mart-preview-emoji,
.emoji-mart-preview-data,
.emoji-mart-preview-skins {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.emoji-mart-preview-emoji {
    left: 12px;
}

.emoji-mart-preview-data {
    left: 68px;
    right: 12px;
    word-break: break-all;
}

.emoji-mart-preview-skins {
    right: 30px;
    text-align: right;
}

.emoji-mart-preview-skins.custom {
    right: 10px;
    text-align: right;
}

.emoji-mart-preview-name {
    font-size: var(--fs-1);
}

.emoji-mart-preview-shortname {
    font-size: var(--fs-0);
    color: #888;
}

.emoji-mart-preview-shortname+.emoji-mart-preview-shortname,
.emoji-mart-preview-shortname+.emoji-mart-preview-emoticon,
.emoji-mart-preview-emoticon+.emoji-mart-preview-emoticon {
    margin-left: .5em;
}

.emoji-mart-preview-emoticon {
    font-size: 11px;
    color: #bbb;
}

.emoji-mart-title span {
    display: inline-block;
    vertical-align: middle;
}

.emoji-mart-title .emoji-mart-emoji {
    padding: 0;
}

.emoji-mart-title-label {
    color: #999A9C;
    font-size: 26px;
    font-weight: 300;
}

.emoji-mart-skin-swatches {
    font-size: 0;
    padding: 2px 0;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    background-color: #fff;
}

.emoji-mart-skin-swatches.custom {
    font-size: 0;
    border: none;
    background-color: #fff;
}

.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch {
    width: 16px;
    padding: 0 2px;
}

.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected:after {
    opacity: .75;
}

.emoji-mart-skin-swatch {
    display: inline-block;
    width: 0;
    vertical-align: middle;
    transition-property: width, padding;
    transition-duration: .125s;
    transition-timing-function: ease-out;
}

.emoji-mart-skin-swatch:nth-child(1) {
    transition-delay: 0s
}

.emoji-mart-skin-swatch:nth-child(2) {
    transition-delay: .03s
}

.emoji-mart-skin-swatch:nth-child(3) {
    transition-delay: .06s
}

.emoji-mart-skin-swatch:nth-child(4) {
    transition-delay: .09s
}

.emoji-mart-skin-swatch:nth-child(5) {
    transition-delay: .12s
}

.emoji-mart-skin-swatch:nth-child(6) {
    transition-delay: .15s
}

.emoji-mart-skin-swatch.selected {
    position: relative;
    width: 16px;
    padding: 0 2px;
}

.emoji-mart-skin-swatch.selected:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    background-color: #fff;
    border-radius: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease-out;
}

.emoji-mart-skin-swatch.custom {
    display: inline-block;
    width: 0;
    height: 38px;
    overflow: hidden;
    vertical-align: middle;
    transition-property: width, height;
    transition-duration: .125s;
    transition-timing-function: ease-out;
    cursor: default;
}

.emoji-mart-skin-swatch.custom.selected {
    position: relative;
    width: 36px;
    height: 38px;
    padding: 0 2px 0 0;
}

.emoji-mart-skin-swatch.custom.selected:after {
    content: "";
    width: 0;
    height: 0;
}

.emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover {
    background-color: #f4f4f4;
    border-radius: 10%;
}

.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom {
    width: 36px;
    height: 38px;
    padding: 0 2px 0 0;
}

.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected:after {
    opacity: .75;
}

.emoji-mart-skin-text.opened {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    color: #888;
    font-size: 11px;
    padding: 5px 2px;
    width: 95px;
    height: 40px;
    border-radius: 10%;
    background-color: #fff;
}

.emoji-mart-skin {
    display: inline-block;
    width: 100%;
    padding-top: 100%;
    max-width: 12px;
    border-radius: 100%;
}

.emoji-mart-skin-tone-1 {
    background-color: #ffc93a
}

.emoji-mart-skin-tone-2 {
    background-color: #fadcbc
}

.emoji-mart-skin-tone-3 {
    background-color: #e0bb95
}

.emoji-mart-skin-tone-4 {
    background-color: #bf8f68
}

.emoji-mart-skin-tone-5 {
    background-color: #9b643d
}

.emoji-mart-skin-tone-6 {
    background-color: #594539
}

.emoji-mart-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


.emoji-mart-dark {
    color: #fff;
    border-color: #555453;
    background-color: #222;
}

.emoji-mart-dark .emoji-mart-bar {
    border-color: #555453;
}

.emoji-mart-dark .emoji-mart-search input {
    color: #fff;
    border-color: #555453;
    background-color: #2f2f2f;
}

.emoji-mart-dark .emoji-mart-search-icon svg {
    fill: #fff;
}

.emoji-mart-dark .emoji-mart-category .emoji-mart-emoji:hover:before {
    background-color: #444;
}

.emoji-mart-dark .emoji-mart-category-label span {
    background-color: #222;
    color: #fff;
}

.emoji-mart-dark .emoji-mart-skin-swatches {
    border-color: #555453;
    background-color: #222;
}

.emoji-mart-dark .emoji-mart-anchor:hover,
.emoji-mart-dark .emoji-mart-anchor:focus,
.emoji-mart-dark .emoji-mart-anchor-selected {
    color: #bfbfbf;
}

.emoji-picker-container {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 1000;
}

.emoji-trigger {
    background: none;
    border: none;
    padding: 0;
    color: #666;
    cursor: pointer;
}

.emoji-trigger:hover {
    color: #333;
}

em-emoji-picker {
    height: 350px;
}

.cxscgstar {
    position: relative;
    top: -2px;
}

i.commentstar {
    color: var(--cxopcolor-8);
}

#star-rating {
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: var(--fs-4);
    color: var(--cxopcolor-8) !important;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
}

.commentstar:hover,
.commentstar.active {
    color: var(--mainsec);
    transform: scale(1.1);
}

.cxsmodalPN {
    overflow-wrap: anywhere;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
    transition: 0.5s;
    font-size: var(--fs-1);
    font-weight: 500;
}


.cxrcontent {
    max-height: 500px;
    overflow-y: auto;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    text-align: left;
}

.cxrsection {
    background: var(--cxbgmainfou);
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.cxrsection:last-child {
    margin-bottom: 0;
}

.cxrstitle {
    padding: 15px 20px;
    margin: 0;
    font-size: var(--fs-2);
    font-weight: 500;
    color: var(--text-color);
    border-bottom: 1px solid var(--cxbcolor);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cxrscontent {
    padding: 10px;
    color: var(--text-color);
    font-size: var(--fs-1);
    line-height: 1.6;
}

.no-rules {
    text-align: center;
    color: var(--text-color-h);
    padding: 30px 20px;
    font-style: italic;
}

.no-rules i {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
    color: var(--text-color-h);
}

@media (max-width: 768px) {
    .cxrstitle {
        font-size: 15px;
        padding: 12px 15px;
    }

    .cxrscontent {
        padding: 15px;
        font-size: 13px;
    }

    .cxspActionButtons {
        justify-content: center;
    }
}

.cxrspol {
    text-align: center;
}

.cxrspol ul {
    margin-left: 20px;
}

.cxrccheckbox {
    font-size: var(--fs-1);
}

/* Tüm modallar için ortak açılış animasyonu (varsayılan yukarıdan kayma yerine) */
.modal.fade .modal-dialog {
    transform: scale(.92);
    opacity: 0;
    transition: transform .25s ease-out, opacity .2s ease-out;
}

.modal.show .modal-dialog {
    transform: scale(1);
    opacity: 1;
}

/* Modal başlığı ikon rozeti (satın alma / açık rıza onayı vb.) */
.modal-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.modal-header-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--br-1);
    background: var(--cxbgmainfiv-thi);
    box-shadow: 0 0 0 4px var(--cxbgmainfiv);
    color: var(--main);
    font-size: 13px;
}

.modal-header-text {
    min-width: 0;
}

.modal-header-title {
    font-size: var(--fs-2);
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.3;
}

.cxr-body {
    padding: 18px 22px 22px;
    max-height: 46vh;
    overflow-y: auto;
    text-align: left;
}

.cxr-text {
    margin: 0 0 16px;
    color: var(--text-color-h);
    font-size: var(--fs-0);
    line-height: 1.7;
    text-align: left;
}

.cxr-text:last-child {
    margin-bottom: 0;
}

.cxr-text strong {
    color: var(--text-color);
    font-weight: 700;
}

/* Satın alma / sepet alanları penceresi (Bootstrap modal başlığı) */
.cxlp-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cxlp-header-logo {
    flex: 0 0 auto;
    width: 45px;
    height: 45px;
    border-radius: var(--br-1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--cxbgmainthi);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
}

.cxlp-header-logo img {
    width: 30px;
    height: 30px;
    padding: 3px;
    object-fit: contain;
}

.cxlp-header-text {
    min-width: 0;
}

.cxlp-header-category {
    font-size: var(--fs-0);
    color: var(--text-color-h);
    margin-bottom: 2px;
}

.cxlp-header-title {
    font-size: var(--fs-1);
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cxlp-guarantee {
    margin-bottom: 14px;
}

.cxlp-legal-text {
    margin: 14px 0 0;
    color: var(--text-color-h);
    font-size: 12.5px;
    line-height: 1.5;
}

/* Yeşil satın alma / onay butonu (site marka renginden bağımsız, ödeme aksiyonu vurgusu) */
.cxgreen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    border: 0;
    border-radius: var(--br-1);
    background: #22c55e;
    color: #fff;
    font-size: var(--fs-1);
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
    box-shadow: 0 10px 24px rgba(34, 197, 94, 0.28);
}

.cxgreen-btn:hover {
    background: #16a34a;
    color: #fff;
}

.cxgreen-btn:active {
    transform: scale(0.98);
}

.auth-popup {
    background: var(--cxbgmainsec);
    border-radius: var(--br-0);
    padding: 0 20px 30px 20px;
}

.auth-content {
    text-align: center;
}

.auth-message {
    color: var(--text-color);
    margin-bottom: 25px;
    font-size: var(--fs-2);
}

.auth-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

.auth-btn {
    padding: 12px 25px;
    border: none;
    border-radius: var(--br-0);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: var(--fs-1);
}

.cxbancontainer {
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    margin-bottom: 20px;
    font-family: "Wix Madefor Display", sans-serif;
}

.cxbanbox {
    background: var(--cxbgmainfou);
    backdrop-filter: blur(10px);
    border: 1px solid var(--cxbcolor);
    border-radius: 24px;
    padding: 3rem;
    width: 90%;
    max-width: 700px;
}

.cxbancontent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.cxbanicon {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
}

.cxbantitle {
    color: var(--text-color);
    font-size: var(--fs-2);
    font-weight: 700;
    text-align: center;
    margin: 0;
}

.cxbantimer {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.cxbantimerbox {
    background: var(--cxbmainfo);
    border-radius: 12px;
    padding: 0.3rem;
    min-width: 90px;
    transition: transform 0.2s ease;
}

.cxbantimewrapper {
    background: var(--cxopcolor-9);
    padding: 1.2rem 0.8rem;
    border-radius: 8px;
    text-align: center;
}

.cxbantime {
    font-size: var(--fs-3);
    font-weight: 600;
    color: var(--mainsec);
    display: block;
    margin-bottom: 4px;
}

.cxbantimelabel {
    color: var(--text-color);
    font-size: var(--fs-1);
    font-weight: 400;
    opacity: 0.8;
    display: block;
}


.cxbanmessage {
    color: var(--text-color);
    font-size: var(--fs-1);
    text-align: center;
    margin: 0;
}

@media (max-width: 640px) {
    .cxbanbox {
        padding: 2rem;
    }



    .cxbantitle {
        font-size: var(--fs-3);
    }

    .cxbanicon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }

    .cxbantimer {
        gap: 0.8rem;
    }

    .cxbantimerbox {
        min-width: 70px;
    }

    .cxbantimewrapper {
        padding: 0.8rem 0.6rem;
    }

    .cxbantime {
        font-size: var(--fs-4);
    }

    .cxbantimelabel {
        font-size: var(--fs-2);
    }

    .cxbanmessage {
        font-size: var(--fs-1);
    }

    .cxbancontainer {
        padding: 1rem;
    }
}

.order-details-content {
    background-color: var(--cxbgmainthi) !important;
    border-radius: var(--br-0) !important;
    color: var(--text-color) !important;
}

.order-details-content h5 {
    margin-bottom: 1rem;
}

.code-list {
    list-style: none;

}

.code {
    cursor: pointer;
    text-decoration: underline;
    border: 1px solid var(--cxbcolor);
    font-size: 16px;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: var(--br-0);
    background-color: var(--cxbmainfo);
    display: block;
    margin-bottom: var(--br-0);
    text-align: center;
}

.cxprofileRoute {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.tabs-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tabs-wrapper::-webkit-scrollbar {
    display: none;
}

#tabContainer {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    min-width: max-content;
    padding: 0 10px;
}

textarea::placeholder {
    color: var(--text-color-h);
}

.cxsapdblist {
    max-height: 150px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.cxsapdblist::-webkit-scrollbar {
    display: none;
}

.cxsapdopingselect {
    transform: scale(1.01);
    box-shadow: 1px 1px 20px 5px var(--cxopcolor-7);
}

/* Global boost card + badge — sade vurgu, tema renkleri korunur */
.boost-card,
.cxscproductbox-animated {
    --boost-color-1: #22d3ee;
    --boost-color-2: #8b5cf6;
    --boost-border: color-mix(in srgb, var(--boost-color-1) 38%, rgba(255, 255, 255, 0.14));
    --boost-shadow: color-mix(in srgb, var(--boost-color-1) 22%, transparent);
    position: relative;
    border-radius: var(--br-1-5);
    z-index: 1;
    overflow: hidden;
    border: 1px solid var(--boost-border);
    box-shadow: 0 8px 20px -10px var(--boost-shadow);
    background: linear-gradient(180deg, rgba(14, 21, 33, 0.98) 0%, rgba(10, 16, 28, 0.98) 100%);
    transition: border-color .2s ease, box-shadow .22s ease, transform .2s ease;
}

/* Ãœstte ince boost ÅŸeridi */
.boost-card::before,
.cxscproductbox-animated::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    z-index: 5;
    background: linear-gradient(90deg, var(--boost-color-1), var(--boost-color-2));
    pointer-events: none;
}

.boost-mark,
.cxsapdbdopname {
    position: absolute;
    top: 11px;
    left: 11px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px 0 8px;
    border-radius: 6px;
    background: rgba(8, 12, 20, 0.88);
    border: 1px solid color-mix(in srgb, var(--boost-color-1) 35%, rgba(255, 255, 255, 0.12));
    border-left: 3px solid var(--boost-color-1);
    box-shadow: none;
    backdrop-filter: blur(8px);
    transition: border-color .2s ease, background .2s ease;
}

.boost-mark-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--boost-color-1);
    flex-shrink: 0;
}

.boost-mark-text,
.cxsapdbdopnameBH {
    display: inline-flex;
    align-items: center;
    color: rgba(248, 250, 252, 0.95);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1;
}

.boost-card:hover,
.cxscproductbox-animated:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--boost-color-1) 48%, rgba(255, 255, 255, 0.2));
    box-shadow: 0 12px 28px -12px var(--boost-shadow);
}

.boost-card:hover .boost-mark,
.cxscproductbox-animated:hover .cxsapdbdopname {
    background: rgba(10, 16, 26, 0.92);
    border-color: color-mix(in srgb, var(--boost-color-1) 42%, rgba(255, 255, 255, 0.16));
}

.boost-theme-homepage,
.border-home {
    --boost-color-1: #7c3aed;
    --boost-color-2: #38bdf8;
}

.boost-theme-daily,
.border-daily {
    --boost-color-1: #14b8a6;
    --boost-color-2: #0d9488;
}

.boost-theme-bestseller,
.border-bestseller {
    --boost-color-1: #eab308;
    --boost-color-2: #ea580c;
}

.boost-theme-showcase,
.border-showcase {
    --boost-color-1: #e879f9;
    --boost-color-2: #a855f7;
}

.boost-card .cxscpimg::after,
.cxscproductbox-animated .cxscpimg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, transparent 28%);
}


@keyframes rotateBorder {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.cxitskinvcard {
    background: var(--cxbgcolor);
    border: 1px solid var(--cxbcolor);
    border-radius: 8px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.cxitskinvcard:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.cxitskimg {
    position: relative;
    padding-top: 100%;
    background: rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.cxitskimg img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.cxitskdetails {
    padding: 15px;
}

.cxitskname {
    font-size: var(--fs-1);
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--text-color);
}

.cxitskprice {
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 15px;
}

.cxitskpricerow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
}

.cxitskpricerow:last-child {
    margin-bottom: 0;
}

.cxitskpricelabel {
    color: var(--cxscolor);
}

.cxitskpricevalue {
    font-weight: 500;
}

.cxitskpricevalue.steam {
    color: #00b894;
}

.cxitskpricevalue.suggested {
    color: #fdcb6e;
}

.cxitskpricevalue.lowest {
    color: #ff7675;
}

.cxitskpriceform {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.cxitskgroup {
    display: flex;
    flex-direction: column;
}

.cxitskinplabel {
    font-size: var(--fs-0);
    color: var(--cxscolor);
    margin-bottom: 4px;
}

.cxitskinput {
    background: var(--cxbgmainsec);
    border: 1px solid var(--cxbcolor);
    border-radius: 4px;
    padding: 5px 8px;
    font-size: var(--fs-0);
    color: var(--text-color);
    width: 100%;
}

.cxitskprofit {
    font-size: var(--fs-1);
    font-weight: 600;
    text-align: center;
    color: #00b894;
}

.cxitskaddbtn {
    background: var(--mainsec);
    color: #fff;
    border: none;
    border-radius: var(--br-0);
    padding: 8px;
    font-size: var(--fs-1);
    font-weight: 500;
    width: 100%;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
}

.cxitskaddbtn:hover {
    background: var(--main);
    transform: translateY(-1px);
}

.cxitskinvcard.selected {
    border: 2px solid var(--mainsec);
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.2);
}


@media (min-width: 769px) and (max-width: 991px) {
    .cxitsk-item {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .cxitsk-item {
        width: 33.333% !important;
        max-width: 33.333% !important;
        flex: 0 0 33.333% !important;
    }
}

.cxskinurl {
    background: var(--cxbgmainsec);
    padding: 20px;
    border-radius: var(--br-0);
}

#cxitskInventoryContainer {
    position: relative;
}

#cxSkins {
    max-height: calc((400px * 2) + 20px);
    overflow-y: auto;
    padding-right: 5px;
}

#cxSkins::-webkit-scrollbar {
    width: 6px;
}

#cxSkins::-webkit-scrollbar-track {
    background: var(--cxbgcolor);
    border-radius: var(--br-1);
}

#cxSkins::-webkit-scrollbar-thumb {
    background: var(--mainsec);
    border-radius: var(--br-1);
}

#cxSkins::-webkit-scrollbar-thumb:hover {
    background: var(--main);
}

.cxitsk-item {
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    #cxSkins {
        max-height: calc((220px * 4) + 60px);
    }
}

.cxitskdescription {
    margin-bottom: 15px;
}

.cxitskdescription textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--cxbcolor);
    border-radius: 4px;
    background-color: var(--cxbgcolor);
    color: var(--cxcolor);
    resize: vertical;
    min-height: 80px;
}

.cxitskdescription textarea:focus {
    outline: none;
    border-color: var(--cxscolor);
    box-shadow: 0 0 0 2px rgba(var(--cxscolor-rgb), 0.1);
}

.cxitskimg {
    position: relative;
}

.cxitskamount {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.cxitskinput[type="number"] {
    -moz-appearance: textfield;
}

.cxitskinput[type="number"]::-webkit-outer-spin-button,
.cxitskinput[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input:disabled {
    color: var(--text-color-3);
    box-shadow: none;
}

input:focus {
    border: 1px solid var(--text-color2);
}

#avatarCropModal .modal-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    padding: 0;
}

.img-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#avatarCropImage {
    max-width: 100%;
    max-height: 100%;
}

.cropper-view-box,
.cropper-face {
    border-radius: 0;
}

.blur-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(20px);
    transform: scale(1.1);
    z-index: 1;
}

input[type="checkbox"] {
    accent-color: var(--mainsec);
    outline: none;
    box-shadow: none;
}

input[type="checkbox"]:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--mainsec);
}

/* Streamer Integration Modal */
.cx-integration-box {
    background: var(--cxbgmainsec);
    border-radius: var(--br-1-5);
    padding: 28px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.cx-integration-box-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-color2);
}

.cx-integration-box-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.cx-integration-box-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--text-color2);
}

.cx-integration-status {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--br-1);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.cx-integration-status--on {
    background: var(--cxopcolor-42);
    color: var(--cxcolor-42);
    border: 2px solid var(--cxopcolor-42-hover);
}

.cx-integration-status--off {
    background: var(--cxopcolor-47);
    color: var(--cxcolor-47);
    border: 2px solid var(--cxopcolor-48-hover);
}

.cx-integration-actions {
    width: 100%;
    display: flex;
    gap: 8px;
}

.cx-integration-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: var(--br-1);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
    flex: 1;
}

.cx-integration-btn--outline {
    color: var(--text-color);
    background: var(--cxbgmainfou);
    border: 2px solid var(--cxbcolor);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cx-integration-btn--outline:hover {
    color: var(--text-color);
    background: var(--cxbgmainthi);
    border: 2px solid var(--cxbcolor-3);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.cx-integration-btn-test {
    background: var(--cxopcolor-35);
    color: var(--cxcolor-35);
    border: 2px solid var(--cxopcolor-35-hover);
}

.cx-integration-btn-test:hover {
    filter: brightness(1.1);
    color: var(--cxcolor-35-hover);
}

.cx-integration-btn--full {
    width: 100%;
    flex: unset;
}

.cxrulescheckbox {
    padding-top: 30px;
}

.cxFinalReviewScroll {
    max-height: 300px;
    overflow-y: auto;
    padding: 20px;
    border-radius: var(--br-1-5);
    text-align: left;
    font-size: var(--fs-0);
    background: var(--cxbgmainthi);
}

.cxFinalReviewScroll hr {
    border-color: var(--cxbcolor);
    opacity: .8;
}

.cxrulescheckbox .form-check-input {
    cursor: pointer;
}

.cxrulescheckbox .form-check-label {
    cursor: pointer;
    user-select: none;
}

.cxsearch-list {
    max-height: 400px;
    overflow-y: auto;
    min-width: 320px;
    max-width: 100%;
    background: var(--cxbgmainfou);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    position: absolute;
    width: 100%;
    z-index: 999;
    top: 52px;
    left: 0;
}

.cxsearch-section-title {
    font-weight: bold;
    color: #b0b3c0;
    padding: 4px 18px 2px 18px;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.cxsearch-product {
    display: flex;
    align-items: center;
    padding: 7px 18px;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.2s;
    border-bottom: 1px solid var(--cxbcolor);
}

.cxsearch-product:last-child {
    border-bottom: none;
}

.cxsearch-img img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 12px;
    background: #232733;
}

.cxsearch-product .content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cxsearch-product .productname {
    font-weight: 500;
    color: var(--text-color);
    font-size: var(--fs-1);
}

.cxsearch-badge {
    display: inline-block;
    min-width: 54px;
    padding: 5px 10px;
    font-size: var(--fs);
    font-weight: 600;
    border-radius: 5px;
    text-align: center;
    margin-left: auto;
    align-self: center;
}

.cxsearch-badge-category {
    background: var(--cxbmainfo);
    color: var(--text-color);
}

.cxsearch-badge-product {
    background: var(--cxbmainfo);
    color: var(--text-color);
}

input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

/* 2FA / OTP (6 haneli kutucuk doÄŸrulama) */
.cx-otp {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.cx-otp-input {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    border: 1px solid var(--cxbcolor);
    background: var(--cxbgmainfiv-thi);
    color: var(--text-color);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.cx-otp-input:focus {
    border-color: var(--mainsec);
}

.cx-otp-input.is-filled {
    border-color: var(--cxbcolor-3);
}

@media (max-width: 480px) {
    .cx-otp-input {
        width: 44px;
        height: 44px;
        border-radius: var(--br-1);
        font-size: 18px;
    }

    .cx-otp {
        gap: 8px;
    }
}

.notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--cxopcolor-47);
    border: 2px solid var(--cxopcolor-49-hover);
    color: var(--cxcolor-47);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: var(--fs-0);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.caticon {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
}

.caticon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.cxitskwear {
    font-size: var(--fs-0);
    color: var(--text-color);
    margin-top: 2px;
}

.cxitskassetid {
    font-size: var(--fs);
    color: var(--text-color);
    margin-top: 1px;
}

/* Blog Detail Page Styles */


.blog-detail-sidebar {
    background: var(--cxbgmainsec);
    border-radius: var(--br-1-5);
    position: sticky;
    top: 20px;
    margin-bottom: 20px;
}

.toc-header {
    background: var(--cxbgmainfou);
    padding: 15px;
    border-bottom: 1px solid var(--cxbcolor);
    border-top-right-radius: var(--br-1-5);
    border-top-left-radius: var(--br-1-5);
}

.toc-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.toc-nav {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    padding: 15px 20px;
}

.toc-nav::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-list li {
    margin: 0;
}

.toc-list a {
    display: block;
    color: var(--text-color-h);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 6px;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.toc-list a:hover {
    background: transparent;
    color: var(--main);
    transform: translateX(5px);
}

.toc-list a.active {
    background: transparent;
    color: var(--main);
    font-weight: 500;
    transform: translateX(10px);
}

.blog-info-card {
    background: var(--cxbgmainsec);
    border-radius: var(--br-1-5);
    padding: 20px;
    margin-top: 20px;
    position: sticky;
    top: 20px;
}

.blog-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.blog-info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.blog-info-item:first-child {
    padding-top: 0;
}

.blog-info-item:hover {
    transform: translateX(4px);
}

.blog-info-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cxbgmainfou);
    border-radius: 8px;
    color: var(--main);
    transition: all 0.2s ease;
}

.blog-info-item:hover .blog-info-icon {
    background: var(--main);
    color: var(--cxbgmain);
}

.blog-info-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.blog-info-label {
    font-size: 11px;
    color: var(--text-color-h);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-info-value {
    font-size: 13px;
    color: var(--text-color);
    font-weight: 500;
    line-height: 1.4;
}

.blog-detail-content {
    border-radius: var(--br-1-5);
    margin-bottom: 30px;
}

.blog-share-section {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--cxbgmainsec);
    border-radius: var(--br-1-5);
    padding: 16px 20px;
    margin-top: 30px;
}

.blog-share-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
}

.blog-share-icons {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.blog-share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--text-color-h);
    transition: all 0.2s ease;
    border-radius: 6px;
}

.blog-share-icon:hover {
    color: var(--text-color);
    transform: translateY(-2px);
}

.blog-share-icon svg {
    width: 20px;
    height: 20px;
}

.blog-content-wrapper {
    color: var(--text-color);
    line-height: 1.8;
    font-size: 16px;
}

.blog-content-wrapper h1,
.blog-content-wrapper h2,
.blog-content-wrapper h3,
.blog-content-wrapper h4,
.blog-content-wrapper h5,
.blog-content-wrapper h6 {
    color: var(--text-color);
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 600;
    scroll-margin-top: 100px;
    font-size: 18px;
}

.blog-content-wrapper h2 {
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cxbcolor);
}

.blog-content-wrapper h3 {
    margin-top: 20px;
}

.blog-content-wrapper h4 {
    margin-top: 18px;
}

.blog-content-wrapper p {
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--text-color-h);
}

.blog-content-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: var(--br-1-5);
}

.blog-content-wrapper ul,
.blog-content-wrapper ol {
    margin: 20px 0;
    padding-left: 30px;
    color: var(--text-color-h);
}

.blog-content-wrapper li {
    margin-bottom: 10px;
}

.blog-content-wrapper a {
    color: var(--main);
    text-decoration: none;
}

.blog-content-wrapper a:hover {
    color: var(--mainsec);
    text-decoration: underline;
}

.blog-content-wrapper blockquote {
    border-left: 4px solid var(--main);
    padding-left: 20px;
    margin: 20px 0;
    color: var(--text-color-h);
    font-style: italic;
}

.blog-content-wrapper code {
    background: var(--cxbgmain);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--main);
}

.blog-content-wrapper pre {
    background: var(--cxbgmain);
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 20px 0;
}

.blog-content-wrapper pre code {
    background: none;
    padding: 0;
    color: var(--text-color);
}

@media (max-width: 991px) {
    .blog-detail-sidebar {
        position: relative;
        top: 0;
        margin-bottom: 30px;
    }

    .blog-info-card {
        position: relative;
        top: 0;
    }

    .blog-share-section {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .blog-share-icons {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .blog-content-wrapper h2 {
        font-size: 24px;
    }

    .blog-content-wrapper h3 {
        font-size: 20px;
    }
}

/* Balance Dashboard Styles */
.balance-dashboard {
    padding: 0 0 30px 0;
    background-color: var(--cxbgmain);
}

.balance-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.balance-card {
    background-color: var(--cxbgmainsec);
    border-radius: var(--br-1-5);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 2px solid var(--cxbcolor);
}

.balance-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    position: relative;
    border-radius: var(--br-1);
    background: var(--cxbgmainfiv-thi);
    box-shadow: 0 0 0 4px var(--cxbgmainfiv);
    display: flex;
    align-items: center;
    justify-content: center;
}

.balance-card-icon i {
    font-size: 20px;
    color: var(--main);
}

.balance-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.balance-card-amount {
    font-size: 14px;
    font-weight: 700;
    color: var(--main);
    line-height: 1.2;
}

.balance-card-label {
    font-size: 12px;
    color: var(--text-color);
    line-height: 1.2;
}

@media (max-width: 1200px) {
    .balance-cards-container {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .balance-cards-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .balance-card {
        padding: 15px;
        gap: 12px;
    }

    .balance-card-icon {
        width: 38px;
        height: 38px;
        background: var(--cxbgmainfiv-thi);
        box-shadow: 0 0 0 3px var(--cxbgmainfiv);
    }

    .balance-card-icon i {
        font-size: 18px;
    }

    .balance-card-amount {
        font-size: 12px;
    }

    .balance-card-label {
        font-size: 10px;
    }
}

@media (max-width: 576px) {
    .balance-cards-container {
        grid-template-columns: 1fr;
    }

    .balance-card {
        padding: 15px;
    }
}

/* Withdraw Page Styles */
.withdraw-top-bar {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 10px;
}

.withdraw-balance-card {
    flex: 1 1 0;
    background-color: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    transition: all 0.2s ease;
}

.withdraw-balance-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--br-1);
    background: var(--cxbgmainfiv-thi);
    box-shadow: 0 0 0 3px var(--cxbgmainfiv);
    display: flex;
    align-items: center;
    justify-content: center;
}

.withdraw-balance-icon i {
    font-size: 16px;
    color: var(--main);
}

.withdraw-balance-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.withdraw-balance-amount {
    font-size: 13px;
    font-weight: 700;
    color: var(--main);
    line-height: 1.2;
    white-space: nowrap;
}

.withdraw-balance-label {
    font-size: 11px;
    color: var(--text-color);
    line-height: 1.2;
}

/* Action card color overrides */
.withdraw-balance-card.withdraw-action-green {
    background: linear-gradient(135deg, #1a8a2e 0%, #23a838 50%, #1a8a2e 100%);
    border-color: #2bc847;
    cursor: pointer;
    text-decoration: none;
}

.withdraw-balance-card.withdraw-action-green:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

.withdraw-balance-card.withdraw-action-purple {
    background: linear-gradient(135deg, #4a2d7a 0%, #5e3a9e 50%, #4a2d7a 100%);
    border-color: #7b52c9;
    cursor: pointer;
    text-decoration: none;
}

.withdraw-balance-card.withdraw-action-purple:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    text-decoration: none;
}

.withdraw-icon-green {
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}

.withdraw-icon-green i,
.withdraw-icon-purple i {
    color: #fff !important;
}

.withdraw-icon-purple {
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}

.withdraw-text-white {
    color: #fff !important;
    font-size: 13px !important;
}

.withdraw-text-white-sub {
    color: rgba(255, 255, 255, 0.7) !important;
}

@media (max-width: 1200px) {
    .withdraw-top-bar {
        flex-wrap: wrap;
    }

    .withdraw-balance-card {
        flex: 1 1 calc(33.333% - 8px);
        min-width: calc(33.333% - 8px);
    }
}

@media (max-width: 768px) {
    .withdraw-top-bar {
        flex-wrap: wrap;
    }

    .withdraw-balance-card {
        flex: 1 1 calc(50% - 6px);
        min-width: calc(50% - 6px);
    }
}

@media (max-width: 480px) {
    .withdraw-balance-card {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

/* Shortcuts Styles */
.shortcuts-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.shortcut-card {
    background-color: var(--cxbgmainsec);
    border-radius: 12px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid var(--cxbcolor);
    min-height: 150px;
    position: relative;
}

.shortcut-card:hover {
    background-color: var(--cxbgmainthi);
    border-color: var(--main);
    transform: translateY(-2px);
}

.shortcut-icon {
    width: 45px;
    /* 50px */
    height: 45px;
    /* 50px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--br-1-3);
    background: var(--cxbgmainfiv-thi);
    box-shadow: 0 0 0 4px var(--cxbgmainfiv);
    position: relative;
}

.shortcut-icon i {
    font-size: 20px;
    color: var(--main);
}

.shortcut-icon-verified {
    position: absolute;
    top: -10px;
    bottom: 0;
    right: 0;
}

.shortcut-icon-verified i.unverified {
    color: var(--cxcolor-1);
}

.shortcut-label {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    line-height: 1.3;
}

.shortcut-card .shortcut-verify {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--cxbgmainthi);
    color: var(--text-color);
    padding: 2px 5px;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-0);
    font-weight: 500;
    font-size: 12px;
    transition: all 0.2s;
}

.shortcut-card:hover .shortcut-verify {
    background: var(--main);
    color: var(--text-color-6);
    border-color: var(--main);
}

@media (max-width: 1200px) {
    .shortcuts-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }
}

@media (max-width: 992px) {
    .shortcuts-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .shortcuts-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .shortcut-card {
        padding: 25px 15px;
        min-height: 140px;
        gap: 15px;
    }

    .shortcut-icon {
        width: 45px;
        height: 45px;
        /* 45px */
        box-shadow: 0 0 0 3px var(--cxbgmainfiv);
    }

    .shortcut-icon i {
        font-size: 22px;
    }

    .shortcut-label {
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .shortcuts-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .shortcut-card {
        padding: 20px 15px;
        min-height: 130px;
        gap: 12px;
    }

    .shortcut-icon {
        width: 40px;
        height: 40px;
    }

    .shortcut-icon i {
        font-size: 20px;
    }

    .shortcut-label {
        font-size: 12px;
    }
}

.iti {
    width: 100%;
}

.iti__dropdown-content {
    width: 100%;
    background-color: var(--cxbgmainsec) !important;
    border: 2px solid var(--cxbcolor) !important;
    scrollbar-width: thin;
    border-radius: var(--br-1) !important;
}

.iti__search-input {
    background-color: var(--cxbgmainfou) !important;
    border-bottom: 1px solid var(--cxbcolor) !important;
    color: var(--text-color) !important;
    border-top-left-radius: var(--br-1) !important;
    border-top-right-radius: var(--br-1) !important;
    font-size: var(--fs-0) !important;
    padding: 5px;
}

.iti__search-input:focus {
    background-color: var(--cxbgmainfiv-thi) !important;
    border: none !important;
    border-bottom: 1px solid var(--cxbcolor) !important;
    color: var(--text-color) !important;
    outline: none !important;
}

.iti__country-list .iti__flag,
.iti__country-name {
    font-size: var(--fs-0) !important;
}

.iti__dial-code {
    font-size: var(--fs-0) !important;
}

.cx-billing-card {
    background: var(--cxbgmainsec);
    border-radius: var(--br-1-5);
    display: flex;
    flex-direction: column;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
    border: 2px solid var(--cxbcolor);
}

.cx-billing-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--cxbcolor);
    background-color: var(--cxbgmainfou);
    border-top-left-radius: var(--br-1-5);
    border-top-right-radius: var(--br-1-5);
}

.cx-billing-default-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--cxbgmainfou);
    color: var(--text-color);
    padding: 5px 10px;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1);
    font-weight: 500;
    font-size: 12px;
    transition: all 0.2s;
}

.cx-billing-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

.cx-billing-title i {
    color: var(--mainsec);
    width: 24px;
    height: 24px;
    font-size: 12px;
    display: flex;
    border-radius: var(--br-1-5);
    background: var(--cxopcolor-3);
    align-items: center;
    justify-content: center;
}

.cx-billing-actions {
    display: flex;
    gap: 6px;
}

.cx-billing-icon-btn {
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
}

.cx-billing-default-btn {
    color: var(--mainsec);
    background: var(--cxopcolor-3);
}

.cx-billing-default-btn:hover {
    color: var(--mainsec);
    background: var(--cxopcolor-3);
    transform: translateY(-2px);
}

.cx-billing-delete {
    color: var(--cxcolor-1);
    background: var(--cxopcolor-4);
}

.cx-billing-delete:hover {
    color: var(--cxcolor-1);
    background: var(--cxopcolor-4);
    transform: translateY(-2px);
}

.cx-billing-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    flex-grow: 1;
}

.cx-billing-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-color);
    border-bottom: 1px solid var(--cxbcolor-2);
    padding-bottom: 5px
}

.cx-billing-item i {
    width: 20px;
    text-align: center;
    color: var(--mainsec);
    font-size: 14px;
}

.cx-billing-item span {
    color: var(--text-color);
}

.cx-billing-footer {
    display: flex;
    gap: 10px;
    padding: 12px;
    background-color: var(--cxbgmainfou);
    border-bottom-left-radius: var(--br-1);
    border-bottom-right-radius: var(--br-1);
    margin-top: auto;
}

.cx-billing-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cx-billing-btn-edit {
    background: var(--main);
    color: var(--text-color-6);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
}

.cx-billing-btn-edit:hover {
    background: var(--mainfou);
    color: var(--text-color-6);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--main) 32%, transparent);
}

.cx-table-container {
    background: var(--cxbgmainsec);
    border-radius: var(--br-1-5);
    overflow: hidden;
}

.cx-table {
    width: 100%;
    border-collapse: collapse;
}

.cx-table thead {
    background: var(--cxbgmainfou);
}

.cx-table thead th {
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--cxbcolor-2);
    border-right: 1px solid var(--cxbcolor);
}

.cx-table thead th:last-child {
    border-right: none;
}

.cx-table tbody tr {
    transition: background 0.2s ease;
}

.cx-table tbody tr:hover {
    background: var(--cxbgmainthi);
}

.cx-table tbody td {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--text-color);
    border-bottom: 1px solid var(--cxbcolor-2);
    vertical-align: middle;
}

.cx-table tbody tr:last-child td {
    border-bottom: none;
}

/*
.cx-table thead th:first-child {
    background: var(--cxbgmainfiv);
    color: var(--text-color);
}
.cx-table tbody td:first-child {
    background: var(--cxbgmainfiv);
    color: var(--text-color);
}
.cx-table-id {
    font-weight: 600;
}

.cx-table-amount {
    font-weight: 600;
    color: var(--text-color);
}*/

.cx-table-period {
    color: var(--text-color);
}

.cx-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--br-1);
    font-size: 11px;
    font-weight: 600;
}

.cx-badge-success {
    background: var(--cxopcolor-5);
    color: var(--cxcolor-5);
}

.cx-badge-warning {
    background: var(--cxopcolor-3);
    color: var(--cxcolor-2);
}

.cx-badge-danger {
    background: var(--cxopcolor-4);
    color: var(--cxcolor-1);
}

.cx-badge-dispute-open {
    background: var(--cxopcolor-47);
    color: var(--cxcolor-47);
}

.cx-badge-info {
    background: var(--cxopcolor-24);
    color: var(--cxcolor-24);
}

.cx-badge-secondary {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.cx-table-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.cx-table-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--cxbgmainfou);
    color: var(--mainsec);
    font-size: 14px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cx-table-action-btn:hover {
    background: var(--main);
    color: var(--text-color-6);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--main) 32%, transparent);
}

.cx-table-action-btn-delete,
.withdraw-cancel-btn,
.cx-table-action-btn.withdraw-cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--cxcolor-1);
    background: var(--cxopcolor-4);
    font-size: 14px;
    filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--cxcolor-1) 18%, transparent));
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--cxcolor-1) 20%, transparent);
}

.cx-table-action-btn-delete:hover,
.withdraw-cancel-btn:hover,
.cx-table-action-btn.withdraw-cancel-btn:hover,
.cx-table-action-btn:hover.withdraw-cancel-btn {
    color: var(--cxcolor-1);
    background: var(--cxopcolor-4);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--cxcolor-1) 32%, transparent);
}

.cx-table-action-btn.style-1 {
    color: var(--main);
    background: var(--cxbgmainfou);
    transition: all 0.2s ease;
}

.cx-table-action-btn.style-1:hover {
    color: var(--text-color-6);
    background: var(--mainfou);
    transform: translateY(-1px);
}

.cx-table-empty {
    text-align: center;
    padding: 40px 16px !important;
}

.cx-table-empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
}

.cx-table-empty-content i {
    font-size: 40px;
    opacity: 0.5;
}

.cx-table-empty-content span {
    font-size: 14px;
}

@media (max-width: 768px) {
    .cx-table-container {
        overflow-x: auto;
    }

    .cx-table {
        min-width: 600px;
    }

    .cx-table thead th,
    .cx-table tbody td {
        padding: 12px;
        font-size: 12px;
    }
}

.cx-flatpickr-clear-wrap {
    position: relative;
}

.cx-flatpickr-clear-wrap .cx-flatpickr-clearable {
    padding-right: 36px !important;
}

.cx-flatpickr-clear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 17px;
    font-size: 12px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    color: #8f94a8;
    z-index: 2;
}

.cx-flatpickr-clear:hover {
    color: #c9cede;
}

.cx-flatpickr-clear.show {
    display: inline-flex;
}

#identityVerifyModal #identity_birth_year~.cx-flatpickr-clear {
    display: none !important;
}

/* Notifications page redesign */
.cx-notify-page {
    width: 100%;
}

.cx-notify-page .cxPageHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cx-notify-mark-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--br-1);
    background: var(--main);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.cx-notify-mark-all-btn:hover {
    opacity: 0.85;
}

.cx-notify-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 0;
}

.cx-notify-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 660px;
    background-color: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5) 0 0 var(--br-1-5);
    overflow: hidden;
}

.cx-notify-content {
    min-height: 660px;
    background-color: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-left: none;
    border-radius: 0 var(--br-1-5) var(--br-1-5) 0;
    padding: 24px;
}

.cx-notify-sidebar-title {
    padding: 16px 18px;
    border-bottom: 2px solid var(--cxbcolor);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-color);
    background-color: var(--cxbgmainfiv-thi);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cx-notify-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 50px;
    background: var(--main);
    color: var(--text-color-6);
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
    margin-left: 2px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cx-notify-sidebar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cx-notify-sidebar-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--cxcolor-7);
    background: var(--cxopcolor-5);
    font-size: 12px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    transition: all 0.2s ease;
    text-decoration: none;
}

.cx-notify-sidebar-action-btn:hover {
    color: var(--cxcolor-7);
    background: var(--cxopcolor-5);
    transform: translateY(-1px);
}

.cx-notify-sidebar-action-danger {
    color: var(--cxcolor-1);
    background: var(--cxopcolor-4);
}

.cx-notify-sidebar-action-danger:hover {
    color: var(--cxcolor-1);
    background: var(--cxopcolor-4);
    transform: translateY(-1px);
}

.cx-notify-list {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 596px;
    overflow-y: auto;
    flex: 1;
}

.cx-notify-list::-webkit-scrollbar {
    width: 4px;
}

.cx-notify-list::-webkit-scrollbar-track {
    background: transparent;
}

.cx-notify-list::-webkit-scrollbar-thumb {
    background: var(--cxbcolor-3);
    border-radius: var(--br-1);
}

.cx-notify-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color-h);
    border: 2px dashed var(--cxbcolor);
    border-radius: var(--br-1);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.cx-notify-load-more:hover {
    color: var(--main);
    border-color: var(--main);
    background: var(--cxbgmainthi);
}

.cx-notify-load-more.loading {
    pointer-events: none;
    opacity: 0.6;
}

.notification-date {
    color: var(--text-color-h);
    font-size: 10px;
}

.cx-notify-item {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-2);
    background-color: var(--cxbgmainsec);
    transition: all 0.15s;
    padding-right: 8px;
    position: relative;
}

.cx-notify-item:hover {
    background-color: var(--cxbgmainthi);
    border-color: var(--cxbcolor-3);
}

.cx-notify-item.active-notification {
    border-color: var(--main);
    background-color: var(--cxbgmainthi);
}

.cx-notify-item.unread-notification::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--main);
    z-index: 1;
}

.cx-notify-item.unread-notification .cx-notify-item-main {
    padding-left: 22px;
}

.cx-notify-item-main {
    flex: 1;
    border: none;
    background: transparent;
    color: inherit;
    display: flex;
    /* İçerik uzasa da ikon sabit kalsın */
    align-items: flex-start;
    gap: 10px;
    padding: 10px 10px;
    text-align: left;
    cursor: pointer;
}

.cx-notify-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--br-1);
    border: 2px solid var(--cxbcolor);
    flex-shrink: 0;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cx-notify-icon-wrap {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--br-1);
    background: var(--cx-notif-icon-bg, var(--cxbgmainthi));
    border: 2px solid var(--cx-notif-icon-border, var(--cxbcolor));
    flex-shrink: 0;
    font-size: 14px;
    color: var(--cx-notif-icon-color, var(--main));
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cx-notify-texts {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cx-notify-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color-7);
    white-space: normal;
    word-break: break-word;
}

.cx-notify-message {
    font-size: 11.5px;
    color: var(--text-color);
    overflow: hidden;
    /* -webkit-box line-clamp kaldırıldı: içerik uzayabilir */
    display: block;
    white-space: normal;
}

.cx-notify-priority-badge {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
}

.cx-notify-priority-badge.high {
    background: var(--cxopcolor-50);
    color: var(--cxcolor-50);
    border: 2px solid var(--cxopcolor-47-hover);
}

.cx-notify-delete-btn {
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--text-color-h);
    background: transparent;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    opacity: 0;
}

.cx-notify-item:hover .cx-notify-delete-btn {
    opacity: 1;
}

.cx-notify-delete-btn:hover {
    background: var(--cxopcolor-4);
    color: var(--cxcolor-1);
}

/* --- Right content panel --- */

.cx-notify-content-empty {
    height: 100%;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
}

.cx-notify-content-empty-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cxbgmainthi);
    border: 2px solid var(--cxbcolor);
}

.cx-notify-content-empty-icon i {
    font-size: 30px;
    color: var(--text-color-h);
}

.cx-notify-content-empty-text {
    font-size: 14px;
    color: var(--text-color-h);
    line-height: 1.6;
}

.cx-notify-content-empty-text strong {
    display: block;
    font-size: 15px;
    color: var(--text-color);
    margin-bottom: 4px;
}

.cx-notify-content-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
}

.cx-notify-content-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid var(--cxbcolor);
}

.cx-notify-content-head img,
.cx-notify-detail-img {
    width: 48px;
    height: 48px;
    border-radius: var(--br-1);
    border: 2px solid var(--cxbcolor);
    object-fit: cover;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cx-notify-detail-icon-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--br-1);
    background: var(--cxbgmainthi);
    border: 2px solid var(--cxbcolor);
    color: var(--main);
    font-size: 18px;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

#detailVisual {
    flex-shrink: 0;
}

.cx-notify-content-head-text {
    min-width: 0;
}

.cx-notify-content-head-text h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
}

.cx-notify-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.cx-notify-content-head-text small {
    font-size: 12px;
    color: var(--text-color-h);
}

.cx-notify-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    background: var(--cxbgmainthi);
    color: var(--text-color-h);
    border: 1px solid var(--cxbcolor);
}

.cx-notify-type-badge.type-site {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.2);
}

.cx-notify-type-badge.type-order {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border-color: rgba(99, 102, 241, 0.2);
}

.cx-notify-type-badge.type-follow {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.2);
}

.cx-notify-type-badge.type-like {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
}

.cx-notify-type-badge.type-comment {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.2);
}

.cx-notify-type-badge.type-system {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    border-color: rgba(107, 114, 128, 0.2);
}

.cx-notify-type-badge.type-promotion {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
    border-color: rgba(168, 85, 247, 0.2);
}

.cx-notify-type-badge.type-security {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
}

.cx-notify-type-badge.type-payment {
    background: rgba(20, 184, 166, 0.1);
    color: #14b8a6;
    border-color: rgba(20, 184, 166, 0.2);
}

.cx-notify-type-badge.type-listing {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.2);
}

.cx-notify-content-body {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-color);
    white-space: pre-wrap;
    word-break: break-word;
    padding: 20px 0;
    flex: 1;
}

.cx-notify-content-footer {
    padding-top: 16px;
    border-top: 1.5px solid var(--cxbcolor);
}

.cx-notify-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--br-1);
    background: var(--main);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
}

.cx-notify-action-btn:hover {
    opacity: 0.85;
    color: #fff;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--main) 32%, transparent);
}

/* --- Empty list (sidebar) --- */

.cx-notify-empty-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
}

.cx-notify-empty-list-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cxbgmainthi);
    border: 1.5px solid var(--cxbcolor);
}

.cx-notify-empty-list-icon i {
    font-size: 22px;
    color: var(--text-color-h);
}

.cx-notify-empty-list span {
    font-size: 13px;
    color: var(--text-color-h);
    line-height: 1.5;
}

@media (max-width: 1200px) {
    .cx-notify-layout {
        grid-template-columns: 290px minmax(0, 1fr);
    }
}

@media (max-width: 992px) {
    .cx-notify-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cx-notify-sidebar {
        min-height: auto;
        border-radius: var(--br-1-5);
    }

    .cx-notify-content {
        min-height: auto;
        border-left: 2px solid var(--cxbcolor);
        border-radius: var(--br-1-5);
    }

    .cx-notify-list {
        max-height: 360px;
    }

    .cx-notify-content-empty {
        min-height: 260px;
    }

    .cx-notify-delete-btn {
        opacity: 1;
    }
}

.formSearch-icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding-right: 12px;
    color: var(--text-color-h);
    z-index: 2;
    pointer-events: none;
    font-size: 14px;
}

/* Ticket detail (chat) page */
.tk-chat {
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    overflow: hidden;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.tk-ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 15px;
    border-bottom: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5) var(--br-1-5) 0 0;
    background: var(--cxbgmainthi);
}

.tk-ticket-header-main {
    min-width: 0;
}

.tk-ticket-title {
    margin: 0 0 6px 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--text-color);
    word-break: break-word;
}

.tk-ticket-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color-h);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    flex-wrap: wrap;
}

.tk-ticket-meta-dot {
    opacity: 0.7;
}

.tk-ticket-category {
    color: var(--main);
    font-weight: 600;
}

.tk-ticket-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tk-ticket-close-btn {
    margin-top: 0;
    white-space: nowrap;
    background: var(--cxopcolor-4);
    color: var(--cxcolor-1);
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--br-1);
    font-size: 11px;
    font-weight: 600;
}

.tk-ticket-close-btn:hover {

    color: var(--cxcolor-1);
    background: var(--cxopcolor-4);
    transform: translateY(-1px);
}

.tk-chat-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 520px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--cxbcolor-3) transparent;
}

.tk-chat-body::-webkit-scrollbar {
    width: 5px;
}

.tk-chat-body::-webkit-scrollbar-thumb {
    background: var(--cxbcolor-3);
    border-radius: var(--br-1);
}

.tk-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 72%;
}

.tk-msg--own {
    flex-direction: row-reverse;
    margin-left: auto;
}

.tk-msg--other {
    margin-right: auto;
}

.tk-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--br-1);
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--cxbcolor);
}

.tk-msg-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tk-msg-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
}

.tk-msg--own .tk-msg-head {
    flex-direction: row-reverse;
}

.tk-msg-author {
    font-size: 11px;
    font-weight: 600;
    color: var(--main);
}

.tk-msg-date {
    font-size: 10px;
    color: var(--text-color-h);
}

.tk-msg-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-color);
    white-space: pre-wrap;
    word-break: break-word;
}

.tk-msg--other .tk-msg-bubble {
    background: var(--cxbgmainfou);
    border: 1px solid var(--cxbcolor);
    border-bottom-left-radius: 2px;
}

.tk-msg--own .tk-msg-bubble {
    background: var(--cxopcolor-7);
    border: 1px solid var(--cxbcolor-3);
    border-bottom-right-radius: 2px;
}

/* Reply */
.tk-reply {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 2px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
}

.tk-reply-input {
    flex: 1;
    resize: none;
    border: 1px solid var(--cxbcolor);
    border-radius: var(--br-1);
    background: var(--cxbgmainsec);
    color: var(--text-color);
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    min-height: 44px;
    max-height: 120px;
    transition: border-color .15s;
}

.tk-reply-input::placeholder {
    color: var(--text-color-h);
}

.tk-reply-input:focus {
    outline: none;
    border-color: var(--cxbcolor-3);
}

.tk-reply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--br-1);
    background: var(--main);
    color: var(--text-color-6);
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s;
    height: 44px;
}

.tk-reply-btn:hover {
    background: var(--mainfou);
}

/* Closed state */
.tk-closed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    background: var(--cxopcolor-4);
    color: var(--cxcolor-1);
    font-size: 13px;
    font-weight: 500;
}

.tk-closed i {
    font-size: 18px;
}

@media (max-width: 768px) {
    .tk-ticket-header {
        flex-direction: column;
        align-items: stretch;
        margin: 12px 12px 10px;
    }

    .tk-ticket-header-actions {
        justify-content: flex-start;
    }

    .tk-chat-body {
        padding: 12px;
        max-height: 400px;
    }

    .tk-msg {
        max-width: 88%;
    }

    .tk-reply {
        flex-direction: column;
        align-items: stretch;
    }

    .tk-reply-btn {
        width: 100%;
    }
}

/* Orders - Modern Card (Minimal) */
.orderCards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.orderCard {
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    overflow: hidden;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.orderCard-head {
    padding: 10px 15px;
    border-bottom: 1px solid var(--cxbcolor);
}

.orderCard-product {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.orderCard-thumb {
    width: 50px;
    height: 50px;
    border-radius: var(--br-1);
    background: var(--cxbgmainfou);
    border: 2px solid var(--cxbcolor);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-h);
    font-size: 14px;
    overflow: hidden;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

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

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

.orderCard-productName {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.orderCard-productSub,
.orderCard-productSub a {
    color: var(--main);
    font-size: 12px;
    font-weight: 500;
}

.orderCard-meta .col-lg-4,
.orderCard-meta .col-md-6,
.orderCard-meta .col-md-12 {
    margin-bottom: 0 !important;
}

.orderCard-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--cxbgmainthi);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1);
    height: 32px;
    padding: 0 9px;
    color: var(--text-color);
    font-size: 11px;
    font-weight: 500;
}

.orderCard-chip i {
    color: var(--mainsix-sec);
    font-size: 13px;
}

.orderCard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
}

.orderCard-prices {
    display: flex;
    align-items: center;
    gap: 6px;
}

.orderCard-priceLabel {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 500;
}

.orderCard-old {
    color: var(--cxcolor-1);
    text-decoration: line-through;
    font-size: 11px;
    font-weight: 500;
}

.orderCard-new {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.orderCard-statusWrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.orderCard-detailBtn {
    border: none;
    background: var(--main);
    color: var(--text-color-6);
    border-radius: var(--br-1);
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    transition: all .15s ease;
}

.orderCard-detailBtn:hover {
    background: var(--mainfou);
    color: var(--text-color-6);
}

.orderCard-detailPanel {
    padding: 10px 12px 12px 12px;
    border-top: 1px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
}

.orderCard-detailTitle {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.orderCard-detailItem {
    display: flex;
    align-items: center;
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainfiv-thi);
    border-radius: var(--br-1-5);
    padding: 8px;
    margin-bottom: 0;
}

.orderCard-detailProduct {
    display: flex;
    align-items: center;
    gap: 10px;
}

.orderCard-detailThumb {
    width: 46px;
    height: 46px;
    border-radius: var(--br-1);
    background: var(--cxbgmainthi);
    border: 2px solid var(--cxbcolor);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-h);
    font-size: 14px;
    overflow: hidden;
    flex-shrink: 0;
}

.orderCard-detailThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.orderCard-detailProductInfo {
    min-width: 0;
}

.orderCard-detailName {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.orderCard-detailSub,
.orderCard-detailSub a {
    color: var(--main);
    font-size: 12px;
    font-weight: 500;
}

.orderCard-detailMeta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.orderCard-detailPrice {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.orderCard-codeBox {
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainsec);
    border-radius: var(--br-1-5);
    padding: 9px;
    margin-bottom: 10px;
}

.orderCard-detailItem+.orderCard-codeBox {
    margin-top: -1px;
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: var(--cxbgmainsec);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.orderCard-detailItem {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.orderCard-codeHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
}

.orderCard-codeActions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.orderCard-miniBtn {
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
    color: var(--text-color);
    border-radius: var(--br-1);
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}

.orderCard-miniBtn:hover {
    border-color: var(--mainfou);
    background: var(--mainfou);
    color: var(--text-color-6);
}

.orderCard-miniBtn:hover.orderCard-miniBtn i {}

.orderCard-miniBtn i {
    font-size: 10px;
}

.orderCard-miniBtn-muted {
    opacity: 0.9;
}

/*
.orderCard-codes {
    margin-top: 2px;
} */

.orderCard-code {
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
    color: var(--text-color);
    border-radius: var(--br-1);
    min-height: 38px;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 600;
    transition: all .15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

.orderCard-codeIndex {
    width: 22px;
    min-width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--cxbgmainfiv-thi);
    box-shadow: 0 0 0 4px var(--cxbgmainfiv);
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.orderCard-codeText {
    flex: 1;
    min-width: 0;
    color: var(--text-color);
    font-size: 13px;
    letter-spacing: 0.2px;
    word-break: break-all;
}

.orderCard-codeCopy {
    width: 26px;
    min-width: 26px;
    height: 26px;
    border: 1px solid var(--cxbcolor);
    background: var(--cxbgmainsec);
    color: var(--text-color-h);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s ease;
}

.orderCard-codeCopy i {
    font-size: 12px;
}

.orderCard-codeCopy:hover:not(.disabled) {
    color: var(--text-color);
    background: var(--cxbgmainfou);
}

.orderCard-codeCopy.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.orderCard-code.is-pending {
    color: var(--text-color-h);
    border-style: dashed;
}

.orderCard-totalActions {
    border-top: 1px dashed var(--cxbcolor);
    margin-top: 4px;
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 992px) {
    .orderCard-foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .orderCard-statusWrap {
        width: 100%;
        justify-content: space-between;
    }

    .orderCard-detailItem {
        padding: 8px 6px;
    }

    .orderCard-detailMeta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 4px;
    }

    .orderCard-codeHead {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .orderCard-codeActions {
        flex-wrap: wrap;
        gap: 4px;
    }

    .orderCard-miniBtn {
        font-size: 10px;
        padding: 4px 8px;
    }
}

@media (max-width: 576px) {
    .orderCard-detailThumb {
        width: 36px;
        height: 36px;
    }

    .orderCard-detailName {
        font-size: 12px;
    }

    .orderCard-detailPrice {
        font-size: 11px;
    }

    .orderCard-code {
        font-size: 11px;
        padding: 6px 8px;
    }

    .orderCard-codeIndex {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }
}

/* ================================================================
   LISTING ORDERS - P2P Sipariş Kartları
   ================================================================ */


.listingOrder-actions .orderCard-miniBtn.style-1 {
    background: var(--cxopcolor-19);
    color: var(--cxcolor-19);
}

.listingOrder-actions .orderCard-miniBtn.style-2 {
    background: var(--cxopcolor-24);
    color: var(--cxcolor-24);
}

.listingOrder-actions .orderCard-miniBtn.style-3 {
    background: var(--cxopcolor-23);
    color: var(--cxcolor-23);

}

.listingOrder-deliveryBox {
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainsec);
    border-radius: 0 0 var(--br-1-5) var(--br-1-5);
    overflow: hidden;
    border-top: 0;
}

.listingOrder-deliveryHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.listingOrder-deliveryHeadLeft {
    display: flex;
    align-items: center;
    gap: 8px;
}

.listingOrder-deliveryHeadLeft i {
    color: var(--mainsix-sec);
    font-size: 14px;
}

.listingOrder-deliveryContent {
    padding: 14px;
}

.listingOrder-deliveryInfo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1);
    background: var(--cxbgmainthi);
    color: var(--text-color);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s;
    word-break: break-all;
}

.listingOrder-deliveryInfo:hover {
    border-color: var(--main);
}

.listingOrder-deliveryInfo i {
    color: var(--mainsix-sec);
    font-size: 14px;
    flex-shrink: 0;
}

.listingOrder-deliveryActions {
    margin-top: 12px;
}

.listingOrder-statusMsg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--br-1);
    font-size: 14px;
    font-weight: 600;
    height: 45px;
    text-align: center;
}

.listingOrder-statusMsg--success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 2px solid rgba(34, 197, 94, 0.2);
}

.listingOrder-statusMsg--danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 2px solid rgba(239, 68, 68, 0.2);
}

.listingOrder-statusMsg--warning {
    background: rgba(234, 179, 8, 0.1);
    color: #eab308;
    border: 2px solid rgba(234, 179, 8, 0.2);
}

.listingOrder-statusMsg--waiting {
    background: var(--cxopcolor-22);
    color: var(--cxcolor-22);
}

.listingOrder-statusMsg--info {
    background: var(--cxopcolor-24);
    color: var(--cxcolor-24);
    border: 2px solid color-mix(in srgb, var(--cxcolor-24) 25%, transparent);
}

.listingOrder-statusMsg--dispute-open {
    background: var(--cxopcolor-47);
    border: 2px solid var(--cxopcolor-47-hover);
    color: var(--cxcolor-47);
}

.listingOrder-btnGroup {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.listingOrder-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--br-1);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    flex: 1;
    min-width: 160px;
}

.listingOrder-btn--confirm {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.listingOrder-btn--confirm:hover {
    background: #22c55e;
    color: #fff;
}

.listingOrder-btn--cancel {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.listingOrder-btn--cancel:hover {
    background: #ef4444;
    color: #fff;
}

@media (max-width: 768px) {
    .listingOrder-btnGroup {
        flex-direction: column;
    }

    .listingOrder-btn {
        min-width: unset;
        width: 100%;
    }

    .listingOrder-deliveryInfo {
        font-size: 12px;
        padding: 10px 12px;
    }
}

/* Google Authenticator Setup Modal */
.cx-ga-manual-key {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 6px 0;
    font-size: 14px;
}

.cx-ga-manual-key-value {
    color: var(--text-color);
    word-break: break-all;
    font-weight: 600;
}

.cx-ga-qr-area {
    display: flex;
    justify-content: center;
    padding: 5px 0 10px 0;
}

.cx-ga-qr-container {
    background: #fff;
    padding: 12px;
    border-radius: var(--br-1);
    display: inline-block;
    line-height: 0;
}

.cx-ga-qr-container img {
    display: block;
    border-radius: 6px;
    max-width: 100%;
    height: auto;
}

/* Header profile drawer */
body.cx-profile-drawer-open {
    overflow: hidden;
}

.cxMenuDrawerOverlay,
.cx-profile-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: hsl(0deg 0% 0% / 42%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.cxMenuDrawerOverlay.is-open,
.cx-profile-drawer-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.cxMenuDrawer,
.cx-profile-drawer {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: min(360px, 90vw);
    background: var(--cxbgmainsec);
    border-right: 2px solid var(--cxbcolor);
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 14px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--cxbcolor-3) transparent;
}

.cxMenuDrawer.is-open,
.cx-profile-drawer.is-open {
    transform: translateX(0);
}

.cxMenuDrawer::-webkit-scrollbar,
.cx-profile-drawer::-webkit-scrollbar {
    width: 4px;
}

.cxMenuDrawer::-webkit-scrollbar-track,
.cx-profile-drawer::-webkit-scrollbar-track {
    background: transparent;
}

.cxMenuDrawer::-webkit-scrollbar-thumb,
.cx-profile-drawer::-webkit-scrollbar-thumb {
    background: var(--cxbcolor-3);
    border-radius: var(--br-1);
}

/* Reusable scrollbar utilities for future side menus */
.cx-scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--cxbcolor-3) transparent;
}

.cx-scrollbar-thin::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.cx-scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.cx-scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--cxbcolor-3);
    border-radius: var(--br-1);
}

.cx-scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.cx-scrollbar-none::-webkit-scrollbar {
    display: none;
}

.cxMenuDrawerHead,
.cx-profile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.cx-profile-drawer-user {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cx-profile-drawer-user img {
    width: 40px;
    height: 40px;
    border-radius: var(--br-1);
    object-fit: cover;
    border: 2px solid var(--cxbcolor);
}

.cx-profile-drawer-user-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cx-profile-drawer-user-info strong {
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-profile-drawer-user-info span {
    font-size: 12px;
    color: var(--main);
    font-weight: 600;
}

.cxMenuDrawerClose,
.cx-profile-drawer-close {
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--cxbgmainfou);
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.cxMenuDrawerSection,
.cx-profile-drawer-section {
    border-top: 1px solid var(--cxbcolor);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cxMenuDrawerTitle,
.cx-profile-drawer-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.cx-profile-drawer-section-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--cxbcolor);
    background: var(--cxbgmainfiv);
    color: var(--text-color-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.cx-profile-balance-card {
    border: 1px solid var(--cxbcolor);
    border-radius: 12px;
    background: var(--cxbgmainthi);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cx-profile-balance-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cx-profile-balance-top span {
    font-size: 12px;
    color: var(--text-color-h);
    font-weight: 600;
}

span.cx-profile-balance-amount {
    margin-left: auto;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1;
}

.cx-profile-balance-eye {
    border: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-color-h);
    background: var(--cxbgmainfou);
}

.cx-profile-balance-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}


.cxMenuDrawerLink,
.cx-profile-drawer-link,
.cx-profile-drawer-section a:not(.cx-profile-balance-btn) {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    padding: 6px 8px;
    transition: all .15s ease;
}

.cxMenuDrawerLink:hover,
.cx-profile-drawer-link:hover,
.cx-profile-drawer-section a:not(.cx-profile-balance-btn):hover {
    color: var(--main);
    background: transparent;
}

.cxMenuDrawerLogout,
.cx-profile-drawer-logout {
    margin-top: auto;
    border: 1px solid var(--cxcolor-1);
    color: var(--cxcolor-1);
    border-radius: var(--br-1);
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
}

.cxMenuDrawerLogout:hover,
.cx-profile-drawer-logout:hover {
    color: var(--cxcolor-1);
    background: var(--cxopcolor-4);
}

.cx-profile-balance-btn {
    min-height: 36px;
    border: 2px solid var(--main);
    border-radius: var(--br-1);
    color: var(--text-color-6);
    background: var(--main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 0 10px;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
}

.cx-profile-balance-btn:hover {
    color: var(--text-color-6);
    background: var(--mainfou);
    border-color: var(--mainfou);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--main) 32%, transparent);
}

.cx-profile-balance-btn-load {
    background: var(--main);
    border-color: var(--main);
    color: var(--text-color-6);
}

.cx-profile-balance-btn-load:hover {
    background: var(--mainfou);
    border-color: var(--mainfou);
    color: var(--text-color-6);
}

.cx-profile-balance-btn-withdraw {
    background: var(--cxbgmainsec);
    border-color: var(--cxbcolor);
    color: var(--text-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cx-profile-balance-btn-withdraw:hover {
    background: var(--cxbgmainfou);
    border-color: var(--cxbcolor);
    color: var(--text-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1280px) {

    .cxMenuDrawer,
    .cx-profile-drawer {
        width: 100vw;
        max-width: 100vw;
        border-right: 0;
    }

    .cx-profile-balance-amount {
        font-size: 17px;
    }
}

/* ================================================================
   MODERN CHAT PAGE
   ================================================================ */
.cx-chat-modern {
    /*margin-top: 6px;*/
}

.cx-chat-modern .row {
    --bs-gutter-x: 0;
}

.cx-chat-modern .cx-chat-left-col,
.cx-chat-modern .cx-chat-right-col {
    padding: 0 !important;
}

.cx-chat-modern .cxclbg-1,
.cx-chat-modern .cxclbg-2 {
    height: 700px;
    min-height: 700px;
    border: 2px solid var(--cxbcolor);
}

.cx-chat-modern .cxclbg-1 {
    background: var(--cxbgmainsec);
    border-right: 0;
    border-radius: var(--br-1-5) 0 0 var(--br-1-5);
}

.cx-chat-modern .cxclbg-2 {
    background: var(--cxbgmainsec);
    border-radius: 0 var(--br-1-5) var(--br-1-5) 0;
}

.cx-chat-modern .cxchatL {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cx-chat-modern .cxchatL.is-empty {
    min-height: 100%;
}

.cx-chat-modern .cxpendingorderList {
    padding: 15px;
    border-bottom: 2px solid var(--cxbcolor);
}

.cx-chat-modern .cx-chat-sidebar-empty-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.cx-chat-modern .cx-chat-sidebar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cx-chat-modern .cx-chat-page-filter-actions {
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 8px;
}

.cx-chat-modern .cx-chat-page-filter-actions .cx-chat-side-btn {
    flex: 0 1 auto;
    gap: 6px;
    border-radius: var(--br-1-5);
    height: auto;
    min-height: 38px;
    padding: 0 12px;
    font-family: inherit;
}

.cx-chat-modern .cx-chat-page-filter-actions button.cx-chat-side-btn {
    cursor: pointer;
}

.cx-chat-modern .cx-chat-page-filter-actions .cx-chat-side-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cx-chat-modern .cx-chat-page-filter-actions .cx-chat-page-mark-read-btn {
    margin-left: auto;
    flex: 0 0 auto !important;
    min-width: 0;
    gap: 6px;
    padding: 0 12px;
}

.cx-chat-modern .cx-chat-page-filter-actions .cx-chat-page-mark-read-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cx-chat-modern .cx-chat-side-btn {
    height: 40px;
    border-radius: var(--br-1);
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainfou);
    color: var(--text-color);
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all .15s ease;
    white-space: nowrap;
    flex: 1;
}

.cx-chat-modern .cx-chat-side-btn.is-primary {
    flex: 2.4;
    font-size: 12px;
    padding-inline: 14px;
}

.cx-chat-modern .cx-chat-side-btn-new {
    background: var(--main);
    border-color: var(--main);
    color: var(--text-color-6);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
}

.cx-chat-modern .cx-chat-side-btn-new:hover {
    background: var(--mainfou);
    border-color: var(--mainfou);
    color: var(--text-color-6);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--main) 32%, transparent);
}

.cx-chat-modern .cx-chat-side-btn.is-icon {
    width: 40px;
    min-width: 40px;
    padding: 0;
    flex: 0 0 40px;
    font-size: 15px;
}

.cx-chat-modern .cx-chat-side-btn-unread {
    border-color: var(--cxbcolor);
}

.cx-chat-modern .cx-chat-side-btn-mark-read {
    border-color: var(--cxopcolor-41-hover);
    background: var(--cxopcolor-41);
    color: var(--cxcolor-41);
}

.cx-chat-modern .cx-chat-side-btn:hover {
    background: var(--mainfou);
    border-color: var(--mainfou);
    color: var(--text-color-6);
}


.cx-chat-modern .cx-chat-side-btn-mark-read:hover {
    border-color: var(--cxopcolor-42-hover);
    background: var(--cxopcolor-42);
    color: var(--cxcolor-42);
}

.cx-chat-modern .cx-chat-list-search {
    padding: 12px 10px 2px 10px;
}

.cx-chat-modern .cx-chat-list-search .formControl {
    height: 40px;
    border-radius: var(--br-1);
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainfou);
    padding-right: 38px;
    font-size: 12px;
}

.cx-chat-modern .cx-chat-list-search .formSearch-icon {
    right: 0;
    left: auto;
}

.cx-chat-modern .cx-chat-empty {
    width: 100%;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 22px 14px;
}

.cx-chat-modern .cx-chat-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cx-chat-modern .cx-chat-empty-icon i {
    font-size: 18px;
    color: var(--text-color-h);
}

.cx-chat-modern .cx-chat-empty span {
    color: var(--text-color-h);
    font-size: 12px;
    line-height: 1.5;
}

.cx-chat-modern .cxchatListM {
    margin-top: 0;
    padding: 10px;
    gap: 6px;
    max-height: 520px;
    overflow-y: auto;
    position: relative;
}

.cx-chat-modern .cx-chat-sidebar-list-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.cx-chat-modern .cx-chat-sidebar-list-empty {
    padding: 24px 14px;
    text-align: center;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-color-h);
}

.cx-chat-modern .cx-chat-sidebar-list-empty.is-illustrated {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 200px;
}

.cx-chat-modern .cx-chat-sidebar-list-empty.is-illustrated .cx-chat-empty-icon i {
    font-size: 22px;
    color: var(--text-color-h);
    opacity: 0.85;
}

/* Okunmamış filtresi: boş durum (tümü ile aynı metin/işlev değil, görsel olarak ayrı) */
.cx-chat-modern .cx-chat-sidebar-list-empty.cx-chat-sidebar-list-empty--unread {
    border: 1px dashed color-mix(in srgb, var(--cxbcolor) 70%, transparent);
    border-radius: var(--br-1-3);
    background: linear-gradient(165deg,
            color-mix(in srgb, var(--main) 12%, var(--cxbgmainsec)) 0%,
            var(--cxbgmainthi) 55%,
            var(--cxbgmainsec) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cxbgmain) 8%, transparent);
}

.cx-chat-modern .cx-chat-sidebar-list-empty.cx-chat-sidebar-list-empty--unread .cx-chat-empty-icon i {
    font-size: 26px;
    color: var(--main);
    opacity: 1;
}

.cx-chat-modern .cx-chat-sidebar-list-empty.cx-chat-sidebar-list-empty--unread .cx-chat-empty-title {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
    letter-spacing: 0.01em;
}

.cx-chat-modern .cx-chat-sidebar-list-empty.cx-chat-sidebar-list-empty--unread .cx-chat-empty-sub {
    display: block;
    max-width: 268px;
    margin: 0 auto;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-color-h);
}

.cx-chat-modern .cx-chat-sidebar-list-empty.cx-chat-sidebar-list-empty--unread .cx-chat-empty-sub strong {
    color: var(--text-color);
    font-weight: 600;
}

/* “Tümü” filtresi: henüz sohbet yok — okunmamış boştan farklı ton */
.cx-chat-modern .cx-chat-sidebar-list-empty.cx-chat-sidebar-list-empty--all {
    border: 1px dashed color-mix(in srgb, var(--cxbcolor) 32%, transparent);
    border-radius: var(--br-1-3);
    background: linear-gradient(195deg,
            color-mix(in srgb, var(--main) 12%, var(--cxbgmainsec)) 0%,
            var(--cxbgmainthi) 50%,
            var(--cxbgmainfiv-thi) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cxbgmain) 10%, transparent);
}

.cx-chat-modern .cx-chat-sidebar-list-empty.cx-chat-sidebar-list-empty--all .cx-chat-empty-icon i {
    font-size: 28px;
    color: color-mix(in srgb, var(--main) 88%, var(--text-color));
    opacity: 1;
}

.cx-chat-modern .cx-chat-sidebar-list-empty.cx-chat-sidebar-list-empty--all .cx-chat-empty-title {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
    letter-spacing: 0.01em;
}

.cx-chat-modern .cx-chat-sidebar-list-empty.cx-chat-sidebar-list-empty--all .cx-chat-empty-sub {
    display: block;
    max-width: 280px;
    margin: 0 auto;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-color-h);
}

.cx-chat-modern .cx-chat-sidebar-list-empty.cx-chat-sidebar-list-empty--all .cx-chat-empty-sub strong {
    color: var(--text-color);
    font-weight: 600;
}

.cx-inline-loader {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    background: color-mix(in srgb, var(--cxbgmainsec) 82%, transparent);
    backdrop-filter: blur(3px);
    border-radius: inherit;
    pointer-events: none;
}

.cx-inline-loader.is-visible {
    display: flex;
    pointer-events: auto;
}

.cx-inline-loader__spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--main) 25%, transparent);
    border-top-color: var(--main);
    animation: cx-inline-loader-spin 0.75s linear infinite;
}

.cx-inline-loader__text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color-h);
}

@keyframes cx-inline-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Mağaza listing grid'leri için infinite-scroll sentinel/yükleyici wrapper.
   Mevcut .cx-inline-loader__spinner ve .cx-inline-loader__text class'larını
   tekrar kullanır; sadece konumlandırma. */
.cxInfiniteSentinel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 0 32px;
    min-height: 60px;
}

.cxInfiniteSentinel[aria-busy="false"] .cx-inline-loader__spinner,
.cxInfiniteSentinel[aria-busy="false"] .cx-inline-loader__text {
    opacity: 0.5;
}

/* Top-filters: switch'lerin tümü gizlendiğinde mobilde yalnızca sort select
   kalır. `justify-content-between` tek çocuğu sola yapıştırdığı için, action
   satırını her durumda sağa hizala. */
.cxTopFiltersActions:not(:has(.cxTopFilterSwitch)) {
    justify-content: flex-end !important;
    gap: 0;
}

/* 0 switch durumunda actions kolonu col-lg-auto olduÄŸundan select kendi
   içerik genişliğine sıkışır; lg+ breakpoint'inde çok dar olmasın diye
   tabanı garantile. */
@media (min-width: 992px) {
    .cxTopFiltersActions:not(:has(.cxTopFilterSwitch)) #sortingSelect {
        min-width: 180px;
    }
}

/* Filter sidebar: alt kategori accordion'ları (max-height animasyonu;
   tarayıcı uyumluluğu yüksek) ve chevron dönüşü. */
.cxStoreSubcats.cxStoreSubcatsCollapsible {
    overflow: hidden;
    max-height: 0;
    transition: max-height 240ms ease, opacity 180ms ease;
    opacity: 0;
}

.cxStoreSubcats.cxStoreSubcatsCollapsible.cxStoreSubcats--open {
    max-height: none;
    opacity: 1;
}

.cxStoreSubcatsInner {
    overflow: hidden;
}

.cxStoreCatToggle {
    cursor: pointer;
    user-select: none;
}

.cxStoreCatToggle .fa-sort-down {
    transition: transform 220ms ease;
    transform: rotate(0deg);
    transform-origin: 50% 55%;
}

.cxStoreCatToggle.is-open .fa-sort-down {
    transform: rotate(180deg);
}

.cx-chat-modern .cx-chat-side-btn.is-active {
    border-color: var(--mainfou);
    background: color-mix(in srgb, var(--main) 22%, transparent);
    color: var(--mainthi);
}

.cx-chat-modern .cxchatList {
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
    border-radius: var(--br-1-5);
    padding: 10px;
}

.cx-chat-modern .cxchatList:hover {
    border-color: var(--cxbcolor-3);
    background: var(--cxbgmainfou);
}

.cx-chat-modern .cxchatList.active {
    background: var(--cxbgmainfou);
    border-color: var(--mainfou);
    color: var(--text-color);
}

.cx-chat-modern .cxclinfo {
    width: auto;
    flex: 1;
    min-width: 0;
}

.cx-chat-modern .cxcliname {
    width: 100%;
    min-width: 0;
}

.cx-chat-modern .cxclilastmsg {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-chat-modern .cxcliname>span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-chat-modern .cxclitime {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-color-h);
}

.cx-chat-modern .cxcunread {
    min-width: 22px;
    height: 22px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--main);
    color: var(--text-color-6);
    position: static;
    flex-shrink: 0;
    margin-left: 8px;
}

.cx-chat-modern .cxchatLM {
    margin-top: 10px;
    margin-inline: 10px;
}

.cx-chat-modern .cxchatR,
.cx-chat-modern .cxchatRM {
    height: 100%;
}

.cx-chat-modern .cxchatRM {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cx-chat-modern .cxcheader {
    border-bottom: 2px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
    border-top-right-radius: var(--br-1-5);
    padding: 12px 14px;
    gap: 10px;
    justify-content: space-between;
}

.cx-chat-modern .cx-chat-user-main {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}

.cx-chat-modern .cx-chat-user-main .cxcinfo {
    min-width: 0;
}

.cx-chat-modern .cx-chat-user-main #chat-user-name {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-chat-modern .cxchbtns .cxchreport {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.cx-chat-modern .cxcarea {
    flex: 1;
    min-height: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cx-chat-modern .cxcarea.is-hidden {
    display: none;
}

.cx-chat-modern .cx-chat-empty-panel {
    min-height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--br-1);
    margin: 0;
    border: 0;
    background: transparent;
}

.cx-chat-modern .cx-chat-empty-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.cx-chat-modern .cx-chat-empty-panel strong {
    font-size: 16px;
    color: var(--text-color);
    font-weight: 600;
}

.cx-chat-modern .cx-chat-empty-panel span {
    max-width: 320px;
    font-size: 12px;
    color: var(--text-color-h);
    line-height: 1.6;
}

.cx-chat-modern .cx-chat-empty-note {
    margin-top: 4px;
    max-width: 760px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cx-chat-modern .cx-chat-empty-note h6 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #4f6bff;
}

.cx-chat-modern .cx-chat-empty-note p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-color-h);
}

.cx-chat-modern .cx-chat-empty-note-highlight {
    color: var(--text-color) !important;
    font-weight: 600;
}

.cx-chat-modern .cxcmsgs {
    padding: 10px;
    margin: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.cx-chat-modern .cx-chat-empty-thread {
    min-height: 100%;
}

.cx-chat-modern .cx-chat-empty-thread.is-illustrated {
    list-style: none;
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 10px;
    box-sizing: border-box;
}

.cx-chat-modern .cx-chat-empty-thread .cx-chat-thread-empty-card {
    width: 100%;
    max-width: 300px;
    padding: 24px 14px;
    text-align: center;
    border: 1px dashed color-mix(in srgb, var(--cxbcolor) 32%, transparent);
    border-radius: var(--br-1-3);
    background: linear-gradient(195deg,
            color-mix(in srgb, var(--main) 12%, var(--cxbgmainsec)) 0%,
            var(--cxbgmainthi) 50%,
            var(--cxbgmainfiv-thi) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cxbgmain) 10%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.cx-chat-modern .cx-chat-empty-thread .cx-chat-thread-empty-card .cx-chat-empty-icon i {
    font-size: 28px;
    color: color-mix(in srgb, var(--main) 88%, var(--text-color));
    opacity: 1;
}

.cx-chat-modern .cx-chat-empty-thread .cx-chat-thread-empty-card .cx-chat-empty-title {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
    letter-spacing: 0.01em;
}

.cx-chat-modern .cx-chat-empty-thread .cx-chat-thread-empty-card .cx-chat-empty-sub {
    display: block;
    max-width: 280px;
    margin: 0 auto;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-color-h);
}

.cx-chat-modern li.cxcleft .cxcmsg,
.cx-chat-modern li.cxcright .cxcmsg {
    width: auto;
    max-width: 66%;
    border-radius: 12px;
    padding: 9px 11px;
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cx-chat-modern li.cxcleft .cxcmsg {
    background: var(--cxbgmainfou);
    border: 1px solid var(--cxbcolor);
}

.cx-chat-modern li.cxcright .cxcmsg {
    background: var(--cxopcolor-7);
    border: 1px solid var(--cxbcolor-3);
}

.cx-chat-modern .cxcsystem {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 10px 0 14px;
}

.cx-chat-modern .cxcsystem-card {
    width: min(100%, 520px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    padding: 10px 13px 8px;
}

.cx-chat-modern .cxcsystem-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #f4f7ff;
}

.cx-chat-modern .cxcsystem-head-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cx-chat-modern .cxcsystem-head i {
    color: #a85dff;
    font-size: 12px;
}

.cx-chat-modern .cxcsystem-type {
    font-size: 11px;
    font-weight: 600;
    color: rgba(220, 228, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 3px 8px;
    line-height: 1;
    white-space: nowrap;
}

.cx-chat-modern .cxcsystem-body {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-color-7);
    white-space: pre-line;
    text-align: left;
}

.cx-chat-modern .cxcsystem-reason-box {
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cx-chat-modern .cxcsystem-reason-label {
    font-size: 11px;
    color: rgba(210, 220, 255, 0.78);
    font-weight: 600;
}

.cx-chat-modern .cxcsystem-reason-value {
    font-size: 13px;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.35;
}

.cx-chat-modern .cxcsystem-card.is-default {
    border-color: rgba(255, 255, 255, 0.12);
}

.cx-chat-modern .cxcsystem-card.is-order-approved-auto,
.cx-chat-modern .cxcsystem-card.is-order-approved-manual {
    border-color: rgba(80, 200, 120, 0.3);
    background: linear-gradient(180deg, rgba(80, 200, 120, 0.055), rgba(80, 200, 120, 0.02));
}

.cx-chat-modern .cxcsystem-card.is-order-approved-auto .cxcsystem-head i,
.cx-chat-modern .cxcsystem-card.is-order-approved-manual .cxcsystem-head i {
    color: #55d58a;
}

.cx-chat-modern .cxcsystem-card.is-order-approved-auto .cxcsystem-type,
.cx-chat-modern .cxcsystem-card.is-order-approved-manual .cxcsystem-type {
    border-color: rgba(80, 200, 120, 0.5);
    color: #9fe0bb;
}

.cx-chat-modern .cxcsystem-card.is-order-approved-auto .cxcsystem-body,
.cx-chat-modern .cxcsystem-card.is-order-approved-manual .cxcsystem-body {
    color: var(--text-color);
}

.cx-chat-modern .cxcsystem-card.is-order-cancel-auto,
.cx-chat-modern .cxcsystem-card.is-order-cancel-manual {
    border-color: rgba(255, 95, 95, 0.3);
    background: linear-gradient(180deg, rgba(255, 95, 95, 0.055), rgba(255, 95, 95, 0.02));
}

.cx-chat-modern .cxcsystem-card.is-order-details {
    border-color: rgba(255, 194, 38, 0.36);
    background: linear-gradient(180deg, rgba(255, 194, 38, 0.1), rgba(255, 194, 38, 0.03));
}

.cx-chat-modern .cxcsystem-card.is-order-details .cxcsystem-head i {
    color: var(--main);
}

.cx-chat-modern .cxcsystem-card.is-order-details .cxcsystem-type {
    border-color: rgba(255, 194, 38, 0.55);
    color: var(--mainthi);
}

.cx-chat-modern .cx-order-delivery-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cx-chat-modern .cx-order-delivery-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cx-chat-modern .cx-order-delivery-icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 194, 38, 0.18);
    color: var(--main);
    font-size: 12px;
    flex-shrink: 0;
}

.cx-chat-modern .cx-order-delivery-head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cx-chat-modern .cx-order-delivery-head-text strong {
    font-size: 15px;
    font-weight: 700;
    color: #eef3ff;
}

.cx-chat-modern .cx-order-delivery-head-text span {
    font-size: 12px;
    color: rgba(221, 230, 255, 0.85);
}

.cx-chat-modern .cx-order-delivery-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.cx-chat-modern .cx-order-delivery-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.cx-chat-modern .cx-order-meta-item {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cx-chat-modern .cx-order-meta-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: rgba(206, 216, 247, 0.75);
}

.cx-chat-modern .cx-order-meta-value {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}

.cx-chat-modern .cx-order-meta-item.is-product {
    grid-column: span 3;
}

.cx-chat-modern .cx-order-meta-item.is-quantity {
    grid-column: span 1;
}

.cx-chat-modern .cx-order-meta-item.is-amount,
.cx-chat-modern .cx-order-meta-item.is-date {
    grid-column: span 2;
}

.cx-chat-modern .cx-order-delivery-stocks {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cx-chat-modern .cx-order-stock-item {
    border: 1px solid rgba(255, 194, 38, 0.3);
    background: rgba(255, 194, 38, 0.08);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cx-chat-modern .cx-order-stock-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cx-chat-modern .cx-order-stock-label {
    font-size: 11px;
    color: rgba(210, 220, 255, 0.82);
}

.cx-chat-modern .cx-order-stock-code {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    word-break: break-all;
}

.cx-chat-modern .cx-order-copy-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    color: #d7e4ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}

.cx-chat-modern .cx-order-copy-btn:hover,
.cx-chat-modern .cx-order-copy-btn.is-copied {
    background: rgba(255, 194, 38, 0.28);
    border-color: rgba(255, 194, 38, 0.62);
    color: var(--mainthi);
}

.cx-chat-modern .cx-order-delivery-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cx-chat-modern .cx-order-action-btn {
    border-radius: 9px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.cx-chat-modern button.cx-order-action-btn {
    width: 100%;
    padding: 0 10px;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
}

.cx-chat-modern .cx-order-action-btn.is-secondary {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #dfe8ff;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.cx-chat-modern .cx-order-action-btn.is-primary {
    border: 1px solid var(--mainsec);
    background: var(--main);
    color: #1d1b16;
    box-shadow: 0 2px 12px rgba(255, 194, 38, 0.28);
}

/* is-new-order — mor/violet */
.cx-chat-modern .cxcsystem-card.is-new-order {
    border-color: rgba(168, 93, 255, 0.3);
    background: linear-gradient(180deg, rgba(168, 93, 255, 0.08), rgba(168, 93, 255, 0.02));
}

.cx-chat-modern .cxcsystem-card.is-new-order .cxcsystem-head i {
    color: #a85dff;
}

.cx-chat-modern .cxcsystem-card.is-new-order .cxcsystem-type {
    border-color: rgba(168, 93, 255, 0.5);
    color: #d4a8ff;
}

.cx-chat-modern .cxcsystem-card.is-new-order .cx-order-delivery-icon {
    background: rgba(168, 93, 255, 0.18);
    color: #a85dff;
}

.cx-chat-modern .cxcsystem-card.is-new-order .cx-order-action-btn.is-primary {
    border-color: rgba(168, 93, 255, 0.65);
    background: rgba(147, 75, 235, 0.88);
    color: #f0e6ff;
    box-shadow: 0 2px 12px rgba(168, 93, 255, 0.35);
}

/* is-welcome — mint/teal */
.cx-chat-modern .cxcsystem-card.is-welcome {
    border-color: rgba(32, 201, 151, 0.3);
    background: linear-gradient(180deg, rgba(32, 201, 151, 0.08), rgba(32, 201, 151, 0.02));
}

.cx-chat-modern .cxcsystem-card.is-welcome .cxcsystem-head i {
    color: #20c997;
}

.cx-chat-modern .cxcsystem-card.is-welcome .cxcsystem-type {
    border-color: rgba(32, 201, 151, 0.5);
    color: #7de8c8;
}

.cx-chat-modern .cx-welcome-msg {
    font-size: 13.5px;
    line-height: 1.55;
    color: #e2eedf;
    white-space: pre-wrap;
    word-break: break-word;
}

.cx-chat-modern .cxcsystem-card.is-cancel-request {
    border-color: rgba(255, 184, 77, 0.35);
    background: linear-gradient(180deg, rgba(255, 184, 77, 0.06), rgba(255, 184, 77, 0.02));
}

.cx-chat-modern .cxcsystem-card.is-order-cancel-auto .cxcsystem-head i,
.cx-chat-modern .cxcsystem-card.is-order-cancel-manual .cxcsystem-head i {
    color: #ff7777;
}

.cx-chat-modern .cxcsystem-card.is-cancel-request .cxcsystem-head i {
    color: #ffca70;
}

.cx-chat-modern .cxcsystem-card.is-order-cancel-auto .cxcsystem-type,
.cx-chat-modern .cxcsystem-card.is-order-cancel-manual .cxcsystem-type {
    border-color: rgba(255, 95, 95, 0.5);
    color: #ffadad;
}

.cx-chat-modern .cxcsystem-card.is-cancel-request .cxcsystem-type {
    border-color: rgba(255, 184, 77, 0.55);
    color: #ffd69d;
}

.cx-chat-modern .cxcsystem-card.is-offer {
    border-color: rgba(86, 204, 242, 0.42);
    background: linear-gradient(180deg, rgba(86, 204, 242, 0.16), rgba(86, 204, 242, 0.05));
}

.cx-chat-modern .cxcsystem-card.is-offer .cxcsystem-head i {
    color: #7ea7ff;
}

.cx-chat-modern .cxcsystem-card.is-offer .cxcsystem-type {
    border-color: rgba(111, 163, 255, 0.5);
    color: #b4cbff;
}

.cx-chat-modern .cx-order-delivery-card.cx-offer-card {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

.cx-chat-modern .cx-offer-card .cx-order-delivery-icon {
    background: rgba(86, 204, 242, 0.22);
    color: #7adfff;
}

.cx-chat-modern .cx-offer-card .cx-order-delivery-head {
    justify-content: space-between;
}

.cx-chat-modern .cx-offer-card .cx-order-meta-item {
    border-color: rgba(86, 204, 242, 0.32);
    background: rgba(86, 204, 242, 0.09);
}

.cx-chat-modern .cx-offer-card .cx-order-delivery-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cx-chat-modern .cx-order-action-btn.is-danger {
    border: 1px solid var(--cxcolor-47);
    color: var(--cxcolor-47);
    background: var(--cxopcolor-47);
}

.cx-chat-modern .cx-order-action-btn.is-danger:hover {
    border: 1px solid var(--cxcolor-47-hover);
    color: var(--cxcolor-47-hover);
    background: var(--cxopcolor-47-hover);
}

.cx-chat-modern .cx-offer-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    flex-shrink: 0;
}

.cx-chat-modern .cx-offer-status-badge.is-pending {
    color: #d7f6ff;
    border-color: rgba(122, 223, 255, 0.55);
    background: rgba(122, 223, 255, 0.18);
}

.cx-chat-modern .cx-offer-status-badge.is-accepted {
    color: #dcffe8;
    border-color: rgba(96, 220, 153, 0.55);
    background: rgba(96, 220, 153, 0.18);
}

.cx-chat-modern .cx-offer-status-badge.is-rejected {
    color: #ffd7d7;
    border-color: rgba(255, 122, 122, 0.55);
    background: rgba(255, 122, 122, 0.18);
}

.cx-chat-modern .cx-offer-status-badge.is-expired {
    color: #ffd6d6;
    border-color: rgba(255, 120, 120, 0.55);
    background: rgba(255, 120, 120, 0.16);
}

.cx-chat-modern .cx-offer-card .cx-order-action-btn.is-accept {
    border: 1px solid rgba(96, 220, 153, 0.55);
    color: #dbffe8;
    background: rgba(96, 220, 153, 0.16);
}

.cx-chat-modern .cx-offer-card .cx-order-action-btn.is-counter {
    border: 1px solid rgba(122, 223, 255, 0.55);
    color: #d7f6ff;
    background: rgba(122, 223, 255, 0.15);
}

.cx-chat-modern .cx-offer-card .cx-order-action-btn.is-reject {
    border: 1px solid rgba(255, 120, 120, 0.55);
    color: #ffd2d2;
    background: rgba(255, 120, 120, 0.16);
}

.cx-chat-modern .cx-offer-card .cx-order-action-btn.is-disabled {
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(220, 231, 255, 0.72);
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
    cursor: default;
}

.cx-chat-modern .cxcsystem-time {
    display: block;
    text-align: right;
    margin-top: 8px;
    font-size: 11px;
    color: rgba(195, 204, 234, 0.68);
}

.cx-chat-modern .cxcsystem-body .cxcotomsg,
.cx-chat-modern .cxcsystem-body .cxcotoprod,
.cx-chat-modern .cxcsystem-body .cxcotoprodthi,
.cx-chat-modern .cxcsystem-body .cxcotoprodfields {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

.cx-chat-modern .cxcsystem-body .cxcotomsgtitle {
    display: none;
}

.cx-chat-modern .cxcsystem-body .cxcotomsgtitle span {
    display: inline-block;
    margin-left: 4px;
    opacity: 0.9;
}

.cx-chat-modern .cxcmsgread {
    margin-top: 4px;
    padding: 0;
    line-height: 1;
    letter-spacing: -0.35em;
    font-size: 11px;
    color: var(--cxcolor-2);
    justify-content: flex-end;
}

.cx-chat-modern .cxcwrite {
    margin-top: 0;
}

.cx-chat-modern .cx-chat-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1);
    background: var(--cxbgmainsec);
    padding: 8px;
}

.cx-chat-modern .cx-chat-input-wrap input[type="text"] {
    border: 0;
    background: transparent;
    color: var(--text-color);
    box-shadow: none;
    height: 34px;
}

.cx-chat-modern .cx-chat-input-wrap input[type="text"]:focus {
    border: 0 !important;
    box-shadow: none;
}

.cx-chat-modern .cx-chat-send-btn {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 8px;
    padding: 0;
}

@media (max-width: 992px) {
    .cx-chat-modern .cxclbg-1 {
        border-right: 2px solid var(--cxbcolor);
        border-radius: var(--br-1-5);
        height: auto;
        min-height: auto;
    }

    .cx-chat-modern .cxclbg-2 {
        border-radius: var(--br-1-5);
        height: auto;
        min-height: auto;
    }

    .cx-chat-modern .cxchatListM {
        max-height: 320px;
    }

    .cx-chat-modern .cx-chat-sidebar-actions {
        flex-wrap: wrap;
    }

    .cx-chat-modern .cx-chat-side-btn.is-primary {
        flex: 1 1 100%;
    }

    .cx-chat-modern .cx-chat-side-btn.is-icon {
        flex: 1 1 calc(50% - 6px);
        width: auto;
        min-width: 0;
    }

    .cx-chat-modern .cx-chat-empty-panel {
        min-height: 320px;
    }

    .cx-chat-modern .cx-chat-empty-note h6 {
        font-size: 17px;
    }

    .cx-chat-modern .cx-chat-empty-note p {
        font-size: 12px;
    }

    .cx-chat-modern li.cxcleft .cxcmsg,
    .cx-chat-modern li.cxcright .cxcmsg {
        max-width: 78%;
    }

    .cx-chat-modern .cx-order-delivery-meta,
    .cx-chat-modern .cx-order-delivery-actions {
        grid-template-columns: 1fr;
    }
}

.iconInput {
    position: relative;
}

.iconInput .formControl {
    padding-right: 54px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.iconInput-icon {
    position: absolute;
    top: -1px;
    right: 0px;
    bottom: -1px;
    left: auto;
    width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-right: 0;
    transform: none;
    background: var(--cxbgmainfiv);
    border-radius: 0 var(--br-1) var(--br-1) 0;
    color: var(--main);
    pointer-events: none;
    box-shadow: -3px 0 5px rgba(0, 0, 0, 0.15);
}

.formSearch-icon[data-tippy-content],
.iconInput-icon[data-tippy-content] {
    pointer-events: auto;
}

.iconInput-quick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.iconInput-quick-item {
    width: 100%;
    min-height: 34px;
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainfiv);
    color: var(--text-color);
    border-radius: var(--br-1);
    padding: 7px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.iconInput-quick-item:hover {
    background: var(--cxbgmainfiv-sec);
    border-color: var(--cxbcolor-3);
}

.iconInput-quick-item.is-active {
    border-color: var(--main);
    background: var(--cxopcolor-3);
    color: var(--main);
}

@media (max-width: 768px) {
    .iconInput-quick {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .iconInput-quick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Listing create page progress */
.cx-listing-progress {
    position: relative;
    --cx-listing-progress-count: 4;
    --cx-listing-progress-edge: calc(50% / var(--cx-listing-progress-count));
    background: linear-gradient(180deg, var(--cxbgmainfou) 0%, var(--cxbgmainthi) 100%);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    padding: 18px 16px;
    overflow: hidden;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxsaddproduct .cx-listing-progress {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.cxsaddproduct .cxsapcenter {
    margin-top: -2px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.cx-listing-progress-line {
    position: absolute;
    left: var(--cx-listing-progress-edge);
    right: var(--cx-listing-progress-edge);
    top: 37px;
    height: 2px;
    background: color-mix(in srgb, var(--cxbcolor) 70%, #8b90ab 30%);
    border-radius: 999px;
    z-index: 1;
    overflow: hidden;
}

.cx-listing-progress-line::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--listing-progress, 0%);
    background: linear-gradient(90deg, var(--mainfou) 0%, var(--mainsec) 100%);
    border-radius: 999px;
    transition: width .2s ease;
}

.cx-listing-progress-items {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(var(--cx-listing-progress-count), minmax(0, 1fr));
    gap: 10px;
}

.cx-listing-progress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: var(--text-color-h);
    cursor: pointer;
    transition: all .15s ease;
}

.cx-listing-progress-dot {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainsec);
    color: var(--text-color-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    box-shadow: inset 0 0 0 3px var(--cxbgmainfiv), 0 6px 12px rgba(0, 0, 0, 0.22);
}

.cx-listing-progress-dot i {
    transition: transform .15s ease;
}

.cx-listing-progress-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.cx-listing-progress-desc {
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-color-h);
    max-width: 180px;
}

.cx-listing-progress-item.is-active {
    color: var(--text-color);
}

.cx-listing-progress-item.is-active .cx-listing-progress-dot {
    border-color: var(--main);
    background: linear-gradient(135deg, var(--main) 0%, var(--mainsec) 100%);
    color: var(--text-color-6);
    box-shadow: 0 0 0 4px var(--cxopcolor-3), 0 8px 16px rgba(0, 0, 0, 0.28);
}

.cx-listing-progress-item.is-active .cx-listing-progress-dot i {
    transform: scale(1.08);
}

.cx-listing-progress-item.is-complete {
    color: var(--text-color);
}

.cx-listing-progress-item.is-complete .cx-listing-progress-dot {
    border-color: var(--mainsec);
    background: linear-gradient(135deg, var(--mainsec) 0%, var(--mainfou) 100%);
    color: var(--text-color-6);
    box-shadow: 0 0 0 4px var(--cxopcolor-3), 0 8px 16px rgba(0, 0, 0, 0.28);
}

@media (max-width: 768px) {
    .cx-listing-progress {
        padding: 14px 10px;
    }

    .cx-listing-progress-line {
        top: 33px;
    }

    .cx-listing-progress-dot {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .cx-listing-progress-label {
        font-size: 11px;
    }

    .cx-listing-progress-desc {
        font-size: 10px;
        max-width: 140px;
    }
}

/* Listing create category picker */
.cx-category-picker {
    height: 460px;
    min-height: 460px;
    max-height: 460px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cx-category-picker-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cx-category-picker-meta {
    min-width: 140px;
}

.cx-category-picker-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);
}

.cx-category-picker-search {
    flex: 1;
    min-width: 220px;
}

.cx-category-back {
    width: 36px;
    height: 36px;
    border: 1px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
    color: var(--text-color);
    border-radius: var(--br-1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .15s ease;
}

.cx-category-back:hover {
    border-color: var(--main);
    color: var(--main);
}

.cx-category-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.cx-category-track {
    width: 300%;
    height: 100%;
    display: flex;
    transition: transform .24s ease;
    transform: translateX(0);
}

.cx-category-panel {
    width: 33.333333%;
    min-width: 33.333333%;
    padding: 10px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* İlan ekle — kategori kartları (nav cxCatItem tasarımının listing kopyası) */
.cxListingCatGrid {
    display: grid;
    gap: 10px;
    padding: 0;
    align-content: start;
    grid-auto-rows: max-content;
}

.cxListingCatGridScroll {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
}

.cxListingCatGrid--main,
#mainCategoryList.cxListingCatGrid--main {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#subCategoryList.cxListingCatGridScroll,
#childCategoryList.cxListingCatGridScroll {
    display: block;
}

.cxListingCatGrid--sub.sub-category-group,
.cxListingCatGrid--child.child-category-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sub-category-group,
.child-category-group {
    display: grid;
    gap: 10px;
    align-content: start;
    grid-auto-rows: max-content;
}

.sub-category-group[style*="display:none"],
.child-category-group[style*="display:none"] {
    display: none !important;
}

#subCategoryList .cx-category-empty,
#subCategoryList .cxListingCatGridEmpty.cx-category-empty,
#childCategoryList .cx-category-empty,
#childCategoryList .cxListingCatGridEmpty.cx-category-empty,
#subCategoryList .sub-category-group,
#childCategoryList .child-category-group,
#mainCategoryList .cxListingCatGridEmpty {
    grid-column: 1 / -1;
}

.cxListingCatGridEmpty {
    display: none;
    margin: 0;
    text-align: center;
    padding: 32px 16px;
    color: var(--text-color-3);
    font-size: 12px;
    font-weight: 500;
}

.cxListingCatGridEmpty.is-visible,
.cxListingCatGridEmpty.cx-category-empty {
    display: block;
}

.cxListingCatItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    border: 2px solid var(--cxbcolor);
    background: transparent;
    color: var(--text-color);
    text-decoration: none;
    text-align: left;
    width: 100%;
    min-height: 52px;
    min-width: 0;
    cursor: pointer;
    transition: all .15s ease;
    font: inherit;
}

.cxListingCatItem:hover {
    background: var(--listingCatItemHoverBg,
            color-mix(in srgb, var(--listingCatIconBg, var(--main)) 14%, var(--cxbgmainthi)));
    border-color: var(--listingCatItemHoverBorder, var(--listingCatIconBg, var(--cxbcolor-3)));
    color: var(--text-color);
    box-shadow: 0 2px 14px color-mix(in srgb, var(--listingCatIconBg, var(--main)) 22%, transparent);
}

.cxListingCatItem:hover .cxListingCatItemText {
    color: var(--text-color);
}

.cxListingCatItem:hover .cxListingCatItemIconText {
    color: var(--listingCatIconFg, var(--text-color));
}

.cxListingCatItemIcon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--listingCatIconBg, rgba(0, 0, 0, 0.22));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
    transition: background-color .15s ease;
}

.cxListingCatItem:hover .cxListingCatItemIcon {
    background: var(--listingCatIconBg, rgba(0, 0, 0, 0.22));
}

.cxListingCatItemIcon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.cxListingCatItemIconText {
    font-weight: 800;
    font-size: 13px;
    color: var(--listingCatIconFg, var(--text-color));
}

.cxListingCatItemText {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.1;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cxListingCatItem.main-category-item.is-active,
.cxListingCatItem.category-select.is-selected,
.cxListingCatItem.sub-category-item.is-active {
    background: var(--listingCatItemHoverBg,
            color-mix(in srgb, var(--listingCatIconBg, var(--main)) 14%, var(--cxbgmainthi)));
    border-color: var(--listingCatItemHoverBorder, var(--listingCatIconBg, var(--cxbcolor-3)));
    color: var(--text-color);
    box-shadow: 0 2px 14px color-mix(in srgb, var(--listingCatIconBg, var(--main)) 22%, transparent);
}

.cxListingCatItem.main-category-item.is-active .cxListingCatItemText,
.cxListingCatItem.category-select.is-selected .cxListingCatItemText,
.cxListingCatItem.sub-category-item.is-active .cxListingCatItemText {
    color: var(--text-color);
}

.cxListingCatItem.main-category-item.is-active .cxListingCatItemIcon,
.cxListingCatItem.category-select.is-selected .cxListingCatItemIcon,
.cxListingCatItem.sub-category-item.is-active .cxListingCatItemIcon {
    background: var(--listingCatIconBg, rgba(0, 0, 0, 0.22));
}

.cxListingCatItem.main-category-item.is-active .cxListingCatItemIconText,
.cxListingCatItem.category-select.is-selected .cxListingCatItemIconText,
.cxListingCatItem.sub-category-item.is-active .cxListingCatItemIconText {
    color: var(--listingCatIconFg, var(--text-color));
}

.cx-category-empty {
    border: 1px dashed var(--cxbcolor);
    border-radius: var(--br-0);
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text-color-h);
}

@media (max-width: 992px) {
    .cx-category-picker {
        height: 420px;
        min-height: 420px;
        max-height: 420px;
    }

    .cx-category-picker-head {
        flex-wrap: wrap;
    }

    .cx-category-picker-meta {
        min-width: auto;
    }

    .cx-category-picker-search {
        min-width: 100%;
    }

    #mainCategoryList.cxListingCatGrid--main,
    .cxListingCatGrid--sub.sub-category-group,
    .cxListingCatGrid--child.child-category-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {

    #mainCategoryList.cxListingCatGrid--main,
    .cxListingCatGrid--sub.sub-category-group,
    .cxListingCatGrid--child.child-category-group {
        grid-template-columns: 1fr;
    }
}

.cxsaprodminoffer .iconInput.is-disabled {
    opacity: 0.65;
}

.cxsaprodminoffer .iconInput.is-disabled .formControl {
    cursor: not-allowed;
}

.cxCharCounter {
    font-size: 12px;
    color: var(--text-color-h);
    font-weight: 500;
    line-height: 1;
}

.cxMissingFieldsWrap {
    padding: 0 8px;
}

.cxMissingFieldsLead {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
}

.cxMissingFieldsList {
    display: grid;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--cxbcolor-3) transparent;
}

.cxMissingFieldsList::-webkit-scrollbar {
    width: 4px;
}

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

.cxMissingFieldsList::-webkit-scrollbar-thumb {
    background: var(--cxbcolor-3);
    border-radius: var(--br-1);
}

.cxMissingFieldItem {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1);
    background: var(--cxbgmainsec);
    padding: 10px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxMissingFieldIcon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(239, 68, 68, 0.16);
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.cxMissingFieldText {
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
}

.cxDropzoneHelp {
    display: block;
    margin-top: 8px;
    color: var(--text-color-h);
    font-size: 12px;
}

.cxsaprodstock {
    display: flex;
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1);
    width: 100%;
    position: relative;
    height: 220px;
    overflow: hidden;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.line-numbers {
    width: clamp(20px, calc(var(--line-digits, 1) * 1ch + 10px), 34px);
    min-width: 20px;
    max-width: 34px;
    padding: 10px 6px 10px 0;
    background: var(--cxbgmainfiv);
    font-family: monospace;
    font-size: var(--fs-1);
    color: var(--text-color);
    white-space: pre;
    user-select: none;
    text-align: right;
    overflow: hidden;
    display: block;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

.cxsaprodstock textarea {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 10px;
    font-family: monospace;
    font-size: var(--fs-1);
    resize: none;
    line-height: 20px;
    white-space: pre;
    overflow-x: auto;
    overflow-y: auto;
    height: 100%;
}

.cxsaprodstock textarea:focus {
    border-radius: 0 !important;
    border: none !important;
}

.cxsaprodstock textarea,
.cxsaprodstock .line-numbers {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cxsaprodstock textarea::-webkit-scrollbar {
    display: none;
}

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

.cxStockActionRight {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cxStockActionBtn {
    border-width: 2px;
}

/* Color modifiers for easy future theming */
.cxStockActionBtn--new {
    background: var(--cxopcolor-24);
    color: var(--cxcolor-24);
    border-color: transparent;
}

.cxStockActionBtn--bulk {
    background: var(--cxopcolor-19);
    color: var(--cxcolor-19);
    border-color: transparent;
}

.cxStockActionBtn--generate {
    background: var(--cxopcolor-23);
    color: var(--cxcolor-23);
    border-color: transparent;
}

.cxStockActionBtn:disabled,
.cxStockActionBtn.is-disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

.cxStockCardList {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 350px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--cxbcolor-3) transparent;
}

.cxStockCardList::-webkit-scrollbar {
    width: 4px;
}

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

.cxStockCardList::-webkit-scrollbar-thumb {
    background: var(--cxbcolor-3);
    border-radius: var(--br-1);
}

.cxStockCardItem {
    width: 100%;
}

.cxStockCardActions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cxStockCardInput {
    border: 0 !important;
    background: transparent !important;
    min-height: 24px;
    height: 24px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 1.2;
}

.cxStockCardInput:focus {
    box-shadow: none !important;
}

.cxCategorySummaryRow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.cxCategorySummaryCard {
    flex: 0 0 560px;
    width: 560px;
    max-width: 100%;
    margin-left: 0;
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainsec);
    border-radius: var(--br-1);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxCategorySummaryEdit {
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainfou);
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s ease-in-out;
}

.cxCategorySummaryEdit:hover {
    border-color: var(--mainfou);
    background: var(--cxbgmainthi);
}

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

.cxCategorySummaryTitle {
    font-size: var(--fs-1);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-color);
}

.cxCategorySummaryDesc {
    font-size: var(--fs-0);
    color: var(--text-color-h);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cxsapcnextprevious .cxStepActionBtn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: var(--br-0);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--fs-1);
    font-weight: 600;
    transition: all .15s ease-in-out;
}

.cxsapcnextprevious .cxStepActionBtn--primary {
    background: var(--mainfou);
    color: var(--text-color-6);
    border-color: var(--mainfou);
}

.cxsapcnextprevious .cxStepActionBtn--primary:hover {
    opacity: .92;
}

.cxsapcnextprevious .cxStepActionBtn--secondary {
    background: var(--cxbgmainsec);
    color: var(--text-color);
    border-color: var(--cxbcolor);
}

.cxsapcnextprevious .cxStepActionBtn--secondary:hover {
    background: var(--cxbgmainthi);
}

.nullError {
    border-color: var(--cxcolor-1) !important;
}

.disabledBtn {
    opacity: .55;
}

.myListingsNavBtn {
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    color: var(--text-color);
    padding: 8px 16px;
    border-radius: var(--br-1);
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.myListingsNavBtn:hover {
    background: var(--cxbgmainfiv-thi);
    color: var(--text-color);
    transform: translateY(-2px);
}

.myListingsNavBtn.myListingsBtnAdd {
    background: var(--cxopcolor-23);
    color: var(--cxcolor-23);
    border-color: var(--cxopcolor-23);
}

.myListingsNavBtn.myListingsBtnAdd:hover {
    background-color: var(--cxopcolor-23-hover);
    border-color: var(--cxopcolor-23-hover);
    color: var(--cxcolor-23-hover);
}

.myListingsNavBtn.myListingsBtnActive {
    background: var(--cxopcolor-41);
    color: var(--cxcolor-41);
    border-color: var(--cxopcolor-41);
}

.myListingsNavBtn.myListingsBtnActive:hover {
    background-color: var(--cxopcolor-41-hover);
    border-color: var(--cxopcolor-41-hover);
    color: var(--cxcolor-41-hover);
}

.myListingsNavBtn.myListingsBtnPassive {
    background: var(--cxopcolor-19);
    color: var(--cxcolor-19);
    border-color: var(--cxopcolor-19);
}

.myListingsNavBtn.myListingsBtnPassive:hover {
    background-color: var(--cxopcolor-19-hover);
    border-color: var(--cxopcolor-19-hover);
    color: var(--cxcolor-19-hover);
}

.myListingsNavBtn.myListingsBtnHidden {
    background: var(--cxopcolor-24);
    color: var(--cxcolor-24);
    border-color: var(--cxopcolor-24);
}

.myListingsNavBtn.myListingsBtnHidden:hover {
    background-color: var(--cxopcolor-24-hover);
    border-color: var(--cxopcolor-24-hover);
    color: var(--cxcolor-24-hover);
}

.myListingCardActionBtn {
    width: 35px;
    height: 35px;
    background-color: var(--cxbgmainfou);
    color: var(--text-color);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0;
    line-height: 1;
    outline: none;
    transition: all 0.15s;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.myListingCardActionBtn:hover {
    transform: translateY(-2px);
}

.myListingCardActionBtnBoost {
    background-color: var(--cxopcolor-39);
    border-color: var(--cxopcolor-39);
    color: var(--cxcolor-39);
}

.myListingCardActionBtnBoost:hover {
    background-color: var(--cxopcolor-39-hover);
    border-color: var(--cxopcolor-39-hover);
    color: var(--cxcolor-39-hover);
}

.myListingCardActionBtnEdit {
    --my-listing-action-type: edit;
    background-color: var(--cxopcolor-37);
    border-color: var(--cxopcolor-37);
    color: var(--cxcolor-37);
}

.myListingCardActionBtnEdit:hover {
    background-color: var(--cxopcolor-37-hover);
    border-color: var(--cxopcolor-37-hover);
    color: var(--cxcolor-37-hover);
}

.myListingCardActionBtnUnpublish {
    --my-listing-action-type: unpublish;
    background-color: var(--cxopcolor-27);
    border-color: var(--cxopcolor-27);
    color: var(--cxcolor-27);
}

.myListingCardActionBtnUnpublish:hover {
    background-color: var(--cxopcolor-27-hover);
    border-color: var(--cxopcolor-27-hover);
    color: var(--cxcolor-27-hover);
}

.myListingCardActionBtnPublish {
    --my-listing-action-type: publish;
    background-color: var(--cxopcolor-41);
    border-color: var(--cxopcolor-41);
    color: var(--cxcolor-41);
}

.myListingCardActionBtnPublish:hover {
    background-color: var(--cxopcolor-41-hover);
    border-color: var(--cxopcolor-41-hover);
    color: var(--cxcolor-41-hover);
}

.myListingCardActionBtnPending {
    --my-listing-action-type: pending;
    background-color: var(--cxopcolor-45);
    border-color: var(--cxopcolor-45);
    color: var(--cxcolor-45);
}

.myListingCardActionBtnPending:hover {
    background-color: var(--cxopcolor-45-hover);
    border-color: var(--cxopcolor-45-hover);
    color: var(--cxcolor-45-hover);
}

.myListingCardActionBtnCopy {
    background-color: var(--cxopcolor-33);
    border-color: var(--cxopcolor-33);
    color: var(--cxcolor-33);
}

.myListingCardActionBtnCopy:hover {
    background-color: var(--cxopcolor-33-hover);
    border-color: var(--cxopcolor-33-hover);
    color: var(--cxcolor-33-hover);
}

.myListingCardActionBtnPrivate {
    background-color: var(--cxopcolor-44);
    border-color: var(--cxopcolor-44);
    color: var(--cxcolor-44);
}

.myListingCardActionBtnPrivate:hover {
    background-color: var(--cxopcolor-44-hover);
    border-color: var(--cxopcolor-44-hover);
    color: var(--cxcolor-44-hover);
}

.myListingCardActionBtnPublic {
    background-color: var(--cxopcolor-40);
    border-color: var(--cxopcolor-40);
    color: var(--cxcolor-40);
}

.myListingCardActionBtnPublic:hover {
    background-color: var(--cxopcolor-40-hover);
    border-color: var(--cxopcolor-40-hover);
    color: var(--cxcolor-40-hover);
}

.listingCardCell:has(.myListingCardActionsDrop.is-open),
.listingCardCell.is-menu-open {
    position: relative;
    z-index: 120;
}

.listingCard--myListing {
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.listingCard--myListing.is-menu-open {
    z-index: 2;
}

.listingCard--myListing .listingCardMedia {
    border-radius: var(--br-2) var(--br-2) 0 0;
    overflow: hidden;
}

.listingCard--myListing .listingCardBody {
    border-radius: 0 0 var(--br-2) var(--br-2);
    overflow: hidden;
}

.myListingCardActionsDrop {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 40;
    pointer-events: auto;
}

.myListingCardMenuBtn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.94);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    font-size: 11px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.myListingCardMenuBtn:hover,
.myListingCardActionsDrop.is-open .myListingCardMenuBtn {
    background: rgba(0, 0, 0, 0.62);
    border-color: rgba(255, 255, 255, 0.28);
}

.myListingCardMenuBtnPending {
    color: var(--cxcolor-45);
}

.myListingCardActionsMenu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 158px;
    max-width: 170px;
    padding: 4px;
    border: 1px solid var(--cxbcolor);
    border-radius: 8px;
    background: var(--cxbgmainsec);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    z-index: 50;
    pointer-events: auto;
}

.myListingCardActionsDrop.is-open .myListingCardActionsMenu {
    display: flex;
}

.myListingCardActionItem {
    width: 100%;
    min-height: 28px;
    padding: 5px 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-color);
    background: transparent;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.myListingCardActionItem i {
    width: 12px;
    flex-shrink: 0;
    text-align: center;
    font-size: 11px;
    line-height: 1;
}

.myListingCardActionItem span {
    flex: 1;
    min-width: 0;
}

.myListingCardActionItem:hover,
.myListingCardActionItem:focus {
    background: var(--cxbgmainfou);
    color: var(--text-color);
}

.myListingCardActionItem.myListingCardActionBtnPending,
.myListingCardActionItem.myListingCardActionItemInfo {
    pointer-events: none;
    opacity: 0.85;
}

.profile-contact-action-link {
    font-size: 10px;
    background-color: var(--main);
    color: var(--text-color-6);
    border-radius: 6px;
    padding: 2px 8px;
    font-weight: 700;
    transition: all 0.15s;
}

.profile-contact-action-link:hover {
    background-color: var(--mainfou);
    color: var(--text-color-6);
}

.profile-contact-action-link.verify {
    background-color: var(--cxopcolor-48);
    color: var(--cxcolor-48);
}

.store-application-main {
    max-width: 100%;
    width: 100%;
    padding: 0;
}

.store-application-page {
    width: 100%;
    min-height: calc(100vh - 160px);
    background: transparent;
    padding: 42px 20px 56px;
}

.store-application-container {
    max-width: 1380px;
    margin: 0 auto;
}

.store-application-title {
    margin: 0 0 26px;
    text-align: center;
    color: var(--text-color2);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.store-criteria-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.store-criteria-card {
    position: relative;
    background: var(--cxbgmainthi);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-2);
    padding: 62px 18px 18px;
    min-height: 236px;
    text-align: center;
    box-shadow: 0 10px 28px rgba(3, 7, 16, 0.28);
}

.store-criteria-badge {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.25px;
    white-space: nowrap;
}

.store-criteria-card.is-pass .store-criteria-badge {
    color: var(--cxcolor-41);
    background: var(--cxopcolor-41);
    border: 2px solid var(--cxcolor-8);
}

.store-criteria-card.is-fail .store-criteria-badge {
    color: var(--cxcolor-50);
    background: var(--cxopcolor-50);
    border: 2px solid var(--cxcolor-50);
}

.store-criteria-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: var(--br-1-5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cxbgmainfiv-thi);
    box-shadow: 0 0 0 4px var(--cxbgmainfiv);
    color: var(--cxcolor-1);
    font-size: 24px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.store-criteria-card.is-pass .store-criteria-icon {
    color: var(--cxcolor-6);
}

.store-criteria-card.is-fail .store-criteria-icon {
    color: var(--cxcolor-1);
}

.store-criteria-icon.is-pass {
    color: var(--cxcolor-6);
}

.store-criteria-icon.is-fail {
    color: var(--cxcolor-1);
}

.store-criteria-text {
    margin: 0;
    color: var(text-color);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
}

.store-criteria-progress {
    margin: 10px 0 0;
    color: var(--text-color-h);
    font-size: 12px;
    font-weight: 600;
}

.store-criteria-note {
    margin: 7px 0 0;
    color: var(--cxcolor-50);
    font-size: 10px;
    line-height: 1.3;
    font-weight: 600;
}

.store-application-contract {
    background: var(--cxbgmainthi);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    padding: 18px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.store-application-contract-title {
    margin: 0 0 14px;
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.store-application-status-card {
    max-width: 760px;
    margin: 18px auto 0;
    padding: 28px 22px;
    text-align: center;
    border-radius: var(--br-1-5);
    background: var(--cxbgmainsec);
    border: 1px solid var(--cxbcolor);
}

.store-application-status-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.store-application-status-icon.is-pending {
    color: var(--cxcolor-3);
    background: var(--cxopcolor-3);
}

.store-application-status-icon.is-approved {
    color: var(--cxcolor-41);
    background: var(--cxopcolor-41);
}

.store-application-status-title {
    margin: 0 0 8px;
    color: var(--text-color);
    font-size: 18px;
    font-weight: 700;
}

.store-application-status-text {
    margin: 0;
    color: var(--text-color-5);
    font-size: 14px;
    line-height: 1.6;
}

.store-application-contract-body {
    max-height: 310px;
    overflow-y: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 14px 16px;
    color: var(--text-color-5);
    font-size: 14px;
    line-height: 1.55;
}

.store-application-contract-body p {
    margin: 0 0 8px;
}

.store-application-contract-body p:last-child {
    margin-bottom: 0;
}

.store-application-actions {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.store-application-checkbox {
    margin-top: 0;
    color: var(--text-color);
    font-size: 14px;
    flex: 1;
}

.store-application-checkbox .cxcustcb {
    margin-bottom: 0;
}

.store-application-checkbox .cxcustcb .cbx {
    margin: 0;
    display: flex;
    align-items: flex-start;
}

.store-application-checkbox .cxcustcb .cbx span:first-child {
    margin-top: 2px;
}

.store-application-checkbox .cxcustcb .cbx span:last-child {
    flex: 1;
    line-height: 1.45;
}

.store-application-checkbox .cxcustcb .inp-cbx:disabled+.cbx {
    cursor: not-allowed;
    opacity: 0.8;
}

.store-application-submit {
    width: auto;
    margin-top: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    min-height: 38px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: not-allowed;
    opacity: 1;
    flex-shrink: 0;
}

.store-application-submit:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-color);
    cursor: not-allowed;
    opacity: 1;
}

.store-application-submit:not(:disabled) {
    background: var(--main);
    color: var(--text-color-6);
    cursor: pointer;
}

.store-application-submit:not(:disabled):hover {
    background: var(--mainfou);
}

@media (max-width: 1200px) {
    .store-criteria-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .store-criteria-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .store-application-title {
        font-size: 16px;
    }

    .store-application-status-title {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .store-application-page {
        padding: 32px 14px 42px;
    }

    .store-criteria-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .store-application-title {
        font-size: 14px;
    }

    .store-application-contract-title {
        font-size: 12px;
    }

    .store-application-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .store-application-submit {
        width: 100%;
    }
}

/* === Yeni genel listing card tasarımı (listing-card.blade.php) === */
.listingCardsGrid {
    display: grid;
    /* Telefon: en az 2 kart yan yana */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
}

/* Çok dar ekran (ör. küçük telefon): tek sütun */
@media (max-width: 360px) {
    .listingCardsGrid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 480px) {
    .listingCardsGrid {
        gap: 1rem;
    }
}

/* Tablet ve üstü: önceki akıcı grid (kart genişliği sabit min, fazla sütun geniş ekranda) */
@media (min-width: 576px) {
    .listingCardsGrid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* Masaüstü: önceki görünüm — daha kompakt kartlar, çok geniş ekranda 4’ten fazla sütun olabilir */
@media (min-width: 992px) {
    .listingCardsGrid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}


.listingCardCell {
    min-width: 0;
}

.listingCard {
    border-radius: var(--br-2);
    overflow: hidden;
    background: var(--cxbgmain);
    border: 2px solid var(--cxbcolor-2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
    transform: translateZ(0);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
}

.listingCard:hover {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.60);
    border-color: var(--cxbcolor-3);
}

.listingCard.listingCard--myListing {
    overflow: visible;
}

/* Eski kartlar: kare değil ~%88 yükseklik — Bootstrap görünümüne yakın kalır */
.listingCardMedia {
    position: relative;
    padding-top: 100%;
    background: var(--cxbgmain);
    isolation: isolate;
    border-radius: var(--br-2) var(--br-2) 0 0;
    overflow: hidden;
}

.listingCardMediaLink {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 1;
}

.listingCardImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.05);
}

.listingCardMediaDock {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.listingCardMediaDock>* {
    pointer-events: auto;
}

.listingCardBadge {
    position: absolute;
    z-index: 3;
    left: 10px;
    top: 10px;
    padding: 6px 9px;
    border-radius: 11px;
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
}

.listingCardDiscount {
    position: absolute;
    z-index: 3;
    right: 10px;
    top: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.94);
    background: rgba(0, 0, 0, 0.40);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
}

/* kategori rozeti (username kutusunun hemen üstü) */
.listingCardCategoryWrap {
    position: absolute;
    z-index: 5;
    right: 18px;
    bottom: 16px;
}

.listingCardCategory {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
    text-decoration: none;
}

.listingCardCategoryImg {
    width: 24px;
    height: 24px;
    object-fit: contain;
    padding: 3px;
}

.listingCardStoreRow {
    position: absolute;
    z-index: 4;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 8px;
    border-radius: var(--br-1-3);
    background: rgba(15, 17, 22, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}

.listingCardStoreLeft {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
}

.listingCardStoreLeft:hover {
    color: rgba(255, 255, 255, 0.92);
}

.listingCardStoreLogo {
    position: relative;
}

.listingCardStoreLogo img {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

.listingCardStoreName {
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* listingCardStoreRight kaldırıldı (instagram yok) */

.listingCardBody {
    position: relative;
    /* Alt şerit (teslimat + rating) için boşluk */
    padding: 10px 10px 50px 10px;
    background: var(--cxbgmainthi);
    display: grid;
    grid-template-rows: auto auto;
    gap: 8px;
    min-width: 0;
    min-height: 0;
}

.listingCard--product .listingCardBody {
    padding-bottom: 10px;
}

.listingCardPriceRow {
    min-width: 0;
}

.listingCardPriceLeft {
    min-width: 0;
}

.listingCardPriceLine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.listingCardPriceOld {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-color-h);
    text-decoration: line-through;
    white-space: nowrap;
}

.listingCardDiscountChip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--cxopcolor-5);
    border: 1px solid var(--cxopcolor-5);
    color: var(--cxcolor-5);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.4;
}

.listingCardDiscountChip i {
    font-size: 9px;
}

/* Sol: teslimat, sağ: rating — alt köşede sabit şerit */
.listingCardBodyMeta {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    z-index: 2;
    pointer-events: none;
}

.listingCardBodyMeta>* {
    pointer-events: auto;
}

.listingCardDelivery {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 58%;
    padding: 4px 8px;
    border-radius: var(--br-1);
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainfou);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.2;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listingCardDelivery i {
    flex-shrink: 0;
    background-color: var(--mainsix);
    color: var(--text-color-6);
    font-size: 9px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.listingCardDelivery--manual i {
    background-color: rgba(120, 200, 140, 0.35);
    color: rgba(220, 255, 230, 0.95);
}

.listingCardSellerRating {
    flex: 0 0 auto;
    margin: 0;
}

.listingCardSellerRating .sellerInlineRatingChip {
    padding: 4px 8px;
    gap: 5px;
    max-width: 100%;
}

.listingCardSellerRating i {
    width: 16px;
    height: 16px;
    font-size: 9px;
}

.listingCardSellerRating strong {
    font-size: 12px;
}

.listingCardSellerRating small {
    font-size: 11px;
}

/* Puan rozetleri (kart, profil, ilan detayı): 5 üzerinden tier renkleri — JS gerekmez */
.sellerInlineRating.sellerInlineRating--none .sellerInlineRatingChip {
    border-color: rgba(130, 140, 165, 0.5);
    background: linear-gradient(145deg, rgba(42, 48, 60, 0.95), rgba(24, 28, 36, 0.98));
}

.sellerInlineRating.sellerInlineRating--none .sellerInlineRatingChip i {
    background-color: rgba(110, 120, 145, 0.4);
    color: rgba(215, 220, 235, 0.9);
}

.sellerInlineRating.sellerInlineRating--none .sellerInlineRatingChip strong,
.sellerInlineRating.sellerInlineRating--none .sellerInlineRatingChip small {
    color: rgba(195, 200, 215, 0.92);
}

.sellerInlineRating.sellerInlineRating--poor .sellerInlineRatingChip {
    border-color: rgba(255, 120, 110, 0.55);
    background: linear-gradient(145deg, rgba(90, 28, 32, 0.92), rgba(42, 18, 22, 0.96));
}

.sellerInlineRating.sellerInlineRating--poor .sellerInlineRatingChip i {
    background-color: rgba(255, 90, 85, 0.45);
    color: rgba(255, 220, 218, 0.95);
}

.sellerInlineRating.sellerInlineRating--poor .sellerInlineRatingChip strong {
    color: rgba(255, 200, 195, 0.98);
}

.sellerInlineRating.sellerInlineRating--poor .sellerInlineRatingChip small {
    color: rgba(255, 180, 175, 0.85);
}

.sellerInlineRating.sellerInlineRating--fair .sellerInlineRatingChip {
    border-color: rgba(255, 185, 90, 0.55);
    background: linear-gradient(145deg, rgba(95, 58, 18, 0.92), rgba(48, 32, 14, 0.96));
}

.sellerInlineRating.sellerInlineRating--fair .sellerInlineRatingChip i {
    background-color: rgba(255, 170, 70, 0.42);
    color: rgba(40, 28, 10, 0.95);
}

.sellerInlineRating.sellerInlineRating--fair .sellerInlineRatingChip strong {
    color: rgba(255, 225, 170, 0.98);
}

.sellerInlineRating.sellerInlineRating--fair .sellerInlineRatingChip small {
    color: rgba(255, 210, 160, 0.82);
}

.sellerInlineRating.sellerInlineRating--good .sellerInlineRatingChip {
    border-color: rgba(190, 230, 120, 0.45);
    background: linear-gradient(145deg, rgba(38, 72, 36, 0.92), rgba(20, 40, 22, 0.96));
}

.sellerInlineRating.sellerInlineRating--good .sellerInlineRatingChip i {
    background-color: rgba(160, 220, 100, 0.4);
    color: rgba(22, 48, 18, 0.95);
}

.sellerInlineRating.sellerInlineRating--good .sellerInlineRatingChip strong {
    color: rgba(220, 255, 200, 0.98);
}

.sellerInlineRating.sellerInlineRating--good .sellerInlineRatingChip small {
    color: rgba(200, 235, 175, 0.85);
}

.sellerInlineRating.sellerInlineRating--great .sellerInlineRatingChip {
    border-color: rgba(100, 220, 150, 0.55);
    background: linear-gradient(145deg, rgba(22, 78, 52, 0.94), rgba(12, 42, 30, 0.98));
}

.sellerInlineRating.sellerInlineRating--great .sellerInlineRatingChip i {
    background-color: rgba(70, 210, 140, 0.45);
    color: rgba(10, 42, 26, 0.96);
}

.sellerInlineRating.sellerInlineRating--great .sellerInlineRatingChip strong {
    color: rgba(210, 255, 230, 0.99);
}

.sellerInlineRating.sellerInlineRating--great .sellerInlineRatingChip small {
    color: rgba(185, 240, 210, 0.88);
}

.listingCardTitle {
    color: var(--text-color);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.25;
    text-decoration: none;
    min-width: 0;
    overflow: hidden;
    word-break: break-word;
    /* Eski kart: ~2 satır sabit yükseklik + fazlası kesilmez */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-height: calc(1.25em * 2);
    max-height: calc(1.25em * 2);
}

.listingCardPrice {
    font-size: 13px;
    font-weight: 900;
    color: var(--cxcolor-5);
    letter-spacing: .01em;
}

/* === Boost card === */

/* base — border kalınlığı artır, ciyak için */
.listingCard--boost {
    border-width: 2px;
}

/* Kart: skin renkli border + ambient glow — sıkı, yan karta taşmaz */
.listingCard--boost-dealday {
    border-color: rgba(239, 68, 68, 1);
    box-shadow: 0 0 12px rgba(239, 68, 68, .50), 0 5px 20px rgba(0, 0, 0, .50);
}

.listingCard--boost-dealweek {
    border-color: rgba(249, 115, 22, 1);
    box-shadow: 0 0 12px rgba(249, 115, 22, .50), 0 5px 20px rgba(0, 0, 0, .50);
}

.listingCard--boost-dealmonth {
    border-color: rgba(251, 191, 36, 1);
    box-shadow: 0 0 12px rgba(251, 191, 36, .50), 0 5px 20px rgba(0, 0, 0, .50);
}

.listingCard--boost-nightdeal {
    border-color: rgba(56, 189, 248, 1);
    box-shadow: 0 0 12px rgba(56, 189, 248, .50), 0 5px 20px rgba(0, 0, 0, .50);
}

.listingCard--boost-showcase {
    border-color: rgba(99, 179, 237, 1);
    box-shadow: 0 0 12px rgba(99, 179, 237, .50), 0 5px 20px rgba(0, 0, 0, .50);
}

.listingCard--boost-mktbest {
    border-color: rgba(236, 72, 153, 1);
    box-shadow: 0 0 12px rgba(236, 72, 153, .50), 0 5px 20px rgba(0, 0, 0, .50);
}

.listingCard--boost-popular {
    border-color: rgba(251, 113, 133, 1);
    box-shadow: 0 0 12px rgba(251, 113, 133, .50), 0 5px 20px rgba(0, 0, 0, .50);
}

.listingCard--boost-homepage {
    border-color: rgba(192, 132, 252, 1);
    box-shadow: 0 0 12px rgba(192, 132, 252, .50), 0 5px 20px rgba(0, 0, 0, .50);
}

.listingCard--boost-homebest {
    border-color: rgba(168, 85, 247, 1);
    box-shadow: 0 0 12px rgba(168, 85, 247, .50), 0 5px 20px rgba(0, 0, 0, .50);
}

.listingCard--boost-categorytop {
    border-color: rgba(34, 211, 238, 1);
    box-shadow: 0 0 12px rgba(34, 211, 238, .50), 0 5px 20px rgba(0, 0, 0, .50);
}

.listingCard--boost-catbest {
    border-color: rgba(20, 184, 166, 1);
    box-shadow: 0 0 12px rgba(20, 184, 166, .50), 0 5px 20px rgba(0, 0, 0, .50);
}

.listingCard--boost-chat {
    border-color: rgba(52, 211, 153, 1);
    box-shadow: 0 0 12px rgba(52, 211, 153, .50), 0 5px 20px rgba(0, 0, 0, .50);
}

.listingCard--boost-default {
    border-color: rgba(250, 204, 21, 1);
    box-shadow: 0 0 12px rgba(250, 204, 21, .50), 0 5px 20px rgba(0, 0, 0, .50);
}

/* hover — normal'den belirgin biçimde parlak ama yine taşmaz */
.listingCard--boost-dealday:hover {
    border-color: rgba(239, 68, 68, 1);
    box-shadow: 0 0 18px rgba(239, 68, 68, .80), 0 5px 22px rgba(0, 0, 0, .55);
}

.listingCard--boost-dealweek:hover {
    border-color: rgba(249, 115, 22, 1);
    box-shadow: 0 0 18px rgba(249, 115, 22, .80), 0 5px 22px rgba(0, 0, 0, .55);
}

.listingCard--boost-dealmonth:hover {
    border-color: rgba(251, 191, 36, 1);
    box-shadow: 0 0 18px rgba(251, 191, 36, .80), 0 5px 22px rgba(0, 0, 0, .55);
}

.listingCard--boost-nightdeal:hover {
    border-color: rgba(56, 189, 248, 1);
    box-shadow: 0 0 18px rgba(56, 189, 248, .80), 0 5px 22px rgba(0, 0, 0, .55);
}

.listingCard--boost-showcase:hover {
    border-color: rgba(99, 179, 237, 1);
    box-shadow: 0 0 18px rgba(99, 179, 237, .80), 0 5px 22px rgba(0, 0, 0, .55);
}

.listingCard--boost-mktbest:hover {
    border-color: rgba(236, 72, 153, 1);
    box-shadow: 0 0 18px rgba(236, 72, 153, .80), 0 5px 22px rgba(0, 0, 0, .55);
}

.listingCard--boost-popular:hover {
    border-color: rgba(251, 113, 133, 1);
    box-shadow: 0 0 18px rgba(251, 113, 133, .80), 0 5px 22px rgba(0, 0, 0, .55);
}

.listingCard--boost-homepage:hover {
    border-color: rgba(192, 132, 252, 1);
    box-shadow: 0 0 18px rgba(192, 132, 252, .80), 0 5px 22px rgba(0, 0, 0, .55);
}

.listingCard--boost-homebest:hover {
    border-color: rgba(168, 85, 247, 1);
    box-shadow: 0 0 18px rgba(168, 85, 247, .80), 0 5px 22px rgba(0, 0, 0, .55);
}

.listingCard--boost-categorytop:hover {
    border-color: rgba(34, 211, 238, 1);
    box-shadow: 0 0 18px rgba(34, 211, 238, .80), 0 5px 22px rgba(0, 0, 0, .55);
}

.listingCard--boost-catbest:hover {
    border-color: rgba(20, 184, 166, 1);
    box-shadow: 0 0 18px rgba(20, 184, 166, .80), 0 5px 22px rgba(0, 0, 0, .55);
}

.listingCard--boost-chat:hover {
    border-color: rgba(52, 211, 153, 1);
    box-shadow: 0 0 18px rgba(52, 211, 153, .80), 0 5px 22px rgba(0, 0, 0, .55);
}

.listingCard--boost-default:hover {
    border-color: rgba(250, 204, 21, 1);
    box-shadow: 0 0 18px rgba(250, 204, 21, .80), 0 5px 22px rgba(0, 0, 0, .55);
}

/* ── Boost header: resmin solunda absolute dikey şerit — boyutu etkilemez ── */
.listingCardBoostHeader {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 3;
    width: 80px;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 0 0 10px;
    pointer-events: none;
}

/* gradient nefes alır — yazı etkilenmez */
.listingCardBoostHeader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    transform-origin: left center;
    animation: boostHeaderBreath 3.5s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes boostHeaderBreath {

    0%,
    100% {
        transform: scaleX(1);
        opacity: .55;
    }

    50% {
        transform: scaleX(1.08);
        opacity: .80;
    }
}

/* yazı wrapper */
/* marquee track — iki kopya içerir, translateY(-50%) ile sonsuz döngü */
.listingCardBoostHeaderTrack {
    position: relative;
    z-index: 1;
    animation: boostHeaderMarquee 9s linear infinite;
}

@keyframes boostHeaderMarquee {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

/* yazı wrapper — display:block ile dikey yığılır, iki kopya üst üste */
.listingCardBoostHeaderInner {
    display: block;
    writing-mode: vertical-lr;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, .50), 0 1px 4px rgba(0, 0, 0, .60);
    white-space: nowrap;
    padding-bottom: 16px;
}

/* her harf bağımsız zıplar */
.listingCardBoostChar {
    display: inline-block;
    animation: boostCharBounce linear infinite;
}

.listingCardBoostChar--space {
    display: inline-block;
}

@keyframes boostCharBounce {
    0% {
        transform: translateX(0);
    }

    5% {
        transform: translateX(7px);
    }

    10% {
        transform: translateX(-2px);
    }

    14% {
        transform: translateX(0);
    }

    14.01%,
    100% {
        transform: translateX(0);
    }
}

@keyframes boostCharBounce {

    /* ilk %14: hızlı zıpla ve geri gel — kalan %86: bekle */
    0% {
        transform: translateX(0);
    }

    5% {
        transform: translateX(7px);
    }

    10% {
        transform: translateX(-2px);
    }

    14% {
        transform: translateX(0);
    }

    14.01%,
    100% {
        transform: translateX(0);
    }
}

/* Skin gradientler: soldan sağa solar */
.listingCardBoostHeader--dealday::before {
    background: linear-gradient(to right, rgba(220, 38, 38, .78) 0%, rgba(220, 38, 38, .25) 55%, rgba(220, 38, 38, .0) 100%);
}

.listingCardBoostHeader--dealweek::before {
    background: linear-gradient(to right, rgba(220, 90, 10, .78) 0%, rgba(220, 90, 10, .25) 55%, rgba(220, 90, 10, .0) 100%);
}

.listingCardBoostHeader--dealmonth::before {
    background: linear-gradient(to right, rgba(202, 150, 0, .78) 0%, rgba(202, 150, 0, .25) 55%, rgba(202, 150, 0, .0) 100%);
}

.listingCardBoostHeader--nightdeal::before {
    background: linear-gradient(to right, rgba(7, 120, 180, .78) 0%, rgba(7, 120, 180, .25) 55%, rgba(7, 120, 180, .0) 100%);
}

.listingCardBoostHeader--showcase::before {
    background: linear-gradient(to right, rgba(37, 130, 200, .78) 0%, rgba(37, 130, 200, .25) 55%, rgba(37, 130, 200, .0) 100%);
}

.listingCardBoostHeader--mktbest::before {
    background: linear-gradient(to right, rgba(190, 24, 93, .78) 0%, rgba(190, 24, 93, .25) 55%, rgba(190, 24, 93, .0) 100%);
}

.listingCardBoostHeader--popular::before {
    background: linear-gradient(to right, rgba(220, 60, 80, .78) 0%, rgba(220, 60, 80, .25) 55%, rgba(220, 60, 80, .0) 100%);
}

.listingCardBoostHeader--homepage::before {
    background: linear-gradient(to right, rgba(124, 58, 237, .78) 0%, rgba(124, 58, 237, .25) 55%, rgba(124, 58, 237, .0) 100%);
}

.listingCardBoostHeader--homebest::before {
    background: linear-gradient(to right, rgba(126, 34, 206, .78) 0%, rgba(126, 34, 206, .25) 55%, rgba(126, 34, 206, .0) 100%);
}

.listingCardBoostHeader--categorytop::before {
    background: linear-gradient(to right, rgba(14, 116, 144, .78) 0%, rgba(14, 116, 144, .25) 55%, rgba(14, 116, 144, .0) 100%);
}

.listingCardBoostHeader--catbest::before {
    background: linear-gradient(to right, rgba(13, 148, 136, .78) 0%, rgba(13, 148, 136, .25) 55%, rgba(13, 148, 136, .0) 100%);
}

.listingCardBoostHeader--chat::before {
    background: linear-gradient(to right, rgba(16, 155, 100, .78) 0%, rgba(16, 155, 100, .25) 55%, rgba(16, 155, 100, .0) 100%);
}

.listingCardBoostHeader--default::before {
    background: linear-gradient(to right, rgba(217, 119, 6, .78) 0%, rgba(217, 119, 6, .25) 55%, rgba(217, 119, 6, .0) 100%);
}

/* ===== Nightdeal kart efektleri ===== */
.listingCard--boost-nightdeal .listingCardMedia {
    position: relative;
}

.listingCard--boost-nightdeal .listingCardImg {
    filter: brightness(.92) saturate(1.05);
}

/* Kartın üstünde titreşen mini yıldızlar */
.listingCard--boost-nightdeal .listingCardMedia::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image:
        radial-gradient(circle 1px at 18% 14%, rgba(255, 255, 255, .90) 0%, transparent 1px),
        radial-gradient(circle 1px at 72% 10%, rgba(200, 220, 255, .85) 0%, transparent 1px),
        radial-gradient(circle 1.5px at 88% 32%, rgba(180, 215, 255, .80) 0%, transparent 1.5px),
        radial-gradient(circle 1px at 42% 22%, rgba(255, 255, 255, .70) 0%, transparent 1px),
        radial-gradient(circle 1px at 60% 45%, rgba(200, 220, 255, .75) 0%, transparent 1px),
        radial-gradient(circle 1px at 28% 55%, rgba(255, 255, 255, .65) 0%, transparent 1px),
        radial-gradient(circle 1.5px at 82% 62%, rgba(180, 215, 255, .70) 0%, transparent 1.5px),
        radial-gradient(circle 1px at 12% 70%, rgba(255, 255, 255, .60) 0%, transparent 1px);
    animation: cardStarPulse 4s ease-in-out infinite;
}

/* İkinci set farklı zamanlama ile — beraber çalışınca farklı yıldızlar yanıp söner hissi */
.listingCard--boost-nightdeal .listingCardMedia::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image:
        radial-gradient(circle 1px at 55% 18%, rgba(255, 255, 255, .80) 0%, transparent 1px),
        radial-gradient(circle 1px at 35% 38%, rgba(200, 220, 255, .70) 0%, transparent 1px),
        radial-gradient(circle 1.5px at 8% 42%, rgba(180, 215, 255, .75) 0%, transparent 1.5px),
        radial-gradient(circle 1px at 78% 52%, rgba(255, 255, 255, .65) 0%, transparent 1px),
        radial-gradient(circle 1px at 48% 68%, rgba(200, 220, 255, .60) 0%, transparent 1px);
    animation: cardStarPulse 6s ease-in-out infinite 2s;
}

@keyframes cardStarPulse {

    0%,
    100% {
        opacity: .15;
    }

    50% {
        opacity: .80;
    }
}


/* --- İlan detay: Soru-Cevap sekmesi (listing QA) --- */
.cxs-qa-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 20px;
}

.cxs-qa-askrow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
}

.cxs-qa-input {
    flex: 1 1 220px;
    /* Görsel stil: formControl'dan gelsin (focus/active dahil). */
    height: 45px;
    min-height: 45px;
    padding-top: 0;
    padding-bottom: 0;
}

.cxs-qa-input[readonly] {
    opacity: 0.75;
    cursor: not-allowed;
}

.cxs-qa-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    height: 45px;
    min-height: 45px;
    padding: 0 1.25rem;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-color-6, hsl(231, 17%, 8%));
    background: linear-gradient(135deg, var(--main, hsl(44, 95%, 58%)), var(--mainsec, hsl(43 87% 48%)));
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
}

.cxs-qa-send:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.cxs-qa-send:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.cxs-qa-send i {
    font-size: 0.95rem;
}

.cxs-qa-login-hint {
    margin-bottom: 0;
}

.cxs-qa-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cxs-qa-thread {
    border-radius: 12px;
    border: 1px solid var(--cxbcolor-3, hsl(215, 18%, 25%));
    background: var(--cxbgmainsec, hsl(216, 10%, 10%));
    padding: 1rem 1.1rem 1.1rem;
}

.cxs-qa-thread-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.cxs-qa-thread-head-main {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    flex: 1;
}

.cxs-qa-delete-btn {
    border: none;
    background: transparent;
    color: var(--cxcolor-50);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    text-underline-offset: 2px;
    flex-shrink: 0;
}

.cxs-qa-delete-btn:hover {
    filter: brightness(1.08);
}

.cxs-qa-answer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.cxs-qa-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--cxbcolor-3, hsl(215, 18%, 25%));
}

.cxs-qa-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cxs-qa-thread-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.cxs-qa-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-color2, hsl(213, 24%, 93%));
}

.cxs-qa-date {
    font-size: 0.78rem;
    color: var(--text-color-3, hsl(216deg 8.01% 54.78%));
}

.cxs-qa-qtext {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-color, hsl(216, 12%, 84%));
    margin-bottom: 0.35rem;
    word-break: break-word;
}

.cxs-qa-qbadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-right: 0.55rem;
    color: var(--text-color-6, hsl(231, 17%, 8%));
    background: linear-gradient(135deg, var(--main, hsl(44, 95%, 58%)), var(--mainsec, hsl(43 87% 48%)));
}

.cxs-qa-qbody {
    display: inline;
}

.cxs-qa-answer {
    margin-top: 0.75rem;
    padding: 0.75rem 0.85rem 0.85rem 0.95rem;
    border-radius: 10px;
    background: var(--cxbgmainthi, hsl(218, 10%, 11%));
    border: 1px solid var(--cxbcolor-2, hsl(215, 10%, 15%));
    border-left: 3px solid var(--mainfif, hsl(155, 85%, 55%));
}

.cxs-qa-answer.is-seller {
    border-left-color: var(--mainfif, hsl(155, 85%, 55%));
}

.cxs-qa-answer-label {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-color2, hsl(213, 24%, 93%));
    margin-bottom: 0.35rem;
}

.cxs-qa-answer-body {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-color-5, hsl(236, 17%, 82%));
    word-break: break-word;
}

.cxs-qa-empty {
    margin-bottom: 0;
}

.cxs-qa-reply {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: stretch;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cxs-qa-reply-input {
    flex: 1 1 200px;
    min-height: 44px;
    resize: vertical;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

.cxs-qa-reply-input:focus {
    outline: none;
    border-color: rgba(236, 72, 153, 0.45);
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.12);
}

.cxs-qa-reply-send {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0 1rem;
    min-height: 44px;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}

.cxs-qa-reply-send:hover:not(:disabled) {
    filter: brightness(1.06);
}

.cxs-qa-reply-send:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.cxs-qa-reply-hint {
    width: 100%;
    flex-basis: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-color2, hsl(213, 24%, 78%));
}

.cxs-qa-reply-hint i {
    margin-top: 0.12rem;
    opacity: 0.85;
}

/* --- Ä°lan detay: QA modern reply CTA (modal) --- */
.cxs-qa-thread {
    position: relative;
}

.cxs-qa-thread-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cxbcolor-3, hsl(215, 18%, 25%));
}

.cxs-qa-reply-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--text-color-6, hsl(231, 17%, 8%));
    background: linear-gradient(135deg, var(--main, hsl(44, 95%, 58%)), var(--mainsec, hsl(43 87% 48%)));
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
    flex-shrink: 0;
}

.cxs-qa-reply-fab:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.cxs-qa-reply-fab i {
    font-size: 0.95rem;
}

.cxs-qa-thread-footer .cxs-qa-reply-hint {
    margin-top: 0;
    flex-basis: auto;
    width: auto;
    opacity: 0.9;
}

@media (max-width: 576px) {
    .cxs-qa-askrow {
        flex-direction: column;
    }

    .cxs-qa-send {
        width: 100%;
    }

    .cxs-qa-reply {
        flex-direction: column;
    }

    .cxs-qa-reply-send {
        width: 100%;
    }
}

/* Hızlı mesaj drawer (#messageDrawer) — tek başlık, tam yükseklik sohbet alanı */
body.cx-message-drawer-open {
    overflow: hidden;
}

.cx-message-drawer-overlay.cxMenuDrawerOverlay {
    z-index: 10060;
}

/* Sohbet/ilan şikayet modalı: yalnızca mesaj drawer açıkken üstte (drawer 10060–10061) */
body.cx-message-drawer-open .modal-backdrop.cx-chat-report-modal-backdrop {
    z-index: 10079 !important;
}

body.cx-message-drawer-open #cxcreportM.cx-chat-report-modal.modal.show,
body.cx-message-drawer-open #cxListingReportM.cx-chat-report-modal.modal.show {
    z-index: 10080 !important;
}

.cx-message-drawer.cx-profile-drawer {
    z-index: 10061;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100dvh;
    min-height: 100vh;
    max-height: 100dvh;
    width: min(440px, 94vw);
    padding: 0;
    gap: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-right-width: 1px;
    box-shadow: 4px 0 24px hsl(0deg 0% 0% / 12%);
}

.cx-message-drawer-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
}

/* Gelen kutusu ↔ sohbet: yatay kaydırma */
.cx-message-drawer-panes-track {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.cx-message-drawer-panes-track .cx-message-drawer-pane-inbox,
.cx-message-drawer-panes-track .cx-message-drawer-pane-thread {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--cxbgmainsec);
    will-change: transform, opacity;
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.28s ease;
}

.cx-message-drawer-panes-track .cx-message-drawer-pane-thread {
    z-index: 2;
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.cx-message-drawer-panes-track .cx-message-drawer-pane-inbox {
    z-index: 1;
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
    pointer-events: none;
}

.cx-message-drawer-shell.is-showing-inbox .cx-message-drawer-panes-track .cx-message-drawer-pane-inbox {
    z-index: 2;
    transform: translate3d(0, 0, 0);
    opacity: 1;
    pointer-events: auto;
}

.cx-message-drawer-shell.is-showing-inbox .cx-message-drawer-panes-track .cx-message-drawer-pane-thread {
    z-index: 1;
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {

    .cx-message-drawer-panes-track .cx-message-drawer-pane-inbox,
    .cx-message-drawer-panes-track .cx-message-drawer-pane-thread {
        transition-duration: 0.01ms;
    }
}

/* Gelen kutusu: mesajlar sayfası (cx-chat-modern) bileşenleri */
.cx-message-drawer-pane-inbox.cx-chat-modern {
    margin-top: 0;
}

.cx-message-drawer-inbox-pending.cxpendingorderList {
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--cxbcolor);
}

.cx-message-drawer-inbox-actions.cx-chat-sidebar-actions {
    flex-wrap: nowrap;
    gap: 8px;
}

.cx-message-drawer-pane-inbox .cx-message-drawer-inbox-actions button.cx-chat-side-btn {
    font-family: inherit;
    cursor: pointer;
}

.cx-message-drawer-pane-inbox .cx-message-drawer-inbox-actions .cx-chat-side-btn {
    flex: 0 1 auto;
    gap: 6px;
    border-radius: var(--br-1-5);
    height: auto;
    min-height: 38px;
    padding: 0 12px;
}

.cx-message-drawer-pane-inbox .cx-message-drawer-inbox-actions .cx-chat-side-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cx-message-drawer-mark-all-btn {
    margin-left: auto;
    flex: 0 0 auto !important;
}

/* Notification drawer: "Tümünü Sil" için danger görünüm hook'u */
.cx-notification-drawer .cx-notify-drawer-delete-all-danger {
    margin-left: auto;
    flex: 0 0 auto !important;
    background: var(--cxopcolor-47);
    border-color: var(--cxopcolor-47-hover);
    color: var(--cxcolor-47);
}

.cx-notification-drawer .cx-notify-drawer-delete-all-danger i {
    color: var(--cxcolor-47);
}

.cx-notification-drawer .cx-notify-drawer-delete-all-danger:hover {
    background: var(--cxopcolor-47-hover);
    border-color: var(--cxopcolor-48-hover);
    color: var(--cxcolor-47-hover);
}

/* Bildirim çekmecesi: liste alanı — profil çekmecesi (.cxMenuDrawer) ile aynı ince scrollbar */
.cx-notification-drawer .cx-notify-drawer-list-wrap {
    overflow: hidden;
}

.cx-notification-drawer .cx-notify-drawer-list-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--cxbcolor-3) transparent;
}

.cx-notification-drawer .cx-notify-drawer-list-scroll::-webkit-scrollbar {
    width: 4px;
}

.cx-notification-drawer .cx-notify-drawer-list-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.cx-notification-drawer .cx-notify-drawer-list-scroll::-webkit-scrollbar-thumb {
    background: var(--cxbcolor-3);
    border-radius: var(--br-1);
}

.cx-notification-drawer .cx-notify-drawer-list-scroll .cx-notify-drawer-list {
    flex: 1;
    min-height: 0;
    max-height: none;
    padding: 0 4px 8px;
}

.cx-notification-drawer .cx-notify-drawer-list-scroll .cx-notify-empty-list {
    min-height: min(240px, 40vh);
}

.cx-notification-drawer .cx-notify-drawer-load-more-wrap {
    flex-shrink: 0;
    padding: 10px 12px 14px;
}

.cx-message-drawer-pane-inbox .cx-chat-list-search {
    padding: 10px 12px 6px;
}

.cx-message-drawer-pane-inbox .cx-message-drawer-inbox-list-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
    margin: 0 6px 6px;
}

.cx-message-drawer-pane-inbox .cx-message-drawer-inbox-list-inner.cxchatListM {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    margin-top: 0;
}

.cx-message-drawer-pane-inbox .cx-message-drawer-inbox-list-inner .cxchatLM {
    margin-top: 8px;
}

/* Mağaza filtresi “Sonuçları Göster” (.cxStoreFilterPanel .cxfilterbtn) ile aynı görünüm */
.cx-message-drawer-inbox-footer {
    flex-shrink: 0;
    padding: 20px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
    background-color: var(--cxbgmainfiv-thi);
    border-top: 1px dashed var(--cxbcolor);
}

.cx-message-drawer-inbox-footer .btnmainsec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: var(--main);
    border: 0;
    border-radius: var(--br-1-3);
    height: 45px;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.3);
}

.cx-message-drawer-inbox-footer .btnmainsec:hover {
    background: var(--mainfou);
}

.cx-message-drawer-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 16px 12px 14px;
    border-bottom: 1px solid var(--cxbcolor);
    background: linear-gradient(180deg, var(--cxbgmainthi) 0%, var(--cxbgmainsec) 100%);
}

.cx-message-drawer-bar-actions {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cx-message-drawer-report-btn.headerButton:disabled,
.cx-message-drawer-report-btn.headerButton[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.cx-message-drawer-back {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.cx-message-drawer-back:hover {
    color: var(--main);
    background: transparent;
}

.cx-message-drawer-back:focus-visible {
    outline: 2px solid var(--main);
    outline-offset: 2px;
}

.cx-message-drawer-back i {
    font-size: 10px;
    line-height: 1;
}

.cx-message-drawer-bar.cx-chat-modern .cx-chat-user-main {
    min-width: 0;
    flex: 1;
}

a.cx-message-drawer-profile-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.cx-message-drawer-profile-link:hover #messageDrawerName {
    color: var(--main);
}

.cx-message-drawer-bar.cx-chat-modern .cx-chat-user-main .cxcinfo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cx-message-drawer-bar.cx-chat-modern .cx-chat-user-main .cxcinfo #messageDrawerName {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-color);
    line-height: 1.25;
}

.cx-message-drawer-bar.cx-chat-modern .cxclimg img {
    margin-right: 10px;
    border: 2px solid var(--cxbcolor);
    object-fit: cover;
}

.cx-message-drawer-chat.cx-chat-modern {
    margin-top: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.cx-message-drawer .cx-message-drawer-area.cxcarea {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 14px 10px;
    gap: 10px;
    background: var(--cxbgmainsec);
}

.cx-message-drawer .cx-message-drawer-area .cxcmsgs {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    height: auto;
    margin: 0;
    padding: 6px 4px 10px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.cx-message-drawer .cx-message-drawer-area .cxcwrite {
    flex-shrink: 0;
    margin-top: 0;
}

@media (max-width: 1280px) {
    .cx-message-drawer.cx-profile-drawer {
        width: min(100vw, 100%);
        max-width: 100vw;
    }
}

/* SweetAlert2: drawer / profil menü / mobil tam ekran (z-index ~100500) üstünde görünsün (min.css varsayılan 1060) */
.swal2-container {
    z-index: 200000 !important;
}

/* Profil — Soru Cevap (orderCard / listingOrder ile aynı görünüm; bağımsız cxqa-* sınıfları) */
.cxqa-profile .cxqa-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.cxqa-profile .cxqa-card {
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    overflow: hidden;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxqa-profile .cxqa-card-head {
    padding: 10px 15px;
    border-bottom: 1px solid var(--cxbcolor);
}

.cxqa-profile .cxqa-card-product {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cxqa-profile .cxqa-card-thumb {
    width: 50px;
    height: 50px;
    border-radius: var(--br-1);
    background: var(--cxbgmainfou);
    border: 2px solid var(--cxbcolor);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-h);
    font-size: 14px;
    overflow: hidden;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.cxqa-profile .cxqa-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cxqa-profile .cxqa-card-productInfo {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cxqa-profile .cxqa-card-productName {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.cxqa-profile .cxqa-card-productSub,
.cxqa-profile .cxqa-card-productSub a {
    color: var(--main);
    font-size: 12px;
    font-weight: 500;
}

.cxqa-profile .cxqa-card-meta .col-lg-4,
.cxqa-profile .cxqa-card-meta .col-md-6,
.cxqa-profile .cxqa-card-meta .col-md-12 {
    margin-bottom: 0 !important;
}

.cxqa-profile .cxqa-card-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--cxbgmainthi);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1);
    height: 32px;
    padding: 0 9px;
    color: var(--text-color);
    font-size: 11px;
    font-weight: 500;
}

.cxqa-profile .cxqa-card-chip i {
    color: var(--mainsix-sec);
    font-size: 13px;
}

.cxqa-profile .cxqa-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--cxbgmainsec);
}

/* Gri soru/cevap gövdesinden sonra gelen cevaplayan şeridi (Soran ile aynı zemin) */
.cxqa-profile .cxqa-card-body+.cxqa-card-foot {
    border-top: 1px solid var(--cxbcolor);
}

.cxqa-profile .cxqa-card-aside {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.cxqa-profile .cxqa-card-asideLabel {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 500;
}

.cxqa-profile .cxqa-card-asideName {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.cxqa-profile .cxqa-card-asideNameLink {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cxqa-profile .cxqa-card-asideNameLink:hover {
    filter: brightness(1.08);
}

.cxqa-profile .cxqa-card-statusWrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cxqa-profile .cxqa-card-footEnd {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

.cxqa-profile .cxqa-card-footTime {
    color: var(--text-color);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.cxqa-profile .cxqa-miniBtn {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    border-radius: var(--br-1);
}


.cxqa-profile .cxqa-card-body {
    padding: 10px 12px 12px 12px;
    border-top: 1px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
}

.cxqa-profile .cxqa-card-sectionTitle {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.cxqa-profile .cxqa-card-detailItem {
    margin-bottom: 0;
}

.cxqa-profile .cxqa-threadBox {
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainsec);
    border-radius: var(--br-1-5);
    overflow: hidden;
}

.cxqa-profile .cxqa-threadHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.cxqa-profile .cxqa-threadHeadLeft {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cxqa-profile .cxqa-threadHeadLeft i {
    color: var(--mainsix-sec);
    font-size: 14px;
}

.cxqa-profile .cxqa-deleteLink {
    border: none;
    background: transparent;
    color: var(--cxcolor-50);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 0;
    cursor: pointer;
    text-underline-offset: 2px;
}

.cxqa-profile .cxqa-deleteLink:hover {
    filter: brightness(1.08);
}

.cxqa-profile .cxqa-threadContent {
    padding: 14px;
}

.cxqa-profile .cxqa-statusMsg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--br-1);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.cxqa-profile .cxqa-statusMsg--danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Market/Profile sayfaları: empty state tasarımı */
.cxEmptyState {
    min-height: 180px;
    border: 2px solid var(--cxbcolor);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--br-2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 18px;
    text-align: center;
}

.cxEmptyStateInner {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.cxEmptyStateIcon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    border: 2px solid var(--cxbcolor);
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.03);
}

.cxEmptyStateIcon i {
    font-size: 22px;
    opacity: 0.85;
}

.cxEmptyStateTitle {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
}

.cxEmptyStateDesc {
    font-size: 13px;
    opacity: 0.8;
    line-height: 1.45;
}

/* Market profil: değerlendirme kart grid (3'lü) */
.cxMarketReviewCard {
    border: 2px solid var(--cxbcolor-2);
    background: var(--cxbgmainsec);
    border-radius: var(--br-2);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 160px;
}

.cxMarketReviewTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cxMarketReviewUser {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cxMarketReviewDot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mainsec);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.03);
}

.cxMarketReviewName {
    color: var(--text-color);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cxMarketReviewName:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cxMarketReviewRating {
    display: inline-flex;
    gap: 3px;
    padding: 6px 10px;
    border: 2px solid var(--cxbcolor);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
}

.cxMarketReviewRating i {
    font-size: 12px;
    color: #f5c542;
}

.cxMarketReviewMeta {
    font-size: 12px;
    opacity: 0.7;
    margin-top: -4px;
}

.cxMarketReviewListing {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 2px solid var(--cxbcolor-2);
    border-radius: 12px;
    background: var(--cxbgmainfiv-thi);
}

.cxMarketReviewListingImg img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.cxMarketReviewListingTitle {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    opacity: 0.95;
}

.cxMarketReviewListingLink {
    text-decoration: none;
    color: inherit;
    display: block;
}

.cxMarketReviewListingLink:hover .cxMarketReviewListing {
    border-color: var(--cxbcolor-3);
    filter: brightness(1.04);
}

/* Market profil: takipçi/takip mini kart (görseldeki gibi) */
.cxMarketMiniUserCard {
    border: 2px solid var(--cxbcolor-2);
    background: var(--cxbgmainsec);
    border-radius: var(--br-2);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 72px;
    position: relative;
}

.cxMarketMiniUserCardLink {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.cxMarketMiniUserLeft {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    position: relative;
    z-index: 2;
}

.cxMarketMiniUserLeft:hover {
    color: var(--text-color);
}

.cxMarketMiniUserAvatar {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid var(--cxbcolor);
    background: rgba(255, 255, 255, 0.03);
    flex: 0 0 auto;
}

.cxMarketMiniUserAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

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

.cxMarketMiniUserName {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-color);
}

.cxMarketMiniUserSub {
    font-size: 12px;
    opacity: 0.75;
    line-height: 1.2;
}

.cxMarketMiniUserRight {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 3;
}

.cxMarketMiniFollowBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    border: 2px solid var(--cxbcolor);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-color);
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    transition: all .15s;
    cursor: pointer;
    white-space: nowrap;
}

.cxMarketMiniFollowBtn i {
    font-size: 13px;
}

.cxMarketMiniFollowBtn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--cxbcolor-3);
}

.cxMarketMiniFollowBtn.is-following {
    background: rgba(255, 255, 255, 0.02);
}

.cxMarketReviewText {
    font-size: 13px;
    opacity: 0.85;
    line-height: 1.45;
    margin-top: 2px;
    margin-left: 15px;
}

/* Detail sayfasındaki yorum header tasarımının market uyarlaması */
.cxMarketReviewHeader {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 5px;
}

.cxMarketReviewAvatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--cxbgmainfiv);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    text-decoration: none;
}

.cxMarketReviewAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cxMarketReviewHeaderContent {
    flex: 1 1 auto;
    min-width: 0;
}

.cxMarketReviewHeaderRow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cxMarketReviewUserName {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
    border-right: 1px solid var(--cxbcolor);
    padding-right: 10px;
    text-decoration: none;
}

.cxMarketReviewUserName:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cxMarketReviewStars {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
}

.cxMarketReviewStars i {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.22);
}

.cxMarketReviewStars i.is-filled {
    color: var(--cxcolor-star);
}

.cxMarketReviewDate {
    color: var(--text-color);
    font-size: 12px;
    flex: 0 0 auto;
    margin-left: auto;
    opacity: 0.75;
}

/* Şifre koşulu progress (kayıt / profil şifre değiştir) */
.password-strength-progress {
    height: 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
}

.password-strength-bar {
    height: 100%;
    width: 0%;
    background: #dc3545;
    transition: width 0.18s ease, background-color 0.18s ease;
    border-radius: 0;
}

.password-strength-list {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: 6px;
}

.password-strength-list li {
    display: flex;
    align-items: flex-start;
    font-size: 11px;
    opacity: 0.85;
    line-height: 1.35;
}

.password-strength-list li::before {
    font-family: "Font Awesome 7 Pro";
    content: "\f05a";
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    font-weight: 300;
    line-height: 1;
    text-rendering: auto;
    margin-right: 5px;
    flex-shrink: 0;
    margin-top: 0.12em;
}

.password-strength-list li+li {
    margin-top: 0.35em;
}

/* Mobilde drawer'lar (kategori paneli gibi) tam ekran */
@media (max-width: 991.98px) {

    #profileDrawer,
    #messageDrawer,
    #notificationDrawer {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: auto !important;
        border-right: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
}

/* =========================
   Profile - Oyun Filtreleri
   ========================= */
.cxFilterBox {
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-2);
    padding: 18px 18px 14px;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25));
}

.cxFilterBoxHead {
    margin-bottom: 14px;
}

.cxFilterBoxTitle {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--text-color2);
}

.cxFilterBoxDesc {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-color-h);
}

.cxGameFilters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    overflow: visible;
    padding: 4px 2px 10px;
    scroll-snap-type: none;
}

.cxGameFilters::-webkit-scrollbar {
    height: 0;
}

.cxGameFilters::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
}

.cxGameFilters::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}

.cxGameFilter {
    --cxCardBg: linear-gradient(135deg, rgba(255, 200, 91, 0.22), rgba(219, 70, 255, 0.18));
    --cxIcon: none;
    position: relative;
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    padding: 0;
    scroll-snap-align: unset;
    overflow: hidden;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.cxGameFilter:focus {
    outline: none;
}

.cxGameFilter:focus-visible {
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(255, 200, 91, 0.24);
}

.cxGameFilter:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.35);
}

.cxGameFilter.is-active {
    border-color: rgba(255, 200, 91, 0.38);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 200, 91, 0.10) inset;
}

.cxGameFilterBg {
    position: absolute;
    inset: 0;
    background: var(--cxCardBg);
    opacity: 0.95;
}

.cxGameFilterBg::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%);
    transform: rotate(14deg);
}

.cxGameFilterIcon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 8px;
    background-image: var(--cxIcon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 34px;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
    opacity: 0.98;
}

.cxGameFilterLabel {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    max-width: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cxGameFilter:not(:has(.cxGameFilterLabel)) .cxGameFilterIcon {
    bottom: 0;
}

@media (max-width: 575.98px) {
    .cxFilterBox {
        padding: 16px 14px 12px;
        border-radius: 16px;
    }

    .cxGameFilter {
        width: 58px;
        height: 58px;
        border-radius: 13px;
    }

    .cxGameFilterIcon {
        background-size: 32px 32px;
    }
}

/* =========================
   Profile - 2'li Credential Kartları
   ========================= */
.credCards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.credCard {
    --cxCardAccent: rgba(255, 200, 91, 0.95);
    --cxCardAccentSoft: rgba(255, 200, 91, 0.14);
    --credCardBorder: color-mix(in srgb, var(--cxCardAccent) 38%, var(--cxbcolor));
    --credCardBorderHover: color-mix(in srgb, var(--cxCardAccent) 65%, var(--cxbcolor));
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.016));
    border: 2px solid var(--credCardBorder);
    border-radius: var(--br-2);
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.credCard::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 0%, var(--cxCardAccentSoft), rgba(0, 0, 0, 0) 62%),
        radial-gradient(circle at 85% 0%, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0) 45%);
    opacity: 0.55;
    pointer-events: none;
}

.credCard:hover {
    border-color: var(--credCardBorderHover);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--cxCardAccent) 20%, rgba(0, 0, 0, 0.28));
}

.credCardHead {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 10px;
    border-bottom: 2px solid var(--credCardBorder);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.credCardLeft {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.credCardIcon {
    width: 50px;
    height: 50px;
    border-radius: var(--br-1-3);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.20);
    flex: 0 0 auto;
}

.credCardIcon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.credCardTitleArea {
    min-width: 0;
}

.credCardOverline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--text-color-h);
    line-height: 1.1;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.credCardTitle {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.credCardRight {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.credCardPill {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 10px;
    border-radius: var(--br-1-3);
    background: var(--credPillBg, rgba(0, 0, 0, 0.18));
    border: 1px solid var(--credPillBorder, rgba(255, 255, 255, 0.08));
    color: rgba(255, 255, 255, 0.70);
    font-weight: 800;
    font-size: 12px;
}

.credCardPillNum {
    color: rgba(255, 255, 255, 0.92);
}

.credCardBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    padding: 9px 12px;
    border-radius: var(--br-1-3);
    font-weight: 900;
    font-size: 12px;
    cursor: pointer;
    box-shadow: none;
    transition: transform 140ms ease, filter 140ms ease, background-color 140ms ease, border-color 140ms ease;
    white-space: nowrap;
}

.credCardBtn:not(.is-danger) {
    background: var(--credCardBtnBg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--credCardBtnBorder, rgba(255, 255, 255, 0.10));
    color: var(--credCardBtnFg, rgba(255, 255, 255, 0.86));
}

.credCardBtn i {
    font-size: 12px;
}

.credCardBtn:not(.is-danger):hover {
    background: var(--credCardBtnBgHover, rgba(255, 255, 255, 0.09));
    border-color: var(--credCardBtnBorder, rgba(255, 255, 255, 0.14));
}

.credCardBtn.is-danger {
    background: rgba(244, 67, 54, 0.18);
    border: 1px solid rgba(244, 67, 54, 0.22);
    color: rgba(255, 255, 255, 0.88);
}

.credCardBtn.is-danger:hover {
    background: rgba(244, 67, 54, 0.26);
    border-color: rgba(244, 67, 54, 0.32);
}

.credCardBody {
    position: relative;
    z-index: 1;
    padding: 0 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 290px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--cxbcolor-3) transparent;
    -webkit-overflow-scrolling: touch;
}

.credCardEmpty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 14px;
    border-radius: var(--br-1-3);
    background:
        linear-gradient(to left, rgb(60 21 21 / 30%) 0%, rgb(60 21 21 / 12%) 42%, rgb(60 21 21 / 0) 68%),
        rgba(0, 0, 0, 0.14);
    border: 1px dashed var(--cxopcolor-47-hover);
    box-shadow: none;
}

.credCardEmptyIcon {
    width: 34px;
    height: 34px;
    border-radius: var(--br-1-3);
    display: grid;
    place-items: center;
    background: var(--cxopcolor-48);
    color: var(--cxcolor-50);
    border: 2px solid var(--cxopcolor-48-hover);
    flex: 0 0 auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.credCardEmptyText {
    font-size: 12px;
    font-weight: 600;
    color: var(--cxcolor-48);
}

/* Kaydedilen bilgiler — sunucu işlemi bitene kadar çift tıklama / ardışık istek engeli */
.credCards.cxCredVaultUiBusy,
.cxGameFilters.cxCredVaultUiBusy,
.cxCredSearchBar.cxCredVaultUiBusy {
    pointer-events: none;
    opacity: 0.72;
    user-select: none;
}

/* Kaydedilen bilgiler — arama (game segment arama ile aynı yapı) */
.cxCredSearchBar {
    margin: 15px 0;
}

.cxCredSearchBar .cxTopFiltersSearch .formControl.form-search {
    width: 100%;
}

/* Kaydedilen bilgiler — satır listesi (orderCard / cxStock sınıfları kullanılmaz) */
.cxCredVaultList {
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainsec);
    border-radius: var(--br-1-5);
    padding: 9px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cxCredVaultListHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
}

.cxCredVaultListHeadLeft {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.cxCredVaultListHeadActions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.cxCredVaultIconBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--text-color);
    background: var(--cxbgmainfou);
    border: 1px solid var(--cxbcolor);
    border-radius: var(--br-1);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease, color 140ms ease;
}

.cxCredVaultIconBtn:hover {
    color: var(--text-color);
    background: var(--cxbgmainthi);
    border: 1px solid var(--cxbcolor-3);
}

.cxCredVaultIconBtn--danger {
    color: var(--cxcolor-48);
    border-color: var(--cxopcolor-49-hover);
    background: var(--cxopcolor-48);
}

.cxCredVaultIconBtn--danger:hover {
    color: var(--cxcolor-48-hover);
    border-color: var(--cxcolor-1);
    background: var(--cxopcolor-48-hover);
}

.cxCredVaultIconBtn--star.cxCredVaultIconBtn--starActive {
    background: var(--mainfou);
    border-color: color-mix(in srgb, var(--mainfou) 72%, rgba(255, 255, 255, 0.12));
    color: var(--text-color-6);
    cursor: default;
}

.cxCredVaultIconBtn--star.cxCredVaultIconBtn--starActive:hover {
    background: var(--mainfou);
    border-color: color-mix(in srgb, var(--mainfou) 72%, rgba(255, 255, 255, 0.12));
    color: var(--text-color-6);
}

.cxCredVaultIconBtn--star.cxCredVaultSetDefaultBtn {
    background: var(--cxbgmainfou);
    border: 1px solid var(--cxbcolor);
    color: var(--main);
}

.cxCredVaultIconBtn--star.cxCredVaultSetDefaultBtn:hover {
    background: var(--cxbgmainthi);
    border-color: var(--cxbcolor-3);
    color: var(--main);
}

.cxCredVaultListHeadText {
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.2px;
}

.cxCredVaultRow {
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainthi);
    color: var(--text-color);
    border-radius: var(--br-1);
    min-height: 38px;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 600;
    transition: all .15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cxCredVaultIdx {
    width: 22px;
    min-width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--cxbgmainfiv-thi);
    box-shadow: 0 0 0 4px var(--cxbgmainfiv);
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.cxCredVaultText {
    flex: 1;
    min-width: 0;
    color: var(--text-color);
    font-size: 13px;
    letter-spacing: 0.2px;
    word-break: break-word;
    line-height: 1.35;
}

.cxCredVaultKey {
    opacity: 0.78;
    font-weight: 800;
    font-size: 12px;
}

.cxCredVaultSep {
    opacity: 0.45;
    margin: 0 5px;
    font-weight: 700;
}

.cxCredVaultVal {
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .credCards {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------- */
/* Oyun kategori sayfası — kategori accordion blokları (açılır-kapanır değil) */
/* -------------------------------------------------------------------------- */

.cxCategoryAccordions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* İlan kategori sayfası: uzun içerikte gövde kaydırması — profil çekmecesi (.cx-scrollbar-thin) ile aynı scrollbar */
.cxCategoryAccordions--storeScroll .cxCategoryAccordion__body {
    max-height: min(42vh, 300px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.cxCategoryAccordion {
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    padding: 16px 18px;
}

.cxCategoryAccordion__title {
    margin: 0 0 8px 0;
    padding: 0;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
    color: var(--text-color-7);
}

.cxCategoryAccordion__body {
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.6;
    word-break: break-word;
}

.cxCategoryAccordion__body p {
    margin: 0 0 0.75em 0;
}

.cxCategoryAccordion__body p:last-child {
    margin-bottom: 0;
}

.cxCategoryAccordion__body ul,
.cxCategoryAccordion__body ol {
    margin: 0 0 0.75em 0;
    padding-left: 1.25em;
}

.cxCategoryAccordion__body a {
    color: var(--main);
    text-decoration: none;
}

.cxCategoryAccordion__body a:hover {
    color: var(--mainfou);
}

.cxCategoryAccordion__body img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.cxCategoryAccordion__pricelist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cxCategoryAccordion__priceItem {
    padding: 0 0 4px 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-color);
}

.cxCategoryAccordion__priceItem:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.cxCategoryAccordion__productName {
    font-weight: 500;
    color: var(--text-color);
}

.cxCategoryAccordion__colon {
    opacity: 0.65;
    margin: 0 2px 0 1px;
}

.cxCategoryAccordion__productPrice {
    font-weight: 700;
    color: var(--text-color);
}

/* ── Slider Game Panel ── */

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

.sliderGame {
    width: 100%;
    position: relative;
    border-radius: var(--br-1-5);
    border: 2px solid var(--cxbcolor);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 6px 0;
    overflow: hidden;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.sliderGame:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(20, 24, 32, 0.45);
    backdrop-filter: blur(1px);
}

.sliderGame:after {
    content: "";
    width: 62%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(to right, rgba(20, 24, 32, 0), rgba(20, 24, 32, 0.7) 70%, rgba(20, 24, 32, 1) 100%);
    z-index: 2;
}

.sliderGameInner {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    z-index: 3;
}

.sliderGameLogo {
    width: 90px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sliderGameLogo img {
    height: 26px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4));
}

.sliderGameLinks {
    width: calc(100% - 90px);
    min-height: 70px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    justify-content: center;
}

.sliderGameLinks:before {
    content: "";
    width: 2px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cxbcolor);
}

.sliderGameLinkItem {
    position: relative;
}

.sliderGameLinkItem:before {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(cxbcolor);
}

.sliderGameLinks .sliderGameLinkItem:last-child:before {
    display: none;
}

.sliderGameLinkItem a {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #e8eaf0;
    line-height: 1;
    text-decoration: none;
    padding: 7px 0;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    position: relative;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
}

.sliderGameLinkItem a:hover {
    text-shadow: none;
    padding-left: 5px;
    transition: all 0.3s ease-in-out;
}

.sliderGameLinks .sliderGameLinkItem:nth-child(2) a {
    color: #e9b535;
}

.sliderGameLinks .sliderGameLinkItem:nth-child(3) a {
    color: #80f1b1;
}

@media (max-width: 991px) {
    .sliderGamePanel {
        margin-top: 12px;
    }

    .sliderGame {
        padding: 4px 0;
    }

    .sliderGameLogo {
        width: 70px;
    }

    .sliderGameLogo img {
        height: 20px;
    }

    .sliderGameLinks {
        width: calc(100% - 70px);
        min-height: 52px;
    }

    .sliderGameLinkItem a {
        font-size: 10px;
        padding: 5px 0;
    }
}

/* ── Shared home section (marquee + fixed ortak) ──────── */
.home-section {
    background: var(--cxbgmainsec);
    padding: 40px 0;
    margin: 30px 0;
}

.home-section__header {
    text-align: center;
    margin-bottom: 28px;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.home-section__title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -.3px;
}

.home-section__link {
    display: inline-block;
    font-size: 13px;
    color: var(--cxcolor-1, #d59e10);
    text-decoration: none;
    font-weight: 500;
    transition: opacity .2s;
}

.home-section__link:hover {
    opacity: .75;
    color: var(--cxcolor-1, #d59e10);
}

/* ── Marquee section — eğik bant ──────────────────────── */
.marquee-section {
    overflow: hidden;
    padding: 20px 0 !important;
    position: relative;
    background: transparent;
}

.marquee-section .home-section__header {
    position: absolute;
    top: 16px;
    left: 36px;
    text-align: left;
    margin: 0;
    z-index: 3;
}

.marquee-section .home-section__title {
    font-size: 16px;
    margin: 0;
    letter-spacing: 0;
}

/* ── Marquee block — döndürülmüş bant ─────────────────── */
.marquee-block {
    transform: rotate(-4deg);
    width: calc(100% + 400px);
    margin-left: -200px;
    background: var(--cxbgmainsec);
    padding: 28px 0;
    overflow: hidden;
}

.marquee-track {
    display: flex;
    gap: 20px;
    width: max-content;
    will-change: transform;
}

.marquee-block .productcard,
.marquee-block .gamesCard {
    flex-shrink: 0;
    width: 180px;
}

/* ── Marquee category card (mqcatCard) ──────────────────── */
@keyframes mqcatLogoBounce {
    0% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }

    35% {
        transform: translateY(-10px);
        animation-timing-function: ease-in;
    }

    62% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }

    80% {
        transform: translateY(-5px);
        animation-timing-function: ease-in;
    }

    100% {
        transform: translateY(0);
    }
}

.mqcatCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--br-1-5, 14px);
    overflow: hidden;
    text-decoration: none;
    position: relative;
    width: 170px;
    min-width: 170px;
    height: 170px;
    flex-shrink: 0;
    box-shadow: none;
    transition: box-shadow 0.3s ease;
}

.mqcatCard:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35),
        0 0 28px color-mix(in srgb, var(--mqcat-clr, #888) 32%, transparent);
}

.mqcatCardLogo {
    position: relative;
    z-index: 2;
    width: 64px;
    height: 64px;
    min-width: 64px;
    font-size: 24px;
    flex-shrink: 0;
    border-radius: var(--br-1-5, 14px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.20);
    transition: transform 0.4s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.mqcatCard:hover .mqcatCardLogo {
    animation: mqcatLogoBounce 1.1s linear infinite;
    background: rgba(255, 255, 255, 0.25);
}

.mqcatCardLogo img {
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.mqcatCardInfo {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
}

.mqcatCardName {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
    line-height: 1.25;
}

.mqcatCardSub {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 4px;
}

/* ── Fixed row block ───────────────────────────────────── */
.fixed-block {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
}

.fixed-block .productcard,
.fixed-block .gamesCard {
    flex: 0 0 180px;
    max-width: 180px;
}

.fixed-block .mqcatCard {
    flex: 0 0 170px;
    width: 170px;
    min-width: 170px;
}

/* ── Home Tab Products Block (htp) ── */
.htp-block {
    margin-top: 30px;
    margin-bottom: 30px;
}

.htp-feature-card {
    background: var(--cat-color, var(--main));
    border-radius: var(--br-1-3);
    overflow: hidden;
    position: relative;
    height: 100%;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    clip-path: polygon(85% 0%, 100% 15%, 100% 100%, 0% 100%, 0% 0%);
}

.htp-feature-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.htp-feature-icon-wrap {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.htp-feature-icon-wrap img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: brightness(10) saturate(0);
    opacity: .9;
    display: block;
    transition: opacity .3s;
}

.htp-feature-name {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 0;
}

a.htp-feature-header {
    text-decoration: none;
    transition: opacity .15s;
}

a.htp-feature-header:hover {
    opacity: .82;
}

.htp-feature-cats {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex: 1;
    justify-content: flex-start;
    padding-top: .25rem;
}

.htp-feature-cat-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .4rem .5rem;
    color: rgba(255, 255, 255, .45);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transform: translateX(0);
    transition: transform .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease;
    line-height: 1.25;
}

.htp-feature-cat-item .htp-feature-icon-wrap {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: .55;
    transition: opacity .3s ease;
}

.htp-feature-cat-item .htp-feature-icon-wrap img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(10) saturate(0);
    display: block;
}

.htp-feature-cat-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.htp-feature-cat-item:hover {
    color: rgba(255, 255, 255, .75);
}

.htp-feature-cat-item.active {
    color: #fff;
    font-weight: 700;
    transform: translateX(10px);
    border-left-color: rgba(255, 255, 255, .8);
}

.htp-feature-cat-item.active .htp-feature-icon-wrap {
    opacity: 1;
}

.htp-feature-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: auto;
    padding-bottom: .85rem;
}

.htp-feature-progress-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, .22);
    overflow: hidden;
    z-index: 2;
}

.htp-feature-progress-bar {
    height: 100%;
    background: #fff;
    width: 0%;
    will-change: width;
}

.htp-feature-prev-btn,
.htp-feature-next-btn {
    flex-shrink: 0;
    background: rgba(255, 255, 255, .2);
    border: 1.5px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    padding: 0;
    transition: background .15s, transform .15s;
}

.htp-feature-prev-btn:hover,
.htp-feature-next-btn:hover {
    background: rgba(255, 255, 255, .38);
    transform: scale(1.08);
}

.htp-pane {
    display: none;
}

.htp-pane.active {
    display: block;
    animation: htp-fadein .32s ease;
}

@keyframes htp-fadein {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.htp-block .cxproduct-item {
    padding: 6px 8px;
    gap: 0;
}

.htp-block .cxproduct-item .img {
    max-width: 64px;
    min-width: 64px;
    padding: 2px;
}

.htp-block .cxproduct-item .img img {
    width: 100%;
    height: 60px;
    object-fit: contain;
}

.htp-block .cxproduct-item .img a img {
    border-radius: var(--br-2);
}

.htp-block .cxproduct-item .productname {
    font-size: 14px;
    margin-top: 2px;
}

.htp-block .cxproduct-item .info small {
    font-size: 10px;
}

.htp-block .cxproduct-item .info {
    padding-left: 4px;
}

.htp-block .priceNew {
    font-size: 12px;
}

.htp-block .priceArea {
    min-width: 70px !important;
}

.htp-block .qty-stepper.number-input {
    height: 38px;
    min-height: 38px;
    min-width: 90px;
    padding: 4px 6px;
    gap: 0;
}

.htp-block .qty-stepper__btn {
    width: 28px;
    min-width: 28px;
    height: 28px;
    border-radius: 4px;
}

.htp-block .qty-stepper__glyph {
    font-size: 0.75rem;
}

.htp-block .qty-stepper__field {
    font-size: 0.75rem;
    width: 1.4rem;
    min-width: 1rem;
}

.htp-block .cxproduct-right {
    gap: 6px;
    padding-left: 6px;
}

.htp-block .cxproduct-right .cxproduct-field {
    padding: 0;
}

.htp-block .cxproduct-item--split {
    min-width: 0;
}

.htp-block .cxproduct-item--split .cxproduct-field-main {
    min-width: 0;
    flex: 1 1 0;
    gap: 5px;
}

.htp-block .cxproduct-item--split .cxproduct-field-main .info {
    min-width: 0;
    overflow: hidden;
}

.htp-block .cxproduct-item--split .productname a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.htp-block .cxproduct-item--split .cxproduct-right {
    flex-shrink: 0;
}

.htp-buy-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: none;
    font-size: 1rem;
    flex-shrink: 0;
    cursor: pointer;
    transition: opacity .15s, transform .15s;
}

.htp-buy-icon:not(:disabled):hover {
    opacity: .85;
    transform: scale(1.07);
}

.htp-buy-icon:disabled {
    opacity: .45;
    cursor: default;
}

.htp-seeall {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    min-height: 60px;
    background: rgba(255, 255, 255, .04);
    border: 1.5px dashed rgba(255, 255, 255, .18);
    border-radius: 12px;
    color: var(--color-primary, #5a67d8);
    font-size: .95rem;
    font-weight: 600;
    padding: 1rem 1.25rem;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.htp-seeall:hover {
    background: rgba(255, 255, 255, .08);
    border-color: var(--color-primary, #5a67d8);
    color: var(--color-primary, #5a67d8);
}

.htp-seeall-icon {
    align-items: center;
    background: var(--color-primary, #5a67d8);
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.htp-pane .cxproduct-item {
    margin-bottom: 0;
}

/* ── htp: Responsive ── */

/* Tablet + Mobil: feature card yatay compact bant */
@media (max-width: 991.98px) {
    .htp-feature-card {
        min-height: auto;
        flex-direction: row;
        align-items: center;
        padding: 0.75rem 1rem;
        gap: 0.75rem;
        border-radius: 12px;
        clip-path: none;
    }

    .htp-feature-header {
        flex: 1;
        min-width: 0;
        gap: 0.6rem;
    }

    .htp-feature-icon-wrap {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .htp-feature-icon-wrap img {
        width: 22px;
        height: 22px;
    }

    .htp-feature-name {
        font-size: 1rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .htp-feature-footer {
        flex-shrink: 0;
        padding: 0;
    }
}

/* Mobil: ürün kartı sağ bölümünü sıkıştır */
@media (max-width: 575.98px) {
    .htp-block .qty-stepper.number-input {
        min-width: 78px;
        height: 34px;
        min-height: 34px;
        padding: 2px 4px;
    }

    .htp-block .qty-stepper__btn {
        width: 24px;
        min-width: 24px;
        height: 24px;
    }

    .htp-block .priceArea {
        min-width: 58px !important;
    }

    .htp-block .priceNew {
        font-size: 11px;
    }

    .htp-buy-icon {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }

    .htp-block .cxproduct-right {
        gap: 4px;
        padding-left: 4px;
    }

    .htp-block .cxproduct-item {
        padding: 5px 6px;
    }

    .htp-block .cxproduct-item .img {
        max-width: 52px;
        min-width: 52px;
    }

    .htp-block .cxproduct-item .img img {
        height: 48px;
    }
}

/* ── htp: iPad / lg-start düzeltmesi (992-1199px) ── */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .htp-block .cxproduct-item {
        padding: 5px 6px;
    }

    .htp-block .cxproduct-item .img {
        max-width: 50px;
        min-width: 50px;
        padding: 2px;
    }

    .htp-block .cxproduct-item .img img {
        height: 46px;
    }

    .htp-block .priceArea {
        min-width: 58px !important;
    }

    .htp-block .priceNew {
        font-size: 11px;
    }

    .htp-block .qty-stepper.number-input {
        min-width: 80px;
        height: 34px;
        min-height: 34px;
        padding: 2px 4px;
        gap: 0;
    }

    .htp-block .qty-stepper__btn {
        width: 24px;
        min-width: 24px;
        height: 24px;
    }

    .htp-buy-icon {
        width: 34px;
        height: 34px;
        font-size: 0.85rem;
    }

    .htp-block .cxproduct-right {
        gap: 4px;
        padding-left: 4px;
    }

    .htp-block .cxproduct-item .productname {
        font-size: 12px;
    }
}

/* ── htp: 576-991px arası (portrait tablet / büyük telefon) ── */
@media (min-width: 576px) and (max-width: 991.98px) {
    .htp-block .cxproduct-item {
        padding: 5px 7px;
    }

    .htp-block .cxproduct-item .img {
        max-width: 54px;
        min-width: 54px;
    }

    .htp-block .cxproduct-item .img img {
        height: 50px;
    }

    .htp-block .qty-stepper.number-input {
        min-width: 82px;
        height: 35px;
        min-height: 35px;
    }

    .htp-block .qty-stepper__btn {
        width: 25px;
        min-width: 25px;
        height: 25px;
    }

    .htp-block .priceArea {
        min-width: 62px !important;
    }

    .htp-buy-icon {
        width: 35px;
        height: 35px;
    }

    .htp-block .cxproduct-right {
        gap: 4px;
    }
}

/* ═══════════════════════════════════════════════════
   htp-card — Home Tab Products özel kart tasarımı
   cxproduct-item CSS kopyalanarak htp-card-* prefix
   ile yeniden adlandırılmış, bağımsız sınıflar.
   ═══════════════════════════════════════════════════ */

.htp-card {
    display: flex;
    align-items: center;
    background-color: var(--cxbgmainthi);
    margin-bottom: 0;
    border-radius: var(--br-1-5);
    border: 2px solid var(--cxbcolor);
    padding: 5px 8px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    transition: all .15s;
}

.htp-card:hover {
    border-color: var(--cxbcolor-3);
}

/* Görsel — cxproduct-item .img tabanlı, kompakt (64px) */
.htp-card-img {
    max-width: 64px;
    min-width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--br-1-5);
    padding: 4px;
    flex-shrink: 0;
}

.htp-card-img a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.htp-card-img img {
    width: 100%;
    height: 56px;
    object-fit: contain;
    border-radius: var(--br-1-5);
}

/* İsim + açıklama — cxproduct-item .info + .productname tabanlı */
.htp-card-info {
    flex: 1 1 0;
    min-width: 0;
    text-align: left;
    padding-left: 5px;
}

.htp-card-name {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.htp-card-name a {
    color: inherit;
    text-decoration: none;
}

.htp-card-name a:hover {
    color: var(--main);
}

.htp-card-sub {
    font-size: 11px;
    color: var(--cxcolor-10);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sağ bölüm — cxproduct-right tabanlı */
.htp-card-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* Fiyat — priceNew tabanlı, --main rengi */
.htp-card-price {
    min-width: 72px;
    text-align: right;
}

.htp-card-price-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--main);
    white-space: nowrap;
}

/* Adet stepper — qty-stepper tabanlı */
.htp-card-stepper {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    min-height: 38px;
    min-width: 90px;
    padding: 4px 6px;
    border-radius: var(--br-1-5);
    background: var(--cxbcolor-2);
    border: 1px solid var(--cxbcolor-3);
    gap: 0;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    box-sizing: border-box;
}

.htp-card-stepper *,
.htp-card-stepper {
    box-sizing: border-box;
}

.htp-card-stepper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: var(--cxbcolor-3);
    color: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background .12s;
    appearance: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.htp-card-stepper-btn:hover {
    background-color: #1e232b;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.htp-card-stepper-btn:active {
    background-color: #252b35;
}

.htp-card-stepper-btn:focus {
    outline: none;
}

.htp-card-stepper-input {
    width: 1.4rem;
    min-width: 1rem;
    height: 28px;
    border: none;
    background: transparent;
    color: inherit;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

.htp-card-stepper-input::-webkit-outer-spin-button,
.htp-card-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Sepete ekle butonu — cxgp-buy-main-btn/icon-btn tabanlı, --main rengi */
.htp-card-buy-btn {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: var(--br-1-5);
    border: 0;
    background-color: var(--main);
    color: var(--text-color-6);
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: all .15s;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
}

.htp-card-buy-btn:not(:disabled):hover {
    background-color: var(--mainfou);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--main) 32%, transparent);
}

.htp-card-buy-btn:disabled {
    opacity: .45;
    cursor: default;
}

.htp-card-notify-btn {
    background-color: var(--cxopcolor-50);
    color: var(--cxcolor-50);
    box-shadow: none;
    cursor: pointer;
}

.htp-card-notify-btn:hover {
    background-color: var(--cxopcolor-47);
    opacity: 0.9;
}

.htp-card-notify-btn.notify-stock-active {
    background-color: var(--cxopcolor-41);
    color: var(--cxcolor-41);
    cursor: default;
}

.htp-card-notify-btn.notify-stock-active:hover {
    background-color: var(--cxopcolor-41-hover);
    color: var(--cxcolor-41-hover);
    opacity: 1;
}

.htp-card-right .htp-card-notify-group {
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: 38px;
    flex-shrink: 1;
}

.htp-card-right .htp-card-notify-group .cxgp-buy-main-btn,
.htp-card-right .htp-card-notify-group .cxgp-buy-icon-btn {
    height: 38px;
}

.htp-card-right .htp-card-notify-group .cxgp-buy-icon-btn {
    width: 38px;
    min-width: 38px;
}

.htp-card-right .htp-card-notify-group .cxgp-buy-main-btn {
    font-size: 11px;
    padding: 0 10px;
    white-space: nowrap;
}

/* ── htp-card Responsive ── */

/* ≤991px: feature card yatay + tek sütun ürün listesi */
@media (max-width: 991.98px) {
    .htp-card-stepper {
        min-width: 82px;
        height: 35px;
        min-height: 35px;
        padding: 3px 5px;
    }

    .htp-card-stepper-btn {
        width: 25px;
        min-width: 25px;
        height: 25px;
    }

    .htp-card-buy-btn {
        width: 35px;
        min-width: 35px;
        height: 35px;
    }

    .htp-card-right .htp-card-notify-group {
        height: 35px;
    }

    .htp-card-right .htp-card-notify-group .cxgp-buy-main-btn,
    .htp-card-right .htp-card-notify-group .cxgp-buy-icon-btn {
        height: 35px;
    }

    .htp-card-right .htp-card-notify-group .cxgp-buy-icon-btn {
        width: 35px;
        min-width: 35px;
    }

    .htp-card-right .htp-card-notify-group .cxgp-buy-main-btn {
        font-size: 10px;
        padding: 0 8px;
    }
}

/* ≤575px: küçük mobil */
@media (max-width: 575.98px) {
    .htp-card {
        padding: 4px 6px;
    }

    .htp-card-img {
        max-width: 52px;
        min-width: 52px;
        padding: 3px;
    }

    .htp-card-img img {
        height: 46px;
    }

    .htp-card-price {
        min-width: 58px;
    }

    .htp-card-price-val {
        font-size: 11px;
    }

    .htp-card-stepper {
        min-width: 78px;
        height: 32px;
        min-height: 32px;
        padding: 2px 4px;
    }

    .htp-card-stepper-btn {
        width: 22px;
        min-width: 22px;
        height: 22px;
    }

    .htp-card-buy-btn {
        width: 32px;
        min-width: 32px;
        height: 32px;
        font-size: .88rem;
    }

    .htp-card-right .htp-card-notify-group {
        height: 32px;
    }

    .htp-card-right .htp-card-notify-group .cxgp-buy-main-btn,
    .htp-card-right .htp-card-notify-group .cxgp-buy-icon-btn {
        height: 32px;
    }

    .htp-card-right .htp-card-notify-group .cxgp-buy-icon-btn {
        width: 32px;
        min-width: 32px;
    }

    .htp-card-right .htp-card-notify-group .cxgp-buy-main-btn {
        font-size: 9px;
        padding: 0 6px;
    }

    .htp-card-right {
        gap: 4px;
    }

    .htp-card-name {
        font-size: 12px;
    }
}

/* ── Banner Strip ── */
.bannerStrip {
    background: #0d0d0f;
    margin-top: 20px;
}

.bannerGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.bannerCard {
    position: relative;
    display: flex;
    align-items: center;
    height: 90px;
    overflow: hidden;
    background-size: cover;
    background-position: center right;
    text-decoration: none;
    transition: all .2 ease;
}

.bannerCard:hover {
    text-decoration: none;
    filter: brightness(1.2);
}

.bannerOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #0d0d0f 28%, rgba(13, 13, 15, 0.35) 55%, rgba(13, 13, 15, 0.5) 82%, rgba(13, 13, 15, 0.78) 100%);
    z-index: 1;
}

.bannerInner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    width: 100%;
}

.bannerLogo {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bannerLogo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(1.1);
}

.bannerTexts {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bannerTitle {
    font-weight: 700;
    font-size: 13px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1.2;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

.bannerBtn {
    font-size: 11px;
    font-weight: 500;
    color: #d0d0d0;
    letter-spacing: .2px;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

@media (max-width: 991px) {
    .bannerGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .bannerGrid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .bannerCard {
        height: 80px;
    }
}

/* --- Tüm oyunlar: hover-expand satırları (7 panel) --- */
.gamePanelsWrap {
    width: 100%;
}

.gamePanelsStream {
    width: 100%;
}

.gamePanelsStream>.gamePanelsRow:first-child {
    margin-top: 1.25rem;
}

.gamePanelsStream>.gamePanelsRow:not(:first-child) {
    margin-top: 10px;
}

.gamePanelsSentinel {
    height: 8px;
    margin: 1.25rem 0 0;
    pointer-events: none;
}

.gamePanelsRow {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 12px;
    min-height: 320px;
    height: clamp(320px, 38vh, 400px);
}

.gamePanel {
    position: relative;
    display: block;
    flex: 0 0 calc((100% - 72px) / 7);
    min-width: 0;
    border-radius: 14px;
    background-color: #0a0a0a;
    outline: none;
    text-decoration: none;
    contain: layout style;
}

.gamePanel:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111;
    outline: none;
}

.gamePanelInner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    border-radius: 14px;
    overflow: hidden;
}

.gamePanelMedia {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Oyun sayfası hero kartı (.cxgamehero-card) ile aynı çift gradient: üst + alttan karartma */
.gamePanelMedia::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 28%, rgba(0, 0, 0, 0) 55%);
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

.gamePanelMedia::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0) 60%);
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
}

.gamePanelVerticalTitle {
    position: relative;
    z-index: 2;
    padding: 20px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.5px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    align-self: flex-end;
    margin-top: auto;
    margin-bottom: 0;
    white-space: nowrap;
    line-height: 1.2;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.88), 0 1px 5px rgba(0, 0, 0, 0.95), 0 0 1px rgba(0, 0, 0, 1);
}

.gamePanelsEmpty {
    margin-top: 1.25rem;
    padding: 2rem 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    background: #111;
    border-radius: 14px;
    border: 0.5px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 1024px) {
    .gamePanelsRow {
        flex-wrap: wrap;
        height: auto;
        min-height: 0;
        gap: 8px;
    }

    .gamePanel {
        flex: 0 0 130px;
        min-width: 130px;
        height: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .gamePanel .atropos-rotate,
    .gamePanel .atropos-scale,
    .gamePanel .atropos-shadow,
    .gamePanel .atropos-highlight,
    .gamePanel [data-atropos-offset] {
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}


/* ── 404 Not Found Page ──────────────────────────────────────── */


/* Alt kategori panelleri: kategori rengi + logo */
.gamePanel--brand {
    background-color: var(--game-panel-color, #d4a82a);
}

.gamePanelMedia--brand {
    background-color: var(--game-panel-color, #d4a82a);
    background-image:
        linear-gradient(to top right, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 30%),
        linear-gradient(160deg, var(--game-panel-color, #d4a82a) 0%, var(--game-panel-color, #d4a82a) 48%, rgba(0, 0, 0, 0.50) 100%);
    background-repeat: no-repeat;
    background-size: cover;
}

.gamePanelMedia--brand::before,
.gamePanelMedia--brand::after {
    display: none;
}

.gamePanel .gamePanelBrandLogoWrap {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.gamePanel .gamePanelBrandLogo {
    width: clamp(52px, 5.5vw, 72px);
    height: clamp(52px, 5.5vw, 72px);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
}

.gamePanel .gamePanelBrandLogo img {
    width: 62%;
    height: 62%;
    object-fit: contain;
    filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

.notfound-page {
    padding: 0 !important;
}

.notfound-shell {
    min-height: 100vh;
    background: var(--cxbgmain);
    display: flex;
    flex-direction: column;
}

.notfound-bar {
    padding: 22px 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.notfound-bar a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.notfound-bar img {
    height: 34px;
    width: auto;
    display: block;
}

.notfound-bar-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
}

.notfound-hero {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 24px 72px;
    overflow: hidden;
}

.notfound-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, black 30%, transparent 100%);
}

.notfound-ghost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    font-size: clamp(220px, 32vw, 420px);
    font-weight: 900;
    letter-spacing: .18em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .045);
    padding-left: .18em;
    line-height: 1;
}

.notfound-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 560px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
            color-mix(in srgb, var(--main) 16%, transparent) 0%,
            color-mix(in srgb, var(--main) 6%, transparent) 45%,
            transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.notfound-icon {
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--main) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--main) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
    font-size: 22px;
    color: var(--main);
    box-shadow: 0 0 28px color-mix(in srgb, var(--main) 18%, transparent);
}

.notfound-heading {
    position: relative;
    z-index: 1;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.1;
}

.notfound-desc {
    position: relative;
    z-index: 1;
    font-size: .975rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .5);
    max-width: 460px;
    margin: 0 0 36px;
}

.notfound-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px;
    border-radius: var(--br-1-5);
    background: linear-gradient(135deg, var(--main), var(--mainfou));
    color: var(--text-color-6);
    font-weight: 600;
    font-size: .875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 4px 22px color-mix(in srgb, var(--main) 38%, transparent);
}

.notfound-cta:hover {
    color: var(--text-color-6);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--main) 32%, transparent);
}

.notfound-cta i {
    font-size: .8rem;
    transition: transform .2s ease;
}

.notfound-cta:hover i {
    transform: translateX(3px);
}

.notfound-cats {
    padding: 0 40px 64px;
    flex-shrink: 0;
}

.notfound-cats-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.notfound-cats-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    margin: 0 0 4px;
}

.notfound-cats .gamePanelsStream>.gamePanelsRow:first-child {
    margin-top: .75rem;
}

@media (max-width: 768px) {
    .notfound-bar {
        padding: 18px 20px;
    }

    .notfound-hero {
        padding: 48px 20px 56px;
    }

    .notfound-cats {
        padding: 0 16px 48px;
    }
}

/* ── Bütçe dostu fiyat aralıkları (sistem bloğu) ── */
.cxBudget {
    background: transparent;
    padding: 2.75rem 0 3rem;
    margin-top: 1.25rem;
}

.cxBudget-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

.cxBudget-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.cxBudget-subtitle {
    margin: 0.5rem 0 0;
    font-size: 14px;
    color: var(--text-color-h);
    line-height: 1.45;
}

.cxBudget-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.cxBudget-card {
    --cxBudget-card-bg: var(--cxbgmainsec);
    --cxBudget-clr: var(--cxbgmainfou);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.55rem;
    flex: 0 0 158px;
    width: 158px;
    min-width: 158px;
    max-width: 158px;
    aspect-ratio: 1 / 1;
    padding: 0.9rem 0.55rem;
    box-sizing: border-box;
    background: var(--cxBudget-card-bg);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-3);
    text-decoration: none;
    color: inherit;
    position: relative;
    box-shadow: none;
    transition: box-shadow 0.3s ease, background 0.25s ease, border-color 0.25s ease;
}

.cxBudget-card:hover,
.cxBudget-card:focus-visible {
    text-decoration: none;
    color: inherit;
    --cxBudget-card-bg: var(--cxbgmainthi);
    --cxBudget-clr: var(--cxbcolor-3);
    background: var(--cxBudget-card-bg);
    border-color: var(--cxbcolor-3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35),
        0 0 28px color-mix(in srgb, var(--cxBudget-clr) 50%, transparent);
}

.cxBudget-card:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.18);
    outline-offset: 2px;
}

.cxBudget-cardLogo {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cxBudget-card:hover .cxBudget-cardLogo .shortcut-icon {
    animation: mqcatLogoBounce 1.1s linear infinite;
}

.cxBudget-info {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.cxBudget-price {
    font-family: "Wix Madefor Display", "Inter", sans-serif;
    font-size: 1.12rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.cxBudget-label {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.48);
    line-height: 1.2;
}

@media (max-width: 767px) {
    .cxBudget {
        padding: 2rem 0 2.25rem;
    }

    .cxBudget-header {
        margin-bottom: 1.25rem;
    }

    .cxBudget-grid {
        gap: 10px;
    }

    .cxBudget-card {
        flex: 0 0 132px;
        width: 132px;
        min-width: 132px;
        max-width: 132px;
    }

    .cxBudget-price {
        font-size: 1.05rem;
    }
}

@media (max-width: 359px) {
    .cxBudget-card {
        flex: 0 0 calc((100% - 10px) / 2);
        width: calc((100% - 10px) / 2);
        min-width: 0;
        max-width: calc((100% - 10px) / 2);
    }
}

/* ── Öne çıkan ilanlar — üst tab çubuğu (sistem bloğu) ── */
.featList {
    padding: 24px 0 4px;
    margin-top: 8px;
}

.featListToolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--cxbgmainsec) 0%, var(--cxbgmainthi) 100%);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.featListBrand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 auto;
}

.featListBrandIcon.shortcut-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
}

.featListBrandIcon.shortcut-icon i {
    font-size: 18px;
}

.featListBrandText {
    min-width: 0;
}

.featListTitle {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.featListSubtitle {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--text-color-h);
    line-height: 1.35;
}

.featListActions {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
    flex-shrink: 0;
    max-width: 100%;
    min-width: 0;
    padding: 3px;
    background: var(--cxbgmainfiv-thi);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-3);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.featListActions::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.featListTabs {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    flex-shrink: 0;
    min-width: max-content;
}

.featListMarketBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-left: 2px;
    padding: 12px 15px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 10px 10px 0;
    background: transparent;
    color: var(--text-color-h);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.featListMarketBtn:hover,
.featListMarketBtn:focus-visible {
    color: var(--text-color-7);
    text-decoration: none;
}

.featListTab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 15px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-color-h);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.featListTab i,
.featListMarketBtn i {
    font-size: 14px;
    opacity: 0.85;
}

.featListTab:hover {
    color: var(--text-color-7);
}

.featListTabActive {
    color: var(--text-color-6);
    background: var(--main);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
}

.featListTabActive:hover {
    color: var(--text-color-6);
    box-shadow: 0 2px 14px color-mix(in srgb, var(--main) 25%, transparent);
}

.featListTabActive i {
    opacity: 1;
}

.featListTab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--main) 65%, transparent);
    outline-offset: 2px;
}

@media (max-width: 991px) {
    .featListToolbar {
        flex-wrap: wrap;
        gap: 14px;
    }

    .featListBrand {
        flex: 1 1 100%;
    }

    .featListActions {
        margin-left: auto;
    }
}

@media (max-width: 575px) {
    .featListToolbar {
        padding: 14px;
    }

    .featListTab span {
        font-size: 12px;
    }

    .featListSubtitle {
        font-size: 11px;
    }

    .featListActions {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .featListTabs {
        width: 100%;
        padding-bottom: 4px;
    }

    .featListTab {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 9px;
        padding-right: 9px;
    }

    .featListMarketBtn {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        margin-left: 0;
        width: 100%;
        justify-content: center;
        border-radius: 0 0 10px 10px;
        padding: 10px 12px;
    }
}

.featListPanel {
    display: none;
    padding: 16px 0 8px;
}

.featListPanelActive {
    display: block;
}

.featListPanelLoader,
.dealListPanelLoader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    gap: 12px;
    color: var(--text-color-4);
    font-size: 13px;
}

.featListViewAll,
.dealListViewAll {
    padding: 12px 0 4px;
    display: flex;
    justify-content: center;
}

.featListViewAllInner,
.dealListViewAllInner {
    display: flex;
    justify-content: center;
}

.featListViewAllBtn,
.dealListViewAllBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: var(--main);
    color: #111;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: var(--br-1-3);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
    transition: box-shadow .15s, opacity .15s;
}

.featListViewAllBtn:hover,
.dealListViewAllBtn:hover,
.featListViewAllBtn:focus-visible,
.dealListViewAllBtn:focus-visible {
    color: #111;
    text-decoration: none;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--main) 40%, transparent);
}

.featListViewAllBtn i,
.dealListViewAllBtn i {
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background: rgb(0 0 0 / 28%);
    border-radius: 6px;
}

/* ── Genel sayfa araç çubuğu — tab'sız (toolbar) ── */
.toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--cxbgmainsec) 0%, var(--cxbgmainthi) 100%);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    margin-bottom: 16px;
}

.toolbarBrand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 auto;
}

.toolbarBrandIcon.shortcut-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
}

.toolbarBrandIcon.shortcut-icon i {
    font-size: 18px;
}

.toolbarBrandText {
    min-width: 0;
}

.toolbarTitle {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.toolbarSubtitle {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--text-color-h);
    line-height: 1.35;
}

.toolbarActions {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
    flex-shrink: 0;
    max-width: 100%;
    min-width: 0;
    padding: 3px;
    background: var(--cxbgmainfiv-thi);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-3);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.toolbarActions--bare {
    background: none;
    border: none;
    padding: 0;
}

.toolbarActions::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.toolbarBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 15px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-color-h);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.toolbarBtn i {
    font-size: 14px;
    opacity: 0.85;
}

.toolbarBtn:hover,
.toolbarBtn:focus-visible {
    color: var(--text-color-7);
    text-decoration: none;
}

.toolbarBtn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--main) 65%, transparent);
    outline-offset: 2px;
}

.toolbarBtnPrimary {
    color: var(--text-color-6);
    background: var(--main);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
}

.toolbarBtnPrimary i {
    opacity: 1;
}

.toolbarBtnPrimary:hover,
.toolbarBtnPrimary:focus-visible {
    color: var(--text-color-6);
    box-shadow: 0 2px 14px color-mix(in srgb, var(--main) 25%, transparent);
}

.toolbarSearch {
    position: relative;
    display: flex;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 5px;
    margin-left: 10px;
}

.toolbarSearch--standalone {
    border-left: none;
    margin-left: 0;
    padding: 3px 3px 3px 12px;
    background: var(--cxbgmainfiv-thi);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-3);
}



.toolbarSearchInput {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-color-7);
    font-size: 13px;
    padding: 4px 28px 4px 4px;
    width: 210px;
}

.toolbarSearchInput::placeholder {
    color: var(--text-color-3);
}

.toolbarSearchInput:active,
.toolbarSearchInput:focus {
    outline: none;
    border: none
}

.toolbarSearchIcon {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color-3);
    font-size: 13px;
    pointer-events: none;
}

.toolbarSelect {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 5px;
    margin-left: 10px;
}

.toolbarSelectInput {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-color-7);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 28px 4px 4px;
    min-width: 130px;
    cursor: pointer;
}

.toolbarSelectInput:active,
.toolbarSelectInput:focus {
    outline: none;
    border: none;
}

.toolbarSelectIcon {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color-3);
    font-size: 13px;
    pointer-events: none;
}

/* Select2 — toolbar filter */
.toolbarSelect .select2-container {
    min-width: 195px;
    align-self: center;
}

.toolbarSelect .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    outline: none;
    height: auto;
    min-height: 0;
    padding: 0 28px 0 4px;
}

.toolbarSelect .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-color-h);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    top: 0;
    transition: all .3s;
}

.toolbarSelect .select2-container--default .select2-selection--single .select2-selection__rendered:hover {
    color: var(--text-color-7);
}

.toolbarSelect .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

.toolbarSelect .select2-container--default.select2-container--open .select2-selection--single,
.toolbarSelect .select2-container--default.select2-container--focus .select2-selection--single {
    border: none;
    outline: none;
}

/* Select2 — toolbar dropdown */
.toolbarActions:has(.select2-container--open) {
    overflow: visible;
    position: relative;
    z-index: 1060;
}

.toolbar:has(.select2-container--open) {
    position: relative;
    z-index: 1060;
}

.toolbarActions .select2-dropdown--below {
    margin-top: 15px;
}


.toolbarActions.toolbarActionsBadges {
    padding: 0;
    background: transparent;
    border: none;
    overflow: visible;
}

.toolbarActions .toolbarBadges {
    flex-wrap: nowrap;
    gap: 6px;
}

.toolbarActions .toolbarBadges .footerBadgeLink {
    padding: 6px;
}

.toolbarActions .toolbarBadges .footerBadgeImg {
    height: 28px;
}

/* İletişim sayfası — sidebar + kartlar (kutu dışı) + form kutusu */
.contactPageGrid {
    gap: 20px;
}

.contactPageMain {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.contactInfoCards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.contactInfoCardsEmpty {
    margin: 0;
    padding: 14px 12px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-color-3);
    grid-column: 1 / -1;
}

.contactInfoCard {
    --contact-icon-color: var(--main);
    --contact-icon-bg: color-mix(in srgb, var(--contact-icon-color) 18%, var(--cxbgmainsec));
    --contact-icon-ring: color-mix(in srgb, var(--contact-icon-color) 12%, transparent);
    --contact-card-glow: color-mix(in srgb, var(--contact-icon-color) 14%, transparent);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    min-height: 68px;
    width: 100%;
    background-color: var(--cxbgmainsec);
    border: 1px solid var(--cxbcolor);
    border-radius: var(--br-1);
    min-width: 0;
    box-shadow:
        0 1px 2px color-mix(in srgb, #000 10%, transparent),
        0 4px 14px color-mix(in srgb, #000 6%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent),
        inset 0 2px 6px color-mix(in srgb, #000 10%, transparent),
        inset 0 0 20px color-mix(in srgb, var(--contact-icon-color) 7%, transparent);
}

.contactInfoCard[data-variant="1"] {
    --contact-icon-color: var(--cxcolor-1);
    --contact-icon-bg: var(--cxopcolor-4);
}

.contactInfoCard[data-variant="2"] {
    --contact-icon-color: var(--cxcolor-2);
    --contact-icon-bg: var(--cxopcolor-3);
}

.contactInfoCard[data-variant="12"] {
    --contact-icon-color: var(--cxcolor-12);
    --contact-icon-bg: var(--cxopcolor-12);
}

.contactInfoCard[data-variant="19"] {
    --contact-icon-color: var(--cxcolor-19);
    --contact-icon-bg: var(--cxopcolor-19);
}

.contactInfoCard[data-variant="22"] {
    --contact-icon-color: var(--cxcolor-22);
    --contact-icon-bg: var(--cxopcolor-22);
}

.contactInfoCard[data-variant="7"] {
    --contact-icon-color: var(--cxcolor-7);
    --contact-icon-bg: var(--cxopcolor-5);
}

.contactInfoCard[data-variant="8"] {
    --contact-icon-color: var(--cxcolor-8);
    --contact-icon-bg: var(--cxopcolor-5);
}

.contactInfoCard[data-variant="9"] {
    --contact-icon-color: var(--cxcolor-9);
    --contact-icon-bg: var(--cxopcolor-6);
}

.contactInfoCard[data-variant="14"] {
    --contact-icon-color: var(--cxcolor-14);
    --contact-icon-bg: var(--cxopcolor-10);
}

.contactInfoCard[data-variant="23"] {
    --contact-icon-color: var(--cxcolor-23);
    --contact-icon-bg: var(--cxopcolor-23);
}

.contactInfoCard[data-variant="35"] {
    --contact-icon-color: var(--cxcolor-35);
    --contact-icon-bg: var(--cxopcolor-35);
}

.contactInfoCardIconWrap {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--contact-icon-bg);
    box-shadow:
        0 0 0 2px var(--contact-icon-ring),
        0 3px 10px var(--contact-card-glow),
        inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
        inset 0 0 12px color-mix(in srgb, var(--contact-icon-color) 10%, transparent);
}

.contactInfoCardIcon {
    font-size: 16px;
    line-height: 1;
    color: var(--contact-icon-color);
}

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

.contactInfoCardLabel {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-color-h);
    line-height: 1.2;
}

.contactInfoCardValue {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-color2);
    line-height: 1.3;
    word-break: break-word;
}

.contactInfoCardValueLink {
    text-decoration: none;
    color: var(--text-color2);
    transition: color 0.15s ease;
}

.contactInfoCardValueLink:hover {
    color: var(--main);
}

.contactPageFormBox.infoPageContent {
    flex: 0 0 auto;
}

.contactFormTitle {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color2);
}

.contactFormDesc {
    margin: 0 0 20px;
    font-size: 12.5px;
    color: var(--text-color-3);
}

.contactFormRow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.contactFormField {
    min-width: 0;
}

.contactFormFieldFull {
    margin-bottom: 14px;
}

.contactFormLabel {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-color2);
}

.contactForm .formControl {
    width: 100%;
}

.contactFormConsent {
    margin-top: 4px;
}

.contactFormConsent .cbx span:last-child {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-color-h);
}

.contactFormActions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.cx-contact-page .contactFormSubmit.btnmainsec {
    display: inline-flex;
    width: auto;
    min-width: 120px;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    border-radius: var(--br-1);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--main) 22%, transparent);
}

.cx-contact-page .contactFormSubmit.btnmainsec:hover {
    box-shadow: 0 2px 12px color-mix(in srgb, var(--main) 28%, transparent);
}

@media (max-width: 991.98px) {
    .contactFormRow {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .contactInfoCards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .toolbar {
        flex-wrap: wrap;
        gap: 14px;
    }

    .toolbarBrand {
        flex: 1 1 100%;
    }

    .toolbarActions {
        margin-left: auto;
    }
}

@media (max-width: 575px) {
    .toolbar {
        padding: 14px;
    }

    .toolbarSubtitle {
        font-size: 11px;
    }

    .toolbarActions {
        width: 100%;
        margin-left: 0;
    }

    .toolbarBtn {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 9px;
        padding-right: 9px;
    }

    .toolbarBtn span {
        font-size: 12px;
    }
}

/* ── toolbar select + search bağımsız responsive ── */
.toolbarFormGroup {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 1;
    min-width: 0;
}

/* ≤1199px: daralt ama aynı satırda kal */
@media (max-width: 1199px) {
    .toolbarFormGroup .toolbarSearch .toolbarSearchInput {
        width: 130px;
    }

    .toolbarFormGroup .toolbarSelect .select2-container {
        min-width: 150px;
    }
}

/* ≤991px: form tam satır genişliğine yayılır */
@media (max-width: 991px) {
    .toolbarActions {
        flex-wrap: wrap;
    }

    .toolbarFormGroup {
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 12px;
    }

    /* Select: sabit genişlik, border sıfırla */
    .toolbarFormGroup .toolbarSelect {
        flex-shrink: 0;
        margin-left: 0;
        padding-left: 4px;
        border-left: none;
    }

    .toolbarFormGroup .toolbarSelect .select2-container {
        min-width: 160px;
        width: 160px !important;
    }

    /* Search: kalan alanı doldur */
    .toolbarFormGroup .toolbarSearch {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 0;
    }

    .toolbarFormGroup .toolbarSearch .toolbarSearchInput {
        width: 100%;
        min-width: 0;
    }
}

/* ≤575px: select + search üst üste tam genişlik */
@media (max-width: 575px) {
    .toolbarFormGroup {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .toolbarFormGroup .toolbarSelect {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding-bottom: 12px;
        border-left: none;
    }

    .toolbarFormGroup .toolbarSelect .select2-container {
        width: 100% !important;
        min-width: 0;
    }

    .toolbarFormGroup .toolbarSearch {
        width: 100%;
        border-left: none;
        padding-left: 4px;
    }

    .toolbarFormGroup .toolbarSearch .toolbarSearchInput {
        width: 100%;
    }
}

/* ── /toolbar select + search bağımsız responsive ── */

/* ── İletişim sayfası — Hero, Hızlı İletişim, Form geliştirmeleri ── */

.contactHero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 24px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, var(--cxbgmainsec) 0%, var(--cxbmainfo) 100%);
    border: 1px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    position: relative;
    overflow: hidden;
}

.contactHero::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--main) 10%, transparent), transparent 70%);
    pointer-events: none;
}

.contactHeroIcon {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--main) 14%, var(--cxbgmainthi));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--main) 18%, transparent);
    font-size: 22px;
    color: var(--main);
    position: relative;
    z-index: 1;
}

.contactHeroContent {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.contactHeroTitle {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-color2);
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.contactHeroDesc {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-color-h);
    line-height: 1.5;
    max-width: 380px;
}

.contactHeroStats {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    background: var(--cxbgmainfou);
    border: 1px solid var(--cxbcolor);
    border-radius: var(--br-1);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.contactHeroStat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 11px 18px;
}

.contactHeroStatVal {
    font-size: 13px;
    font-weight: 700;
    color: var(--main);
    line-height: 1.2;
    white-space: nowrap;
}

.contactHeroStatLabel {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-color-h);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1.2;
}

.contactHeroStatDivider {
    width: 1px;
    align-self: stretch;
    background: var(--cxbcolor);
    flex-shrink: 0;
    margin: 8px 0;
}

/* Hızlı İletişim kartları */
.contactQuickActions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.contactQuickCard {
    --qc-color: var(--main);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--cxbgmainsec);
    border: 1px solid var(--cxbcolor);
    border-left: 3px solid var(--qc-color);
    border-radius: var(--br-1);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    min-width: 0;
}

.contactQuickCard:hover {
    background: color-mix(in srgb, var(--qc-color) 7%, var(--cxbgmainsec));
    border-color: color-mix(in srgb, var(--qc-color) 45%, var(--cxbcolor));
    box-shadow: 0 6px 20px color-mix(in srgb, var(--qc-color) 14%, transparent);
    transform: translateY(-2px);
    text-decoration: none;
}

.contactQuickCard--whatsapp {
    --qc-color: var(--cxcolor-8);
}

.contactQuickCard--phone {
    --qc-color: var(--cxcolor-7);
}

.contactQuickCard--email {
    --qc-color: var(--cxcolor-35);
}

.contactQuickCardIcon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--qc-color) 14%, var(--cxbgmainthi));
    font-size: 18px;
    color: var(--qc-color);
    transition: background-color 0.18s ease;
}

.contactQuickCard:hover .contactQuickCardIcon {
    background: color-mix(in srgb, var(--qc-color) 22%, var(--cxbgmainthi));
}

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

.contactQuickCardTitle {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color2);
    line-height: 1.2;
}

.contactQuickCardSub {
    font-size: 11.5px;
    color: var(--text-color-h);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contactQuickCardArrow {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-color-h);
    transition: color 0.18s ease, transform 0.18s ease;
}

.contactQuickCard:hover .contactQuickCardArrow {
    color: var(--qc-color);
    transform: translateX(3px);
}

/* Sidebar bölüm başlığı */
.contactSidebarHead {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 14px 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-color-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}

.contactSidebarHead i {
    font-size: 11px;
}

/* Form başlığı + durum rozeti */
.contactFormHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.contactFormTitleGroup {
    min-width: 0;
}

.contactFormTitleGroup .contactFormTitle {
    margin: 0 0 5px;
}

.contactFormSubDesc {
    margin: 0;
    font-size: 12px;
    color: var(--text-color-3);
    line-height: 1.5;
}

.contactFormStatus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: color-mix(in srgb, var(--cxcolor-5) 10%, var(--cxbgmainsec));
    border: 1px solid color-mix(in srgb, var(--cxcolor-5) 28%, transparent);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: var(--cxcolor-5);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

.contactFormStatusDot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cxcolor-5);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cxcolor-5) 25%, transparent);
    animation: contactDotPulse 2.4s ease-in-out infinite;
}

@keyframes contactDotPulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--cxcolor-5) 25%, transparent);
    }

    50% {
        opacity: 0.75;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--cxcolor-5) 12%, transparent);
    }
}



/* Responsive: tablet */
@media (max-width: 767.98px) {
    .contactHero {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 16px;
    }

    .contactHeroStats {
        width: 100%;
        justify-content: center;
    }

    .contactQuickActions {
        grid-template-columns: 1fr;
    }
}

/* Responsive: küçük mobil */
@media (max-width: 575.98px) {
    .contactHeroTitle {
        font-size: 15px;
    }

    .contactQuickCardSub {
        display: none;
    }
}

/* ── Fırsatlar — tab + geri sayım (sistem bloğu) ── */
.dealList {
    padding: 24px 0 4px;
    margin-top: 8px;
}

.dealListToolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--cxbgmainsec) 0%, var(--cxbgmainthi) 100%);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.dealListBrand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    max-width: 280px;
    justify-self: start;
    grid-column: 1;
}

.dealListBrandIcon.shortcut-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
}

.dealListBrandIcon.shortcut-icon i {
    font-size: 18px;
}

.dealListBrandText {
    min-width: 0;
}

.dealListTitle {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.dealListSubtitle {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--text-color-h);
    line-height: 1.35;
}

.dealListCountdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    grid-column: 2;
    width: auto;
    padding: 3px;
    background: var(--cxbgmainfiv-thi);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-3);
}

.dealListCountdownTrack {
    display: inline-flex;
    align-items: stretch;
    gap: 8px;
}

.dealListCountdownUnit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 44px;
    padding: 6px 10px;
    border-radius: 10px;
    background: transparent;
}

.dealListCountdownValue {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.dealListCountdownLabel {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-color-h);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1;
}

.dealListActions {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    grid-column: 3;
    max-width: 100%;
    min-width: 0;
    padding: 3px;
    background: var(--cxbgmainfiv-thi);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-3);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dealListActions::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.dealListTabs {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    min-width: max-content;
}

.dealListTab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 13px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-color-h);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.dealListTab i {
    font-size: 14px;
    opacity: 0.85;
}

.dealListTab:hover {
    color: var(--text-color-7);
}

.dealListTabActive {
    color: var(--text-color-6);
    background: var(--main);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main) 25%, transparent);
}

.dealListTabActive:hover {
    color: var(--text-color-6);
    box-shadow: 0 2px 14px color-mix(in srgb, var(--main) 25%, transparent);
}

.dealListTabActive i {
    opacity: 1;
}

.dealListTab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--main) 65%, transparent);
    outline-offset: 2px;
}

@media (max-width: 1199px) {
    .dealListToolbar {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .dealListBrand {
        grid-column: 1;
        justify-self: start;
        max-width: none;
    }

    .dealListCountdown {
        grid-column: 1;
        justify-self: center;
    }

    .dealListActions {
        grid-column: 1;
        justify-self: stretch;
    }
}

@media (max-width: 575px) {
    .dealListToolbar {
        padding: 14px;
        gap: 12px;
    }

    .dealListCountdownUnit {
        min-width: 40px;
        padding: 6px 8px;
    }

    .dealListCountdownUnit+.dealListCountdownUnit {
        padding-left: 8px;
    }

    .dealListCountdownValue {
        font-size: 14px;
    }

    .dealListTab {
        padding: 10px 9px;
        font-size: 11px;
    }

    .dealListTab span {
        font-size: 11px;
    }
}

.dealListPanel {
    display: none;
    padding: 16px 0 8px;
}

.dealListPanelActive {
    display: block;
}

/* ======================================================
   HAKKIMIZDA / ABOUT PAGE  (camelCase selectors)
   ====================================================== */

.aboutPage {
    background-color: var(--cxbgmain);
}

/* ---- Gradient metin: main → mainfou + sarı glow ---- */
.aboutGradientText,
.aboutHeroGradient {
    background: linear-gradient(135deg, var(--main), var(--mainfou));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--main) 45%, transparent));
}

/* ---- Butonlar ---- */
.aboutBtnPrimary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px;
    border-radius: var(--br-1-5);
    background: linear-gradient(135deg, var(--main), var(--mainfou));
    color: var(--text-color-6);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 4px 22px color-mix(in srgb, var(--main) 38%, transparent);
    cursor: pointer;
    border: none;
}

.aboutBtnPrimary:hover {
    color: var(--text-color-6);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--main) 34%, transparent);
}

.aboutBtnGhost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px;
    border-radius: var(--br-1-5);
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--cxbcolor);
    color: var(--text-color2);
    font-weight: 600;
    font-size: .875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.aboutBtnGhost:hover {
    color: var(--text-color2);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--cxbcolor-3);
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

/* ---- Hero ---- */
.aboutHero {
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 110px 20px 90px;
}

.aboutHeroDots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 26px 26px;
    z-index: 0;
    pointer-events: none;
}

.aboutHeroGlow {
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    filter: blur(130px);
    z-index: 0;
    pointer-events: none;
}

.aboutHeroGlowLeft {
    background: radial-gradient(circle, hsla(44, 95%, 58%, 0.12) 0%, transparent 70%);
    top: -120px;
    left: -180px;
}

.aboutHeroGlowRight {
    background: radial-gradient(circle, hsla(44, 95%, 54%, 0.07) 0%, transparent 70%);
    bottom: -120px;
    right: -180px;
}

.aboutHeroFade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 130px;
    background: linear-gradient(to bottom, transparent, var(--cxbgmain));
    z-index: 1;
    pointer-events: none;
}

.aboutHeroInner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
    width: 100%;
}

.aboutBadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid hsla(44, 95%, 58%, 0.35);
    background: hsla(44, 95%, 58%, 0.07);
    color: var(--main);
    font-size: var(--fs-0);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 26px;
}

.aboutHeroTitle {
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.17;
    color: var(--text-color2);
    margin-bottom: 22px;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 32px rgba(0, 0, 0, 0.5);
}

.aboutHeroDesc {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-color-3);
    max-width: 600px;
    margin: 0 auto 38px;
}

.aboutHeroCta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ---- Brand ---- */
.aboutBrand {
    padding: 90px 0;
    background-color: var(--cxbgmain);
}

.aboutBrandGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}

.aboutSectionLabel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-0);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--main);
    margin-bottom: 14px;
}

.aboutSectionTitle {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    color: var(--text-color2);
    margin-bottom: 22px;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.aboutBrandBody p {
    font-size: 0.94rem;
    line-height: 1.8;
    color: var(--text-color-3);
    margin-bottom: 14px;
}

.aboutBrandBody p:last-child {
    margin-bottom: 0;
}

.aboutFeatGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.aboutFeatCard {
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-3);
    padding: 22px 18px;
    transition: border-color .22s, transform .22s, background .22s;
    cursor: default;
}

.aboutFeatCard:hover {
    background: var(--cxbgmainthi);
    transform: translateY(-3px);
}

.aboutFeatIcon {
    width: 42px;
    height: 42px;
    border-radius: var(--br-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin-bottom: 12px;
}

.aboutFeatIconYellow {
    background: hsla(44, 95%, 58%, 0.12);
    color: var(--main);
    border: 1px solid hsla(44, 95%, 58%, 0.3);
}

.aboutFeatIconGreen {
    background: hsla(142, 71%, 45%, 0.12);
    color: var(--cxcolor-5);
    border: 1px solid hsla(142, 71%, 45%, 0.3);
}

.aboutFeatIconPurple {
    background: hsla(282, 100%, 41%, 0.12);
    color: var(--cxcolor-14);
    border: 1px solid hsla(282, 100%, 41%, 0.3);
}

.aboutFeatIconBlue {
    background: hsla(206, 100%, 46%, 0.12);
    color: var(--cxcolor-9);
    border: 1px solid hsla(206, 100%, 46%, 0.3);
}

.aboutFeatCard:hover .aboutFeatIconYellow {
    border-color: hsla(44, 95%, 58%, 0.5);
}

.aboutFeatCard:hover .aboutFeatIconGreen {
    border-color: hsla(142, 71%, 45%, 0.5);
}

.aboutFeatCard:hover .aboutFeatIconPurple {
    border-color: hsla(282, 100%, 41%, 0.5);
}

.aboutFeatCard:hover .aboutFeatIconBlue {
    border-color: hsla(206, 100%, 46%, 0.5);
}

.aboutFeatTitle {
    font-size: var(--fs-1);
    font-weight: 700;
    color: var(--text-color2);
    margin-bottom: 6px;
}

.aboutFeatDesc {
    font-size: var(--fs-0);
    color: var(--text-color-3);
    line-height: 1.6;
    margin: 0;
}

/* ---- Section head (paylaşılan) ---- */
.aboutSectionHead {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 56px;
}

.aboutSectionTitleCenter {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 800;
    color: var(--text-color2);
    margin-bottom: 14px;
    line-height: 1.22;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.aboutSectionSubtitle {
    font-size: 0.93rem;
    line-height: 1.75;
    color: var(--text-color-3);
    margin: 0;
}

/* ---- Why Us ---- */
.aboutWhy {
    padding: 90px 0;
    background-color: var(--cxbgmainsec);
    border-top: 2px solid var(--cxbcolor);
    border-bottom: 2px solid var(--cxbcolor);
}

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

.aboutWhyC1 {
    --card-accent: var(--main);
    --card-icon-bg: hsla(44, 95%, 58%, 0.1);
    --card-icon-border: hsla(44, 95%, 58%, 0.28);
}

.aboutWhyC2 {
    --card-accent: var(--mainfif);
    --card-icon-bg: hsla(155, 85%, 55%, 0.1);
    --card-icon-border: hsla(155, 85%, 55%, 0.28);
}

.aboutWhyC3 {
    --card-accent: var(--cxcolor-9);
    --card-icon-bg: hsla(206, 100%, 46%, 0.1);
    --card-icon-border: hsla(206, 100%, 46%, 0.28);
}

.aboutWhyC4 {
    --card-accent: var(--cxcolor-14);
    --card-icon-bg: hsla(282, 100%, 41%, 0.1);
    --card-icon-border: hsla(282, 100%, 41%, 0.28);
}

.aboutWhyC5 {
    --card-accent: var(--cxcolor-5);
    --card-icon-bg: hsla(142, 71%, 45%, 0.1);
    --card-icon-border: hsla(142, 71%, 45%, 0.28);
}

.aboutWhyC6 {
    --card-accent: var(--mainsix);
    --card-icon-bg: hsla(70, 90%, 55%, 0.1);
    --card-icon-border: hsla(70, 90%, 55%, 0.28);
}

.aboutWhyCard {
    position: relative;
    background: var(--cxbgmainthi);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-3);
    padding: 24px 20px;
    overflow: hidden;
    transition: border-color .25s, transform .25s, box-shadow .25s, background .25s;
    cursor: default;
}

.aboutWhyCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--card-accent);
    opacity: 0;
    transition: opacity .25s;
    border-radius: var(--br-1-3) var(--br-1-3) 0 0;
}

.aboutWhyCard:hover {
    border-color: color-mix(in srgb, var(--card-accent) 35%, var(--cxbcolor));
    background: var(--cxbgmainfou);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px -8px rgba(0, 0, 0, 0.5);
}

.aboutWhyCard:hover::before {
    opacity: 1;
}

.aboutWhyCardNum {
    display: block;
    font-size: var(--fs-0);
    font-weight: 700;
    color: color-mix(in srgb, var(--card-accent) 55%, transparent);
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}

.aboutWhyIcon {
    width: 46px;
    height: 46px;
    border-radius: var(--br-1);
    background: var(--card-icon-bg);
    color: var(--card-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 16px;
    border: 1px solid var(--card-icon-border);
    transition: background .25s, box-shadow .25s, border-color .25s;
}

.aboutWhyCard:hover .aboutWhyIcon {
    background: color-mix(in srgb, var(--card-accent) 18%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--card-accent) 22%, transparent);
    border-color: color-mix(in srgb, var(--card-accent) 50%, transparent);
}

.aboutWhyCardTitle {
    font-size: var(--fs-2);
    font-weight: 700;
    color: var(--text-color2);
    margin-bottom: 9px;
    line-height: 1.3;
}

.aboutWhyCardDesc {
    font-size: var(--fs-1);
    color: var(--text-color-3);
    line-height: 1.7;
    margin: 0;
}

/* ---- ForAll: Alıcı / Satıcı ---- */
.aboutForAll {
    padding: 90px 0;
    background-color: var(--cxbgmain);
}

.aboutForAllGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.aboutForAllCard {
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-3);
    padding: 32px 28px;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    cursor: default;
}

.aboutForAllCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}

.aboutForAllBuyer:hover {
    border-color: color-mix(in srgb, var(--cxcolor-9) 40%, var(--cxbcolor));
}

.aboutForAllSeller:hover {
    border-color: color-mix(in srgb, var(--main) 40%, var(--cxbcolor));
}

.aboutForAllHeader {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--cxbcolor);
}

.aboutForAllIcon {
    width: 48px;
    height: 48px;
    border-radius: var(--br-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.aboutForAllBuyer .aboutForAllIcon {
    background: hsla(206, 100%, 46%, 0.1);
    color: var(--cxcolor-9);
    border: 1px solid hsla(206, 100%, 46%, 0.3);
}

.aboutForAllSeller .aboutForAllIcon {
    background: hsla(44, 95%, 58%, 0.1);
    color: var(--main);
    border: 1px solid hsla(44, 95%, 58%, 0.3);
}

.aboutForAllKicker {
    display: block;
    font-size: var(--fs-0);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.aboutForAllBuyer .aboutForAllKicker {
    color: var(--cxcolor-9);
}

.aboutForAllSeller .aboutForAllKicker {
    color: var(--main);
}

.aboutForAllTitle {
    font-size: var(--fs-3);
    font-weight: 800;
    color: var(--text-color2);
    margin: 0;
    line-height: 1.2;
}

.aboutForAllList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aboutForAllItem {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--fs-1);
    color: var(--text-color-3);
    line-height: 1.55;
}

.aboutForAllItem i {
    font-size: 13px;
    margin-top: 2px;
    flex-shrink: 0;
}

.aboutForAllBuyer .aboutForAllItem i {
    color: var(--cxcolor-9);
}

.aboutForAllSeller .aboutForAllItem i {
    color: var(--main);
}

/* ---- Values ---- */
.aboutValues {
    padding: 80px 0;
    background-color: var(--cxbgmainsec);
    border-top: 2px solid var(--cxbcolor);
}

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

.aboutValCard {
    background: var(--cxbgmainthi);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-3);
    padding: 28px 22px;
    text-align: center;
    transition: border-color .22s, transform .22s, box-shadow .22s, background .22s;
    cursor: default;
}

.aboutValCard:hover {
    background: var(--cxbgmainfou);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.aboutValYellow:hover {
    border-color: color-mix(in srgb, var(--main) 40%, var(--cxbcolor));
}

.aboutValPurple:hover {
    border-color: color-mix(in srgb, var(--cxcolor-14) 40%, var(--cxbcolor));
}

.aboutValGreen:hover {
    border-color: color-mix(in srgb, var(--cxcolor-5) 40%, var(--cxbcolor));
}

.aboutValIcon {
    width: 50px;
    height: 50px;
    border-radius: var(--br-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 16px;
    transition: box-shadow .22s, border-color .22s;
}

.aboutValYellow .aboutValIcon {
    background: hsla(44, 95%, 58%, 0.1);
    color: var(--main);
    border: 1px solid hsla(44, 95%, 58%, 0.3);
}

.aboutValPurple .aboutValIcon {
    background: hsla(282, 100%, 41%, 0.1);
    color: var(--cxcolor-14);
    border: 1px solid hsla(282, 100%, 41%, 0.3);
}

.aboutValGreen .aboutValIcon {
    background: hsla(142, 71%, 45%, 0.1);
    color: var(--cxcolor-5);
    border: 1px solid hsla(142, 71%, 45%, 0.3);
}

.aboutValYellow:hover .aboutValIcon {
    box-shadow: 0 0 16px hsla(44, 95%, 58%, 0.25);
    border-color: hsla(44, 95%, 58%, 0.55);
}

.aboutValPurple:hover .aboutValIcon {
    box-shadow: 0 0 16px hsla(282, 100%, 41%, 0.22);
    border-color: hsla(282, 100%, 41%, 0.5);
}

.aboutValGreen:hover .aboutValIcon {
    box-shadow: 0 0 16px hsla(142, 71%, 45%, 0.22);
    border-color: hsla(142, 71%, 45%, 0.5);
}

.aboutValTitle {
    font-size: var(--fs-2);
    font-weight: 700;
    color: var(--text-color2);
    margin-bottom: 10px;
}

.aboutValText {
    font-size: 0.88rem;
    color: var(--text-color-3);
    line-height: 1.7;
    margin: 0;
}

/* ---- Join ---- */
.aboutJoin {
    position: relative;
    padding: 100px 20px;
    background-color: var(--cxbgmain);
    overflow: hidden;
    text-align: center;
    border-top: 2px solid var(--cxbcolor);
}

.aboutJoinDots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}

.aboutJoinGlow {
    position: absolute;
    width: 600px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(ellipse, hsla(44, 95%, 58%, 0.08) 0%, transparent 70%);
    filter: blur(80px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.aboutJoinInner {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.aboutJoinIcon {
    width: 68px;
    height: 68px;
    border-radius: var(--br-2);
    background: hsla(44, 95%, 58%, 0.1);
    border: 1px solid hsla(44, 95%, 58%, 0.35);
    color: var(--main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 0 28px hsla(44, 95%, 58%, 0.12);
}

.aboutJoinTitle {
    font-size: clamp(1.5rem, 3.5vw, 2.1rem);
    font-weight: 800;
    color: var(--text-color2);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.aboutJoinDesc {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-color-3);
    margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .aboutBrandGrid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .aboutWhyGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .aboutValuesGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .aboutForAllGrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .aboutHero {
        padding: 90px 20px 70px;
        min-height: auto;
    }

    .aboutHeroTitle {
        font-size: 2rem;
    }

    .aboutBrand,
    .aboutWhy,
    .aboutForAll,
    .aboutValues {
        padding: 60px 0;
    }

    .aboutJoin {
        padding: 70px 20px;
    }
}

@media (max-width: 600px) {
    .aboutWhyGrid {
        grid-template-columns: 1fr;
    }

    .aboutValuesGrid {
        grid-template-columns: 1fr;
    }

    .aboutFeatGrid {
        grid-template-columns: 1fr;
    }

    .aboutSectionHead {
        margin-bottom: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .aboutFeatCard,
    .aboutWhyCard,
    .aboutValCard,
    .aboutForAllCard,
    .aboutBtnPrimary,
    .aboutBtnGhost {
        transition: none;
    }
}

/* ---- Stats ikonlu bar ---- */
.aboutStats {
    padding: 32px 0;
    background: var(--cxbgmainsec);
    border-top: 2px solid var(--cxbcolor);
    border-bottom: 2px solid var(--cxbcolor);
}

.aboutStatsGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    align-items: start;
}

.aboutStatsItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 6px 16px;
    position: relative;
}

.aboutStatsItem:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: var(--cxbcolor);
}

.aboutStatsCircle {
    width: 46px;
    height: 46px;
    border-radius: var(--br-1-5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.aboutStatsItem:hover .aboutStatsCircle {
    transform: translateY(-3px);
}

.aboutStatsCircleBlue {
    background: hsl(218, 30%, 16%);
    color: hsl(213, 80%, 65%);
    box-shadow: 0 0 0 1px hsl(218, 30%, 22%);
}

.aboutStatsItem:hover .aboutStatsCircleBlue {
    box-shadow: 0 6px 20px hsla(213, 80%, 55%, 0.18), 0 0 0 1px hsl(218, 30%, 28%);
}

.aboutStatsCircleGreen {
    background: hsl(155, 30%, 14%);
    color: hsl(155, 65%, 52%);
    box-shadow: 0 0 0 1px hsl(155, 30%, 20%);
}

.aboutStatsItem:hover .aboutStatsCircleGreen {
    box-shadow: 0 6px 20px hsla(155, 65%, 45%, 0.18), 0 0 0 1px hsl(155, 30%, 26%);
}

.aboutStatsCirclePurple {
    background: hsl(270, 28%, 16%);
    color: hsl(270, 55%, 68%);
    box-shadow: 0 0 0 1px hsl(270, 28%, 22%);
}

.aboutStatsItem:hover .aboutStatsCirclePurple {
    box-shadow: 0 6px 20px hsla(270, 55%, 55%, 0.18), 0 0 0 1px hsl(270, 28%, 28%);
}

.aboutStatsCircleAmber {
    background: hsl(33, 38%, 14%);
    color: var(--main);
    box-shadow: 0 0 0 1px hsl(33, 38%, 20%);
}

.aboutStatsItem:hover .aboutStatsCircleAmber {
    box-shadow: 0 6px 20px hsla(44, 95%, 58%, 0.18), 0 0 0 1px hsl(33, 38%, 26%);
}

.aboutStatsVal {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-color2);
    line-height: 1;
    display: block;
}

.aboutStatsLbl {
    font-size: var(--fs-0);
    color: var(--text-color-3);
    line-height: 1.3;
    display: block;
    margin-top: -2px;
}

@media (max-width: 768px) {
    .aboutStatsGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .aboutStatsItem:not(:last-child)::after {
        display: none;
    }

    .aboutStatsItem:nth-child(1),
    .aboutStatsItem:nth-child(2) {
        border-bottom: 1px solid var(--cxbcolor);
        padding-bottom: 24px;
    }
}

@media (max-width: 400px) {
    .aboutStatsGrid {
        grid-template-columns: 1fr;
    }
}


/* =====================================================





/* =====================================================
   COMPLAINT PAGE v7  (prefix: cmp)
   Ana renk: var(--mainsix) = hsl(70,90%,55%)
   ===================================================== */

.cmpPage {
    background-color: var(--cxbgmain);
}

.cmpBtnPrimary,
.cmpBtnGhost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px;
    border-radius: var(--br-1-5);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}

.cmpBtnPrimary {
    background: linear-gradient(135deg, var(--main), var(--mainfou));
    color: var(--text-color-6);
    border: 2px solid transparent;
    box-shadow: 0 4px 22px color-mix(in srgb, var(--main) 38%, transparent);
}

.cmpBtnPrimary:hover {
    color: var(--text-color-6);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--main) 42%, transparent);
}

.cmpBtnGhost {
    background: rgba(255, 255, 255, .04);
    border: 2px solid var(--cxbcolor);
    color: var(--text-color2);
}

.cmpBtnGhost:hover {
    color: var(--text-color2);
    background: rgba(255, 255, 255, .08);
    border-color: var(--cxbcolor-3);
    transform: translateY(-2px);
}

/* --- HERO --- */
.cmpHero {
    position: relative;
    min-height: 58vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 110px 20px 90px;
    text-align: center;
}

.cmpHeroDots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 28px 28px;
    z-index: 0;
    pointer-events: none;
}

.cmpHeroGlow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(140px);
    z-index: 0;
    pointer-events: none;
}

.cmpHeroGlowBlue {
    background: radial-gradient(circle, color-mix(in srgb, var(--mainsix) 18%, transparent) 0%, transparent 70%);
    top: -140px;
    left: -160px;
}

.cmpHeroGlowGold {
    background: radial-gradient(circle, color-mix(in srgb, var(--main) 10%, transparent) 0%, transparent 70%);
    bottom: -140px;
    right: -160px;
}

.cmpHeroFade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent, var(--cxbgmain));
    z-index: 1;
    pointer-events: none;
}

.cmpHeroInner {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto;
}

.cmpHeroBadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mainsix) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mainsix) 30%, transparent);
    color: var(--mainsix);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 26px;
}

.cmpHeroTitle {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: var(--text-color2);
    line-height: 1.15;
    margin: 0 0 20px;
    letter-spacing: -.02em;
}

.cmpHeroGradient {
    background: linear-gradient(135deg, var(--mainsix) 0%, color-mix(in srgb, var(--mainsix) 70%, white) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--mainsix) 40%, transparent));
}

.cmpHeroDesc {
    font-size: 15px;
    color: var(--text-color-3);
    line-height: 1.75;
    margin: 0 0 36px;
}

.cmpHeroCta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* --- FEATURE CARDS --- */
.cmpFeatures {
    padding: 0 0 80px;
}

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

.cmpFeatCard {
    position: relative;
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-3);
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color .22s, transform .22s, background .22s;
    cursor: default;
}

.cmpFeatCard:hover {
    background: var(--cxbgmainthi);
    border-color: color-mix(in srgb, var(--card-accent) 32%, var(--cxbcolor));
}

.cmpFeatIconBox {
    width: 46px;
    height: 46px;
    border-radius: var(--br-1);
    background: color-mix(in srgb, var(--card-accent) 12%, transparent);
    color: var(--card-accent);
    border: 1px solid color-mix(in srgb, var(--card-accent) 28%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 14px;
    flex-shrink: 0;
    transition: background .22s, border-color .22s;
}

.cmpFeatCard:hover .cmpFeatIconBox {
    background: color-mix(in srgb, var(--card-accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--card-accent) 50%, transparent);
}

.cmpFeatTitle {
    font-size: var(--fs-2);
    font-weight: 700;
    color: var(--text-color2);
    margin: 0 0 8px;
    line-height: 1.3;
}

.cmpFeatDesc {
    font-size: var(--fs-1);
    color: var(--text-color-3);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.cmpFeatAction {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: var(--br-1);
    background: var(--cxbgmainfiv-thi);
    border: 1px solid var(--cxbcolor);
    color: var(--text-color2);
    font-size: var(--fs-1);
    font-weight: 600;
    text-decoration: none;
    margin-top: 16px;
    transition: background .2s, border-color .2s;
    cursor: pointer;
}

.cmpFeatAction:hover {
    background: var(--cxbgmainfiv);
    border-color: var(--cxbcolor-3);
    color: var(--text-color2);
}

.cmpFeatArrow {
    font-size: 10px;
    color: var(--text-color-3);
}

/* --- STEPPER (Process) --- */
.cmpProcess {
    padding: 0 0 80px;
}

.cmpProcHead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.cmpProcHeadLeft {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cmpProcLabel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mainsix) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mainsix) 25%, transparent);
    color: var(--mainsix);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    width: fit-content;
}

.cmpProcTitle {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 800;
    color: var(--text-color2);
    margin: 0;
    line-height: 1.2;
}

.cmpProcSubtitle {
    font-size: var(--fs-1);
    color: var(--text-color-3);
    line-height: 1.6;
    margin: 0;
    max-width: 300px;
    text-align: right;
    align-self: flex-end;
}

/* Stepper grid — gap:0 bırakıyoruz, kartlar padding-right ile boşluk alıyor */
.cmpStepFlow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0;
    row-gap: 0;
}

.cmpStepCol {
    display: flex;
    flex-direction: column;
}

/* Son kolon hariç sağdan boşluk */
.cmpStepCol:not(:last-child) {
    padding-right: 14px;
}

/* Üst bölüm: numara dairesi + bağlantı çizgisi */
.cmpStepTop {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.cmpStepNum {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mainsix) 12%, transparent);
    border: 2px solid color-mix(in srgb, var(--mainsix) 42%, transparent);
    color: var(--mainsix);
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    /* Glow halkası */
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--mainsix) 7%, transparent);
    z-index: 1;
}

.cmpStepNumFinal {
    border-color: color-mix(in srgb, var(--cxcolor-5) 42%, transparent);
    background: color-mix(in srgb, var(--cxcolor-5) 12%, transparent);
    color: var(--cxcolor-5);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--cxcolor-5) 7%, transparent);
}

/* Bağlantı çizgisi: circle'ın sağından sütun sonuna kadar */
.cmpStepLine {
    flex: 1;
    height: 2px;
    margin-left: 8px;
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--mainsix) 38%, transparent) 0%,
            color-mix(in srgb, var(--mainsix) 10%, transparent) 100%);
}

/* Kart */
.cmpStepCard {
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-3);
    padding: 20px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .22s, background .22s, transform .22s;
    cursor: default;
}

.cmpStepCard:hover {
    background: var(--cxbgmainthi);
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--mainsix) 30%, var(--cxbcolor));
}

.cmpStepIcon {
    font-size: 22px;
    color: var(--mainsix);
    display: block;
}

.cmpStepIconFinal {
    color: var(--cxcolor-5);
}

.cmpStepTitle {
    font-size: var(--fs-1);
    font-weight: 700;
    color: var(--text-color2);
    margin: 0;
    line-height: 1.3;
}

.cmpStepDesc {
    font-size: var(--fs-0);
    color: var(--text-color-3);
    line-height: 1.65;
    margin: 0;
}

/* --- TAAHHÜTLER --- */
.cmpPledge {
    padding: 0 0 80px;
}

.cmpPledgeWrap {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 56px;
    align-items: center;
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-2);
    padding: 48px 44px;
}

.cmpPledgeTitle {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    color: var(--text-color2);
    line-height: 1.15;
    margin: 12px 0 14px;
    letter-spacing: -.02em;
}

.cmpPledgeEm {
    font-style: italic;
    background: linear-gradient(135deg, var(--mainsix), var(--mainsix-sec));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cmpPledgeSub {
    font-size: var(--fs-1);
    color: var(--text-color-3);
    line-height: 1.7;
    margin: 0;
}

.cmpPledgeItems {
    display: flex;
    flex-direction: column;
}

.cmpPledgeItem {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid var(--cxbcolor);
}

.cmpPledgeItem:first-child {
    border-top: 1px solid var(--cxbcolor);
}

.cmpPledgeItemIcon {
    width: 38px;
    height: 38px;
    border-radius: var(--br-1);
    background: var(--pi-color);
    color: var(--pi-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--pi-accent) 22%, transparent);
    transition: box-shadow .22s;
}

.cmpPledgeItem:hover .cmpPledgeItemIcon {
    box-shadow: 0 0 12px color-mix(in srgb, var(--pi-accent) 20%, transparent);
}

.cmpPledgeItemTitle {
    display: block;
    font-size: var(--fs-1);
    font-weight: 700;
    color: var(--text-color2);
    margin-bottom: 2px;
}

.cmpPledgeItemDesc {
    display: block;
    font-size: var(--fs-0);
    color: var(--text-color-3);
    line-height: 1.6;
}

/* --- CLOSE --- */
.cmpClose {
    padding: 0 0 100px;
}

.cmpCloseInner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.cmpCloseEyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-color-3);
    margin: 0;
}

.cmpCloseTitle {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 900;
    color: var(--text-color2);
    margin: 0;
    letter-spacing: -.025em;
    line-height: 1.1;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .cmpPledgeWrap {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 36px 28px;
    }

    .cmpProcSubtitle {
        text-align: left;
        max-width: 100%;
    }

    .cmpProcHead {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 900px) {
    .cmpFeatGrid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
    }

    .cmpStepFlow {
        grid-template-columns: repeat(2, 1fr);
    }

    .cmpStepCol:nth-child(2) {
        padding-right: 0;
    }

    .cmpStepCol:nth-child(3) {
        padding-right: 14px;
    }

    /* 2. satır için bağlantı çizgisini gizle */
    .cmpStepCol:nth-child(2) .cmpStepLine,
    .cmpStepCol:nth-child(4) .cmpStepLine {
        display: none;
    }
}

@media (max-width: 640px) {
    .cmpHeroTitle {
        font-size: 2rem;
    }

    .cmpHeroCta {
        flex-direction: column;
        align-items: stretch;
    }

    .cmpBtnPrimary,
    .cmpBtnGhost {
        justify-content: center;
    }

    .cmpStepFlow {
        grid-template-columns: 1fr;
    }

    .cmpStepCol:not(:last-child) {
        padding-right: 0;
    }

    .cmpStepLine {
        display: none;
    }

    .cmpPledgeWrap {
        padding: 24px 18px;
    }
}

@media (max-width: 400px) {
    .cmpHero {
        padding: 90px 16px 70px;
    }
}

/* --- cmp ek kurallar --- */

/* Hero accent butonu — mainsix */
.cmpBtnAccent {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px;
    border-radius: var(--br-1-5);
    background: linear-gradient(135deg, var(--mainsix), var(--mainsix-sec));
    color: var(--text-color-6);
    border: 2px solid transparent;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 22px color-mix(in srgb, var(--mainsix) 35%, transparent);
    transition: transform .2s, box-shadow .2s;
}

.cmpBtnAccent:hover {
    color: var(--text-color-6);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--mainsix) 42%, transparent);
}

/* Card 2 — checklist */
.cmpFeatList {
    list-style: none;
    padding: 0;
    margin: 0 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.cmpFeatList li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-1);
    color: var(--text-color-3);
    line-height: 1.4;
}

.cmpFeatList li i {
    font-size: 11px;
    color: var(--card-accent);
    flex-shrink: 0;
}

/* Card 3 — stats */
.cmpFeatStats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    flex: 1;
}

.cmpFeatStat {
    background: var(--cxbgmainfou);
    border: 1px solid var(--cxbcolor);
    border-radius: var(--br-1);
    padding: 16px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.cmpFeatStat strong {
    font-size: var(--fs-4);
    font-weight: 800;
    color: var(--card-accent);
    line-height: 1;
}

.cmpFeatStat span {
    font-size: 10px;
    color: var(--text-color-3);
    line-height: 1.3;
}

/* Join kapanış — aboutJoin renklerini mainsix'e uyarla */
.cmpJoin {
    border-top: 2px solid var(--cxbcolor);
}

.cmpJoinGlow {
    position: absolute;
    width: 600px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--mainsix) 8%, transparent) 0%, transparent 70%);
    filter: blur(80px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cmpJoinIcon {
    width: 68px;
    height: 68px;
    border-radius: var(--br-2);
    background: color-mix(in srgb, var(--mainsix) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mainsix) 35%, transparent);
    color: var(--mainsix);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 0 28px color-mix(in srgb, var(--mainsix) 12%, transparent);
}

/* Güvenli Alışveriş card — stat card özel */
.cmpFeatCardStats {
    overflow: hidden;
}

.cmpFeatCardStats .cmpFeatStats {
    flex: 1;
    align-content: stretch;
}

.cmpFeatCardStats .cmpFeatStat {
    min-height: 72px;
}

/* --- Bento grid layout --- */
.cmpFeatBento {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 14px;
    align-items: stretch;
}

.cmpFeatSide {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Sol büyük kart */
.cmpFeatMain {
    position: relative;
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-3);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color .22s, background .22s;
    cursor: default;
}

.cmpFeatMain:hover {
    background: var(--cxbgmainthi);
    border-color: color-mix(in srgb, var(--card-accent) 32%, var(--cxbcolor));
}

/* Büyük dekoratif arka plan ikonu */
.cmpFeatMainBgIcon {
    position: absolute;
    bottom: 60px;
    right: -16px;
    font-size: 180px;
    color: var(--card-accent);
    opacity: 0.04;
    pointer-events: none;
    line-height: 1;
    transition: opacity .3s, transform .3s;
}

.cmpFeatMain:hover .cmpFeatMainBgIcon {
    opacity: 0.07;
    transform: rotate(-6deg) scale(1.04);
}

/* Büyük kartta desc daha geniş */
.cmpFeatMain .cmpFeatDesc {
    flex: 1;
}

/* Responsive */
@media (max-width: 900px) {
    .cmpFeatBento {
        grid-template-columns: 1fr;
    }

    .cmpFeatMain .cmpFeatMainBgIcon {
        font-size: 120px;
    }
}

/* --- Feature Row List --- */
.cmpFeatRows {
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-3);
    overflow: hidden;
}

.cmpFeatRow {
    display: grid;
    grid-template-columns: 36px 1fr 52px;
    align-items: center;
    gap: 28px;
    padding: 28px 32px;
    border-bottom: 1px solid var(--cxbcolor);
    transition: background .2s;
}

.cmpFeatRow:last-child {
    border-bottom: none;
}

.cmpFeatRow:hover {
    background: var(--cxbgmainthi);
}

.cmpFeatRowNum {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    color: color-mix(in srgb, var(--row-accent) 45%, transparent);
    align-self: flex-start;
    padding-top: 4px;
    line-height: 1;
}

.cmpFeatRowBody {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cmpFeatRowTitle {
    font-size: var(--fs-3);
    font-weight: 700;
    color: var(--text-color2);
    margin: 0;
    line-height: 1.2;
}

.cmpFeatRowDesc {
    font-size: var(--fs-1);
    color: var(--text-color-3);
    line-height: 1.65;
    margin: 0;
}

.cmpFeatRowMeta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--fs-1);
    color: var(--text-color-3);
}

.cmpFeatRowDot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cxbcolor-3);
    flex-shrink: 0;
}

.cmpFeatRowLink {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-1);
    font-weight: 600;
    color: var(--row-accent);
    text-decoration: none;
    width: fit-content;
    transition: gap .2s;
}

.cmpFeatRowLink:hover {
    gap: 12px;
}

.cmpFeatRowIcon {
    width: 52px;
    height: 52px;
    border-radius: var(--br-1);
    background: color-mix(in srgb, var(--row-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--row-accent) 25%, transparent);
    color: var(--row-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    justify-self: end;
    transition: background .2s, border-color .2s;
}

.cmpFeatRow:hover .cmpFeatRowIcon {
    background: color-mix(in srgb, var(--row-accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--row-accent) 40%, transparent);
}

@media (max-width: 640px) {
    .cmpFeatRow {
        grid-template-columns: 28px 1fr;
        gap: 16px;
        padding: 22px 20px;
    }

    .cmpFeatRowIcon {
        display: none;
    }
}

/* --- Feature Strip --- */
.cmpStrip {
    display: flex;
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-3);
    overflow: hidden;
}

.cmpStripItem {
    flex: 1;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background .2s;
    cursor: default;
}

.cmpStripItem:hover {
    background: var(--cxbgmainthi);
}

.cmpStripDiv {
    width: 1px;
    background: var(--cxbcolor);
    flex-shrink: 0;
    margin: 0;
}

.cmpStripHead {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cmpStripIcon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--sa) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--sa) 25%, transparent);
    color: var(--sa);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: background .2s, border-color .2s;
}

.cmpStripItem:hover .cmpStripIcon {
    background: color-mix(in srgb, var(--sa) 18%, transparent);
    border-color: color-mix(in srgb, var(--sa) 40%, transparent);
}

.cmpStripTitle {
    font-size: var(--fs-2);
    font-weight: 700;
    color: var(--text-color2);
    margin: 0;
    line-height: 1.2;
}

.cmpStripDesc {
    font-size: var(--fs-0);
    color: var(--text-color-3);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.cmpStripMeta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.cmpStripMeta span {
    font-size: var(--fs-0);
    color: var(--text-color-3);
}

.cmpStripDot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cxbcolor-3);
    flex-shrink: 0;
}

.cmpStripLink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-0);
    font-weight: 600;
    color: var(--sa);
    text-decoration: none;
    width: fit-content;
    transition: gap .2s;
}

.cmpStripLink:hover {
    gap: 10px;
}

@media (max-width: 768px) {
    .cmpStrip {
        flex-direction: column;
    }

    .cmpStripDiv {
        width: 100%;
        height: 1px;
    }
}

/* ── Stores Page (stores.blade.php) ── */
.slCard {
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    transition: transform .22s, box-shadow .22s, border-color .22s;
    position: relative;
}

.slCard:hover {
    border-color: var(--cxbcolor-3);
    text-decoration: none;
}

/* 🥇 Altın */
.slCardRank1 {
    border-color: rgba(250, 204, 21, .6);
}

.slCardRank1:hover {
    border-color: rgba(250, 204, 21, .9);
    box-shadow: 0 20px 56px rgba(250, 204, 21, .15);
}

/* 🥈 Gümüş */
.slCardRank2 {
    border-color: rgba(203, 213, 225, .6);
}

.slCardRank2:hover {
    border-color: rgba(203, 213, 225, .9);
    box-shadow: 0 20px 56px rgba(203, 213, 225, .12);
}

/* 🥉 Bronz */
.slCardRank3 {
    border-color: rgba(251, 146, 60, .55);
}

.slCardRank3:hover {
    border-color: rgba(251, 146, 60, .85);
    box-shadow: 0 20px 56px rgba(251, 146, 60, .12);
}

.slCardBanner {
    height: 110px;
    background: var(--cxbgmainthi) linear-gradient(135deg, var(--cxbgmainfou) 0%, var(--cxbgmainsec) 100%);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: visible;
    flex-shrink: 0;
}

/* Smooth fade from banner into card body */
.slCardBanner::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent 0%, var(--cxbgmainsec) 100%);
    pointer-events: none;
    z-index: 1;
}

.slCardFeatBadge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(245, 158, 11, .14);
    border: 1px solid rgba(245, 158, 11, .38);
    color: #fbbf24;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 4px 9px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    line-height: 1;
}

.slCardRankBadge {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    font-size: 22px;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .6));
    line-height: 1;
}

.slCardNumBadge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(0, 0, 0, .5);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #8892a4;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    line-height: 1;
}

.slCardBody {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.slCardTopRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -16px;
    margin-bottom: 10px;
    position: relative;
    z-index: 3;
}

.slCardAvatarWrap {
    position: relative;
}

.slCardAvatar {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    border: 3px solid var(--cxbgmainsec);
    object-fit: cover;
    background: var(--cxbgmainfou);
    display: block;
    position: relative;
    z-index: 1;
}

.slCardRank1 .slCardAvatar {
    border-color: rgba(250, 204, 21, .8);
}

.slCardRank2 .slCardAvatar {
    border-color: rgba(203, 213, 225, .8);
}

.slCardRank3 .slCardAvatar {
    border-color: rgba(251, 146, 60, .8);
}

.slCardAvatarFrame {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    max-width: none;
    max-height: none;
    object-fit: fill;
    pointer-events: none;
    z-index: 2;
    border-radius: 0;
}

.slCardRankBanner {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .3);
    pointer-events: none;
}

.slCardRankBanner--1 {
    background: rgba(250, 204, 21, .25);
    border: 1.5px solid rgba(250, 204, 21, .6);
    color: #fbbf24;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}

.slCardRankBanner--2 {
    background: rgba(203, 213, 225, .18);
    border: 1.5px solid rgba(203, 213, 225, .5);
    color: #e2e8f0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}

.slCardRankBanner--3 {
    background: rgba(251, 146, 60, .2);
    border: 1.5px solid rgba(251, 146, 60, .55);
    color: #fb923c;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}

.slCardRankBanner--4,
.slCardRankBanner--5 {
    background: rgba(0, 0, 0, .55);
    border: 1.5px solid rgba(255, 255, 255, .15);
    color: #cbd5e1;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}



/* Action butonlar — isim satırının altında yatay pill stil */
.slCardActions {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.slCardAct {
    flex: 1;
    height: 34px;
    border-radius: var(--br-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainfou);
    color: var(--text-color);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    padding: 0 8px;
    white-space: nowrap;
}

.slCardAct:hover {
    background: var(--cxbgmainthi);
    border-color: var(--cxbcolor-3);
    color: var(--text-color);
    text-decoration: none;
}

.slCardRatingGroup {
    display: flex;
    align-items: center;
    gap: 6px;
}

.slCardStatIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--br-1);
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainfou);
    color: #60a5fa;
    font-size: 12px;
    flex-shrink: 0;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.slCardStatIcon:hover {
    background: var(--cxbgmainthi);
    border-color: var(--cxbcolor-3);
    color: #93c5fd;
}

.slCardActPrimary {
    border-color: var(--cxbcolor-3);
    color: var(--cxcolor-11);
    flex: 2;
}

.slCardActPrimary:hover {
    background: var(--cxbgmainthi);
    color: var(--cxcolor-11);
}

/* İsim + badge yan yana */
.slCardNameRow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.slCardName {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
    text-decoration: none;
}

.slCardName:hover {
    color: var(--text-color-7);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Mağazayı İncele butonu */
.slCardCta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    border-radius: var(--br-1);
    border: 2px solid var(--cxbcolor);
    background: var(--cxbgmainfou);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s;
    margin-top: 12px;
    cursor: pointer;
}

.slCardCta:hover {
    background: var(--cxbgmainthi);
    border-color: var(--cxbcolor-3);
    color: var(--text-color);
    text-decoration: none;
}

.slGrid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 36px;
}

.slGrid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 32px;
}

.slGrid5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}

/* Stores page — 5-column grid */
.slStoresGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 32px;
}

@media (max-width: 1400px) {
    .slGrid5 {
        grid-template-columns: repeat(3, 1fr);
    }

    .slStoresGrid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1200px) {

    .slGrid4,
    .slStoresGrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {

    .slStoresGrid,
    .slGrid3,
    .slGrid4,
    .slGrid5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .slStoresGrid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .slCardAct {
        font-size: 10px;
        padding: 0 5px;
        gap: 4px;
        height: 30px;
    }
}

@media (max-width: 576px) {

    .slGrid3,
    .slGrid4,
    .slGrid5 {
        grid-template-columns: 1fr;
    }
}

.slSectionHead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.slSectionInfoBtn {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1.5px solid var(--cxbcolor);
    background: var(--cxbgmainfou);
    color: #60a5fa;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}

.slSectionInfoBtn:hover {
    background: var(--cxbgmainthi);
    border-color: #60a5fa;
}

.slSectionHeadIcon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.slSectionHeadIcon.icon-gold {
    background: rgba(245, 158, 11, .15);
}

.slSectionHeadIcon.icon-gold i {
    color: #fbbf24;
}

.slSectionHeadIcon.icon-purple {
    background: rgba(168, 85, 247, .15);
}

.slSectionHeadIcon.icon-purple i {
    color: #c084fc;
}

.slSectionHeadIcon.icon-green {
    background: rgba(34, 197, 94, .15);
}

.slSectionHeadIcon.icon-green i {
    color: #4ade80;
}

.slSectionHeadIcon.icon-blue {
    background: rgba(59, 130, 246, .15);
}

.slSectionHeadIcon.icon-blue i {
    color: #60a5fa;
}

.slSectionHeadText {
    font-size: 16px;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0;
}

.slSectionHeadSub {
    font-size: 12px;
    color: #8892a4;
    margin: 2px 0 0;
}

.slEmpty {
    text-align: center;
    padding: 80px 20px;
    color: #8892a4;
}

.slEmptyIcon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: .3;
}

.slEmptyTitle {
    font-size: 18px;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 8px;
}

.slPagination {
    list-style: none;
    padding: 0;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.slPagination .page-link {
    background: var(--cxbgmainsec);
    border: 1px solid var(--cxbcolor);
    color: var(--cxcolor-12);
    border-radius: 9px;
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 600;
    transition: all .2s;
    text-decoration: none;
    display: block;
}

.slPagination .page-link:hover {
    border-color: var(--cxcolor-15);
    color: var(--cxcolor-11);
    background: var(--cxbgmainfou);
    text-decoration: none;
}

.slPagination .page-item.active .page-link {
    background: var(--cxbgmainfou);
    border-color: var(--cxcolor-15);
    color: var(--cxcolor-11);
}

.slPagination .page-item.disabled .page-link {
    opacity: .4;
    pointer-events: none;
}

/* ============================================================
   CS2 Skins — Filter & Cards
   ============================================================ */

/* ── Top category nav bar ── */
.cs2Nav {
    display: flex;
    width: 100%;
    background: var(--cxbgmainthi);
    border: 1px solid var(--cxbcolor);
    border-radius: var(--br-1) var(--br-1) 0 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.cs2Nav::-webkit-scrollbar {
    display: none;
}

.cs2Nav-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px 4px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--cxbcolor);
    color: var(--text-color-3);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}

.cs2Nav-btn:last-child {
    border-right: none;
}

.cs2Nav-btn:hover {
    background: var(--cxbgmainfiv);
    color: var(--text-color);
}

.cs2Nav-btn.is-active {
    background: #fff;
    color: #0d0d18;
}

.cs2Nav-btn svg {
    fill: currentColor;
    flex-shrink: 0;
    opacity: .6;
}

.cs2Nav-btn.is-active svg {
    opacity: 1;
}

/* ── Sub-weapon bar ── */
.cs2SubWrap {
    display: flex;
    align-items: stretch;
    background: var(--cxbgmainsec);
    border: 1px solid var(--cxbcolor);
    border-top: none;
}

.cs2Sub {
    flex: 1;
    display: flex;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.cs2Sub::-webkit-scrollbar {
    display: none;
}

.cs2Sub-btn {
    flex: 0 0 auto;
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--cxbcolor);
    color: var(--text-color-3);
    font-size: var(--fs-0);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}

.cs2Sub-btn:last-child {
    border-right: none;
}

.cs2Sub-btn:hover {
    background: var(--cxbgmainfiv);
    color: var(--text-color);
}

.cs2Sub-btn.is-active {
    background: #fff;
    color: #0d0d18;
    border-radius: 6px;
    margin: 4px 2px;
    padding: 6px 16px;
}

.cs2Sub-scrollBtn {
    flex: 0 0 32px;
    background: var(--cxbgmainfou);
    border: none;
    color: var(--text-color-3);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
}

.cs2Sub-prevBtn {
    border-right: 1px solid var(--cxbcolor);
}

.cs2Sub-nextBtn {
    border-left: 1px solid var(--cxbcolor);
}

.cs2Sub-scrollBtn:hover {
    background: var(--cxbgmainfiv);
    color: var(--text-color);
}

/* ── Card container ── */
.cs2Cards {
    background: var(--cxbgmainsec);
    border: 1px solid var(--cxbcolor);
    border-top: none;
    border-radius: 0 0 var(--br-1) var(--br-1);
    padding: 14px 14px 14px;
}

.cs2Cards-wrap {
    position: relative;
}

.cs2Cards-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.cs2Cards-track::-webkit-scrollbar {
    display: none;
}

.cs2Cards-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 52px 16px;
    color: var(--text-color-3);
    font-size: var(--fs-0);
}

/* ── Card ── */
.cs2Card {
    flex: 0 0 190px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
}

.cs2Card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    text-decoration: none;
}

.cs2Card-name {
    font-weight: 700;
    font-size: 11px;
    color: #fff;
    text-align: center;
    padding: 11px 10px 4px;
    line-height: 1.3;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs2Card-imgWrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px 8px;
}

.cs2Card-img {
    width: 100%;
    max-height: 110px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.cs2Card-footer {
    padding: 6px 10px 10px;
    display: flex;
    align-items: center;
}

.cs2Card-camIcon {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}

.cs2Card-rarityBar {
    height: 3px;
    background: var(--rarity-color, #5a5a7a);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* ── Scroll butonları ── */
.cs2Cards-nextBtn,
.cs2Cards-prevBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    background: var(--cxbgmainfiv);
    border: 1px solid var(--cxbcolor-3);
    border-radius: var(--br-1);
    color: var(--text-color);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background .15s ease, box-shadow .15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.cs2Cards-nextBtn {
    right: -6px;
}

.cs2Cards-prevBtn {
    left: -6px;
}

.cs2Cards-nextBtn:hover,
.cs2Cards-prevBtn:hover {
    background: var(--cxbgmainfiv-sec);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

/* ── Ürün Detay: Benzer Ürünler Kartı ─────────────────────────────── */
.cxs-prod-card {
    display: flex;
    flex-direction: column;
    background: var(--cxbgmainsec);
    border: 1px solid var(--cxbcolor-2);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease;
    text-decoration: none;
    color: var(--text-color);
}

.cxs-prod-card:hover {
    border-color: var(--cxbcolor-3);
    transform: translateY(-2px);
}

.cxs-prod-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--cxbgmainfou);
}

.cxs-prod-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.cxs-prod-card:hover .cxs-prod-card-img img {
    transform: scale(1.04);
}

.cxs-prod-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
}

.cxs-prod-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.4;
}

.cxs-prod-card-category {
    font-size: 11px;
    color: var(--cxcolor-1);
}

.cxs-prod-card-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--mainsec);
    margin-top: 4px;
}

.cxs-prod-card-price .oldprice {
    font-size: 12px;
    color: var(--cxcolor-1);
    text-decoration: line-through;
    margin-right: 4px;
}

/* ── Ürün Detay: Değerlendirme (review item) ─────────────────────── */
.cxgame-review-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--cxbcolor-2);
}

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

.cxgame-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 12px;
}

.cxgame-review-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cxgame-review-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    background: var(--cxbgmainfou);
}

.cxgame-review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cxgame-review-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cxgame-review-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

.cxgame-review-date {
    font-size: 11px;
    color: var(--cxcolor-1);
}

.cxgame-review-stars {
    display: flex;
    gap: 2px;
}

.cxgame-review-stars i {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.2);
}

.cxgame-review-stars i.is-filled {
    color: var(--cxcolor-star);
}

.cxgame-review-body p {
    margin: 0;
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.6;
}

/* ================================================
   Blokeli Bakiye Sayfası
   ================================================ */

.cx-blocked-dashboard {
    padding: 0 0 30px 0;
}

.cx-blocked-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.cx-blocked-card {
    position: relative;
    background-color: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.cx-blocked-card::before {
    content: '';
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 4px;
    background: var(--cx-blocked-accent);
    border-radius: 2px 0 0 2px;
}



/* İkon kutusu */
.cx-blocked-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--br-1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cx-blocked-icon-bg);
    box-shadow: 0 0 0 4px var(--cx-blocked-icon-ring);
    position: relative;
    z-index: 1;
}

.cx-blocked-card--count .cx-blocked-card-icon {
    --cx-blocked-icon-bg: var(--cxopcolor-3);
    --cx-blocked-icon-ring: var(--cxopcolor-25);
}

.cx-blocked-card--amount .cx-blocked-card-icon {
    --cx-blocked-icon-bg: var(--cxopcolor-4);
    --cx-blocked-icon-ring: var(--cxopcolor-26);
}

.cx-blocked-card--release .cx-blocked-card-icon {
    --cx-blocked-icon-bg: var(--cxopcolor-5);
    --cx-blocked-icon-ring: var(--cxopcolor-23);
}

.cx-blocked-card-icon i {
    font-size: 20px;
    color: var(--main);
}

.cx-blocked-card--count .cx-blocked-card-icon i {
    color: var(--cxcolor-2);
}

.cx-blocked-card--amount .cx-blocked-card-icon i {
    color: var(--cxcolor-1);
}

.cx-blocked-card--release .cx-blocked-card-icon i {
    color: var(--cxcolor-5);
}

/* İçerik */
.cx-blocked-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    z-index: 1;
}

.cx-blocked-card-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--main);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cx-blocked-card-label {
    font-size: 12px;
    color: var(--text-color);
    line-height: 1.2;
}

.cx-blocked-card-sub {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--cxcolor-5);
}

.cx-blocked-card-sub i {
    font-size: 10px;
}

/* Arka plan dekoratif ikon */
.cx-blocked-card-bg-icon {
    position: absolute;
    right: -10px;
    bottom: -14px;
    font-size: 80px;
    color: var(--cx-blocked-accent);
    opacity: 0.04;
    pointer-events: none;
    line-height: 1;
}

/* Blokeli tutar rengi (tabloda) */
.cx-blocked-amount-cell {
    font-weight: 700;
    color: var(--cxcolor-2);
}

/* Badge: Blokeli */
.cx-badge-blocked {
    background: var(--cxopcolor-3);
    color: var(--cxcolor-2);
    gap: 4px;
}

.cx-badge-blocked i {
    font-size: 9px;
}

/* Countdown chip */
.cx-blocked-countdown {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--cxcolor-5);
    background: color-mix(in srgb, var(--cxcolor-5) 12%, transparent);
    padding: 4px 10px;
    border-radius: var(--br-1);
    border: 1px solid color-mix(in srgb, var(--cxcolor-5) 25%, transparent);
    white-space: nowrap;
}

.cx-blocked-countdown i {
    font-size: 10px;
}

/* Info Section */
.cx-blocked-info-section {
    margin-top: 28px;
}

.cx-blocked-info-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 8px;
}

.cx-blocked-info-body {
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.8;
}

/* ── Ödeme Takvimi (strip) ── */
.cx-strip-wrap {
    background: var(--cxbgmainsec);
    border: 2px solid var(--cxbcolor);
    border-radius: var(--br-1-5);
    padding: 14px 16px 10px;
    margin-bottom: 24px;
}

.cx-strip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cx-strip-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 7px;
}

.cx-strip-title i {
    color: var(--main);
    font-size: 13px;
}

.cx-strip-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    padding: 3px 7px;
    opacity: 0.5;
    transition: opacity 0.2s;
    line-height: 1;
}

.cx-strip-toggle:hover {
    opacity: 1;
}

.cx-strip-toggle i {
    font-size: 11px;
    transition: transform 0.3s;
    display: block;
}

.cx-strip-toggle.collapsed i {
    transform: rotate(180deg);
}

.cx-strip-body {
    overflow: hidden;
    max-height: 600px;
    transition: max-height 0.35s ease;
}

.cx-strip-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding-bottom: 14px;
}

.cx-strip-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Her satır: slot'lar yan yana */
.cx-strip-dates,
.cx-strip-line-row,
.cx-strip-months {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.cx-strip-slot {
    flex: 1 1 0;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Tarih sayısı */
.cx-strip-dates {
    margin-bottom: 4px;
}

.cx-strip-datenum {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.45;
    line-height: 1;
}

.cx-strip-slot.is-today .cx-strip-datenum {
    font-weight: 800;
    color: var(--main);
    opacity: 1;
}

.cx-strip-slot.has-payment .cx-strip-datenum {
    font-weight: 700;
    color: var(--cxcolor-1);
    opacity: 1;
}

/* Çizgi + dot satırı */
.cx-strip-line-row {
    position: relative;
    height: 20px;
}

.cx-strip-rail {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1.5px;
    background: var(--cxbcolor);
    z-index: 0;
}

.cx-strip-line-row .cx-strip-slot {
    z-index: 1;
}

.cx-strip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cxbcolor);
    border: 1.5px solid var(--cxbcolor);
    flex-shrink: 0;
    position: relative;
}

.cx-strip-slot.is-today .cx-strip-dot {
    width: 14px;
    height: 14px;
    background: var(--main);
    border-color: var(--main);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--main) 18%, transparent);
}

.cx-strip-slot.has-payment:not(.is-today) .cx-strip-dot {
    width: 10px;
    height: 10px;
    background: var(--cxcolor-1);
    border-color: var(--cxcolor-1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cxcolor-1) 20%, transparent);
}

@keyframes cx-pulse {
    0% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(3.2);
    }
}

.cx-strip-slot.has-payment .cx-strip-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--cxcolor-1);
    animation: cx-pulse 1.8s ease-out infinite;
    pointer-events: none;
}

/* Ay / Bugün / Tutar etiketi */
.cx-strip-months {
    height: 16px;
    overflow: visible;
}

.cx-strip-months .cx-strip-slot {
    overflow: visible;
}

.cx-strip-month {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-color);
    opacity: 0.4;
}

.cx-strip-slot.is-today .cx-strip-month {
    color: var(--main);
    opacity: 0.85;
    font-weight: 700;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.cx-strip-amount-inline {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    color: var(--cxcolor-1);
    white-space: nowrap;
    line-height: 1;
}

/* Boş mesaj */
.cx-strip-empty {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.4;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 6px 0 0;
}

.cx-strip-empty i {
    font-size: 13px;
}

/* Responsive */
@media (max-width: 992px) {
    .cx-blocked-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .cx-blocked-card--release {
        grid-column: 1 / -1;
    }
}

@media (max-width: 576px) {
    .cx-blocked-cards {
        grid-template-columns: 1fr;
    }

    .cx-blocked-card--release {
        grid-column: auto;
    }

    .cx-blocked-card {
        padding: 18px 16px;
    }

    .cx-blocked-card-value {
        font-size: 18px;
    }

    .cx-blocked-card-icon {
        width: 44px;
        height: 44px;
    }

    .cx-blocked-card-icon i {
        font-size: 18px;
    }
}

/* ══ Help Center Page ══════════════════════════════════════════════════════ */

/* ── Hero ── */
.hcHero {
    position: relative;
    overflow: hidden;
    padding: 80px 0 60px;
    text-align: center;
    background: var(--cxbgmain)
}

.hcHeroGlow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none
}

.hcHeroGlowL {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, color-mix(in srgb, var(--mainfif) 15%, transparent) 0%, transparent 70%);
    top: -120px;
    left: -80px
}

.hcHeroGlowR {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, color-mix(in srgb, var(--mainfif-sec) 12%, transparent) 0%, transparent 70%);
    top: -100px;
    right: -60px
}

.hcHeroDots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none
}

.hcHeroInner {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px
}

.hcHeroBadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--mainfif) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mainfif) 30%, transparent);
    color: var(--mainfif);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 22px
}

.hcHeroTitle {
    font-size: clamp(1.9rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: var(--text-color);
    margin: 0 0 14px
}

.hcHeroGrad {
    background: linear-gradient(135deg, var(--mainfif), var(--mainfif-sec));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 12px color-mix(in srgb, var(--mainfif) 50%, transparent))
}

.hcHeroSub {
    font-size: .95rem;
    color: var(--text-color2);
    margin: 0 0 28px;
    line-height: 1.65
}

/* ── Search ── */
.hcSearchWrap {
    position: relative;
    max-width: 540px;
    margin: 0 auto 28px
}

.hcSearchBox {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--cxbgmainthi);
    border: 1px solid var(--cxbcolor);
    border-radius: 14px;
    padding: 0 16px;
    transition: border .2s, box-shadow .2s
}

.hcSearchBox {
    outline: none
}

.hcSearchBox:focus-within {
    border-color: var(--mainfif);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mainfif) 18%, transparent);
    outline: none
}

.hcSearchInput:focus,
.hcSearchInput:focus-visible,
.hcSearchInput:focus-within {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: none !important
}

.hcSearchIcon {
    flex-shrink: 0;
    color: var(--text-color-3)
}

.hcSearchInput {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-color);
    font-size: .93rem;
    padding: 13px 0;
    font-family: inherit
}

.hcSearchInput::placeholder {
    color: var(--text-color-3)
}

.hcSearchClear {
    cursor: pointer;
    color: var(--text-color-3);
    display: flex;
    align-items: center;
    padding: 4px
}

.hcSearchClear:hover {
    color: var(--text-color)
}

.hcSearchResults {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--cxbgmainthi);
    border: 1px solid var(--cxbcolor);
    border-radius: 14px;
    overflow: hidden;
    z-index: 200;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .4)
}

.hcSrItem {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--cxbcolor);
    transition: background .15s
}

.hcSrItem:last-child {
    border-bottom: none
}

.hcSrItem:hover {
    background: color-mix(in srgb, var(--mainfif) 8%, transparent)
}

.hcSrItemTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px
}

.hcSrTitle {
    color: var(--text-color);
    font-size: .86rem;
    font-weight: 500
}

.hcSrTitle mark {
    background: color-mix(in srgb, var(--mainfif) 25%, transparent);
    color: var(--mainfif);
    border-radius: 3px;
    padding: 0 2px
}

.hcSrCat {
    color: var(--text-color-3);
    font-size: .73rem;
    white-space: nowrap
}

.hcSrSnippet {
    color: var(--text-color2);
    font-size: .79rem;
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.hcSrSnippet mark {
    background: color-mix(in srgb, var(--mainfif) 18%, transparent);
    color: var(--mainfif);
    border-radius: 2px;
    padding: 0 2px
}

.hcSrEmpty {
    padding: 18px 16px;
    color: var(--text-color-3);
    text-align: center;
    font-size: .86rem
}

/* ── Hero Stats ── */
.hcHeroStats {
    display: flex;
    align-items: center;
    justify-content: center
}

.hcHeroStat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 22px
}

.hcHeroStat strong {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1
}

.hcHeroStat span {
    font-size: .7rem;
    color: var(--text-color-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 4px
}

.hcHeroStatDivider {
    width: 1px;
    height: 28px;
    background: var(--cxbcolor)
}

/* ── Main layout ── */
.hcMain {
    padding-top: 32px;
    padding-bottom: 60px
}

/* ── Sidebar card ── */
.hcSidebar {
    background: var(--cxbgmainthi);
    border: 1px solid var(--cxbcolor);
    border-radius: 20px;
    overflow: hidden;
    position: sticky;
    top: 80px;
    align-self: start
}

.hcSidebarHead {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cxbcolor);
    background: var(--cxbgmainfou)
}

.hcSidebarHeadIcon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mainfif);
    background: color-mix(in srgb, var(--mainfif) 14%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mainfif) 8%, transparent);
    flex-shrink: 0;
    font-size: .75rem
}

.hcSidebarHeadTitle {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-color2)
}

/* ── Nav ── */
.hcNav {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.hcNavGroup {
    position: relative
}

.hcNavItem {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 9px 10px;
    border-radius: 9px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-size: .825rem;
    font-weight: 400;
    color: var(--text-color);
    transition: color .15s, background .15s
}

.hcNavItem:hover {
    background: color-mix(in srgb, var(--mainfif) 7%, transparent);
    color: var(--mainfif)
}

.hcNavItem:hover .hcNavIcon {
    color: var(--mainfif)
}

.hcNavItemActive {
    background: var(--mainfif) !important;
    color: var(--cxbgmain) !important;
    font-weight: 600
}

.hcNavItemActive .hcNavIcon,
.hcNavItemActive .hcNavChevron {
    color: var(--cxbgmain) !important
}

.hcNavItemActive .hcNavBadge {
    background: rgba(0, 0, 0, 0.22) !important;
    color: var(--cxbgmain) !important
}

.hcNavItemLeft {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1
}

.hcNavIcon {
    font-size: .78rem;
    color: var(--text-color-3);
    transition: color .15s;
    flex-shrink: 0;
    width: 14px;
    text-align: center
}

.hcNavChevron {
    flex-shrink: 0;
    color: var(--text-color-3);
    transition: transform .2s;
    margin-left: auto
}

.hcNavItemExpanded .hcNavChevron {
    transform: rotate(90deg)
}

.hcNavBadge {
    font-size: .66rem;
    font-weight: 600;
    color: var(--text-color-3);
    background: var(--cxbgmainfou);
    border-radius: 999px;
    padding: 2px 7px;
    flex-shrink: 0;
    margin-left: auto
}

.hcNavEmpty {
    color: var(--text-color-3);
    font-size: .84rem;
    padding: 14px 16px;
    margin: 0
}

/* ── Sub-nav ── */
.hcSubNav {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    transition: max-height .3s cubic-bezier(.4, 0, .2, 1), opacity .25s ease, padding .25s ease;
    margin-left: 8px;
    border-left: 2px solid color-mix(in srgb, var(--mainfif) 25%, transparent)
}

.hcSubNavOpen {
    max-height: 400px;
    opacity: 1;
    padding: 3px 0 6px
}

.hcSubNavItem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 14px;
    border-radius: 0 8px 8px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-size: .8rem;
    font-weight: 400;
    color: var(--text-color2);
    transition: color .15s, background .15s
}

.hcSubNavItem:hover {
    background: color-mix(in srgb, var(--mainfif) 6%, transparent);
    color: var(--mainfif)
}

.hcSubNavItem:hover .hcSubNavDot {
    background: var(--mainfif)
}

.hcSubNavItemActive {
    color: var(--mainfif) !important;
    font-weight: 600
}

.hcSubNavItemActive .hcSubNavDot {
    background: var(--mainfif) !important
}

.hcSubNavDot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cxbcolor);
    flex-shrink: 0;
    transition: background .15s
}

/* ── Sidebar contact widget ── */
.hcSidebarContact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    text-align: center;
    border-top: 1px solid var(--cxbcolor);
    background: color-mix(in srgb, var(--mainfif) 5%, transparent)
}

.hcSidebarContactIcon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mainfif) 14%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mainfif);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mainfif) 8%, transparent)
}

.hcSidebarContact strong {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-color);
    margin-top: 2px
}

.hcSidebarContact p {
    font-size: .71rem;
    color: var(--text-color2);
    margin: 0
}

.hcContactBtn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 4px;
    background: color-mix(in srgb, var(--mainfif) 18%, transparent);
    color: var(--mainfif);
    border: 1px solid color-mix(in srgb, var(--mainfif) 30%, transparent);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: .77rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s
}

.hcContactBtn:hover {
    background: color-mix(in srgb, var(--mainfif) 30%, transparent);
    color: var(--mainfif)
}

/* ── Content area ── */
.hcContent {
    padding: 0 0 0 4px;
    min-height: 400px
}

.hcPanel {
    display: none
}

.hcPanelActive {
    display: block
}

.hcPanelHead {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cxbcolor)
}

.hcPanelHeadLeft {
    display: flex;
    align-items: flex-start;
    gap: 14px
}

.hcPanelHeadIcon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mainfif) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mainfif) 20%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mainfif);
    font-size: 1rem;
    flex-shrink: 0
}

.hcPanelParent {
    font-size: .68rem;
    color: var(--text-color-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 2px;
    font-weight: 600
}

.hcPanelTitle {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 3px;
    letter-spacing: -.02em
}

.hcPanelMeta {
    font-size: .76rem;
    color: var(--text-color-3);
    margin: 0
}

/* ── Accordion Articles ── */
.hcArticleList {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.hcArticle {
    background: var(--cxbgmainfou);
    border: 1px solid var(--cxbcolor);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .2s
}

.hcArticle:hover {
    border-color: color-mix(in srgb, var(--mainfif) 25%, transparent)
}

.hcArticleOpen {
    border-color: color-mix(in srgb, var(--mainfif) 35%, transparent) !important;
    background: color-mix(in srgb, var(--mainfif) 4%, transparent)
}

.hcArticleToggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    background: none;
    border: none;
    padding: 16px 18px;
    cursor: pointer;
    text-align: left
}

.hcArticleQ {
    font-size: .9rem;
    font-weight: 500;
    color: var(--text-color2);
    line-height: 1.45;
    flex: 1
}

.hcArticleOpen .hcArticleQ {
    color: var(--text-color)
}

.hcArticleArrow {
    flex-shrink: 0;
    color: var(--text-color-3);
    transition: transform .25s, color .2s;
    display: flex;
    align-items: center
}

.hcArticleOpen .hcArticleArrow {
    transform: rotate(180deg);
    color: var(--mainfif)
}

.hcArticleBody {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease
}

.hcArticleContent {
    padding: 0 18px 18px;
    color: var(--text-color2);
    font-size: .86rem;
    line-height: 1.75
}

.hcArticleContent p {
    margin: 0 0 10px
}

.hcArticleContent p:last-child {
    margin: 0
}

.hcArticleContent a {
    color: var(--mainfif);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--mainfif) 35%, transparent);
    transition: color .15s
}

.hcArticleContent a:hover {
    color: var(--mainfif-sec)
}

.hcArticleContent ul,
.hcArticleContent ol {
    padding-left: 18px;
    margin: 0 0 10px
}

.hcArticleContent li {
    margin-bottom: 5px
}

.hcArticleContent code {
    background: color-mix(in srgb, var(--mainfif) 12%, transparent);
    color: var(--mainfif);
    border-radius: 5px;
    padding: 2px 6px;
    font-size: .84em
}

.hcArticleContent strong {
    color: var(--text-color)
}

/* ── Empty / None ── */
.hcNoneYet {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    color: var(--text-color-3);
    text-align: center;
    gap: 10px
}

.hcNoneYet p {
    margin: 0;
    font-size: .88rem
}

/* ── Responsive ── */
@media(max-width:600px) {
    .hcHeroTitle {
        font-size: 1.7rem
    }

    .hcHeroStat {
        padding: 0 12px
    }

    .hcPanelTitle {
        font-size: 1.05rem
    }

    .hcContent {
        padding: 0
    }
}

/* ── Vitrin Düzenle (arrange-listings) ── */
.cxArrangeNotice {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-radius: var(--cxbrad, 8px);
    background: color-mix(in srgb, var(--mainsec) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mainsec) 30%, transparent);
    color: var(--mainsec);
    font-size: .875rem;
    margin-top: 1rem;
}

.cx-arrange-grid .cx-arrange-card-wrap {
    cursor: grab;
    position: relative;
}

.cx-arrange-grid .cx-arrange-card-wrap:active {
    cursor: grabbing;
}

.cx-arrange-grid .cx-arrange-card-wrap.sortable-ghost {
    opacity: .35;
}

.cx-arrange-grid .cx-arrange-card-wrap.sortable-chosen {
    z-index: 10;
}

.cx-arrange-grid .cx-arrange-card-wrap.sortable-drag {
    box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
    border-radius: var(--cxbrad, 8px);
}

.cx-arrange-dragging .cx-arrange-card-wrap a,
.cx-arrange-dragging .cx-arrange-card-wrap button {
    pointer-events: none;
}

/* ── Çerçeve Dükkanı ── */
.cxFrPage { padding: 32px 0 64px; }

.cxFrHero {
    position: relative; overflow: hidden;
    padding: 80px 0 60px; text-align: center;
    background: var(--cxbgmain);
    margin-top: -30px;
}
.cxFrHeroGlow {
    position: absolute; border-radius: 50%;
    filter: blur(80px); pointer-events: none;
}
.cxFrHeroGlowL {
    width: 480px; height: 480px;
    background: radial-gradient(circle, color-mix(in srgb, var(--main) 14%, transparent) 0%, transparent 70%);
    top: -120px; left: -80px;
}
.cxFrHeroGlowR {
    width: 420px; height: 420px;
    background: radial-gradient(circle, color-mix(in srgb, var(--mainsec) 10%, transparent) 0%, transparent 70%);
    top: -100px; right: -60px;
}
.cxFrHeroDots {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 28px 28px; pointer-events: none;
}
.cxFrHeroInner {
    position: relative; max-width: 640px;
    margin: 0 auto; padding: 0 20px;
}
.cxFrHeroBadge {
    display: inline-flex; align-items: center; gap: 6px;
    background: color-mix(in srgb, var(--main) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--main) 30%, transparent);
    color: var(--main); border-radius: 999px;
    padding: 5px 14px; font-size: .72rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; margin-bottom: 22px;
}
.cxFrHeroTitle {
    font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 800;
    line-height: 1.15; letter-spacing: -.03em;
    color: var(--text-color); margin: 0 0 14px;
}
.cxFrHeroGrad {
    background: linear-gradient(135deg, var(--main), var(--mainsec));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 12px color-mix(in srgb, var(--main) 50%, transparent));
}
.cxFrHeroSub {
    font-size: .95rem; color: var(--otext-color-h);
    margin: 0 0 24px; line-height: 1.65;
}
.cxFrHeroBalance {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--cxbgmainsec); border: 1px solid var(--cxbcolor-2);
    border-radius: var(--br-1); padding: 10px 20px;
    font-size: .88rem; margin-bottom: 28px;
}
.cxFrHeroBalance i { color: var(--main); }
.cxFrHeroStats {
    display: inline-flex; align-items: center; gap: 24px;
    justify-content: center;
}
.cxFrHeroStat { text-align: center; }
.cxFrHeroStat strong { display: block; font-size: 1.4rem; font-weight: 800; color: var(--text-color); }
.cxFrHeroStat span { font-size: .75rem; color: var(--otext-color-h); text-transform: uppercase; letter-spacing: .06em; }
.cxFrHeroStatDivider { width: 1px; height: 32px; background: var(--cxbcolor-2); }

.cxFrSection {
    margin-bottom: 40px;
}

.cxFrSection__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.cxFrSection__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--otext-color-h);
    white-space: nowrap;
}

.cxFrSection__line {
    flex: 1;
    height: 1px;
    background: var(--cxbcolor-2);
}

.cxFrSection__count {
    font-size: 11px;
    font-weight: 600;
    color: var(--otext-color-h);
    background: var(--cxbgmainsec);
    border: 1px solid var(--cxbcolor-2);
    border-radius: 20px;
    padding: 2px 10px;
}

.cxFrGrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

@media (max-width: 1200px) {
    .cxFrGrid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 992px) {
    .cxFrGrid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .cxFrGrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .cxFrGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cxFrCard {
    border-radius: var(--br-2);
    overflow: hidden;
    background: var(--cxbgmain);
    border: 2px solid var(--cxbcolor-2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, .25);
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative;
    cursor: default;
}

.cxFrCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
    border-color: var(--cxbcolor-3);
}

.cxFrCard--rare {
    border-color: rgba(155, 89, 182, .4);
}

.cxFrCard--rare.is-active {
    border-color: #9b59b6;
    box-shadow: 0 0 0 3px rgba(155, 89, 182, .15);
}

.cxFrCard--epic {
    border-color: rgba(236, 72, 153, .4);
}

.cxFrCard--epic.is-active {
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, .15);
}

.cxFrCard--legendary {
    border-color: color-mix(in srgb, var(--main) 50%, transparent);
}

.cxFrCard--legendary.is-active {
    border-color: var(--main);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--main) 18%, transparent);
}

.cxFrCard--common.is-active {
    border-color: var(--cxbcolor-3);
}

.cxFrCard--no-frame {
    border-style: dashed;
}

.cxFrCard--no-frame.is-active {
    border-color: var(--cxbcolor-3);
}

.cxFrCard__preview {
    position: relative;
    aspect-ratio: 1/1;
    background: var(--cxbgmainsec);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cxFrCard__preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .03) 0%, transparent 70%);
    pointer-events: none;
}

.cxFrCard__avatarWrap {
    position: relative;
    width: 70%;
    aspect-ratio: 1/1;
    z-index: 1;
}

.cxFrCard__avatarBase {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.cxFrCard__overlay {
    position: absolute;
    inset: -18%;
    width: 136%;
    height: 136%;
    object-fit: contain;
    pointer-events: none;
}

.cxFrCard__noFrameWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: .3;
    z-index: 1;
}

.cxFrCard__noFrameWrap i {
    font-size: 32px;
}

.cxFrCard__noFrameWrap span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cxFrCard__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    line-height: 1.5;
}

.cxFrCard__badge--active {
    background: var(--main);
    color: #000;
}

.cxFrCard__badge--gift {
    background: rgba(245, 158, 11, .9);
    color: #000;
    top: 10px;
    left: 10px;
    right: auto;
}

.cxFrCard__rarityBar {
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: .5;
}

.cxFrCard__rarityBar--common {
    color: var(--cxbcolor-3);
}

.cxFrCard__rarityBar--rare {
    color: #9b59b6;
}

.cxFrCard__rarityBar--epic {
    color: #ec4899;
}

.cxFrCard__rarityBar--legendary {
    color: var(--main);
}

.cxFrCard__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.cxFrCard__name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.cxFrCard__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-height: 18px;
}

.cxFrCard__price {
    font-size: 14px;
    font-weight: 800;
    color: var(--main);
    line-height: 1;
}

.cxFrCard__price--free {
    color: var(--mainfif);
}

.cxFrCard__price--hidden {
    visibility: hidden;
}

.cxFrCard__duration {
    font-size: 10px;
    font-weight: 600;
    color: var(--otext-color-h);
    background: var(--cxbcolor-2);
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}

.cxFrCard__btn {
    display: block;
    width: 100%;
    border: none;
    padding: 9px 0;
    border-radius: var(--br-1);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    transition: opacity .15s, transform .1s;
    text-decoration: none;
    margin-top: auto;
    line-height: 1;
}

.cxFrCard__btn:active {
    transform: scale(.97);
}

.cxFrCard__btn:hover {
    opacity: .88;
    text-decoration: none;
}

.cxFrCard__btn--buy {
    background: var(--main);
    color: #000;
}

.cxFrCard__btn--equip {
    background: var(--mainfif);
    color: #000;
}

.cxFrCard__btn--active {
    background: transparent;
    cursor: default;
    color: var(--otext-color-h);
    border: 1.5px solid var(--cxbcolor-2);
}

.cxFrCard__btn--active:hover {
    opacity: 1;
}

.cxFrCard__btn--remove {
    background: transparent;
    color: var(--otext-color-h);
    border: 1.5px solid var(--cxbcolor-2);
}

.cxFrCard__btn--login {
    background: transparent;
    color: var(--main);
    border: 1.5px solid color-mix(in srgb, var(--main) 40%, transparent);
}

/* ── Breadcrumb bar (below navbar) ── */
.cxbreadcrumb-bar {
    background-color: var(--cxbgmainsec);
    border-bottom: 1px solid var(--cxbcolor);
    padding: 7px 0;
}

.cxbreadcrumb-bar ul.cxshowcase-subtext {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    font-size: 12px;
    opacity: 1;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-color-h);
}

.cxbreadcrumb-bar ul.cxshowcase-subtext li {
    display: inline-flex;
    align-items: center;
}

.cxbreadcrumb-bar ul.cxshowcase-subtext li[aria-hidden] {
    padding: 0 5px;
    opacity: 0.35;
}

.cxbreadcrumb-bar ul.cxshowcase-subtext a {
    color: var(--text-color-h);
    text-decoration: none;
    margin-right: 0;
    transition: color 0.15s;
}

.cxbreadcrumb-bar ul.cxshowcase-subtext a:hover {
    color: var(--text-color);
}

.cxbreadcrumb-bar ul.cxshowcase-subtext .loccolor {
    color: var(--text-color);
    font-weight: 600;
    cursor: default;
}

.cxbreadcrumb-bar ul.cxshowcase-subtext li:first-child a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

@media (max-width: 991.98px) {
    .cxbreadcrumb-bar {
        padding: 6px 0;
    }

    .cxbreadcrumb-bar ul.cxshowcase-subtext {
        font-size: 11px;
    }
}

/* ── Favorites — inactive listing card ── */
.cx-fav-listing-slot { position: relative; }
.cx-fav-card--inactive { opacity: 0.42; }
.cx-fav-card--inactive .listingCardCell { pointer-events: none; cursor: default; }
.cx-fav-card--inactive .cx-fav-card-remove { pointer-events: auto; }
.cx-fav-inactive-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 6;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 4px;
    pointer-events: none;
}