/* ============================================
   CHS Bett - Bonubet Tarzı Tasarım
   ============================================ */

:root {
    --navbar-bg: #1a1a2e;
    --navbar-height: 52px;
    --sidebar-width: 220px;
    --sidebar-bg: #f0f0f0;
    --sidebar-heading-bg: #c0392b;
    --sidebar-heading-color: #fff;
    --sidebar-link-hover: #e8e8e8;
    --sidebar-link-active: #dcdcdc;
    --content-bg: #e8e8e8;
    --accent-red: #c0392b;
    --accent-green: #27ae60;
    --text-dark: #2c3e50;
}

/* -- Login Sayfası -- */
.login-page {
    background: url('../img/login-bg.jpg') no-repeat center center;
    background-size: cover;
    min-height: 100vh;
    position: relative;
}

.login-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 30, 0.75);
    z-index: 0;
}

.login-page > .container {
    position: relative;
    z-index: 1;
}

.login-card {
    background: rgba(20, 20, 45, 0.85);
    backdrop-filter: blur(16px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.login-card .login-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 6px;
}

.login-card .login-input {
    display: block;
    width: 100%;
    border-radius: 6px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    box-sizing: border-box;
}

.login-card .login-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.login-card .login-input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--accent-red);
    box-shadow: 0 0 0 0.2rem rgba(192, 57, 43, 0.3);
    color: #fff;
}

.login-card .login-input:-webkit-autofill,
.login-card .login-input:-webkit-autofill:hover,
.login-card .login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px rgba(20, 20, 45, 0.95) inset;
    box-shadow: 0 0 0 1000px rgba(20, 20, 45, 0.95) inset;
    border: 1px solid rgba(255, 255, 255, 0.25);
    caret-color: #fff;
}

.login-password-wrap {
    position: relative;
}

.login-password-wrap .login-input {
    padding-right: 44px;
}

.login-password-toggle {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    font-size: 1.1rem;
    transition: color 0.2s;
}

.login-password-toggle:hover {
    color: rgba(255, 255, 255, 0.8);
}

.login-card .btn-primary {
    border-radius: 6px;
    padding: 12px;
    font-size: 1.05rem;
    transition: all 0.2s;
    background: var(--accent-red);
    border-color: var(--accent-red);
}

.login-card .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(192, 57, 43, 0.5);
    background: #e74c3c;
    border-color: #e74c3c;
}

.login-card .btn-primary:active {
    transform: translateY(0);
}

.login-logo {
    max-width: 200px;
    height: auto;
}

.login-brand-icon {
    width: 60px;
    height: 60px;
    background: var(--accent-red);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.6rem;
    color: #fff;
    box-shadow: 0 4px 15px rgba(192, 57, 43, 0.4);
}

.login-footer {
    color: rgba(255, 255, 255, 0.4);
}

.login-footer a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s;
}

.login-footer a:hover {
    color: #fff;
}

/* ============================================
   Üst Navbar
   ============================================ */
body {
    margin: 0;
    padding: 0;
    background: var(--content-bg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: relative;
}
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../img/sport-bg-photo5.jpg') no-repeat center center;
    background-size: cover;
    opacity: 0.1;
    z-index: -1;
    pointer-events: none;
}

.top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--navbar-height);
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 60%, #16213e 100%);
    z-index: 1050;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    border-bottom: 2px solid var(--accent-red);
}

.navbar-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 16px;
    max-width: 100%;
}

/* Logo */
.navbar-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-right: 24px;
    flex-shrink: 0;
}

.navbar-logo:hover {
    text-decoration: none;
    opacity: 0.9;
}

.navbar-logo-img {
    height: 32px;
    width: auto;
}

/* Orta Menü */
.navbar-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.navbar-menu-item {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    padding: 0 20px;
    height: var(--navbar-height);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.15s;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    position: relative;
}

.navbar-menu-item i {
    font-size: 1.05rem;
}

.navbar-menu-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.navbar-menu-item.active {
    color: #fff;
    border-bottom-color: #f1c40f;
    background: rgba(255, 255, 255, 0.04);
}

/* Canlı Casino navbar linki */
.navbar-menu-item.nav-live-casino {
    background: linear-gradient(135deg, rgba(142,68,173,0.25) 0%, rgba(192,57,43,0.2) 100%);
    border-radius: 6px;
}

.navbar-menu-item.nav-live-casino:hover {
    background: linear-gradient(135deg, rgba(142,68,173,0.35) 0%, rgba(192,57,43,0.3) 100%);
}

.navbar-menu-item.nav-live-casino.active {
    background: linear-gradient(135deg, rgba(142,68,173,0.4) 0%, rgba(192,57,43,0.35) 100%);
    border-bottom-color: #8e44ad;
}

/* Canli yesil titreyen nokta */
.nav-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ecc71;
    display: inline-block;
    animation: livePulse 1.5s infinite;
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.6);
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* Sağ Taraf */
.navbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* Dil Secici */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lang-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    border: 1px solid transparent;
    opacity: 0.5;
    transition: opacity 0.2s, border-color 0.2s;
    text-decoration: none;
}

.lang-flag:hover {
    opacity: 0.85;
}

.lang-flag.active {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.4);
}

.lang-flag .fi {
    font-size: 1rem;
    border-radius: 2px;
}

/* Login dil secici */
.lang-switcher-login {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10;
    gap: 6px;
}

.lang-switcher-login .lang-flag {
    width: 30px;
    height: 30px;
    opacity: 0.6;
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
}

.lang-switcher-login .lang-flag:hover {
    opacity: 0.9;
    background: rgba(0, 0, 0, 0.5);
}

.lang-switcher-login .lang-flag.active {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.5);
}

/* Bakiye */
.navbar-balance-wrap {
    position: relative;
    cursor: pointer;
}

.navbar-balance {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 5px 12px;
    color: #f1c40f;
    font-weight: 700;
    font-size: 0.82rem;
    white-space: nowrap;
}

.navbar-balance i {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
}

.navbar-balance-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    padding-top: 6px;
    min-width: 200px;
    z-index: 1060;
}

.navbar-balance-dropdown-inner {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 8px 0;
}

.navbar-balance-wrap:hover .navbar-balance-dropdown {
    display: block;
}

.navbar-balance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    font-size: 0.82rem;
}

.navbar-balance-row-label {
    color: #777;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.navbar-balance-row-label i {
    font-size: 0.85rem;
    color: #aaa;
}

.navbar-balance-row-value {
    font-weight: 800;
    color: #27ae60;
}

.navbar-balance-row-value.casino {
    color: #d4a017;
}

/* Kullanici Paneli */
.navbar-user-panel {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.navbar-user-panel:hover {
    background: rgba(255, 255, 255, 0.08);
}

.navbar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-red), #e74c3c);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
}

.navbar-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.navbar-user-name {
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
}

.navbar-role-badge {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-top: 2px;
    width: fit-content;
}

.navbar-role-badge.role-admin,
.navbar-role-badge.role-superadmin,
.navbar-role-badge.role-jokeradmin {
    background: var(--accent-red);
    color: #fff;
}

.navbar-role-badge.role-acenta {
    background: #2980b9;
    color: #fff;
}

.navbar-role-badge.role-bayi {
    background: var(--accent-green);
    color: #fff;
}

.navbar-role-badge.role-webuser {
    background: #7f8c8d;
    color: #fff;
}

/* Dropdown */
.navbar-user-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    padding-top: 6px;
    min-width: 160px;
    z-index: 1060;
}

.navbar-user-dropdown-inner {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.navbar-user-panel:hover .navbar-user-dropdown {
    display: block;
}

.navbar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background 0.1s;
}

.navbar-dropdown-item:hover {
    background: #f5f5f5;
    color: var(--accent-red);
}

.navbar-dropdown-item i {
    font-size: 1rem;
    width: 18px;
    text-align: center;
}

.session-badge {
    background: #f39c12;
    color: #fff;
    font-size: 0.72rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    animation: pulse 2s infinite;
}

.session-badge.danger {
    background: var(--accent-red);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Navbar Responsive */
@media (max-width: 767.98px) {
    .navbar-menu-item span {
        display: none;
    }
    .navbar-menu-item {
        padding: 0 14px;
    }
    .navbar-menu-item i,
    .navbar-menu-item .nav-live-dot {
        font-size: 1.15rem;
    }
    .navbar-logo-img {
        height: 26px;
    }
    .navbar-logo {
        margin-right: 12px;
    }
}

/* ============================================
   Ana Layout
   ============================================ */
.main-wrapper {
    display: flex;
    min-height: 100vh;
}

/* ============================================
   Duyuru Paneli (Marquee)
   ============================================ */
.announcement-bar {
    position: absolute;
    top: calc(var(--navbar-height) + 5px);
    left: 0;
    right: 0;
    z-index: 1040;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    height: 32px;
    overflow: hidden;
}

.announcement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 100%;
    background: rgba(255, 255, 255, 0.06);
    color: #f1c40f;
    font-size: 0.78rem;
}

.announcement-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.announcement-track {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: marquee 30s linear infinite;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
}

.announcement-track:hover {
    animation-play-state: paused;
}

.announcement-separator {
    display: inline-block;
    margin: 0 16px;
    color: #f1c40f;
    font-size: 0.7rem;
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@media (max-width: 575.98px) {
    .announcement-icon {
        width: 32px;
        min-width: 32px;
        font-size: 0.7rem;
    }

    .announcement-track {
        font-size: 0.72rem;
    }
}

/* ============================================
   Duyuru Yonetim Sayfasi
   ============================================ */
.duyuru-wrapper {
    max-width: 100%;
    margin: 0 auto;
}

.duyuru-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 60%, #16213e 100%);
    color: #fff;
    padding: 18px 24px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.duyuru-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.duyuru-header-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    color: #f1c40f;
}

.duyuru-header-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

/* Form */
.duyuru-form-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

.duyuru-form-header {
    background: #f5f6f8;
    padding: 10px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #444;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.duyuru-form-header i {
    font-size: 0.9rem;
    color: #888;
}

.duyuru-form-body {
    padding: 16px;
}

.duyuru-form-group {
    margin-bottom: 12px;
}

.duyuru-form-group label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}

.duyuru-form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.15s;
}

.duyuru-form-input:focus {
    outline: none;
    border-color: var(--accent-red);
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.1);
}

.duyuru-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.duyuru-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: none;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}

.duyuru-btn-save {
    background: var(--accent-green);
    color: #fff;
}

.duyuru-btn-save:hover {
    background: #219a52;
}

.duyuru-btn-cancel {
    background: #f0f0f0;
    color: #666;
}

.duyuru-btn-cancel:hover {
    background: #e4e4e4;
    color: #444;
}

/* Tablo */
.duyuru-table-wrapper {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.duyuru-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.duyuru-table thead {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #fff;
}

.duyuru-table thead th {
    padding: 10px 14px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.duyuru-table tbody tr {
    border-bottom: 1px solid #eee;
    transition: background 0.1s;
}

.duyuru-table tbody tr:hover {
    background: #f9f9fb;
}

.duyuru-table tbody td {
    padding: 10px 14px;
    vertical-align: middle;
}

.duyuru-cell-no {
    width: 40px;
    text-align: center;
    font-weight: 600;
    color: #999;
}

.duyuru-cell-mesaj {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.duyuru-cell-date {
    white-space: nowrap;
    color: #777;
    font-size: 0.78rem;
}

.duyuru-cell-actions {
    white-space: nowrap;
    display: flex;
    gap: 4px;
}

/* Badge */
.duyuru-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
}

.duyuru-badge-active {
    background: rgba(39, 174, 96, 0.12);
    color: #1e8449;
}

.duyuru-badge-inactive {
    background: rgba(192, 57, 43, 0.1);
    color: #c0392b;
}

/* Action butonlari */
.duyuru-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #666;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.duyuru-action-toggle:hover {
    background: #fff3cd;
    border-color: #f0c040;
    color: #856404;
}

.duyuru-action-edit:hover {
    background: #d1ecf1;
    border-color: #6cc3d5;
    color: #0c5460;
}

.duyuru-action-delete:hover {
    background: #f8d7da;
    border-color: #e4868d;
    color: #721c24;
}

/* Bos durum */
.duyuru-empty {
    text-align: center;
    padding: 48px 24px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #aaa;
}

.duyuru-empty i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 12px;
}

.duyuru-empty p {
    margin: 0;
    font-size: 0.88rem;
}

@media (max-width: 767.98px) {
    .duyuru-header {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px 16px;
    }

    .duyuru-header-icon {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }

    .duyuru-header-title {
        font-size: 1rem;
    }

    .duyuru-cell-mesaj {
        max-width: 200px;
    }

    .duyuru-table {
        font-size: 0.75rem;
    }

    .duyuru-table thead th,
    .duyuru-table tbody td {
        padding: 8px 10px;
    }
}

/* ============================================
   Sol Sidebar
   ============================================ */
.sidebar {
    width: var(--sidebar-width);
    min-height: calc(100vh - var(--navbar-height));
    background: var(--sidebar-bg);
    border-right: 1px solid #ddd;
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    overflow-y: auto;
    z-index: 1040;
}

.sidebar-toggle {
    display: none;
    position: absolute;
    top: 8px;
    right: -36px;
    background: var(--navbar-bg);
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 0 4px 4px 0;
    font-size: 1rem;
    cursor: pointer;
    z-index: 1041;
}

.sidebar-section {
    margin-bottom: 0;
}

.sidebar-heading {
    background: var(--sidebar-heading-bg);
    color: var(--sidebar-heading-color);
    padding: 10px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu li {
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-menu li:last-child {
    border-bottom: none;
}

.sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.88rem;
    transition: background 0.1s;
}

.sidebar-link:hover {
    background: var(--sidebar-link-hover);
    color: var(--text-dark);
    text-decoration: none;
}

.sidebar-link.active {
    background: var(--sidebar-link-active);
    font-weight: 600;
    border-left: 3px solid var(--accent-red);
    padding-left: 11px;
}

.sidebar-link-text {
    flex: 1;
}

.sidebar-link-count {
    background: #555;
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 7px;
    border-radius: 3px;
    font-weight: 600;
}

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* ============================================
   İçerik Alanı
   ============================================ */
.content-area {
    flex: 1;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px 24px;
    padding-top: calc(var(--navbar-height) + 20px);
    min-height: 100vh;
}

.content-area.has-announcement {
    padding-top: calc(var(--navbar-height) + 32px + 5px + 20px);
}

/* ============================================
   Dashboard Layout (Sidebar + Icerik)
   ============================================ */
.dashboard-layout {
    display: flex;
    gap: 0;
    min-height: calc(100vh - 40px);
}

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

/* ============================================
   Ulke / Lig Sol Menu
   ============================================ */
.country-sidebar {
    width: 100%;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.country-sidebar-header {
    background: var(--navbar-bg);
    color: #fff;
    padding: 10px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.country-sidebar-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

/* Populer Ligler */
.popular-leagues-section {
    border-bottom: 1px solid #eee;
}
.popular-leagues-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #2c3e50;
    cursor: pointer;
    transition: background 0.15s;
}
.popular-leagues-header:hover {
    background: rgba(0, 0, 0, 0.04);
}
.popular-leagues-arrow {
    font-size: 0.6rem;
    color: #999;
}
.popular-leagues {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px 10px;
}
.popular-league-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid transparent;
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
}
.popular-league-item:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
}
.popular-league-item.active {
    background: rgba(192, 57, 43, 0.1);
    border-color: rgba(192, 57, 43, 0.3);
}
.popular-league-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}
.popular-league-name {
    font-size: 0.72rem;
    color: #444;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.popular-league-item.active .popular-league-name {
    color: #c0392b;
    font-weight: 600;
}

/* Zaman Filtre Paneli */
.country-sidebar-wrap {
    width: 240px;
    min-width: 240px;
    margin-right: 16px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
}
.sidebar-top-search {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 7px 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sidebar-top-search:focus-within {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.15);
}
.sidebar-top-search .sidebar-search-icon {
    color: #aaa;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.sidebar-top-search:focus-within .sidebar-search-icon {
    color: var(--accent-red);
}
.sidebar-top-search .sidebar-search-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.8rem;
    padding: 4px;
    flex: 1;
    min-width: 0;
}
.sidebar-top-search .sidebar-search-clear {
    color: #999;
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
}
.sidebar-top-search .sidebar-search-clear:hover {
    color: var(--accent-red);
}
.sidebar-results-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    padding: 9px 12px;
    background: #fff;
    color: #334155;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}
.sidebar-results-btn i:first-child {
    color: #2563eb;
    font-size: 0.95rem;
}
.sidebar-results-btn:hover {
    background: #f1f5f9;
    color: #1e40af;
    border-color: #bfdbfe;
}

.sidebar-favs-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    margin-bottom: 8px;
    padding: 9px 12px;
    background: #fff;
    color: #334155;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.sidebar-favs-btn i:first-child {
    color: #f1c40f;
    font-size: 0.95rem;
}
.sidebar-favs-btn:hover {
    background: #fffbeb;
    color: #92400e;
    border-color: #fcd34d;
}
.sidebar-favs-btn.active {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border-color: #f59e0b;
}
.sidebar-fav-count {
    margin-left: auto;
    background: #f1c40f;
    color: #333;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}
.sidebar-favs-btn:not(.has-favs) .sidebar-fav-count {
    background: #e5e7eb;
    color: #9ca3af;
}

.time-filter-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 10px 10px;
    background: linear-gradient(180deg, #141428 0%, #1a1a35 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.time-filter-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px 6px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    text-align: center;
}

.time-filter-btn i {
    font-size: 0.9rem;
    line-height: 1;
}

.time-filter-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    text-decoration: none;
}

.time-filter-btn.active {
    color: #fff;
    border-color: transparent;
}

/* Her butonun kendine ozel aktif rengi */
.time-filter-btn[data-zaman="3saat"].active {
    background: linear-gradient(180deg, #e67e22, #d35400);
    box-shadow: 0 2px 10px rgba(230, 126, 34, 0.35);
}
.time-filter-btn[data-zaman="3saat"].active i { color: #ffecd2; }

.time-filter-btn[data-zaman="bugun"].active {
    background: linear-gradient(180deg, #27ae60, #1e8449);
    box-shadow: 0 2px 10px rgba(39, 174, 96, 0.35);
}
.time-filter-btn[data-zaman="bugun"].active i { color: #d5f5e3; }

.time-filter-btn[data-zaman="24saat"].active {
    background: linear-gradient(180deg, #2980b9, #1f6fa3);
    box-shadow: 0 2px 10px rgba(41, 128, 185, 0.35);
}
.time-filter-btn[data-zaman="24saat"].active i { color: #d6eaf8; }

.time-filter-btn[data-zaman="3gun"].active {
    background: linear-gradient(180deg, #8e44ad, #6c3483);
    box-shadow: 0 2px 10px rgba(142, 68, 173, 0.35);
}
.time-filter-btn[data-zaman="3gun"].active i { color: #e8daef; }

.time-filter-btn[data-zaman="tumu"].active {
    background: linear-gradient(180deg, var(--accent-red), #a93226);
    box-shadow: 0 2px 10px rgba(192, 57, 43, 0.35);
}
.time-filter-btn[data-zaman="tumu"].active i { color: #fadbd8; }

/* Alt satirdaki 2 buton ortalansin */
.time-filter-btn:nth-child(4) {
    grid-column: 1 / 2;
}
.time-filter-btn:nth-child(5) {
    grid-column: 2 / 4;
}

/* Sidebar Arama */
.sidebar-search {
    padding: 8px 10px;
    background: #f5f6f8;
    border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0;
}

.sidebar-search form {
    margin: 0;
}

.sidebar-search-box {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sidebar-search-box:focus-within {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.15);
}

.sidebar-search-icon {
    color: #aaa;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.sidebar-search-box:focus-within .sidebar-search-icon {
    color: var(--accent-red);
}

.sidebar-search-input {
    border: none;
    outline: none;
    background: transparent;
    padding: 7px 8px;
    font-size: 0.78rem;
    color: var(--text-dark);
    width: 100%;
    min-width: 0;
}

.sidebar-search-input::placeholder {
    color: #aaa;
}

.sidebar-search-clear {
    color: #999;
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
    padding: 0 2px;
    transition: color 0.15s;
}

.sidebar-search-clear:hover {
    color: var(--accent-red);
    text-decoration: none;
}

.country-all-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    border-bottom: 1px solid #eee;
    transition: background 0.1s;
    flex-shrink: 0;
}

.country-all-link:hover {
    background: #f5f5f5;
    color: var(--text-dark);
}

.country-all-link.active {
    background: var(--accent-red);
    color: #fff;
}

.country-all-link.active .country-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.country-list {
    overflow-y: auto;
    flex: 1;
}

.country-list::-webkit-scrollbar { width: 4px; }
.country-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* Spor grubu basligi */
.sport-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent-red);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    user-select: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sport-header:hover {
    background: #d44637;
}

.sport-group.open > .sport-header {
    background: #a93226;
}

.sport-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.sport-label {
    flex: 1;
}

.sport-header .country-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.sport-header .country-arrow {
    color: rgba(255,255,255,0.7);
}

.sport-countries {
    /* ülke listesi container */
}

/* Ulke satiri */
.country-name {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dark);
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.1s;
    user-select: none;
}

.country-name:hover {
    background: #f5f5f5;
}

.country-item.open > .country-name {
    background: #eef3f7;
    color: var(--accent-red);
}

.country-flag {
    font-size: 0.85rem;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0,0,0,0.15);
}

.country-arrow {
    font-size: 0.6rem;
    color: #999;
    width: 12px;
    text-align: center;
    flex-shrink: 0;
    transition: color 0.1s;
}

.country-item.open > .country-name .country-arrow {
    color: var(--accent-red);
}

.country-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.country-count {
    background: #ecf0f1;
    color: #777;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Lig listesi */
.country-leagues {
    background: #fafbfc;
    border-bottom: 1px solid #eee;
}

.league-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 12px 6px 30px;
    font-size: 0.78rem;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.1s;
}

.league-link:last-child {
    border-bottom: none;
}

.league-link:hover {
    background: #eef3f7;
    color: var(--text-dark);
}

.league-link.active {
    background: var(--accent-red);
    color: #fff;
}

.league-link.active .league-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.league-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.league-count {
    background: #ecf0f1;
    color: #888;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Mobil */
@media (max-width: 767.98px) {
    .country-sidebar-wrap {
        display: contents;
    }
    .sidebar-results-btn {
        margin: 0 0 8px;
    }
    .country-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
        z-index: 1200;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .country-sidebar.show {
        transform: translateX(0);
    }

    .country-sidebar-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.4);
        z-index: 1199;
    }

    .country-sidebar-overlay.show {
        display: block;
    }
}

/* ============================================
   Dashboard Kartları
   ============================================ */
.card {
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #fff;
}

.card-header {
    border-radius: 4px 4px 0 0 !important;
}

.dash-card-header {
    background: var(--sidebar-heading-bg);
    color: #fff;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 4px 4px 0 0;
}

.dash-card-body {
    padding: 16px;
    background: #fff;
    border-radius: 0 0 4px 4px;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
}

.info-table td {
    padding: 8px 4px;
    font-size: 0.88rem;
    border-bottom: 1px solid #f0f0f0;
}

.info-table tr:last-child td {
    border-bottom: none;
}

.info-table td:first-child {
    color: #888;
    width: 45%;
}

.info-table td:last-child {
    font-weight: 600;
    color: var(--text-dark);
}

/* Rol badge renkleri (dashboard içi) */
.role-badge-sm {
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

.role-badge-sm.admin,
.role-badge-sm.superadmin,
.role-badge-sm.jokeradmin { background: var(--accent-red); }
.role-badge-sm.acenta { background: #2980b9; }
.role-badge-sm.bayi { background: var(--accent-green); }
.role-badge-sm.webuser { background: #7f8c8d; }

/* Durum badge */
.status-active {
    background: var(--accent-green);
    color: #fff;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Hoşgeldin kutusu */
.welcome-box {
    background: var(--navbar-bg);
    color: #fff;
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

.welcome-box h4 {
    margin: 0 0 6px 0;
    font-weight: 600;
}

.welcome-box p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

/* Hiyerarşi */
.hierarchy-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.hierarchy-arrow {
    color: #bbb;
    font-size: 0.75rem;
    padding-left: 16px;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 767.98px) {
    .content-area {
        padding: 12px;
        max-width: 100%;
    }
}

/* ============================================
   Alert
   ============================================ */
.btn-close-sm {
    padding: 0.15rem 0.35rem;
    font-size: 0.7rem;
}

/* ============================================
   Bulten Ust Panel (Spor Sekmeleri & Siralama)
   ============================================ */
.bulletin-top-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a1a2e;
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 12px;
    gap: 8px;
}
.bulletin-sport-tabs {
    display: flex;
    gap: 4px;
}
.bulletin-sport-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #8a8a9a;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.bulletin-sport-tab:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
.bulletin-sport-tab.active {
    color: #fff;
    background: #e74c3c;
}
.bulletin-sport-tab > span:first-child {
    font-size: 1rem;
}
.bulletin-tab-count {
    background: rgba(255,255,255,0.15);
    color: #ccc;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 2px;
}
.bulletin-sport-tab.active .bulletin-tab-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}
.bulletin-sort-btns {
    display: flex;
    gap: 4px;
}
.bulletin-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #8a8a9a;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.bulletin-sort-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
.bulletin-sort-btn.active {
    color: #fff;
    background: rgba(255,255,255,0.15);
}
.bulletin-sort-btn i {
    font-size: 0.85rem;
}

@media (max-width: 576px) {
    .bulletin-top-panel {
        flex-wrap: wrap;
        gap: 6px;
        padding: 6px;
    }
    .bulletin-sport-tabs,
    .bulletin-sort-btns {
        width: 100%;
        justify-content: center;
    }
    .bulletin-sport-tab {
        flex: 1;
        justify-content: center;
        padding: 6px 10px;
        font-size: 0.8rem;
    }
    .bulletin-sort-btn {
        flex: 1;
        justify-content: center;
        padding: 6px 10px;
        font-size: 0.75rem;
    }
}

/* ============================================
   Populer Maclar Bari
   ============================================ */
.popular-matches {
    margin-bottom: 14px;
    padding: 0;
}
.popular-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.popular-track::-webkit-scrollbar {
    display: none;
}

.popular-card {
    flex: 0 0 calc((100% - 30px) / 4);
    min-width: 0;
    scroll-snap-align: start;
    background: #1a1f35;
    border: 1px solid #2a3050;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s;
    position: relative;
}
/* Football card background - futbol topu */
.popular-card-football::before {
    content: '';
    position: absolute;
    right: -15px;
    top: 8px;
    width: 90px;
    height: 90px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.07;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='white' stroke-width='2'/%3E%3Cpath d='M50,2 L62,20 L85,25 L75,48 L85,72 L62,80 L50,98 L38,80 L15,72 L25,48 L15,25 L38,20Z' fill='none' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M50,20 L62,35 L58,52 L42,52 L38,35Z' fill='white' opacity='0.3'/%3E%3Cline x1='50' y1='2' x2='50' y2='20' stroke='white' stroke-width='1'/%3E%3Cline x1='85' y1='25' x2='62' y2='35' stroke='white' stroke-width='1'/%3E%3Cline x1='85' y1='72' x2='58' y2='52' stroke='white' stroke-width='1'/%3E%3Cline x1='15' y1='72' x2='42' y2='52' stroke='white' stroke-width='1'/%3E%3Cline x1='15' y1='25' x2='38' y2='35' stroke='white' stroke-width='1'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}
/* Basketball card background - basketbol topu */
.popular-card-basket::before {
    content: '';
    position: absolute;
    right: -15px;
    top: 8px;
    width: 90px;
    height: 90px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.07;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='white' stroke-width='2'/%3E%3Cline x1='50' y1='2' x2='50' y2='98' stroke='white' stroke-width='1.5'/%3E%3Cline x1='2' y1='50' x2='98' y2='50' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M15,10 Q50,45 15,90' fill='none' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M85,10 Q50,45 85,90' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}
.popular-card > * {
    position: relative;
    z-index: 1;
}
.popular-card:hover {
    border-color: #3a4570;
}

/* Banner */
.popular-card-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    background: #151a2e;
    border-bottom: 1px solid #2a3050;
}
.popular-card-league {
    font-size: 0.7rem;
    color: #8890a8;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}
.popular-card-time {
    font-size: 0.7rem;
    color: #e74c3c;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.popular-card-time i {
    font-size: 0.6rem;
}

/* Card Body - Teams */
.popular-card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 14px 10px;
}
.popular-card-side {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.popular-jersey {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-jersey {
    background: linear-gradient(135deg, #2d5aa0 0%, #1a3d7c 100%);
    box-shadow: 0 3px 12px rgba(45,90,160,0.3);
}
.away-jersey {
    background: linear-gradient(135deg, #c0392b 0%, #962d22 100%);
    box-shadow: 0 3px 12px rgba(192,57,43,0.3);
}
.popular-jersey::after {
    content: '';
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M11 4L5.5 7.5V13l2.5 1v14h16V14l2.5-1V7.5L21 4h-2.5v2.5a2.5 2.5 0 01-5 0V4H11z' fill='rgba(255,255,255,0.85)'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}
.popular-card-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #dde0ea;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}
.popular-card-vs {
    font-size: 0.65rem;
    color: #4a5270;
    font-weight: 700;
    flex-shrink: 0;
}

/* Card Odds */
.popular-card-odds {
    display: flex;
    gap: 6px;
    padding: 0 14px 12px;
}
.pop-odd {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: all 0.15s;
}
.pop-odd:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.15);
    transform: scale(1.05);
}
.pop-odd.selected {
    background: #1a6b3c;
    border-color: #1a6b3c;
    box-shadow: 0 0 10px rgba(26,107,60,0.4);
}
.pop-odd small {
    font-size: 0.58rem;
    font-weight: 500;
    color: rgba(255,255,255,0.35);
    line-height: 1;
    margin-bottom: 2px;
}
.pop-odd strong {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}
.pop-odd-empty {
    cursor: default;
    opacity: 0.4;
}
.pop-odd-empty:hover {
    transform: none;
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.06);
}

@media (max-width: 768px) {
    .popular-track {
        flex-wrap: wrap;
    }
    .popular-card {
        flex: 0 0 calc((100% - 10px) / 2);
    }
    .popular-jersey {
        width: 30px;
        height: 30px;
    }
    .popular-jersey::after {
        width: 15px;
        height: 15px;
    }
    .popular-card-name {
        font-size: 0.72rem;
    }
    .pop-odd strong {
        font-size: 0.72rem;
    }
}

/* ============================================
   Lig Bazli Mac Kartlari
   ============================================ */

/* Bos durum */
.league-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}
.league-empty-state i {
    font-size: 3rem;
    display: block;
    margin-bottom: 12px;
    opacity: 0.4;
}
.league-empty-state p {
    font-size: 0.9rem;
    margin: 0;
}

/* Lig karti */
.league-card {
    background: #fff;
    border-radius: 6px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
    overflow: hidden;
}

/* Lig basligi */
.league-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
    user-select: none;
}

.league-card-info {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.league-card-sport {
    font-size: 1rem;
    flex-shrink: 0;
}

.league-card-flag {
    font-size: 1.1rem;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}

.league-card-country {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
}

.league-card-sep {
    font-size: 0.55rem;
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
}

.league-card-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #f1c40f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.league-card-count {
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.1);
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
    margin-left: 8px;
    white-space: nowrap;
}

/* Mac satiri */
.league-card-body {
    padding: 0;
}

/* Baslik satiri */
.match-row-head {
    background: #f5f6f8;
    border-bottom: 2px solid #e0e0e0;
    padding: 6px 14px;
}

.match-row-head:hover {
    background: #f5f6f8;
}

.match-row-head .match-row-time,
.match-row-head .match-row-teams {
    font-size: 0.7rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.match-col-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #555;
    text-align: center;
}

.match-row {
    display: flex;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid #f0f0f0;
    gap: 12px;
    transition: background 0.1s;
}

.match-row:last-child {
    border-bottom: none;
}

.match-row:hover {
    background: #f8f9fb;
}

/* Tarih / Saat */
.match-row-time {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 44px;
    flex-shrink: 0;
}

.match-row-date {
    font-size: 0.68rem;
    color: #888;
    font-weight: 500;
    line-height: 1.2;
}

.match-row-hour {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--accent-red);
    line-height: 1.2;
}

/* Takimlar */
.match-row-teams {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.team-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 4px;
    flex-shrink: 0;
}
.match-row-home,
.match-row-away {
    display: flex;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* Oranlar */
.match-row-odds {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.match-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: #eee;
    color: #888;
    font-size: 0.7rem;
    text-decoration: none;
    transition: all 0.15s;
    flex-shrink: 0;
}
.match-stat-icon:hover {
    background: #ddd;
    color: #555;
}

.oran-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 5px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.78rem;
    text-align: center;
}

.oran-pick {
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
}

.oran-pick:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 2;
    position: relative;
}

.oran-pick.selected {
    background: #1a6b3c;
    color: #fff;
    outline: none;
    box-shadow: 0 0 8px rgba(26,107,60,0.5);
}

.oran-1,
.oran-0,
.oran-2,
.oran-alt,
.oran-ust {
    background: #576593;
    color: #fff;
}

.oran-empty {
    background: #f0f0f0;
    color: #bbb;
}

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

.au-line {
    font-size: 0.65rem;
    font-weight: 700;
    color: #888;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.au-line-head {
    width: 22px;
}

/* Ekstra oran sayisi */
.match-row-extra {
    width: 36px;
    flex-shrink: 0;
    text-align: center;
}

.oran-count-badge {
    display: inline-block;
    min-width: 28px;
    padding: 3px 6px;
    border-radius: 10px;
    background: rgba(52, 152, 219, 0.12);
    color: #2980b9;
    font-weight: 700;
    font-size: 0.72rem;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

a.oran-count-badge:hover {
    background: #2980b9;
    color: #fff;
    text-decoration: none;
}

/* Favori Yildiz Butonu (Bulten) */
.match-fav-col {
    width: 24px;
    flex-shrink: 0;
}
.match-fav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: #bbb;
    font-size: 0.85rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
}
.match-fav-btn:hover {
    color: #f1c40f;
    transform: scale(1.2);
}
.match-fav-btn.active {
    color: #f1c40f;
}
.match-fav-btn.active i {
    filter: drop-shadow(0 0 2px rgba(241,196,15,0.4));
}

/* Bulten Favori Grubu */
.bulten-fav-group {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(241,196,15,0.3);
    background: #fff;
}
.bulten-fav-header {
    background: linear-gradient(135deg, #f9e547 0%, #f1c40f 100%);
    color: #333;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.bulten-fav-header i {
    color: #b8860b;
    font-size: 0.9rem;
}
.bulten-fav-body .match-row:last-child {
    border-bottom: none;
}

/* Responsive */
@media (max-width: 767.98px) {
    .match-row {
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 6px;
    }
    .match-row-time {
        flex-direction: row;
        width: auto;
        gap: 4px;
    }
    .match-fav-btn {
        width: 20px;
        height: 20px;
        font-size: 0.75rem;
    }
    .match-fav-col {
        width: 20px;
    }
    .match-row-teams {
        width: calc(100% - 26px);
        order: -1;
    }
    .match-row-odds {
        flex: 1;
    }
    .match-row-au {
        flex: 1;
    }
    .match-row-au .au-line {
        width: 18px;
        font-size: 0.6rem;
    }
    .match-row-au .au-line-head {
        width: 18px;
    }
    .oran-badge {
        min-width: 0;
        flex: 1;
        padding: 5px 4px;
        font-size: 0.72rem;
    }
    .match-row-extra {
        width: auto;
    }
    .league-card-country {
        display: none;
    }
    .league-card-sep {
        display: none;
    }
}

/* Sayfalama */
.pagination .page-link {
    color: var(--text-dark);
    border-color: #ddd;
    font-size: 0.82rem;
    min-width: 34px;
    text-align: center;
}

.pagination .page-item.active .page-link {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #fff;
}

.pagination .page-link:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

/* ============================================
   Bahis Sepeti
   ============================================ */
.betslip {
    position: fixed;
    bottom: 0;
    right: 24px;
    width: 340px;
    z-index: 1100;
    font-size: 0.85rem;
    filter: drop-shadow(0 -2px 12px rgba(0,0,0,0.25));
}

@keyframes betslip-bounce {
    0%, 100% { transform: translateY(0); }
    20% { transform: translateY(-8px); }
    35% { transform: translateY(0); }
    55% { transform: translateY(-5px); }
    70% { transform: translateY(0); }
}

.betslip.shake {
    animation: betslip-bounce 0.5s ease-out;
}

.betslip-header {
    background: var(--accent-red);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.betslip-title {
    font-weight: 700;
    font-size: 0.88rem;
    flex: 1;
}

.betslip-count {
    background: #fff;
    color: var(--accent-red);
    font-weight: 800;
    font-size: 0.78rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, color 0.3s;
}

@keyframes count-flash {
    0% { background: #fff; color: var(--accent-red); }
    30% { background: #ffd700; color: #000; }
    100% { background: #fff; color: var(--accent-red); }
}

.betslip-count.flash {
    animation: count-flash 0.6s ease-out;
}

.betslip-arrow {
    font-size: 0.7rem;
    transition: transform 0.25s;
}

.betslip.collapsed .betslip-arrow {
    transform: rotate(180deg);
}

.betslip-body {
    background: #fff;
    max-height: 600px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    display: flex;
    flex-direction: column;
}

.betslip.collapsed .betslip-body {
    max-height: 0;
}

/* Kupon turu butonlari */
.betslip-type {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    background: #f7f7f7;
    flex-shrink: 0;
}

.betslip-type-btn {
    flex: 1;
    padding: 9px 8px;
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 0.8rem;
    color: #999;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.betslip-type-btn:hover {
    color: #555;
}

.betslip-type-btn.active {
    color: var(--accent-red);
    background: #fff;
}

.betslip-type-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-red);
}

.betslip-items {
    overflow-y: auto;
    flex: 1;
    max-height: 400px;
    padding: 0;
}

.betslip-items::-webkit-scrollbar { width: 4px; }
.betslip-items::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

.betslip-empty {
    text-align: center;
    color: #999;
    padding: 28px 16px;
    font-size: 0.82rem;
}

/* Tek bahis satiri */
.betslip-item {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

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

.betslip-item-teams {
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--text-dark);
    padding-right: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.betslip-item-ad {
    font-size: 0.68rem;
    color: #8094a9;
    font-weight: 500;
    margin-top: 2px;
    line-height: 1.2;
}

.betslip-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}

.betslip-item-tip {
    display: inline-block;
    background: var(--navbar-bg);
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 0.72rem;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.betslip-item-oran {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--accent-red);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 8px;
    transition: color 0.3s;
}
.betslip-oran-up {
    animation: betslipOranUp 2s ease;
}
.betslip-oran-down {
    animation: betslipOranDown 2s ease;
}
@keyframes betslipOranUp {
    0% { color: #22c55e; }
    100% { color: var(--accent-red); }
}
@keyframes betslipOranDown {
    0% { color: #ef4444; }
    100% { color: var(--accent-red); }
}

/* Betslip item border flash */
.betslip-item {
    border: 2px solid transparent;
    transition: border-color 0.3s;
}
.betslip-item-flash-up {
    animation: betslipBorderFlashUp 2s ease;
}
.betslip-item-flash-down {
    animation: betslipBorderFlashDown 2s ease;
}
@keyframes betslipBorderFlashUp {
    0%, 20%, 40% { border-color: #22c55e; }
    10%, 30% { border-color: transparent; }
    100% { border-color: transparent; }
}
@keyframes betslipBorderFlashDown {
    0%, 20%, 40% { border-color: #ef4444; }
    10%, 30% { border-color: transparent; }
    100% { border-color: transparent; }
}

/* Betslip kilit (oran bulunamadi) */
.betslip-item-oran .betslip-lock-icon {
    color: #9ca3af;
    font-size: 0.85rem;
}
.betslip-item.betslip-item-locked {
    opacity: 0.55;
    border-color: #d1d5db;
}
.betslip-confirm-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.betslip-confirm-btn.betslip-confirm-locked {
    background: #6b7280;
    border: 2px solid #ef4444;
    animation: confirmLockPulse 2s ease-in-out infinite;
}
@keyframes confirmLockPulse {
    0%, 100% { border-color: #ef4444; }
    50% { border-color: #fbbf24; }
}

/* Betslip oranlar guncellendi uyarisi */
.betslip-odds-updated {
    background: linear-gradient(90deg, #fef3c7, #fde68a);
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
    animation: betslipOddsNotice 2s ease forwards;
}
@keyframes betslipOddsNotice {
    0% { opacity: 0; transform: translateY(-4px); }
    15% { opacity: 1; transform: translateY(0); }
    75% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-4px); }
}

.betslip-item-remove {
    position: absolute;
    top: 8px;
    right: 6px;
    background: none;
    border: none;
    color: #ccc;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.betslip-item-remove:hover {
    color: var(--accent-red);
}

/* Alt ozet */
.betslip-footer {
    border-top: 2px solid var(--accent-red);
    padding: 12px;
    background: #fafafa;
    flex-shrink: 0;
}

.betslip-summary {
    font-size: 0.82rem;
    color: #555;
}

.betslip-payout strong {
    color: var(--accent-green);
    font-size: 1rem;
}

.betslip-stake label {
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 2px;
}

.betslip-stake .form-control {
    font-weight: 700;
    text-align: right;
}

.betslip-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.betslip-clear-btn {
    flex: 1;
    background: var(--navbar-bg);
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    border: none;
}

.betslip-clear-btn:hover {
    background: #2c3e50;
    color: #fff;
}

.betslip-confirm-btn {
    flex: 2;
    background: var(--accent-green);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
}

.betslip-confirm-btn:hover {
    background: #219a52;
    color: #fff;
}

@media (max-width: 575.98px) {
    .betslip {
        right: 0;
        left: 0;
        width: 100%;
        border-radius: 0;
    }
    .betslip-header {
        border-radius: 0;
    }
}

/* -- Sistem Kupon UI -- */
.betslip-system-size {
    display: flex;
    gap: 4px;
    justify-content: center;
    padding: 6px 0 8px;
    flex-wrap: wrap;
}

.betslip-system-btn {
    width: 32px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #e9ecef;
    color: #555;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    line-height: 28px;
    text-align: center;
}

.betslip-system-btn:hover {
    background: #ddd;
    border-color: #aaa;
    color: #333;
}

.betslip-system-btn.active {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #fff;
}

.betslip-total-cost {
    border-top: 1px solid #ddd;
    padding-top: 6px;
    margin-top: 4px;
}

.betslip-total-cost strong {
    color: #c0392b;
}

#betslipSystemInfo strong {
    color: #333;
}

#betslipSystemInfo .betslip-total-cost strong {
    color: #c0392b;
}

/* Tekli kupon - mac basi stake inputu (oran yaninda inline) */
.betslip-item-stake {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 10px;
    margin-right: auto;
}

.betslip-item-stake > span {
    font-size: 0.7rem;
    color: #888;
    font-weight: 600;
}

.betslip-stake-input {
    width: 72px;
    padding: 2px 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: right;
    outline: none;
    background: #f9f9f9;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.betslip-stake-input:focus {
    border-color: var(--accent-red);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.15);
}

#betslipSingleInfo .betslip-total-cost strong {
    color: #c0392b;
}

/* ============================================
   Mac Detay Sayfasi
   ============================================ */
.match-detail-wrapper {
    max-width: 100%;
    margin: 0;
}

/* Geri butonu */
/* Sayfa Basligi */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 14px 20px;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.page-header-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}
.page-header-sub {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
}
.page-header .detail-back-btn {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
}
.page-header .detail-back-btn:hover {
    color: #fff;
}

.detail-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 0;
    margin-bottom: 12px;
    transition: color 0.15s;
}

.detail-back-btn:hover {
    color: var(--accent-red);
    text-decoration: none;
}

/* Mac bilgi karti */
.match-detail-header {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 60%, #16213e 100%);
    border-radius: 8px;
    padding: 20px 24px;
    color: #fff;
    margin-bottom: 0;
}

.detail-header-league {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.detail-header-flag {
    font-size: 1.2rem;
    border-radius: 2px;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}

.detail-header-country {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(255,255,255,0.7);
}

.detail-header-sep {
    font-size: 0.55rem;
    color: rgba(255,255,255,0.35);
}

.detail-header-lig {
    font-size: 0.82rem;
    font-weight: 600;
    color: #f1c40f;
}

.detail-header-match {
    text-align: center;
    margin-bottom: 16px;
}

.detail-header-date {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    display: block;
    margin-bottom: 10px;
}

.detail-header-date i {
    font-size: 0.72rem;
}

.detail-header-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.detail-header-home,
.detail-header-away {
    font-size: 1.25rem;
    font-weight: 700;
}

.detail-header-vs {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
    text-transform: uppercase;
}

.detail-header-odds {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.detail-header-odds .oran-badge {
    min-width: 72px;
    padding: 8px 14px;
    font-size: 0.88rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.detail-header-odds .oran-badge small {
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.7;
}

/* Tab menu */
.detail-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 0 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.detail-tabs::-webkit-scrollbar {
    display: none;
}

.detail-tab {
    flex-shrink: 0;
    padding: 8px 18px;
    border: none;
    border-radius: 20px;
    background: #fff;
    color: var(--text-dark);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid #ddd;
    white-space: nowrap;
}

.detail-tab:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

.detail-tab.active {
    background: var(--accent-red);
    color: #fff;
    border-color: var(--accent-red);
}

/* Tab icerigi */
.detail-tab-content {
    display: none;
    padding-top: 12px;
}

.detail-tab-content.active {
    display: block;
}

/* Kategori alt basligi */
.detail-category {
    background: #fff;
    border-radius: 6px;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    overflow: hidden;
}

.detail-category-title {
    background: #f5f6f8;
    padding: 10px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #e8e8e8;
}

/* Oran grid */
.detail-odds-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 10px;
}
.detail-odds-grid.detail-odds-cols-1 .detail-odds-btn { flex: 0 1 100%; max-width: 100%; }
.detail-odds-grid.detail-odds-cols-2 .detail-odds-btn { flex: 0 1 calc(50% - 5px); max-width: calc(50% - 5px); }
.detail-odds-grid.detail-odds-cols-3 .detail-odds-btn { flex: 0 1 calc(33.333% - 7px); max-width: calc(33.333% - 7px); }
.detail-odds-grid.detail-odds-cols-m .detail-odds-btn { flex: 0 1 calc(50% - 5px); max-width: calc(50% - 5px); }

.detail-odds-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 11px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #f8f9fb;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.detail-odds-btn:hover {
    background: #eef7f1;
    border-color: #1a6b3c;
    transform: none;
    box-shadow: none;
}
.detail-odds-btn.selected {
    background: #1a6b3c;
    border-color: #1a6b3c;
}
.detail-odds-btn.selected .detail-odds-btn-label {
    color: rgba(255,255,255,0.85);
}
.detail-odds-btn.selected .detail-odds-btn-value {
    color: #fff;
}
.detail-odds-btn-label {
    font-size: 0.72rem;
    color: #777;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}
.detail-odds-btn-value {
    font-size: 0.88rem;
    font-weight: 800;
    color: #1a6b3c;
    line-height: 1;
}

/* Eski satir stili (bos birak, geriye uyumluluk) */
.detail-odds-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.1s;
}

.detail-odds-row:last-child {
    border-bottom: none;
}

.detail-odds-row:hover {
    background: #f8f9fb;
}

.detail-odds-name {
    font-size: 0.82rem;
    color: #555;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 12px;
}

.detail-odds-value {
    min-width: 64px;
    padding: 5px 12px;
    background: #1a6b3c;
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    text-align: center;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 767.98px) {
    .match-detail-wrapper {
        margin: 0;
    }

    .match-detail-header {
        border-radius: 0;
        padding: 16px;
    }

    .detail-header-teams {
        flex-direction: column;
        gap: 6px;
    }

    .detail-header-home,
    .detail-header-away {
        font-size: 1rem;
    }

    .detail-tabs {
        padding: 10px 0 0;
    }

    .detail-tab {
        padding: 7px 14px;
        font-size: 0.74rem;
    }

    .detail-odds-row {
        padding: 8px 12px;
    }

    .detail-odds-name {
        font-size: 0.78rem;
    }

    .detail-odds-value {
        min-width: 56px;
        font-size: 0.78rem;
        padding: 5px 8px;
    }

    .detail-odds-grid {
        padding: 8px;
        gap: 6px;
    }
    .detail-odds-btn {
        padding: 6px 4px;
    }
    .detail-odds-btn-label {
        font-size: 0.68rem;
    }
    .detail-odds-btn-value {
        font-size: 0.8rem;
    }
    /* 3+ secenekli gruplarda mobilde 2 sutun */
    .detail-odds-grid.detail-odds-cols-3 .detail-odds-btn {
        flex: 1 1 calc(50% - 2px);
    }
}

/* ============================================
   Kuponlarim Sayfasi
   ============================================ */
.kupon-page-wrapper {
    max-width: 100%;
    margin: 0;
}

/* Ozet kartlari */
.kupon-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.kupon-stat-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.kupon-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.kupon-stat-info {
    display: flex;
    flex-direction: column;
}

.kupon-stat-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.2;
}

.kupon-stat-label {
    font-size: 0.72rem;
    color: #888;
    font-weight: 600;
}

/* Filtre Paneli */
.kupon-filter-panel {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 14px;
    position: relative;
}

.kupon-filter-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-dark);
    cursor: pointer;
    user-select: none;
    transition: background 0.1s;
}

.kupon-filter-panel-header:hover {
    background: #f8f9fb;
}

.kupon-filter-panel-header i:first-child {
    color: var(--accent-red);
}

.kupon-filter-arrow {
    margin-left: auto;
    font-size: 0.7rem;
    color: #999;
    transition: transform 0.25s;
}

.kupon-filter-panel-body.open + .kupon-filter-panel-header .kupon-filter-arrow,
.kupon-filter-panel-body.open ~ .kupon-filter-arrow {
    transform: rotate(180deg);
}

.kupon-filter-active-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-red);
    flex-shrink: 0;
}

.kupon-filter-panel-body {
    display: none;
    padding: 0 14px 14px;
    border-top: 1px solid #eee;
}

.kupon-filter-panel-body.open {
    display: block;
}

.kupon-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 14px;
}

.kupon-filter-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.kupon-filter-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-dark);
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.kupon-filter-input:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.1);
}

.kupon-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
    margin-top: 14px;
}

.kupon-filter-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--accent-red);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.kupon-filter-submit:hover {
    background: #a93226;
}

.kupon-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    color: #888;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    transition: all 0.15s;
}

.kupon-filter-clear:hover {
    color: var(--accent-red);
    border-color: var(--accent-red);
    text-decoration: none;
}

/* ---- Searchable Select ---- */
.searchable-select {
    position: relative;
}

.searchable-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-dark);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s;
    user-select: none;
}

.searchable-select-trigger i {
    font-size: 0.65rem;
    color: #999;
    transition: transform 0.2s;
}

.searchable-select.open .searchable-select-trigger {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.1);
}

.searchable-select.open .searchable-select-trigger i {
    transform: rotate(180deg);
}

.searchable-select-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    z-index: 1100;
    overflow: hidden;
}

.searchable-select.open .searchable-select-dropdown {
    display: block;
}

.searchable-select-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
}

.searchable-select-search i {
    color: #aaa;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.searchable-select-search input {
    border: none;
    outline: none;
    font-size: 0.78rem;
    color: var(--text-dark);
    width: 100%;
    background: transparent;
}

.searchable-select-search input::placeholder {
    color: #bbb;
}

.searchable-select-options {
    max-height: 220px;
    overflow-y: auto;
}

.searchable-select-options::-webkit-scrollbar { width: 4px; }
.searchable-select-options::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

.searchable-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 0.78rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: background 0.1s;
}

.searchable-select-option:hover {
    background: #f5f6f8;
}

.searchable-select-option.selected {
    background: rgba(192, 57, 43, 0.08);
    color: var(--accent-red);
    font-weight: 700;
}

.searchable-select-option.hidden {
    display: none;
}

.searchable-select-option small {
    color: #aaa;
    font-size: 0.7rem;
    font-weight: 400;
}

.searchable-select-group {
    padding: 6px 12px 4px;
    font-size: 0.68rem;
    font-weight: 800;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #f8f9fb;
    border-top: 1px solid #eee;
}

.searchable-select-group.hidden {
    display: none;
}

/* Uye sutunu */
.kupon-td-uye {
    white-space: nowrap;
}

.kupon-uye-name {
    display: block;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-dark);
}

.kupon-uye-type {
    display: block;
    font-size: 0.68rem;
    color: #999;
    text-transform: capitalize;
}

/* Tablo */
.kupon-table-wrapper {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow-x: auto;
}

.kupon-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.kupon-table thead th {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
    padding: 10px 14px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border: none;
}

.kupon-table thead th:first-child {
    border-radius: 6px 0 0 0;
}

.kupon-table thead th:last-child {
    border-radius: 0 6px 0 0;
}

.kupon-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    color: var(--text-dark);
}

.kupon-table tbody tr:last-child td {
    border-bottom: none;
}

.kupon-table tbody tr:hover {
    background: #f8f9fb;
}

.kupon-td-id {
    font-weight: 700;
    color: #888;
    font-size: 0.78rem;
}

.kupon-td-tarih {
    white-space: nowrap;
}

.kupon-date {
    display: block;
    font-weight: 600;
    font-size: 0.78rem;
}

.kupon-time {
    display: block;
    font-size: 0.7rem;
    color: #999;
}

.kupon-td-miktar {
    font-weight: 700;
    white-space: nowrap;
}

.kupon-td-kazanc {
    font-weight: 800;
    color: var(--accent-green);
    white-space: nowrap;
}

/* Durum badge */
.kupon-durum-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.kupon-durum-badge i {
    font-size: 0.75rem;
}

.badge-warning {
    background: rgba(243, 156, 18, 0.12);
    color: #d68910;
}

.badge-success {
    background: rgba(39, 174, 96, 0.12);
    color: #1e8449;
}

.badge-danger {
    background: rgba(231, 76, 60, 0.12);
    color: #c0392b;
}

.badge-secondary {
    background: rgba(127, 140, 141, 0.12);
    color: #7f8c8d;
}

/* Kupon satir tiklama */
.kupon-row {
    cursor: pointer;
    transition: background 0.15s;
}

.kupon-row:hover {
    background: #f0f4ff !important;
}

.kupon-row.expanded {
    background: #e8eef8 !important;
}

.kupon-row-arrow {
    font-size: 0.65rem;
    color: #888;
    margin-right: 4px;
    transition: transform 0.2s;
}

.kupon-row.expanded .kupon-row-arrow {
    color: #3498db;
}

/* Kupon detay satiri */
.kupon-detail-row > td {
    padding: 0 !important;
    background: #f7f9fc;
    border-left: 3px solid #3498db;
}

.kupon-detail-inner {
    padding: 10px 14px;
}

.kupon-detail-loading {
    padding: 16px;
    text-align: center;
    color: #888;
    font-size: 0.82rem;
}

.kupon-detail-loading .spin {
    display: inline-block;
    animation: spinAnim 1s linear infinite;
}

@keyframes spinAnim {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.kupon-detail-empty {
    padding: 16px;
    text-align: center;
    color: #999;
    font-size: 0.82rem;
}

/* Detay ic tablo */
.kupon-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.kupon-detail-table thead th {
    background: #e2e8f0;
    color: #555;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 6px 10px;
    border-bottom: 1px solid #ccd5e0;
}

.kupon-detail-table tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid #e8ecf0;
    color: #333;
    vertical-align: middle;
}

.kupon-detail-table tbody tr:last-child td {
    border-bottom: none;
}

.kupon-detail-tarih {
    white-space: nowrap;
    color: #777;
    font-size: 0.75rem;
}

.kupon-detail-mac strong {
    font-weight: 600;
}

.kupon-detail-lig {
    color: #888;
    font-size: 0.75rem;
}

.kupon-detail-tahmin {
    color: #2c3e50;
}

.kupon-tahmin-cat {
    font-size: 0.68rem;
    color: #8094a9;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 1px;
}

.kupon-tahmin-ad {
    font-weight: 700;
    font-size: 0.8rem;
    color: #1a5276;
    line-height: 1.3;
}

.kupon-detail-oran {
    font-weight: 800;
    color: #2980b9;
}

.kupon-mac-sonuc {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
}

.kupon-mac-win {
    background: rgba(39, 174, 96, 0.12);
    color: #1e8449;
}

.kupon-mac-lose {
    background: rgba(231, 76, 60, 0.12);
    color: #c0392b;
}

.kupon-mac-wait {
    background: rgba(243, 156, 18, 0.12);
    color: #d68910;
}

/* Sistem kupon alt bilgi bari */
.kupon-system-bar {
    margin-top: 10px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 10px 12px;
}

.kupon-system-bar-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: #dee2e6;
    border-radius: 4px;
    overflow: hidden;
}

.kupon-system-bar-item {
    text-align: center;
    background: #f0f1f3;
    padding: 8px 4px;
}

.kupon-system-bar-value {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.2;
    color: #2c3e50;
}

.kupon-system-bar-label {
    display: block;
    font-size: 0.64rem;
    color: #888;
    font-weight: 500;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.kupon-system-bar-item.bar-pending .kupon-system-bar-value { color: #e67e22; }
.kupon-system-bar-item.bar-won .kupon-system-bar-value { color: #27ae60; }
.kupon-system-bar-item.bar-lost .kupon-system-bar-value { color: #c0392b; }
.kupon-system-bar-item.bar-cost .kupon-system-bar-value { color: #2c3e50; }
.kupon-system-bar-item.bar-won-total .kupon-system-bar-value { color: #27ae60; }

@media (max-width: 575.98px) {
    .kupon-system-bar-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Alt ozet */
.kupon-bottom-summary {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    padding: 12px 14px;
    font-size: 0.82rem;
    color: #555;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 6px 6px;
}

.kupon-bottom-summary strong {
    font-weight: 800;
}

/* Responsive */
@media (max-width: 767.98px) {
    .kupon-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .kupon-stat-card {
        padding: 10px 12px;
    }

    .kupon-stat-icon {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }

    .kupon-stat-value {
        font-size: 1rem;
    }

    .kupon-filter-grid {
        grid-template-columns: 1fr 1fr;
    }

    .kupon-table {
        font-size: 0.78rem;
    }

    .kupon-table thead th,
    .kupon-table tbody td {
        padding: 8px 10px;
    }

    .kupon-bottom-summary {
        flex-direction: column;
        gap: 6px;
        text-align: right;
    }

    .kupon-detail-inner {
        padding: 6px 8px;
        overflow-x: auto;
    }

    .kupon-detail-table {
        font-size: 0.72rem;
        min-width: 500px;
    }
}

@media (max-width: 480px) {
    .kupon-filter-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Hesabim Sayfasi
   ============================================ */

.hesabim-wrapper {
    max-width: 100%;
    margin: 0 auto;
    padding: 16px;
}

/* Profil Karti */
.hesabim-profile-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
    padding: 20px 24px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.hesabim-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.hesabim-profile-info {
    flex: 1;
    min-width: 0;
}

.hesabim-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hesabim-balances {
    display: flex;
    gap: 20px;
    flex-shrink: 0;
}

.hesabim-balance {
    text-align: right;
}

.hesabim-balance-label {
    display: block;
    font-size: 0.7rem;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hesabim-balance-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: #2ecc71;
}

.hesabim-balance-value.casino {
    color: #f1c40f;
}

/* Grid */
.hesabim-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Seksiyonlar */
.hesabim-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.hesabim-section-header {
    background: #f5f6f8;
    padding: 10px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #444;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hesabim-section-header i {
    font-size: 0.9rem;
    color: #888;
}

.hesabim-section-body {
    padding: 12px 16px;
}

/* Bilgi satirlari */
.hesabim-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.82rem;
}

.hesabim-info-row:last-child {
    border-bottom: none;
}

.hesabim-info-label {
    color: #888;
    font-size: 0.78rem;
}

.hesabim-info-value {
    color: var(--text-dark);
    font-weight: 600;
    text-align: right;
}

/* Sifre formu */
.hesabim-pass-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

/* Istatistik alt baslik */
.hesabim-stats-subtitle {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
    padding: 6px 0 4px;
    margin-bottom: 2px;
    border-top: 1px solid #eee;
}

.hesabim-stats-subtitle:first-child {
    border-top: none;
    padding-top: 0;
}

.hesabim-pass-field label {
    display: block;
    font-size: 0.75rem;
    color: #777;
    margin-bottom: 4px;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 767.98px) {
    .hesabim-profile-card {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px;
    }

    .hesabim-balances {
        width: 100%;
        gap: 12px;
        padding-top: 8px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .hesabim-balance {
        text-align: left;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .hesabim-balance-label {
        display: inline;
    }

    .hesabim-balance-value {
        display: inline;
        font-size: 1rem;
    }

    .hesabim-grid {
        grid-template-columns: 1fr;
    }

    .hesabim-pass-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Rapor Sayfasi
   ============================================ */

.rapor-wrapper {
    max-width: 100%;
    margin: 0 auto;
}

/* Header */
.rapor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 60%, #16213e 100%);
    color: #fff;
    padding: 18px 24px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.rapor-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rapor-header-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.rapor-header-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.rapor-header-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #f1c40f;
}

.rapor-header-date i {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

.rapor-header-date-sep {
    color: rgba(255, 255, 255, 0.3);
}

.rapor-header .detail-back-btn {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
}

.rapor-header .detail-back-btn:hover {
    color: #fff;
}

.rapor-summary-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Grafik karti */
.rapor-chart-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.rapor-chart-header {
    background: #f5f6f8;
    padding: 10px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #444;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rapor-chart-header i {
    font-size: 0.9rem;
    color: #888;
}

.rapor-chart-body {
    padding: 16px;
    height: 320px;
}

/* Kar/Zarar renkleri */
.rapor-kar {
    color: #1e8449;
}

.rapor-zarar {
    color: #c0392b;
}

@media (max-width: 767.98px) {
    .rapor-header {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px 16px;
    }

    .rapor-header-icon {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }

    .rapor-header-title {
        font-size: 1rem;
    }

    .rapor-header-date {
        font-size: 0.75rem;
        padding: 3px 10px;
    }

    .rapor-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Kupon Onay Modal
   ============================================ */
.coupon-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: couponModalOverlayIn 0.2s ease;
}

@keyframes couponModalOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.coupon-modal-overlay.closing {
    animation: couponModalOverlayOut 0.2s ease forwards;
}

@keyframes couponModalOverlayOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.coupon-modal {
    background: #fff;
    border-radius: 14px;
    width: 380px;
    max-width: 92vw;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
    animation: couponModalIn 0.25s ease;
    overflow: hidden;
}

@keyframes couponModalIn {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.coupon-modal-overlay.closing .coupon-modal {
    animation: couponModalOut 0.2s ease forwards;
}

@keyframes couponModalOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.9) translateY(10px); }
}

.coupon-modal-header {
    text-align: center;
    padding: 24px 24px 0;
}

.coupon-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(39, 174, 96, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.5rem;
    color: var(--accent-green);
}

.coupon-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 4px;
}

.coupon-modal-message {
    font-size: 0.82rem;
    color: #888;
    margin: 0;
}

.coupon-modal-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 16px 24px;
    margin: 16px 24px 0;
    background: #f7f8fa;
    border-radius: 10px;
}

.coupon-modal-info-item {
    display: flex;
    flex-direction: column;
}

.coupon-modal-info-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.coupon-modal-info-value {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.3;
}

.coupon-modal-info-value.highlight {
    color: var(--accent-green);
}

.coupon-modal-actions {
    display: flex;
    gap: 10px;
    padding: 20px 24px 24px;
}

.coupon-modal-btn {
    flex: 1;
    padding: 11px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.coupon-modal-btn-cancel {
    background: #f0f0f0;
    color: #666;
}

.coupon-modal-btn-cancel:hover {
    background: #e4e4e4;
    color: #444;
}

.coupon-modal-btn-confirm {
    background: var(--accent-green);
    color: #fff;
}

.coupon-modal-btn-confirm:hover {
    background: #219a52;
}

/* Canlı kupon geri sayım */
.coupon-modal-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 0 10px;
    gap: 8px;
}
.coupon-countdown-icon {
    font-size: 2.2rem;
    color: var(--accent-red);
    animation: countdownPulse 1s ease-in-out infinite;
}
.coupon-countdown-text {
    font-size: 0.85rem;
    color: #555;
    font-weight: 600;
}
.coupon-countdown-num {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent-red);
    min-width: 28px;
    text-align: center;
}
@keyframes countdownPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.7; }
}

/* ============================================
   Toast Bildirimi
   ============================================ */
.coupon-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2100;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    max-width: 360px;
    animation: toastSlideIn 0.35s ease;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

.coupon-toast.closing {
    animation: toastSlideOut 0.3s ease forwards;
}

@keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
}

.coupon-toast.success {
    background: linear-gradient(135deg, #27ae60, #1e8449);
}

.coupon-toast.error {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.coupon-toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.coupon-toast-message {
    flex: 1;
    line-height: 1.3;
}

.coupon-toast-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 2px;
    flex-shrink: 0;
    transition: color 0.15s;
}

.coupon-toast-close:hover {
    color: #fff;
}

@media (max-width: 575.98px) {
    .coupon-toast {
        left: 12px;
        right: 12px;
        max-width: none;
        top: 12px;
    }

    .coupon-modal {
        width: auto;
        margin: 0 12px;
    }
}

/* ============================================
   Canlı Maçlar
   ============================================ */

/* Sayfa wrapper */
.canli-page-wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 8px;
}

/* Üst bilgi çubuğu */
.canli-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.canli-top-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.canli-top-bar-count {
    font-size: 0.85rem;
    color: #666;
}

/* Canlı badge (büyük) */
.canli-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #c0392b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Canlı badge (küçük - maç satırı içi) */
.canli-badge-sm {
    display: inline-flex;
    align-items: center;
}

/* Pulsing dot */
.canli-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #c0392b;
    border-radius: 50%;
    animation: canliPulse 1.5s ease-in-out infinite;
}

@keyframes canliPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Dakika gösterimi */
.canli-minute {
    font-size: 0.8rem;
    font-weight: 700;
    color: #c0392b;
}

/* Skor kutusu */
.canli-score {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(192, 57, 43, 0.1);
    color: #c0392b;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 4px;
    min-width: 42px;
    text-align: center;
    transition: background 0.3s, transform 0.3s;
}

/* Gol flash animasyonu */
.canli-score.flash-goal,
.cdh-score.flash-goal {
    animation: goalFlash 1s ease-out;
}

@keyframes goalFlash {
    0% { background: #c0392b; color: #fff; transform: scale(1.15); }
    50% { background: #e74c3c; color: #fff; transform: scale(1.05); }
    100% { background: rgba(192, 57, 43, 0.1); color: #c0392b; transform: scale(1); }
}

/* Oran değişim flash */
.detail-odds-btn.canli-oran-up {
    border-color: #27ae60;
}
.detail-odds-btn.canli-oran-down {
    border-color: #c0392b;
}
.detail-odds-btn .oran-arrow {
    font-size: 0.7rem;
    font-weight: 700;
    margin-right: 2px;
    display: inline-block;
}
.detail-odds-btn .oran-arrow-up {
    color: #27ae60;
}
.detail-odds-btn .oran-arrow-down {
    color: #c0392b;
}

/* Sidebar / diger oran-pick'ler icin eski flash */
.canli-oran-up:not(.detail-odds-btn) {
    animation: oranFlashUp 0.8s ease-out;
}
.canli-oran-down:not(.detail-odds-btn) {
    animation: oranFlashDown 0.8s ease-out;
}
@keyframes oranFlashUp {
    0% { background: rgba(39, 174, 96, 0.3); }
    100% { background: transparent; }
}
@keyframes oranFlashDown {
    0% { background: rgba(192, 57, 43, 0.3); }
    100% { background: transparent; }
}

/* Kilitli oran */
.oran-locked {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
    position: relative;
}

.oran-locked .bi-lock-fill {
    font-size: 0.65rem;
    margin-right: 2px;
}

/* Maç satırı canlı bilgi sütunu */
.canli-match-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Canlı maç satırı hover */
.canli-match-row {
    transition: background 0.2s;
}

.canli-match-row:hover {
    background: rgba(192, 57, 43, 0.03);
}

/* ---- Canlı Detay Sayfası ---- */
/* Sportradar LMT Widget */
.canli-detail-header {
    display: flex;
    align-items: stretch;
    gap: 12px;
    border-left: none;
    padding: 0;
    background: transparent;
}
.canli-header-left {
    flex: 1;
    min-width: 0;
    background: var(--navbar-bg);
    border-radius: 8px;
    padding: 14px 18px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Lig bilgisi */
.cdh-league {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255,255,255,0.08);
    padding: 6px 12px;
    border-radius: 6px;
}
.cdh-league .fi {
    font-size: 1rem;
}
.cdh-league .bi {
    font-size: 0.55rem;
    opacity: 0.5;
}

/* Maç alanı: Ev | Skor | Dep */
.cdh-match {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* Takım blokları */
.cdh-team {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.cdh-team-home {
    justify-content: flex-end;
    text-align: right;
}
.cdh-team-away {
    justify-content: flex-start;
    text-align: left;
}
.cdh-team-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
}
.cdh-team-name {
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Orta: skor + dakika + durum */
.cdh-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    min-width: 70px;
}
.cdh-live-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #c0392b;
    display: flex;
    align-items: center;
    gap: 4px;
}
.cdh-score {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #fff;
}
.cdh-minute {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: #c0392b;
    padding: 2px 10px;
    border-radius: 10px;
}
.cdh-status {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
}
.canli-lmt-wrapper {
    flex-shrink: 0;
    width: 380px;
    height: 280px;
    border-radius: 6px;
    overflow: hidden;
    background: #1a1a2e;
}
.canli-lmt-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* SR İstatistik Tablosu */
.cdh-stats-table {
    margin-top: 12px;
}
.cdh-stats-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
}
.cdh-stats-table thead th {
    color: rgba(255,255,255,0.5);
    font-weight: 600;
    text-align: center;
    padding: 3px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cdh-stats-table thead th:first-child {
    text-align: left;
}
.cdh-stats-table tbody td {
    color: rgba(255,255,255,0.85);
    padding: 3px 6px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cdh-stats-table tbody td:first-child {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}


@media (max-width: 767.98px) {
    .canli-detail-header {
        flex-direction: column;
    }
    .canli-lmt-wrapper {
        width: 100%;
        max-width: 420px;
        height: 240px;
        margin-left: auto;
    }
    .canli-header-left {
        padding: 10px 12px;
    }
    .cdh-league {
        font-size: 0.68rem;
        margin-bottom: 10px;
    }
    .cdh-match {
        gap: 10px;
    }
    .cdh-team-logo {
        width: 28px;
        height: 28px;
    }
    .cdh-team-name {
        font-size: 0.82rem;
    }
    .cdh-score {
        font-size: 1.2rem;
    }
    .cdh-center {
        min-width: 56px;
    }
}

/* ---- Canli Layout (Sidebar + Detay) ---- */
.canli-layout {
    display: flex;
    gap: 0;
    min-height: calc(100vh - 40px);
}

.canli-detail-panel {
    flex: 1;
    min-width: 0;
    padding: 0 12px;
}

/* Canli Sidebar */
.canli-sidebar {
    width: 280px;
    min-width: 280px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 12px;
    align-self: flex-start;
    position: sticky;
    top: calc(var(--navbar-height) + 12px);
    max-height: calc(100vh - var(--navbar-height) - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.canli-sidebar-header {
    background: var(--navbar-bg);
    color: #fff;
    padding: 10px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.canli-sidebar-header .canli-badge {
    color: #fff;
}

.canli-sidebar-header .canli-dot {
    background: #ff4444;
}

.canli-sidebar-count {
    font-size: 0.72rem;
    font-weight: 400;
    opacity: 0.8;
    margin-left: auto;
}

.canli-sidebar-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
}

/* Sport type tabs */
.canli-sport-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    background: var(--navbar-bg);
    margin-bottom: 6px;
    border-radius: 0 0 6px 6px;
}

.canli-sport-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    color: #8a8a9a;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.canli-sport-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.canli-sport-tab:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

.canli-sport-tab.active {
    color: #fff;
    background: var(--accent-red);
}

.canli-sport-tab .tab-count {
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255,255,255,0.15);
    color: #ccc;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.canli-sport-tab.active .tab-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

@media (max-width: 576px) {
    .canli-sport-tabs {
        padding: 6px 8px;
    }
    .canli-sport-tab {
        flex: 1;
        justify-content: center;
        padding: 7px 10px;
        font-size: 0.8rem;
    }
}

/* ---- Canli View Toggle (Liste / Tekli) ---- */
.canli-sport-tabs-connected {
    margin-bottom: 0;
    border-radius: 0;
}

.canli-view-toggle {
    display: flex;
    gap: 4px;
    padding: 6px 12px 8px 12px;
    background: var(--navbar-bg);
    margin-bottom: 8px;
    border-radius: 0 0 6px 6px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.canli-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 600;
    color: #8a8a9a;
    cursor: pointer;
    transition: all 0.2s;
}

.canli-view-btn:hover {
    color: #ccc;
}

.canli-view-btn.active {
    color: #fff;
    background: var(--accent-red);
}

.canli-view-btn i {
    font-size: 0.75rem;
}

.canli-view-spacer {
    flex: 1;
}

.canli-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 600;
    color: #8a8a9a;
    cursor: pointer;
    transition: all 0.2s;
}

.canli-sort-btn:hover {
    color: #ccc;
}

.canli-sort-btn.active {
    color: #fff;
    background: rgba(255,255,255,0.12);
}

.canli-sort-btn i {
    font-size: 0.75rem;
}

/* ---- Canli List View ---- */
.canli-list-view {
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

.canli-list-head {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: var(--navbar-bg);
    border-bottom: 2px solid #e0e0e0;
    font-size: 0.74rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    gap: 8px;
}

.canli-list-league-head {
    padding: 8px 14px;
    background: #f0f1f4;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #e8e8e8;
    font-size: 0.76rem;
    font-weight: 700;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.canli-list-league-head:hover {
    background: #e6e8ec;
}

.canli-list-league-head .fi {
    font-size: 0.95rem;
}

.clv-league-count {
    margin-left: auto;
    background: rgba(0,0,0,0.1);
    color: #666;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.clv-league-arrow {
    font-size: 0.65rem;
    color: #999;
    margin-left: 4px;
    transition: transform 0.2s;
}

.canli-list-league-body {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.canli-list-league-body.collapsed {
    display: none;
}

.canli-list-row {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    font-size: 0.85rem;
    transition: background 0.15s;
    gap: 8px;
    cursor: default;
}

.canli-list-row:last-child {
    border-bottom: none;
}

.canli-list-row:hover {
    background: #f5f7fa;
}

/* Columns */
.clv-minute {
    width: 64px;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #c0392b;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.clv-minute .canli-dot {
    width: 6px;
    height: 6px;
}

.clv-status {
    font-size: 0.62rem;
    font-weight: 600;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.1;
}

.clv-fav {
    width: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0.7rem;
    color: #ccc;
    cursor: pointer;
    transition: color 0.15s;
}

.clv-fav:hover {
    color: #f1c40f;
}

.clv-fav.active {
    color: #f1c40f;
}

.clv-fav-head {
    background: #fff8e1 !important;
    color: #b8860b !important;
    border-bottom-color: #f0e0a0 !important;
}

.clv-fav-head i {
    color: #f1c40f;
}

.clv-stats {
    width: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: #2980b9;
    cursor: pointer;
}

.clv-stats:empty {
    cursor: default;
}

.clv-stats:not(:empty):hover {
    color: #1a5276;
}

.clv-teams {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.82rem;
    color: #222;
    font-weight: 600;
}

.clv-home,
.clv-away {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clv-logo {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
    display: inline-block;
}

.clv-score {
    width: 46px;
    flex-shrink: 0;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #c0392b;
    background: rgba(192, 57, 43, 0.08);
    margin-right: 10px;
    border-radius: 4px;
    padding: 4px 6px;
}

.clv-score.flash-goal {
    animation: goalFlash 1s ease-out;
}

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

.clv-line {
    font-size: 0.72rem;
    font-weight: 700;
    color: #555;
    background: #e8eaee;
    border-radius: 3px;
    padding: 3px 0;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.clv-odd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    padding: 6px 0;
    flex-shrink: 0;
    border: 1px solid #dce0e5;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #2c3e50;
    background: #f8f9fb;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.clv-odd.clv-head-label {
    background: transparent;
    border-color: transparent;
    color: rgba(255,255,255,0.7);
    cursor: default;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.clv-odd.clv-head-label:hover {
    background: transparent;
    border-color: transparent;
    color: rgba(255,255,255,0.7);
}

.canli-list-head .clv-line {
    background: transparent;
    color: transparent;
}

.canli-list-head .clv-minute,
.canli-list-head .clv-teams,
.canli-list-head .clv-score {
    color: rgba(255,255,255,0.7);
    font-weight: 700;
    background: transparent;
}

.clv-odd:hover {
    background: rgba(192, 57, 43, 0.08);
    border-color: #c0392b;
    color: #c0392b;
}

.clv-odd.selected {
    background: #1a6b3c;
    color: #fff;
    border-color: #1a6b3c;
    outline: none;
    box-shadow: none;
    position: relative;
    z-index: 2;
}

.clv-odd.oran-pick:hover {
    transform: none;
    box-shadow: 0 0 0 2px #1a6b3c, 0 0 12px rgba(26,107,60,0.3);
}

.clv-odd.locked {
    opacity: 0.35;
    pointer-events: none;
    font-size: 0.78rem;
    color: #aaa;
    background: #f5f5f5;
}

.clv-odd .oran-arrow {
    font-size: 0.65rem;
    font-weight: 700;
    margin-right: 2px;
}

.clv-odd .oran-arrow-up { color: #27ae60; }
.clv-odd .oran-arrow-down { color: #c0392b; }

.clv-odd.canli-oran-up {
    border-color: #27ae60;
}
.clv-odd.canli-oran-down {
    border-color: #c0392b;
}

.clv-plus {
    width: 36px;
    flex-shrink: 0;
    text-align: center;
}

.clv-plus button {
    background: #f0f1f4;
    border: 1px solid #d0d3d9;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.15s;
    line-height: 1.2;
}

.clv-plus button:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #fff;
}

/* Canli list empty */
.canli-list-empty {
    padding: 40px 20px;
    text-align: center;
    color: #999;
    font-size: 0.85rem;
}

.canli-list-empty i {
    display: block;
    font-size: 2rem;
    margin-bottom: 8px;
    opacity: 0.4;
}

/* ---- Canli List Responsive ---- */
@media (max-width: 767.98px) {
    .canli-list-head {
        font-size: 0.66rem;
        padding: 8px 8px;
        gap: 6px;
    }

    .canli-list-league-head {
        padding: 6px 8px;
        font-size: 0.72rem;
    }

    .canli-list-row {
        padding: 8px 8px;
        font-size: 0.8rem;
        gap: 6px;
    }

    .clv-minute {
        width: 38px;
        font-size: 0.72rem;
    }

    .clv-teams {
        font-size: 0.78rem;
    }

    .clv-score {
        width: 44px;
        font-size: 0.8rem;
    }

    .clv-odd {
        min-width: 40px;
        padding: 4px 5px;
        font-size: 0.75rem;
    }

    .clv-line {
        font-size: 0.65rem;
        min-width: 22px;
    }

    /* Mobilde S.Gol / HC kolonunu gizle */
    .clv-hide-mobile {
        display: none;
    }
}

@media (max-width: 576px) {
    .canli-view-toggle {
        padding: 0 8px 6px 8px;
    }

    .canli-view-btn {
        flex: 1;
        justify-content: center;
        padding: 5px 8px;
        font-size: 0.75rem;
    }
}

.canli-sidebar-search {
    padding: 8px 10px;
    border-bottom: 1px solid #e8e8e8;
    flex-shrink: 0;
}

.canli-sidebar-search input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.8rem;
    outline: none;
    transition: border-color 0.15s;
}

.canli-sidebar-search input:focus {
    border-color: #aaa;
}

.canli-sidebar-list {
    overflow-y: auto;
    flex: 1;
}

.canli-sidebar-list::-webkit-scrollbar {
    width: 4px;
}

.canli-sidebar-list::-webkit-scrollbar-track {
    background: transparent;
}

.canli-sidebar-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.canli-sidebar-group-head {
    padding: 7px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #666;
    background: #f5f6f8;
    border-bottom: 1px solid #e8e8e8;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 4px;
}

.canli-sidebar-group-head .fi {
    font-size: 0.85rem;
}

.canli-sidebar-match {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.15s;
}

.canli-sidebar-match:last-child {
    border-bottom: none;
}

.canli-sidebar-match:hover {
    background: #f8f9fb;
}

.canli-sidebar-match.active {
    background: rgba(192, 57, 43, 0.06);
    border-left: 3px solid #c0392b;
    padding-left: 7px;
}

.csm-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.csm-minute {
    font-size: 0.68rem;
    font-weight: 700;
    color: #c0392b;
    display: flex;
    align-items: center;
    gap: 4px;
}

.csm-minute .canli-dot {
    width: 5px;
    height: 5px;
}
.csm-status {
    font-weight: 400;
    color: #888;
    font-size: 0.62rem;
}

.csm-teams {
    font-size: 0.78rem;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csm-score {
    font-size: 0.82rem;
    font-weight: 700;
    color: #c0392b;
    background: rgba(192, 57, 43, 0.08);
    padding: 2px 8px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-left: 8px;
    min-width: 36px;
    text-align: center;
    transition: background 0.3s, transform 0.3s;
}

.csm-score.flash-goal {
    animation: goalFlash 1s ease-out;
}

/* Canli Sidebar Favori */
.csm-fav {
    background: none;
    border: none;
    padding: 0 4px 0 0;
    cursor: pointer;
    color: #ccc;
    font-size: 0.8rem;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
}
.csm-fav:hover {
    color: #f59e0b;
    transform: scale(1.2);
}
.csm-fav.active {
    color: #f59e0b;
}

.canli-sidebar-fav-group {
    border-bottom: 2px solid #f59e0b;
    margin-bottom: 2px;
}
.canli-sidebar-fav-head {
    background: linear-gradient(90deg, #fffbeb, #fef3c7);
    color: #92400e;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.canli-sidebar-fav-head i {
    color: #f59e0b;
    font-size: 0.7rem;
}

/* Canli Sidebar Bos Durum */
.canli-sidebar-empty {
    padding: 24px 16px;
    text-align: center;
    color: #999;
    font-size: 0.82rem;
}

.canli-sidebar-empty i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 6px;
    opacity: 0.5;
}

/* Mobil toggle butonu */
.canli-mobile-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    width: 100%;
}

.canli-mobile-toggle .canli-dot {
    width: 6px;
    height: 6px;
}

/* Canli Sidebar Overlay (mobil) */
.canli-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1199;
}

.canli-sidebar-overlay.show {
    display: block;
}

/* Detay panel bos durum */
/* Canli bos sayfa (hic mac yok) */
.canli-empty-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    min-height: 40vh;
}

.canli-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: #999;
}

.canli-detail-empty i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.4;
}

.canli-detail-empty p {
    font-size: 0.9rem;
    margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
    .canli-page-wrapper {
        padding: 0 4px;
    }

    .canli-top-bar {
        padding: 8px 10px;
    }

    .canli-match-row .match-row-extra {
        display: none;
    }

    .canli-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
        z-index: 1200;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .canli-sidebar.show {
        transform: translateX(0);
    }

    .canli-detail-panel {
        padding: 0 4px;
    }

    .canli-mobile-toggle {
        display: flex;
    }
}

/* ==================== Sonuclar (Results) Page ==================== */
.sonuc-wrapper {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 8px;
}

/* Page Header */
.sonuc-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 10px;
    margin-bottom: 12px;
}
.sonuc-page-header h1 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sonuc-page-header .sonuc-back-btn {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}
.sonuc-page-header .sonuc-back-btn:hover {
    color: #fff;
}

/* Date Navigation */
.sonuc-date-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    background: #0f1923;
    border-radius: 8px;
    margin-bottom: 10px;
}
.sonuc-date-nav .sonuc-date-btn {
    background: #1a2736;
    color: #94a3b8;
    border: 1px solid #2a3a4e;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sonuc-date-nav .sonuc-date-btn:hover {
    background: #243447;
    color: #e2e8f0;
    border-color: #3a5068;
}
.sonuc-date-nav .sonuc-date-btn.today-btn {
    background: #1e40af;
    color: #fff;
    border-color: #2563eb;
}
.sonuc-date-nav .sonuc-date-btn.today-btn:hover {
    background: #2563eb;
}
.sonuc-date-nav .sonuc-date-display {
    font-size: 1rem;
    font-weight: 600;
    color: #e2e8f0;
    min-width: 140px;
    text-align: center;
}

/* Filter Bar */
.sonuc-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #0f1923;
    border-radius: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.sonuc-filter-bar .sonuc-sport-tab {
    background: #1a2736;
    color: #94a3b8;
    border: 1px solid #2a3a4e;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.sonuc-filter-bar .sonuc-sport-tab:hover {
    background: #243447;
    color: #e2e8f0;
}
.sonuc-filter-bar .sonuc-sport-tab.active {
    background: #1e40af;
    color: #fff;
    border-color: #2563eb;
}
/* Searchable Dropdown */
.sonuc-dropdown {
    position: relative;
}
.sonuc-dropdown-toggle {
    background: #1a2736;
    color: #cbd5e1;
    border: 1px solid #2a3a4e;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    max-width: 200px;
    transition: all 0.2s;
}
.sonuc-dropdown-toggle:hover {
    border-color: #3a5068;
    background: #243447;
}
.sonuc-dropdown.open .sonuc-dropdown-toggle {
    border-color: #2563eb;
}
.sonuc-dropdown-label {
    overflow: hidden;
    text-overflow: ellipsis;
}
.sonuc-dropdown-arrow {
    font-size: 0.65rem;
    color: #64748b;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.sonuc-dropdown.open .sonuc-dropdown-arrow {
    transform: rotate(180deg);
}
.sonuc-dropdown-toggle .fi {
    font-size: 0.9rem;
    flex-shrink: 0;
}
.sonuc-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    background: #1a2736;
    border: 1px solid #2a3a4e;
    border-radius: 8px;
    min-width: 220px;
    max-height: 320px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    overflow: hidden;
    display: none;
}
.sonuc-dropdown.open .sonuc-dropdown-menu {
    display: block;
}
.sonuc-dropdown-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid #2a3a4e;
    color: #64748b;
}
.sonuc-dropdown-search-wrap i {
    font-size: 0.8rem;
    flex-shrink: 0;
}
.sonuc-dropdown-search {
    background: transparent;
    border: none;
    outline: none;
    color: #e2e8f0;
    font-size: 0.8rem;
    width: 100%;
}
.sonuc-dropdown-search::placeholder {
    color: #475569;
}
.sonuc-dropdown-list {
    overflow-y: auto;
    max-height: 260px;
    padding: 4px 0;
}
.sonuc-dropdown-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 0.8rem;
    color: #cbd5e1;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}
.sonuc-dropdown-item:hover {
    background: rgba(30, 64, 175, 0.2);
    color: #fff;
}
.sonuc-dropdown-item.active {
    background: #1e40af;
    color: #fff;
}
.sonuc-dropdown-item .fi {
    font-size: 0.9rem;
    flex-shrink: 0;
}
.sonuc-filter-bar .sonuc-search-box {
    position: relative;
    flex: 1;
    min-width: 160px;
    max-width: 260px;
}
.sonuc-filter-bar .sonuc-search-input {
    width: 100%;
    background: #1a2736;
    color: #cbd5e1;
    border: 1px solid #2a3a4e;
    border-radius: 6px;
    padding: 6px 10px 6px 32px;
    font-size: 0.8rem;
}
.sonuc-filter-bar .sonuc-search-input:focus {
    outline: none;
    border-color: #2563eb;
}
.sonuc-filter-bar .sonuc-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 0.82rem;
}
.sonuc-filter-bar .sonuc-result-count {
    color: #64748b;
    font-size: 0.78rem;
    margin-left: auto;
    white-space: nowrap;
}

/* League Group */
.sonuc-league-group {
    background: #0f1923;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid #1a2736;
}
.sonuc-league-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #1a2736;
    font-size: 0.82rem;
    font-weight: 600;
    color: #e2e8f0;
}
.sonuc-league-header .fi {
    font-size: 1rem;
}
.sonuc-league-header .sonuc-league-country {
    color: #94a3b8;
}
.sonuc-league-header .sonuc-league-sep {
    color: #475569;
    font-size: 0.7rem;
}
.sonuc-league-header .sonuc-league-name {
    color: #e2e8f0;
}
.sonuc-league-header .sonuc-league-count {
    margin-left: auto;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 400;
}

/* Match Row */
.sonuc-match-row {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid #1a2736;
    transition: background 0.15s;
    gap: 8px;
}
.sonuc-match-row:last-child {
    border-bottom: none;
}
.sonuc-match-row:hover {
    background: rgba(30, 64, 175, 0.08);
}

/* Time column */
.sonuc-match-time {
    width: 48px;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 500;
}

/* Teams */
.sonuc-match-teams {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sonuc-match-teams .sonuc-team {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sonuc-match-teams .team-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Score */
.sonuc-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 36px;
    flex-shrink: 0;
}
.sonuc-score-val {
    background: #1e40af;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 28px;
    text-align: center;
    line-height: 1.4;
}

/* HT Score */
.sonuc-ht {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    min-width: 70px;
    justify-content: center;
}
.sonuc-ht-label {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 500;
}
.sonuc-ht-val {
    font-size: 0.75rem;
    color: #94a3b8;
    background: #1a2736;
    padding: 1px 6px;
    border-radius: 3px;
}

/* OT Score (Basketball) */
.sonuc-ot {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    min-width: 70px;
    justify-content: center;
}
.sonuc-ot-label {
    font-size: 0.7rem;
    color: #b45309;
    font-weight: 500;
}
.sonuc-ot-val {
    font-size: 0.75rem;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
    padding: 1px 6px;
    border-radius: 3px;
}

/* Empty state */
.sonuc-empty {
    text-align: center;
    padding: 48px 20px;
    color: #64748b;
}
.sonuc-empty i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 12px;
    color: #475569;
}
.sonuc-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* Pagination */
.sonuc-pagination {
    display: flex;
    justify-content: center;
    padding: 12px 0;
}

/* Responsive */
@media (max-width: 767.98px) {
    .sonuc-wrapper {
        padding: 0 4px;
    }
    .sonuc-page-header {
        padding: 10px 12px;
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
    }
    .sonuc-date-nav {
        padding: 8px 10px;
        gap: 6px;
    }
    .sonuc-date-nav .sonuc-date-display {
        font-size: 0.88rem;
        min-width: 110px;
    }
    .sonuc-date-nav .sonuc-date-btn {
        padding: 5px 10px;
        font-size: 0.78rem;
    }
    .sonuc-filter-bar {
        padding: 8px 10px;
        gap: 6px;
    }
    .sonuc-filter-bar .sonuc-search-box {
        min-width: 120px;
        max-width: 100%;
        flex: 1 1 100%;
        order: 10;
    }
    .sonuc-dropdown-toggle {
        max-width: 150px;
        padding: 5px 8px;
        font-size: 0.76rem;
    }
    .sonuc-dropdown-menu {
        min-width: 180px;
        left: auto;
        right: 0;
    }
    .sonuc-match-row {
        padding: 6px 10px;
    }
    .sonuc-match-time {
        width: 38px;
        font-size: 0.72rem;
    }
    .sonuc-match-teams .sonuc-team {
        font-size: 0.76rem;
    }
    .sonuc-ht {
        min-width: 55px;
    }
    .sonuc-ot {
        min-width: 55px;
    }
}

/* ==================== Sanal Bahis ==================== */
.sanal-wrapper {
    max-width: 100%;
}

/* Widget Card */
.sanal-widget-card {
    background: #0d1117;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 16px;
}
.sanal-iframe {
    display: block;
    width: 100%;
    border: none;
}

/* Data Card - Acik Tema */
.sanal-data-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #ddd;
    overflow: hidden;
}
.sanal-data-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
}
.sanal-data-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
}
.sanal-data-title i {
    color: var(--accent-red, #e63946);
    font-size: 1rem;
}
.sanal-matchday {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 500;
}
.sanal-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Update Dot */
.sanal-update-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    display: inline-block;
    transition: all 0.3s;
}
.sanal-update-dot.pulse {
    background: #00e676;
    box-shadow: 0 0 8px rgba(0,230,118,0.5);
}

/* Table Wrap */
.sanal-table-wrap {
    position: relative;
    overflow-x: auto;
}

/* Baslik satiri */
.sanal-row-head {
    background: #f5f6f8;
    border-bottom: 2px solid #e0e0e0;
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 780px;
    gap: 2px;
}
.sanal-row-head:hover {
    background: #f5f6f8;
}

/* Mac satiri - Bulten tarzi flex */
.sanal-match-row {
    display: flex;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid #eee;
    gap: 2px;
    transition: background 0.1s;
    min-width: 780px;
}
/* Ana satir badge secili durumu */
.sanal-match-row .oran-badge.oran-pick.selected {
    background: #1a73e8 !important;
    color: #fff !important;
    border-color: #1a73e8 !important;
}
.sanal-match-row .oran-badge.oran-pick {
    cursor: pointer;
}
.sanal-match-row:hover {
    background: #f8f9fb;
}

/* Kolon genislikleri */
.sanal-col-time {
    width: 46px;
    flex-shrink: 0;
    text-align: center;
}
.sanal-col-status {
    width: 24px;
    flex-shrink: 0;
    text-align: center;
}
.sanal-col-teams {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sanal-col-odds {
    width: 42px;
    flex-shrink: 0;
    text-align: center;
    padding: 0 1px;
}
.sanal-col-odds .oran-badge {
    min-width: 0;
    width: 100%;
    padding: 4px 2px;
    font-size: 0.76rem;
    transition: background 0.15s, color 0.15s;
}
.sanal-col-odds .oran-badge.oran-pick:hover {
    background: #1a73e8;
    color: #fff;
}
.sanal-col-au-line {
    width: 26px;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #888;
}
.sanal-col-extra {
    width: 40px;
    flex-shrink: 0;
    text-align: center;
}

/* Saat */
.sanal-col-time .match-row-hour {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--accent-red, #e63946);
    line-height: 1.2;
}

/* Takimlar */
.sanal-team-home,
.sanal-team-away {
    font-size: 0.82rem;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sanal-team-home {
    flex: 1;
    text-align: right;
}
.sanal-team-away {
    flex: 1;
    text-align: left;
}

/* Skor */
.sanal-score {
    flex-shrink: 0;
    min-width: 60px;
    text-align: center;
}
.sanal-ft {
    font-weight: 700;
    color: #222;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.sanal-ft + small {
    color: #999;
    font-size: 0.7rem;
}
.sanal-vs {
    color: #bbb;
    font-size: 0.78rem;
}

/* Won durumu - yesil arkaplan */
.sanal-won {
    background: #1a6b3c !important;
    color: #fff !important;
    box-shadow: 0 0 6px rgba(26,107,60,0.4);
}

/* Live Dot */
.sanal-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc3545;
    animation: sanalBlink 1s infinite;
}
@keyframes sanalBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Loading Overlay */
.sanal-loading {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.88);
    z-index: 5;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: 0.85rem;
    backdrop-filter: blur(2px);
}
.sanal-loading.active {
    display: flex;
}

/* Bos mesaji */
.sanal-empty-msg {
    text-align: center;
    padding: 24px 14px;
    color: #999;
    font-size: 0.85rem;
}

/* --- Expand Row --- */
.sanal-expand-row {
    background: #f5f6f8;
    border-bottom: 2px solid #e0e0e0;
    padding: 10px 14px;
}
.sanal-expand-empty {
    text-align: center;
    color: #999;
    font-size: 0.82rem;
    padding: 8px;
}
.sanal-expand-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Canli detay ile ayni stilde category + grid */
.sanal-expand-row .detail-category {
    margin-bottom: 0;
}
.sanal-expand-row .detail-odds-btn.oran-pick {
    cursor: pointer;
}
.sanal-expand-row .detail-odds-btn.oran-pick:hover {
    background: #eef1f7;
    border-color: #c0c8d8;
}
.sanal-expand-row .detail-odds-btn.oran-pick.selected {
    background: #1a73e8;
    border-color: #1a73e8;
}
.sanal-expand-row .detail-odds-btn.oran-pick.selected .detail-odds-btn-label,
.sanal-expand-row .detail-odds-btn.oran-pick.selected .detail-odds-btn-value {
    color: #fff;
}
.sanal-expand-row .detail-odds-btn.sanal-won {
    background: #e8f5e9;
    border-color: #1a6b3c;
}
.sanal-expand-row .detail-odds-btn.sanal-won .detail-odds-btn-value {
    color: #1a6b3c;
}
.sanal-expand-row .detail-odds-btn.oran-locked {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile - yatay scroll */
@media (max-width: 768px) {
    .sanal-iframe { min-height: 500px; }
    .sanal-data-header { flex-direction: column; gap: 8px; align-items: flex-start; }
    .sanal-col-odds { width: 38px; }
    .sanal-col-odds .oran-badge { font-size: 0.72rem; padding: 3px 2px; }
    .sanal-col-au-line { width: 18px; font-size: 0.6rem; }
}

/* ============================================
   SLOT SAYFASI
   ============================================ */

.slot-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px;
}

/* Slot Sayfa Arka Plan */
body.slot-page {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: relative;
}

body.slot-page::before {
    background: url('../img/slot-bg.jpg') no-repeat center center;
    background-size: cover;
    opacity: 0.25;
}

/* Üst Bar: Bakiye + Arama */
.slot-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 10px;
    padding: 12px 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.08);
}

.slot-balance-card {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 0.95rem;
    white-space: nowrap;
}

.slot-balance-card i {
    font-size: 1.3rem;
    color: #f1c40f;
}

.slot-balance-label {
    color: rgba(255,255,255,0.7);
}

.slot-balance-value {
    font-weight: 700;
    font-size: 1.1rem;
    color: #2ecc71;
}

.slot-search-box {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 0 14px;
    min-width: 200px;
    max-width: 320px;
    flex-shrink: 1;
}

.slot-search-box i {
    color: rgba(255,255,255,0.4);
    font-size: 0.9rem;
}

.slot-search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    padding: 10px 12px;
    font-size: 0.9rem;
    width: 100%;
}

.slot-search-box input::placeholder {
    color: rgba(255,255,255,0.35);
}

/* Provider Wrapper */
.slot-providers-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.slot-prov-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(26,26,46,0.9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.slot-prov-arrow:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
}

.slot-prov-arrow.hidden {
    opacity: 0.2;
    pointer-events: none;
}

/* Provider Listesi */
.slot-providers {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 12px 0;
    margin: 0;
    flex: 1;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
    -webkit-overflow-scrolling: touch;
}

.slot-providers::-webkit-scrollbar {
    height: 4px;
}

.slot-providers::-webkit-scrollbar-track {
    background: transparent;
}

.slot-providers::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}

.slot-provider-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 80px;
    padding: 10px 8px;
    border-radius: 10px;
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.slot-provider-item:hover {
    background: #22223a;
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

.slot-provider-item.active {
    background: linear-gradient(13deg, rgb(192 57 43 / 75%) 0%, rgb(206 64 49 / 66%) 100%);
    border-color: var(--accent-red);
    box-shadow: 0 0 12px rgba(192,57,43,0.2);
}

.slot-provider-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    flex-shrink: 0;
}

.slot-provider-icon i {
    font-size: 1.1rem;
}

.slot-provider-name {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.7);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 76px;
    line-height: 1.2;
}

.slot-provider-item.active .slot-provider-name {
    color: #fff;
    font-weight: 600;
}

.slot-provider-count {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.06);
    padding: 1px 6px;
    border-radius: 8px;
    line-height: 1.4;
}

.slot-provider-item.active .slot-provider-count {
    background: rgba(192,57,43,0.25);
    color: rgba(255,255,255,0.7);
}

/* Loading */
.slot-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    padding: 60px 0;
    font-size: 0.9rem;
}

/* Boş mesaj */
.slot-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    padding: 60px 0;
    gap: 10px;
}

.slot-empty i {
    font-size: 2.5rem;
}

.slot-empty p {
    margin: 0;
    font-size: 0.95rem;
}

/* Oyun Grid */
.slot-game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

/* Oyun Kartı */
.slot-game-card {
    background: #1a1a2e;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.slot-game-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.slot-game-thumb {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #12122a;
}

.slot-game-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slot-game-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255,255,255,0.25);
    font-size: 2.5rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #2a1a3e 100%);
}

.slot-game-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.slot-game-card:hover .slot-game-overlay {
    opacity: 1;
}

.slot-play-btn {
    background: var(--accent-red);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}

.slot-play-btn:hover {
    background: #e74c3c;
}

.slot-game-info {
    padding: 10px 12px;
}

.slot-game-name {
    color: rgba(255,255,255,0.85);
    font-size: 0.8rem;
    font-weight: 500;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Oyun iframe Görünümü */
.slot-game-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 16px;
}

.slot-back-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}

.slot-back-btn:hover {
    background: rgba(255,255,255,0.15);
}

.slot-game-title {
    color: rgba(255,255,255,0.9);
    font-size: 1rem;
    font-weight: 600;
}

.slot-iframe-wrap {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: #000;
}

.slot-iframe {
    width: 100%;
    height: calc(100vh - 180px);
    border: none;
    display: block;
}

/* Slot Subnav */
.slot-subnav {
    display: flex;
    gap: 6px;
    padding: 0 16px 10px;
}

.slot-subnav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    background: #1a1a2e;
    color: rgba(255,255,255,0.75);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.slot-subnav-item:hover {
    background: #252540;
    color: #fff;
}

.slot-subnav-item.active {
    background: linear-gradient(135deg, rgba(192,57,43,0.8), rgba(206,64,49,0.7));
    border-color: rgba(192,57,43,0.5);
    color: #fff;
}

.slot-subnav-item i {
    font-size: 0.9rem;
}

/* Slot Fav Button */
.slot-fav-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: all 0.2s;
    opacity: 0;
}

.slot-game-card:hover .slot-fav-btn {
    opacity: 1;
}

.slot-fav-btn:hover {
    background: rgba(0,0,0,0.7);
    color: #fff;
    transform: scale(1.1);
}

.slot-fav-btn.active {
    color: #e74c3c;
    opacity: 1;
}

.slot-fav-btn.active:hover {
    color: #c0392b;
}

/* Slot responsive */
@media (max-width: 768px) {
    .slot-wrapper { padding: 10px; }
    .slot-topbar { flex-direction: column; align-items: stretch; padding: 10px 14px; }
    .slot-search-box { max-width: 100%; min-width: 0; }
    .slot-game-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
    .slot-balance-value { font-size: 1rem; }
    .slot-iframe { height: calc(100vh - 160px); }
}

@media (max-width: 480px) {
    .slot-game-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
    .slot-game-info { padding: 8px 10px; }
    .slot-game-name { font-size: 0.75rem; }
}