/* =========================================================
   Gemini HepBet — ana stil dosyası
   ========================================================= */

:root {
    --bg:            #19222c;
    --bg-deep:       #0e141b;
    --surface:       #233243;
    --surface-2:     #2a3a4c;
    --border:        #344251;
    --icon-box:      #223141;
    --icon-box-2:    #1d2a37;

    --text:          #ffffff;
    --text-soft:     #d7e0ea;
    --text-muted:    #8e99a5;

    --accent:        #197cff;
    --accent-hover:  #3a8fff;
    --teal:          #0febff;
    --green:         #2be931;
    --whatsapp:      #25d366;
    --telegram:      #23b7ec;
    --hot:           #e32020;
    --best:          #6e3a85;

    --radius-sm: 5px;
    --radius:    7px;
    --radius-lg: 10px;

    --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

.ic { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------------------------------------------------------
   Üst bar
   --------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
}

.topbar {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 12px 0 14px;
}

.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 44px; width: auto; }

.topbar-right {
    display: flex;
    align-items: center;
    margin-left: auto;
    min-width: 0;
}

.tb-sep {
    width: 1px;
    height: 30px;
    margin: 0 12px;
    background: var(--surface);
    flex-shrink: 0;
}

.tb-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 32px;
    transition: transform .15s, filter .15s;
}
.tb-contact .ic { width: 25px; height: 25px; }
.tb-contact:hover { transform: translateY(-1px); filter: brightness(1.15); }
.tb-contact.is-phone    { color: var(--teal); }
.tb-contact.is-whatsapp { color: var(--whatsapp); }
.tb-contact.is-telegram { color: var(--telegram); }

.tb-btns { display: flex; gap: 12px; }

/* Gerçek sitedeki ölçüler: 32px yükseklik, #233243 zemin, 6px köşe, %8 beyaz ince kenarlık */
.tb-btn,
.tb-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 6px;
    transition: background .24s, border-color .24s;
}
.tb-btn { width: 38px; color: #fff; }
.tb-btn .ic { width: 17px; height: 17px; }
.tb-btn:hover,
.tb-box:hover { background: #2b3d51; border-color: rgba(255, 255, 255, .16); }

.tb-login {
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .6);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    margin-right: 12px;
    white-space: nowrap;
    transition: color .24s, text-decoration-color .24s;
}
.tb-login:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

.tb-register {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 32px;
    padding: 0 8px;
    background: var(--accent);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .24s;
}
.tb-register:hover { background: var(--accent-hover); }

.tb-lang {
    width: 105px;
    padding: 0 8px 0 10px;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 400;
}
.tb-lang .flag { width: 22px; height: 14px; border-radius: 2px; }
.tb-lang-code { margin-left: 8px; margin-right: auto; }
.chevron { width: 14px; height: 14px; color: var(--text-soft); transition: transform .24s; }
.is-open > [data-dropdown-toggle] .chevron { transform: rotate(180deg); }

.tb-clock {
    width: 94px;
    padding: 0 5px;
    border-color: transparent;
    font-size: 13px;
    font-weight: 600;
    line-height: 12px;
    font-variant-numeric: tabular-nums;
    cursor: default;
}
.tb-clock:hover { background: var(--surface); border-color: transparent; }

/* ---------------------------------------------------------
   Akıllı panel (3 nokta): dikey 5 düğme + sağdan açılan çekmeceler
   --------------------------------------------------------- */
.smart-panel { position: relative; margin-right: 5px; }

.sp-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border-radius: 6px;
    background: var(--surface);
    color: #bccbdc;
    transition: color .24s, background .24s;
}
.sp-toggle:hover,
.smart-panel.is-open .sp-toggle { color: #fff; }
.sp-toggle .ic { width: 16px; height: 16px; }
.sp-toggle .sp-ic-open { display: none; }
.smart-panel.is-open .sp-ic-closed { display: none; }
.smart-panel.is-open .sp-ic-open { display: block; }

/* Sayı rozeti: 16px mavi daire, değişince "blink" ile zıplar */
.sp-badge {
    position: absolute;
    top: -2px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}
.sp-badge:empty,
.sp-badge[data-count="0"] { display: none; }
.sp-badge.is-blink { animation: sp-badge-blink .24s ease-in-out; }
@keyframes sp-badge-blink {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.sp-holder {
    position: absolute;
    top: 42px;
    right: -8px;
    z-index: 980;
    width: 50px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-11.2px);
    transition: opacity .24s, visibility .24s, transform .24s;
}
.sp-holder::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 18px;
    border: 7px solid transparent;
    border-top: 0;
    border-bottom-color: var(--surface);
}
.smart-panel.is-open .sp-holder { opacity: 1; visibility: visible; transform: none; }

.sp-list {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: var(--bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}
.sp-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 56px;
    padding: 1px 6px;
    background: var(--surface);
    color: rgba(255, 255, 255, .85);
    transition: background .24s, color .24s;
}
.sp-button .ic { width: 18px; height: 18px; }
.sp-button:hover { background: #2b3d51; color: #fff; }
.sp-button.is-active { color: var(--accent); }
.sp-button .sp-badge { top: 12px; right: 6px; }

/* Sağdan açılan çekmece (Yenilikler / Favoriler / Ayarlar) — gerçek sitedeki sidePanel:
   üst bardan aşağı sabit, 500px, 20px iç boşluk, .1s gecikmeyle .24s sağdan kayarak gelir */
.side-drawer {
    position: fixed;
    inset: 48px 0 0;
    z-index: 970;
    pointer-events: none;
}
.side-drawer[hidden] { display: none; }
.side-drawer-backdrop {
    position: fixed;
    inset: 48px 0 0;
    pointer-events: auto;
}
.side-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 2px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 500px;
    max-width: 100%;
    padding: 20px;
    background: var(--bg);
    pointer-events: auto;
    transform: translateX(100%);
    animation: overlay-sliding-left .24s .1s forwards;
}
.side-drawer.is-closing .side-drawer-panel { animation: overlay-sliding-right .24s forwards; }
@keyframes overlay-sliding-left  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes overlay-sliding-right { from { transform: translateX(0); } to { transform: translateX(100%); } }

.sd-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 36px;
    background: var(--bg);
}
.sd-header span {
    margin-left: 15px;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    text-transform: uppercase;
}
.sd-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .8);
    transition: color .24s, background .24s;
}
.sd-close:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.sd-close .ic { width: 13px; height: 13px; }
.sd-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-right: -10px;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: #344251 transparent;
}
.sd-pane[hidden] { display: none; }

/* Yenilikler */
.ntf-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 20px;
    color: #a1b6ce;
}
.ntf-clear { color: inherit; transition: color .24s; }
.ntf-clear:hover { color: #fff; }
.ntf-item { position: relative; margin-bottom: 8px; }
.ntf-item.is-removing { animation: ntf-out .24s ease-in forwards; }
@keyframes ntf-out { to { opacity: 0; transform: translateX(40px); } }
.ntf-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid #2a3c50;
    border-radius: 6px;
    background: #1c2835;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    cursor: pointer;
    transition: background .24s;
}
.ntf-head:hover { background: #213042; }
.ntf-item.is-open .ntf-head { border-radius: 6px 6px 0 0; }
/* Okunmamış: sağ üst köşede turkuaz nokta */
.ntf-item.is-unread .ntf-head::before {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--teal);
}
.ntf-icon { width: 13px; height: 13px; color: var(--accent); }
.ntf-title { flex: 1; min-width: 0; font-size: 13px; line-height: 20px; color: #fff; }
.ntf-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: -6px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, .7);
    transition: color .24s;
}
.ntf-remove:hover { color: #fff; }
.ntf-remove .ic { width: 10px; height: 10px; }
.ntf-body {
    padding: 20px;
    border: 1px solid #2a3c50;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    animation: ntf-open .24s ease-out;
}
@keyframes ntf-open { from { opacity: 0; transform: translateY(-6px); } }
.ntf-body-inner { font-size: 20px; line-height: 20px; color: #fff; overflow-wrap: anywhere; }
.ntf-body-inner p,
.ntf-body-inner h4 { margin: 0; font-size: 20px; font-weight: 400; line-height: 20px; }
.ntf-body-inner h4,
.ntf-body-inner p:has(img) { text-align: center; }
.ntf-body-inner img { max-width: 100%; height: auto; margin: 0 auto 4px; }
.ntf-banner { padding: 8px; background: #020617; }
.ntf-banner img { margin: 0 auto; }
.ntf-center { padding: 20px; color: #e2e8f0; text-align: center; }
.ntf-center h2 { margin: 0 0 12px; font-size: 20px; font-weight: 700; color: #fff; }
.ntf-center p { margin: 0 0 6px; font-size: 16px; line-height: 22px; }
.ntf-link {
    display: inline-flex;
    align-items: center;
    height: 36px;
    margin-top: 8px;
    padding: 0 18px;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/* Bahis Kuponu penceresi: ortada, alttan yukarı açılır (gerçek sitede 340px) */
.slip-pop { position: fixed; inset: 0; z-index: 951; }
.slip-pop[hidden] { display: none; }
.slip-pop-backdrop { position: absolute; inset: 0; }
.slip-pop-box {
    position: absolute;
    left: 50%;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 340px;
    max-width: calc(100% - 16px);
    max-height: calc(100vh - 120px);
    padding: 0 8px 8px;
    overflow-y: auto;
    border-radius: 4px 4px 0 0;
    background: var(--bg);
    box-shadow: 0 -2px 15px 3px rgba(25, 34, 44, .3);
    transform: translateX(-50%);
    animation: bs-first-bet-content .24s forwards;
}
@keyframes bs-first-bet-content {
    from { opacity: 0; transform: translate(-50%, 40px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.slip-pop-top { display: flex; justify-content: flex-end; padding: 14px 4px 4px; }
.slip-pop-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .8);
    transition: background .24s, color .24s;
}
.slip-pop-close:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.slip-pop-close .ic { width: 11px; height: 11px; }
.slip-pop .slip { margin-bottom: 8px; }

/* Boş durum (Yenilikler / Favoriler) */
.sd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 60px 20px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
}
.sd-empty .ic { width: 48px; height: 48px; color: rgba(255, 255, 255, .2); }
.sd-empty[hidden] { display: none; }

/* Favoriler */
.fav-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 16px;
    border-radius: 6px;
    background: var(--surface);
}
.fav-tab {
    flex: 1;
    height: 32px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    transition: background .24s, color .24s;
}
.fav-tab:hover { color: #fff; }
.fav-tab.is-active { background: var(--accent); color: #fff; }
.fav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fav-grid .game-tile { width: auto; }
.slip.is-flash { animation: slip-flash .9s ease-out; }
@keyframes slip-flash { 0%, 40% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: 0 0 0 2px transparent; } }

/* Ayarlar */
.set-group { margin-bottom: 18px; }
.set-label { display: block; margin-bottom: 8px; font-size: 12px; color: rgba(255, 255, 255, .6); }
.set-select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 6px;
    background: var(--surface);
    color: #fff;
    font: inherit;
    font-size: 13px;
}
.set-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 6px;
    background: var(--surface);
    font-size: 13px;
}
.set-switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.set-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.set-switch span {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .2);
    transition: background .24s;
    pointer-events: none;
}
.set-switch span::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .24s;
}
.set-switch input:checked + span { background: var(--accent); }
.set-switch input:checked + span::after { transform: translateX(16px); }

@media (max-width: 560px) {
    .side-drawer-panel { width: 100%; }
}

/* ---------------------------------------------------------
   Açılır menüler
   --------------------------------------------------------- */
.tb-dropdown { position: relative; }

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    min-width: 170px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.dropdown-right { left: auto; right: 0; }
.is-open > .dropdown-menu { opacity: 1; visibility: visible; transform: none; }

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    white-space: nowrap;
}
.dropdown-menu a:hover,
.dropdown-menu a.is-active { background: var(--surface-2); color: #fff; }
.dropdown-menu .flag { width: 20px; height: 14px; }
.dd-count {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* ---------------------------------------------------------
   Ana menü
   --------------------------------------------------------- */
.mainnav { padding: 7px 14px 8px 11px; }

.mainnav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 44px;
    padding: 0 15px 0 12px;
    background: var(--bg-deep);
    border-radius: var(--radius-lg);
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    color: var(--text-soft);
    font-size: 15px;
    white-space: nowrap;
    transition: color .15s;
}
.nav-item:hover,
.nav-item.is-active { color: #fff; }

.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--icon-box), var(--icon-box-2));
    color: var(--teal);
    transition: background .15s, box-shadow .15s;
}
.nav-icon .ic { width: 18px; height: 18px; }
.nav-icon.is-green { color: var(--green); }
.nav-item:hover .nav-icon,
.nav-item.is-active .nav-icon {
    background: linear-gradient(180deg, #2a3e53, #223244);
    box-shadow: 0 0 0 1px rgba(15, 235, 255, .25);
}
/* Seçili sekme: gerçek sitedeki gibi tam yükseklikte mavi zemin */
.nav-item.is-active { margin: 0 -14px 0 -10px; padding: 0 14px 0 10px; background: var(--accent); }
.nav-item.is-active .nav-icon { background: rgba(255, 255, 255, .15); box-shadow: none; color: #fff; }

.nav-badge {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-30%);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 12px;
    color: #fff;
    pointer-events: none;
}
.nav-badge.is-hot  { background: var(--hot); }
.nav-badge.is-best { background: var(--best); }
.nav-badge.is-exclusive { background: #53934f; }
.nav-badge.is-free { background: #1077c3; }

/* Üzerine gelince açılan alt menü */
.nav-group { position: relative; display: flex; height: 100%; }
.nav-sub {
    position: absolute;
    top: 100%;
    left: -10px;
    z-index: 60;
    min-width: 235px;
    padding: 10px;
    border-radius: 0 0 4px 4px;
    background: var(--bg-deep);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.nav-sub a {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 10px;
    border-radius: 4px;
    color: var(--text-soft);
    font-size: 15px;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.nav-sub a:hover { background: var(--surface); color: #fff; }
@media (hover: hover) {
    .nav-group:hover .nav-sub,
    .nav-group:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; }
}

/* Ekran genişliğine göre menüde ya da DAHA'da görünenler */
@media (max-width: 1199px) { .nav-group.only-mid { display: none; } }
@media (max-width: 1439px) { .nav-group.only-wide { display: none; } }
@media (min-width: 1200px) { .nav-more-menu .only-narrow-mid { display: none; } }
@media (min-width: 1440px) { .nav-more-menu .only-narrow-wide { display: none; } }

.nav-more { height: 100%; display: flex; }
.nav-more .chevron { width: 12px; height: 12px; margin-left: -6px; transition: transform .15s; }
.nav-more.is-open > .nav-item { margin: 0 -10px; padding: 0 16px 0 10px; border-radius: 6px; background: var(--accent); color: #fff; }
.nav-more.is-open > .nav-item .nav-icon { background: rgba(255, 255, 255, .15); box-shadow: none; }
.nav-more.is-open .chevron { transform: rotate(180deg); }

/* DAHA menüsü: ikonlu satırlar */
.nav-more-menu {
    top: calc(100% + 4px);
    min-width: 240px;
    padding: 10px;
    border: 0;
    border-radius: 6px;
    background: var(--bg-deep);
}
.nav-more-menu a { gap: 10px; height: 36px; padding: 0 8px; font-size: 14px; }
.more-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background: linear-gradient(180deg, var(--icon-box), var(--icon-box-2));
    color: var(--teal);
}
.more-icon .ic { width: 15px; height: 15px; }
.more-badge {
    margin-left: auto;
    padding: 0 5px;
    border-radius: 4px;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    line-height: 13px;
}
.more-badge.is-free { background: #1077c3; }
.more-badge.is-exclusive { background: #53934f; }

/* ---------------------------------------------------------
   Sayfa
   --------------------------------------------------------- */
/* Gerçek sitedeki gibi alt bilgi içeriğin hemen altından başlar (en az yükseklik yok:
   uzun pencerede ya da süzgeçle az içerik kalınca araya boşluk açılmasın) */
.page {
    padding: 2px 14px 20px;
}

/* ---------------------------------------------------------
   Banner slider
   --------------------------------------------------------- */
.hero {
    position: relative;
    aspect-ratio: 1884 / 512;
    border-radius: 20px;
    overflow: hidden;
    background: #b3000d;
    container-type: inline-size;
    user-select: none;
}

.hero-track {
    display: flex;
    height: 100%;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
    touch-action: pan-y;
}

.hero-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
    -webkit-user-drag: none;
}
.hero-slide img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* Görsel yoksa CSS ile çizilen slayt */
.hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 0 38%, rgba(255, 255, 255, .06) 38% 54%,
        transparent 54% 68%, rgba(255, 255, 255, .04) 68% 84%, transparent 84%);
    pointer-events: none;
}
.hero-slide:has(img)::before { display: none; }

.theme-red    { --sub-bg: linear-gradient(180deg, #9b0410, #7a000a); background: radial-gradient(ellipse 70% 120% at 58% 50%, #f2121f 0%, #d40916 50%, #a5000c 100%); }
.theme-green  { --sub-bg: linear-gradient(180deg, #0f4a1c, #0a3313); background: radial-gradient(ellipse 70% 120% at 58% 50%, #3fa33a 0%, #2a7f2c 50%, #134a1c 100%); }
.theme-blue   { --sub-bg: linear-gradient(180deg, #0c3a8f, #072a6b); background: radial-gradient(ellipse 70% 120% at 58% 50%, #2a7bff 0%, #1257d6 50%, #0a3489 100%); }
.theme-purple { --sub-bg: linear-gradient(180deg, #4a1585, #34095f); background: radial-gradient(ellipse 70% 120% at 58% 50%, #a34bff 0%, #7a28d4 50%, #430f80 100%); }
.theme-teal   { --sub-bg: linear-gradient(180deg, #08343f, #04222b); background: radial-gradient(ellipse 70% 120% at 58% 50%, #12808f 0%, #0b5664 50%, #052a35 100%); }

.hs-art {
    position: absolute;
    top: 0;
    left: 44cqw;
    width: 46cqw;
    height: 100%;
}
.hs-art svg { width: 100%; height: 100%; }

.hs-tags {
    position: absolute;
    top: 1.55cqw;
    left: 7.6cqw;
    display: flex;
    height: 2.9cqw;
    border-radius: .7cqw;
    background: rgba(255, 255, 255, .12);
    font-size: .95cqw;
    font-weight: 600;
}
.hs-tag {
    display: flex;
    align-items: center;
    gap: .8cqw;
    padding: 0 1.2cqw;
}
.hs-tag.is-main {
    padding-left: .9cqw;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: .7cqw;
    background: rgba(90, 0, 10, .45);
}
.hs-tag .ic { width: 1.5cqw; height: 1.5cqw; }

.hs-title {
    position: absolute;
    top: 6.4cqw;
    left: 7.5cqw;
    margin: 0;
    font-size: 5.6cqw;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.01em;
    white-space: nowrap;
    text-shadow: 0 .3cqw 0 rgba(0, 0, 0, .18), 0 .5cqw 1.5cqw rgba(0, 0, 0, .25);
}

.hs-sub {
    position: absolute;
    top: 15.3cqw;
    left: 7.8cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24cqw;
    height: 5.1cqw;
    border: .12cqw solid rgba(255, 255, 255, .35);
    border-radius: .8cqw;
    background: var(--sub-bg);
    box-shadow: inset 0 .2cqw .6cqw rgba(0, 0, 0, .35), 0 .3cqw 1cqw rgba(0, 0, 0, .2);
    font-size: 3.2cqw;
    font-weight: 500;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.hs-corner {
    position: absolute;
    top: -1px;
    right: 7.1cqw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15cqw;
    width: 9.1cqw;
    height: 7.2cqw;
    border: .1cqw solid rgba(255, 255, 255, .3);
    border-top: 0;
    border-radius: 0 0 1.2cqw 1.2cqw;
    font-size: .85cqw;
    line-height: 1.15;
    text-align: center;
}
.hs-corner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.7cqw;
    height: 2.7cqw;
    margin-bottom: .5cqw;
    border-radius: .5cqw;
    background: #fff;
    color: #b0000c;
}
.hs-corner-icon .ic { width: 1.5cqw; height: 1.5cqw; }
.theme-green  .hs-corner-icon { color: #134a1c; }
.theme-blue   .hs-corner-icon { color: #0a3489; }
.theme-purple .hs-corner-icon { color: #430f80; }
.theme-teal   .hs-corner-icon { color: #052a35; }

.hero-pager {
    position: absolute;
    top: 22px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 24px;
    padding: 2px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .55);
    font-size: 13px;
    font-weight: 600;
}
.hero-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    transition: background .15s;
}
.hero-arrow:hover { background: #222; }
.hero-arrow .ic { width: 12px; height: 12px; }
.hero-count { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------
   Bölüm başlığı
   --------------------------------------------------------- */
.section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--surface);
    flex-shrink: 0;
}
.section-icon .ic { width: 20px; height: 20px; }
.section-icon { background: linear-gradient(180deg, var(--icon-box), var(--icon-box-2)); }
.section-icon.is-live,
.section-icon.is-trend { color: #e4466a; }
.section-icon.is-teal  { color: var(--teal); }
.section-title { margin: 0; font-size: 18px; font-weight: 600; }

/* ---------------------------------------------------------
   Canlı Kazançlar
   --------------------------------------------------------- */
.wins { margin-top: 22px; }

.wins-tabs { display: flex; gap: 4px; margin-left: auto; }
.wins-tab {
    height: 36px;
    padding: 0 18px;
    border-radius: var(--radius);
    color: var(--text-soft);
    font-size: 13px;
    transition: background .15s, color .15s;
}
.wins-tab:hover { color: #fff; }
.wins-tab.is-active { background: var(--surface); color: #fff; }

.wins-viewport {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent);
}
.wins-viewport::-webkit-scrollbar { display: none; }

.wins-track { display: flex; gap: 8px; padding: 0 28px; width: max-content; }

.win-card {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 185px;
    height: 88px;
    padding: 0 12px 0 14px;
    border-radius: 8px;
    background: var(--surface);
    transition: background .15s;
}
.win-card:hover { background: var(--surface-2); }
.win-card.is-new { animation: win-in .7s cubic-bezier(.22, .61, .36, 1); }
@keyframes win-in {
    from { margin-left: -193px; opacity: 0; }
    60%  { opacity: 1; }
    to   { margin-left: 0; }
}

.win-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--bg-deep);
}
.win-thumb img { width: 100%; height: 100%; object-fit: cover; }

.win-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.win-user { color: #aebfd2; font-size: 12px; }
.win-game {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.win-amount { margin-top: 3px; font-size: 15px; font-weight: 700; }

/* ---------------------------------------------------------
   Kısa yol kartları
   --------------------------------------------------------- */
.promo-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 11px;
    margin-top: 25px;
}

.promo-card {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    transition: transform .2s, box-shadow .2s, filter .2s;
}
.promo-card img { width: 100%; height: auto; aspect-ratio: 608 / 256; }
.promo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
    filter: brightness(1.06);
}

/* ---------------------------------------------------------
   Oyun bölümleri
   --------------------------------------------------------- */
.game-section { margin-top: 24px; --per-row: 6; --tile-gap: 15px; }
.game-section .section-head { margin-bottom: 16px; }

.section-count {
    display: flex;
    align-items: center;
    height: 36px;
    margin-left: auto;
    padding: 0 14px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, #2a3b4e, #243445);
    color: #c8d3df;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.section-count:hover { background: linear-gradient(180deg, #31455b, #2a3c4f); color: #fff; }

.section-arrows { display: flex; gap: 16px; margin-left: auto; }
.section-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--icon-box), var(--icon-box-2));
    color: #fff;
    transition: background .15s, opacity .15s;
}
.section-arrow:hover:not(:disabled) { background: var(--surface-2); }
.section-arrow:disabled { opacity: .35; cursor: default; }
.section-arrow .ic { width: 14px; height: 14px; }

.game-grid {
    display: grid;
    grid-template-columns: repeat(var(--per-row), 1fr);
    gap: var(--tile-gap);
}

.game-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--per-row) - 1) * var(--tile-gap)) / var(--per-row));
    gap: var(--tile-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.game-row::-webkit-scrollbar { display: none; }
.game-row .game-tile { scroll-snap-align: start; }

.game-tile {
    position: relative;
    display: block;
    aspect-ratio: 160 / 113;
    overflow: hidden;
    border-radius: 8px;
    background: var(--surface) center / cover no-repeat; /* hareketli kapak yüklenene kadar hareketsiz kare */
}
.game-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s, opacity .3s;
}
/* Yükleniş animasyonu: görsel gelene kadar gerçek sitedeki skeleton-loader parıltısı
   (main.js görsel yüklenince .is-loaded ekler; JS yoksa .js sınıfı olmadığından hiç devreye girmez) */
.js .game-tile:not(.is-loaded),
.js [data-sk]:not(.is-loaded) {
    background: linear-gradient(to right, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .1) 100%) 0 0 / 200% auto var(--bg) !important;
    animation: an-skeleton-loader 1s linear infinite;
}
.js .game-tile:not(.is-loaded) img,
.js [data-sk]:not(.is-loaded) img { opacity: 0; }
.js [data-sk] img { transition: opacity .3s; }
@keyframes an-skeleton-loader {
    0%   { background-position: 200% center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0 center; }
}
/* "Yeni" gibi kapak rozeti (sağ üst) */
.game-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 5px;
    border-radius: 999px;
    background: #7f194f;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
    pointer-events: none;
}

/* Üzerine gelince: bulanık kapak + yıldız/bilgi + isim + Demo/Oyna */
.game-hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 22px 10px 8px;
    background: rgba(24, 20, 26, .38);
    -webkit-backdrop-filter: blur(9px) saturate(1.1);
            backdrop-filter: blur(9px) saturate(1.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
}
.game-tile:hover .game-hover,
.game-tile:focus-within .game-hover { opacity: 1; visibility: visible; }
.game-tile:hover img { transform: scale(1.04); }

.gh-icon {
    position: absolute;
    top: 9px;
    display: flex;
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, .92);
    transition: color .15s, transform .15s;
}
.gh-icon .ic { width: 100%; height: 100%; }
.gh-icon:hover { color: #fff; transform: scale(1.12); }
.gh-fav  { left: 11px; }
.gh-info { right: 11px; }
.gh-fav.is-on { color: #ffc93c; }
.gh-fav.is-on path { fill: currentColor; }
.gh-info[aria-expanded="true"] { color: var(--teal); }

.game-name {
    max-width: 100%;
    overflow: hidden;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.gh-info-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
}
.gh-info-panel[hidden] { display: none; }
.gh-info-panel b { margin-right: 5px; color: rgba(255, 255, 255, .6); font-weight: 600; }
.game-tile.is-info .game-name,
.game-tile.is-info .gh-btns { display: none; }

.gh-btns { display: flex; gap: 4px; }
.gh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 61px;
    height: 24px;
    padding: 0 10px;
    border-radius: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: #fff;
    transition: background .15s;
}
.gh-demo { background: rgba(255, 255, 255, .15); }
.gh-demo:hover { background: rgba(255, 255, 255, .26); }
.gh-play { background: var(--accent); }
.gh-play:hover { background: var(--accent-hover); }

/* ---------------------------------------------------------
   Bildirim (toast)
   --------------------------------------------------------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 600;
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content; /* left:50% genişliği yarıya düşürmesin */
    max-width: calc(100% - 32px);
    padding: 12px 12px 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
    transform: translate(-50%, 20px);
    opacity: 0;
    transition: opacity .2s, transform .2s;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast-actions { display: flex; gap: 6px; flex-shrink: 0; }
.toast-actions a {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-weight: 600;
    font-size: 13px;
}
.toast-actions a.is-primary { background: var(--accent); }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 1020px) {
    .mainnav { overflow-x: auto; scrollbar-width: none; }
    .mainnav::-webkit-scrollbar { display: none; }
    .mainnav-inner { justify-content: flex-start; gap: 26px; width: max-content; min-width: 100%; }
    .nav-more { display: none; }
}

@media (max-width: 1000px) {
    .tb-hide-md { display: none; }
    .promo-cards { grid-template-columns: repeat(3, 1fr); }
    .game-section { --per-row: 4; --tile-gap: 12px; }
}

@media (max-width: 760px) {
    .tb-hide-sm { display: none; }
}

@media (max-width: 640px) {
    /* Banner kırpılmaz (eskiden 2:1 kırpılıyor, görselin yarısı kayboluyordu); mobil görseli olan
       ana sayfa banner'ı ayrıca aşağıdaki "Mobil tema" bölümünde tam genişlikte gösterilir */
    .hero { border-radius: 10px; }

    .section-head { flex-wrap: wrap; }
    .wins-tabs { width: 100%; margin-left: 0; }
    .wins-tab { flex: 1; padding: 0 8px; }

    .promo-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 20px; }
    .game-section { --per-row: 3; --tile-gap: 8px; margin-top: 20px; }
    .game-hover { gap: 6px; padding: 18px 4px 4px; }
    .gh-icon { top: 5px; width: 15px; height: 15px; }
    .gh-fav  { left: 6px; }
    .gh-info { right: 6px; }
    .game-name { display: none; }
    .gh-btns { flex-direction: column; gap: 3px; width: 100%; padding: 0 8px; }
    .gh-btn { min-width: 0; height: 20px; font-size: 11px; }
    .gh-info-panel { font-size: 9.5px; }

    .game-section .section-head { margin-bottom: 12px; }
    .section-arrows { gap: 8px; }
}

@media (max-width: 480px) {
    .tb-hide-xs { display: none; }
    .topbar { padding: 0 10px; }
    .logo img { height: 38px; }
    .tb-register { padding: 0 14px; }
    .mainnav { padding: 6px 10px 8px; }
    .page { padding: 0 10px 32px; }
}


/* =========================================================
   HEPBET 1:1 EKLENEN BİLEŞEN STİLLERİ
   Footer, Popup, Auth Modals, Chat, Spor & Canlı, Promos
   ========================================================= */

/* --- Alt Bilgi (Footer) --- */
.site-footer { margin-top: 40px; padding: 0 14px 28px; }
.footer-inner { position: relative; }

/* Sosyal medya banner'ı + butonlar */
.ft-social {
    position: relative;
    height: 160px;
    overflow: hidden;
    border-radius: 4px;
    background: #263752;
    scroll-margin-top: 130px; /* "Sosyal Medya" bağlantısında yapışkan menünün altında kalmasın */
}
.ft-social img { width: 100%; height: 100%; object-fit: cover; }
.ft-social-links {
    position: absolute;
    top: 50%;
    right: 145px;
    display: flex;
    gap: 9px;
    transform: translateY(-50%);
}
.ft-social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .14);
    color: #b2b9c7;
    transition: background .15s, color .15s;
}
.ft-social-links a:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.ft-social-links .ic { width: 26px; height: 26px; }

/* Logo + telif | saat + dil */
.ft-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 0 26px;
    border-bottom: 1px solid #303841;
}
.ft-logo { display: inline-block; }
.ft-logo img { display: block; width: auto; height: 46px; }
.ft-copy { margin: 6px 0 0; color: #bccbdc; font-size: 12px; }
.ft-tools { display: flex; flex-shrink: 0; align-items: center; gap: 17px; }
.ft-clock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 32px;
    border-radius: 4px;
    background: #3b424b;
    color: #afb2b0;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
}
.ft-lang {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 6px 0 7px;
    border-radius: 6px;
    background: #1c2835;
    color: #fff;
    font-size: 14px;
}
.ft-lang .flag { width: 22px; height: 15px; }
.ft-lang .chevron { width: 10px; height: 10px; }
.dropdown-up { top: auto; bottom: calc(100% + 6px); }

/* 3 sütun, ortalı */
.footer-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 882px;
    margin: 0 auto;
    padding-top: 37px;
    text-align: center;
}
.footer-heading { margin: 0 0 21px; color: #fff; font-size: 13px; font-weight: 700; line-height: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.footer-links a { color: #bccbdc; font-size: 13px; font-weight: 600; line-height: 20px; transition: color .15s; }
.footer-links a:hover { color: #fff; }

/* Düzenlemeler ve iş ortakları */
.ft-partners { margin-top: 64px; text-align: center; }
.ft-partners-title { margin: 0 0 17px; color: #b7b9bd; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; }
.ft-seal { display: inline-flex; border-radius: 8px; transition: transform .2s, filter .2s; }
.ft-seal img { display: block; width: 120px; height: 120px; }
.ft-seal:hover { filter: brightness(1.08); transform: translateY(-2px); }
.ft-seal:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ft-partner-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; margin-top: 22px; }
.ft-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 130px;
    height: 53px;
    border-radius: 6px;
    background: #1c2835;
    color: #ced1d4;
    transition: background .15s;
}
.ft-partner:hover { background: #24344a; }
.ft-partner svg { flex-shrink: 0; }
.ft-partner-gamtalk { font-size: 20px; line-height: 1; letter-spacing: .2px; }
.ft-partner-text { font-size: 12px; font-weight: 600; line-height: 14px; text-align: left; }

/* Şirket ve lisans bilgisi (üstünde ayırıcı çizgi) */
.ft-legal { margin-top: 39px; padding-top: 14px; border-top: 1px solid #303841; }
.footer-disclaimer { margin: 0; color: #8c9095; font-size: 11.5px; line-height: 14px; text-align: center; }

/* Yatırım yöntemleri: tek satır; kenarlar soluklaşır, oklarla kayar */
.ft-pay { margin-top: 45px; padding-bottom: 41px; border-bottom: 1px solid #303841; text-align: center; }
.ft-pay .ft-partners-title { margin-bottom: 18px; }
.ft-pay-wrap { position: relative; }
.ft-pay-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.ft-pay-row::-webkit-scrollbar { display: none; }

.ft-pay-card {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 50px;
    border-radius: 4px;
    background: #303841;
}
.ft-pay-card img { width: 70px; height: 34px; object-fit: contain; transition: filter .2s, opacity .2s; }
/* Fareli cihazlarda gri ve soluk, üstüne gelince renkli; dokunmatikte hep renkli */
@media (hover: hover) {
    .ft-pay-card img { filter: grayscale(1); opacity: .6; }
    .ft-pay-card:hover img { filter: none; opacity: 1; }
}

/* Kenardaki solma + ok (satırın sonuna/başına gelince gizlenir) */
.ft-pay-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    width: 200px;
    color: #fff;
}
.ft-pay-nav[hidden] { display: none; }
.ft-pay-nav .ic { width: 26px; height: 26px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.ft-pay-nav.is-next {
    right: 0;
    justify-content: flex-end;
    padding-right: 23px;
    background: linear-gradient(90deg, rgba(25, 34, 44, 0), rgba(25, 34, 44, .75) 60%, #19222c 85%);
}
.ft-pay-nav.is-prev {
    left: 0;
    justify-content: flex-start;
    padding-left: 23px;
    background: linear-gradient(270deg, rgba(25, 34, 44, 0), rgba(25, 34, 44, .75) 60%, #19222c 85%);
}

/* En alt: 18+ (solda) ve yukarı çık (sağda) */
.ft-bottom { display: flex; align-items: flex-start; justify-content: space-between; padding-top: 31px; }
.ft-18 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid #a71f67;
    border-radius: 50%;
    color: #a71f67;
    font-size: 9px;
    font-weight: 800;
}
.ft-years { color: #8c9095; font-size: 12px; line-height: 24px; }

/* Yukarı çık: ortada, alttan 90px yukarıda, kaydırınca belirir */
.back-to-top {
    position: fixed;
    bottom: 90px;
    left: 50%;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-left: -28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    transition: background .2s, color .2s, opacity .2s;
}
.back-to-top[hidden] { display: none; }
.back-to-top:hover { background: rgba(255, 255, 255, .25); color: #fff; }
.back-to-top .ic { width: 22px; height: 22px; }

@media (max-width: 760px) {
    .ft-social { height: auto; }
    .ft-social img { height: 110px; object-position: 12% 50%; }
    .ft-social-links { position: static; justify-content: center; padding: 10px 0; transform: none; background: #1d2a3b; }
    .ft-brand { flex-direction: column; align-items: flex-start; }
    .footer-cols { grid-template-columns: 1fr; gap: 28px; }
    .ft-pay-nav { width: 90px; }
    .ft-pay-nav.is-next { padding-right: 8px; }
    .ft-pay-nav.is-prev { padding-left: 8px; }
}

/* --- Açılış duyurusu (gerçek sitedeki ds-popup: 440px, #19222c, degrade kenar, 12px köşe) --- */
.site-popup-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.site-popup-modal[hidden] { display: none !important; }
.site-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 2, 5, .48);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    animation: ds-backdrop-in .24s ease-out;
}
.site-popup-box {
    position: relative;
    z-index: 1;
    width: 440px;
    max-width: calc(100vw - 32px);
    border: 1px solid transparent;
    border-radius: 12px;
    background:
        linear-gradient(#19222c, #19222c) padding-box,
        linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .2)) border-box;
    animation: ds-popup-in .24s ease-out;
}
@keyframes ds-popup-in { from { opacity: 0; transform: scale(.9) translateY(10px); } }
@keyframes ds-backdrop-in { from { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
.site-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 60px;
    padding: 12px 20px;
}
.site-popup-header h3 {
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.site-popup-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-right: -4px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transition: background .2s;
}
.site-popup-close:hover { background: rgba(255, 255, 255, .14); }
.site-popup-close .ic { width: 14px; height: 14px; }
.site-popup-body { padding: 0 16px; }
.site-popup-body img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 220px);
    border-radius: 12px;
    object-fit: contain;
}
.site-popup-footer { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.popup-btn-ok {
    width: 100%;
    height: 40px;
    padding: 0 24px;
    border-radius: 6px;
    background: #233243;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    transition: filter .2s, box-shadow .2s;
}
.popup-btn-ok:hover { filter: brightness(1.15); }
.popup-dont-show {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    align-self: flex-start;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    user-select: none;
}
.popup-dont-show input { position: absolute; opacity: 0; pointer-events: none; }
.popup-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}
.popup-check i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 4px;
    transition: background .15s, border-color .15s;
}
.popup-check .ic { width: 12px; height: 12px; opacity: 0; }
.popup-dont-show:hover .popup-check i { border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .08); }
.popup-dont-show input:checked + .popup-check i { border: 0; background: var(--accent); }
.popup-dont-show input:checked + .popup-check .ic { opacity: 1; }
.popup-dont-show input:focus-visible + .popup-check i { box-shadow: 0 0 0 2px rgba(25, 124, 255, .5); }
/* --- Giriş & Kayıt: gerçek mobil sitedeki ekranlar (m.hepbet192.com ölçüleri).
       Mobilde tam ekran, geniş ekranda ortada 400px pencere --- */
.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 2, 5, .6);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}
.auth-modal[hidden] { display: none !important; }
.auth-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    border-radius: 10px;
    background: radial-gradient(circle at 100% 0, rgba(15, 235, 255, .07), transparent 45%) var(--bg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.auth-top { display: flex; flex-shrink: 0; align-items: center; gap: 8px; height: 48px; padding: 0 16px; }
.auth-logo { width: auto; height: 34px; margin-right: auto; }
.auth-switch { font-size: 13px; font-weight: 500; white-space: nowrap; }
.auth-switch.is-register { height: 28px; padding: 0 12px; border-radius: 4px; background: var(--accent); }
.auth-switch.is-login { margin-right: 8px; text-decoration: underline; text-underline-offset: 3px; }
.auth-modal[data-mode="login"] .auth-switch.is-login,
.auth-modal[data-mode="register"] .auth-switch.is-register { display: none; }
.auth-close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; background: var(--surface); color: rgba(255, 255, 255, .6); transition: color .15s; }
.auth-close:hover { color: #fff; }
.auth-close .ic { width: 12px; height: 12px; }

.auth-form { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 16px; }
.auth-form[hidden] { display: none !important; }
.auth-q { margin: 0; color: #bccbdc; font-size: 13px; line-height: 20px; }
.auth-title { margin: -8px 0 4px; font-size: 16px; font-weight: 400; line-height: 24px; text-transform: uppercase; }

/* Etiketi kutunun içinde üstte duran alan */
.fl { position: relative; display: block; min-width: 0; }
.auth-phone .fl { flex: 1; }
.fl input {
    width: 100%;
    height: 48px;
    padding: 20px 44px 4px 15px;
    border: 1px solid var(--surface);
    border-radius: 4px;
    background: #1c2835;
    color: rgba(255, 255, 255, .9);
    font: inherit;
    font-size: 14px;
    outline: 0;
    transition: border-color .15s;
}
.fl input:focus { border-color: var(--accent); }
.fl > span { position: absolute; top: 9px; left: 16px; color: #bccbdc; font-size: 11px; font-weight: 500; pointer-events: none; }
.fl-eye { position: absolute; top: 50%; right: 10px; display: flex; padding: 2px; color: rgba(255, 255, 255, .45); transform: translateY(-50%); }
.fl-eye.is-on { color: #fff; }
.fl-eye .ic { width: 20px; height: 20px; }

.auth-check { position: relative; display: flex; align-items: flex-start; gap: 14px; color: #bccbdc; font-size: 11px; font-weight: 500; line-height: 24px; cursor: pointer; }
.auth-check input { position: absolute; opacity: 0; pointer-events: none; }
.auth-check i { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 4px; }
.auth-check i .ic { width: 14px; height: 14px; opacity: 0; }
.auth-check input:checked + i { border-color: var(--accent); background: var(--accent); }
.auth-check input:checked + i .ic { opacity: 1; }
.auth-check input:focus-visible + i { box-shadow: 0 0 0 2px rgba(25, 124, 255, .5); }
.auth-check.is-terms span { line-height: 24px; }
.auth-check a { color: #fff; font-weight: 700; text-decoration: underline; }

.auth-phone { display: flex; gap: 6px; }
.auth-code { position: relative; display: flex; flex: 0 0 88px; flex-direction: column; justify-content: center; height: 48px; padding: 0 12px; border: 1px solid var(--surface); border-radius: 4px; background: #1c2835; }
.auth-code small { color: #bccbdc; font-size: 11px; font-weight: 500; line-height: 14px; }
.auth-code b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
.auth-code .flag { width: 20px; height: 14px; border-radius: 2px; }
.auth-code .chevron { position: absolute; top: 10px; right: 10px; width: 12px; height: 12px; }
.auth-warn { margin: -4px 0 0; padding: 5px 8px; border-radius: 4px; background: rgba(170, 33, 48, .35); color: #ffb3bc; font-size: 12px; text-align: center; }

.auth-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 28px; }
.auth-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: 4px; color: #fff; font-size: 12px; font-weight: 500; text-transform: uppercase; transition: filter .15s; }
.auth-btn:hover { filter: brightness(1.12); }
.auth-btn .ic { width: 22px; height: 22px; }
.auth-btn.is-primary { background: var(--accent); font-size: 15px; font-weight: 900; text-transform: none; }
.auth-btn.is-dark { background: #31465e; }
.auth-btn.is-wallet,
.auth-btn.is-big { font-size: 15px; font-weight: 700; text-transform: none; }
.auth-btn.is-outline { border: 1px solid #2a3c50; border-radius: 6px; background: #1c2835; color: #bccbdc; font-size: 14px; }
.auth-btn.is-support { color: #fff; font-weight: 700; text-transform: none; }
.auth-btn.is-support .ic { color: var(--teal); }
.auth-or { display: flex; align-items: center; gap: 14px; margin: -2px 0; color: #bccbdc; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.auth-or::before,
.auth-or::after { content: ""; flex: 1; height: 1px; background: #2a3c50; }

@media (max-width: 760px) {
    .auth-modal { padding: 0; background: var(--bg); }
    .auth-box { max-width: none; height: 100%; max-height: none; border-radius: 0; box-shadow: none; }
}

/* --- Canlı Destek Floating Widget --- */
.chat-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 990;
}
/* Gerçek sitedeki gibi mavi konuşma balonu */
.chat-fab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 62px;
    filter: drop-shadow(0 6px 14px rgba(25, 124, 255, .4));
    cursor: pointer;
    transition: transform .2s;
}
.chat-fab svg { display: block; }
.chat-fab:hover { transform: scale(1.06); }
.chat-box {
    position: absolute;
    right: 0;
    bottom: 72px;
    width: 340px;
    height: 450px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.chat-box[hidden] { display: none !important; }
.chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border);
}
.chat-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.chat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
}
.chat-close {
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s;
}
.chat-close:hover { color: #fff; }
.chat-close .ic { width: 18px; height: 18px; }
.chat-body {
    flex: 1;
    padding: 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-deep);
}
.chat-msg {
    display: flex;
    gap: 10px;
    max-width: 85%;
}
.chat-msg.is-agent { align-self: flex-start; }
.chat-msg.is-user { align-self: flex-end; flex-direction: row-reverse; }
.msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.msg-text {
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: 12.5px;
    line-height: 1.4;
}
.chat-msg.is-agent .msg-text { background: var(--surface); color: var(--text); }
.chat-msg.is-user .msg-text { background: var(--accent); color: #fff; }
.chat-form {
    display: flex;
    align-items: center;
    padding: 10px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    gap: 8px;
}
.chat-form input {
    flex: 1;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 8px 14px;
    color: #fff;
    font-size: 12.5px;
    outline: none;
}
.chat-send {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.chat-send .ic { width: 16px; height: 16px; }

/* --- Önerilen Bahisler --- */
.sb-section { margin-top: 24px; }
.sb-section .section-head { margin-bottom: 16px; }
.section-icon.is-lime { color: var(--green); }

.sb-wrap { position: relative; }
.sb-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 16px) / 3);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.sb-row::-webkit-scrollbar { display: none; }

.sb-card {
    display: flex;
    flex-direction: column;
    height: 180px;
    padding: 0 16px 15px;
    border: 1px solid #2c3a46;
    border-radius: 8px;
    background: radial-gradient(260px 160px at 72% 0, #19444f, #1c2835);
    scroll-snap-align: start;
}

.sb-head {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    height: 45px;
    padding-bottom: 1px;
}
.sb-head::after {   /* kesik çizgi: 3px çizgi, 2px boşluk */
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: repeating-linear-gradient(90deg, #46525d 0 3px, transparent 3px 5px);
}
.sb-sport { width: 21px; height: 21px; flex-shrink: 0; }
.sb-flag { width: 22px; height: 15px; margin-left: 9px; flex-shrink: 0; }
.sb-league {
    margin-left: 10px;
    overflow: hidden;
    color: #bccbdc;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sb-live {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0 8px;
    border-radius: 4px;
    background: #d6051b;
    color: #fff;
    font-size: 13px;
    line-height: 22px;
}

.sb-teams {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr);
    align-items: center;
}
.sb-team {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
}
.sb-team.is-home { justify-content: flex-end; text-align: right; }
.sb-team img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }

.sb-mid { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sb-date { color: #c5d5d8; font-size: 15px; font-weight: 700; line-height: 17px; }
.sb-time { color: #71838b; font-size: 15px; line-height: 17px; }
.sb-score { color: var(--teal); font-size: 18px; font-weight: 700; line-height: 20px; letter-spacing: .5px; }
.sb-period {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    color: #9eacb1;
    font-size: 13px;
    line-height: 16px;
}
.sb-period > span { display: flex; }
.sb-period .ic { width: 13px; height: 13px; }

.sb-odds { display: grid; flex-shrink: 0; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sb-odd {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 6px;
    background: var(--surface);
    transition: background .15s;
}
.sb-odd:hover { background: var(--surface-2); }
.sb-odd-lbl { color: #bbcadb; font-size: 13px; line-height: 17px; }
.sb-odd-val { display: flex; align-items: center; gap: 3px; color: var(--teal); font-size: 13px; line-height: 17px; }
.sb-odd-val .ic { width: 15px; height: 15px; color: #00be18; }

/* Kart kenarındaki oklar (Önerilen Bahisler, Hızlı Spor Linkleri) */
.edge-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 32px;
    margin-top: -16px;
    color: #c9d3dc;
    transition: color .15s, opacity .15s;
}
.edge-nav:hover:not(:disabled) { color: #fff; }
.edge-nav:disabled { opacity: .3; cursor: default; }
.edge-nav .ic { width: 22px; height: 22px; }
.edge-nav.is-prev { left: 6px; }
.edge-nav.is-next { right: 8px; }
.sb-wrap .edge-nav { top: 90px; } /* takımlar satırının hizası */

/* --- Hazır Kuponlar --- */
.bb-section { margin-top: 24px; --kit-space: 165px; }
.bb-section .section-head { margin-bottom: 16px; }
.bb-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 16px) / 2);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.bb-row::-webkit-scrollbar { display: none; }

.bb-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 296px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 8px;
    background: radial-gradient(330px 270px at 0 0, #174955 10%, var(--bg) 100%);
    scroll-snap-align: start;
}

/* Oyuncu + maç günü */
.bb-head {
    flex-shrink: 0;
    margin: 0 16px;
    padding: 16px calc(var(--kit-space) - 7px) 15px 0;
    border-bottom: 1px solid rgba(15, 235, 255, .07);
}
.bb-player { display: block; color: #e8ecee; font-size: 14px; font-weight: 600; line-height: 20px; }
.bb-when { display: block; margin-top: 3px; color: #bccbdc; font-size: 13px; line-height: 18px; }
.bb-when i { margin: 0 3px; font-style: normal; }

/* Maç + seçimler kendi içinde kayar; forma sabit kalır */
.bb-body {
    flex: 1;
    min-height: 0;
    margin-right: 3px;
    padding: 12px 0 16px 16px;
    overflow-y: auto;
}
.bb-body::-webkit-scrollbar { width: 6px; }
.bb-body::-webkit-scrollbar-track { margin: 12px 0; background: transparent; }
.bb-body::-webkit-scrollbar-thumb { border-radius: 3px; background: #686e74; }
@supports not selector(::-webkit-scrollbar) {
    .bb-body { scrollbar-width: thin; scrollbar-color: #686e74 transparent; }
}

.bb-match {
    margin: 0 var(--kit-space) 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #fff;
}

.bb-legs { margin: 8.5px var(--kit-space) 0 0; padding: 0; list-style: none; }
.bb-legs li {
    position: relative;
    padding: 5.5px 0 9.5px 29px;
    font-size: 13px;
    line-height: 17px;
    color: #98abb3;
}
.bb-legs li::before {   /* elmas */
    content: "";
    position: absolute;
    top: 13px;
    left: 3.5px;
    width: 6px;
    height: 6px;
    background: var(--teal);
    transform: rotate(45deg);
}
.bb-legs li::after {    /* elmaslar arası çizgi */
    content: "";
    position: absolute;
    top: 24.5px;
    bottom: -8.5px;
    left: 6px;
    width: 2px;
    background: rgba(255, 255, 255, .12);
}
.bb-legs b { margin-left: 4px; font-weight: 600; color: #d5dde0; }

.bb-kit {
    position: absolute;
    top: 11px;
    right: 35px;
    width: 140px;
    height: 140px;
    pointer-events: none;
}
.bb-kit img { position: relative; width: 100%; height: 100%; object-fit: contain; }
/* Formanın bulanık kopyası → forma renginde parıltı */
.bb-kit .bb-kit-glow {
    position: absolute;
    inset: 0;
    opacity: .4;
    filter: blur(20px);
    transform: translate(6px, -18px) scale(1.15);
}

.bb-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 16px 0;
    padding: 17px 0 16px 4px;
    border-top: 1px solid rgba(255, 255, 255, .11);
}
.bb-total { color: #b6c5d6; font-size: 13px; white-space: nowrap; }
.bb-total strong { margin-left: 3px; color: var(--teal); font-size: 16px; font-weight: 700; }
.bb-add {
    flex-shrink: 0;
    width: 140px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s;
}
.bb-add:hover { background: var(--accent-hover); }

/* --- Hızlı Spor Linkleri --- */
.qs-section { margin-top: 24px; }
.qs-section .section-head { margin-bottom: 6px; }
.section-title.is-caps { font-size: 16px; font-weight: 800; letter-spacing: .75px; text-transform: uppercase; }

.qs-wrap { position: relative; }
.qs-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 5 * 6px) / 6);
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.qs-row::-webkit-scrollbar { display: none; }

/* Görselin kendisi kart (kenarlık, köşe noktaları ve parıltı içinde) */
.qs-card {
    display: block;
    border-radius: 6px;
    scroll-snap-align: start;
    transition: filter .2s, transform .2s;
}
.qs-card img { display: block; width: 100%; height: auto; aspect-ratio: 900 / 288; }
.qs-card:hover { filter: brightness(1.18); transform: translateY(-2px); }

.qs-wrap .edge-nav.is-prev { left: 9px; }
.qs-wrap .edge-nav.is-next { right: 10px; }

/* --- Alt Sayfalar Ortak Başlık & Toolbar --- */
.subpage { padding-top: 20px; }
.subpage-banner {
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
}
.subpage-banner.theme-purple { background: linear-gradient(135deg, #3b1d5c 0%, #1a162b 100%); }
.subpage-banner.theme-blue { background: linear-gradient(135deg, #103460 0%, #0c1c2e 100%); }
.subpage-banner.theme-red { background: linear-gradient(135deg, #5c1818 0%, #260e0e 100%); }
.subpage-banner.theme-gold { background: linear-gradient(135deg, #4d380f 0%, #1f1807 100%); }
.subpage-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    background: var(--accent);
    color: #fff;
    margin-bottom: 10px;
}
.subpage-badge.is-gold {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    color: #000;
}
.subpage-badge .ic { width: 14px; height: 14px; }
.subpage-title {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
}
.subpage-desc {
    font-size: 13.5px;
    color: var(--text-soft);
    margin: 0;
    max-width: 720px;
}

.catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 22px;
}
.catalog-categories {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cat-pill {
    padding: 7px 16px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-soft);
    cursor: pointer;
    transition: all .15s;
}
.cat-pill:hover {
    background: var(--surface-2);
    color: #fff;
}
.cat-pill.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.catalog-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}
.search-box {
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 12px;
    height: 38px;
    min-width: 230px;
}
.search-icon {
    color: var(--text-muted);
    margin-right: 8px;
    display: flex;
    align-items: center;
}
.search-icon .ic { width: 16px; height: 16px; }
.search-box input {
    flex: 1;
    background: none;
    border: 0;
    color: #fff;
    font-size: 13px;
    outline: none;
}
.provider-select {
    height: 38px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: #fff;
    padding: 0 12px;
    font-size: 12.5px;
    outline: none;
    cursor: pointer;
}
.no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

/* --- VIP Slot Sayfası --- */
.vip-perks-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
.vip-perk {
    background: linear-gradient(135deg, #2c2514, #1a160d);
    border: 1px solid #785a1a;
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vip-perk-icon {
    font-size: 24px;
    margin-bottom: 4px;
}
.vip-perk strong {
    font-size: 14px;
    color: #fef08a;
}
.vip-perk span {
    font-size: 12px;
    color: var(--text-muted);
}
.catalog-item.is-vip .game-tile {
    border: 1px solid rgba(234, 179, 8, .4);
}

/* --- Promosyonlar Sayfası --- */
.promos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 32px;
}
.promo-item-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s, border-color .2s;
}
.promo-item-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
}
.promo-item-img {
    position: relative;
    aspect-ratio: 64 / 26;
    background: var(--bg-deep);
}
.promo-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.promo-item-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, .75);
    border: 1px solid var(--teal);
    color: var(--teal);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .5px;
}
.promo-item-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.promo-item-category {
    font-size: 11px;
    font-weight: 700;
    color: var(--teal);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.promo-item-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}
.promo-item-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 16px;
    flex: 1;
}
.promo-item-actions {
    display: flex;
    gap: 8px;
}
.btn-promo-details {
    flex: 1;
    height: 36px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.btn-promo-details:hover { background: var(--surface); }
.btn-promo-join {
    flex: 1;
    height: 36px;
    border: 0;
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.btn-promo-join:hover { background: var(--accent-hover); }

/* Promosyon Detay Modalı */
.promo-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.promo-detail-modal[hidden] { display: none !important; }
.promo-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .8);
    backdrop-filter: blur(4px);
}
.promo-modal-box {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 580px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.promo-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    color: #fff;
    background: rgba(0, 0, 0, .65);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.promo-modal-close .ic { width: 18px; height: 18px; }
.promo-modal-banner {
    aspect-ratio: 64 / 26;
    background: #000;
}
.promo-modal-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.promo-modal-content { padding: 20px 24px; }
.pm-rules-box {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-top: 12px;
}
.pm-rules-box h4 {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--teal);
}
.pm-rules-box p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-soft);
    line-height: 1.5;
}

/* --- Oyun Sayfası (oyun.php, aviator.php) --- */
.gp {
    --gp-side: 216px;
    position: relative;
    display: flex;
    gap: 4px;
    height: calc(100vh - var(--gp-top, 107px));
    min-height: 480px;
    padding-top: 4px;
}
.gp-stage { flex: 1; min-width: 0; background: #0c0c0c; }
.gp-frame { position: relative; height: 100%; }
.gp-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.gp-side { display: flex; flex-direction: column; flex-shrink: 0; width: var(--gp-side); background: #000d24; }
.gp.is-collapsed .gp-side { display: none; }

.gp-tabs { display: grid; flex-shrink: 0; grid-template-columns: 1fr 1fr; }
.gp-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 61px;
    border-bottom: 2px solid #19253c;
    color: #8598b1;
    transition: color .15s, border-color .15s;
}
.gp-tab .ic { width: 26px; height: 26px; }
.gp-tab:hover { color: #c9d6e2; }
.gp-tab.is-active { border-bottom-color: #7632bf; color: #eef3f7; }

.gp-side-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 15px 16px 16px;
    scrollbar-width: none; /* tasarımda görünmüyor; tekerlek/dokunmayla kayar */
}
.gp-side-body::-webkit-scrollbar { display: none; }

.gp-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 8px 0 12px;
    border-radius: 6px;
    background: #0c182f;
    color: #7d8aa0;
}
.gp-search:focus-within { box-shadow: 0 0 0 1px #2c4166; }
.gp-search .ic { width: 18px; height: 18px; flex-shrink: 0; }
.gp-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 12.5px;
}
.gp-search input::placeholder { color: #7d8aa0; }
.gp-search input::-webkit-search-cancel-button { filter: invert(.6); }

.gp-select { position: relative; display: block; margin-top: 52px; }
.gp-select select {
    width: 100%;
    height: 40px;
    padding: 0 34px 0 12px;
    border: 0;
    border-radius: 6px;
    background: #0c182f;
    color: #dbeafe;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
}
.gp-select option { background: #0c182f; }
.gp-select .ic { position: absolute; top: 50%; right: 12px; width: 14px; height: 14px; margin-top: -7px; color: #9fb0c6; pointer-events: none; }

.gp-list-title { margin: 23px 0 7px; color: #e6ebf0; font-size: 15px; font-weight: 500; }
.gp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.gp-thumb {
    display: block;
    aspect-ratio: 91 / 70;
    overflow: hidden;
    border-radius: 5px;
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline-color .15s, filter .15s;
}
.gp-thumb[hidden] { display: none; }
.gp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gp-thumb:hover { filter: brightness(1.12); }
.gp-thumb.is-current { outline-color: #7632bf; }
.gp-empty { margin: 12px 0 0; color: #7d8aa0; font-size: 13px; }

/* Sağ paneli daralt / aç */
.gp-collapse {
    position: absolute;
    top: 78%;
    right: calc(var(--gp-side) - 26px);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 54px;
    margin-top: -27px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-left: 0;
    border-radius: 0 27px 27px 0;
    background: rgba(25, 37, 58, .92);
    color: #e4eaef;
}
.gp-collapse .ic { width: 14px; height: 14px; transition: transform .2s; }
.gp.is-collapsed .gp-collapse {
    right: 0;
    border-right: 0;
    border-left: 1px solid rgba(255, 255, 255, .12);
    border-radius: 27px 0 0 27px;
}
.gp.is-collapsed .gp-collapse .ic { transform: rotate(180deg); }

/* Gömülü demosu olmayan oyunlar */
.gp-placeholder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px;
    overflow: hidden;
}
.gp-ph-bg {
    position: absolute;
    inset: -40px;
    background: center / cover no-repeat;
    filter: blur(26px) brightness(.35);
}
.gp-ph-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 420px;
    padding: 28px 28px 24px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(12, 18, 26, .78);
    text-align: center;
}
.gp-ph-card img { width: 200px; height: auto; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.gp-ph-title { margin: 16px 0 4px; font-size: 20px; font-weight: 700; }
.gp-ph-provider { color: var(--teal); font-size: 12.5px; font-weight: 600; }
.gp-ph-text { margin: 12px 0 18px; color: #b6c5d6; font-size: 13.5px; line-height: 1.55; }
.gp-ph-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gp-ph-btn {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    transition: background .15s;
}
.gp-ph-btn:hover { background: #34475d; }
.gp-ph-btn.is-primary { background: var(--accent); }
.gp-ph-btn.is-primary:hover { background: var(--accent-hover); }

@media (max-width: 900px) {
    .gp { flex-direction: column; height: auto; }
    .gp-stage { flex: none; height: min(72vh, 640px); }
    .gp-side, .gp.is-collapsed .gp-side { display: flex; width: auto; }
    .gp-side-body { overflow: visible; }
    .gp-select { margin-top: 10px; }
    .gp-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .gp-collapse { display: none; }
}

/* --- Spor & Canlı Bahis Düzeni --- */
.sports-layout {
    display: grid;
    grid-template-columns: 240px 1fr 310px;
    gap: 18px;
    align-items: start;
}
.sports-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sports-menu-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.sports-menu-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    padding: 12px 14px;
    margin: 0;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sports-menu-list {
    list-style: none;
    padding: 6px 0;
    margin: 0;
}
.sports-menu-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    font-size: 12.5px;
    color: var(--text-soft);
    transition: background .15s, color .15s;
}
.sports-menu-list li a:hover {
    background: var(--surface-2);
    color: #fff;
}
.sports-menu-list li.is-active a {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
}
.sm-count {
    font-size: 11px;
    background: var(--bg-deep);
    padding: 1px 6px;
    border-radius: 8px;
    color: var(--text-muted);
}
.sports-menu-list li.is-active .sm-count {
    background: rgba(0, 0, 0, .25);
    color: #fff;
}
.sm-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
    display: inline-block;
    margin-right: 8px;
}
.sports-center { min-width: 0; }
.sports-fixtures-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fixture-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .15s;
}
.fixture-card:hover { border-color: var(--accent); }
.fc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
}
.fc-sport { font-weight: 700; color: var(--text); }
.fc-league { color: var(--teal); }
.fc-time {
    margin-left: auto;
    background: var(--bg-deep);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}
.fc-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.fc-teams {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 13.5px;
    flex: 1;
}
.fc-vs {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}
.fc-odds {
    display: flex;
    gap: 6px;
}
.fc-odd {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 42px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all .15s;
    padding: 2px 6px;
}
.fc-odd:hover {
    background: var(--accent);
    border-color: var(--accent);
}
.fc-odd-lbl {
    font-size: 10px;
    color: var(--text-muted);
}
.fc-odd:hover .fc-odd-lbl { color: rgba(255, 255, 255, .8); }
.fc-odd-val {
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
}

/* Canlı Maç Göstergeleri */
.live-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
    animation: livePulseDot 1.5s infinite;
}
@keyframes livePulseDot {
    0%, 100% { transform: scale(0.9); opacity: .8; }
    50% { transform: scale(1.3); opacity: 1; }
}
.fc-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(239, 68, 68, .2);
    border: 1px solid #ef4444;
    color: #ef4444;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
}
.fc-score-pill {
    margin-left: auto;
    background: #ef4444;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 12px;
}
.fc-vs-live {
    background: var(--bg-deep);
    color: var(--teal);
    font-weight: 900;
    font-size: 14px;
    padding: 3px 10px;
    border-radius: var(--radius);
}

/* Bahis Kuponu (Betslip) */
.betslip-sidebar {
    position: sticky;
    top: 60px;
}
.betslip-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.betslip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.betslip-header h3 {
    font-size: 13.5px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: .4px;
}
.betslip-badge {
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.betslip-items {
    padding: 12px;
    min-height: 120px;
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.slip-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    padding: 24px 10px;
}
.slip-card {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sc-match {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    padding-right: 20px;
}
.sc-bet {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--teal);
    font-weight: 700;
}
.sc-remove {
    position: absolute;
    top: 6px;
    right: 8px;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
}
.sc-remove:hover { color: #ef4444; }
.betslip-footer {
    padding: 14px 16px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}
.slip-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.slip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-soft);
}
.slip-row.is-win {
    font-size: 13px;
    color: var(--green);
}
.slip-row.is-win strong { font-size: 15px; }
.slip-input {
    width: 80px;
    height: 28px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    padding: 0 6px;
    outline: none;
}
.btn-place-bet {
    width: 100%;
    height: 40px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    border-radius: var(--radius);
    border: 0;
    cursor: pointer;
    transition: filter .15s;
}
.btn-place-bet:hover { filter: brightness(1.1); }

/* --- Responsive Güncellemeleri --- */
@media (max-width: 1100px) {
    .sports-layout { grid-template-columns: 200px 1fr 280px; }
}

@media (max-width: 1020px) {
    .sb-row { grid-auto-columns: calc((100% - 16px) / 2); }
}

@media (max-width: 900px) {
    .sports-layout { grid-template-columns: 1fr; }
    .betslip-sidebar { position: static; }
    .promos-grid { grid-template-columns: repeat(2, 1fr); }
    .vip-perks-row { grid-template-columns: 1fr; }
    .footer-cols { grid-template-columns: 1fr; gap: 24px; }
    .bb-row { grid-auto-columns: min(510px, 88%); }
    .qs-row { grid-auto-columns: calc((100% - 3 * 6px) / 4); }
}

@media (max-width: 600px) {
    .qs-row { grid-auto-columns: calc((100% - 6px) / 2); }
    .promos-grid { grid-template-columns: 1fr; }
    .catalog-toolbar { flex-direction: column; align-items: stretch; }
    .catalog-tools { flex-direction: column; }
    .search-box { min-width: 0; width: 100%; }
    .chat-box { width: calc(100vw - 32px); right: -12px; bottom: 64px; }
    .fc-body { flex-direction: column; align-items: stretch; }
    .fc-odds { justify-content: space-between; }
    .fc-odd { flex: 1; }
    .bb-section { --kit-space: 104px; }
    .bb-row { grid-auto-columns: 100%; }
    .bb-kit { top: 14px; right: 16px; width: 96px; height: 96px; }
    .sb-row { grid-auto-columns: 100%; }
    .toast { bottom: 90px; } /* canlı destek butonunun üstünde kalsın */
}

/* ---------------------------------------------------------
   Bildirim izni kutusu (kupona ekleyince sağ üstte açılır)
   --------------------------------------------------------- */
.notify-prompt {
    position: fixed;
    top: 112px;
    right: 14px;
    z-index: 550;
    display: flex;
    gap: 19px;
    width: min(504px, calc(100vw - 28px));
    padding: 19px 20px 20px 22px;
    border: 1px solid #37424d;
    border-radius: 12px;
    background: #1c2835;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
    animation: notify-in .25s ease-out;
}
.notify-prompt[hidden] { display: none; }
@keyframes notify-in {
    from { opacity: 0; transform: translateY(-8px); }
}

.notify-icon { flex-shrink: 0; width: 46px; height: 50px; margin-top: 1px; }
.notify-icon svg { display: block; width: 100%; height: 100%; }

.notify-content { min-width: 0; }
.notify-title { display: block; padding-right: 30px; font-size: 16px; font-weight: 600; line-height: 22px; color: #fff; }
.notify-text { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: #b6c5d6; }

.notify-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.notify-actions button {
    height: 36px;
    padding: 0 16px;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transition: background .15s;
}
.notify-later { background: #32465d; }
.notify-later:hover { background: #3b5270; }
.notify-allow { background: var(--accent); }
.notify-allow:hover { background: var(--accent-hover); }

.notify-close {
    position: absolute;
    top: 9px;
    right: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2a3c50;
    color: #fff;
    transition: background .15s;
}
.notify-close:hover { background: #36506a; }
.notify-close .ic { width: 12px; height: 12px; }

@media (max-width: 600px) {
    .notify-prompt { gap: 12px; padding-left: 14px; }
    .notify-icon { width: 34px; height: 37px; }
}

/* =========================================================
   Casino ailesi (Casino, VIP Slot, Canlı Casino, Crash, Turnuvalar, Jackpotlar, Live RTP)
   Ölçüler hepbet191.com/tr/casino sayfasından (1280px görünüm)
   ========================================================= */
.casino-page { --cg-gap: 16px; }

/* Alt sekmeler (Ana Sayfa · Turnuvalar · Jackpotlar · Live RTP) */
/* Ortalama kenar boşluklarıyla: sığmayınca soldaki sekmeler taşıp erişilemez olmasın
   (justify-content: center taşan içeriği sola da kaydırıyordu) */
.sub-nav {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    margin-bottom: 11px;
    overflow-x: auto;
    scrollbar-width: none;
}
.sub-nav::-webkit-scrollbar { display: none; }
.sub-nav-item:first-child { margin-left: auto; }
.sub-nav-item:last-child { margin-right: auto; }
.sub-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    height: 36px;
    padding: 0 15px;
    border: 1px solid #2a3c50;
    border-radius: 6px;
    color: rgba(255, 255, 255, .5);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    transition: color .15s, background .15s;
}
.sub-nav-item img { width: 16px; height: 16px; }
.sub-nav-item:hover { color: #fff; }
.sub-nav-item.is-active { background: var(--accent); color: #fff; }

/* Banner: gerçek sitede köşe 4px, sayaç sağ üstte */
.hero.is-casino { border-radius: 4px; background: var(--surface); }
.hero.is-casino .hero-pager { top: 20px; right: 20px; }

/* Bloklar arası boşluk */
.casino-block { margin-top: 24px; }
.casino-block .section-head { margin-bottom: 16px; }
.section-icon.is-img { background: url("../img/icons/section/icon-bg-with-border.svg") center / contain no-repeat; }
.section-icon.is-img img { width: 16px; height: 16px; }
.section-count.has-arrows + .section-arrows { margin-left: 12px; }
.section-arrows.after-count { margin-left: 12px; }

/* Oyun ızgarası: 6 sütun (gerçekte 193×136 kart, 16px aralık) */
.casino-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--cg-gap);
}
.casino-grid[hidden], .cg-item[hidden] { display: none; }
.cg-more-wrap { display: flex; justify-content: center; margin-top: 24px; }
.cg-more {
    height: 40px;
    padding: 0 22px;
    border-radius: 6px;
    background: #31465e;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transition: background .15s;
}
.cg-more:hover { background: #3b5270; }
.cg-more span { color: rgba(255, 255, 255, .6); font-weight: 500; }
.cg-empty {
    margin: 0;
    padding: 48px 16px;
    border-radius: 8px;
    background: #1c2835;
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}
.cg-empty[hidden] { display: none; }

/* Lobide kayan satırlar: 7 kart görünür, Slotlar iki sıra */
.casino-row { --per-row: 7; --tile-gap: 16px; }
.casino-row.is-2rows { grid-template-rows: repeat(2, auto); }

/* Kategori çipleri */
.chips-bar { position: relative; margin-top: 24px; }
.chips-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.chips-track::-webkit-scrollbar { display: none; }
.chips-bar.has-next .chips-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 90px), transparent calc(100% - 20px)); mask-image: linear-gradient(90deg, #000 calc(100% - 90px), transparent calc(100% - 20px)); }
.chips-bar.has-prev.has-next .chips-track { -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 90px, #000 calc(100% - 90px), transparent calc(100% - 20px)); mask-image: linear-gradient(90deg, transparent 20px, #000 90px, #000 calc(100% - 90px), transparent calc(100% - 20px)); }
.chips-bar.has-prev:not(.has-next) .chips-track { -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 90px); mask-image: linear-gradient(90deg, transparent 20px, #000 90px); }
.chip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 36px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #233243;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    transition: background .15s;
}
.chip:hover { background: #2a3c50; }
.chip.is-active { background: var(--accent); }
.chip-icon { display: flex; width: 16px; height: 16px; }
.chip-icon svg { width: 100%; height: 100%; }
.chips-arrow {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: url("../img/icons/section/icon-bg-with-border.svg") center / contain no-repeat;
    color: #fff;
}
.chips-arrow[hidden] { display: none; }
.chips-arrow .ic { width: 14px; height: 14px; }
.chips-arrow.is-prev { left: 0; }
.chips-arrow.is-next { right: 0; }

/* Arama + Rastgele Oyna + Sağlayıcılar */
.casino-filters { display: flex; gap: 8px; margin-top: 12px; }
.cf-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #2a3c50;
    border-radius: 6px;
    background: #1c2835;
    cursor: text;
}
.cf-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    color: #afc1d5;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    outline: 0;
}
.cf-search input::-webkit-search-cancel-button { display: none; }
.cf-search-label {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
    pointer-events: none;
}
.cf-search input:not(:placeholder-shown) + .cf-search-label { display: none; }
.cf-search:focus-within { border-color: #3b5270; }
.cf-search-ic { width: 20px; height: 20px; flex-shrink: 0; color: #fff; }
.cf-random,
.cf-providers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 220px;
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    color: #fff;
    white-space: nowrap;
    transition: background .15s;
}
.cf-random { background: #31465e; font-size: 13px; font-weight: 700; }
.cf-random:hover { background: #3b5270; }
.cf-random .ic, .cf-providers .ic { width: 16px; height: 16px; }
.cf-random.is-spinning .ic { animation: cf-spin .45s linear; }
@keyframes cf-spin { to { transform: rotate(360deg); } }
.cf-providers { background: var(--accent); font-size: 14px; }
.cf-providers:hover { background: var(--accent-hover); }
.cf-providers-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #fff;
    color: var(--accent);
    font-size: 11px;
    line-height: 18px;
}
/* Crash sayfası: dolgulu arama + hap şeklinde sağlayıcı kutusu */
.casino-filters.is-pill { margin-top: 24px; gap: 16px; }
.casino-filters.is-pill .cf-search { height: 40px; border: 0; background: #233243; padding: 0 16px; }
.casino-filters.is-pill .cf-search-label { left: 16px; }
.casino-filters.is-pill .cf-providers {
    flex-basis: 306px;
    justify-content: flex-start;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .56);
}
.casino-filters.is-pill .cf-providers:hover { background: rgba(255, 255, 255, .12); }

.casino-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--text-muted); font-size: 13px; }
.caf-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    background: #233243;
    color: #fff;
    text-transform: capitalize;
}
.caf-tag .ic { width: 10px; height: 10px; }
.caf-tag:hover { background: #2a3c50; }

/* Sağlayıcı logoları */
.provider-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 150px;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.provider-row::-webkit-scrollbar { display: none; }
.provider-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 5px 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #233243;
    color: rgba(255, 255, 255, .64);
    transition: color .15s, border-color .15s;
}
.provider-card svg { width: 148px; height: 44px; }
.provider-card:hover { color: #fff; border-color: #31465e; }
.provider-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    padding: 0 5px;
    border-radius: 2px;
    color: #fff;
    font-size: 9px;
    font-weight: 500;
    line-height: 12px;
}
.provider-badge.is-best      { background: #6e3a85; }
.provider-badge.is-hot       { background: #e32020; }
.provider-badge.is-jackpot   { background: #7b6418; }
.provider-badge.is-promo     { background: #186360; }
.provider-badge.is-exclusive { background: #53934f; }
.provider-badge.is-new       { background: #7f194f; }

/* Jackpot kartları */
.jp-carousel { position: relative; overflow: hidden; }
.jp-track { display: flex; gap: 16px; transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.jp-card {
    position: relative;
    flex: 0 0 calc((100% - 16px) / 2);
    padding-top: 30px;
    color: #fff;
}
.jp-deco { position: absolute; top: 0; right: 12px; width: 196px; height: 62px; object-fit: contain; z-index: 1; pointer-events: none; }
.jp-card-inner {
    position: relative;
    padding: 12px;
    border-radius: 12px;
    background: rgba(26, 125, 255, .04);
    overflow: hidden;
}
.jp-card-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(15, 235, 255, 0), #0febff 50.48%, rgba(15, 235, 255, 0));
}
.jp-card-title { display: block; font-size: 16px; font-weight: 600; line-height: 24px; text-transform: uppercase; }
.jp-pool {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}
.jp-pool.is-large { justify-content: center; height: 60px; margin-top: 16px; }
.jp-pool.is-small { justify-content: center; height: 52px; }
.jp-pool-icon { width: 40px; height: 40px; object-fit: contain; }
.jp-pool.is-small .jp-pool-icon { width: 36px; height: 36px; }
.jp-pool-money { display: flex; flex-direction: column; min-width: 100px; }
.jp-pool-title { color: rgba(255, 255, 255, .64); font-size: 14px; line-height: 20px; text-transform: uppercase; }
.jp-pool.is-small .jp-pool-title { font-size: 12px; line-height: 16px; }
.jp-pool-amount { display: flex; gap: 3px; color: var(--teal); font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.jp-pool.is-small .jp-pool-amount { font-size: 14px; }
.jp-pool-amount .is-tick { animation: jp-tick .5s ease-out; }
@keyframes jp-tick { from { color: #fff; text-shadow: 0 0 8px rgba(15, 235, 255, .8); } }
.jp-card-small { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.jp-arrow {
    position: absolute;
    top: 97px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: url("../img/icons/section/icon-bg-with-border.svg") center / contain no-repeat;
    color: #fff;
}
.jp-arrow .ic { width: 12px; height: 12px; }
.jp-arrow.is-prev { left: 24px; }
.jp-arrow.is-next { right: 24px; }

/* Turnuva kartları (lobi) */
.tw-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 32px) / 3);
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.tw-row::-webkit-scrollbar { display: none; }
.tw-card { display: flex; flex-direction: column; min-width: 0; }
.tw-img { position: relative; height: 138px; border-radius: 12px; overflow: hidden; background: #233243; }
.tw-img img { width: 100%; height: 100%; object-fit: cover; }
.tw-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
}
.tw-badge.is-live     { background: var(--accent); color: rgba(255, 255, 255, .9); }
.tw-badge.is-upcoming { background: #00ebfd; color: rgba(0, 2, 5, .9); }
.tw-info {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    margin: -20px 4px 0;
    padding: 16px;
    border-radius: 6px;
    background: rgba(49, 70, 94, .2);
    -webkit-backdrop-filter: blur(40px);
            backdrop-filter: blur(40px);
    text-align: center;
}
.tw-counter {
    display: flex;
    gap: 7px;
    height: 36px;
    padding: 8px 16px;
    border-radius: 6px;
    background: #2a3c50;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
}
.tw-counter span { color: #d7e0ea; }
.tw-counter b { font-weight: 600; font-variant-numeric: tabular-nums; }
.tw-name { margin: 8px 0 0; max-width: 100%; overflow: hidden; font-size: 17px; font-weight: 700; line-height: 28px; white-space: nowrap; text-overflow: ellipsis; }
.tw-prize-label { margin-top: 8px; color: #bccbdc; font-size: 13px; font-weight: 600; line-height: 20px; }
.tw-prize { margin-top: 4px; color: var(--teal); font-size: 28px; font-weight: 700; line-height: 32px; }
.tw-btns { display: flex; gap: 8px; align-self: stretch; margin-top: 8px; }
.tw-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 44px;
    border-radius: 6px;
    background: #31465e;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transition: background .15s;
}
.tw-btn:hover { background: #3b5270; }
.tw-btn.is-primary { background: var(--accent); }
.tw-btn.is-primary:hover { background: var(--accent-hover); }

/* Sağlayıcılar penceresi */
.prov-modal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 16px; }
.prov-modal[hidden] { display: none; }
.prov-modal-backdrop { position: absolute; inset: 0; background: rgba(5, 9, 13, .7); }
.prov-modal-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(720px, 100%);
    max-height: min(640px, calc(100vh - 32px));
    border-radius: 10px;
    background: #1c2835;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
    animation: notify-in .2s ease-out;
}
.prov-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 0 20px; }
.prov-modal-head h3 { margin: 0; font-size: 18px; font-weight: 600; }
.prov-modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #2a3c50; color: #fff; }
.prov-modal-close .ic { width: 12px; height: 12px; }
.prov-modal-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    margin: 16px 20px 0;
    padding: 0 14px;
    border-radius: 6px;
    background: #233243;
    color: rgba(255, 255, 255, .5);
}
.prov-modal-search .ic { width: 16px; height: 16px; }
.prov-modal-search input { flex: 1; height: 100%; border: 0; background: none; color: #fff; font: inherit; font-size: 14px; outline: 0; }
.prov-modal-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px 20px;
    overflow-y: auto;
}
.prov-option { position: relative; cursor: pointer; }
.prov-option[hidden] { display: none; }
.prov-option input { position: absolute; opacity: 0; pointer-events: none; }
.prov-option-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #233243;
    color: rgba(255, 255, 255, .64);
    transition: border-color .15s, color .15s;
}
.prov-option-logo svg { width: 100%; height: 44px; }
.prov-option:hover .prov-option-logo { color: #fff; }
.prov-option input:checked ~ .prov-option-logo { border-color: var(--accent); color: #fff; background: rgba(25, 124, 255, .12); }
.prov-option-check {
    position: absolute;
    top: 4px;
    right: 4px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
}
.prov-option-check .ic { width: 10px; height: 10px; }
.prov-option input:checked ~ .prov-option-check { display: flex; }
.prov-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 20px; }
.prov-btn {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 22px;
    border-radius: 6px;
    background: #31465e;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.prov-btn.is-primary { background: var(--accent); }
body.no-scroll { overflow: hidden; }

@media (max-width: 1199px) {
    .casino-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .casino-grid.is-trend { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .casino-row { --per-row: 6; }
}
@media (max-width: 1020px) {
    .casino-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .casino-row { --per-row: 5; }
    .tw-row { grid-auto-columns: calc((100% - 16px) / 2); }
    .cf-random, .cf-providers { flex-basis: 170px; }
}
@media (max-width: 760px) {
    .casino-page { --cg-gap: 10px; }
    .casino-grid,
    .casino-grid.is-trend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .casino-row { --per-row: 3; --tile-gap: 10px; }
    .casino-filters { flex-wrap: wrap; }
    .cf-search { flex-basis: 100%; }
    .cf-random, .cf-providers { flex: 1 1 0; }
    .casino-filters.is-pill .cf-providers { flex: 1 1 100%; }
    .jp-card { flex-basis: 100%; }
    .tw-row { grid-auto-columns: 86%; }
    .prov-modal-list { grid-template-columns: repeat(2, 1fr); }
    .sub-nav-item:first-child, .sub-nav-item:last-child { margin: 0; }
    .hero.is-casino .hero-pager { top: 8px; right: 8px; }
}
/* SVG sprite kapsayıcısı: görünmez ama içindeki gradyanlar çalışsın diye display:none değil */
svg.sprite { position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden; pointer-events: none; }
/* ---------------------------------------------------------
   Turnuvalar sayfası
   --------------------------------------------------------- */
.tour-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; flex-wrap: wrap; }
.tour-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tour-tab {
    height: 40px;
    padding: 0 16px;
    border-radius: 6px;
    background: #233243;
    color: #bccbdc;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.tour-tab:hover { color: #fff; }
.tour-tab.is-active { background: var(--accent); color: #fff; }
.tour-free { display: flex; align-items: center; gap: 8px; color: #bccbdc; font-size: 13px; font-weight: 600; cursor: pointer; }
.toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.toggle {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .25);
    transition: background .15s;
}
.toggle::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    transition: transform .15s, background .15s;
}
.toggle-input:checked + .toggle { background: var(--accent); }
.toggle-input:checked + .toggle::before { transform: translateX(16px); background: #fff; }

.tour-list { display: flex; flex-direction: column; gap: 48px; margin-top: 72px; }
.tour-section { display: flex; gap: 16px; scroll-margin-top: 80px; }
.tour-section[hidden] { display: none; }
.ts-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 250px;
    padding: 20px;
    border-radius: 6px;
    background: linear-gradient(180deg, #2a3c50 0%, #1c2835 100%);
    text-align: center;
}
/* Kartı asan iki halka */
.ts-ring { position: absolute; top: 1px; width: 17px; height: 17px; border-radius: 50%; background: var(--bg-deep); }
.ts-ring.is-left { left: 50px; }
.ts-ring.is-right { right: 32px; }
.ts-ring::before {
    content: "";
    position: absolute;
    left: 3px;
    top: -19px;
    width: 11px;
    height: 33px;
    border-radius: 10px;
    background: linear-gradient(90deg, #414141 .03%, #dedede 29.26%, #777 49.56%, #bcbcbc 75%, #5a5a5a);
}
.ts-img { position: relative; display: block; width: 210px; height: 149px; border-radius: 4px; }
.ts-img img { width: 100%; height: 100%; border-radius: 4px; object-fit: cover; }
.ts-status {
    position: absolute;
    top: 0;
    left: -5px;
    height: 19px;
    padding: 0 8px;
    border-radius: 2px 2px 2px 0;
    background: var(--accent);
    box-shadow: 0 1px 3px rgba(25, 34, 44, .3);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 19px;
    text-transform: uppercase;
}
.ts-prize-label { margin: 16px 0 0; color: #bccbdc; font-size: 13px; font-weight: 600; line-height: 20px; text-transform: uppercase; }
.ts-prize { margin: 6px 0 0; color: var(--teal); font-size: 28px; font-weight: 700; line-height: 32px; white-space: nowrap; }
.ts-date-label { margin-top: 8px; color: #bccbdc; font-size: 13px; font-weight: 600; line-height: 20px; }
.ts-countdown { display: grid; grid-template-columns: repeat(4, 50px); gap: 4px; margin-top: 6px; }
.ts-countdown div {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 56px;
    padding: 8px 0;
    border-radius: 6px;
    background: #31465e;
}
.ts-countdown b { font-size: 20px; font-weight: 500; line-height: 24px; font-variant-numeric: tabular-nums; }
.ts-countdown span { color: #bccbdc; font-size: 11px; font-weight: 600; line-height: 12px; text-transform: uppercase; }
.ts-join {
    width: 100%;
    height: 44px;
    margin-top: 12px;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    transition: background .15s;
}
.ts-join:hover { background: var(--accent-hover); }
.ts-body { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; }
.ts-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 28px; text-transform: uppercase; }
.ts-text {
    display: -webkit-box;
    margin-top: 16px;
    overflow: hidden;
    color: #cad5e3;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
.ts-text p { display: inline; margin: 0; }
.ts-text p::after { content: " "; }
.ts-text.is-open { display: block; -webkit-line-clamp: unset; }
.ts-text.is-open p { display: block; margin-bottom: 4px; }
.ts-more {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: var(--teal);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}
.ts-more .ic { width: 10px; height: 10px; transition: transform .15s; }
.ts-more.is-open .ic { transform: rotate(-90deg); }
.ts-info { display: flex; flex-direction: column; }
.ts-details { position: relative; }
.ts-details-track { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.ts-details-track::-webkit-scrollbar { display: none; }
.ts-detail {
    flex: 0 0 auto;
    min-width: 200px;
    min-height: 96px;
    padding: 10px 16px;
    border: 1px solid rgba(15, 235, 255, .08);
    border-radius: 6px;
    background: rgba(25, 124, 255, .06);
}
.ts-detail-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; text-align: center; }
.ts-detail dl { display: grid; grid-template-columns: auto auto; gap: 8px 12px; margin: 0; font-size: 11px; line-height: 16px; white-space: nowrap; }
.ts-detail dt { color: #bccbdc; font-weight: 600; }
.ts-detail dd { margin: 0; text-align: right; font-weight: 600; }
.ts-details-next {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    background: linear-gradient(90deg, rgba(25, 34, 44, 0), var(--bg) 60%);
    color: #fff;
}
.ts-details-next[hidden] { display: none; }
.ts-details-next .ic { width: 14px; height: 14px; }
.ts-games { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ts-games-more {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 160 / 113;
    border-radius: 8px;
    background: center / cover no-repeat;
    overflow: hidden;
}
.ts-games-more::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ts-games-more span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--accent);
    font-size: 24px;
    font-weight: 700;
}

/* ---------------------------------------------------------
   Promosyonlar sayfası (promosyonlar.php) — gerçek sitedeki /promotions
   --------------------------------------------------------- */
.page-title { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 16px 24px; }
.page-title h1 { margin: 0; font-size: 18px; font-weight: 600; line-height: 24px; }
.promo-page .page-title { margin: 5px 0 24px; }
.promo-content { display: flex; flex-direction: column; gap: 24px; margin-bottom: 32px; }

.promo-cats { position: relative; overflow: hidden; }
.promo-cats-track {
    display: flex;
    gap: 8px;
    padding: 0 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.promo-cats-track::-webkit-scrollbar { display: none; }
.promo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 48px;
    padding: 16px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 0 transparent;
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    transition: box-shadow .2s, background .2s;
}
.promo-chip:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.promo-chip.is-active { background: rgba(25, 124, 255, .16); box-shadow: inset 0 0 0 1px var(--accent); }
/* Kenarlarda sayfa rengine kararan gölge + yuvarlak ok */
.promo-cats-fade {
    position: absolute;
    top: 0;
    width: 0;
    height: 48px;
    box-shadow: 0 0 30px 22px var(--bg);
    pointer-events: none;
    transition: opacity .2s;
}
.promo-cats-fade.is-left { left: -2px; }
.promo-cats-fade.is-right { right: -2px; }
.promo-cats.at-start .promo-cats-fade.is-left,
.promo-cats.at-end .promo-cats-fade.is-right { opacity: 0; }
.promo-cats-arrow {
    position: absolute;
    top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 6px;
    background: var(--surface);
    color: #fff;
    transition: filter .2s, box-shadow .2s;
}
.promo-cats-arrow[hidden] { display: none; }
.promo-cats-arrow:hover { filter: brightness(1.2); }
.promo-cats-arrow.is-left { left: 0; }
.promo-cats-arrow.is-right { right: 0; }
.promo-cats-arrow .ic { width: 12px; height: 12px; }

.promo-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.promo-el {
    position: relative;
    display: flex;
    aspect-ratio: 614 / 276;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
}
.promo-el[hidden] { display: none; }
.promo-el img { width: 100%; height: 100%; border-radius: 4px 4px 0 0; object-fit: cover; transition: .24s; }
/* Üzerine gelince soldan sağa geçen parıltı (gerçek sitedeki ::before) */
.promo-el::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .4) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0));
    transform: translateX(100%);
    pointer-events: none;
}
.promo-el:hover::before { transform: translateX(-100%); transition: transform .7s ease-in-out; }
.promo-el-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Detay penceresi */
.promo-pop {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    justify-content: center;
    padding: 0 30px;
    background: rgba(0, 0, 0, .7);
}
.promo-pop[hidden] { display: none; }
.promo-pop-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1220px;
    height: calc(100vh - 80px);
    margin: 40px 0;
    overflow: hidden;
    border-radius: 4px;
    background: var(--bg);
    box-shadow: 0 0 5px rgba(25, 34, 44, .1);
    animation: open-popup .24s ease-in-out backwards;
}
@keyframes open-popup { from { opacity: 0; transform: scale(.94) translateY(12px); } }
.promo-pop-close {
    position: absolute;
    top: 11px;
    right: 11px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    color: rgba(255, 255, 255, .6);
    transition: background .2s ease-in-out, color .2s;
}
.promo-pop-close:hover { background: #2b3d51; color: #fff; }
.promo-pop-close .ic { width: 14px; height: 14px; }
.promo-pop-head { display: flex; align-items: center; flex-shrink: 0; height: 60px; padding: 0 60px 0 15px; }
.promo-pop-head h2 {
    margin: 0 8px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 400;
    line-height: 49px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.promo-pop-body {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    flex: 1;
    min-height: 0;
    padding: 15px;
}
.promo-pop-img img { width: 400px; max-width: 100%; height: auto; border-radius: 4px; }
.promo-pop-info {
    min-height: 0;
    padding-left: 20px;
    overflow: hidden auto;
    color: #fff;
    font-size: 14px;
    line-height: 16.8px;
    scrollbar-width: thin;
    scrollbar-color: #344251 transparent;
}
.promo-pop-info > ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: promo-step;
}
.promo-pop-info > ol > li {
    padding: 16px;
    border: 1px solid #31465e;
    border-radius: 6px;
    background: #1c2835;
    counter-increment: promo-step;
}
.promo-pop-info > ol > li::before {
    content: counter(promo-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    margin: 10px;
    border-radius: 100%;
    background: var(--accent);
    font-weight: 400;
}
.promo-pop-info ul { margin: 8px 0 0; padding-left: 45px; list-style: none; }
.promo-pop-info ul li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 20px;
    color: var(--text-soft);
    font-weight: 400;
}
.promo-pop-info ul li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); }
.promo-pop-info p { margin: 0 0 8px; }

@media (max-width: 860px) {
    .promo-list { grid-template-columns: 1fr; }
    .promo-pop { padding: 0; }
    .promo-pop-box { height: 100vh; margin: 0; border-radius: 0; }
    .promo-pop-body { grid-template-columns: 1fr; gap: 15px; overflow-y: auto; }
    .promo-pop-info { padding-left: 0; overflow: visible; }
}

/* ---------------------------------------------------------
   Turnuva detay sayfası (turnuva.php)
   --------------------------------------------------------- */
.td-hero { position: relative; margin: 14px 0 32px; }
.td-hero-img {
    position: relative;
    aspect-ratio: 1238 / 425;
    margin-bottom: 16px;
    border-radius: 6px;
    background: linear-gradient(#2a3c50 0%, #1c2835 100%);
}
.td-hero-img img { width: 100%; height: 100%; border-radius: 4px; object-fit: cover; }
/* Görselin alt yarısı sayfa rengine kararır */
.td-hero-img::after {
    content: "";
    position: absolute;
    inset: 52% 0 0;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(0deg, #19222c 0%, rgba(25, 34, 44, 0) 100%);
    pointer-events: none;
}
.td-hero-img .ts-status { z-index: 1; }
.td-hero-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.td-prize {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 298px;
    padding: 16px 24px 24px;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 4px;
    background: rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    text-align: center;
}
.td-prize .ts-ring.is-right { right: 50px; }
.td-prize .ts-prize-label { margin-top: 0; }
.td-prize .ts-countdown { grid-template-columns: repeat(4, 52px); }
.td-hero-info .ts-details { flex: 1; min-width: 0; }
.td-hero-info .ts-detail {
    min-width: 0;
    flex-basis: calc((100% - 32px) / 4.4);
    background: rgba(25, 124, 255, .06);
    border-color: rgba(15, 235, 255, .08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.td-games {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 40px;
    padding-top: 3px;
}

.td-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.td-col { display: flex; flex-direction: column; min-width: 0; border-radius: 4px; background: #1c2835; }
.td-col-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 175px;
    padding: 24px 16px 16px;
}
.td-col-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 22px;
    border-radius: 50%;
    color: #fff;
}
.td-col-icon .ic { width: 28px; height: 28px; }
.td-col-icon.is-prize { background: var(--accent); }
.td-col-icon.is-board { background: #23aa27; }
.td-col-icon.is-rules { background: #f2a517; }
.td-col-head h3 { margin: 0; font-size: 16px; font-weight: 500; line-height: 18px; text-transform: uppercase; }
.td-col-labels {
    display: flex;
    align-self: stretch;
    margin-top: 29px;
    padding: 0 20px;
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    text-transform: uppercase;
}
.td-col-body {
    max-height: 815px;
    padding: 0 20px 20px;
    overflow: hidden auto;
    scrollbar-width: thin;
    scrollbar-color: #344251 transparent;
}
.td-row {
    display: flex;
    align-items: center;
    height: 40px;
    margin-bottom: 4px;
    padding: 0 16px;
    border-radius: 4px;
    background: var(--bg);
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    line-height: 16px;
}
.td-row.is-top { background: rgba(35, 170, 39, .12); }
.td-row b { color: var(--teal); font-weight: 400; }
.td-row b.is-points { color: #06a9aa; }
.td-col .is-left { flex: 0 0 26px; }
.td-col .is-center { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-col .is-right { margin-left: auto; text-align: right; }
.td-col-labels .is-left { flex-basis: 42px; padding-left: 0; }
.td-col-labels .is-center { padding-left: 16px; }
.td-col-labels .is-left + .is-center { padding-left: 0; }
.td-rules { margin: 0; padding: 0 20px; color: var(--text-soft); font-size: 15px; line-height: 24px; letter-spacing: -.15px; }
.td-empty { margin: 0; padding: 30px 10px; color: rgba(255, 255, 255, .5); font-size: 13px; text-align: center; }

@media (max-width: 1100px) {
    .td-games { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .td-details { grid-template-columns: 1fr; }
    .td-col-body { max-height: 420px; }
}
@media (max-width: 860px) {
    .td-hero-info { position: static; flex-direction: column; align-items: stretch; margin-top: -60px; }
    .td-prize { flex-basis: auto; }
    .td-hero-info .ts-detail { flex-basis: 200px; }
}
@media (max-width: 560px) {
    .td-games { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}

/* ---------------------------------------------------------
   Jackpotlar sayfası
   --------------------------------------------------------- */
.jpw { padding: 0 16px; border-radius: 8px; }
.jpw-inner {
    position: relative;
    padding: 15px 15px 0;
    border-radius: 8px;
    background: url("../img/jackpot/jackpot-bg.jpg") center top / cover no-repeat;
    overflow: hidden;
}
.jpw-inner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(25, 34, 44, 0), var(--bg)); pointer-events: none; }
.jpw-inner > * { position: relative; }
.jpw-providers { display: flex; gap: 8px; }
.jpw-provider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 121px;
    height: 38px;
    padding: 0 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .7);
    transition: background .15s, color .15s;
}
.jpw-provider svg { width: 100%; height: 36px; }
.jpw-provider:hover { color: #fff; }
.jpw-provider.is-active { background: var(--accent); color: #fff; }
.jpw-provider-text { font-size: 15px; font-weight: 800; font-style: italic; letter-spacing: 1px; }
.jpw-title { margin: 30px 0 20px; font-size: 24px; font-weight: 400; text-align: center; text-transform: uppercase; }
.jp-pool.is-wide, .jp-pool.is-side { height: 76px; padding: 16px; }
.jp-pool.is-wide { justify-content: center; }
.jp-pool.is-side { justify-content: flex-start; }
.jp-pool.is-wide .jp-pool-amount, .jp-pool.is-side .jp-pool-amount { color: #fff; }
.jp-pool.is-wide .jp-cur, .jp-pool.is-side .jp-cur { color: #fff; }
.jpw-pools { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 12px; margin-top: 12px; }
.jpw-games { padding-top: 24px; }
.cf-search.is-filled { height: 40px; border: 0; background: #233243; padding: 0 16px; }
.cf-search.is-filled .cf-search-label { left: 16px; }
.jpw-games [data-casino-main], .jpw-games [data-search-results] { margin-top: 24px; }
.jpw-games [data-search-results][hidden], .casino-page [data-casino-main][hidden] { display: none; }

/* ---------------------------------------------------------
   Live RTP
   --------------------------------------------------------- */
.rtp-periods { display: flex; gap: 16px; margin-top: 21px; }
.rtp-chip { height: 40px; }
.rtp-chip .ic { width: 16px; height: 16px; }
.rtp-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
.rtp-panel { min-width: 0; padding: 16px; border-radius: 8px; background: #1c2835; }
.rtp-panel-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 600; line-height: 24px; }
.rtp-panel-title .ic { width: 20px; height: 20px; }
.rtp-panel.is-fire .rtp-panel-title .ic { color: #ff6a3d; }
.rtp-panel.is-snow .rtp-panel-title .ic { color: #3aa8ff; }
.rtp-list { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.rtp-item {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 96px;
    padding: 16px;
    border-radius: 8px;
    background: #233243;
    transition: background .15s;
}
.rtp-item:hover { background: #2a3c50; }
.rtp-item img { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.rtp-item-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.rtp-item-text b { overflow: hidden; font-size: 15px; font-weight: 600; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; }
.rtp-item-text span { color: #8e99a5; font-size: 12px; line-height: 12px; }
.rtp-item-value { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 6px; text-align: right; }
.rtp-item-value .ic { grid-row: span 2; width: 22px; height: 22px; }
.rtp-item-value b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rtp-item-value small { font-size: 12px; font-weight: 600; }
.rtp-item-value.is-up { color: #2bd46a; }
.rtp-item-value.is-down { color: #ff4d5e; }

.replay-card { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 8px; background: #1c2835; }
.replay-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 378 / 213;
    border-radius: 6px;
    background: center / cover no-repeat;
    overflow: hidden;
}
.replay-media::before { content: ""; position: absolute; inset: 0; background: rgba(10, 16, 22, .35); transition: background .15s; }
.replay-media:hover::before { background: rgba(10, 16, 22, .15); }
.replay-play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(25, 124, 255, .9);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.replay-play .ic { width: 24px; height: 24px; margin-left: 3px; }
.replay-mul {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .65);
    color: var(--teal);
    font-size: 13px;
    font-weight: 700;
}
.replay-foot { display: flex; align-items: center; gap: 6px; height: 36px; }
.replay-foot img { width: 46px; height: 36px; border-radius: 4px; object-fit: cover; }
.replay-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 12px; line-height: 14px; }
.replay-text b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.replay-text span { color: #8e99a5; }
.replay-win { padding: 0 10px; height: 36px; line-height: 36px; border-radius: 6px; background: #233243; color: var(--teal); font-size: 13px; font-weight: 700; white-space: nowrap; }

.rtp-table-box { padding: 16px; border-radius: 8px; background: #1c2835; }
.rtp-table-tabs { display: flex; gap: 16px; flex-wrap: wrap; }
.rtp-table-tabs .chip { height: 40px; }
.rtp-table-wrap { margin-top: 16px; overflow-x: auto; }
.rtp-table-wrap[hidden] { display: none; }
.rtp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rtp-table th { padding: 0 16px 8px; color: #8e99a5; font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.rtp-table td { height: 47px; padding: 0 16px; border-top: 1px solid #233243; white-space: nowrap; }
.rtp-table tbody tr:nth-child(odd) td { background: rgba(35, 50, 67, .45); }
.rtp-game { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.rtp-game img { width: 40px; height: 28px; border-radius: 4px; object-fit: cover; }
.rtp-table .is-mul { color: #ffc93c; font-weight: 700; }
.rtp-table .is-win { color: var(--teal); font-weight: 700; }

@media (max-width: 1020px) {
    .tour-section { flex-direction: column; }
    .ts-card { flex-basis: auto; width: 250px; }
    .ts-games { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rtp-panels { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 760px) {
    .ts-card { width: 100%; }
    .ts-games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .jpw { padding: 0; }
    .jpw-pools { grid-template-columns: 1fr; }
    .jpw-provider { width: auto; flex: 1; }
    .rtp-item { height: auto; padding: 12px; gap: 12px; }
    .rtp-item img { width: 48px; height: 48px; }
}
/* =========================================================
   Spor bahisleri (Maç Öncesi · Canlı Bahis · Özel Oran)
   Ölçüler hepbet191.com/tr/sports sayfasından (1280px)
   ========================================================= */
.sports-page { padding-bottom: 24px; }
.sb-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 310px;
    gap: 10px 16px;
    align-items: start;
}
.sb-layout > .lm,
.sb-layout > .sb-right {
    position: sticky;
    top: 8px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #31465e transparent;
}
.sb-center { min-width: 0; }

/* Font ikonundan üretilen beyaz PNG → maske, renk currentColor */
.sp-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: center / contain no-repeat;
            mask: center / contain no-repeat;
}
.sp-icon.is-sm { width: 16px; height: 16px; }
.sp-icon.is-box { width: 16px; height: 16px; }
.sp-flag { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; flex-shrink: 0; }

/* Sol menü */
.lm { display: flex; flex-direction: column; font-size: 12px; }
.lm-search {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;
    border: 1px solid #2a3c50;
    border-radius: 6px;
    background: var(--bg);
}
.lm-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 8px;
    border: 0;
    border-radius: 6px 0 0 6px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 12px;
    outline: 0;
}
.lm-search input::placeholder { color: rgba(255, 255, 255, .5); }
.lm-search .ic { width: 16px; height: 16px; margin: 0 11px; color: rgba(255, 255, 255, .7); }
.lm-results {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    border-radius: 6px;
    background: #233243;
    overflow: hidden;
}
.lm-results[hidden] { display: none; }
.lm-results a { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-bottom: 1px solid #1c2835; }
.lm-results a:hover { background: #2a3c50; }
.lm-results small { color: rgba(255, 255, 255, .55); }
.lm-results p { margin: 0; padding: 12px; color: rgba(255, 255, 255, .6); }
.lm-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 7px; }
.lm-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 44px;
    background: #233243;
    color: #fff;
    font-size: 12px;
}
.lm-tab:first-child { border-radius: 4px 0 0 4px; }
.lm-tab:last-child { border-radius: 0 4px 4px 0; }
.lm-tab span { color: rgba(255, 255, 255, .7); }
.lm-tab.is-active { background: var(--accent); }
.lm-tab.is-active span { color: #fff; }
.lm-filter { display: flex; align-items: center; gap: 6px; padding: 10px 12px; }
.lm-time {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 6px 0 8px;
    border-radius: 4px;
    background: #233243;
    color: #fff;
}
.lm-time .ic { width: 14px; height: 14px; flex-shrink: 0; }
.lm-time select { appearance: none; border: 0; background: none; color: #fff; font: inherit; font-size: 12px; padding-right: 2px; cursor: pointer; }
.lm-time select option { background: #1c2835; }
.lm-time .chevron { width: 12px; height: 12px; }
.lm-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 28px;
    border-radius: 4px;
    background: #233243;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    font-style: italic;
}
.lm-icon-btn .ic { width: 14px; height: 14px; }
.lm-scroll { display: flex; flex-direction: column; gap: 2px; }
.lm-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin-left: auto;
    padding: 0 12px;
    border-radius: 6px;
    background: #233243;
    font-size: 12px;
    font-weight: 600;
}
.lm-toggle .ic { width: 16px; height: 16px; }
.lm-toggle .chevron { width: 10px; height: 10px; transition: transform .2s; }
.lm-toggle[aria-expanded="true"] { background: var(--accent); }
.lm-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.lm-quick-head,
.lm-sport-head,
.lm-region-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    color: #fff;
    text-align: left;
}
.lm-quick-head {
    height: 40px;
    padding: 0 6px 0 8px;
    background: #233243;
    font-size: 11px;
    font-weight: 600;
}
.lm-quick-head .sp-icon { width: 28px; height: 28px; -webkit-mask-size: 16px; mask-size: 16px; }
.lm-quick:nth-child(1) .sp-icon { color: #ff7a2f; }
.lm-quick:nth-child(2) .sp-icon { color: #ff4b5c; }
.lm-quick:nth-child(3) .sp-icon { color: #ffc93c; }
.lm-quick:nth-child(4) .sp-icon { color: #3aa8ff; }
.lm-quick-head span { flex: 1; }
.lm-arrow {
    width: 24px;
    height: 24px;
    padding: 6px;
    border-radius: 4px;
    background: #31465e;
    transition: transform .15s;
}
.lm-quick.is-open .lm-arrow { transform: rotate(90deg); background: var(--accent); }
.lm-quick-body { display: none; flex-direction: column; background: #1c2835; }
.lm-quick.is-open .lm-quick-body { display: flex; }
.lm-quick-body a { padding: 10px 14px; border-bottom: 1px solid #233243; color: rgba(255, 255, 255, .85); }
.lm-quick-body a:hover { color: var(--teal); }

.lm-sport-head {
    height: 40px;
    padding: 0 5px 0 6px;
    border-bottom: 1px solid #31465e;
    background: #2a3c50;
}
.lm-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lm-count { color: rgba(255, 255, 255, .7); }
.lm-chevron { width: 24px; height: 24px; padding: 5px; border-radius: 4px; background: #31465e; transition: transform .15s; }
.lm-sport.is-open > .lm-sport-head .lm-chevron { transform: rotate(180deg); background: var(--accent); }
.lm-sport-body { display: none; padding: 6px; background: #1c2835; }
.lm-sport.is-open > .lm-sport-body { display: block; }
.lm-region-head { height: 36px; padding: 0 8px; border-radius: 4px; }
.lm-region-head:hover { background: #233243; }
.lm-region.is-open > .lm-region-head { background: #233243; }
.lm-region-body { display: none; flex-direction: column; padding: 2px 0 6px 12px; }
.lm-region.is-open > .lm-region-body { display: flex; }
.lm-comp {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 8px;
    border-radius: 4px;
    color: rgba(255, 255, 255, .85);
}
.lm-comp:hover { background: #233243; color: #fff; }
.lm-comp.is-active { background: rgba(25, 124, 255, .18); color: #fff; box-shadow: inset 2px 0 0 var(--accent); }
.lm-empty { margin: 0; padding: 10px; color: rgba(255, 255, 255, .55); line-height: 1.4; }

/* Canlı sol menü: maç kartları */
.lm-market {
    position: relative;
    display: flex;
    align-items: center;
    height: 36px;
    margin-bottom: 8px;
    padding: 0 10px;
    border-radius: 4px;
    background: #2a3c50;
}
.lm-market select { flex: 1; appearance: none; border: 0; background: none; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.lm-market select option { background: #1c2835; }
.lm-market .chevron { width: 12px; height: 12px; }
.lm-live-comp { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 6px; }
.lm-live-comp span { display: flex; flex-direction: column; flex: 1; min-width: 0; color: rgba(255, 255, 255, .85); }
.lm-live-comp b { font-weight: 400; color: #fff; }
.lm-live-comp em { padding: 0 6px; font-style: normal; color: rgba(255, 255, 255, .7); }
.lg {
    position: relative;
    margin-bottom: 6px;
    padding: 12px;
    border: 2px solid #1c2835;
    border-radius: 6px;
    background: #233243;
}
.lg.is-active { border-color: var(--accent); }
.lg-link { display: block; }
.lg-team { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 2px; color: #fff; }
.lg-team span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lg-team b { color: var(--teal); font-weight: 600; }
.lg-part { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; color: rgba(255, 255, 255, .7); font-size: 11px; line-height: 22px; }
.lg-part span { flex: 1; }
.lg-part .ic { width: 12px; height: 12px; }
.lg-info { display: flex; justify-content: space-between; margin: 0; color: rgba(255, 255, 255, .7); font-size: 11px; }
.lg-info i { font-style: normal; color: #ff5b6b; }
.lg-odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 10px; }

/* Oran butonları */
.odd-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    height: 34px;
    padding: 4px 10px;
    border-radius: 4px;
    background: #38506b;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    transition: background .15s;
}
.odd-btn:hover { background: #41607f; }
.odd-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.odd-value { color: #00ebfd; font-size: 13px; font-variant-numeric: tabular-nums; }
.odd-btn.is-selected { background: var(--accent); color: #fff; }
.odd-btn.is-selected .odd-value { color: #fff; }
.odd-btn.is-locked { justify-content: center; opacity: .5; cursor: not-allowed; }
.odd-btn.is-locked .ic { width: 12px; height: 12px; }
.odd-btn.is-up { box-shadow: inset 0 -2px 0 #2bd46a; }
.odd-btn.is-down { box-shadow: inset 0 -2px 0 #ff4d5e; }
.odd-btn.is-mini { padding: 4px 8px; }

/* Maç detayı */
.gd { display: flex; flex-direction: column; gap: 6px; }
.gd-back {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 10px;
    border-radius: 4px;
    background: #1c2835;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}
.gd-back .ic { width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: #2a3c50; }
.gd-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 198px;
    padding: 12px 14px;
    border-radius: 4px;
    background: #1c2835 center / cover no-repeat;
    overflow: hidden;
}
.gd-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 20, 27, .82), rgba(14, 20, 27, .35) 70%); }
.gd-hero > * { position: relative; }
.gd-hero-top { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 12px; font-weight: 600; }
.gd-live-time { margin-left: auto; padding: 3px 8px; border-radius: 4px; background: rgba(0, 0, 0, .45); font-weight: 400; }
.gd-live-time b { font-weight: 600; }
.gd-date { margin-top: 10px; color: rgba(255, 255, 255, .75); font-size: 12px; }
.gd-teams { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.gd-teams p { display: grid; grid-template-columns: 1fr auto; margin: 0; }
.gd-teams span { color: #fff; font-size: 15px; font-weight: 700; }
.gd-teams small { grid-row: 2; color: rgba(255, 255, 255, .6); font-size: 10px; }
.gd-teams em { grid-row: span 2; display: flex; gap: 3px; align-items: center; font-style: normal; }
.gd-teams em i { width: 18px; height: 18px; border-radius: 3px; font-size: 10px; font-style: normal; font-weight: 700; line-height: 18px; text-align: center; color: #fff; }
.gd-teams .is-w { background: #2bb24c; }
.gd-teams .is-l { background: #e23b4a; }
.gd-teams .is-d { background: #8a96a3; }
.gd-score { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.gd-score p { display: flex; justify-content: space-between; margin: 0; color: #fff; font-size: 16px; font-weight: 700; }
.gd-score b { color: #fff; font-size: 18px; }
.gd-score small { color: rgba(255, 255, 255, .75); font-size: 12px; }
.gd-stats { width: 100%; border-collapse: collapse; border-radius: 4px; background: #1c2835; font-size: 12px; overflow: hidden; }
.gd-stats th, .gd-stats td { padding: 6px 10px; text-align: center; color: rgba(255, 255, 255, .85); }
.gd-stats th:first-child, .gd-stats td:first-child { text-align: left; width: 60%; }
.gd-stats th { color: rgba(255, 255, 255, .55); font-weight: 600; }
.gd-stats .card { display: inline-block; width: 9px; height: 12px; border-radius: 2px; }
.gd-stats .card.is-yellow { background: #ffd23f; }
.gd-stats .card.is-red { background: #e23b4a; }
.gd-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding-left: 8px;
    border-radius: 4px;
    background: #233243;
}
.gd-tab-icon { display: flex; color: rgba(255, 255, 255, .8); }
.gd-tab-icon .ic { width: 16px; height: 16px; }
.gd-bb { display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 10px; background: #31465e; color: rgba(255, 255, 255, .6); font-size: 9px; font-weight: 800; font-style: italic; }
.gd-bb i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.gd-tabs-track { display: flex; flex: 1; overflow-x: auto; scrollbar-width: none; }
.gd-tabs-track::-webkit-scrollbar { display: none; }
.gd-tab { flex-shrink: 0; padding: 0 15px; color: #fff; font-size: 15px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.gd-tab sup { margin-left: 2px; color: rgba(255, 255, 255, .6); font-size: 9px; font-weight: 400; }
.gd-tab.is-active { color: var(--teal); }
.gd-markets { display: flex; flex-direction: column; gap: 6px; }
.gd-markets-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    padding: 0 10px;
    border-radius: 4px;
    background: #1c2835;
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.gd-markets-head .chevron { width: 14px; height: 14px; transform: rotate(180deg); transition: transform .15s; }
.gd-markets-head.is-closed .chevron { transform: none; }
.mg { border-radius: 4px; background: #233243; }
.mg[hidden] { display: none; }
.mg-head {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 5px 10px;
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}
.mg-star { width: 14px; height: 14px; }
.mg-bb { color: rgba(255, 255, 255, .45); font-size: 9px; font-weight: 800; font-style: italic; }
.mg-title { flex: 1; color: rgba(255, 255, 255, .85); }
.mg-meta { display: flex; align-items: center; gap: 4px; color: rgba(255, 255, 255, .6); }
.mg-meta .ic { width: 12px; height: 12px; }
.mg-dollar { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #2bb24c; color: #fff; font-size: 9px; font-style: normal; font-weight: 700; }
.mg-head .chevron { width: 14px; height: 14px; transform: rotate(180deg); transition: transform .15s; }
.mg.is-closed .mg-head .chevron { transform: none; }
.mg-body { padding: 0 6px 6px; }
.mg.is-closed .mg-body { display: none; }
.mg-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 4px; }
.mg-grid .odd-btn { flex-direction: column; justify-content: center; gap: 0; height: 56px; padding: 0; background: #2a3c50; overflow: hidden; }
.mg-grid .odd-label { display: flex; align-items: center; justify-content: center; width: 100%; height: 28px; padding: 0 8px; color: rgba(255, 255, 255, .6); }
.mg-grid .odd-value { display: flex; align-items: center; justify-content: center; width: 100%; height: 28px; background: #31465e; }
.mg-grid .odd-btn:hover .odd-value { background: #3b5270; }
.mg-grid .odd-btn.is-selected .odd-value { background: var(--accent); }
.mg-lines { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 4px; }
.mg-col-head { color: rgba(255, 255, 255, .55); font-size: 11px; text-align: center; }
.mg-line { display: flex; align-items: center; justify-content: center; height: 30px; border-radius: 4px; background: #2a3c50; color: rgba(255, 255, 255, .7); font-size: 12px; }
.mg-lines .odd-btn { justify-content: center; height: 30px; background: #31465e; }
.gd-note { margin: 4px 0 0; color: rgba(255, 255, 255, .5); font-size: 11px; line-height: 1.5; }
.gd-hero.is-plain { min-height: 140px; }

/* Yarışma listesi (çok sütunlu) */
.cl { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.cl-title { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; }
.cl-title h1 { flex: 1; margin: 0; overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.cl-fav { width: 16px; height: 16px; color: rgba(255, 255, 255, .7); }
.cl-multi { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .7); font-size: 12px; }
.toggle.is-on { background: var(--accent); }
.toggle.is-on::before { transform: translateX(16px); background: #fff; }
.cl-head, .cl-row { display: grid; grid-template-columns: minmax(110px, 1fr) repeat(var(--groups, 3), auto) 38px; align-items: center; gap: 8px; }
.cl-head { padding: 4px 8px; color: rgba(255, 255, 255, .55); font-size: 11px; }
.cl-hgroup { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cl-hgroup b { font-weight: 600; color: rgba(255, 255, 255, .75); }
.cl-hgroup span { display: grid; grid-template-columns: repeat(var(--n), 52px); gap: 4px; text-align: center; }
.cl-hgroup i { font-style: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cl-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    margin-top: 6px;
    padding: 0 10px;
    border-radius: 4px 4px 0 0;
    background: #1c2835;
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
}
.cl-date .chevron { width: 12px; height: 12px; transform: rotate(180deg); }
.cl-row { padding: 6px 8px; background: #233243; }
.cl-row + .cl-row { border-top: 1px solid #1c2835; }
.cl-teams { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; min-width: 0; color: #fff; font-size: 12px; }
.cl-teams span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cl-teams small { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 4px; color: rgba(255, 255, 255, .6); }
.cl-teams small .ic { width: 12px; height: 12px; }
.cl-teams:hover span { color: var(--teal); }
.cl-group { display: grid; grid-template-columns: repeat(var(--n), 52px); gap: 4px; }
.odd-btn.is-cell { flex-direction: column; justify-content: center; gap: 0; height: 36px; padding: 0 4px; background: #2a3c50; }
.odd-btn.is-cell .odd-label { color: rgba(255, 255, 255, .55); font-size: 10px; line-height: 12px; }
.cl-more { color: rgba(255, 255, 255, .7); font-size: 12px; text-align: right; }
.cl-more:hover { color: var(--teal); }
.cl-row.is-outright { grid-template-columns: 1fr 38px; }

/* Günün Kombinesi */
.combo { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 6px; background: #1c2835; }
.combo-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; color: #3aa8ff; }
.combo-head h1 { flex: 1; margin: 0; color: #fff; font-size: 16px; }
.combo-head b { color: var(--teal); font-size: 18px; }
.combo-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 4px; background: #233243; }
.combo-row > span { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; font-size: 12px; }
.combo-row small { color: rgba(255, 255, 255, .55); }
.combo-row a { color: #fff; font-weight: 600; }
.combo-row em { color: rgba(255, 255, 255, .7); font-style: normal; }
.odd-btn.is-combo { width: 70px; justify-content: center; }
.combo-add { height: 44px; margin-top: 8px; border-radius: 6px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }

/* Sağ sütun: Takımlarım · Animasyonlar · Bahis Kuponu */
.sb-right { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.sbr-box { padding: 12px; border-radius: 4px; background: #1c2835; }
.sbr-title { margin: 0 0 10px; font-size: 13px; font-weight: 600; text-transform: uppercase; }
.sbr-fav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 40px;
    border-radius: 4px;
    background: #233243;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.sbr-fav .ic { width: 14px; height: 14px; color: #ffc93c; }
.sbr-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    margin: -12px -12px 10px;
    border-radius: 4px 4px 0 0;
    background: #233243;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.sbr-bar .ic { width: 14px; height: 14px; }
.slip-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); font-size: 11px; line-height: 18px; text-align: center; }
.slip-count[hidden] { display: none; }
.slip-settings { position: relative; display: flex; align-items: center; justify-content: space-between; }
.slip-accept { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 12px; }
.slip-accept .ic { width: 14px; height: 14px; }
.slip-accept .chevron { width: 10px; height: 10px; }
.slip-accept-menu { position: absolute; top: 24px; left: 0; z-index: 5; display: flex; flex-direction: column; min-width: 220px; padding: 4px; border-radius: 6px; background: #2a3c50; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
.slip-accept-menu[hidden] { display: none; }
.slip-accept-menu button { padding: 8px 10px; border-radius: 4px; color: #fff; text-align: left; }
.slip-accept-menu button:hover, .slip-accept-menu .is-active { background: #31465e; }
.slip-clear { display: flex; color: rgba(255, 255, 255, .6); }
.slip-clear .ic { width: 12px; height: 12px; }
.slip-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 10px; }
.slip-tabs[hidden] { display: none; }
.slip-tabs button { height: 30px; border-radius: 4px; background: #233243; color: rgba(255, 255, 255, .8); font-weight: 600; }
.slip-tabs .is-active { background: var(--accent); color: #fff; }
.slip-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 8px 10px; color: rgba(255, 255, 255, .55); text-align: center; }
.slip-empty[hidden] { display: none; }
.slip-empty .ic { width: 40px; height: 40px; color: rgba(255, 255, 255, .35); }
.slip-empty b { color: rgba(255, 255, 255, .6); font-weight: 400; }
.slip-empty p { margin: 0; font-size: 11px; line-height: 1.5; }
.slip-items { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.slip-item { position: relative; padding: 8px 28px 8px 10px; border-radius: 4px; background: #233243; }
.slip-item p { margin: 0; }
.slip-pick { display: flex; justify-content: space-between; gap: 8px; color: #fff; }
.slip-odd { color: var(--teal); font-weight: 600; }
.slip-market, .slip-match { color: rgba(255, 255, 255, .6); font-size: 11px; margin-top: 2px !important; }
.slip-remove { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: #31465e; color: #fff; font-size: 13px; line-height: 18px; }
.slip-summary { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.slip-summary[hidden] { display: none; }
.slip-row { display: flex; justify-content: space-between; color: rgba(255, 255, 255, .75); }
.slip-row b { color: #fff; }
.slip-row.is-win b { color: var(--teal); font-size: 14px; }
.slip-stake { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 4px; background: #233243; color: rgba(255, 255, 255, .7); }
.slip-stake span { flex: 1; }
.slip-stake input { width: 90px; border: 0; background: none; color: #fff; font: inherit; font-size: 13px; text-align: right; outline: 0; }
.slip-stake i { font-style: normal; }
.slip-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.slip-quick button { height: 28px; border-radius: 4px; background: #233243; color: #fff; font-size: 12px; }
.slip-quick button:hover { background: #2a3c50; }
.slip-warn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 4px;
    background: rgba(255, 201, 60, .12);
    color: #ffc93c;
    font-size: 11px;
}
.slip-warn .ic { width: 14px; height: 14px; flex-shrink: 0; }
.slip-warn a { color: #fff; text-decoration: underline; }
.slip-place { width: 100%; height: 40px; margin-top: 8px; border-radius: 4px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.slip-place:disabled { opacity: .5; cursor: default; }
.sbr-game { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 4px; background: #1c2835; }
.sbr-game img { width: 79px; height: 56px; border-radius: 4px; object-fit: cover; }
.sbr-game span { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.sbr-game small { color: rgba(255, 255, 255, .55); }
.sbr-game em { padding: 6px 12px; border-radius: 14px; background: #fff; color: #1c2835; font-size: 11px; font-style: normal; font-weight: 700; }

/* Canlı animasyon kutusu */
.sbr-anim { padding-bottom: 12px; }
.pitch {
    position: relative;
    height: 150px;
    border-radius: 4px;
    background:
        linear-gradient(90deg, transparent 49.6%, rgba(255, 255, 255, .5) 49.6% 50.4%, transparent 50.4%),
        radial-gradient(circle at 50% 50%, transparent 22px, rgba(255, 255, 255, .5) 23px 24px, transparent 25px),
        repeating-linear-gradient(90deg, #2d7d38 0 10%, #29722f 10% 20%);
    border: 2px solid rgba(255, 255, 255, .5);
    overflow: hidden;
}
.pitch::before, .pitch::after { content: ""; position: absolute; top: 30%; width: 14%; height: 40%; border: 2px solid rgba(255, 255, 255, .5); }
.pitch::before { left: -2px; border-left: 0; }
.pitch::after { right: -2px; border-right: 0; }
.pitch-ball {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    width: 10px;
    height: 10px;
    margin: -5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .25);
    transition: left 1.2s ease, top 1.2s ease;
}
.pitch-text { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 3px; background: rgba(0, 0, 0, .55); font-size: 11px; }

@media (max-width: 1199px) {
    .sb-layout { grid-template-columns: 260px minmax(0, 1fr); }
    .sb-layout > .sb-right { position: static; grid-column: 1 / -1; max-height: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 860px) {
    /* minmax(0, …): kayan şeritler (spor ikonları, çipler) sütunu içerik genişliğine uzatmasın */
    .sb-layout { grid-template-columns: minmax(0, 1fr); }
    .sb-layout > .lm { position: static; max-height: none; overflow: visible; }
    .lm-toggle { display: flex; }
    .lm:not(.is-expanded) .lm-scroll { display: none; }
    .lm.is-expanded .lm-scroll { max-height: 60vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #31465e transparent; }
    .cl-head { display: none; }
    .cl-row { grid-template-columns: 1fr; }
    .cl-group { grid-template-columns: repeat(var(--n), 1fr); }
    .cl-more { text-align: left; }
}
/* DAHA'daki sayfa seçiliyken: o öğe ana menüde görünüyorsa DAHA mavi olmasın */
@media (min-width: 1200px) { .nav-item.is-active.only-below-1200 { margin: 0; padding: 0; background: none; } }
@media (min-width: 1440px) { .nav-item.is-active.only-below-1440 { margin: 0; padding: 0; background: none; } }

/* ---------------------------------------------------------
   Maç Takvimi
   --------------------------------------------------------- */
.sb-layout.is-wide { grid-template-columns: minmax(0, 1fr) 310px; }
.cal-filters { display: flex; gap: 10px; align-items: stretch; }
.cal-sport {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 264px;
    height: 52px;
    padding: 0 34px 0 12px;
    border: 1px solid #2a3c50;
    border-radius: 6px;
    cursor: pointer;
}
.cal-sport-value { display: flex; align-items: center; gap: 8px; order: 2; color: #fff; font-size: 13px; }
.cal-sport-label { order: 1; color: rgba(255, 255, 255, .55); font-size: 11px; }
.cal-sport select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cal-sport .chevron { position: absolute; right: 12px; top: 50%; width: 12px; height: 12px; margin-top: -6px; }
.cal-days { display: flex; flex: 1; gap: 5px; align-items: center; padding: 0 12px; border-radius: 6px; background: #1c2835; overflow-x: auto; scrollbar-width: none; }
.cal-day { flex-shrink: 0; height: 28px; padding: 0 12px; border-radius: 4px; color: rgba(255, 255, 255, .85); font-size: 12px; line-height: 28px; }
.cal-day:hover { background: #233243; }
.cal-day.is-active { background: var(--accent); color: #fff; }
.cal-market { display: flex; align-items: center; justify-content: space-between; height: 44px; margin-top: 10px; border-radius: 4px; background: #1c2835; }
.cal-market-select { position: relative; display: flex; align-items: center; height: 100%; width: 140px; padding: 0 10px; border-radius: 4px 0 0 4px; background: #233243; }
.cal-market-select select { flex: 1; appearance: none; border: 0; background: none; color: #fff; font: inherit; font-size: 12px; }
.cal-market-select .chevron { width: 12px; height: 12px; }
.cal-market-cols { display: grid; grid-template-columns: repeat(var(--n), 104px); gap: 1px; height: 100%; }
.cal-market-cols b { display: none; }
.cal-market-cols i { display: flex; align-items: center; justify-content: center; background: #233243; color: rgba(255, 255, 255, .8); font-size: 12px; font-style: normal; }
.cal-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.cal-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 54px auto; align-items: center; gap: 8px; padding: 6px 0 6px 12px; border-radius: 4px; background: #233243; }
.cal-row time { color: rgba(255, 255, 255, .7); font-size: 12px; }
.cal-teams { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: #fff; font-size: 12px; }
.cal-teams span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-teams:hover { color: var(--teal); }
.cal-more { color: rgba(255, 255, 255, .7); font-size: 12px; }
.cal-odds { display: grid; grid-template-columns: repeat(var(--n), 104px); gap: 1px; }
.odd-btn.is-cal { justify-content: center; height: 36px; border-radius: 0; background: #2a3c50; }

/* ---------------------------------------------------------
   Sonuçlar
   --------------------------------------------------------- */
.res { margin-top: 4px; }
.res-tabs { display: grid; grid-template-columns: 1fr 1fr; }
.res-tab { display: flex; align-items: center; justify-content: center; height: 44px; background: #233243; color: #fff; font-size: 12px; }
.res-tab:first-child { border-radius: 4px 0 0 4px; }
.res-tab:last-child { border-radius: 0 4px 4px 0; }
.res-tab.is-active { background: var(--accent); }
.res-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-top: 10px; }
.res-field { position: relative; display: flex; flex-direction: column; justify-content: center; flex: 1 1 200px; height: 56px; padding: 0 12px; border: 1px solid #2a3c50; border-radius: 6px; }
.res-field span { color: rgba(255, 255, 255, .55); font-size: 11px; }
.res-field input, .res-field select { border: 0; background: none; color: #fff; font: inherit; font-size: 13px; color-scheme: dark; }
.res-field select option { background: #1c2835; }
.res-field input:disabled, .res-field select:disabled { opacity: .5; }
.res-actions { display: flex; gap: 8px; align-items: center; }
.res-btn { display: flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 4px; background: #233243; color: #fff; font-size: 12px; font-weight: 600; }
.res-btn.is-primary { background: var(--accent); }
.res-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; align-items: start; }
.res-col { display: flex; flex-direction: column; gap: 8px; }
.res-empty { margin: 0; padding: 40px 0; color: rgba(255, 255, 255, .55); text-align: center; }
.res-comp-head { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 16px; border-radius: 4px 4px 0 0; background: #1c2835; color: #fff; font-size: 12px; }
.res-comp-head span { flex: 1; overflow: hidden; text-align: left; white-space: nowrap; text-overflow: ellipsis; }
.res-comp-head .chevron { width: 12px; height: 12px; transition: transform .15s; }
.res-comp.is-open > .res-comp-head .chevron { transform: rotate(180deg); }
.res-comp-body { display: none; flex-direction: column; gap: 2px; }
.res-comp.is-open > .res-comp-body { display: flex; }
.res-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 86px 84px; align-items: center; gap: 8px; padding: 8px 12px; background: #233243; font-size: 12px; }
.res-teams p { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 2px; color: #fff; }
.res-teams span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.res-teams b { color: var(--teal); }
.res-full { color: rgba(255, 255, 255, .7); text-align: center; }
.res-date { display: flex; flex-direction: column; color: rgba(255, 255, 255, .7); text-align: center; }
.res-date small { color: rgba(255, 255, 255, .5); }
.res-view { height: 28px; border-radius: 4px; background: #31465e; color: #fff; font-size: 11px; font-weight: 600; }
.res-row.is-open .res-view { background: var(--accent); }
.res-detail { display: none; grid-column: 1 / -1; flex-wrap: wrap; gap: 6px; padding-top: 6px; border-top: 1px solid #1c2835; }
.res-row.is-open .res-detail { display: flex; }
.res-detail span { display: flex; gap: 6px; padding: 4px 8px; border-radius: 4px; background: #1c2835; color: #fff; }
.res-detail b { color: rgba(255, 255, 255, .55); font-weight: 400; }

/* ---------------------------------------------------------
   Oyun çerçevesi (Etkinlik Defteri, Tahmin Et, Predictor)
   --------------------------------------------------------- */
.game-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 600px;
    margin-top: 4px;
    padding: 40px 16px;
    border-radius: 6px;
    background: #1c2532;
    text-align: center;
}
.gf-card { display: flex; flex-direction: column; align-items: center; max-width: 440px; padding: 32px; border: 1px solid #2a3c50; border-radius: 12px; background: #1c2835; }
.gf-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 12px; background: var(--accent); }
.gf-card h1 { margin: 16px 0 8px; font-size: 22px; }
.gf-card p { margin: 0 0 8px; color: rgba(255, 255, 255, .7); line-height: 1.5; }
.gf-note { font-size: 12px; }
.gf-btns { display: flex; gap: 8px; margin-top: 12px; }
.gf-btn { height: 40px; padding: 0 22px; border-radius: 6px; background: #31465e; color: #fff; font-weight: 700; }
.gf-btn.is-primary { background: var(--accent); }
.game-frame.is-maintenance { background: #192032; }
.mt-art { width: min(420px, 90%); height: auto; }
.mt-title { margin: 32px 0 10px; font-size: 22px; font-style: italic; font-weight: 800; letter-spacing: .5px; }
.mt-text { margin: 0; color: rgba(255, 255, 255, .85); font-size: 15px; line-height: 1.6; }

/* ---------------------------------------------------------
   E-Sporlar
   --------------------------------------------------------- */
.lm-es { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-bottom: 1px solid #31465e; background: #2a3c50; color: #fff; }
.lm-es:hover { background: #31465e; }
.lm-es.is-active { background: var(--accent); }
.lm-es.is-active .lm-count { color: #fff; }
.es-tabs { display: flex; gap: 2px; height: 40px; border-radius: 4px; background: #233243; overflow: hidden; }
.es-tab { display: flex; align-items: center; justify-content: center; flex: 1; color: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 600; }
.es-tab.is-active { background: var(--accent); color: #fff; }
.es-head { display: flex; justify-content: flex-end; align-items: center; gap: 20px; height: 32px; padding: 0 50px 0 12px; color: rgba(255, 255, 255, .55); font-size: 11px; }
.es-head span:first-child { margin-right: auto; }
.es-head-cols { display: grid; grid-template-columns: 70px 70px; gap: 4px; text-align: center; }
.es-head-cols i { font-style: normal; }
.es-section { margin-top: 6px; }
.es-section-title { margin: 8px 0 6px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .85); }
.es-group { margin-bottom: 4px; }
.es-group-head { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border-radius: 4px; background: #1c2835; color: #fff; font-size: 12px; }
.es-group-head span { flex: 1; text-align: left; }
.es-group-head b { color: rgba(255, 255, 255, .7); font-weight: 400; }
.es-group-head .chevron { width: 12px; height: 12px; transition: transform .15s; }
.es-group.is-open .es-group-head .chevron { transform: rotate(180deg); }
.es-group-body { display: none; flex-direction: column; gap: 2px; margin-top: 2px; }
.es-group.is-open .es-group-body { display: flex; }
.es-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 144px 38px; align-items: center; gap: 8px; padding: 6px 10px; background: #233243; }
.es-teams { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: #fff; font-size: 12px; }
.es-teams span { display: flex; justify-content: space-between; gap: 6px; }
.es-teams b { color: var(--teal); }
.es-when { color: rgba(255, 255, 255, .6); font-size: 11px; }
.es-live { padding: 1px 4px; border-radius: 2px; background: #e23b4a; color: #fff; font-size: 9px; font-style: normal; font-weight: 700; }
.es-odds { display: grid; grid-template-columns: 70px 70px; gap: 4px; }
.es-link { color: var(--teal); }

/* ---------------------------------------------------------
   Aranma Talebi
   --------------------------------------------------------- */
.ar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 686px;
    margin-top: 4px;
    padding: 40px 16px;
    border-radius: 6px;
    background:
        radial-gradient(ellipse 60% 50% at 50% 92%, rgba(255, 255, 255, .06), transparent 70%),
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(68, 86, 110, .35), transparent 70%),
        linear-gradient(180deg, #232c36, #12181f);
    overflow: hidden;
}
.ar::after { content: "Hepbet"; position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%) rotate(-6deg); color: rgba(255, 255, 255, .05); font-size: 120px; font-style: italic; font-weight: 800; pointer-events: none; }
.ar-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(620px, 100%);
    padding: 32px 32px 30px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    background: rgba(30, 40, 52, .72);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
    text-align: center;
}
.ar-icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 10px; background: #2b3b4f; color: #0febff; }
.ar-icon .ic { width: 26px; height: 26px; }
.ar-title { margin: 18px 0 6px; font-size: 24px; font-weight: 700; }
.ar-sub { margin: 0; color: rgba(255, 255, 255, .8); font-size: 13px; line-height: 1.5; }
.ar-line { width: 60%; height: 1px; margin: 22px 0; border: 0; background: rgba(255, 255, 255, .12); }
.ar-step { display: flex; flex-direction: column; align-items: center; width: 100%; }
.ar-step[hidden] { display: none; }
.ar-q { margin: 0 0 22px; color: #0febff; font-size: 26px; font-weight: 700; }
.ar-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.ar-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 62px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(40, 52, 66, .8);
    color: #fff;
    text-align: left;
    transition: border-color .15s, background .15s;
}
.ar-choice b { flex: 1; font-size: 14px; }
.ar-choice > .ic { width: 14px; height: 14px; color: rgba(255, 255, 255, .6); }
.ar-choice:hover { border-color: var(--accent); }
.ar-choice.is-member { border-color: rgba(25, 124, 255, .6); background: rgba(25, 124, 255, .12); }
.ar-choice-ic { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; background: #3c4c60; }
.ar-choice.is-member .ar-choice-ic { background: var(--accent); }
.ar-choice-ic .ic { width: 18px; height: 18px; }
.ar-form label { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-bottom: 12px; text-align: left; }
.ar-form label span { color: rgba(255, 255, 255, .7); font-size: 12px; }
.ar-form input, .ar-form select, .ar-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    background: rgba(20, 28, 37, .8);
    color: #fff;
    font: inherit;
    font-size: 14px;
    outline: 0;
    resize: none;
}
.ar-form select option { background: #1c2835; }
.ar-form input:focus, .ar-form select:focus, .ar-form textarea:focus { border-color: var(--accent); }
.ar-actions { display: flex; gap: 10px; width: 100%; margin-top: 4px; }
.ar-back, .ar-submit { flex: 1; height: 44px; border-radius: 6px; background: #31465e; color: #fff; font-weight: 700; }
.ar-submit { background: var(--accent); }
.ar-done-ic { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: #2bb24c; }
.ar-done-ic .ic { width: 28px; height: 28px; }
.ar-demo { margin: 14px 0 18px; padding: 8px 12px; border-radius: 6px; background: rgba(255, 201, 60, .12); color: #ffc93c; font-size: 12px; }
.ar-done .ar-back { flex: none; width: 180px; }
.ar-social { position: relative; z-index: 1; display: flex; gap: 34px; padding: 10px 40px; border-radius: 22px; background: rgba(40, 52, 66, .8); }
.ar-social a { display: flex; color: rgba(255, 255, 255, .85); }
.ar-social .ic { width: 20px; height: 20px; }

/* ---------------------------------------------------------
   Powerfull Wheel
   --------------------------------------------------------- */
.pw {
    position: relative;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) 270px;
    gap: 16px;
    align-items: start;
    min-height: 686px;
    margin-top: 4px;
    padding: 110px 20px 30px;
    border-radius: 6px;
    background: #0e141b center / cover no-repeat;
    overflow: hidden;
}
.pw-logo { position: absolute; top: 34px; left: 50%; width: min(440px, 60%); height: auto; transform: translateX(-50%); }
.pw-terms { position: absolute; top: 48px; right: 20px; color: #d7e0ea; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pw-panel { border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(14, 20, 27, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pw-panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 8px; font-size: 12px; font-weight: 700; }
.pw-panel-head b { color: rgba(255, 255, 255, .6); font-weight: 400; }
.pw-panel-head.is-center { justify-content: center; }
.pw-all { margin-left: auto; color: #2be931; font-size: 11px; font-weight: 700; }
.pw-level-list { display: flex; flex-direction: column; gap: 10px; padding: 6px 12px 14px; }
.pw-level { padding: 14px; border-radius: 10px; background-color: #172130; background-position: right center; background-size: cover; background-repeat: no-repeat; }
.pw-level::before { content: none; }
.pw-level[hidden] { display: none; }
.pw-level-ic { display: flex; color: #ffc93c; }
.pw-level-ic .ic { width: 18px; height: 18px; }
.pw-level h3 { margin: 8px 0 6px; font-size: 13px; line-height: 1.3; }
.pw-level p { margin: 0 0 10px; color: rgba(255, 255, 255, .75); font-size: 11px; line-height: 1.5; }
.pw-progress { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); }
.pw-progress i { display: block; height: 100%; border-radius: 3px; background: #e0187a; }
.pw-center { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pw-spins { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 20px; background: linear-gradient(180deg, #e0187a, #a50d58); font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px rgba(224, 24, 122, .35); }
.pw-spins .ic { width: 16px; height: 16px; }
.pw-spins b { display: flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-right: -10px; border-radius: 50%; background: #fff; color: #a50d58; font-size: 12px; }
.pw-wheel { position: relative; width: min(470px, 100%); aspect-ratio: 1; }
.pw-rotor { position: absolute; inset: 3%; }
.pw-base { width: 100%; height: 100%; transform: rotate(15deg); } /* dilim ortaları yazılarla hizalansın */
.pw-seg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 25.5%;
    height: auto;
    transform-origin: 0 50%;
    transform: rotate(calc(var(--i) * 30deg - 90deg)) translate(48%, -50%);
    pointer-events: none;
}
.pw-border { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pw-arrow { position: absolute; top: -4%; left: 50%; width: 13%; height: auto; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); }
.pw-spin { position: absolute; top: 50%; left: 50%; width: 22%; transform: translate(-50%, -50%); transition: transform .15s; }
.pw-spin img { width: 100%; height: auto; }
.pw-spin:hover { transform: translate(-50%, -50%) scale(1.05); }
.pw-modes { display: flex; gap: 22px; }
.pw-modes label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
.pw-filter { display: flex; justify-content: center; padding-bottom: 8px; }
.pw-result-list { max-height: 470px; margin: 0; padding: 0 12px 12px; list-style: none; overflow-y: auto; scrollbar-width: thin; }
.pw-result-list li { display: flex; justify-content: space-between; gap: 8px; padding: 9px 4px; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 12px; }
.pw-result-list b { font-weight: 700; }
.pw-result-list span { color: rgba(255, 255, 255, .55); }
.pw-modal { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 9, 13, .7); }
.pw-modal[hidden] { display: none; }
.pw-modal-box { position: relative; width: min(560px, 100%); padding: 24px; border-radius: 12px; background: #1c2835; }
.pw-modal-box h2 { margin: 0 0 12px; font-size: 18px; }
.pw-modal-box ol { margin: 0; padding-left: 20px; color: rgba(255, 255, 255, .8); line-height: 1.7; }
.pw-modal-close { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #2a3c50; color: #fff; }
.pw-modal-close .ic { width: 12px; height: 12px; }

@media (max-width: 1020px) {
    .pw { grid-template-columns: 1fr; padding-top: 100px; }
    .pw-center { order: -1; }
    .res-cols { grid-template-columns: 1fr; }
    .sb-layout.is-wide { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .ar-choices { grid-template-columns: 1fr; }
    .ar-q { font-size: 20px; }
    .res-row { grid-template-columns: 1fr 1fr; }
    .cal-filters { flex-direction: column; }
    .cal-sport { flex-basis: auto; }
    .cal-odds, .cal-market-cols { grid-template-columns: repeat(var(--n), 64px); }
    .es-row { grid-template-columns: 1fr; }
}
/* Jackpot kartı: süsün altındaki bulanık parıltı (gerçek sitede kartın ::after'ı) */
.jp-deco-blur { position: absolute; top: 25px; right: 8px; width: 204px; height: 52px; object-fit: contain; z-index: 1; opacity: .9; pointer-events: none; }

/* ---------------------------------------------------------
   Mobil alt çubuk (760px altı) ve ona göre kayan yüzen öğeler
   --------------------------------------------------------- */
.tabbar { display: none; }
@media (max-width: 760px) {
    :root { --tabbar-h: calc(56px + env(safe-area-inset-bottom)); }
    body { padding-bottom: var(--tabbar-h); }
    .tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 940;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        height: var(--tabbar-h);
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid #233243;
        background: rgba(14, 20, 27, .92);
        -webkit-backdrop-filter: blur(8px);
                backdrop-filter: blur(8px);
    }
    .tabbar-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 0;
        color: #d7e0ea;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }
    /* İkon 24px yuvarlak köşeli kutu içinde; seçili sekmede kutu mavi, sütun koyu (gerçek mobil sitedeki gibi) */
    .tb-ic { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: #233243; transition: background .15s; }
    .tb-ic .ic { width: 15px; height: 15px; }
    .tabbar-item.is-active { background: rgba(0, 0, 0, .3); color: #fff; }
    .tabbar-item.is-active .tb-ic { background: var(--accent); }
    .tabbar-badge {
        position: absolute;
        top: 3px;
        left: calc(50% + 2px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: var(--accent);
        color: #fff;
        font-size: 10px;
        font-style: normal;
        line-height: 16px;
        text-align: center;
    }
    .tabbar-badge:empty { display: none; }
    .tabbar-badge.is-blink { animation: sp-badge-blink .24s ease-in-out; }

    /* Yüzen destek balonu oran düğmelerinin üstüne biniyordu: mobilde destek 3 nokta menüsünden açılır.
       Yukarı çık ve bildirim alt çubuğun üstünde durur. */
    .chat-fab { display: none; }
    .chat-box { position: fixed; left: 8px; right: 8px; bottom: calc(var(--tabbar-h) + 12px); width: auto; height: min(450px, 60vh); }
    /* Yukarı çık: gerçek mobil sitedeki gibi ortada, alt çubuğun 34px üstünde, saydam ve bulanık zeminli */
    .back-to-top { bottom: calc(var(--tabbar-h) + 34px); }
    .toast { bottom: calc(var(--tabbar-h) + 12px); }
    .site-footer { padding-bottom: 72px; } /* en alttaki 18+ satırı yukarı çık düğmesinin altında kalmasın */

    /* Kupon penceresi: tam genişlikte alttan açılan sayfa */
    .slip-pop-box { width: 100%; max-width: none; max-height: calc(100dvh - 64px); border-radius: 12px 12px 0 0; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* =========================================================
   Mobil tema (760px altı) — ölçüler m.hepbet192.com'dan
   ========================================================= */
.hdr-extra,
.promo-bar,
.lm-chips,
.lm-strip,
.lm-search-btn { display: none; }
.mmenu[hidden] { display: none; }
.hero-slide picture { display: contents; }

@media (max-width: 760px) {
    /* Üst bar: yalnız ilk satır (48px) yapışık kalır; ikinci satır (44px) ve menü şeridi (40px) kayıp gider.
       Başlık kutusu "contents" olunca yapışkanlık sayfanın tamamında geçerli olur (yoksa başlıkla birlikte kayardı). */
    .site-header { display: contents; }
    .topbar { position: sticky; top: 0; z-index: 100; padding: 0 16px; background: var(--bg); }
    .logo img { height: 34px; }
    .topbar .tb-sep { display: none; }
    .tb-login { margin-right: 16px; font-size: 13px; }
    .tb-register { min-width: 0; height: 28px; padding: 0 12px; font-size: 13px; }
    .smart-panel { margin: 0 0 0 8px; }
    .sp-toggle { width: 28px; height: 28px; }

    .hdr-extra { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; }
    .hx-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 34px;
        height: 28px;
        padding: 0 8px;
        border-radius: 6px;
        background: var(--surface);
        color: #fff;
        font-size: 12px;
        white-space: nowrap;
    }
    .hx-btn .ic { width: 16px; height: 16px; }
    .hx-btn.is-phone { color: var(--teal); }
    .hx-btn.is-whatsapp { color: var(--whatsapp); }
    .hx-btn.is-telegram { color: var(--telegram); }
    .hx-btn.is-deposit { margin-left: auto; }
    .hx-btn.is-deposit .ic { color: var(--green); }
    .hx-btn.has-text:not(.is-deposit) .ic { color: var(--teal); }

    /* Menü şeridi: kenardan kenara, 40px */
    .mainnav { padding: 0; background: var(--bg-deep); }
    .mainnav-inner { gap: 18px; height: 40px; padding: 0 16px; border-radius: 0; background: none; }
    .nav-item { gap: 8px; font-size: 13px; }
    .nav-item.is-active { margin: 0 -10px 0 -8px; padding: 0 10px 0 8px; }
    .nav-icon { width: 24px; height: 24px; }
    .nav-icon .ic { width: 16px; height: 16px; }
    .nav-badge { display: none; }

    /* Ana sayfa banner'ı: mobil görsel (1074×636), kenardan kenara, sağ altta "1 / 12" */
    .hero.has-mobile { aspect-ratio: 1074 / 636; margin: 0 -14px; border-radius: 0; }
    .hero.has-mobile .hero-pager { top: auto; bottom: 8px; right: 8px; height: auto; padding: 4px 8px; border-radius: 4px; background: rgba(35, 50, 67, .5); font-size: 13px; font-weight: 400; }
    .hero.has-mobile .hero-arrow { display: none; }
    .hero.has-mobile .hero-count { min-width: 0; }

    /* Bölüm başlıkları: 32px ikon kutusu, 14px başlık, 32px "+N" düğmesi; bölümler ince çizgiyle ayrılır */
    .section-head { gap: 12px; }
    .section-icon { width: 32px; height: 32px; border-radius: 6px; }
    .section-icon .ic { width: 18px; height: 18px; }
    .section-title { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .9); }
    .section-count { height: 32px; padding: 0 12px; border-radius: 6px; background: var(--surface); color: #fff; font-size: 13px; font-weight: 400; }
    .game-section,
    .sb-section,
    .bb-section,
    .qs-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .06); }
    .game-section .section-head { margin-bottom: 12px; }

    /* Canlı Kazançlar: sekmeler başlıkla aynı satırda, kartlar 186×72 */
    .wins { margin-top: 16px; }
    .wins .section-head { flex-wrap: nowrap; margin-bottom: 12px; }
    .wins .section-title { flex-shrink: 0; }
    .wins-tabs { flex: 0 1 auto; min-width: 0; width: auto; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
    .wins-tabs::-webkit-scrollbar { display: none; }
    .wins-tab { flex: 0 0 auto; height: 32px; padding: 0 12px; border-radius: 6px; color: #afc1d5; font-size: 11px; font-weight: 600; }
    .wins-viewport { margin: 0 -14px; -webkit-mask-image: none; mask-image: none; }
    .wins-track { padding: 0 14px; }
    .win-card { flex-basis: 186px; gap: 8px; height: 72px; padding: 8px 16px 8px 8px; }
    .win-user { font-size: 10px; font-weight: 600; }
    .win-game { font-size: 12px; }
    .win-amount { margin-top: 2px; font-size: 14px; }

    /* "Promosyonlar" çubuğu + 2×2 kısa yol kartı */
    .promo-bar { display: block; margin-top: 16px; overflow: hidden; border-radius: 4px; }
    .promo-bar img { width: 100%; height: auto; }
    .promo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
    .promo-card { border-radius: 4px; }
    .promo-card.is-desktop { display: none; }

    /* Oyun bölümleri: tek satır, 150px kartlar, kenardan kenara kayar */
    .game-section .section-arrows { display: none; }
    .game-grid,
    .game-row {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 150px;
        gap: 8px;
        margin: 0 -14px;
        padding: 0 14px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding: 0 14px;
        scrollbar-width: none;
    }
    .game-grid::-webkit-scrollbar { display: none; }
    .game-grid .game-tile { scroll-snap-align: start; }

    /* Duyuru penceresi: mobilde "Tamam" mavi */
    .popup-btn-ok { background: var(--accent); }

    /* Spor / Canlı / Casino: sayfanın alt sekmeleri menü şeridinin yerine geçer (44px, 24px çipler) ve yapışık kalır */
    body:has(.sub-nav) .mainnav { display: none; }
    .sub-nav { position: sticky; top: 48px; z-index: 99; align-items: center; gap: 8px; height: 44px; margin: 0 -14px 12px; padding: 0 16px; background: var(--bg-deep); }
    .sub-nav-item { gap: 8px; height: 24px; padding: 0 8px; border: 1px solid #2a3c50; border-radius: 6px; background: var(--bg); color: rgba(255, 255, 255, .8); font-size: 10px; letter-spacing: 1.04px; }
    .sub-nav-item img { width: 14px; height: 14px; }
    .sub-nav-item.is-active { border-color: var(--accent); background: var(--accent); color: #fff; }

    /* Spor sayfaları: en üstte mini oyun kartı + Takımlarım; kupon alt çubukta olduğu için sütundaki kupon gizli */
    .sb-layout { gap: 12px; }
    .sb-layout > .sb-right { order: -1; display: flex; flex-direction: column; gap: 12px; }
    .sb-right [data-slip],
    .sb-right .sbr-anim { display: none; }
    .sb-right .sbr-game { order: -1; gap: 12px; padding: 8px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; background: linear-gradient(90deg, rgba(38, 106, 77, .35), #1c2835 60%); }
    .sbr-game b { font-size: 15px; font-weight: 500; }
    .sbr-game small { font-size: 13px; }
    .sbr-game em { padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; }
    .sb-right .sbr-box { padding: 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; }
    .sbr-title { margin-bottom: 8px; font-size: 15px; font-weight: 700; }
    .sbr-fav { height: 44px; border-radius: 6px; background: rgba(242, 165, 23, .08); font-size: 14px; font-weight: 500; }
    .sbr-fav .ic { width: 18px; height: 18px; }

    /* Sol menü: arama düğmeyle açılır; Canlı / Maç Öncesi sekmeleri ve hızlı bölüm başlıkları alt çubuk ve çiplere taşındı */
    .lm-search,
    .lm-tabs,
    .lm-quick { display: none; }
    .lm.is-searching .lm-search { display: flex; margin-bottom: 8px; }
    .lm-chips { display: flex; gap: 8px; margin: 0 -14px; padding: 0 14px; overflow-x: auto; scrollbar-width: none; }
    .lm-chips::-webkit-scrollbar { display: none; }
    .lm-chip { display: flex; flex-shrink: 0; align-items: center; gap: 8px; height: 28px; padding: 0 15px 0 6px; border: 1px solid #2a3c50; border-radius: 4px; background: #1c2835; color: #d7e0ea; font-size: 12px; font-weight: 500; white-space: nowrap; }
    .lm-chip .sp-icon { width: 18px; height: 18px; }
    .lm-chip:nth-child(1) .sp-icon { color: #ff7a2f; }
    .lm-chip:nth-child(2) .sp-icon { color: #ff4b5c; }
    .lm-chip:nth-child(3) .sp-icon { color: #ffc93c; }
    .lm-chip:nth-child(4) .sp-icon { color: #3aa8ff; }
    .lm-filter { padding: 10px 0 6px; }
    .lm-time { height: 28px; border-radius: 4px; background: rgba(255, 255, 255, .15); }
    .lm-icon-btn { height: 28px; border: 1px solid rgba(255, 255, 255, .5); background: none; }
    .lm-search-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: auto; border-radius: 4px; background: var(--bg); color: rgba(255, 255, 255, .4); }
    .lm-search-btn.is-active { color: #fff; }
    .lm-search-btn .ic { width: 16px; height: 16px; }
    .lm-toggle { margin-left: 0; }

    /* Spor ikon şeridi: 44px kutular, sağ üstte maç sayısı */
    .lm-strip { display: flex; gap: 4px; margin: 0 -14px 10px; padding: 4px 14px 0; overflow-x: auto; scrollbar-width: none; }
    .lm-strip::-webkit-scrollbar { display: none; }
    .lm-strip-item { position: relative; display: flex; flex: 0 0 44px; align-items: center; justify-content: center; height: 44px; border-radius: 4px; background: #2a3c50; color: #fff; }
    .lm-strip-item .sp-icon { width: 22px; height: 22px; }
    .lm-strip-n { position: absolute; top: -4px; right: 0; padding: 0 4px; border-radius: 0 4px 0 4px; background: rgba(25, 34, 44, .85); font-size: 10px; font-style: normal; line-height: 14px; }
    .lm-strip-item.is-active { background: var(--accent); }

    /* Maç öncesi ağacı: yalnız seçili sporun bölgeleri, kenardan kenara 36px satırlar */
    .lm-scroll { gap: 0; }
    .lm:not(.is-live) .lm-sport:not(.is-current) { display: none; }
    .lm:not(.is-live) .lm-sport.is-current > .lm-sport-head { display: none; }
    .lm:not(.is-live) .lm-sport.is-current > .lm-sport-body { display: block; margin: 0 -14px; padding: 0; background: none; }
    .lm-region-head { gap: 10px; height: 36px; padding: 0 16px; border-bottom: 1px solid var(--bg); border-radius: 0; background: #1c2835; color: rgba(255, 255, 255, .9); font-size: 14px; }
    .lm-region-head .lm-count { color: rgba(255, 255, 255, .75); font-size: 13px; }
    .lm-region-head::after { content: ""; width: 7px; height: 7px; margin: -4px 2px 0 4px; border-right: 1.5px solid rgba(255, 255, 255, .8); border-bottom: 1.5px solid rgba(255, 255, 255, .8); transform: rotate(45deg); transition: transform .15s; }
    .lm-region.is-open > .lm-region-head { background: #233243; }
    .lm-region.is-open > .lm-region-head::after { margin-top: 4px; transform: rotate(-135deg); }
    .lm-region-body { padding: 0; background: var(--bg); }
    .lm-comp { height: 36px; padding: 0 16px 0 46px; border-bottom: 1px solid #1c2835; border-radius: 0; }
    .lm-empty { padding: 14px 16px; }

    /* Casino: gerçek mobil sıra — banner, jackpot, kategori çipleri, arama + Sağlayıcılar, tam genişlikte rastgele oyun.
       Lobi bölümleri ([data-casino-main]) "contents" olunca sıralamaya katılır; arama sonuçlarında gizlenmesi korunur. */
    .casino-page { display: flex; flex-direction: column; }
    .casino-page > *,
    .casino-page > [data-casino-main] > * { order: 5; }
    .casino-page > [data-casino-main] { display: contents; }
    .casino-page > [data-casino-main][hidden] { display: none; }
    .casino-page > .trend-block { display: none; }
    .casino-page > .sub-nav { order: 0; }
    .casino-page > .hero { order: 1; }
    .casino-page .jp-carousel { order: 2; }
    .casino-page > .chips-bar { order: 3; }
    .casino-page > .casino-filters { order: 4; }
    .cf-search { flex: 1 1 0; }
    .cf-providers { flex: 1 1 0; }
    .cf-random { order: 1; flex: 1 1 100%; }

    /* Seçim yokken (varsayılan): yalnız ağaç / canlı liste; seçince ortadaki içerik gelir, ağaç "Sporlar" ile açılır */
    .sports-page.is-default .sb-center { display: none; }
    .sports-page.is-default .lm .lm-scroll { display: flex; max-height: none; overflow: visible; }
    .sports-page.is-default .lm-toggle { display: none; }

    /* Mobil Menü (alt çubuktaki "Menü"): üst barın altından tam ekran; 52px başlık + 52px satırlar */
    .mmenu { position: fixed; inset: 48px 0 0; z-index: 939; overflow-y: auto; background: var(--bg); overscroll-behavior: contain; }
    .mmenu-panel { padding-bottom: calc(var(--tabbar-h) + 16px); animation: mmenu-in .2s ease-out; }
    @keyframes mmenu-in { from { opacity: 0; transform: translateY(12px); } }
    .mmenu-head { display: flex; align-items: center; justify-content: space-between; height: 52px; }
    .mmenu-head span { padding: 0 16px; font-size: 16px; font-weight: 500; }
    .mmenu-close { display: flex; align-items: center; justify-content: center; width: 46px; height: 52px; color: rgba(255, 255, 255, .9); }
    .mmenu-close .ic { width: 16px; height: 16px; }
    .mmenu-list { display: flex; flex-direction: column; gap: 1px; margin: 0 16px; overflow: hidden; border: 1px solid #2a3c50; border-radius: 6px; background: var(--bg); }
    .mm-item {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 52px;
        padding: 0 10px;
        overflow: hidden;
        background: #1c2835;
        color: #d7e0ea;
        text-align: left;
    }
    .mm-ic { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #233243; color: rgba(255, 255, 255, .75); }
    .mm-ic .ic { width: 16px; height: 16px; }
    .mm-label { flex: 1; min-width: 0; padding: 0 10px; overflow: hidden; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
    .mm-chevron { width: 14px; height: 14px; margin-right: 6px; color: rgba(255, 255, 255, .6); transition: transform .2s; }
    .mm-item[aria-expanded="true"] .mm-chevron { transform: rotate(90deg); }
    /* ÜCRETSİZ: sağdan maviye geçen şerit */
    .mm-item.is-free::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 120px; background: linear-gradient(90deg, rgba(28, 40, 53, 0), #1d5bb4); pointer-events: none; }
    .mm-free { position: relative; z-index: 1; margin-right: 18px; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
    .mm-sub { display: flex; flex-direction: column; gap: 1px; background: var(--bg); }
    .mm-sub[hidden] { display: none; }
    .mm-sub-item { display: flex; align-items: center; height: 44px; padding: 0 16px 0 58px; background: #233243; color: rgba(255, 255, 255, .85); font-size: 14px; }
    .mm-sub-item:active { background: #2a3c50; }
}
@media (max-width: 480px) {
    .hero.has-mobile,
    .wins-viewport,
    .game-grid,
    .game-row,
    .sub-nav,
    .lm-chips,
    .lm-strip,
    .lm:not(.is-live) .lm-sport.is-current > .lm-sport-body { margin-left: -10px; margin-right: -10px; }
    .wins-track,
    .game-grid,
    .game-row,
    .lm-chips,
    .lm-strip { padding-left: 10px; padding-right: 10px; }
}

/* =========================================================
   Yardım sayfaları (yardim.php) — gerçek sitedeki /help/<id>/<sayfa> (footerInfoPage) ölçüleri:
   #131b24 blok, 20px iç boşluk, 44px başlık satırı, numaralı bölümler (28px daire), 6px nokta maddeler
   ========================================================= */
.help-page { margin: 10px 18px 0; padding: 20px; background: #131b24; }
.help-head { display: flex; align-items: center; height: 44px; }
.help-back {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-right: 16px;
    border: 1px solid transparent;
    border-radius: 50%;
    background:
        linear-gradient(#2a3c50, #233243) padding-box,
        linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .2)) border-box;
    color: rgba(255, 255, 255, .8);
    transition: color .2s;
}
.help-back:hover { color: #fff; }
.help-back .ic { width: 16px; height: 16px; }
.help-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.help-print {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 40px;
    padding: 0 15px;
    border-radius: 4px;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background .2s;
}
.help-print:hover { background: var(--accent-hover); }

.help-content {
    margin-top: 20px;
    color: var(--text-soft);
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    overflow-wrap: anywhere;
}
.help-content p { margin: 0 0 12px; }
.help-content a { color: var(--accent); text-decoration: underline; }
.help-content ol { margin: 0; padding: 0; list-style: none; counter-reset: help-step; }
.help-content ol > li { margin-bottom: 12px; counter-increment: help-step; }
.help-content ol > li::before {
    content: counter(help-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 12px;
    border-radius: 50%;
    background: linear-gradient(#3f5a78, #31465e);
    color: var(--teal);
    font-size: 15px;
    font-weight: 600;
    line-height: 15px;
    vertical-align: middle;
}
.help-content ol > li > strong { color: #fff; font-size: 18px; font-weight: 700; }
.help-content ul { margin: 8px 0 0; padding: 0; list-style: none; }
.help-content ol > li > ul { margin-left: 40px; }
.help-content ul > li { position: relative; padding-left: 16px; }
.help-content ul > li::before {
    content: "";
    position: absolute;
    top: 8.25px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3f5a78;
}

/* İletişim: departman tablosu + Beni Ara / WhatsApp Destek */
.help-content .contact-list { max-width: 520px; margin-top: 20px; border: 1px solid #2a3c50; border-radius: 6px; background: #1c2835; }
.help-content .contact-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; box-shadow: inset 0 -1px #233243; }
.help-content .contact-item:last-child { box-shadow: none; }
.help-content .contact-title,
.help-content .contact-value { flex: 1 0 0; font-weight: 600; }
.help-content .contact-title { color: #bccbdc; }
.help-content .contact-value { color: #fff; text-align: right; }
.help-content .contact-value a { color: inherit; text-decoration: none; }
.help-content .contact-value a:hover { text-decoration: underline; }
.help-content .button-group { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.help-content .button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    transition: filter .2s;
}
.help-content .button::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; background: #fff; -webkit-mask: var(--btn-ic) center / contain no-repeat; mask: var(--btn-ic) center / contain no-repeat; }
.help-content .button:hover { filter: brightness(1.12); }
.help-content .button.is-call { --btn-ic: url("../img/icons/help/call-back.svg"); background: linear-gradient(#197cff, #197cff) padding-box, linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .2)) border-box; }
.help-content .button.is-whatsapp { --btn-ic: url("../img/icons/help/whatsapp.svg"); background: linear-gradient(#23aa27, #23aa27) padding-box, linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .2)) border-box; }

/* Sosyal Medya: marka ikonlu hesap kartları */
.help-content .social-list { display: flex; flex-direction: column; gap: 20px; }
.help-content .social-group { display: flex; flex-direction: column; gap: 8px; }
.help-content .social-group strong { color: #fff; font-size: 18px; font-weight: 700; }
.help-content .social-group ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.help-content .social-group li { padding: 0; }
.help-content .social-group li::before { content: none; }
.help-content .social-group a {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #233243;
    border-radius: 6px;
    background: #1c2835;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}
.help-content .social-group a:hover { background: #233243; border-color: #2a3c50; }
.help-content .social-group a::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; background: var(--soc-ic) center / contain no-repeat; }
.help-content .twitter   { --soc-ic: url("../img/social/twitter.svg"); }
.help-content .instagram { --soc-ic: url("../img/social/instagram.svg"); }
.help-content .facebook  { --soc-ic: url("../img/social/facebook.svg"); }
.help-content .bluesky   { --soc-ic: url("../img/social/bluesky.svg"); }
.help-content .tiktok    { --soc-ic: url("../img/social/tiktok.svg"); }
.help-content .pinterest { --soc-ic: url("../img/social/pinterest.svg"); }
.help-content .youtube   { --soc-ic: url("../img/social/youtube.svg"); }
.help-content .telegram  { --soc-ic: url("../img/social/telegram.svg"); }
.help-content .whatsapp  { --soc-ic: url("../img/social/whatsapp.svg"); }

/* Kayıt formundaki Gizlilik / Genel Şartlar: sayfadan çıkmadan açılan yardım penceresi (gerçekte footerInfoPopup) */
.help-pop { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; justify-content: center; padding: 0 30px; background: rgba(0, 0, 0, .7); }
.help-pop[hidden] { display: none; }
.help-pop-box { position: relative; display: flex; flex-direction: column; width: 916px; max-width: 100%; height: calc(100% - 154px); border-radius: 4px; background: var(--bg); overflow: hidden; }
.help-pop-head { display: flex; align-items: center; gap: 16px; flex-shrink: 0; height: 38px; padding: 0 50px 0 15px; }
.help-pop-back { display: flex; color: rgba(255, 255, 255, .8); }
.help-pop-back:hover { color: #fff; }
.help-pop-back .ic { width: 19px; height: 19px; }
.help-pop-title { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #fff; font-size: 16px; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.help-pop-print { display: inline-flex; align-items: center; flex-shrink: 0; height: 28px; padding: 0 15px; border-radius: 4px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 500; text-transform: uppercase; white-space: nowrap; }
.help-pop-print:hover { background: var(--accent-hover); }
.help-pop-close { position: absolute; top: 11px; right: 11px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #233243; color: rgba(255, 255, 255, .6); transition: color .2s; }
.help-pop-close:hover { color: #fff; }
.help-pop-close .ic { width: 14px; height: 14px; }
/* Pencerede içerik sade gösterilir: 13px, numaralı/noktalı varsayılan listeler */
.help-pop-content { flex: 1 1 auto; padding: 15px; overflow-y: auto; color: rgba(255, 255, 255, .6); font-size: 13px; line-height: 18px; overscroll-behavior: contain; }
.help-pop-content ol,
.help-pop-content ul { margin: 0; padding: 0; list-style-position: inside; }
.help-pop-content ul { list-style-type: disc; }
.help-pop-content ul ul { padding-left: 16px; }
.help-pop-content a { color: var(--accent); }
.help-pop-content .contact-item,
.help-pop-content .social-group strong { display: block; }
.help-pop-content .button-group { display: flex; gap: 12px; margin-top: 8px; }

@media (max-width: 760px) {
    .help-page { margin: 0; padding: 16px; }
    .help-back { width: 32px; height: 32px; border: 0; background: #2a3c50; }
    .help-title { font-size: 16px; line-height: 24px; }
    .help-print { height: 28px; background: var(--surface); font-size: 12px; font-weight: 500; text-transform: none; }
    .help-print:hover { background: var(--surface-2); }
    .help-content { margin-top: 16px; font-size: 13px; line-height: 20px; }
    .help-content ol > li > strong { font-size: 15px; }
    .help-content ol > li > ul { margin-left: 0; }
    .help-content ul > li { padding-left: 28px; }
    .help-content ul > li::before { top: 6.75px; left: 11px; }
    .help-content .contact-list { max-width: none; margin-top: 12px; }
    .help-content .button-group { gap: 8px; margin-top: 12px; }
    .help-content .button { flex: 1 1 0; padding: 0 16px; }
    .help-content .social-group strong { font-size: 15px; }

    .help-pop { padding: 0; }
    .help-pop-box { width: 100%; height: 100%; border-radius: 0; }
}
/* =========================================================
   Oyuncu hesabı (giriş yapınca üst bar): bakiye + kullanıcı menüsü
   ========================================================= */
.tb-balance {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 32px;
    margin-right: 8px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 6px;
    background: var(--surface);
    line-height: 1.1;
    white-space: nowrap;
    transition: background .24s, border-color .24s;
}
.tb-balance:hover { background: #2b3d51; border-color: rgba(255, 255, 255, .16); }
.tb-balance-label { color: var(--text-muted); font-size: 10px; }
.tb-balance b { color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-balance b.is-changed { animation: hb-balance-pop .6s ease-out; }
@keyframes hb-balance-pop { 30% { color: var(--teal); transform: scale(1.06); } }
.tb-user-wrap { position: relative; }
.tb-user {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px 0 6px;
    border-radius: 4px;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    transition: background .24s;
}
.tb-user:hover { background: var(--accent-hover); }
.tb-user .ic { width: 18px; height: 18px; }
.tb-user .chevron { width: 12px; height: 12px; color: #fff; }
.tb-user-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--border); color: #fff; font-weight: 600; }
.dd-head small { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.dd-head small b { color: var(--text-soft); font-weight: 600; }
.dropdown-menu .ic { width: 16px; height: 16px; }

@media (max-width: 760px) {
    .tb-balance { height: 28px; margin-right: 6px; padding: 0 8px; }
    .tb-balance-label { display: none; }
    .tb-user { height: 28px; padding: 0 6px; }
    .tb-user-name,
    .tb-user .chevron { display: none; }
}