/*
|--------------------------------------------------------------------------
| LUTHERBET - SITE SHELL
|--------------------------------------------------------------------------
| Header / Sidebar / Mobile Navigation / Footer shell
| Backend ve API hook'larına dokunmaz.
|--------------------------------------------------------------------------
*/


/* =========================================================
   ROOT
========================================================= */

:root {
    --shell-bg: var(--bg-page);
    --shell-bg-deep: var(--bg-deep);
    --shell-panel: var(--bg-panel);
    --shell-panel-2: var(--bg-panel-2);
    --shell-panel-3: var(--bg-panel-3);

    --shell-card: var(--surface-card);
    --shell-card-hover: var(--surface-card-hover);

    --shell-border: var(--border);
    --shell-border-soft: var(--border-subtle);
    --shell-border-strong: var(--border-accent-strong);

    --shell-text: var(--text-secondary);
    --shell-muted: var(--text-muted);
    --shell-dim: var(--text-dim);

    --shell-gold: var(--primary);
    --shell-gold-light: var(--primary-light);
    --shell-gold-dark: var(--primary-dark);
    --shell-gold-soft: var(--primary-soft);

    --shell-green: var(--success);
    --shell-red: var(--danger);

    --shell-sidebar-width: var(--sidebar-width);
    --shell-notice-height: 29px;
    --shell-header-height: var(--header-height);

    --shell-content-max: 1480px;

    --shell-radius-sm: var(--radius-sm);
    --shell-radius: var(--radius-md);
    --shell-radius-lg: var(--radius-lg);

    --shell-shadow: var(--shadow-lg);

    --shell-ease:
        cubic-bezier(.2, .8, .2, 1);

    --bg-input: var(--input-bg);

    --accent-blue: var(--secondary);
    --accent-blue-hover: var(--secondary-light);
    --accent-yellow: var(--primary-light);

    --border-color: var(--border);
    --border-color-hover: var(--border-strong);

    --sidebar-w: var(--sidebar-width);
}


/* =========================================================
   GLOBAL
========================================================= */

html {
    color-scheme: dark;
    background: var(--shell-bg);
    scroll-behavior: smooth;
}


body.site-shell-v2 {
    min-width: 320px;
    min-height: 100vh;

    color: var(--shell-text);

    background:
    
        radial-gradient(
            circle at 70% 2%,
            rgba(var(--primary-rgb, 243, 198, 0), 0.055),
            transparent 30rem
        ),
        linear-gradient(
            180deg,
            var(--bg-panel) 0%,
            var(--bg-deep) 44%,
            var(--bg-base) 100%
        );

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
}


/*
 * Referanstaki arka plan çizgileri.
 */
body.site-shell-v2::before {
    content: "";

    position: fixed;
    z-index: 0;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            66deg,
            transparent 0 48%,
            rgba(var(--primary-rgb), 0.045) 49%,
            transparent 50%
        ),
        linear-gradient(
            112deg,
            transparent 0 58%,
            rgba(var(--primary-rgb), 0.025) 59%,
            transparent 60%
        ),
        linear-gradient(
            90deg,
            var(--glass-bg-subtle) 1px,
            transparent 1px
        );

    background-size:
        620px 620px,
        760px 760px,
        150px 150px;

    opacity: .75;
}


body.site-shell-v2 :where(
    button,
    a,
    input,
    select,
    textarea
):focus-visible {
    outline: 2px solid var(--shell-gold-light);
    outline-offset: 2px;
}


body.site-shell-v2 ::selection {
    color: var(--bg-base);
    background: var(--shell-gold-light);
}


body.site-shell-v2::-webkit-scrollbar,
body.site-shell-v2 *::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}


body.site-shell-v2::-webkit-scrollbar-track,
body.site-shell-v2 *::-webkit-scrollbar-track {
    background: transparent;
}


body.site-shell-v2::-webkit-scrollbar-thumb,
body.site-shell-v2 *::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;

    background:
        rgba(var(--primary-rgb), .3);

    background-clip: padding-box;
}



/* =========================================================
   APP SHELL
========================================================= */

body.site-shell-v2 .app-shell {
    position: relative;
    z-index: 2;

    display: flex;

    min-height: 100vh;
}


body.site-shell-v2 .main-column {
    flex: 1;

    min-width: 0;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}



/* =========================================================
   ANNOUNCEMENT STRIP
========================================================= */

body.site-shell-v2 .top-announcement-strip {
    position: relative;
    z-index: 1000;

    width: 100%;

    height: var(--shell-notice-height);

    display: flex;
    align-items: center;

    overflow: hidden;

    border-bottom:
        1px solid rgba(var(--primary-rgb), .22);

    background:
        linear-gradient(
            90deg,
            var(--primary-dark),
            var(--primary-dark) 45%,
            var(--primary-dark)
        );

    color: var(--text-primary);

    box-shadow:
        0 5px 18px rgba(0,0,0,.22);
}


body.site-shell-v2 .top-announcement-icon {
    width: 38px;
    height: 100%;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    color: var(--primary-light);

    font-size: 1rem;
}


body.site-shell-v2 .top-announcement-content {
    min-width: 0;
    flex: 1;

    overflow: hidden;
}


body.site-shell-v2 .top-announcement-track {
    width: max-content;

    display: flex;
    align-items: center;

    gap: 28px;

    white-space: nowrap;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .65px;

    animation:
        shellAnnouncementMove
        38s
        linear
        infinite;
}


body.site-shell-v2 .top-announcement-separator {
    color: var(--shell-gold-light);
}


body.site-shell-v2 .top-announcement-close {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: grid;
    place-items: center;

    color: var(--text-muted);

    border-left:
        1px solid var(--border-subtle);

    font-size: 1rem;
}


body.site-shell-v2 .top-announcement-close:hover {
    color: var(--text-primary);
    background: rgba(0,0,0,.14);
}


@keyframes shellAnnouncementMove {

    0% {
        transform: translateX(8%);
    }

    100% {
        transform: translateX(-75%);
    }
}



/* =========================================================
   DESKTOP SIDEBAR
========================================================= */

body.site-shell-v2 .sidebar {
    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    z-index: 120;

    width: var(--shell-sidebar-width);
    flex: 0 0 var(--shell-sidebar-width);

    height: 100vh;
    height: 100dvh;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border-right:
        1px solid rgba(var(--primary-rgb), .12);

    background:
        linear-gradient(
            180deg,
            var(--bg-panel) 0%,
            var(--bg-deep) 100%
        );

    box-shadow:
        12px 0 36px rgba(0,0,0,.15);

    transition:
        width .34s var(--shell-ease),
        flex-basis .34s var(--shell-ease),
        border-color .25s ease;
}


body.site-shell-v2
.app-shell.sidebar-collapsed
.sidebar {
    width: 0;
    flex-basis: 0;

    border-right-color: transparent;
}



/* =========================================================
   SIDEBAR TOP / LOGO
========================================================= */

body.site-shell-v2 .sidebar-top {
    width: var(--shell-sidebar-width);
    height: var(--shell-header-height);

    flex: 0 0 var(--shell-header-height);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    padding: 0 18px;

    border-bottom:
        1px solid rgba(var(--primary-rgb), .13);
}


body.site-shell-v2 .sidebar-logo,
body.site-shell-v2 .mobile-sidebar-logo {
    display: inline-flex;
    min-width: 0;
    max-width: calc(100% - 40px);
    align-items: center;
    overflow: hidden;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: transparent;
    font-size: 0;
    text-decoration: none;
    text-shadow: none;
}

body.site-shell-v2 .sidebar-logo-image {
    display: block;
    width: auto;
    max-width: 148px;
    height: var(--header-logo-height, 32px);
    max-height: 36px;
    object-fit: contain;
    object-position: left center;
    background: transparent;
    border: 0;
}

body.site-shell-v2 .sidebar-logo-placeholder {
    display: block;
    width: 92px;
    height: 28px;
    background: transparent;
}


body.site-shell-v2 .sidebar-collapse-control {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    border:
        1px solid var(--glass-bg-medium);

    color: var(--text-dim);

    background:
        var(--glass-bg-subtle);

    font-size: 1.05rem;

    transition:
        color .2s,
        background .2s,
        border-color .2s;
}


body.site-shell-v2
.sidebar-collapse-control:hover {
    color: var(--shell-gold-light);

    border-color:
        rgba(var(--primary-rgb), .22);

    background:
        rgba(var(--primary-rgb), .06);
}



/* =========================================================
   SIDEBAR NAVIGATION
========================================================= */

body.site-shell-v2 .sidebar-nav {
    flex: 1;

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 0;

    padding:
        26px
        12px
        28px;

    overflow-x: hidden;
    overflow-y: auto;
}


body.site-shell-v2
.sidebar > .sidebar-nav {
    width: var(--shell-sidebar-width);
}


body.site-shell-v2 .nav-group {
    display: flex;
    flex-direction: column;

    gap: 2px;

    margin-top: 14px;

    padding-bottom: 15px;

    border-bottom:
        1px solid rgba(var(--primary-rgb), .065);
}


body.site-shell-v2
.nav-group:last-child {
    border-bottom: 0;
}


body.site-shell-v2 .nav-group-title {
    margin-bottom: 7px;

    padding: 0 3px;

    color: var(--primary-dark);

    font-size: .55rem;
    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


body.site-shell-v2 .nav-item {
    position: relative;

    width: 100%;
    min-height: 39px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 6px 7px;

    border-radius: 8px;

    border:
        1px solid transparent;

    color: var(--text-dim);

    font-size: .73rem;
    font-weight: 500;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease;
}


body.site-shell-v2 .nav-item:hover {
    color: var(--text-primary);

    border-color:
        rgba(var(--primary-rgb), .1);

    background:
        linear-gradient(
            90deg,
            rgba(var(--primary-rgb), .08),
            transparent
        );
}


body.site-shell-v2 .nav-item.active {
    color: var(--text-primary);

    border-color:
        rgba(var(--primary-rgb), .16);

    background:
        linear-gradient(
            90deg,
            rgba(var(--primary-rgb), .12),
            rgba(var(--primary-rgb), .025)
        );

    box-shadow:
        inset 2px 0 0
        var(--shell-gold);
}


body.site-shell-v2 .nav-icon {
    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    color: var(--primary-dark);

    background: transparent;

    font-size: .96rem;

    transition:
        color .18s ease,
        background .18s ease;
}


body.site-shell-v2
.nav-item:hover
.nav-icon,
body.site-shell-v2
.nav-item.active
.nav-icon {
    color: var(--shell-gold-light);

    background:
        rgba(var(--primary-rgb), .08);
}


body.site-shell-v2 .nav-label {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


body.site-shell-v2 .nav-badge-new {
    margin-left: auto;

    padding: 3px 6px;

    border-radius: 999px;

    color: var(--bg-base);

    background:
        linear-gradient(
            180deg,
            var(--shell-gold-light),
            var(--shell-gold)
        );

    box-shadow: none;

    font-size: .48rem;
    font-weight: 900;

    letter-spacing: .45px;

    animation: none;
}


body.site-shell-v2 .nav-badge-online {
    color: var(--text-primary);

    background: var(--danger);

    font-size: .44rem;
    letter-spacing: .35px;
}



/* =========================================================
   SIDEBAR PROMO
========================================================= */

body.site-shell-v2 .sidebar-promo-card {
    position: relative;

    flex: 0 0 auto;

    min-height: 126px;

    display: flex;
    align-items: center;

    overflow: hidden;

    margin-bottom: 9px;

    padding: 14px 12px;

    border:
        1px solid rgba(var(--primary-rgb), .42);

    border-radius: 11px;

    background:
        radial-gradient(
            circle at 86% 20%,
            rgba(var(--primary-rgb), .28),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary-dark) 55%,
            var(--primary-dark)
        );

    box-shadow:
        inset 0 0 28px rgba(var(--primary-rgb), .07),
        0 8px 20px rgba(0,0,0,.24);
}


body.site-shell-v2
.sidebar-promo-card::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    right: -28px;
    bottom: -25px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(var(--primary-rgb),.34),
            transparent 67%
        );
}


body.site-shell-v2
.sidebar-promo-decoration {
    position: absolute;

    z-index: 1;

    right: 2px;
    bottom: -3px;

    color: var(--primary-lighter);

    font-size: 5.8rem;

    opacity: .54;

    transform: rotate(-10deg);

    filter:
        drop-shadow(
            0 8px 8px
            rgba(0,0,0,.4)
        );
}


body.site-shell-v2
.sidebar-promo-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


body.site-shell-v2
.sidebar-promo-eyebrow {
    margin-bottom: 5px;

    padding: 2px 5px;

    border-radius: 4px;

    color: var(--primary-lighter);

    background: rgba(0,0,0,.33);

    font-size: .43rem;
    font-weight: 900;

    letter-spacing: .5px;
}


body.site-shell-v2
.sidebar-promo-title {
    color: var(--text-primary);

    font-size: 1.04rem;
    font-weight: 900;

    line-height: .92;

    letter-spacing: -.6px;

    text-shadow:
        0 2px 7px
        rgba(0,0,0,.65);
}


body.site-shell-v2
.sidebar-promo-button {
    min-width: 55px;

    margin-top: 9px;

    padding: 3px 9px;

    border-radius: 999px;

    color: var(--primary-dark);

    background:
        linear-gradient(
            180deg,
            var(--primary-lighter),
            var(--primary)
        );

    box-shadow:
        0 3px 9px
        rgba(0,0,0,.24);

    font-size: .46rem;
    font-weight: 900;

    text-align: center;
}



/* =========================================================
   HEADER
========================================================= */

body.site-shell-v2 .top-header {
    position: relative;

    top: 0;

    z-index: 110;

    width: 100%;
    height: var(--shell-header-height);

    flex: 0 0 var(--shell-header-height);

    border-bottom:
        1px solid rgba(var(--primary-rgb), .12);

    background:
        rgba(9, 14, 21, .96);

    box-shadow:
        0 8px 26px
        rgba(0,0,0,.2);

    backdrop-filter:
        blur(18px)
        saturate(120%);
}


body.site-shell-v2 .top-header-inner {
    width: 100%;
    height: 100%;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 11px;

    padding:
        0
        16px;

    max-width: none;
}



/* =========================================================
   HEADER LOGO SLOT
========================================================= */

body.site-shell-v2 .header-logo {
    display: inline-flex;

    flex: 0 1 auto;
    flex-shrink: 1;

    align-items: center;

    min-width: 0;
    max-width: 240px;
    min-height: 0;

    text-decoration: none;
}


body.site-shell-v2 .header-logo,
body.site-shell-v2 .header-logo-ref {
    background: #070b12 !important;
    border: 1.5px solid #e4c24a !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.site-shell-v2 .header-logo-image {
    display: block;

    height: var(--header-logo-height, 32px);
    max-height: var(--header-logo-height, 32px);
    max-width: min(42vw, 180px);

    width: auto;
    min-width: 0;
    flex-shrink: 1;
    padding: 0;
    margin: 0;

    object-fit: contain;
    object-position: left center;

    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


body.site-shell-v2 .header-logo-placeholder {
    display: block;

    width: 88px;
    height: 28px;

    border-radius: 0;

    background: transparent;
}


body.site-shell-v2 .header-balance-link,
body.site-shell-v2 .hdr-balance {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-decoration: none;
}

body.site-shell-v2 .hdr-balance-cur {
    color: #e8c547;
}

body.site-shell-v2 .header-balance-only,
body.site-shell-v2 .header-balance-amount,
body.site-shell-v2 .hdr-balance-value {
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}



/* =========================================================
   SIDEBAR EXPAND / MOBILE BUTTON
========================================================= */

body.site-shell-v2 .mobile-header-menu,
body.site-shell-v2 .sidebar-expand-btn {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    align-items: center;
    justify-content: center;

    border:
        1px solid var(--shell-border);

    border-radius: 9px;

    color: var(--text-muted);

    background:
        var(--glass-bg-subtle);

    font-size: 1.12rem;
}


body.site-shell-v2 .mobile-header-menu {
    display: none;
}


body.site-shell-v2 .sidebar-expand-btn {
    display: none;
}


body.site-shell-v2
.app-shell.sidebar-collapsed
.sidebar-expand-btn {
    display: flex;
}


body.site-shell-v2 .mobile-header-menu:hover,
body.site-shell-v2 .sidebar-expand-btn:hover {
    color: var(--shell-gold-light);

    border-color:
        rgba(var(--primary-rgb), .25);

    background:
        rgba(var(--primary-rgb), .07);
}



/* =========================================================
   HEADER SEARCH
========================================================= */

body.site-shell-v2 .header-search {
    width: 220px;
    flex: 0 1 220px;
}


body.site-shell-v2 .header-search-trigger {
    width: 100%;
    height: 38px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0 12px;

    border:
        1px solid var(--border);

    border-radius: 999px;

    color: var(--text-dim);

    background:
        var(--glass-bg-subtle);

    font-size: .71rem;

    transition:
        border-color .2s,
        background .2s,
        color .2s;
}


body.site-shell-v2
.header-search-trigger:hover {
    color: var(--text-secondary);

    border-color:
        rgba(var(--primary-rgb),.18);

    background:
        var(--glass-bg-subtle);
}


body.site-shell-v2
.header-search-trigger > i {
    color: var(--text-muted);

    font-size: 1rem;
}


body.site-shell-v2
.header-search-trigger kbd {
    display: none;
}



/* =========================================================
   HEADER SHORTCUTS
========================================================= */

body.site-shell-v2 .header-shortcuts {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 6px;

    margin-left: auto;
}


body.site-shell-v2 .header-shortcut {
    min-height: 38px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding:
        0
        11px;

    border:
        1px solid var(--glass-bg-medium);

    border-radius: 999px;

    color: var(--primary);

    background:
        linear-gradient(
            180deg,
            var(--glass-bg-subtle),
            var(--glass-bg-subtle)
        );

    font-size: .59rem;
    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .35px;

    white-space: nowrap;

    transition:
        transform .18s,
        border-color .18s,
        background .18s;
}


body.site-shell-v2
.header-shortcut:hover {
    transform: translateY(-1px);

    border-color:
        rgba(var(--primary-rgb),.25);

    background:
        rgba(var(--primary-rgb),.07);
}


body.site-shell-v2
.header-shortcut-icon {
    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: var(--primary);

    background:
        rgba(var(--primary-rgb),.11);

    font-size: .86rem;
}


body.site-shell-v2
.header-shortcut-icon.is-live {
    position: relative;

    color: var(--primary-light);
}


body.site-shell-v2
.header-shortcut-icon.is-live::after {
    content: "";

    position: absolute;

    top: 1px;
    right: 1px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--danger);

    box-shadow:
        0 0 7px
        rgba(var(--danger-rgb),.7);
}



/* =========================================================
   HEADER RIGHT
========================================================= */

body.site-shell-v2 .header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-wrap: nowrap;

    gap: 8px;

    margin-left: auto;
    min-width: min-content;
}



/* =========================================================
   LANGUAGE / CURRENCY
========================================================= */

body.site-shell-v2 .lang-switch {
    position: relative;
}


body.site-shell-v2 .lang-btn {
    min-height: 36px;

    display: flex;
    align-items: center;

    gap: 6px;

    padding:
        0
        10px;

    border:
        1px solid var(--glass-bg-medium);

    border-radius: 10px;

    color: var(--text-secondary);

    background:
        var(--glass-bg-subtle);

    font-size: .66rem;
    font-weight: 700;

    transition:
        background .18s,
        border-color .18s;
}


body.site-shell-v2 .lang-btn:hover {
    border-color:
        rgba(var(--primary-rgb),.2);

    background:
        rgba(var(--primary-rgb),.055);
}


body.site-shell-v2 .lang-btn img {
    width: 17px;
    height: auto;

    border-radius: 2px;
}


body.site-shell-v2 .cur-sym {
    color: var(--shell-gold-light);

    font-weight: 900;
}


body.site-shell-v2 .lang-dropdown {
    position: absolute;

    z-index: 700;

    top: calc(100% + 8px);
    right: 0;

    min-width: 165px;

    overflow: hidden;

    border:
        1px solid rgba(var(--primary-rgb),.17);

    border-radius: 11px;

    background: var(--bg-panel);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.5);
}


body.site-shell-v2 .lang-option {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 10px 12px;

    color: var(--text-secondary);

    font-size: .72rem;

    transition:
        color .15s,
        background .15s;
}


body.site-shell-v2 .lang-option:hover {
    color: var(--text-primary);

    background:
        rgba(var(--primary-rgb),.07);
}


body.site-shell-v2
.lang-option.active {
    color: var(--shell-gold-light);
}



/* =========================================================
   LOGIN / REGISTER
========================================================= */

body.site-shell-v2 .btn-login,
body.site-shell-v2 .btn-register {
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    flex-shrink: 0;

    gap: 6px;

    padding:
        0
        13px;

    border-radius: 9px;

    font-size: .67rem;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .35px;

    white-space: nowrap;

    transition:
        transform .18s,
        border-color .18s,
        background .18s,
        box-shadow .18s;
}


body.site-shell-v2 .btn-login {
    border:
        1px solid var(--border);

    color: var(--text-primary);

    background:
        var(--glass-bg-subtle);
}


body.site-shell-v2 .btn-login:hover {
    transform: translateY(-1px);

    border-color:
        rgba(var(--primary-rgb),.2);

    background:
        rgba(var(--primary-rgb),.055);
}


body.site-shell-v2 .btn-register {
    min-width: 94px;

    border:
        1px solid rgba(var(--primary-rgb),.58);

    color: var(--primary-dark);

    background:
        linear-gradient(
            180deg,
            var(--primary-light),
            var(--primary-dark)
        );

    box-shadow:
        inset 0 1px 0
        rgba(var(--primary-rgb),.38),
        0 5px 14px
        rgba(var(--primary-rgb),.2);
}


body.site-shell-v2 .btn-register:hover {
    transform: translateY(-1px);

    background:
        linear-gradient(
            180deg,
            var(--primary-lighter),
            var(--primary)
        );

    box-shadow:
        0 7px 19px
        rgba(var(--primary-rgb),.3);
}



/* =========================================================
   API ACCOUNT AREA
========================================================= */

body.site-shell-v2 .lutherbet-account {
    display: flex !important;
    align-items: center;

    gap: 6px;
}


body.site-shell-v2 .lutherbet-account-link {
    position: relative;

    min-height: 38px;
    max-width: 210px;

    display: grid !important;

    grid-template-columns:
        28px
        minmax(0, 1fr)
        auto;

    grid-template-rows:
        18px
        15px;

    align-items: center;

    column-gap: 7px;

    padding:
        3px
        9px
        3px
        4px !important;

    border:
        1px solid rgba(var(--primary-rgb),.15) !important;

    border-radius:
        10px !important;

    color: var(--text-primary) !important;

    background:
        rgba(var(--primary-rgb),.045) !important;
}


body.site-shell-v2
.lutherbet-account-link::before {
    content:
        attr(data-avatar-letter);

    grid-row: 1 / 3;

    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    color: var(--primary-dark);

    background:
        linear-gradient(
            145deg,
            var(--primary-light),
            var(--primary-dark)
        );

    font-size: .67rem;
    font-weight: 900;
}


body.site-shell-v2
.lutherbet-account-link b {
    min-width: 0;

    overflow: hidden;

    color: var(--text-primary);

    font-size: .66rem;
    font-weight: 700;

    line-height: 1;

    text-overflow: ellipsis;
    white-space: nowrap;
}


body.site-shell-v2
.lutherbet-account-link span {
    grid-column: 3;
    grid-row: 1 / 3;

    color:
        var(--shell-gold-light)
        !important;

    font-size:
        .66rem
        !important;

    font-weight: 900;

    white-space: nowrap;
}


body.site-shell-v2
.lutherbet-account-link small {
    grid-column: 2;

    color:
        var(--text-dim)
        !important;

    font-size:
        .5rem
        !important;
}


/*
 * lutherbet-api.js tarafından sonradan oluşturulan
 * para yatır / çek düğmeleri.
 */
body.site-shell-v2
.lutherbet-balance-action {
    width: 32px !important;
    height: 32px !important;

    display: grid !important;
    place-items: center !important;

    padding: 0 !important;

    border-radius:
        8px !important;

    font-size:
        1rem !important;
}


body.site-shell-v2
.lutherbet-balance-action.is-deposit {
    color:
        var(--primary-light) !important;

    border-color:
        rgba(var(--primary-rgb),.3)
        !important;

    background:
        rgba(var(--primary-rgb),.08)
        !important;
}


body.site-shell-v2
.lutherbet-balance-action.is-withdraw {
    color:
        var(--text-dim) !important;

    border-color:
        var(--border)
        !important;

    background:
        var(--glass-bg-subtle)
        !important;
}


body.site-shell-v2 #lutherbetLogout {
    min-height: 34px;

    padding:
        0
        10px !important;

    border:
        1px solid var(--border)
        !important;

    border-radius:
        8px !important;

    color:
        var(--text-secondary) !important;

    background:
        var(--glass-bg-subtle)
        !important;

    font-size:
        .62rem !important;

    font-weight: 700;
}


body.site-shell-v2
#lutherbetLogout:hover {
    color:
        var(--text-primary) !important;

    border-color:
        rgba(var(--danger-rgb),.25)
        !important;

    background:
        rgba(var(--danger-rgb),.08)
        !important;
}



/* =========================================================
   MAIN CONTENT
========================================================= */

body.site-shell-v2 .main-content {
    position: relative;
    z-index: 2;

    flex: 1;

    width: 100%;
    max-width: var(--shell-content-max);

    margin: 0 auto;

    padding:
        16px
        20px
        80px;
}



/* =========================================================
   GLOBAL GOLD OVERRIDES
========================================================= */

body.site-shell-v2 .btn-primary {
    border:
        1px solid
        rgba(var(--primary-rgb),.45);

    color: var(--primary-dark);

    background:
        linear-gradient(
            180deg,
            var(--primary-light),
            var(--primary-dark)
        );

    box-shadow:
        0 9px 22px
        rgba(var(--primary-rgb),.22);
}


body.site-shell-v2 .btn-primary:hover {
    color: var(--primary-dark);

    background:
        linear-gradient(
            180deg,
            var(--primary-lighter),
            var(--primary)
        );
}


body.site-shell-v2 .filter-pill.active {
    color: var(--primary-dark);

    border-color:
        rgba(var(--primary-rgb),.42);

    background:
        linear-gradient(
            180deg,
            var(--primary-light),
            var(--primary)
        );

    box-shadow:
        0 7px 18px
        rgba(var(--primary-rgb),.2);
}


body.site-shell-v2
.game-play-btn {
    color: var(--primary-dark);

    background:
        linear-gradient(
            145deg,
            var(--primary-light),
            var(--primary-dark)
        );
}



/* =========================================================
   FOOTER SHELL
========================================================= */

body.site-shell-v2 .site-footer {
    position: relative;
    z-index: 2;

    margin-left:
        var(--shell-sidebar-width);

    padding:
        34px
        24px
        96px;

    border-top:
        1px solid
        rgba(var(--primary-rgb),.11);

    background:
        linear-gradient(
            180deg,
            rgba(10,14,19,.96),
            var(--bg-deep)
        );

    transition:
        margin-left
        .34s
        var(--shell-ease);
}


body.site-shell-v2:has(
    .app-shell.sidebar-collapsed
)
.site-footer {
    margin-left: 0;
}


body.site-shell-v2 .footer-inner {
    max-width:
        var(--shell-content-max);

    margin: 0 auto;
}


body.site-shell-v2
.publishers-section {
    border-color:
        rgba(var(--primary-rgb),.1);

    background:
        var(--glass-bg-subtle);
}


body.site-shell-v2
.footer-col h5,
body.site-shell-v2
.footer-pay-title {
    color:
        var(--shell-gold);
}


body.site-shell-v2
.footer-col a:hover {
    color:
        var(--shell-gold-light);
}


body.site-shell-v2
.footer-age-badge {
    border-color:
        rgba(var(--primary-rgb),.3);

    color:
        var(--shell-gold-light);

    background:
        rgba(var(--primary-rgb),.075);
}



/* =========================================================
   MOBILE SIDEBAR
========================================================= */

body.site-shell-v2
.mobile-sidebar-overlay {
    z-index: 700;

    background:
        rgba(1,4,8,.79);

    backdrop-filter:
        blur(8px);
}


body.site-shell-v2 .mobile-sidebar {
    width:
        min(
            86vw,
            315px
        );

    border-right:
        1px solid
        rgba(var(--primary-rgb),.15);

    background:
        linear-gradient(
            180deg,
            var(--bg-deep),
            var(--bg-deep)
        );

    box-shadow:
        25px 0 60px
        rgba(0,0,0,.46);
}


body.site-shell-v2
.mobile-sidebar-header {
    height:
        var(--shell-header-height);

    border-bottom:
        1px solid
        rgba(var(--primary-rgb),.12);

    padding:
        0
        17px;
}


body.site-shell-v2
.mobile-sidebar-header
.logo {
    color: var(--text-primary);

    font-weight: 900;
}


body.site-shell-v2
.mobile-sidebar-header
.logo span {
    color:
        var(--shell-gold-light);
}


body.site-shell-v2
.mobile-sidebar-header
button {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    color: var(--text-muted);

    background:
        var(--glass-bg-subtle);
}


body.site-shell-v2
.mobile-sidebar
.sidebar-nav {
    padding:
        14px
        12px
        24px;
}



/* =========================================================
   MOBILE BOTTOM NAV
========================================================= */

body.site-shell-v2
.mobile-bottom-nav {
    z-index: 600;

    border-top:
        1px solid
        rgba(var(--primary-rgb), .12);

    background:
        rgba(7,11,16,.97);

    box-shadow:
        0 -12px 30px
        rgba(0,0,0,.3);

    backdrop-filter:
        blur(16px);
}


body.site-shell-v2
.mobile-bottom-nav > * {
    color: var(--text-muted);
}


body.site-shell-v2
.mobile-bottom-nav > *.active {
    color:
        var(--primary-light);

    background:
        rgba(var(--primary-rgb),.07);
}


body.site-shell-v2
.mobile-nav-brand {
    background: transparent;
}

body.site-shell-v2
.mobile-nav-brand-mark {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}



/* =========================================================
   MODALS
========================================================= */

body.site-shell-v2 .modal-overlay,
body.site-shell-v2 .cmdp-backdrop {
    background:
        rgba(2,4,7,.82);

    backdrop-filter:
        blur(9px);
}


body.site-shell-v2 .modal-box,
body.site-shell-v2 .cmdp-panel {
    border:
        1px solid
        rgba(var(--primary-rgb),.17);

    background:
        linear-gradient(
            155deg,
            var(--bg-panel),
            var(--bg-deep)
        );

    box-shadow:
        0 30px 75px
        rgba(0,0,0,.56);
}


body.site-shell-v2 .modal-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 12px;
    padding: 0;
    background: none;
    font-size: 0;
    line-height: 0;
}

body.site-shell-v2 .modal-logo-image {
    display: block;
    height: var(--header-logo-height, 32px);
    max-height: var(--header-logo-height, 32px);
    width: auto;
    max-width: min(220px, 72%);
    object-fit: contain;
    object-position: center;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.site-shell-v2 .modal-logo-placeholder {
    display: block;
    width: 88px;
    height: 28px;
}


/* =========================================================
   RESPONSIVE 1400
========================================================= */

@media (max-width: 1400px) {

    body.site-shell-v2
    .header-shortcut:nth-child(4) {
        display: none;
    }


    body.site-shell-v2
    .header-search {
        width: 190px;
        flex-basis: 190px;
    }

}



/* =========================================================
   RESPONSIVE 1250
========================================================= */

@media (max-width: 1250px) {

    body.site-shell-v2
    .header-shortcut:nth-child(3),
    body.site-shell-v2
    .header-shortcut:nth-child(4) {
        display: none;
    }


    body.site-shell-v2
    .header-search {
        width: 170px;
        flex-basis: 170px;
    }

}



/* =========================================================
   RESPONSIVE 1120
========================================================= */

@media (max-width: 1120px) {

    body.site-shell-v2
    .header-shortcuts {
        display: none;
    }


    body.site-shell-v2
    .header-search {
        margin-left: auto;

        width: min(280px, 30vw);
        flex-basis: min(280px, 30vw);
    }

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    :root {
        --shell-sidebar-width: 0px;
    }


    body.site-shell-v2 .sidebar {
        display: none;
    }


    body.site-shell-v2 .mobile-header-menu,
    body.site-shell-v2 .sidebar-expand-btn {
        display: none !important;
    }


    body.site-shell-v2 .header-logo {
        display: inline-flex;
        align-items: center;
    }


    body.site-shell-v2 .top-header-inner {
        padding:
            0
            14px;
    }


    body.site-shell-v2 .site-footer,
    body.site-shell-v2:has(
        .app-shell.sidebar-collapsed
    )
    .site-footer {
        margin-left: 0;
    }


    body.site-shell-v2 .main-content {
        padding:
            19px
            16px
            100px;
    }

}



/* =========================================================
   MOBILE BASE LAYOUT
   Header auth görünümü dosyanın sonundaki tek mobil header
   bölümünden yönetilir.
========================================================= */

@media (max-width: 780px) {
    :root {
        --shell-notice-height: 29px;
        --shell-header-height: 61px;
    }

    body.site-shell-v2 .top-announcement-icon {
        width: 30px;
        flex-basis: 30px;
        font-size: .85rem;
    }

    body.site-shell-v2 .top-announcement-track {
        gap: 20px;
        font-size: 8px;
        letter-spacing: .35px;
    }

    body.site-shell-v2 .top-announcement-close {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    body.site-shell-v2 .main-content {
        padding: 10px 10px 80px;
    }

    body.site-shell-v2 .mobile-bottom-nav {
        display: flex;
        height: calc(62px + env(safe-area-inset-bottom));
        padding: 4px 6px env(safe-area-inset-bottom);
    }

    body.site-shell-v2 .site-footer {
        padding: 20px 13px 90px;
    }

    body.site-shell-v2 .footer-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }

    body.site-shell-v2 .footer-col {
        border-top: 1px solid rgba(var(--primary-rgb),.08);
    }
}


/* =========================================================
   SMALL MOBILE BASE
========================================================= */

@media (max-width: 480px) {
    body.site-shell-v2 .sidebar-promo-card {
        min-height: 116px;
    }

    body.site-shell-v2 .mobile-sidebar {
        width: 88vw;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    html {
        scroll-behavior: auto;
    }


    body.site-shell-v2
    .top-announcement-track {
        animation: none;
    }


    body.site-shell-v2 *,
    body.site-shell-v2 *::before,
    body.site-shell-v2 *::after {
        scroll-behavior:
            auto !important;
    }

}

/* =========================================================
   PRODUCTION LAYOUT FIXES
   One source of truth for notice, fixed desktop sidebar,
   mobile auth header and scale behaviour.
========================================================= */

html,
body,
body.site-shell-v2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

html,
body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: pan-x pan-y;
}

body.site-shell-v2 .site-top-stack {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

body.site-shell-v2 .site-top-stack .top-header {
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
}

body.site-shell-v2 .site-top-stack.notice-closed,
body.site-shell-v2 .site-top-stack.notice-closed .top-header {
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
}

body.site-shell-v2 .site-top-stack.notice-closed #siteTopNotice {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    visibility: hidden !important;
}

/* The wrapper exists only to group desktop search + shortcuts. */
body.site-shell-v2 .header-desktop-area {
    display: contents;
}

/* Wallet shortcut stays hidden. Refresh is shown when logged in. */
body.site-shell-v2 .header-wallet-shortcut {
    display: none;
}

body.site-shell-v2 .header-wallet-shortcut[hidden],
body.site-shell-v2 .header-wallet-refresh[hidden],
body.site-shell-v2 #openLogin[hidden],
body.site-shell-v2 #openRegister[hidden] {
    display: none !important;
}

/* =========================================================
   DESKTOP FIXED SIDEBAR
========================================================= */

@media (min-width: 1025px) {
    body.site-shell-v2 .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        overflow: hidden;
        z-index: 999 !important;
    }

    body.site-shell-v2 .main-column {
        flex: none;
        width: calc(100% - var(--shell-sidebar-width));
        margin-left: var(--shell-sidebar-width);
        transition:
            margin-left .34s var(--shell-ease),
            width .34s var(--shell-ease);
    }

    body.site-shell-v2 .app-shell.sidebar-collapsed .main-column {
        width: 100%;
        margin-left: 0;
    }
}

/* =========================================================
   MOBILE HEADER

   Guest:
   [LOGO] [GIRIS] [KAYIT]

   Authenticated:
   [LOGO] [wallet] [balance] [refresh]
========================================================= */

@media (max-width: 780px) {
    :root {
        --shell-notice-height: 29px;
        --shell-header-height: 61px;
    }

    body.site-shell-v2 .main-column {
        width: 100%;
        margin-left: 0;
    }

    body.site-shell-v2 .top-header {
        height: auto !important;
        min-height: max(
            var(--shell-header-height),
            calc(var(--header-logo-height, 32px) + 20px)
        ) !important;
        background:
            linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-base) 100%) !important;
        border-bottom: 1px solid var(--border) !important;
        box-shadow: 0 5px 18px rgba(0,0,0,.24);
    }

    body.site-shell-v2 .top-header-inner {
        width: 100%;
        height: 100% !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px !important;
        padding: 0 12px !important;
        box-sizing: border-box;
    }

    /* Desktop-only header content disappears only on mobile. */
    body.site-shell-v2 .header-desktop-area,
    body.site-shell-v2 .header-search,
    body.site-shell-v2 .header-shortcuts,
    body.site-shell-v2 .cur-switch,
    body.site-shell-v2 .header-language {
        display: none !important;
    }

    body.site-shell-v2 .mobile-header-menu,
    body.site-shell-v2 .sidebar-expand-btn {
        display: none !important;
    }

    body.site-shell-v2 .top-header .header-logo {
        flex: 0 1 auto;
        flex-shrink: 1;
        display: inline-flex !important;
        align-items: center;
        width: auto;
        min-width: 0;
        max-width: 180px;
        min-height: 0;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        text-decoration: none;
    }

    body.site-shell-v2 .top-header .header-logo-image {
        height: var(--header-logo-height, 32px);
        max-height: var(--header-logo-height, 32px);
        max-width: min(42vw, 180px);
        width: auto;
        min-width: 0;
        flex-shrink: 1;
        padding: 0;
        margin: 0;
        object-fit: contain;
        background: none !important;
        background-color: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.site-shell-v2 .top-header .header-logo-placeholder {
        width: 84px;
        height: 28px;
    }

    body.site-shell-v2 .header-right,
    body.site-shell-v2 .header-right-ref {
        position: relative;
        flex: 0 0 auto;
        flex-shrink: 0;
        flex-wrap: nowrap;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px !important;
        margin-left: auto !important;
        min-width: min-content;
    }

    /* ---------- GUEST ---------- */

    body.site-shell-v2 #openLogin:not([hidden]),
    body.site-shell-v2 #openRegister:not([hidden]) {
        height: 36px;
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        flex-shrink: 0;
        gap: 6px;
        padding: 0 11px !important;
        border-radius: 9px !important;
        font-size: .72rem !important;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
        overflow: visible;
    }

    body.site-shell-v2 #openLogin:not([hidden]) {
        min-width: 72px;
        color: var(--text-primary);
        border: 1px solid var(--border-strong) !important;
        background: var(--glass-bg-subtle) !important;
    }

    body.site-shell-v2 #openRegister:not([hidden]) {
        min-width: 82px;
        color: var(--primary-dark) !important;
        border: 1px solid rgba(var(--primary-rgb),.6) !important;
        background:
            linear-gradient(180deg, var(--primary-light), var(--primary-dark)) !important;
        box-shadow:
            inset 0 1px 0 rgba(var(--primary-rgb),.38),
            0 5px 14px rgba(var(--primary-rgb),.2);
    }

    body.site-shell-v2 #openLogin:not([hidden]) i,
    body.site-shell-v2 #openRegister:not([hidden]) i {
        display: inline-block !important;
        font-size: .88rem;
    }

    /* ---------- AUTHENTICATED: plain gold balance ---------- */

    body.site-shell-v2 .top-header.is-authenticated .header-right,
    body.site-shell-v2 .top-header.is-authenticated .header-right-ref {
        gap: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }

    body.site-shell-v2 .header-wallet-shortcut,
    body.site-shell-v2 .header-wallet-shortcut:not([hidden]) {
        display: none !important;
    }

    body.site-shell-v2 #lutherbetAccount,
    body.site-shell-v2 .lutherbet-account {
        order: 20;
        position: static;
        min-width: 0;
        height: auto !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.site-shell-v2 #lutherbetAccount .lutherbet-balance-action,
    body.site-shell-v2 #lutherbetLogout {
        display: none !important;
    }

    /* Prevent iOS focus zoom without enlarging regular buttons. */
    body.site-shell-v2 input,
    body.site-shell-v2 textarea,
    body.site-shell-v2 select {
        font-size: 16px !important;
    }
}

@keyframes shellWalletSpin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {
    body.site-shell-v2 .top-header-inner {
        gap: 8px !important;
        padding: 0 10px !important;
    }

    body.site-shell-v2 .top-header .header-logo {
        max-width: 160px;
    }

    body.site-shell-v2 .top-header .header-logo-image {
        max-width: min(38vw, 160px);
    }

    body.site-shell-v2 .top-header .header-logo-placeholder {
        width: 64px;
    }

    body.site-shell-v2 #openLogin:not([hidden]) {
        min-width: 64px;
        padding-inline: 9px !important;
        font-size: .68rem !important;
    }

    body.site-shell-v2 #openRegister:not([hidden]) {
        min-width: 74px;
        padding-inline: 9px !important;
        font-size: .68rem !important;
    }

    body.site-shell-v2 .top-header.is-authenticated .header-right,
    body.site-shell-v2 .top-header.is-authenticated .header-right-ref {
        height: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }
}

@media (max-width: 350px) {
    body.site-shell-v2 #openLogin:not([hidden]),
    body.site-shell-v2 #openRegister:not([hidden]) {
        min-width: 0;
        padding-inline: 8px !important;
        font-size: .64rem !important;
    }
}


/* =========================================================
   LUTHERBET SIDEBAR V3
   Dark / Gold modern sidebar
   ---------------------------------------------------------
   SADECE SIDEBAR TASARIMI
   Header / Auth / API / Games alanına müdahale etmez.
========================================================= */


/* =========================================================
   DESKTOP SIDEBAR WIDTH
========================================================= */

@media (min-width: 1025px) {

    :root {
        --shell-sidebar-width: 236px;
    }

}


/* =========================================================
   SIDEBAR SHELL
========================================================= */

body.site-shell-v2 .loca-sidebar {
    color: var(--text-primary);

    border-right:
        1px solid rgba(var(--primary-rgb), .14);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(var(--primary-rgb), .075),
            transparent 240px
        ),
        linear-gradient(
            180deg,
            var(--bg-panel) 0%,
            var(--bg-deep) 45%,
            var(--bg-deep) 100%
        );

    box-shadow:
        16px 0 42px rgba(0, 0, 0, .24);
}


/* ince dekoratif çizgi */

body.site-shell-v2 .loca-sidebar::after {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;

    width: 1px;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(var(--primary-rgb),.3),
            rgba(var(--primary-rgb), .06) 28%,
            transparent 72%
        );
}


/* =========================================================
   TOP / LOGO
========================================================= */

body.site-shell-v2 .loca-sidebar-top {
    position: relative;
    z-index: 3;

    height: var(--shell-header-height);
    min-height: var(--shell-header-height);

    padding:
        0
        14px
        0
        17px;

    border-bottom:
        1px solid rgba(var(--primary-rgb), .12);

    background:
        linear-gradient(
            180deg,
            var(--glass-bg-subtle),
            rgba(255, 255, 255, 0)
        );
}


body.site-shell-v2 .loca-sidebar-top::after {
    content: "";

    position: absolute;
    right: 14px;
    bottom: -1px;
    left: 14px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--primary-rgb), .22),
            transparent
        );
}


body.site-shell-v2 .loca-sidebar .sidebar-logo {
    position: relative;
    text-decoration: none;
    text-shadow: none;
}


body.site-shell-v2 .loca-sidebar .sidebar-collapse-control {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    border:
        1px solid rgba(var(--primary-rgb), .12);

    border-radius: 9px;

    color: var(--primary-dark);

    background:
        var(--glass-bg-subtle);

    font-size: 1.1rem;

    cursor: pointer;
}


body.site-shell-v2 .loca-sidebar .sidebar-collapse-control:hover {
    color: var(--primary-light);

    border-color:
        rgba(var(--primary-rgb), .28);

    background:
        rgba(var(--primary-rgb), .08);
}


/* =========================================================
   SCROLL AREA
========================================================= */

body.site-shell-v2 .sidebar-nav-modern {
    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;

    padding:
        15px
        10px
        16px;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(var(--primary-rgb), .23)
        transparent;
}


body.site-shell-v2
.sidebar-nav-modern::-webkit-scrollbar {
    width: 4px;
}


body.site-shell-v2
.sidebar-nav-modern::-webkit-scrollbar-thumb {
    border: 0;

    border-radius: 999px;

    background:
        rgba(var(--primary-rgb), .22);
}


/* =========================================================
   SIDEBAR CONTENT
========================================================= */

body.site-shell-v2 .sidebar-content {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
}


/* =========================================================
   SECTION
========================================================= */

body.site-shell-v2 .sidebar-section {
    width: 100%;
}


body.site-shell-v2 .sidebar-section-title {
    display: flex;
    align-items: center;

    min-height: 20px;

    margin:
        0
        0
        7px;

    padding:
        0
        8px;

    color: var(--primary-dark);

    font-size: .56rem;
    font-weight: 900;

    line-height: 1;

    letter-spacing: 1.65px;

    text-transform: uppercase;
}


/* başlığın solundaki minik altın çizgi */

body.site-shell-v2 .sidebar-section-title::before {
    content: "";

    width: 3px;
    height: 10px;

    flex: 0 0 3px;

    margin-right: 7px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--primary-light),
            var(--primary-dark)
        );

    box-shadow:
        0 0 8px rgba(var(--primary-rgb), .2);
}


/* =========================================================
   SECTION DIVIDER
========================================================= */

body.site-shell-v2 .sidebar-section-divider {
    height: 1px;

    margin:
        12px
        7px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--primary-rgb), .105),
            transparent
        );
}


/* =========================================================
   RESET OLD NAV GROUP RULES
========================================================= */

body.site-shell-v2
.sidebar-main-menu-section
.nav-group {
    gap: 2px;

    margin: 0;

    padding: 0;

    border: 0;
}


/* =========================================================
   QUICK ACCESS
========================================================= */

body.site-shell-v2 .sidebar-quick-list {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


body.site-shell-v2 .sidebar-quick-link {
    min-height: 41px;

    padding:
        5px
        7px;

    border:
        1px solid var(--glass-bg-medium);

    border-radius: 9px;

    color: var(--text-dim);

    background:
        var(--glass-bg-subtle);

    font-size: .72rem;
    font-weight: 650;

    text-decoration: none;
}


body.site-shell-v2 .sidebar-quick-link:hover {
    color: var(--text-primary);

    border-color:
        rgba(var(--primary-rgb), .2);

    background:
        linear-gradient(
            90deg,
            rgba(var(--primary-rgb), .105),
            rgba(var(--primary-rgb), .025)
        );

    transform: translateX(1px);
}


/* hızlı erişim ikonları */

body.site-shell-v2
.sidebar-quick-link
.sidebar-quick-icon {
    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    border:
        1px solid rgba(var(--primary-rgb), .12);

    border-radius: 8px;

    color: var(--primary);

    background:
        rgba(var(--primary-rgb), .06);

    font-size: 1rem;
}


/* =========================================================
   VIP
========================================================= */

body.site-shell-v2
.sidebar-quick-link.is-vip {
    border-color:
        rgba(var(--primary-rgb), .22);

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(var(--primary-rgb),.1),
            transparent 48%
        ),
        linear-gradient(
            90deg,
            rgba(var(--primary-rgb), .075),
            var(--glass-bg-subtle)
        );
}


body.site-shell-v2
.sidebar-quick-link.is-vip
.sidebar-quick-icon {
    color: var(--primary-lighter);

    border-color:
        rgba(var(--primary-rgb),.28);

    background:
        linear-gradient(
            145deg,
            rgba(var(--primary-rgb),.18),
            rgba(var(--primary-rgb),.09)
        );

    box-shadow:
        inset 0 1px
        var(--glass-bg-subtle);
}


/* =========================================================
   BONUS
========================================================= */

body.site-shell-v2
.sidebar-quick-link.is-bonus
.sidebar-quick-icon {
    color: var(--primary-light);
}


/* =========================================================
   LIVE TV
========================================================= */

body.site-shell-v2
.sidebar-quick-link.is-live-tv {
    border-color:
        rgba(var(--danger-rgb),.15);

    background:
        linear-gradient(
            90deg,
            rgba(var(--danger-rgb),.055),
            var(--glass-bg-subtle)
        );
}


body.site-shell-v2
.sidebar-quick-link.is-live-tv
.sidebar-quick-icon {
    color: var(--danger-light);

    border-color:
        rgba(var(--danger-rgb), .16);

    background:
        rgba(var(--danger-rgb),.055);
}


/* =========================================================
   LIVE INDICATOR
========================================================= */

body.site-shell-v2 .sidebar-live-indicator {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    margin-left: auto;

    padding:
        3px
        5px;

    border:
        1px solid rgba(var(--danger-rgb),.13);

    border-radius: 999px;

    color: var(--danger-light);

    background:
        rgba(var(--danger-rgb),.055);

    font-size: .43rem;
    font-weight: 900;

    letter-spacing: .4px;
}


body.site-shell-v2 .sidebar-live-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: var(--danger);

    box-shadow:
        0 0 0 3px rgba(var(--danger-rgb),.09),
        0 0 8px rgba(var(--danger-rgb),.32);

    animation:
        sidebarLivePulse
        1.8s
        ease-in-out
        infinite;
}


@keyframes sidebarLivePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .45;
    }

}


/* =========================================================
   MAIN MENU
========================================================= */

body.site-shell-v2 .sidebar-menu-link {
    min-height: 39px;

    gap: 8px;

    padding:
        5px
        7px;

    border:
        1px solid transparent;

    border-radius: 8px;

    color: var(--text-secondary);

    background: transparent;

    font-size: .71rem;
    font-weight: 560;

    text-decoration: none;
}


body.site-shell-v2
.sidebar-menu-link
.nav-icon {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    border-radius: 7px;

    color: var(--primary);

    background:
        var(--glass-bg-subtle);

    font-size: .96rem;
}


body.site-shell-v2
.sidebar-menu-link:hover {
    color: var(--text-primary);

    border-color:
        rgba(var(--primary-rgb), .095);

    background:
        linear-gradient(
            90deg,
            rgba(var(--primary-rgb), .065),
            rgba(var(--primary-rgb), .012)
        );
}


body.site-shell-v2
.sidebar-menu-link:hover
.nav-icon {
    color: var(--primary-light);

    background:
        rgba(var(--primary-rgb), .075);
}


/* =========================================================
   ACTIVE MENU ITEM
========================================================= */

body.site-shell-v2
.sidebar-menu-link.active {
    color: var(--text-primary);

    border-color:
        rgba(var(--primary-rgb), .16);

    background:
        radial-gradient(
            circle at 5% 50%,
            rgba(var(--primary-rgb), .15),
            transparent 45%
        ),
        linear-gradient(
            90deg,
            rgba(var(--primary-rgb), .115),
            rgba(var(--primary-rgb), .018)
        );

    box-shadow:
        inset 2px 0 0
        var(--shell-gold);
}


body.site-shell-v2
.sidebar-menu-link.active
.nav-icon {
    color: var(--primary-light);

    background:
        rgba(var(--primary-rgb), .095);
}


/* =========================================================
   MENU LIVE DOT
========================================================= */

body.site-shell-v2 .sidebar-mini-live {
    display: inline-grid;
    place-items: center;

    margin-left: auto;

    padding-right: 2px;
}


/* =========================================================
   ONLINE BADGE
========================================================= */

body.site-shell-v2
.sidebar-main-menu-section
.nav-badge-online {
    margin-left: auto;

    padding:
        3px
        5px;

    border:
        1px solid rgba(var(--danger-rgb),.14);

    border-radius: 999px;

    color: var(--danger-light);

    background:
        rgba(var(--danger-rgb),.07);

    font-size: .4rem;
    font-weight: 900;

    letter-spacing: .35px;
}


/* =========================================================
   ARROWS
========================================================= */

body.site-shell-v2 .sidebar-link-arrow {
    width: 15px;

    flex: 0 0 15px;

    display: grid;
    place-items: center;

    margin-left: 1px;

    color: var(--glass-border);

    font-size: .9rem;

    transition:
        color .18s ease,
        transform .18s ease;
}


body.site-shell-v2
.sidebar-menu-link
.sidebar-link-arrow {
    opacity: 0;
}


body.site-shell-v2
.sidebar-menu-link:hover
.sidebar-link-arrow,
body.site-shell-v2
.sidebar-menu-link.active
.sidebar-link-arrow {
    opacity: 1;

    color:
        rgba(var(--primary-rgb),.62);
}


body.site-shell-v2
.nav-item:hover
.sidebar-link-arrow {
    transform:
        translateX(2px);
}


/* =========================================================
   LABELS
========================================================= */

body.site-shell-v2
.sidebar-content
.nav-label {
    min-width: 0;

    flex: 1;

    overflow: hidden;

    color: inherit;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   LANGUAGE SECTION
========================================================= */

body.site-shell-v2 .sidebar-language-list {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


body.site-shell-v2 .sidebar-language-link {
    min-height: 40px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding:
        5px
        8px;

    border:
        1px solid var(--glass-bg-subtle);

    border-radius: 8px;

    color: var(--text-secondary);

    background:
        var(--glass-bg-subtle);

    font-size: .69rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease;
}


body.site-shell-v2
.sidebar-language-link:hover {
    color: var(--text-primary);

    border-color:
        rgba(var(--primary-rgb), .13);

    background:
        rgba(var(--primary-rgb), .05);
}


body.site-shell-v2
.sidebar-language-link.active {
    color: var(--text-secondary);

    border-color:
        rgba(var(--primary-rgb), .17);

    background:
        linear-gradient(
            90deg,
            rgba(var(--primary-rgb), .08),
            rgba(var(--primary-rgb), .015)
        );
}


/* =========================================================
   LANGUAGE FLAG
========================================================= */

body.site-shell-v2 .sidebar-language-flag {
    width: 26px;
    height: 20px;

    flex: 0 0 26px;

    display: grid;
    place-items: center;

    overflow: hidden;

    padding: 2px;

    border:
        1px solid var(--border);

    border-radius: 5px;

    background:
        var(--glass-bg-subtle);
}


body.site-shell-v2
.sidebar-language-flag
img {
    width: 100%;
    height: 100%;

    display: block;

    border-radius: 3px;

    object-fit: cover;
}


body.site-shell-v2 .sidebar-language-name {
    min-width: 0;

    flex: 1;
}


body.site-shell-v2 .sidebar-language-code {
    color: var(--text-dim);

    font-size: .52rem;
    font-weight: 800;

    letter-spacing: .5px;
}


body.site-shell-v2
.sidebar-language-link.active
.sidebar-language-code {
    color: var(--primary-dark);
}


body.site-shell-v2 .sidebar-language-check {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: var(--primary-dark);

    background:
        linear-gradient(
            145deg,
            var(--primary-light),
            var(--primary-dark)
        );

    font-size: .77rem;
    font-weight: 900;
}


/* =========================================================
   SIDEBAR FOOTER
========================================================= */

body.site-shell-v2 .sidebar-footer-mini {
    width: 100%;

    min-height: 39px;

    flex: 0 0 39px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        0
        15px;

    border-top:
        1px solid rgba(var(--primary-rgb), .08);

    color: var(--text-dim);

    background:
        rgba(0, 0, 0, .14);

    font-size: .53rem;
    font-weight: 650;

    letter-spacing: .25px;
}


body.site-shell-v2
.sidebar-footer-mini
.bx-lock-alt {
    margin-left: auto;

    color: var(--primary-dark);

    font-size: .8rem;
}


body.site-shell-v2 .sidebar-footer-status {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: var(--success);

    box-shadow:
        0 0 7px rgba(var(--success-rgb), .36);
}


/* =========================================================
   DESKTOP ONLY
========================================================= */

@media (min-width: 1025px) {

    body.site-shell-v2
    .loca-sidebar
    .sidebar-nav-modern {
        width:
            var(--shell-sidebar-width);
    }


    body.site-shell-v2
    .loca-sidebar
    .sidebar-footer-mini {
        width:
            var(--shell-sidebar-width);
    }

}


/* =========================================================
   MOBILE SIDEBAR
========================================================= */

body.site-shell-v2 .loca-mobile-sidebar {
    display: flex;
    flex-direction: column;

    width:
        min(
            88vw,
            318px
        );

    height: 100%;
    max-height: 100dvh;

    overflow: hidden;

    border-right:
        1px solid rgba(var(--primary-rgb), .15);

    background:
        radial-gradient(
            circle at 45% 0,
            rgba(var(--primary-rgb), .085),
            transparent 230px
        ),
        linear-gradient(
            180deg,
            var(--bg-panel),
            var(--bg-deep)
        );

    box-shadow:
        25px 0 65px
        rgba(0, 0, 0, .55);
}


/* =========================================================
   MOBILE SIDEBAR HEADER
========================================================= */

body.site-shell-v2
.loca-mobile-sidebar
.mobile-sidebar-header {
    position: relative;

    height: 61px;
    min-height: 61px;

    flex: 0 0 61px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0
        13px
        0
        16px;

    border-bottom:
        1px solid rgba(var(--primary-rgb), .12);

    background:
        var(--glass-bg-subtle);
}


body.site-shell-v2
.loca-mobile-sidebar
.mobile-sidebar-logo {
    text-decoration: none;
}

body.site-shell-v2
.loca-mobile-sidebar
.sidebar-logo-image {
    max-width: 160px;
    max-height: 32px;
}


/* =========================================================
   MOBILE CLOSE
========================================================= */

body.site-shell-v2
.loca-mobile-sidebar
.mobile-sidebar-close {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid var(--glass-bg-medium);

    border-radius: 9px;

    color: var(--text-secondary);

    background:
        var(--glass-bg-subtle);

    font-size: 1.25rem;

    cursor: pointer;
}


body.site-shell-v2
.loca-mobile-sidebar
.mobile-sidebar-close:hover {
    color: var(--primary-light);

    border-color:
        rgba(var(--primary-rgb), .2);

    background:
        rgba(var(--primary-rgb), .07);
}


/* =========================================================
   MOBILE NAV SCROLL
========================================================= */

body.site-shell-v2
.loca-mobile-sidebar
.mobile-sidebar-nav {
    flex: 1;

    min-height: 0;

    padding:
        13px
        11px
        18px;

    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   MOBILE ITEM SIZING
========================================================= */

body.site-shell-v2
.loca-mobile-sidebar
.sidebar-quick-link {
    min-height: 44px;

    font-size: .76rem;
}


body.site-shell-v2
.loca-mobile-sidebar
.sidebar-menu-link {
    min-height: 42px;

    font-size: .75rem;
}


body.site-shell-v2
.loca-mobile-sidebar
.sidebar-language-link {
    min-height: 43px;

    font-size: .74rem;
}


body.site-shell-v2
.loca-mobile-sidebar
.sidebar-section-title {
    margin-bottom: 8px;

    font-size: .57rem;
}


/* =========================================================
   MOBILE FOOTER
========================================================= */

body.site-shell-v2
.loca-mobile-sidebar
.mobile-sidebar-footer {
    min-height: 42px;

    flex: 0 0 42px;

    padding-left: 16px;

    padding-right: 16px;
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    body.site-shell-v2 .loca-mobile-sidebar {
        width: 91vw;
        max-width: 305px;
    }


    body.site-shell-v2
    .loca-mobile-sidebar
    .mobile-sidebar-nav {
        padding-left: 9px;
        padding-right: 9px;
    }


    body.site-shell-v2
    .sidebar-live-text {
        display: none;
    }


    body.site-shell-v2
    .sidebar-live-indicator {
        padding:
            4px
            5px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.site-shell-v2 .sidebar-live-dot {
        animation: none;
    }


    body.site-shell-v2 .nav-item,
    body.site-shell-v2 .sidebar-language-link,
    body.site-shell-v2 .sidebar-link-arrow {
        transition: none;
    }

}


/* =========================================================
   LUTHERBET SIDEBAR V3.1
   DESKTOP COLLAPSED MODE
   ---------------------------------------------------------
   Sadece masaüstünde daraltılmış sidebar görünümünü düzenler.
========================================================= */

@media (min-width: 1025px) {

    /* =====================================================
       COLLAPSED SIDEBAR
    ====================================================== */

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .loca-sidebar {
        overflow: visible;
    }


    /* =====================================================
       LOGO
       Dar durumda sadece L iÅŸareti
    ====================================================== */

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .loca-sidebar-top {
        justify-content: center !important;

        padding-left: 8px !important;
        padding-right: 8px !important;
    }


    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-logo {
        width: 38px;
        height: 38px;
        max-width: 38px;
        flex: 0 0 38px;
        display: grid !important;
        place-items: center;
        overflow: hidden;
        border: 0 !important;
        border-radius: 0;
        background: transparent !important;
        font-size: 0 !important;
    }

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-logo::before {
        content: none !important;
    }

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-logo-image {
        width: 100%;
        height: auto;
        max-width: 36px;
        max-height: 32px;
    }

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-logo-placeholder {
        width: 28px;
        height: 20px;
    }


    /* collapse butonu dar durumda gizlenir;
       header içindeki expand butonu açmak için kullanılır */

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    #sidebarCollapseBtn {
        display: none !important;
    }


    /* =====================================================
       SCROLL AREA
    ====================================================== */

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-nav-modern {
        padding:
            13px
            7px
            14px !important;

        align-items: center;
    }


    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-content {
        align-items: center;
    }


    /* =====================================================
       SECTION TITLES / DIVIDERS
    ====================================================== */

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-section-title {
        display: none !important;
    }


    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-section-divider {
        width: 30px;

        margin:
            10px
            auto !important;
    }


    /* =====================================================
       LINKS
    ====================================================== */

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-quick-list,
    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-language-list,
    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-main-menu-section
    .nav-group {
        width: 100%;

        align-items: center;
    }


    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-quick-link,
    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-menu-link {
        position: relative;

        width: 44px !important;
        min-width: 44px !important;

        height: 44px !important;
        min-height: 44px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 0 !important;

        margin:
            0
            auto !important;

        padding: 0 !important;

        border-radius: 10px !important;
    }


    /* =====================================================
       ICONS
    ====================================================== */

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-quick-link
    .nav-icon,
    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-menu-link
    .nav-icon {
        width: 34px !important;
        height: 34px !important;

        flex:
            0
            0
            34px !important;

        display: grid !important;
        place-items: center !important;

        margin: 0 !important;

        border-radius: 9px !important;

        font-size: 1.08rem !important;
    }


    /* =====================================================
       TEXTLER GÄ°ZLENÄ°R
    ====================================================== */

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-content
    .nav-label,

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-link-arrow,

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-live-indicator,

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-mini-live,

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .nav-badge-online {
        display: none !important;
    }


    /* =====================================================
       ACTIVE ITEM
    ====================================================== */

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-menu-link.active {
        box-shadow:
            inset 0 0 0 1px
            rgba(var(--primary-rgb), .25),

            0 0 15px
            rgba(var(--primary-rgb), .06) !important;
    }


    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-menu-link.active::before {
        content: "";

        position: absolute;

        left: -7px;
        top: 50%;

        width: 3px;
        height: 22px;

        border-radius:
            0
            5px
            5px
            0;

        background:
            linear-gradient(
                180deg,
                var(--primary-light),
                var(--primary-dark)
            );

        transform:
            translateY(-50%);

        box-shadow:
            0 0 8px
            rgba(var(--primary-rgb), .25);
    }


    /* =====================================================
       TOOLTIP
       Dar sidebar'da ikon üstüne gelince isim gösterilir.
    ====================================================== */

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-quick-link::after,

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-menu-link::after {
        content:
            attr(aria-label);

        position: absolute;

        left: calc(100% + 12px);
        top: 50%;

        z-index: 99999;

        min-width: max-content;

        padding:
            7px
            10px;

        border:
            1px solid rgba(var(--primary-rgb), .17);

        border-radius: 7px;

        color: var(--text-secondary);

        background: var(--bg-panel);

        box-shadow:
            0 10px 28px
            rgba(0, 0, 0, .38);

        font-size: .66rem;
        font-weight: 650;

        line-height: 1;

        letter-spacing: .1px;

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transform:
            translate(
                -4px,
                -50%
            );

        transition:
            opacity .15s ease,
            transform .15s ease,
            visibility .15s ease;
    }


    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-quick-link:hover::after,

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-menu-link:hover::after {
        opacity: 1;
        visibility: visible;

        transform:
            translate(
                0,
                -50%
            );
    }


    /* =====================================================
       LANGUAGE COLLAPSED
    ====================================================== */

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-language-link {
        width: 44px !important;
        min-width: 44px !important;

        height: 42px !important;
        min-height: 42px !important;

        display: flex !important;
        justify-content: center !important;

        margin:
            0
            auto !important;

        padding: 0 !important;

        border-radius: 9px !important;
    }


    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-language-name,

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-language-code,

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-language-check {
        display: none !important;
    }


    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-language-flag {
        width: 27px !important;
        height: 21px !important;

        flex:
            0
            0
            27px !important;

        margin: 0 !important;
    }


    /* =====================================================
       FOOTER COLLAPSED
    ====================================================== */

    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-footer-mini {
        justify-content: center;

        padding:
            0
            6px !important;
    }


    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-footer-mini > span:not(.sidebar-footer-status) {
        display: none !important;
    }


    body.site-shell-v2
    .app-shell.sidebar-collapsed
    .sidebar-footer-mini
    .bx-lock-alt {
        margin-left: 3px;
    }

}

.sidebar-quick-link.is-vip .sidebar-quick-icon i {
    color: var(--primary);
    filter:
        drop-shadow(0 0 6px rgba(var(--primary-rgb), .8))
        drop-shadow(0 0 14px rgba(var(--primary-rgb), .5));
    animation: vipGlow 2s ease-in-out infinite;
}

@keyframes vipGlow {
    0%,100% {
        transform: scale(1);
        filter:
            drop-shadow(0 0 5px rgba(var(--primary-rgb), .6));
    }

    50% {
        transform: scale(1.12);
        filter:
            drop-shadow(0 0 12px rgba(var(--primary-rgb), 1))
            drop-shadow(0 0 20px rgba(var(--primary-rgb), .7));
    }
}

/* =========================================================
   HEADER BALANCE — plain gold amount, no chip
========================================================= */

body.site-shell-v2 .header-logo,
body.site-shell-v2 .header-logo-ref {
    display: inline-flex !important;
    align-items: center;
    padding: 5px 10px;
    border: 1.5px solid #e4c24a;
    border-radius: 0;
    background: #070b12;
}

body.site-shell-v2 .header-wallet-shortcut,
body.site-shell-v2 .header-wallet-shortcut:not([hidden]) {
    display: none !important;
}

body.site-shell-v2 #lutherbetAccount,
body.site-shell-v2 .lutherbet-account {
    display: inline-flex !important;
    align-items: center;
    gap: 8px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    order: 20;
}

body.site-shell-v2 .hdr-balance,
body.site-shell-v2 .header-balance-link {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 34px;
    margin: 0 !important;
    padding: 0 14px 0 12px !important;
    border: 1px solid rgba(232, 197, 71, .28) !important;
    border-radius: 999px !important;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .09),
            rgba(8, 12, 20, .72)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 6px 16px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    text-decoration: none !important;
    line-height: 1;
}

body.site-shell-v2 .lutherbet-account-link::before,
body.site-shell-v2 .lutherbet-account-link::after {
    content: none !important;
    display: none !important;
}

body.site-shell-v2 .hdr-balance-cur {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #111 !important;
    background: linear-gradient(180deg, #f6e27a, #e4c24a) !important;
    border: 0 !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    padding: 0 !important;
}

body.site-shell-v2 .hdr-balance-value,
body.site-shell-v2 .hdr-balance [data-wallet-balance],
body.site-shell-v2 .header-balance-only,
body.site-shell-v2 .header-balance-amount,
body.site-shell-v2 #lutherbetAccount [data-wallet-balance] {
    display: inline !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .02em;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transform: none !important;
}

body.site-shell-v2 .header-wallet-refresh:not([hidden]),
body.site-shell-v2 .hdr-balance-edit {
    display: grid !important;
    place-items: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    flex: 0 0 34px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(232, 197, 71, .28);
    border-radius: 50%;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .09),
            rgba(8, 12, 20, .72)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 6px 16px rgba(0, 0, 0, .28);
    color: #e8c547;
    font-size: 17px;
    cursor: pointer;
}

body.site-shell-v2 .hdr-balance-edit.is-loading i,
body.site-shell-v2 .header-wallet-refresh.is-loading i {
    animation: shellWalletSpin .7s linear infinite;
}

@media (max-width: 780px) {
    body.site-shell-v2 .top-header.is-authenticated .header-right,
    body.site-shell-v2 .top-header.is-authenticated .header-right-ref {
        height: auto !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        gap: 8px !important;
    }
}

/* =========================================================
   DESKTOP SIDEBAR LOCK
   Masaüstünde sol menü kapanmaz; collapse class kalsa bile
   tam genişlikte kalır.
========================================================= */

@media (min-width: 1025px) {
    body.site-shell-v2 .sidebar-collapse-control,
    body.site-shell-v2 .loca-sidebar .sidebar-collapse-control,
    body.site-shell-v2 .hamburger-btn.sidebar-collapse-control,
    body.site-shell-v2 button#sidebarCollapseBtn,
    body.site-shell-v2 .sidebar-expand-btn {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    body.site-shell-v2 .sidebar-top,
    body.site-shell-v2 .loca-sidebar-top {
        justify-content: flex-start;
    }

    body.site-shell-v2 .app-shell.sidebar-collapsed .sidebar,
    body.site-shell-v2 .app-shell.sidebar-collapsed .loca-sidebar {
        width: var(--shell-sidebar-width) !important;
        flex: 0 0 var(--shell-sidebar-width) !important;
        flex-basis: var(--shell-sidebar-width) !important;
        overflow: hidden !important;
        border-right-color: rgba(var(--primary-rgb), .14) !important;
    }
}